Seedream 5.5 Precision Image Editing

Créez une page web HTML5 interactive complète, soignée et contenue dans un seul fichier, intitulée « Console de déchiffrement des archives abyssales ». Produisez uniquement le document HTML final. Intégrez tout le CSS et le JavaScript directement dans le fichier. N’utilisez aucune bibliothèque externe, aucun framework, aucune police, image, fichier SVG, API, CDN ni requête réseau ; chaque élément visuel doit être généré avec HTML, CSS, SVG inline et Canvas. Concevez un terminal de recherche sous-marine immersif centré sur une grande méduse mécanique semi-transparente, rendue procéduralement avec des graphismes Canvas superposés. Donnez-lui une ombrelle lumineuse semblable à du verre, des mécanismes en laiton visibles, des anneaux internes articulés, des particules dérivantes et des tentacules bioluminescents animés. La méduse doit pouvoir être déplacée pour modifier le courant océanique simulé, et tournée ou agrandie à l’aide de gestes du pointeur, du glissement de la souris, de la molette et des interactions tactiles. Sa position et ses mouvements doivent influencer visiblement les particules proches, la courbure des tentacules, la dérive des nœuds, les vecteurs du courant et les relevés de l’interface, avec une inertie fluide. Disposez quatre catégories distinctes d’archives de créatures non identifiées dans un réseau radial autour de la méduse : Chasseurs abyssaux, Organismes coloniaux, Fossiles vivants et Entités porteuses de signaux. Chaque catégorie doit contenir plusieurs nœuds de spécimens connectés, pour un total d’au moins douze enregistrements. Utilisez des filaments ou tentacules animés pour relier les nœuds à la méduse centrale. Un clic sur un nœud doit ouvrir une fiche de spécimen richement composée, avec une illustration procédurale de créature dessinée à la main, des métadonnées de type taxonomique, la profondeur, la pression, l’état de découverte, des notes comportementales, ainsi que des détails de forme d’onde ou d’anatomie et un contrôle de fermeture. Les fiches doivent apparaître comme des planches de recherche physiques glissant sous un scanner, et les différents enregistrements doivent présenter des contenus réellement différents plutôt que des espaces réservés répétés. Incluez un champ de saisie de fréquence sonar bien visible, qui réagit en continu pendant que l’utilisateur saisit des valeurs numériques. Les fréquences valides doivent réorganiser l’essaim de particules Canvas en différentes formations procédurales, telles que des spirales, des anneaux, des bancs, des silhouettes squelettiques ou des glyphes de coordonnées ; mettre à jour la forme d’onde, les relevés du terminal et le comportement du courant océanique ; et déverrouiller plusieurs enregistrements cachés dans des plages de fréquences à découvrir. Affichez un retour clair mais atmosphérique pour les saisies invalides, les enregistrements verrouillés, le déchiffrement réussi et les nouvelles preuves révélées. Ajoutez un journal compact de l’historique des fréquences et un indicateur visuel de progression des déverrouillages. Prenez en charge des commandes clavier utiles : placer le focus sur le champ sonar, valider ou effacer une fréquence, parcourir les nœuds d’archives, ouvrir l’enregistrement sélectionné, fermer les superpositions avec Échap et afficher un panneau d’aide clavier. La direction visuelle doit fusionner un terminal scientifique sous-marin, une illustration de musée en gravure sur cuivre et des textures de balayage glitchées et vieillies. Utilisez un bleu marine d’encre discret, un bleu sarcelle oxydé, une bioluminescence vert cyan et un or rouillé, avec une lumière bleue froide comme illumination principale et des avertissements ambrés intermittents comme accents localisés. Créez une composition radiale centrale avec des échelles de profondeur verticales montées sur les côtés, des graduations de pression, des coordonnées de spécimens, des lignes de grille subtiles, des barres de balayage, un défaut de recalage chromatique, du grain argentique, des hachures gravées et des corruptions de données occasionnelles. Maintenez une hiérarchie forte et une typographie lisible malgré le traitement atmosphérique. Ajoutez des pulsations visuelles sobres inspirées des terminaux audio, sans nécessiter de son. Utilisez une mise en page en couches, dense en informations : en-tête de mission et bandeau d’état en haut ; filtres d’archives et règle de profondeur verticale à gauche ; chambre Canvas interactive au centre ; télémétrie en direct, direction du courant, pression, résumé du spécimen sélectionné et état des déverrouillages à droite ; console sonar inférieure, forme d’onde, champ de fréquence, raccourcis clavier et journal des événements en bas. Ajoutez des infobulles ainsi que des états actif, survol, focus, sélectionné, verrouillé, chargement et déverrouillé. Incluez une courte superposition d’intégration au premier lancement expliquant les interactions principales et pouvant être fermée. Toutes les interactions principales doivent être fonctionnelles et liées à l’état, et non de simples simulations décoratives. Rendez la page responsive et utilisable sur les écrans de bureau larges, les ordinateurs portables, les tablettes et les mobiles. N’imposez pas de format fixe 16:9 : il s’agit d’une page web responsive qui doit remplir la fenêtre disponible et réorganiser intelligemment ses panneaux lorsque la largeur diminue. Préservez la zone d’interaction centrale avec la méduse, des contrôles lisibles, des cibles tactiles suffisamment grandes et des superpositions accessibles quelle que soit la taille. Incluez du HTML sémantique, des états de focus clavier visibles, des libellés ARIA lorsque cela est pertinent, la prise en charge de la réduction des animations et un texte à contraste élevé. Visez un niveau exceptionnel de finition visuelle et de complétude des interactions : boucles d’animation fluides, nombre de particules adaptatif pour les performances, rendu Canvas haute résolution, détails procéduraux, transitions d’état coordonnées et redimensionnement fluide. Empêchez le défilement accidentel de la page lors de la manipulation du Canvas, tout en conservant le défilement normal lorsque la mise en page responsive l’exige. Ne créez pas une maquette statique, une page d’accueil limitée à un hero, une simple grille de cartes, un tableau de bord administratif générique, un Canvas fixe 16:9, une vidéo, un diaporama ou une composition semblable à une capture d’écran. N’utilisez pas de rectangles réservés, de lorem ipsum, d’émojis comme icônes d’interface, de ressources externes, de contrôles cassés, de faux boutons, de boîtes de dialogue alert(), de couleurs néon arc-en-ciel excessives, d’arrière-plans trop lumineux ni de texte exagérément petit et illisible. N’omettez pas la manipulation de la méduse, la reconfiguration des particules, la saisie sonar, le déverrouillage des archives, le système de fiches de spécimens, les interactions clavier, le comportement responsive ni les changements d’état interconnectés.

Créez un jeu HTML5 interactif complet, soigné et contenu dans un seul fichier, intitulé « Laboratoire du rythme des ramen », situé dans l’arrière-cuisine d’une boutique japonaise de ramen ouverte à minuit. Produisez uniquement le document HTML final. Intégrez tout le CSS et le JavaScript directement dans le fichier ; n’utilisez aucune bibliothèque externe, aucun framework, CDN, police, image, fichier audio ni requête réseau. La page doit fonctionner immédiatement lorsqu’elle est ouverte localement dans un navigateur moderne. Concevez l’expérience comme un site web responsive en pleine page, et non comme une image ou une vidéo fixe au format 16:9. Elle doit s’adapter harmonieusement aux écrans de bureau, aux tablettes et aux mobiles, sans rognage, défilement horizontal, texte illisible ni contrôles qui se chevauchent. Utilisez du HTML sémantique, des libellés accessibles, des états de focus marqués, la prise en charge de la réduction des animations et une alternative claire de commandes mobiles pour les actions au clavier. Créez un véritable jeu de rythme et d’adresse jouable sur une seule page. Faites du poste de travail central le point focal : le joueur fait glisser un morceau de pâte pour l’étirer, le replie sur lui-même et effectue des mouvements rapides de fouettage pour former des filaments de ramen. Implémentez une physique satisfaisante basée sur le pointeur, avec inertie, élasticité, résistance, détection de la vélocité, déformation des filaments et retour visuel clair. Prenez en charge la souris et le tactile avec les événements Pointer Events. Évaluez la distance d’étirement, la précision du pliage, la vitesse de fouettage, le timing rythmique et la régularité afin de déterminer l’épaisseur et la qualité des nouilles. L’interaction doit sembler physique plutôt que se limiter au déplacement d’une icône statique. Ajoutez des rythmes de cuisine et de garniture contrôlés au clavier. Utilisez des touches clairement affichées telles que A/D ou les touches fléchées pour réguler la marmite d’eau bouillante, Espace pour blanchir ou soulever les nouilles, et J/K/L pour les actions de garniture minutées. Incluez des boutons mobiles visibles offrant les mêmes commandes. Présentez des marqueurs de temps, des fenêtres de timing, des retours de combo, la température de la marmite, la progression de la cuisson, le niveau du bouillon, la préparation des garnitures et les actions de service. Empêchez le défilement de la page lorsque les touches de jeu sont utilisées. Placez une file de commandes verticale à gauche et des instruments de précision animés à droite. Chaque carte de commande doit préciser l’épaisseur de nouilles demandée, le degré de cuisson, le motif de garniture et la limite de temps. Évaluez en temps réel chaque bol terminé selon la précision de l’épaisseur, le degré de cuisson, la précision rythmique et la vitesse de service. Incluez le score total, le multiplicateur de combo, la meilleure série, les comptes à rebours et un bilan concis des résultats. Maintenez un état de jeu cohérent entre plusieurs commandes, augmentez progressivement la difficulté et proposez des contrôles Démarrer, Pause, Recommencer et Comment jouer. Rendez les erreurs spectaculaires et significatives sur le plan mécanique : des nouilles trop étirées ou mal pliées doivent s’emmêler ; une ébullition mal synchronisée doit provoquer des éclaboussures de bouillon, des jauges tremblantes, des tampons d’avertissement et une perte de combo ; une cuisson excessive doit visiblement ramollir ou foncer les nouilles. Les séries réussies doivent déclencher une célébration exagérée de vapeur avec des nuages qui s’étendent, des lignes de vitesse façon manga, des tampons japonais festifs clignotants, des instruments qui rebondissent et une brève animation d’impact sur tout l’écran. Créez tous les visuels avec du HTML, du CSS, du SVG et du Canvas générés dans le fichier. Utilisez un langage visuel distinctif combinant une composition en panneaux de manga japonais et des schémas mécaniques précis en coupe. Montrez des vues en coupe d’engrenages, de vannes, de tuyaux et de mécanismes de brûleur, ainsi que des graduations de mesure légendées, des annotations techniques, des textures en demi-teintes, des lignes de vitesse, des contours à l’encre et un lettrage mesuré pour les effets sonores de bande dessinée. Éclairez le plan de travail en acier inoxydable avec une lumière tungstène chaude, tandis qu’une nuit enneigée indigo est visible par la fenêtre de la cuisine. La neige doit tomber subtilement à l’extérieur, la vapeur doit s’enrouler au-dessus de la marmite, le liquide doit bouillonner, les jauges doivent réagir en continu et de petits reflets doivent se déplacer sur les surfaces métalliques. Organisez l’interface en zones clairement séparées de vermillon, de blanc crème et de bleu marine profond. Utilisez des accents ambrés chauds, des contours à l’encre charbon, des ombres superposées, une typographie nette et un grain de papier subtil généré procéduralement avec le CSS. Gardez l’action centrale autour des nouilles dominante, en équilibrant visuellement la file de commandes et les instruments dynamiques. Les animations doivent être détaillées, fluides et intentionnelles, avec des transitions satisfaisantes et des micro-interactions plutôt qu’un bruit visuel permanent. Incluez une superposition de tutoriel d’ouverture compacte, une animation d’attente en mode attractif, un retour visuel de type audio recréé sans nécessiter de son et suffisamment de variations procédurales pour permettre des parties répétées. Assurez-vous que le score principal, les minuteurs, les collisions, la logique des combos, la progression des commandes, l’état de pause, le flux de redémarrage, la mise en page responsive et tous les contrôles fonctionnent réellement. Ne produisez pas une maquette statique, une conception limitée à une page d’accueil, de faux contrôles, des panneaux réservés, des TODO inachevés, des ressources externes, des icônes d’image cassées, des interactions fondées sur alert() ni des éléments décoratifs qui masquent le jeu. Ne limitez pas la page web à un Canvas fixe 16:9. Retournez uniquement un document HTML complet commençant par <!DOCTYPE html>.