264 lines
16 KiB
HTML
264 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>RYM Horizon — Cockpit Intégré v3.1.3</title>
|
|
<link
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
|
|
rel="stylesheet"
|
|
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
|
|
crossorigin="anonymous"
|
|
>
|
|
<link
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"
|
|
rel="stylesheet"
|
|
integrity="sha384-4LISF5TTv3qMT719A6O7faWdgANoF94m85M84IfTWM5cKWAYjHL0ive8SkWAAAAA"
|
|
crossorigin="anonymous"
|
|
>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<header class="bg-white border-bottom py-3 sticky-top">
|
|
<div class="container-fluid px-4 d-flex align-items-center justify-content-between">
|
|
<div class="d-flex align-items-center">
|
|
<span class="fw-bold fs-4 me-4">Rym<span class="text-primary">Horizon</span></span>
|
|
<div class="nav nav-view-switcher" role="tablist">
|
|
<button class="nav-link" data-tab="view-day">Jour</button>
|
|
<button class="nav-link active" data-tab="view-week">Semaine</button>
|
|
<button class="nav-link" data-tab="view-month">Mois</button>
|
|
<button class="nav-link" data-tab="view-macro">Macro</button>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-items-center">
|
|
<div class="text-end me-3">
|
|
<small class="text-muted d-block" style="font-size: 0.7rem;">RYM BANK</small>
|
|
<span class="fw-bold">19 420,00 €</span>
|
|
</div>
|
|
<i class="bi bi-wallet2 fs-4 text-primary"></i>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container-fluid py-4 px-4">
|
|
|
|
<section class="row g-4 mb-5">
|
|
<div class="col-12">
|
|
<div class="bg-white rounded-4 p-3 border d-flex justify-content-around flex-wrap gap-4">
|
|
<div class="d-flex align-items-center gap-3">
|
|
<div class="spinner-container">
|
|
<svg width="60" height="60"><circle cx="30" cy="30" r="26" fill="none" stroke="#e2e8f0" stroke-width="4"/><circle cx="30" cy="30" r="26" fill="none" stroke="#0d9488" stroke-width="4" stroke-dasharray="163" stroke-dashoffset="80"/></svg>
|
|
<div class="spinner-value" style="color:#0d9488" id="val-charge">12h</div>
|
|
</div>
|
|
<div><small class="text-muted d-block">Entraînement</small><span class="fw-bold">Charge Hebdo</span></div>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-3">
|
|
<div class="spinner-container">
|
|
<svg width="60" height="60"><circle cx="30" cy="30" r="26" fill="none" stroke="#e2e8f0" stroke-width="4"/><circle cx="30" cy="30" r="26" fill="none" stroke="#16a34a" stroke-width="4" stroke-dasharray="163" stroke-dashoffset="30"/></svg>
|
|
<div class="spinner-value text-success" id="val-recup">82%</div>
|
|
</div>
|
|
<div><small class="text-muted d-block">Récupération</small><span class="fw-bold">VRC / Sommeil</span></div>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-3">
|
|
<div class="spinner-container">
|
|
<svg width="60" height="60"><circle cx="30" cy="30" r="26" fill="none" stroke="#e2e8f0" stroke-width="4"/><circle cx="30" cy="30" r="26" fill="none" stroke="#2563eb" stroke-width="4" stroke-dasharray="163" stroke-dashoffset="40"/></svg>
|
|
<div class="spinner-value text-primary" id="val-nutrition">75%</div>
|
|
</div>
|
|
<div><small class="text-muted d-block">Nutrition</small><span class="fw-bold">Macro Cibles</span></div>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-3">
|
|
<div class="spinner-container">
|
|
<svg width="60" height="60"><circle cx="30" cy="30" r="26" fill="none" stroke="#e2e8f0" stroke-width="4"/><circle cx="30" cy="30" r="26" fill="none" stroke="#0284c7" stroke-width="4" stroke-dasharray="163" stroke-dashoffset="50"/></svg>
|
|
<div class="spinner-value" style="color:#0284c7" id="val-hydra">2.5L</div>
|
|
</div>
|
|
<div><small class="text-muted d-block">Hydratation</small><span class="fw-bold">Eau / Électro</span></div>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-3">
|
|
<div class="spinner-container">
|
|
<svg width="60" height="60"><circle cx="30" cy="30" r="26" fill="none" stroke="#e2e8f0" stroke-width="4"/><circle cx="30" cy="30" r="26" fill="none" stroke="#f59e0b" stroke-width="4" stroke-dasharray="163" stroke-dashoffset="120"/></svg>
|
|
<div class="spinner-value text-warning" id="val-soins">Kiné</div>
|
|
</div>
|
|
<div><small class="text-muted d-block">Soins / Santé</small><span class="fw-bold">Fatigue Musc.</span></div>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-3">
|
|
<div class="spinner-container">
|
|
<svg width="60" height="60"><circle cx="30" cy="30" r="26" fill="none" stroke="#e2e8f0" stroke-width="4"/><circle cx="30" cy="30" r="26" fill="none" stroke="#ea580c" stroke-width="4" stroke-dasharray="163" stroke-dashoffset="130"/></svg>
|
|
<div class="spinner-value text-danger" id="val-matos">22%</div>
|
|
</div>
|
|
<div><small class="text-muted d-block">Matériel</small><span class="fw-bold text-danger">MCO Critique</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="tab-content">
|
|
|
|
<div class="tab-pane" id="view-day">
|
|
<div class="row">
|
|
<div class="col-lg-6 mx-auto">
|
|
<h2 class="fw-bold h4 mb-4">Aujourd'hui, Samedi 23 mai</h2>
|
|
<div class="day-part-card">
|
|
<span class="text-muted small fw-bold">MATIN</span>
|
|
<div class="workout swim"><i class="bi bi-water me-2"></i><strong>Natation</strong> - 1h15 Endurance (2500m)</div>
|
|
</div>
|
|
<div class="day-part-card day-part-active">
|
|
<span class="text-primary small fw-bold">APRÈS-MIDI</span>
|
|
<p class="text-muted small mt-2">Repos actif / Préparation vélo</p>
|
|
</div>
|
|
<div class="day-part-card">
|
|
<span class="text-muted small fw-bold">SOIR</span>
|
|
<div class="workout run"><i class="bi bi-speedometer2 me-2"></i><strong>Course</strong> - 45' Footing souple</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane active" id="view-week">
|
|
<div class="row g-4">
|
|
<div class="col-xl-3">
|
|
<div class="bg-white border rounded-4 p-4 sticky-md-top" style="top: 90px; z-index: 10;">
|
|
<h5 class="fw-bold mb-3"><i class="bi bi-plus-circle-fill text-primary me-2"></i>RYM Coach Engine</h5>
|
|
<p class="text-muted small">Créez une activité ou une tâche de maintenance et planifiez-la par Drag & Drop.</p>
|
|
<hr class="text-muted opacity-25">
|
|
|
|
<form id="rym-coach-generator" autocomplete="off">
|
|
<div class="mb-3">
|
|
<label class="form-label small fw-bold text-muted">TYPE DE COMPOSANT</label>
|
|
<select class="form-select form-select-sm" id="gen-type">
|
|
<option value="run">🏃 Course à pied</option>
|
|
<option value="bike">🚴 Vélo / Home-Trainer</option>
|
|
<option value="swim">🏊 Natation</option>
|
|
<option value="matos">🔧 Maintenance Matériel</option>
|
|
<option value="soins">🧘 Soins / Récupération</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label small fw-bold text-muted">TITRE / DESCRIPTION</label>
|
|
<input type="text" class="form-control form-control-sm" id="gen-title" placeholder="ex: 6x800m VMA ou Purge freins" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary btn-sm w-100 fw-bold">Générer le Badge</button>
|
|
</form>
|
|
|
|
<div class="mt-4">
|
|
<label class="form-label small fw-bold text-muted d-block mb-2">BADGE PRÊT À GLISSER :</label>
|
|
<div id="badge-production-zone" class="p-3 border border-dashed rounded-3 bg-light text-center small text-muted">
|
|
Aucun badge généré
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-9">
|
|
<div class="d-flex justify-content-between align-items-end mb-3">
|
|
<h2 class="fw-bold h4 mb-0">Timeline Hebdomadaire</h2>
|
|
<span class="text-muted small">Semaine 21 — Bloc Intensité</span>
|
|
</div>
|
|
<div class="timeline-scroll">
|
|
<div class="day-card drop-zone" data-day="Lun">
|
|
<span class="d-block fw-bold">Lundi 18</span>
|
|
<small class="text-muted">Repos</small>
|
|
<div class="mt-4 text-center py-3 border rounded-3 border-dashed">😴 Assimilation</div>
|
|
</div>
|
|
<div class="day-card drop-zone" data-day="Mar">
|
|
<span class="d-block fw-bold">Mardi 19</span>
|
|
<small class="text-muted">Haute Intensité</small>
|
|
<div class="workout run rym-draggable-workout" draggable="true" id="w-vma">
|
|
<i class="bi bi-lightning-fill me-1"></i> 6x800m VMA
|
|
</div>
|
|
</div>
|
|
<div class="day-card today drop-zone" data-day="Mer">
|
|
<span class="d-block fw-bold text-primary">Mercredi 20 (Aujourd'hui)</span>
|
|
<small class="text-primary fw-bold">Bi-quotidien</small>
|
|
<div class="workout swim rym-draggable-workout" draggable="true" id="w-swim">
|
|
<i class="bi bi-water me-1"></i> Swim 2500m
|
|
</div>
|
|
<div class="workout bike rym-draggable-workout" draggable="true" id="w-bike">
|
|
<i class="bi bi-bicycle"></i> H.Trainer 1h
|
|
</div>
|
|
</div>
|
|
<div class="day-card drop-zone" data-day="Jeu">
|
|
<span class="d-block fw-bold">Jeudi 21</span>
|
|
<small class="text-muted">Récupération</small>
|
|
<div class="workout run rym-draggable-workout" draggable="true" id="w-footing">
|
|
<i class="bi bi-speedometer2 me-1"></i> Footing 40'
|
|
</div>
|
|
</div>
|
|
<div class="day-card drop-zone" data-day="Ven">
|
|
<span class="d-block fw-bold">Vendredi 22</span>
|
|
<small class="text-muted">Repos</small>
|
|
<div class="mt-4 text-center py-3 border rounded-3 border-dashed">🧘 Flexibilité</div>
|
|
</div>
|
|
<div class="day-card drop-zone" data-day="Sam">
|
|
<span class="d-block fw-bold">Samedi 23</span>
|
|
<small class="text-muted">Sortie Longue</small>
|
|
</div>
|
|
<div class="day-card drop-zone" data-day="Dim">
|
|
<span class="d-block fw-bold">Dimanche 24</span>
|
|
<small class="text-muted">Enchaînement</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane" id="view-month">
|
|
<div class="row g-3">
|
|
<div class="col-md-3">
|
|
<div class="bg-white border rounded-4 p-3">
|
|
<h6 class="fw-bold">Semaine 1</h6>
|
|
<div class="progress mb-2" style="height: 6px;"><div class="progress-bar bg-primary" style="width: 70%"></div></div>
|
|
<small class="text-muted">Focus : Volume Foncier</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="bg-white border rounded-4 p-3">
|
|
<h6 class="fw-bold">Semaine 2</h6>
|
|
<div class="progress mb-2" style="height: 6px;"><div class="progress-bar bg-primary" style="width: 85%"></div></div>
|
|
<small class="text-muted">Focus : Charge Progressive</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="bg-white border rounded-4 p-3">
|
|
<h6 class="fw-bold">Semaine 3</h6>
|
|
<div class="progress mb-2" style="height: 6px;"><div class="progress-bar bg-primary" style="width: 40%"></div></div>
|
|
<small class="text-muted">Focus : Assimilation / Repos</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="bg-white border rounded-4 p-3">
|
|
<h6 class="fw-bold">Semaine 4</h6>
|
|
<div class="progress mb-2" style="height: 6px;"><div class="progress-bar bg-primary" style="width: 90%"></div></div>
|
|
<small class="text-muted">Focus : Intensité Cible</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane" id="view-macro">
|
|
<div class="macro-card">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<h2 class="fw-bold mb-3">Saison 2026 : Road to Ironman Vitoria</h2>
|
|
<p class="opacity-75">Cycle de 24 semaines — Actuellement en Phase de Spécificité 1.</p>
|
|
<div class="d-flex gap-2 mt-4">
|
|
<span class="badge bg-primary">Prep Foncière</span>
|
|
<span class="badge bg-primary">Prep Spécifique</span>
|
|
<span class="badge bg-outline-light border text-white opacity-50">Affûtage</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 text-end">
|
|
<div class="h1 fw-bold">J - 142</div>
|
|
<small class="opacity-75">Avant l'objectif A</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<script src="app.js" defer></script>
|
|
</body>
|
|
</html>
|