Skip to content

improve website #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chouteau merged 2 commits into from
Aug 6, 2026
Merged

improve website #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6e7cfd3
Replace screenshots grid with responsive carousel
chouteau Aug 6, 2026
51bd2b0
Merge pull request #1 from chouteau/mc/dev
chouteau Aug 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added docs/assets/trainingify-dashboard-0.9.1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/trainingify-device-control-0.9.1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/trainingify-super-col-detail-0.9.1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/trainingify-super-cols-0.9.1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/trainingify-training-plan-0.9.1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/trainingify-workouts-0.9.1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
166 changes: 166 additions & 0 deletions docs/css/site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -871,6 +871,153 @@ a {
}

/* SCREENSHOTS SECTION */
.screenshot-carousel {
position: relative;
max-width: 1280px;
margin: 0 auto 48px;
}

.screenshot-carousel-viewport {
overflow: hidden;
margin: 0;
background: var(--color-bg-alt);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.screenshot-carousel-track {
display: flex;
transition: transform 0.45s ease;
will-change: transform;
}

.carousel-slide {
min-width: 100%;
margin: 0;
display: flex;
flex-direction: column;
}

.carousel-slide .actual-screenshot-caption {
flex: 1;
}

.actual-screenshot-frame {
padding: 10px;
background: #07080b;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.actual-screenshot-frame img {
display: block;
width: 100%;
height: auto;
border-radius: 8px;
}

.actual-screenshot-caption {
padding: 22px 24px 24px;
}

.actual-screenshot-caption h3 {
margin: 12px 0 8px;
font-size: 1.25rem;
}

.actual-screenshot-caption p {
margin: 0;
color: var(--color-text-muted);
font-size: 0.9rem;
line-height: 1.6;
}

.carousel-control {
position: absolute;
top: 34%;
z-index: 2;
width: 46px;
height: 46px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 50%;
background: rgba(10, 11, 15, 0.88);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition-smooth);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32);
}

.carousel-control:hover,
.carousel-control:focus-visible {
background: var(--gradient-orange-red);
border-color: transparent;
transform: scale(1.06);
outline: none;
}

.carousel-control-prev {
left: -23px;
}

.carousel-control-next {
right: -23px;
}

.carousel-footer {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-top: 18px;
}

.carousel-dots {
display: flex;
align-items: center;
gap: 8px;
}

.carousel-dot {
width: 9px;
height: 9px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.22);
cursor: pointer;
transition: var(--transition-smooth);
}

.carousel-dot:hover,
.carousel-dot:focus-visible {
background: rgba(255, 255, 255, 0.65);
outline: none;
}

.carousel-dot.is-active {
width: 28px;
background: var(--gradient-orange-red);
}

.carousel-counter {
min-width: 42px;
color: var(--color-text-muted);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
}

@media (prefers-reduced-motion: reduce) {
.screenshot-carousel-track,
.carousel-control,
.carousel-dot {
transition: none;
}
}

.screenshots-grid {
display: flex;
justify-content: center;
Expand Down Expand Up @@ -1553,6 +1700,7 @@ a {
flex-direction: column;
align-items: center;
}

}

@media (max-width: 768px) {
Expand Down Expand Up @@ -1611,4 +1759,22 @@ a {
.device-simulator-row {
grid-template-columns: 1fr;
}

.carousel-control {
top: 31%;
width: 38px;
height: 38px;
}

.carousel-control-prev {
left: 10px;
}

.carousel-control-next {
right: 10px;
}

.actual-screenshot-caption {
padding: 20px;
}
}
135 changes: 78 additions & 57 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -286,70 +286,91 @@ <h2 class="section-title">L'interface au cœur de la <span class="text-gradient-
Une interface sombre, épurée et optimisée pour une lisibilité maximale à haute intensité. Conçue pour être consultée en plein effort, les yeux brouillés par la fatigue.
</p>
</div>

<div class="screenshots-grid">

<!-- Mockup 1: Dashboard -->
<div class="screenshot-card">
<div class="screenshot-header-bar">
<span class="dot-btn green"></span>
<span class="dot-btn yellow"></span>
<span class="dot-btn red"></span>
<span class="mock-title">TRAININGIFY DASHBOARD</span>
</div>
<div class="mockup-container ui-dashboard">
<!-- Simulated dashboard UI using CSS/HTML -->
<div class="mock-ui-header">
<span>SÉANCE ACTIVE : PMA BURST 5x5</span>
<span class="mock-timer">00:34:12</span>
</div>

<div class="mock-ui-main-metrics">
<div class="metric-box box-power glow-orange">
<span class="lbl">PUISSANCE</span>
<span class="val pulse-text">380</span>
<span class="unit">WATTS</span>

<div class="screenshot-carousel" data-screenshot-carousel aria-label="Captures de l'application Trainingify">
<div class="screenshot-carousel-viewport" role="region" aria-live="polite">
<div class="screenshot-carousel-track" data-carousel-track>
<figure class="carousel-slide is-active">
<div class="actual-screenshot-frame">
<img src="assets/trainingify-dashboard-0.9.1.png" alt="Écran d'accueil Trainingify 0.9.1 avec la progression du cycliste et les statistiques d'entraînement" loading="eager" decoding="async">
</div>
<div class="metrics-column">
<div class="metric-box box-hr">
<span class="lbl">CARDIAQUE</span>
<span class="val"><i class="fa-solid fa-heart pulse-icon text-red"></i> 178</span>
<span class="unit">BPM</span>
</div>
<div class="metric-box box-cadence">
<span class="lbl">CADENCE</span>
<span class="val">98</span>
<span class="unit">RPM</span>
</div>
<figcaption class="actual-screenshot-caption">
<span class="preview-overlay-tag"><i class="fa-solid fa-house"></i> Application Windows</span>
<h3>Votre progression, en un coup d'œil</h3>
<p>Le tableau de bord Trainingify rassemble vos séances, votre temps d'entraînement, votre puissance et votre charge cumulée dans une interface claire et immersive.</p>
</figcaption>
</figure>

<figure class="carousel-slide">
<div class="actual-screenshot-frame">
<img src="assets/trainingify-training-plan-0.9.1.png" alt="Écran du plan d'entraînement Trainingify avec les séances organisées par semaine" loading="lazy" decoding="async">
</div>
</div>

<div class="mock-ui-graph">
<!-- Interval graph -->
<div class="graph-bar past" style="height: 40%"></div>
<div class="graph-bar past" style="height: 40%"></div>
<div class="graph-bar active glow-red" style="height: 90%; background: var(--gradient-red-yellow);">
<span class="graph-label">ACTUEL</span>
<figcaption class="actual-screenshot-caption">
<span class="preview-overlay-tag"><i class="fa-solid fa-calendar-days"></i> Planification</span>
<h3>Structurez votre progression</h3>
<p>Visualisez vos semaines et vos séances à venir pour garder une trajectoire claire jusqu'à votre objectif.</p>
</figcaption>
</figure>

<figure class="carousel-slide">
<div class="actual-screenshot-frame">
<img src="assets/trainingify-workouts-0.9.1.png" alt="Écran Workouts Trainingify avec les métriques et la courbe de puissance d'une séance" loading="lazy" decoding="async">
</div>
<div class="graph-bar future" style="height: 30%"></div>
<div class="graph-bar future" style="height: 90%"></div>
<div class="graph-bar future" style="height: 30%"></div>
<div class="graph-bar future" style="height: 40%"></div>
</div>

<div class="mock-ui-overlay-msg">
<i class="fa-solid fa-triangle-exclamation"></i> INTERVALLE PMA CIBLE : 380W - TENEZ BON !
</div>
</div>
<div class="screenshot-info">
<h3>Console de Pilotage en Course</h3>
<p>Affiche vos métriques vitales en taille XXL. Les couleurs d'arrière-plan reflètent instantanément vos zones FTP pour savoir si vous êtes au-dessus ou en-dessous de la cible d'un simple coup d'œil.</p>
<span class="preview-overlay-tag"><i class="fa-solid fa-crop-simple"></i> Capture d'écran finale en attente de synchronisation</span>
<figcaption class="actual-screenshot-caption">
<span class="preview-overlay-tag"><i class="fa-solid fa-person-biking"></i> Workouts</span>
<h3>Chaque séance, au bon niveau</h3>
<p>Suivez l'intensité, la puissance et les zones d'effort pendant votre workout pour transformer chaque intervalle en progrès.</p>
</figcaption>
</figure>

<figure class="carousel-slide">
<div class="actual-screenshot-frame">
<img src="assets/trainingify-super-cols-0.9.1.png" alt="Catalogue Trainingify des parcours de cols réels avec le Tourmalet et le Mont Ventoux" loading="lazy" decoding="async">
</div>
<figcaption class="actual-screenshot-caption">
<span class="preview-overlay-tag"><i class="fa-solid fa-mountain"></i> Super Cols</span>
<h3>Parcourez les vrais cols</h3>
<p>Choisissez un parcours réel et laissez le profil de la route piloter directement la résistance de votre home trainer.</p>
</figcaption>
</figure>

<figure class="carousel-slide">
<div class="actual-screenshot-frame">
<img src="assets/trainingify-super-col-detail-0.9.1.png" alt="Détail du parcours du col du Tourmalet avec le profil de pente coloré" loading="lazy" decoding="async">
</div>
<figcaption class="actual-screenshot-caption">
<span class="preview-overlay-tag"><i class="fa-solid fa-chart-area"></i> Profil de pente</span>
<h3>Chaque kilomètre compte</h3>
<p>Anticipez les variations de pente et visualisez l'ascension complète avant de vous lancer dans le défi.</p>
</figcaption>
</figure>

<figure class="carousel-slide">
<div class="actual-screenshot-frame">
<img src="assets/trainingify-device-control-0.9.1.png" alt="Écran Device Control Trainingify pour rechercher des capteurs Bluetooth et ANT+" loading="lazy" decoding="async">
</div>
<figcaption class="actual-screenshot-caption">
<span class="preview-overlay-tag"><i class="fa-solid fa-link"></i> Device Control</span>
<h3>Connectez tout votre écosystème</h3>
<p>Recherchez et pilotez vos capteurs, home trainers et périphériques BLE ou ANT+ depuis un seul écran.</p>
</figcaption>
</figure>
</div>
</div>


<button type="button" class="carousel-control carousel-control-prev" data-carousel-prev aria-label="Capture précédente">
<i class="fa-solid fa-chevron-left" aria-hidden="true"></i>
</button>
<button type="button" class="carousel-control carousel-control-next" data-carousel-next aria-label="Capture suivante">
<i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
</button>

<div class="carousel-footer">
<div class="carousel-dots" data-carousel-dots role="tablist" aria-label="Choisir une capture"></div>
<span class="carousel-counter" data-carousel-counter aria-live="polite">1 / 6</span>
</div>
</div>

</div>
</section>

Expand Down
Loading
Loading