Système solaire en pixels

Implémentez intégralement un « site web interactif de système solaire en pixel art noir et blanc » (entièrement statique, exécutable en local et déployable sur un hébergement statique). Toutes les exigences sont énumérées ci-dessous ; appliquez-les et vérifiez chaque point.

[1. Base technique]
1. Site entièrement statique : importmap + ESM natif ; three.js et toutes les dépendances sont fournies localement ; aucun CDN, aucune étape de build, aucun backend ; point d'entrée : index.html.
2. Stratégie d'assets à deux volets : la géométrie utilise les sphères intégrées / maillages paramétriques de three.js ; les textures utilisent de véritables images astronomiques (NASA Visible Earth, cartes lunaires LRO, SolarSystemScope), organisées en trois niveaux de qualité — standard / HD 4K / ultra 8K — avec un gestionnaire de chargement des textures (cache Promise, distinction entre espaces colorimétriques SRGB et linéaire, anisotropie ≤ 8, nouvelle tentative en cas d'échec et repli sur le niveau standard).
3. Moteur de rendu : antialias, sortie SRGB, ACESFilmicToneMapping (exposition ≈ 1.05), DPR ≤ 2 (≤ 1.5 sur mobile), plan proche 0.002, arrière-plan de scène noir.

[2. Contenu de la scène (entièrement en 3D temps réel ; aucune image ni vidéo présentée comme de la 3D)]
1. Éléments : le Soleil + les huit planètes + la Lune (verrouillée par effet de marée et orbitant autour de la Terre). Les planètes internes orbitent plus vite que les externes, tournent à des vitesses proportionnelles réelles et utilisent leurs véritables inclinaisons axiales (Saturne 27°, Uranus 82°).
2. Soleil : sphère émissive + faible halo ; une lumière ponctuelle pour l'éclairage + une faible lumière ambiante.
3. Terre : textures doubles jour/nuit commutées en temps réel par le « produit scalaire normale · direction du Soleil » (transition du terminateur), avec éclairage propre des lumières urbaines du côté nuit (bascule indépendante) ; une couche distincte de nuages (1.006R, alphaMap) et une couche atmosphérique de liseré lumineux Fresnel (1.025R, multipliée par un facteur de lumière solaire) — les trois couches doivent pouvoir être basculées individuellement.
4. Saturne : la sphère et les anneaux partagent le même groupe d'inclinaison de 27° ; l'anneau est un maillage paramétrique dans le plan XZ, dont les UV mappent une texture à longues bandes selon le rayon, visible des deux côtés, alphaTest ≈ 0.04, depthWrite = false.
5. Lune : texture de surface lunaire 8K (proposer les niveaux 4K / 8K sur le web) ; l'éclairage en gros plan doit être assombri pour un rendu réaliste gris moyen.
6. Arrière-plan : points d'étoiles fixes et clairsemés (pas une grande texture de nébuleuse).

[3. Système d'interaction]
1. Sélection d'astre : clic dans le catalogue / clic par raycasting dans la scène (les petits astres reçoivent une sphère de sélection invisible agrandie) / parcours précédent-suivant.
2. Caméra de mise au point : la caméra reste continuellement verrouillée sur l'astre cible en mouvement (translation synchronisée à chaque image) et ne doit jamais être entraînée par le mouvement orbital ; distance de vue = rayon englobant / facteur de remplissage de la vue (0.7 par défaut, Lune 0.78, Soleil 0.45 avec un liseré noir) ; transitions fluides de 850 ms avec accélération-décélération qui suivent la cible en temps réel, y compris durant la transition ; le glissement par l'utilisateur prend immédiatement le relais (en annulant le déplacement programmé de la caméra).
3. Préréglages de vue : six positions de caméra — face éclairée / terminateur / région polaire / limbe / face nocturne / détail (composées d'offsets « direction vers le Soleil × latérale × haute » ; lorsque la cible est à l'origine, utiliser une direction fixe pour éviter la dégénérescence d'un vecteur nul).
4. Temps et affichage : tout mettre en pause, bascule indépendante de rotation, bascule indépendante d'orbite, vitesse de 0 à 4×, bascule des lignes d'orbite, bascule des libellés, réinitialisation de la vue ; les états de rotation et d'orbite doivent rester strictement synchronisés avec l'interface.

[4. Interface noir et blanc en style pixel (dans l'esprit de careers.kimi.com, noir/blanc/gris purs, sans bleu)]
1. Police monospace comme base ; police pixel pour les chiffres / titres courts / navigation (sous licence OFL, auto-hébergée) ; police de corps lisible pour le texte chinois.
2. Barre supérieure : logo SOLAR SYSTEM (texte anglais et son nom chinois) à gauche, « Vue d'ensemble / Astres / Paramètres d'affichage » à droite.
3. Sélecteur d'astres : groupé par étoile / planète / lune, numérotation à deux chiffres, élément actuel mis en évidence (sans grands aplats de couleur), défilable.
4. Cartouche en bas à gauche : numéro (p. ex. 05/10) + grand titre (nom chinois + anglais) + libellé du type + une ligne poétique + données de diamètre + « Voir les détails ↗ » ; en mode vue d'ensemble, afficher « tailles et distances ajustées pour la présentation ».
5. Barre d'outils inférieure : pause / rotation / orbite / vitesse / lignes d'orbite / réinitialisation de la vue (icône + texte court) + sélecteur précédent/suivant (le nom anglais de l'astre actuel est affiché au milieu).
6. Panneau de détails (coulisse depuis la droite) : introduction, faits essentiels (avec unités et mentions « env. »), boutons de mise au point d'observation (chacun lié à un véritable état de caméra/couche et affichant « actuel »), sources des données, liens pour approfondir ; le panneau de paramètres est divisé en groupes « Vue / Qualité ».
7. Transmission des événements : la couche d'interface en plein écran utilise pointer-events: none ; seuls les boutons / listes / panneaux / barre d'outils utilisent auto ; le défilement au sein d'un panneau ne doit pas se propager au canvas. Remplacez le Système solaire par le système exoplanétaire TRAPPIST-1 : une naine rouge et sept planètes rocheuses. Conservez l'interface en pixel art, la caméra de mise au point et les commandes temporelles, et utilisez les paramètres réels de TRAPPIST-1 pour chaque planète. [5. Écran d'ouverture pixellisé et effets d'animation]
1. Ouverture : une surface lunaire en plein écran, tramée Bayer ordonnée 1 bit (échantillonnage de l'image → quantification en niveaux de gris → 4 niveaux de gris → matrice 4×4) ; la taille des blocs de tramage s'affine progressivement de 14px à 1.5px selon la progression du chargement (la progression sert elle-même d'indicateur de chargement), avec un titre en police pixel centré, un masque radial sombre et un bouton « Commencer l'exploration → » ; l'entrée nécessite un clic de l'utilisateur (pas d'entrée automatique).
2. Sortie : après le clic, le titre disparaît en fondu sur 220ms, puis la matrice numérique se dissout en vague — un front d'onde diagonal traverse l'écran (avec perturbation par cellule), les blocs de pixels rétrécissent et disparaissent suivant le dégradé de l'onde, et après environ 800ms, la vue d'ensemble du système solaire apparaît.
3. Autres effets d'animation : lors du changement d'astre, le grand titre et la ligne poétique s'affichent par un effet de brouillage-décodage (environ 320/420ms) ; les caractères des boutons de navigation effectuent un défilement à deux couches (350ms, décalage de 30ms par caractère, déclenché au survol comme à la prise de focus) ; les panneaux effectuent une transition avec opacité + décalage de 12px (environ 220ms) ; le titre du panneau de détails se révèle à travers un masque de blocs clairsemés (≤ 700ms).
4. Avec prefers-reduced-motion, tout se réduit à des changements directs.

[6. Enrichissements d'information]
1. Viseur d'observation : un fin réticule suit la souris, avec les coordonnées LAT/LON de la surface planétaire pointée affichées en direct en haut à droite (masqué sur les écrans tactiles).
2. Carte d'aperçu au survol du catalogue (nom / diamètre / distance au Soleil / ligne poétique).
3. Contrôle complet au clavier : ←/→ change d'astre, ↑/↓ rapproche/éloigne, Espace met en pause, 1–0 accède directement, O vue d'ensemble, D détails, S paramètres, H carte des raccourcis, Échap ferme les panneaux.
4. Journal d'observation : le coin inférieur droit affiche un historique monospace défilant des 3 dernières actions.

[7. Mobile et accessibilité]
1. Catalogue défilable horizontalement avec défilement automatique vers l'élément sélectionné ; détails / paramètres sous forme de panneaux inférieurs fermables ; cibles tactiles ≥ 44px ; adaptation aux zones sûres ; la barre d'outils et les panneaux ne doivent pas se chevaucher.
2. Boutons sémantiques, aria-pressed / aria-selected corrects, focus visible, Échap ferme les panneaux et rend le focus au bouton déclencheur, état de chargement annoncé par une région live légère.

[8. Critères d'acceptation (tester chaque point)]
1. L'ouverture pixellisée est visible au lancement ; un clic la dissout en vague vers la vue d'ensemble (Soleil centré, lignes d'orbite, libellés des planètes).
2. Parcourez les dix astres un à un : nom / sélection du catalogue / données restent synchronisés, la caméra suit fluidement sans perdre la cible, aucune sphère noire, aucune erreur de compilation des shaders, aucune 404.
3. Les trois bascules de couche de la Terre produisent des effets visibles, les anneaux de Saturne sont coplanaires avec son équateur, le terminateur de la Lune paraît naturel sans devenir blanc délavé, et le Soleil est un disque avec un liseré noir (et non une surface solaire en plein écran).
4. Vérifiez avec des captures d'écran sur ordinateur 1440×900 et téléphone 390×844 : aucune occultation, aucun débordement ; aucune erreur dans la console ; entièrement utilisable avec les animations réduites activées.

Commencez par lister l'ordre d'implémentation (scène → interaction → interface → animation → acceptation), puis fournissez directement les fichiers exécutables. Ne fournissez pas de maquettes inachevées et n'inventez ni assets ni données.

Implémentez intégralement un « site web interactif de système solaire en pixel art noir et blanc » (entièrement statique, exécutable en local et déployable sur un hébergement statique). Toutes les exigences sont énumérées ci-dessous ; appliquez-les et vérifiez chaque point.

[1. Base technique]
1. Site entièrement statique : importmap + ESM natif ; three.js et toutes les dépendances sont fournies localement ; aucun CDN, aucune étape de build, aucun backend ; point d'entrée : index.html.
2. Stratégie d'assets à deux volets : la géométrie utilise les sphères intégrées / maillages paramétriques de three.js ; les textures utilisent de véritables images astronomiques (NASA Visible Earth, cartes lunaires LRO, SolarSystemScope), organisées en trois niveaux de qualité — standard / HD 4K / ultra 8K — avec un gestionnaire de chargement des textures (cache Promise, distinction entre espaces colorimétriques SRGB et linéaire, anisotropie ≤ 8, nouvelle tentative en cas d'échec et repli sur le niveau standard).
3. Moteur de rendu : antialias, sortie SRGB, ACESFilmicToneMapping (exposition ≈ 1.05), DPR ≤ 2 (≤ 1.5 sur mobile), plan proche 0.002, arrière-plan de scène noir.

[2. Contenu de la scène (entièrement en 3D temps réel ; aucune image ni vidéo présentée comme de la 3D)]
1. Éléments : le Soleil + les huit planètes + la Lune (verrouillée par effet de marée et orbitant autour de la Terre). Les planètes internes orbitent plus vite que les externes, tournent à des vitesses proportionnelles réelles et utilisent leurs véritables inclinaisons axiales (Saturne 27°, Uranus 82°).
2. Soleil : sphère émissive + faible halo ; une lumière ponctuelle pour l'éclairage + une faible lumière ambiante.
3. Terre : textures doubles jour/nuit commutées en temps réel par le « produit scalaire normale · direction du Soleil » (transition du terminateur), avec éclairage propre des lumières urbaines du côté nuit (bascule indépendante) ; une couche distincte de nuages (1.006R, alphaMap) et une couche atmosphérique de liseré lumineux Fresnel (1.025R, multipliée par un facteur de lumière solaire) — les trois couches doivent pouvoir être basculées individuellement.
4. Saturne : la sphère et les anneaux partagent le même groupe d'inclinaison de 27° ; l'anneau est un maillage paramétrique dans le plan XZ, dont les UV mappent une texture à longues bandes selon le rayon, visible des deux côtés, alphaTest ≈ 0.04, depthWrite = false.
5. Lune : texture de surface lunaire 8K (proposer les niveaux 4K / 8K sur le web) ; l'éclairage en gros plan doit être assombri pour un rendu réaliste gris moyen.
6. Arrière-plan : points d'étoiles fixes et clairsemés (pas une grande texture de nébuleuse).

[3. Système d'interaction]
1. Sélection d'astre : clic dans le catalogue / clic par raycasting dans la scène (les petits astres reçoivent une sphère de sélection invisible agrandie) / parcours précédent-suivant.
2. Caméra de mise au point : la caméra reste continuellement verrouillée sur l'astre cible en mouvement (translation synchronisée à chaque image) et ne doit jamais être entraînée par le mouvement orbital ; distance de vue = rayon englobant / facteur de remplissage de la vue (0.7 par défaut, Lune 0.78, Soleil 0.45 avec un liseré noir) ; transitions fluides de 850 ms avec accélération-décélération qui suivent la cible en temps réel, y compris durant la transition ; le glissement par l'utilisateur prend immédiatement le relais (en annulant le déplacement programmé de la caméra).
3. Préréglages de vue : six positions de caméra — face éclairée / terminateur / région polaire / limbe / face nocturne / détail (composées d'offsets « direction vers le Soleil × latérale × haute » ; lorsque la cible est à l'origine, utiliser une direction fixe pour éviter la dégénérescence d'un vecteur nul).
4. Temps et affichage : tout mettre en pause, bascule indépendante de rotation, bascule indépendante d'orbite, vitesse de 0 à 4×, bascule des lignes d'orbite, bascule des libellés, réinitialisation de la vue ; les états de rotation et d'orbite doivent rester strictement synchronisés avec l'interface.

[4. Interface noir et blanc en style pixel (dans l'esprit de careers.kimi.com, noir/blanc/gris purs, sans bleu)]
1. Police monospace comme base ; police pixel pour les chiffres / titres courts / navigation (sous licence OFL, auto-hébergée) ; police de corps lisible pour le texte chinois.
2. Barre supérieure : logo SOLAR SYSTEM (texte anglais et son nom chinois) à gauche, « Vue d'ensemble / Astres / Paramètres d'affichage » à droite.
3. Sélecteur d'astres : groupé par étoile / planète / lune, numérotation à deux chiffres, élément actuel mis en évidence (sans grands aplats de couleur), défilable.
4. Cartouche en bas à gauche : numéro (p. ex. 05/10) + grand titre (nom chinois + anglais) + libellé du type + une ligne poétique + données de diamètre + « Voir les détails ↗ » ; en mode vue d'ensemble, afficher « tailles et distances ajustées pour la présentation ».
5. Barre d'outils inférieure : pause / rotation / orbite / vitesse / lignes d'orbite / réinitialisation de la vue (icône + texte court) + sélecteur précédent/suivant (le nom anglais de l'astre actuel est affiché au milieu).
6. Panneau de détails (coulisse depuis la droite) : introduction, faits essentiels (avec unités et mentions « env. »), boutons de mise au point d'observation (chacun lié à un véritable état de caméra/couche et affichant « actuel »), sources des données, liens pour approfondir ; le panneau de paramètres est divisé en groupes « Vue / Qualité ».
7. Transmission des événements : la couche d'interface en plein écran utilise pointer-events: none ; seuls les boutons / listes / panneaux / barre d'outils utilisent auto ; le défilement au sein d'un panneau ne doit pas se propager au canvas. Ajoutez un mode classe comprenant quatre chapitres — étoile, planètes rocheuses, géantes gazeuses, lunes. La caméra s'arrête à chaque étape, affiche trois points clés de style tableau noir, et l'enseignant avance chaque point avec la barre d'espace. [5. Écran d'ouverture pixellisé et effets d'animation]
1. Ouverture : une surface lunaire en plein écran, tramée Bayer ordonnée 1 bit (échantillonnage de l'image → quantification en niveaux de gris → 4 niveaux de gris → matrice 4×4) ; la taille des blocs de tramage s'affine progressivement de 14px à 1.5px selon la progression du chargement (la progression sert elle-même d'indicateur de chargement), avec un titre en police pixel centré, un masque radial sombre et un bouton « Commencer l'exploration → » ; l'entrée nécessite un clic de l'utilisateur (pas d'entrée automatique).
2. Sortie : après le clic, le titre disparaît en fondu sur 220ms, puis la matrice numérique se dissout en vague — un front d'onde diagonal traverse l'écran (avec perturbation par cellule), les blocs de pixels rétrécissent et disparaissent suivant le dégradé de l'onde, et après environ 800ms, la vue d'ensemble du système solaire apparaît.
3. Autres effets d'animation : lors du changement d'astre, le grand titre et la ligne poétique s'affichent par un effet de brouillage-décodage (environ 320/420ms) ; les caractères des boutons de navigation effectuent un défilement à deux couches (350ms, décalage de 30ms par caractère, déclenché au survol comme à la prise de focus) ; les panneaux effectuent une transition avec opacité + décalage de 12px (environ 220ms) ; le titre du panneau de détails se révèle à travers un masque de blocs clairsemés (≤ 700ms).
4. Avec prefers-reduced-motion, tout se réduit à des changements directs.

[6. Enrichissements d'information]
1. Viseur d'observation : un fin réticule suit la souris, avec les coordonnées LAT/LON de la surface planétaire pointée affichées en direct en haut à droite (masqué sur les écrans tactiles).
2. Carte d'aperçu au survol du catalogue (nom / diamètre / distance au Soleil / ligne poétique).
3. Contrôle complet au clavier : ←/→ change d'astre, ↑/↓ rapproche/éloigne, Espace met en pause, 1–0 accède directement, O vue d'ensemble, D détails, S paramètres, H carte des raccourcis, Échap ferme les panneaux.
4. Journal d'observation : le coin inférieur droit affiche un historique monospace défilant des 3 dernières actions.

[7. Mobile et accessibilité]
1. Catalogue défilable horizontalement avec défilement automatique vers l'élément sélectionné ; détails / paramètres sous forme de panneaux inférieurs fermables ; cibles tactiles ≥ 44px ; adaptation aux zones sûres ; la barre d'outils et les panneaux ne doivent pas se chevaucher.
2. Boutons sémantiques, aria-pressed / aria-selected corrects, focus visible, Échap ferme les panneaux et rend le focus au bouton déclencheur, état de chargement annoncé par une région live légère.

[8. Critères d'acceptation (tester chaque point)]
1. L'ouverture pixellisée est visible au lancement ; un clic la dissout en vague vers la vue d'ensemble (Soleil centré, lignes d'orbite, libellés des planètes).
2. Parcourez les dix astres un à un : nom / sélection du catalogue / données restent synchronisés, la caméra suit fluidement sans perdre la cible, aucune sphère noire, aucune erreur de compilation des shaders, aucune 404.
3. Les trois bascules de couche de la Terre produisent des effets visibles, les anneaux de Saturne sont coplanaires avec son équateur, le terminateur de la Lune paraît naturel sans devenir blanc délavé, et le Soleil est un disque avec un liseré noir (et non une surface solaire en plein écran).
4. Vérifiez avec des captures d'écran sur ordinateur 1440×900 et téléphone 390×844 : aucune occultation, aucun débordement ; aucune erreur dans la console ; entièrement utilisable avec les animations réduites activées.

Commencez par lister l'ordre d'implémentation (scène → interaction → interface → animation → acceptation), puis fournissez directement les fichiers exécutables. Ne fournissez pas de maquettes inachevées et n'inventez ni assets ni données.