diff --git a/src/App.svelte b/src/App.svelte index 719d74d..6d0e402 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -98,7 +98,7 @@ style="width: {wrapperWidth}; transform: {wrapperTransform}" > {#each slides.all as slide, i} -
+
{#if slide.loaded} ← BEFORE -
+
    {#each { length: totalSlides } as _, i} - +
  • + +
    • {/each} -
+ @@ -128,7 +128,7 @@ /* Text overlay */ .home-text { z-index: var(--z-content); - grid-area: 9/1 / span 6 / span 20; + grid-area: 10/1 / span 6 / span 20; width: 100%; justify-self: center; margin-top: 6vmax; diff --git a/src/views/Play.svelte b/src/views/Play.svelte index 0a299b7..936f443 100644 --- a/src/views/Play.svelte +++ b/src/views/Play.svelte @@ -285,7 +285,6 @@ alt="" /> {/if} - {game.title} {/each} @@ -456,16 +455,10 @@ .play-carousel-item.active button :global(picture img) { object-fit: cover; transition: all 0.4s var(--ease-standard); - border: 4px solid var(--color-primary); + border: 5px solid var(--color-primary); border-radius: 25%; } - .play-carousel-title { - font-size: var(--font-size-caption); - color: var(--color-text); - text-align: center; - } - /* --- Mobile (≤ 700px) --- */ @media (max-width: 700px) { .game-preview { diff --git a/src/views/WhitePapers.svelte b/src/views/WhitePapers.svelte index 4fff64e..f07ebe3 100644 --- a/src/views/WhitePapers.svelte +++ b/src/views/WhitePapers.svelte @@ -134,13 +134,13 @@ {#if item.intro}

{item.intro}

{/if} - + {t('read_wp')} → {#if item.cover}
- + {item.title}
diff --git a/test_anim__archive1/CLAUDE.md b/test_anim__archive1/CLAUDE.md deleted file mode 100644 index d705010..0000000 --- a/test_anim__archive1/CLAUDE.md +++ /dev/null @@ -1,53 +0,0 @@ -# CLAUDE.md - -This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. - -## Project Overview - -This is a **prototype for an animated image gallery component** intended for integration into a Kirby CMS project. The animation displays images in a continuous scrolling pattern across multiple columns/rows. - -## Running the Project - -This is a PHP project with no build system. To run locally: -```bash -php -S localhost:8000 -``` -Then open `http://localhost:8000` in a browser. - -## Architecture - -### Configuration (index.php:1-28) - -The animation is configured via PHP variables at the top of `index.php`: -- `$mode`: `'vertical'` or `'horizontal'` - scroll direction -- `$set`: Image set name (e.g., `'LEGACY'`, `'OLLY'`) -- `$secondsPerImage`: Controls animation speed -- `$imagesSets`: Associative array defining image paths per set - -### Animation System - -**CSS-based infinite scroll** using duplicated images: -- Images are rendered twice in each track (`index.php:63-68`) to create seamless looping -- Animation translates from 0 to -50% (or vice versa), jumping back invisibly when the duplicate starts -- Odd columns scroll down/right; even columns scroll up/left -- Column offsets and delays are calculated based on image count to stagger the animation - -**Key CSS classes** (BEM notation): -- `.gallery-animation--vertical` / `.gallery-animation--horizontal`: Mode modifiers -- `.gallery-animation__wrapper`: Flex container for columns -- `.gallery-animation__column`: Individual scrolling lane -- `.gallery-animation__track`: Animated element containing images -- `.gallery-animation__image`: Individual image styling - -**CSS custom properties**: -- `--animation-duration`: Total cycle duration (set via PHP) -- `--gap`: Spacing between columns/rows -- `--vertical-wrapper-width`: Container width in vertical mode - -### Accessibility - -Respects `prefers-reduced-motion` by disabling animations (`style.css:149-153`). - -## Language - -Code comments and documentation are in French. diff --git a/test_anim__archive1/NOTES.md b/test_anim__archive1/NOTES.md deleted file mode 100644 index 39807c4..0000000 --- a/test_anim__archive1/NOTES.md +++ /dev/null @@ -1,50 +0,0 @@ -# Animation Galerie d'Images - -## Fichiers - -- `style.css` : CSS de l'animation (à intégrer dans le projet Kirby) -- `index.html` : Page de test -- `images/` : Images de test - -## Usage - -```html -
- -
-``` - -### Variables CSS - -```css -.gallery-animation { - --animation-duration: 30s; /* Durée de l'animation */ - --gap: 1rem; /* Espacement entre colonnes/rangées */ -} -``` - -### Structure HTML - -**Mode vertical** (3 colonnes) : -```html -
-
-
-
- - -
-
- -
-
-``` - -**Mode horizontal** (3 rangées) : remplacer `--vertical` par `--horizontal` et `__column` par `__row`. - -## Comportement - -- Colonnes impaires : défilent vers le bas / droite -- Colonnes paires : défilent vers le haut / gauche -- Images dupliquées dans le HTML pour transition fluide -- Décalage automatique entre colonnes/rangées via `animation-delay` diff --git a/test_anim__archive1/images/LEGACY/apples-averywhere.png b/test_anim__archive1/images/LEGACY/apples-averywhere.png deleted file mode 100644 index 8739857..0000000 Binary files a/test_anim__archive1/images/LEGACY/apples-averywhere.png and /dev/null differ diff --git a/test_anim__archive1/images/LEGACY/legacy-menu-pause.png b/test_anim__archive1/images/LEGACY/legacy-menu-pause.png deleted file mode 100644 index 7f70a11..0000000 Binary files a/test_anim__archive1/images/LEGACY/legacy-menu-pause.png and /dev/null differ diff --git a/test_anim__archive1/images/LEGACY/legacy-screen-6.png b/test_anim__archive1/images/LEGACY/legacy-screen-6.png deleted file mode 100644 index a2db396..0000000 Binary files a/test_anim__archive1/images/LEGACY/legacy-screen-6.png and /dev/null differ diff --git a/test_anim__archive1/images/LEGACY/legacy-screen-7.png b/test_anim__archive1/images/LEGACY/legacy-screen-7.png deleted file mode 100644 index a58506a..0000000 Binary files a/test_anim__archive1/images/LEGACY/legacy-screen-7.png and /dev/null differ diff --git a/test_anim__archive1/images/LEGACY/run-and-eat-to-survive.png b/test_anim__archive1/images/LEGACY/run-and-eat-to-survive.png deleted file mode 100644 index 4f6c0c7..0000000 Binary files a/test_anim__archive1/images/LEGACY/run-and-eat-to-survive.png and /dev/null differ diff --git a/test_anim__archive1/images/LEGACY/you-won_t-live-forever.png b/test_anim__archive1/images/LEGACY/you-won_t-live-forever.png deleted file mode 100644 index cbfd4f9..0000000 Binary files a/test_anim__archive1/images/LEGACY/you-won_t-live-forever.png and /dev/null differ diff --git a/test_anim__archive1/images/OLLY/lesson_contentblock01.png b/test_anim__archive1/images/OLLY/lesson_contentblock01.png deleted file mode 100644 index 0f5865d..0000000 Binary files a/test_anim__archive1/images/OLLY/lesson_contentblock01.png and /dev/null differ diff --git a/test_anim__archive1/images/OLLY/lesson_contentblock04.png b/test_anim__archive1/images/OLLY/lesson_contentblock04.png deleted file mode 100644 index acf132c..0000000 Binary files a/test_anim__archive1/images/OLLY/lesson_contentblock04.png and /dev/null differ diff --git a/test_anim__archive1/images/OLLY/lesson_contentblock05.png b/test_anim__archive1/images/OLLY/lesson_contentblock05.png deleted file mode 100644 index 2cd70f8..0000000 Binary files a/test_anim__archive1/images/OLLY/lesson_contentblock05.png and /dev/null differ diff --git a/test_anim__archive1/images/OLLY/lesson_cover01.png b/test_anim__archive1/images/OLLY/lesson_cover01.png deleted file mode 100644 index 301a42f..0000000 Binary files a/test_anim__archive1/images/OLLY/lesson_cover01.png and /dev/null differ diff --git a/test_anim__archive1/images/OLLY/quiz_choosemode.png b/test_anim__archive1/images/OLLY/quiz_choosemode.png deleted file mode 100644 index 478d0ed..0000000 Binary files a/test_anim__archive1/images/OLLY/quiz_choosemode.png and /dev/null differ diff --git a/test_anim__archive1/images/OLLY/quiz_quadmode.png b/test_anim__archive1/images/OLLY/quiz_quadmode.png deleted file mode 100644 index a02327f..0000000 Binary files a/test_anim__archive1/images/OLLY/quiz_quadmode.png and /dev/null differ diff --git a/test_anim__archive1/index.php b/test_anim__archive1/index.php deleted file mode 100644 index 8ef5840..0000000 --- a/test_anim__archive1/index.php +++ /dev/null @@ -1,76 +0,0 @@ - [ - 'images/LEGACY/apples-averywhere.png', - 'images/LEGACY/legacy-menu-pause.png', - 'images/LEGACY/legacy-screen-6.png', - 'images/LEGACY/legacy-screen-7.png', - 'images/LEGACY/run-and-eat-to-survive.png', - 'images/LEGACY/you-won_t-live-forever.png', - ], - 'OLLY' => [ - 'images/OLLY/lesson_contentblock01.png', - 'images/OLLY/lesson_contentblock04.png', - 'images/OLLY/lesson_contentblock05.png', - 'images/OLLY/lesson_cover01.png', - 'images/OLLY/quiz_choosemode.png', - 'images/OLLY/quiz_quadmode.png', - ], -]; - -$images = $imagesSets[$set]; -$count = count($images); -$duration = $count * $secondsPerImage; // durée calculée selon le nombre d'images - -// Décalage par colonne basé sur le nombre d'images -// Colonnes 1 et 3 vont dans la même direction, donc décalées de 1/2 -// Colonne 2 va dans l'autre direction, décalée de 1/4 -$columns = [ - ['offset' => 0, 'delay' => 0], - ['offset' => (int)($count / 3), 'delay' => $duration / 4], - ['offset' => 0, 'delay' => $duration / 2], -]; - -function getShiftedImages($images, $offset) { - return array_merge( - array_slice($images, $offset), - array_slice($images, 0, $offset) - ); -} -?> - - - - - - Test Animation Galerie - - - - -
-
- -
-
- - - - - - -
-
- -
-
- - - diff --git a/test_anim__archive1/style.css b/test_anim__archive1/style.css deleted file mode 100644 index fe48b32..0000000 --- a/test_anim__archive1/style.css +++ /dev/null @@ -1,158 +0,0 @@ -* { margin: 0; padding: 0; box-sizing: border-box; } -body { - min-height: 100vh; -} -.gallery-animation { - --gap: 20px; - --vertical-wrapper-width: 900px; - --shadow-diffusion: 5px; - --gallery-animation-width: 40vw; - --max-portion : 0.7; - position: fixed; - top: 0; - left: 0; - width: var(--gallery-animation-width); - height: 100vh; - overflow: hidden; -} - -.gallery-animation__wrapper { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex; - background-color: green; -} - -.gallery-animation__track { - display: flex; - animation-timing-function: linear; - animation-iteration-count: infinite; -} - -.gallery-animation__image { - object-fit: cover; - flex-shrink: 0; - filter: drop-shadow(0px 0px var(--shadow-diffusion) rgb(0, 0, 0)); -} - -/* ========================================================================== - MODE VERTICAL - ========================================================================== */ - -.gallery-animation--vertical .gallery-animation__wrapper{ - width: var(--vertical-wrapper-width); - flex-direction: row; - justify-content: center; - padding: 0 var(--gap); - left: 50%; - transform: translateX(-50%); -} - -.gallery-animation--vertical .gallery-animation__column { - width: min(100%, calc(var(--gallery-animation-width) * var(--max-portion))); - display: flex; - flex-direction: column; - align-items: stretch; - overflow: hidden; -} - -.gallery-animation--vertical .gallery-animation__track { - flex-direction: column; - align-items: stretch; - width: 100%; - padding-inline: calc(var(--gap) / 2); -} - -.gallery-animation--vertical .gallery-animation__image { - width: 100%; - height: auto; - /* height: calc(100vh * var(--max-portion)); */ /* */ - object-fit: contain; - margin-block: calc(var(--gap) / 2); -} - -/* Animations verticales */ -.gallery-animation--vertical .gallery-animation__column:nth-child(odd) .gallery-animation__track { - animation: scrollDown var(--animation-duration) linear infinite; -} - -.gallery-animation--vertical .gallery-animation__column:nth-child(even) .gallery-animation__track { - animation: scrollUp var(--animation-duration) linear infinite; -} - - -@keyframes scrollDown { - from { transform: translateY(0); } - to { transform: translateY(-50%); } -} - -@keyframes scrollUp { - from { transform: translateY(-50%); } - to { transform: translateY(0); } -} - -/* ========================================================================== - MODE HORIZONTAL - ========================================================================== */ - -.gallery-animation--horizontal .gallery-animation__wrapper { - flex-direction: column; - padding: var(--gap) 0; -} - -.gallery-animation--horizontal .gallery-animation__column { - flex: 1; - display: flex; - flex-direction: row; - align-items: stretch; - overflow: hidden; -} - -.gallery-animation--horizontal .gallery-animation__track { - flex-direction: row; - align-items: stretch; - height: 100%; - padding-block: calc(var(--gap) / 2); -} - -.gallery-animation--horizontal .gallery-animation__image { - height: 100%; - width: auto; - /* width: calc(var(--gallery-animation-width) * var(--max-portion)); */ - /* width: min(100%, calc(var(--gallery-animation-width) * var(--max-portion))); */ - object-fit: contain; - margin-inline: calc(var(--gap) / 2); -} - -/* Animations horizontales */ -.gallery-animation--horizontal .gallery-animation__column:nth-child(odd) .gallery-animation__track { - animation: scrollRight var(--animation-duration) linear infinite; -} - -.gallery-animation--horizontal .gallery-animation__column:nth-child(even) .gallery-animation__track { - animation: scrollLeft var(--animation-duration) linear infinite; -} - - -@keyframes scrollRight { - from { transform: translateX(-50%); } - to { transform: translateX(0); } -} - -@keyframes scrollLeft { - from { transform: translateX(0); } - to { transform: translateX(-50%); } -} - -/* ========================================================================== - REDUCED MOTION - ========================================================================== */ - -@media (prefers-reduced-motion: reduce) { - .gallery-animation__track { - animation: none !important; - } -}