JavaScript must be enabled to play.
Browser lacks capabilities required to play.
Upgrade or switch to another browser.
Loading…
<<nobr>> <<audio "introhum" loop play volume 0.5>> <div class="intro-main"> <p class="glitch-line">[CONNEXION_CONNECTA::ALICE_UNAVAILABLE]</p> <h1 class="intro-headline"> "Elle n’a plus donné signe de vie depuis deux mois.<br> Personne ne semble inquiet...<br> Mais moi, je sais que quelque chose cloche..."<br> </h1> <div class="intro-choice"> [[Relire les derniers messages|INTRO_1-5][$messagesSeen = true]] </div> </div> <</nobr>> <style> #passages { max-width: 64rem; } .glitch-line { font-family: 'IBM Plex Mono', monospace; color: rgba(150, 150, 255, 0.4); font-size: 1.25em; margin-top: 15px; animation: glitchFlash 2s infinite alternate; letter-spacing: 0.05em; } @keyframes glitchFlash { 0%, 40% { opacity: 0; } 60% { opacity: 0.9; } 100% { opacity: 0; } } body { margin: 0; height: 100vh; background: radial-gradient(circle at 50% 20%, #0a0a15 0%, #000 90%); background-repeat: no-repeat; overflow: hidden; position: relative; } body::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(70, 60, 180, 0.15), transparent 70%), radial-gradient(circle at 80% 70%, rgba(150, 80, 255, 0.1), transparent 70%), radial-gradient(circle at 20% 80%, rgba(50, 100, 255, 0.1), transparent 80%); animation: pulseLight 12s infinite alternate ease-in-out; z-index: -3; } body::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(180, 180, 255, 0.1) 1px, transparent 1px); background-size: 3px 3px; opacity: 0.25; animation: drift 60s linear infinite; z-index: -2; } @keyframes pulseLight { 0% { filter: brightness(0.9) hue-rotate(0deg); } 50% { filter: brightness(1.1) hue-rotate(20deg); } 100% { filter: brightness(0.9) hue-rotate(-20deg); } } @keyframes drift { from { background-position: 0 0; } to { background-position: 300px 600px; } } .glitch-overlay { position: fixed; inset: 0; background: repeating-linear-gradient( 0deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 2px, transparent 4px ); mix-blend-mode: overlay; opacity: 0.15; animation: scan 8s linear infinite; z-index: -1; } @keyframes scan { 0% { background-position-y: 0; } 100% { background-position-y: 100%; } } .intro-main { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; text-align: center; padding: 0 10%; animation: fadeIn 3s ease forwards; } .intro-headline { font-size: 1.8em; line-height: 1.6em; font-weight: 400; color: #c7c7ff; max-width: 800px; text-shadow: 0 0 6px rgba(150, 150, 255, 0.2); opacity: 0; animation: fadeInText 4s ease forwards; animation-delay: 0.5s; } .intro-headline-break { display: block; height: 0.8em; } @keyframes fadeInText { 0% { opacity: 0; transform: translateY(20px); filter: blur(4px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .intro-headline span::after { content: "|"; animation: blink 1s infinite; color: #88f; } @keyframes blink { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } .intro-choice { margin-top: 60px; text-align: center; animation: fadeIn 2s ease forwards; animation-delay: 3s; } .intro-choice a.link-internal { color: #99aaff; text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid #333; padding: 12px 24px; border-radius: 8px; text-decoration: none; transition: all 0.3s ease; font-weight: 600; } .intro-choice a.link-internal:hover { background-color: rgba(80, 80, 255, 0.1); text-shadow: 0 0 8px #88f; color: #fff; border-color: #555; transform: scale(1.02); } </style>
<<include "CSS_HACKSCREEN">> <<set $hackingStatus = false>> <<audio "introhum" play volume 0.2>> <<nobr>> <div class="hack-intro-main"> <h1 class="hack-headline"> "Je dois trouver la cause de sa disparition.<br> <span class="intro-headline-break"></span> Pour ça je dois enquêter...<br> <span class="intro-headline-break"></span> Je dois pirater son compte, c'est le seul moyen..." </h1> <div class="postit-wrap"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/postit.png" alt="Post-it adresse mail" class="postit-img"> <div class="postit-text"></div> </div> <div class="hack-choice"> [[Commencer le hack][$hackingStatus = true]] </div> </div> <</nobr>>
<div class="intro-main"> <h1 class="intro-headline">"Hack en cours..."</h1> <span id="progress">█ █ █ █ █ █ █ █ █ █</span> "Terminé." <button class="intro-button" onclick="SugarCube.Engine.play('MESSAGERIE')">Se connecter</button> </div>
<div class="message"><b>Alan:</b> Salut Alice, tu ne réponds plus depuis des semaines...</div> <div class="message"><b>Alice:</b> Alan, arrête. Ce n’est pas sain.</div> (link: "Voir les anciens messages")[ (set: $messagesLus to $messagesLus + 1) (goto: "AnciensMessages") ]
"Dans le dossier 'Photos', tu trouves des captures d’écran d’Alice à des endroits qu’elle n’a jamais postés..." (if: $messagesLus >= 3)[ (link: "Ouvrir le journal d’Alice")[ (goto: "JournalAlice") ] ]
<<audio "introhum" play volume 0.25>> <div class="profil-locked"> <div class="profil-system glitch"> “Ce profil est temporairement indisponible.” </div> <div class="photo-dialogue"> <p>Alan : “Pourquoi moi ? Pourquoi je n’ai plus accès ?”</p> </div> <div class="profil-choice"> <<if $messagesSeen && $partySeen && $profilSeen>> <<button "Contourner le système">> <<goto "INTRO2">> <</button>> <</if>> </div> </div> <style> #passages { max-width: 64rem; } .profil-locked { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; text-align: center; padding: 0 10%; background: radial-gradient(circle at 50% 40%, #060612 0%, #000 90%); color: #d0d0ff; animation: fadeIn 2s ease; } .profil-system { font-size: 1.3em; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: #9aaaff; text-shadow: 0 0 8px rgba(120, 120, 255, 0.6); margin-bottom: 60px; animation: glitch-flicker 0.4s infinite; } .glitch { position: relative; display: inline-block; } .glitch::before, .glitch::after { content: attr(data-text); position: absolute; left: 0; width: 100%; color: inherit; clip: rect(0, 0, 0, 0); } .photo-dialogue { max-width: 500px; margin: 50px auto 0; font-family: 'IBM Plex Mono', monospace; font-style: italic; color: #c6c9ff; font-size: 1.1rem; text-shadow: 0 0 5px rgba(150,150,255,0.1); } </style>
<<audio "introhum" play volume 0.25>> <<nobr>> <div class="party-gallery"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/party-4.png" alt="Soirée Connecta 1" class="party-image fade-in"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/party-3.png" alt="Soirée Connecta 2" class="party-image fade-in delay1"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/party-1.png" alt="Soirée Connecta 3" class="party-image fade-in delay2"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/party-2.png" alt="Soirée Connecta 4" class="party-image fade-in delay3"> </div> <div class="photo-dialogue"> <p>Alan : “C’était une soirée Connecta… on s’est tout de suite compris.<br> Je crois qu’elle m’a remarqué avant même que je lui parle.”</p> </div> <div class="party-choice"> [[Vérifier son profil Connecta][$profilSeen = true]] <<if $messagesSeen && $partySeen && $profilSeen>> <br><br> <<button "Je dois la retrouver">> <<goto "INTRO2">> <</button>> <</if>> </div> <</nobr>> <style> #passages { max-width: 64rem; } .party-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; justify-items: center; align-items: center; max-width: 900px; margin: 80px auto 40px; padding: 0 5%; } .party-image { width: 100%; max-width: 400px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); opacity: 0; filter: grayscale(30%) brightness(0.8) contrast(1.1); transition: opacity 2s ease, transform 2s ease; transform: scale(1.05); } .fade-in { animation: fadeInImg 3s forwards; } .fade-in.delay1 { animation-delay: 1s; } .fade-in.delay2 { animation-delay: 2s; } .fade-in.delay3 { animation-delay: 3s; } @keyframes fadeInImg { 0% { opacity: 0; transform: scale(1.1) translateY(10px); } 100% { opacity: 1; transform: scale(1.0) translateY(0); } } .party-text { text-align: center; color: #c7c7ff; font-size: 1.2em; font-style: italic; margin-top: 40px; line-height: 1.6em; animation: fadeIn 3s ease; max-width: 700px; margin-left: auto; margin-right: auto; } .party-choice { text-align: center; margin-top: 50px; } .party-choice a.link-internal { display: inline-block; margin: 10px; padding: 10px 20px; color: #99aaff; background: rgba(40,40,60,0.4); border-radius: 8px; border: 1px solid rgba(255,255,255,0.05); } .photo-dialogue { max-width: 500px; margin: 50px auto 0; font-family: 'IBM Plex Mono', monospace; margin-top: 50px; font-style: italic; color: #c6c9ff; font-size: 1.1rem; text-shadow: 0 0 5px rgba(150,150,255,0.1); } </style>
<div class="minijeu"> <h2>Choisis la bonne clé pour te connecter</h2> <p id="triesDisplay">Essais restants : <strong><<print $tries>></strong></p> <div id="actions"> <<include "MiniJeuActions">> </div> <div id="message"></div> <<include "MiniJeuSuccess">> </div> <style> #passages { max-width: 64rem; } .minijeu { max-width: 880px; margin: 48px auto; padding: 28px; background: linear-gradient(180deg, rgba(10,12,20,0.72), rgba(4,6,12,0.85)); border-radius: 14px; border: 1px solid rgba(120,110,255,0.06); box-shadow: 0 12px 40px rgba(20,16,40,0.6), inset 0 1px 0 rgba(255,255,255,0.02); color: #dfe8ff; font-family: 'IBM Plex Mono', monospace; } .minijeu h2 { font-size: 1.15rem; margin: 0 0 12px 0; color: #cbd3ff; letter-spacing: 0.02em; text-shadow: 0 0 6px rgba(120,120,255,0.06); } #triesDisplay { margin: 8px 0 18px 0; font-size: 0.95rem; color: #aebef8; } #triesDisplay strong { color: #fff; text-shadow: 0 0 6px rgba(140,170,255,0.15); } #actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 18px 0; justify-content: center; } #actions button, #actions .link-like-button { background: linear-gradient(180deg, rgba(60,80,210,0.12), rgba(80,50,180,0.06)); border: 1px solid rgba(140,120,255,0.12); color: #e9efff; padding: 10px 16px; border-radius: 10px; min-width: 190px; cursor: pointer; font-weight: 700; letter-spacing: 0.03em; transition: transform .12s ease, box-shadow .12s ease, opacity .18s; box-shadow: 0 6px 18px rgba(40,30,80,0.25); text-transform: uppercase; } #actions button:hover, #actions button:focus { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(80,60,200,0.14); outline: none; } #actions button[disabled] { opacity: 0.36; transform: none; cursor: not-allowed; box-shadow: none; filter: grayscale(0.35) saturate(0.8); } #message { min-height: 56px; margin-top: 8px; margin-bottom: 18px; color: #ffd8d8; background: linear-gradient(90deg, rgba(255,80,80,0.02), rgba(255,255,255,0.01)); padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,80,80,0.06); font-size: 0.95rem; } #successArea { margin-top: 16px; padding: 14px; background: linear-gradient(180deg, rgba(20,35,60,0.25), rgba(10,12,24,0.18)); border-radius: 10px; border: 1px solid rgba(110,200,255,0.04); color: #cfeaff; } .glitch-screen { padding: 10px; background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(140,120,255,0.02)); border-radius: 8px; color: #e6f5ff; text-align: center; font-weight: 600; letter-spacing: 0.02em; } .glitch-screen p { margin: 6px 0; } .glitch-screen p:first-child { font-size: 0.98rem; color: #dff2ff; } .glitch-anim { display:inline-block; position:relative; animation: microGlitch 0.45s steps(2, end) infinite; text-shadow: 2px 0 #caa6ff, -2px 0 #80f0ff; } @keyframes microGlitch { 0% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(1px); opacity: .95; } 100% { transform: translateX(0); opacity: 1; } } .shake { animation: shakeIt .42s cubic-bezier(.36,.07,.19,.97) both; } @keyframes shakeIt { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } } .minijeu button { margin-top: 10px; background: linear-gradient(90deg, #2e3fb8, #7a3bc3); border: none; color: #fff; padding: 10px 20px; border-radius: 10px; cursor: pointer; font-weight: 800; letter-spacing: 0.04em; } .minijeu button:hover { box-shadow: 0 14px 30px rgba(120,80,255,0.14); transform: translateY(-3px); } @media (max-width:720px) { .minijeu { padding: 18px; margin: 20px; } #actions button { min-width: 44%; font-size: 0.92rem; padding: 10px; } #message { font-size: 0.92rem; } } </style>
<<nobr>> <div class="profil-page"> <div class="profil-header"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="photo de profil" class="profil-avatar" width="150" height="150"> <div class="profil-info"> <h2>Alice Moreau</h2> <p class="profil-handle">@alice_connecta</p> <div class="profil-stats"> <span><strong>152</strong> abonnements</span> <span><strong>1 248</strong> abonnés</span> <span><strong>327</strong> posts</span> </div> <p class="profil-bio">“Chercheuse en neurosciences. J’écris parfois ce que je ne devrais pas.”</p> </div> </div> <hr> <div class="profil-feed"> <div class="tweet"> <p class="tweet-date">2 mois avant sa disparition</p> <p>POST 1 LABLABLABLABLABLABALANKASNSopihdso</p> </div> <div class="tweet"> <p class="tweet-date">2 mois avant sa disparition</p> <p>POST 2 LABLABLABLABLABLABALANKASNSopihdso</p> </div> <div class="tweet"> <p class="tweet-date">1 semaine avant sa disparition</p> <p>POST 3 LABLABLABLABLABLABALANKASNSopihdso</p> </div> <div class="tweet"> <p class="tweet-date">Dernier post — il y a 2 mois</p> <p>POST 4 LABLABLABLABLABLABALANKASNSopihdso</p> </div> </div> <div class="profil-footer"> <<button "Se diriger vers la messagerie">><<goto "InboxAlice">><</button>> </div> </div> <</nobr>> <style> .profil-page { max-width: 600px; margin: 2em auto; background: #0a0a0a; color: #eaeaea; border-radius: 16px; padding: 1.5em; box-shadow: 0 0 10px rgba(0,0,0,0.6); font-family: "Inter", sans-serif; } .profil-header { display: flex; align-items: center; gap: 1em; } .profil-avatar { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 2px solid #1da1f2; } .profil-info h2 { margin: 0; font-size: 1.4em; } .profil-handle { color: #8fa1b3; margin: 0.2em 0; } .profil-bio { font-style: italic; margin: 0.4em 0; color: #ccc; } .profil-stats { font-size: 0.9em; color: #aaa; display: flex; gap: 1em; } .profil-feed { margin-top: 1.2em; } .tweet { background: #111; padding: 1em; border-radius: 10px; margin-bottom: 0.8em; border: 1px solid #1f1f1f; } .tweet:hover { background: #151515; } .tweet-date { color: #777; font-size: 0.8em; margin-bottom: 0.3em; } .profil-footer { text-align: center; margin-top: 1.5em; } .profil-footer button { background: #1da1f2; color: white; border: none; border-radius: 8px; padding: 0.6em 1.2em; font-size: 1em; cursor: pointer; } .profil-footer button:hover { background: #1a8cd8; } </style>
<<set $messagesSeen = false>> <<set $partySeen = false>> <<set $profilSeen = false>> <<set $tries to 0>> <<set $success to false>> <<set $connected to false>> <<set $alphaDisabled to false>> <<set $betaDisabled to false>> <<set $gammaDisabled to false>> <<cacheaudio "introhum" "https://dylanjacquet.com/wp-content/uploads/2025/10/low-engine-hum-72529.mp3">>
<<nobr>> <<if $tries < 2>> <!-- Clé Alpha --> <<if !$alphaDisabled>> <<button "Key_7745302893">> <<set $success = false>> <<set $tries += 1>> <<set $alphaDisabled = true>> <<replace "#triesDisplay">>Essais restants : <strong><<print 3 - $tries>></strong><</replace>> <<replace "#message">> <p>Erreur. Le système renvoie une suite de chiffres illisibles...</p> <p>ATTENTION : Il ne reste que <<print 3 - $tries>> essai(s).</p> <</replace>> <<replace "#actions">><<include "MiniJeuActions">><</replace>> <</button>> <<else>> <button disabled>Clé Alpha (bloquée)</button> <</if>> <!-- Clé Beta --> <<if !$betaDisabled>> <<button "Key_772737383923">> <<set $success = false>> <<set $tries += 1>> <<set $betaDisabled = true>> <<replace "#triesDisplay">>Essais restants : <strong><<print 3 - $tries>></strong><</replace>> <<replace "#message">> <p>Erreur. L’écran devient noir un instant...</p> <p>ATTENTION : Il ne reste que <<print 3 - $tries>> essai(s).</p> <</replace>> <<replace "#actions">><<include "MiniJeuActions">><</replace>> <</button>> <<else>> <button disabled>Clé Beta (bloquée)</button> <</if>> <!-- Clé Gamma --> <<if !$gammaDisabled>> <<button "Key_98679688893">> <<set $success = false>> <<set $tries += 1>> <<set $gammaDisabled = true>> <<replace "#triesDisplay">>Essais restants : <strong><<print 3 - $tries>></strong><</replace>> <<replace "#message">> <p>Erreur. Une interférence semble brouiller le signal...</p> <p>ATTENTION : Il ne reste que <<print 3 - $tries>> essai(s).</p> <</replace>> <<replace "#actions">><<include "MiniJeuActions">><</replace>> <</button>> <<else>> <button disabled>Clé Gamma (bloquée)</button> <</if>> <<else>> <!-- $tries >= 2 : réussite --> <<if !$alphaDisabled>> <<button "Key_7745302893">> <<set $success = true>> <<set $alphaDisabled = true>> <<replace "#message">><p>Dernière tentative — accès accepté.</p><</replace>> <<replace "#actions">><em>Accès en cours...</em><</replace>> <<replace "#successArea">><<include "MiniJeuSuccess">><</replace>> <</button>> <<else>> <button disabled>Clé Alpha (bloquée)</button> <</if>> <<if !$betaDisabled>> <<button "Key_772737383923">> <<set $success = true>> <<set $betaDisabled = true>> <<replace "#message">><p>Dernière tentative — accès accepté.</p><</replace>> <<replace "#actions">><em>Accès en cours...</em><</replace>> <<replace "#successArea">><<include "MiniJeuSuccess">><</replace>> <</button>> <<else>> <button disabled>Clé Beta (bloquée)</button> <</if>> <<if !$gammaDisabled>> <<button "Key_98679688893">> <<set $success = true>> <<set $gammaDisabled = true>> <<replace "#message">><p>Dernière tentative — accès accepté.</p><</replace>> <<replace "#actions">><em>Accès en cours...</em><</replace>> <<replace "#successArea">><<include "MiniJeuSuccess">><</replace>> <</button>> <<else>> <button disabled>Clé Gamma (bloquée)</button> <</if>> <</if>> <</nobr>>
<div id="successArea"> <<if $success>> <p>HACK terminé. J'ai enfin réussi à craquer son mot de passe.</p> <<set $connected = true>> <<replace "#message">> <div class="glitch-screen"> <p>ACCÈS ACCEPTÉ – DÉCRYPTAGE EN COURS…</p> <p>HACK TERMINÉ.</p> <p>Vous êtes maintenant connecté au compte d’Alice.</p> </div> <</replace>> <<button "Explorer le compte">> <<goto "CHOICE_SCREEN">> <</button>> <</if>> </div> MUSIQUE : SON CONNEXION
<<include "CssMessenger">> <<nobr>> <div class="messenger inbox"> <div class="header"> <div class="meta"> <div class="name">Messages d’Alice</div> <div class="sub">Connecta / Boîte privée</div> </div> <div class="status-glitch">Accès non autorisé <span class="blink">_</span></div> </div> <div class="inbox-list"> <div class="conv unread" onclick="SugarCube.Engine.play('ChatAliceLeaThread')"> <img class="avatar" src="https://dylanjacquet.com/wp-content/uploads/2025/10/lea.jpg" alt="Léa"> <div class="conv-info"> <div class="name">Léa D.</div> <div class="preview">“Il m’a dit qu’il te retrouverait.”</div> </div> <div class="time">23 mai</div> </div> <div class="conv" onclick="SugarCube.Engine.play('ChatAliceMarkThread')"> <img class="avatar" src="https://dylanjacquet.com/wp-content/uploads/2025/10/mark.webp" alt="Marc"> <div class="conv-info"> <div class="name">Marc R.</div> <div class="preview">Café demain ? :)</div> </div> <div class="time">25 mai</div> </div> <div class="conv unread" onclick="SugarCube.Engine.play('ChatAliceConnectaThread')"> <img class="avatar" src="https://dylanjacquet.com/wp-content/uploads/2025/10/connecta.jpg" alt="Connecta"> <div class="conv-info"> <div class="name">Support Connecta</div> <div class="preview">Erreur : appareil principal non supprimable</div> </div> <div class="time">27 mai</div> </div> <div class="conv" onclick="SugarCube.Engine.play('ChatAlicePersonnalThread')"> <img class="avatar" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div class="conv-info"> <div class="name">Brouillon</div> <div class="preview">“S’il trouve ce message… c’est qu’il a réussi.”</div> </div> <div class="time">29 mai</div> </div> </div> <div class="footer"> <div class="hint">📂 Fichiers archivés • <span class="glitch">2 conversations cachées</span></div> </div> </div> <<link "Se déconnecter">><<goto "Hack_Disconnect">><</link>> <</nobr>>
<<include "CssMessenger">> <<nobr>> <div class="messenger"> <div class="header"> <img class="avatar" src="https://dylanjacquet.com/wp-content/uploads/2025/10/lea.jpg" alt="Léa"> <div class="meta"> <div class="name">Léa D.</div> <div class="sub">Vu pour la dernière fois il y a 2 mois</div> </div> </div> <div class="thread"> <div class="msg-row me"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <div class="bubble me">T’as vu Alan à la soirée hier ?</div> <div class="time">22 mai • 01:12</div> </div> </div> <div class="msg-row them"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/lea.jpg" alt="Léa"> <div> <div class="bubble them">Le gars en info ? Ouais vite fait, il avait l’air de bien t’aimer 😏</div> <div class="time">22 mai • 01:13</div> </div> </div> <div class="msg-row me"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <div class="bubble me">Il est gentil, mais un peu… intense.</div> <div class="time">22 mai • 01:15</div> </div> </div> <div class="msg-row them"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/lea.jpg" alt="Léa"> <div> <div class="bubble them">Genre ?</div> <div class="time">22 mai • 01:15</div> </div> </div> <div class="msg-row me"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <div class="bubble me">Il a retrouvé mon Insta avant même que je lui donne mon nom. Et il m’a envoyé 12 messages en une soirée.</div> <div class="time">22 mai • 01:16</div> </div> </div> <div class="msg-row them"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/lea.jpg" alt="Léa"> <div> <div class="bubble them">Oh wow. Fais gaffe. Il a pas l’air méchant mais... un peu trop connecté.</div> <div class="time">22 mai • 01:17</div> </div> </div> <div class="msg-row me"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <div class="bubble me">Ouais. Depuis hier, j’ai l’impression qu’il sait où je vais. Comme s’il avait mes trajets.</div> <div class="time">23 mai • 14:22</div> </div> </div> <div class="msg-row them"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/lea.jpg" alt="Léa"> <div> <div class="bubble them">Alice, bloque-le. Sérieusement.</div> <div class="time">23 mai • 14:23</div> </div> </div> <div class="msg-row me"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <div class="bubble me">Je sais. Je crois qu’il comprend pas les limites.</div> <div class="time">23 mai • 14:24</div> </div> </div> <div class="msg-row me"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <p class="bubble me glitch">Il m’a dit qu’il me <span class="glitch">retrouverait.</span></p> <div class="time">23 mai • 14:25</div> </div> </div> </div> </div> <<link "Retour à la boîte de réception">><<goto "InboxAlice">><</link>> <</nobr>>
<<include "CssMessenger">> <<nobr>> :: Chat_Alice_Marc <div class="messenger"> <div class="header"> <img class="avatar" src="https://dylanjacquet.com/wp-content/uploads/2025/10/mark.webp" alt="Marc"> <div class="meta"> <div class="name">Marc R.</div> <div class="sub">Connecté</div> </div> </div> <div class="thread"> <div class="msg-row me"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <div class="bubble me">Tu veux qu’on se capte demain pour le café ?</div> <div class="time">25 mai • 11:34</div> </div> </div> <div class="msg-row them"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/mark.webp" alt="Marc"> <div> <div class="bubble them">Avec plaisir 😎 toujours le même endroit ?</div> <div class="time">25 mai • 11:36</div> </div> </div> <div class="msg-row me"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <div class="bubble me">Yep. Et cette fois j’arrive à l’heure, promis 😅</div> <div class="time">25 mai • 11:37</div> </div> </div> <div class="msg-row them"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/mark.webp" alt="Marc"> <div> <div class="bubble them">Haha, j’y croirai quand je verrai 😜</div> <div class="time">25 mai • 11:38</div> </div> </div> <hr style="border:none;border-top:1px dashed #aaa;margin:12px 0;opacity:.5;"> <div class="msg-row me"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <div class="bubble me">Marc… t’as vu un mec à lunettes qui me fixait tout le long au café ?</div> <div class="time">26 mai • 18:11</div> </div> </div> <div class="msg-row them"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/mark.webp" alt="Marc"> <div> <div class="bubble them">Non pourquoi ?</div> <div class="time">26 mai • 18:12</div> </div> </div> <div class="msg-row me"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <div class="bubble me">Je crois que c’était Alan. Il était dehors, il me regardait, sans bouger.</div> <div class="time">26 mai • 18:14</div> </div> </div> <div class="msg-row them"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/mark.webp" alt="Marc"> <div> <div class="bubble them">Tu veux que je t’accompagne chez toi ?</div> <div class="time">26 mai • 18:15</div> </div> </div> <div class="msg-row me"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <div class="bubble me">Non ça va… j’espère juste que c’est une coïncidence.</div> <div class="time">26 mai • 18:17</div> </div> </div> </div> </div> <<link "Retour à la boîte de réception">><<goto "InboxAlice">><</link>> <</nobr>>
<<include "CssMessenger">> <<nobr>> :: Chat_Alice_Connecta <div class="messenger"> <div class="header"> <img class="avatar" src="https://dylanjacquet.com/wp-content/uploads/2025/10/connecta.jpg" alt="Connecta"> <div class="meta"> <div class="name">Support Connecta</div> <div class="sub">Assistance automatisée</div> </div> </div> <div class="thread"> <div class="msg-row me"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <div class="bubble me">Bonjour, je crois que quelqu’un accède à mon compte sans autorisation.</div> <div class="time">27 mai • 09:02</div> </div> </div> <div class="msg-row them"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/connecta.jpg" alt="C"> <div> <div class="bubble them">Nous avons détecté des connexions inhabituelles depuis un appareil : ALN21-Paris.</div> <div class="time">27 mai • 09:03</div> </div> </div> <div class="msg-row me"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <div class="bubble me">C’est pas moi. Je veux bloquer cet appareil.</div> <div class="time">27 mai • 09:04</div> </div> </div> <div class="msg-row them"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/connecta.jpg" alt="C"> <div> <div class="bubble them">Erreur : cet appareil est reconnu comme "principal".</div> <div class="time">27 mai • 09:04</div> </div> </div> <div class="msg-row me"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <div class="bubble me glitch">Qu’est-ce que ça veut dire ? Pourquoi je ne peux pas le supprimer ?</div> <div class="time">27 mai • 09:05</div> </div> </div> </div> </div> <<link "Retour à la boîte de réception">><<goto "InboxAlice">><</link>> <</nobr>>
<<include "CssMessenger">> <<nobr>> :: Chat_Alice_Draft <div class="messenger"> <div class="header"> <img class="avatar" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div class="meta"> <div class="name">Brouillon non envoyé</div> <div class="sub">Dernière modification : 29 mai</div> </div> </div> <div class="thread"> <div class="msg-row me"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <div class="bubble me"> "Je crois qu’il ne me voit plus vraiment. Il voit ce qu’il veut voir. C’est comme si j’existais dans une version inventée de sa tête, où je souris toujours, où je réponds toujours. Et plus j’essaie de m’effacer, plus il creuse." </div> <div class="time">Non envoyé</div> </div> </div> <div class="msg-row me glitch"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <div class="bubble me">S’il trouve ce message… c’est qu’il a réussi.</div> </div> </div> </div> </div> <<link "Retour à la boîte de réception">><<goto "InboxAlice">><</link>> <</nobr>>
<style> /* ---- Messenger-like layout ---- */ .messenger { width: 100%; max-width: 820px; height: 62vh; margin: 1rem auto; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.45); display: grid; grid-template-rows: 64px 1fr 72px; background: linear-gradient(180deg,#fafafa,#f0f2f5); overflow: hidden; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #111; } /* header */ .messenger .header { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid rgba(0,0,0,0.06); background: linear-gradient(180deg, #fff, #fafbfd); } .messenger .header img.avatar { width:44px;height:44px;border-radius:50%; object-fit:cover;border:2px solid rgba(0,0,0,0.04); } .messenger .header .meta { display:flex;flex-direction:column; } .messenger .header .meta .name { font-weight:600; font-size:1rem; } .messenger .header .meta .sub { font-size:0.85rem; color: white;; } /* thread area */ .thread { padding: 18px; overflow:auto; background-image: linear-gradient(180deg, rgba(0,0,0,0.01), rgba(0,0,0,0.00)); display:flex; flex-direction:column; gap:12px; } /* message bubble */ .msg-row { display:flex; gap:10px; align-items:flex-end; } .msg-row.me { justify-content:flex-end; } .bubble { max-width:70%; padding: 12px 14px; border-radius: 18px; box-shadow: 0 3px 6px rgba(16,24,40,0.06); font-size:0.96rem; line-height:1.3; position:relative; word-wrap:break-word; } .msg-row.me div:first-of-type { display: flex; flex-direction: column; align-content: flex-end; align-items: flex-end; } .bubble.them { background: white; color:#111; border: 1px solid rgba(16,24,40,0.03); border-bottom-left-radius: 4px; } .bubble.me { background: linear-gradient(90deg,#2d8cff,#0066ff); color: white; border-bottom-right-radius: 4px; margin-left: auto; } .me .avatar-small { order: 2; } .me .time { text-align: right; } /* small meta */ .time { font-size:0.72rem; color:#8b8f97; margin-top:6px; } .avatar-small { width:36px; height:36px; border-radius:50%; object-fit:cover; } /* input area */ .messenger .composer { padding: 12px; border-top: 1px solid rgba(0,0,0,0.06); display:flex; gap:12px; align-items:center; background: #fff; } .input-sim { flex:1; background: #f0f2f5; border-radius:20px; padding:10px 14px; font-size:0.96rem; color:#333; outline:none; border: 1px solid rgba(0,0,0,0.03); } .unread { position: relative; font-size:0.75rem; padding:4px 8px; } .unread::after { position: absolute; width: fit-content; height: 24px; display:flex; align-items: center; justify-content: center; top: 50%; right: 24px; background-color: white; border-radius: 90px; border-color: blue; color: blue; content: "1 message non-lu"; border: 1px solid black; font-size:0.75rem; padding:4px; transform: translateY(-50%); } /* glitch effect for corrupted text */ .glitch { color:#d90000; text-shadow: 1px 0 #0ff, -1px 0 #f0f; animation: glitchMove 0.24s linear infinite; display:inline-block; } @keyframes glitchMove { 0% { transform: translate(0,0); } 25% { transform: translate(-1px,0); } 50% { transform: translate(1px,-1px); } 75% { transform: translate(-1px,1px); } 100% { transform: translate(0,0); } } /* slow flicker to suggest implosion of UI */ .messenger.flicker { animation: uiFlicker 1.6s infinite; } @keyframes uiFlicker { 0% { filter: none; } 50% { filter: hue-rotate(5deg) brightness(0.98); } 100% { filter: none; } } /* responsive */ @media (max-width:720px){ .messenger { width: 96%; height: 70vh; } .bubble { max-width: 84%; } } .messenger .header { background: #0078FF; color: #fff; padding: 10px 14px; display: flex; align-items: center; } .messenger .meta .name { font-weight: 600; font-size: 1.1em; } .messenger .meta .sub { font-size: 0.8em; opacity: 0.8; } .status-glitch { font-size: 0.75em; letter-spacing: 0.05em; color: #fff; opacity: 0.7; } .blink { animation: blink 1s infinite; } @keyframes blink { 50% { opacity: 0; } } /* -------- Inbox -------- */ .inbox-list { display: flex; flex-direction: column; background: #fff; } .conv { display: flex; align-items: center; padding: 10px 12px; border-bottom: 1px solid #eee; cursor: pointer; transition: background 0.2s ease; } .conv:hover { background: #f0f3ff; } .conv.unread .name { font-weight: bold; } .conv.unread .preview { color: #0078FF; } .conv img.avatar { width: 42px; height: 42px; border-radius: 50%; margin-right: 10px; object-fit: cover; } .conv-info { flex-grow: 1; overflow: hidden; } .conv-info .name { font-size: 0.95em; margin-bottom: 2px; } .conv-info .preview { font-size: 0.8em; color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conv .time { font-size: 0.75em; color: #aaa; } .footer { background: #fafafa; text-align: center; padding: 8px; font-size: 0.8em; color: #666; border-top: 1px solid #eee; } /* -------- Effets Glitch -------- */ .glitch { position: relative; display: inline-block; color: #f33; animation: glitch-anim 1s infinite; } @keyframes glitch-anim { 0% { text-shadow: 1px 0 red, -1px 0 cyan; } 50% { text-shadow: -1px 0 red, 1px 0 cyan; } 100% { text-shadow: 1px 0 red, -1px 0 cyan; } } </style>
<<nobr>> <<include "CSS_HUB">> <<audio "introhum" play volume 0.2>> <div class="connecta-ui-dark"> <<include "SIDEBAR_PARTIAL">> <main class="feed"> <div class="post"> <div class="post-header"> <img src="https://placekitten.com/60/60" alt="profil" class="avatar"> <div> <h3>Alice.Connecta</h3> <p>Il y a 2 mois</p> </div> </div> <p class="post-content"> “Parfois, je me demande si tout ce qu’on partage ici existe vraiment...” </p> <img src="https://placehold.co/600x300" class="post-img"> <div class="post-footer"> ❤️ 1,2k 💬 214 🔁 98 </div> </div> <div class="post"> <div class="post-header"> <img src="https://placekitten.com/61/61" class="avatar"> <div> <h3>@JulienX</h3> <p>Il y a 1 mois</p> </div> </div> <p class="post-content"> “Certains ne savent pas lâcher prise... ils s’accrochent à des fantômes.” </p> <div class="post-footer"> 💔 832 💬 45 </div> </div> </main> <<include "SIDEBAR_RIGHT">> </div> <</nobr>>
<<nobr>> <<include "CSS_HUB">> <<audio "introhum" play volume 0.25>> <div class="connecta-ui-dark"> <<include "SIDEBAR_PARTIAL">> <main class="photo"> <div class="photo-header"> <h2>Photos d’Alice</h2> <p>(Soirées, selfies, instants capturés sur Connecta.)</p> </div> <div class="photo-grid"> <div class="photo-card glitchable"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/alice-photo-1.jpg" alt="Soirée Connecta" class="photo-img"> <div class="photo-caption">Événement “Virtual Party #23” — 24.05.27</div> </div> <div class="photo-card glitchable"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/alice-photo-2.jpg" alt="Selfie holographique" class="photo-img"> <div class="photo-caption">Selfie holographique — 28.05.27</div> </div> <div class="photo-card glitchable"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/alice-photo-3.jpg" alt="Photo miroir" class="photo-img"> <div class="photo-caption">Miroir de soirée — 02.06.27</div> </div> <div class="photo-card glitchable"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/alice-photo-4.jpg" alt="Photo extérieure" class="photo-img"> <div class="photo-caption">Extérieur — 04.06.27</div> </div> <div class="photo-card glitchable"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/alice-photo-5.jpg" alt="Photo extérieure" class="photo-img"> <div class="photo-caption">Extérieur — 04.06.27</div> </div> <div class="photo-card glitchable"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/photos-alice-6.jpg" alt="Photo extérieure" class="photo-img"> <div class="photo-caption">Extérieur — 04.06.27</div> </div> <div class="photo-card glitchable"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/photos-alice-7.jpg" alt="Photo extérieure" class="photo-img"> <div class="photo-caption">Extérieur — 04.06.27</div> </div> <div class="photo-card glitchable"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/photos-alice-8.jpg" alt="Photo extérieure" class="photo-img"> <div class="photo-caption">Extérieur — 04.06.27</div> </div> <div class="photo-card glitchable"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/photos-alice-9.jpg" alt="Photo extérieure" class="photo-img"> <div class="photo-caption">Extérieur — 04.06.27</div> </div> </div> <div class="photo-dialogue"> <p>Alan : “Je ne me souviens pas avoir été là…”</p> </div> <div class="photo-return"> <<button "↩ Retour">> <<goto "CHOICE_SCREEN">> <</button>> </div> </main> <<include "SIDEBAR_RIGHT">> </div> <</nobr>> <style> .photo { background: rgba(15, 15, 30, 0.8); padding: 25px 60px; overflow-y: auto; box-shadow: inset 0 0 20px rgba(80,80,255,0.05); } .photo h2{ margin-top: 0; } .photo-gallery-container { min-height: 100vh; background: radial-gradient(circle at 50% 30%, #060614 0%, #000 90%); padding: 60px 8%; color: #e0e6ff; font-family: 'IBM Plex Mono', monospace; text-align: center; animation: fadeInPhotos 1.2s ease forwards; } .photo-header h2 { font-size: 1.5rem; letter-spacing: 0.05em; color: #cfd7ff; text-shadow: 0 0 10px rgba(150,150,255,0.2); margin-bottom: 5px; } .photo-header p { color: #8d93c7; font-size: 0.95rem; margin-bottom: 50px; } .photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 30px; justify-items: center; align-items: start; } .photo-card { width: 100%; position: relative; overflow: hidden; border-radius: 10px; border: 1px solid rgba(120,120,255,0.1); background: rgba(255,255,255,0.02); box-shadow: 0 6px 20px rgba(30,30,80,0.3); transition: transform 0.4s ease, box-shadow 0.4s ease; } .photo-card:hover { transform: scale(1.03); box-shadow: 0 12px 40px rgba(100,100,255,0.25); } .photo-img { object-fit: contain; width: 100%; height: 250px; display: block; filter: brightness(0.85) contrast(1.05) grayscale(20%); transition: all 0.5s ease; } .photo-card:hover .photo-img { filter: brightness(1.05) contrast(1.2) saturate(110%); } .photo-caption { font-size: 0.85rem; color: #b9c0ff; padding: 10px; background: rgba(20,20,40,0.4); border-top: 1px solid rgba(120,120,255,0.08); } .photo-dialogue { margin-top: 50px; font-style: italic; color: #c6c9ff; font-size: 1.1rem; text-shadow: 0 0 5px rgba(150,150,255,0.1); } .photo-return { margin-top: 40px; } .photo-return button { background: linear-gradient(90deg, rgba(60,80,200,0.18), rgba(100,70,200,0.18)); border: 1px solid rgba(140,120,255,0.1); color: #e9eaff; padding: 12px 26px; border-radius: 8px; font-weight: 600; letter-spacing: 0.05em; cursor: pointer; transition: all 0.25s ease; } .photo-return button:hover { background: linear-gradient(90deg, rgba(80,100,255,0.25), rgba(140,110,255,0.25)); box-shadow: 0 0 20px rgba(120,100,255,0.25); } .glitchable:hover::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient( transparent 0, rgba(255,255,255,0.03) 2px, transparent 4px ); animation: glitchScan 1s linear infinite; mix-blend-mode: lighten; opacity: 0.15; pointer-events: none; } @keyframes glitchScan { 0% { background-position: 0 0; } 100% { background-position: 0 10px; } } .photo-caption:hover::after { content: " — (modifiée)"; color: #ffb3b3; opacity: 0.8; animation: blinkSlow 1.8s infinite; } @keyframes blinkSlow { 0%, 100% { opacity: 0.8; } 50% { opacity: 0.2; } } @keyframes fadeInPhotos { from { opacity: 0; filter: blur(10px); transform: translateY(10px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } } @media (max-width: 640px) { .photo-header h2 { font-size: 1.3rem; } .photo-grid { gap: 20px; } .photo-caption { font-size: 0.8rem; } } </style>
<<nobr>> <<audio "introhum" play volume 0.2>> <<include "CSS_HUB">> <div class="connecta-ui-dark"> <<include "SIDEBAR_PARTIAL">> <main class="messagerie"> <h2>💬 Messagerie Connecta</h2> <p class="subtitle">Derniers échanges enregistrés</p> <ul class="contact-list"> <li class="contact-item" onclick="SugarCube.Engine.play('MESSAGE_LEA')"> <img src="https://placekitten.com/60/60" class="avatar"> <div> <h4>Léa Martin</h4> <p>“Tu devrais passer à autre chose…”</p> </div> <span class="status offline">Inactif</span> </li> <li class="contact-item" onclick="SugarCube.Engine.play('MESSAGE_ANTOINE')"> <img src="https://placekitten.com/61/61" class="avatar"> <div> <h4>Antoine Dupuis</h4> <p>“T’as revu Alice ?”</p> </div> <span class="status offline">Inactif</span> </li> <li class="contact-item" onclick="SugarCube.Engine.play('MESSAGE_JULIEN')"> <img src="https://placekitten.com/62/62" class="avatar"> <div> <h4>Julien X</h4> <p>“Tu ne devrais pas t’en mêler…”</p> </div> <span class="status active">En ligne</span> </li> <li class="contact-item hidden" onclick="SugarCube.Engine.play('MESSAGE_ALAN')"> <img src="https://placehold.co/60x60?text=?"> <div> <h4>(Inconnu)</h4> <p>“Tu ne devrais pas être ici.”</p> </div> <span class="status warning">[Anomalie]</span> </li> </ul> <<button "Retour à l’accueil" >> <<goto "CHOICE_SCREEN">> <</button>> </main> <<include "SIDEBAR_RIGHT">> </div> <</nobr>> <style> .messagerie { background: rgba(15, 15, 30, 0.8); padding: 25px 60px 40px; overflow-y: auto; box-shadow: inset 0 0 20px rgba(80,80,255,0.05); } .messagerie h2 { margin-top: 0; color:#e0e0ff; } body { background-color: #f6f7fb; font-family: 'Inter', sans-serif; color: #1c1c1c; margin: 0; overflow: hidden; } /* --- CONTENEUR PRINCIPAL --- */ .connecta-messages { display: grid; grid-template-columns: 360px 1fr; height: 100vh; } .subtitle { font-size: 0.9em; color: #999; margin-bottom: 25px; } .contact-list { list-style: none; padding: 0; margin: 0; overflow-y: auto; flex-grow: 1; } .contact-item { display: flex; align-items: center; justify-content: space-between; padding: 12px; margin-bottom: 8px; background-color: #f9f9ff; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; } .contact-item:hover { background-color: #eef0ff; transform: translateX(2px); } .contact-item img.avatar { border-radius: 50%; margin-right: 10px; } .contact-item div { flex-grow: 1; text-align: left; } .contact-item h4 { margin: 0; font-size: 1em; color: #333; } .contact-item p { margin: 4px 0 0; font-size: 0.85em; color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .status { font-size: 0.75em; color: #888; margin-left: 10px; } .status.active { color: #4caf50; font-weight: 600; } .status.offline { color: #aaa; } .status.warning { color: #e53935; font-weight: bold; } .hidden { background: #fff0f0; border: 1px solid rgba(255,80,80,0.3); animation: pulseHidden 2s infinite; } @keyframes pulseHidden { 0%, 100% { box-shadow: 0 0 5px rgba(255,0,0,0.1); } 50% { box-shadow: 0 0 15px rgba(255,0,0,0.2); } } /* --- BOUTON RETOUR --- */ .return-btn { background-color: #5865f2; color: #fff; border: none; border-radius: 8px; padding: 10px 20px; margin-top: 20px; cursor: pointer; font-weight: 600; transition: all 0.2s ease; } .return-btn:hover { background-color: #4854d6; } /* --- FENÊTRE DE CHAT --- */ .chat-preview { background-color: #f3f4fb; padding: 40px; display: flex; align-items: center; justify-content: center; } .placeholder { background-color: #fff; padding: 60px 100px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); color: #777; font-size: 1.1em; } </style>
<<nobr>> <<include "CSS_HUB">> <<audio "introhum" play volume 0.25>> <div class="connecta-ui-dark"> <<include "SIDEBAR_PARTIAL">> <main class="contacts"> <h2>Contacts enregistrés</h2> <p>Synchronisation Connecta — Dernière mise à jour : <span class="contacts- date">06.06.27</span></p> <div class="contacts-list"> <div class="contact-card"> <div class="contact-avatar lea"></div> <div class="contact-name">Léa</div> </div> <div class="contact-card"> <div class="contact-avatar antoine"></div> <div class="contact-name">Antoine</div> </div> <div class="contact-card"> <div class="contact-avatar julien"></div> <div class="contact-name">Julien</div> </div> </div> <div class="contacts-info"> <p>Utilisateur bloqué.</p> </div> <div class="contacts-list"> <div class="contact-card blocked"> <div class="contact-avatar alan"></div> <div class="contact-name">Alan</div> <div class="contact-status">Bloqué</div> </div> </div> <div class="contacts-dialogue"> <p>Alan : “Bloqué ? Non... impossible.”</p> </div> <div class="contacts-choice"> <<button "Voir les connexions récentes">> <<goto "LOGS_SCREEN">> <</button>> </div> </main> <<include "SIDEBAR_RIGHT">> </div> <</nobr>> <style> .contacts { background: rgba(15, 15, 30, 0.8); padding: 25px 60px; overflow-y: auto; box-shadow: inset 0 0 20px rgba(80,80,255,0.05); } .contacts h2 { margin-top: 0; } .contacts-container { min-height: 100vh; background: radial-gradient(circle at 50% 25%, #070713 0%, #000 85%); padding: 60px 10%; font-family: 'IBM Plex Mono', monospace; color: #e0e4ff; text-align: center; animation: fadeInContacts 1.2s ease forwards; } .contacts-header h2 { font-size: 1.5rem; color: #cdd5ff; letter-spacing: 0.06em; margin-bottom: 6px; text-shadow: 0 0 8px rgba(150,150,255,0.15); } .contacts-header p { font-size: 0.9rem; color: #8e92c0; margin-bottom: 40px; } .contacts-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 25px; justify-items: center; margin-bottom: 40px; } .contact-card { position: relative; width: 200px; height: 180px; background: linear-gradient(180deg, rgba(30,30,60,0.2), rgba(10,10,20,0.4)); border: 1px solid rgba(120,120,255,0.1); border-radius: 12px; padding-top: 20px; box-shadow: 0 8px 24px rgba(20,20,60,0.4); transition: transform 0.3s ease, box-shadow 0.3s ease; } .contact-card:hover { transform: scale(1.04); box-shadow: 0 12px 36px rgba(80,80,200,0.3); } .contact-avatar { width: 80px; height: 80px; margin: 0 auto 10px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(120,120,255,0.15), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.05); box-shadow: 0 0 10px rgba(100,100,255,0.1); } .contact-avatar.lea { background-image: url("https://dylanjacquet.com/wp-content/uploads/2025/10/lea-avatar-small.jpg"); background-size: cover; background-position: center; } .contact-avatar.antoine { background-image: url("https://dylanjacquet.com/wp-content/uploads/2025/10/antoine-avatar-small.jpg"); background-size: cover; background-position: center; } .contact-avatar.julien { background-image: url("https://dylanjacquet.com/wp-content/uploads/2025/10/julien-avatar-small.jpg"); background-size: cover; background-position: center; } .contact-avatar.alan { background-image: url("https://dylanjacquet.com/wp-content/uploads/2025/10/alan-avatar-small.jpg"); background-size: cover; background-position: center; filter: grayscale(80%) brightness(0.6); } .contact-name { font-size: 1rem; color: #d8ddff; letter-spacing: 0.04em; } .contact-card.blocked { border: 1px solid rgba(255,80,80,0.25); background: linear-gradient(180deg, rgba(40,10,10,0.35), rgba(20,0,0,0.45)); animation: blockedPulse 2s infinite; } .contact-card.blocked .contact-name { color: #ffb3b3; } .contact-status { font-size: 0.85rem; color: #ff8080; position: absolute; bottom: 12px; left: 0; right: 0; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .contacts-info { font-size: 0.9rem; color: #a8b0ff; margin-top: 10px; letter-spacing: 0.04em; } .contacts-dialogue { margin-top: 40px; font-style: italic; font-size: 1.05rem; color: #c7cbff; text-shadow: 0 0 6px rgba(120,120,255,0.1); } .contacts-choice { margin-top: 40px; } .contacts-choice button { background: linear-gradient(90deg, rgba(60,80,200,0.18), rgba(100,70,200,0.18)); border: 1px solid rgba(140,120,255,0.1); color: #e9eaff; padding: 12px 28px; border-radius: 8px; font-weight: 600; letter-spacing: 0.05em; cursor: pointer; transition: all 0.25s ease; } .contacts-choice button:hover { background: linear-gradient(90deg, rgba(80,100,255,0.25), rgba(140,110,255,0.25)); box-shadow: 0 0 20px rgba(120,100,255,0.25); } @keyframes fadeInContacts { from { opacity: 0; transform: translateY(10px); filter: blur(10px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes blockedPulse { 0%, 100% { box-shadow: 0 0 10px rgba(255,0,0,0.15); } 50% { box-shadow: 0 0 20px rgba(255,0,0,0.3); } } @media (max-width: 640px) { .contacts-list { grid-template-columns: 1fr 1fr; gap: 18px; } .contact-card { width: 160px; height: 160px; } .contact-name { font-size: 0.9rem; } } </style>
<<audio "introhum" play volume 0.25>> <div class="archive-container"> <pre class="system"> [Ouverture des archives personnelles Connecta // Utilisateur : ALN21] [Authentification réussie] </pre> <div class="alan fade"> C’est… mon compte.<br> Je n’étais pas censé pouvoir y accéder depuis ici.<br> Connecta garde tout. Même ce que j’ai supprimé. </div> <div class="system"> Archives disponibles : </div> <ul class="archives"> <li><<button "Messages envoyés">><<goto "ARCHIVE_MESSAGES">><</button>></li> <li><<button "Notes personnelles">><<goto "ARCHIVE_NOTES">><</button>></li> <li><<button "Historique de connexions">><<goto "ARCHIVE_LOGS">><</button>></li> <li><<button "Fichiers audio">><<goto "ARCHIVE_AUDIO">><</button>></li> </ul> </div> <style> .archive-container { background: linear-gradient(180deg, #000510 0%, #010a18 100%); color: #b8ebff; font-family: 'IBM Plex Mono', monospace; padding: 60px 8%; min-height: 100vh; line-height: 1.6; overflow: hidden; animation: fadeInScene 1.5s ease forwards; } .system { background: rgba(0,255,200,0.04); border: 1px solid rgba(0,255,200,0.1); border-radius: 6px; color: #00ffc8; padding: 16px; font-size: 0.95rem; white-space: pre-line; margin-bottom: 40px; animation: flickerSystem 5s infinite; } .alan { color: #aeefff; font-style: italic; opacity: 0; animation: fadeText 2s ease forwards; } .archives { list-style: none; padding: 0; margin-top: 30px; display: flex; flex-direction: column; gap: 20px; animation: fadeIn 3s ease forwards; } .archives li { text-align: center; } .archives button { width: 60%; padding: 14px 28px; background: linear-gradient(90deg, rgba(0,255,255,0.1), rgba(255,255,255,0.08)); border: 1px solid rgba(0,255,255,0.3); border-radius: 8px; color: #d6faff; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-family: 'IBM Plex Mono', monospace; } .archives button:hover { background: linear-gradient(90deg, rgba(0,255,255,0.25), rgba(255,255,255,0.25)); box-shadow: 0 0 20px rgba(0,255,255,0.4); color: #fff; } @keyframes fadeText { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } } @keyframes flickerSystem { 0%, 100% { opacity: 1; } 45% { opacity: 0.85; } 50% { opacity: 0.5; } 55% { opacity: 1; } } @keyframes fadeInScene { from { opacity: 0; filter: blur(15px); transform: translateY(40px); } to { opacity: 1; filter: none; transform: none; } } </style>
<<nobr>> <<include "CSS_MESSAGERIE">> <<audio "introhum" play volume 0.25>> <<include "CSS_HUB">> <div class="connecta-ui-dark"> <<include "SIDEBAR_PARTIAL">> <main class="chat-container"> <div class="chat-header"> <div class="chat-avatar lea"></div> <div class="chat-info"> <h3>Léa</h3> <p>En ligne</p> </div> </div> <div class="chat-thread"> <div class="msg msg-right"> <p>J’ai l’impression qu’il me suit encore.</p> <span class="timestamp">18:43</span> </div> <div class="msg msg-left"> <p>Tu es sûre ? Peut-être qu’il est juste maladroit.</p> <span class="timestamp">18:44</span> </div> <div class="msg msg-right"> <p>Non… je sens qu’il me “cherche” tout le temps.</p> <span class="timestamp">18:45</span> </div> <div class="msg msg-left"> <p>Bloque-le. Supprime tout. Même les logs.</p> <span class="timestamp">18:46</span> </div> <div class="msg msg-right glitch"> <p>Je n’arrive pas à le faire.</p> <span class="timestamp">18:47</span> </div> <div class="msg msg-left"> <p>Il faut que tu passes à autre chose.</p> <span class="timestamp">18:48</span> </div> </div> <div class="chat-footer"> <<button "↩ Retour à la messagerie">> <<goto "MESSAGES_MENU">> <</button>> </div> </main> <<include "SIDEBAR_RIGHT">> </div> <</nobr>>
<<nobr>> <<include "CSS_MESSAGERIE">> <<audio "introhum" play volume 0.25>> <<include "CSS_HUB">> <div class="connecta-ui-dark"> <<include "SIDEBAR_PARTIAL">> <main class="chat-container"> <div class="chat-header"> <div class="chat-avatar julien"></div> <div class="chat-info"> <h3>Julien</h3> <p>En ligne</p> </div> </div> <div class="chat-thread"> <div class="msg msg-left"> <p>Tu m’évites encore ?</p> <span class="timestamp">22:03</span> </div> <div class="msg msg-right"> <p>Non, j’ai juste besoin d’un peu d’espace.</p> <span class="timestamp">22:04</span> </div> <div class="msg msg-left"> <p>C’est marrant, tu dis toujours ça quand quelqu’un d’autre arrive dans ta vie.</p> <span class="timestamp">22:05</span> </div> <div class="msg msg-right"> <p>Je t’ai déjà dit que ce n’était pas comme ça.</p> <span class="timestamp">22:06</span> </div> <div class="msg msg-left"> <p>Il t’écrit souvent ?</p> <span class="timestamp">22:07</span> </div> <div class="msg msg-right"> <p>Ça ne te regarde pas.</p> <span class="timestamp">22:07</span> </div> <div class="msg msg-left"> <p>Donc oui.</p> <span class="timestamp">22:08</span> </div> <div class="msg msg-right"> <p>Julien…</p> <span class="timestamp">22:08</span> </div> <div class="msg msg-left"> <p>Je te demande juste, tu réponds même pas.</p> <p>T’as changé depuis la dernière fois.</p> <span class="timestamp">22:09</span> </div> <div class="msg msg-right"> <p>Peut-être parce que j’ai compris des choses.</p> <span class="timestamp">22:10</span> </div> <div class="msg msg-left"> <p>Ou parce que t’écoutes trop les autres.</p> <p>Ils t’ont retourné la tête.</p> <span class="timestamp">22:11</span> </div> <div class="msg msg-right glitch"> <p>Personne ne m’a rien “retourné”.</p> <span class="timestamp">22:11</span> </div> <div class="msg msg-left"> <p>Si tu savais ce qu’on dit de toi, Alice.</p> <span class="timestamp">22:12</span> </div> <div class="msg msg-right"> <p>Arrête, s’il te plaît.</p> <span class="timestamp">22:12</span> </div> <div class="msg msg-left"> <p>Tu crois que je veux ton mal ? Je t’ai toujours protégée.</p> <p>Tu me remercieras un jour.</p> <span class="timestamp">22:13</span> </div> <div class="msg msg-right"> <p>…</p> <span class="timestamp">22:14</span> </div> </div> <div class="chat-footer"> <<button "↩ Retour à la messagerie">> <<goto "MESSAGES_MENU">> <</button>> </div> </main> <<include "SIDEBAR_RIGHT">> </div> <</nobr>>
<<nobr>> <<include "CSS_MESSAGERIE">> <<audio "introhum" play volume 0.25>> <<include "CSS_HUB">> <div class="connecta-ui-dark"> <<include "SIDEBAR_PARTIAL">> <main class="chat-container corrupted"> <div class="chat-header"> <div class="chat-avatar alice"></div> <div class="chat-info"> <h3>Caché</h3> <p>En ligne</p> </div> </div> <div class="chat-thread"> <div class="msg msg-right"> <p>Tu dors ?</p> <span class="timestamp">01:12</span> </div> <div class="msg msg-right"> <p>Non.</p> <span class="timestamp">01:13</span> </div> <div class="msg msg-left"> <p>Je pensais à toi.</p> <span class="timestamp">01:14</span> </div> <div class="msg msg-right glitch-fade"> <p>…</p> <span class="timestamp">01:15</span> </div> <div class="msg msg-left"> <p>J’ai vu que tu étais connectée tout à l’heure, mais tu n’as pas répondu.</p> <span class="timestamp">01:16</span> </div> <div class="msg msg-right"> <p>J’étais occupée.</p> <span class="timestamp">01:17</span> </div> <div class="msg msg-left"> <p>Tu peux me dire à quoi ?</p> <span class="timestamp">01:17</span> </div> <div class="msg msg-right glitch-line"> <p>Rien d’import…</p> <span class="timestamp">01:18</span> </div> <div class="msg msg-left"> <p>Tu veux qu’on s’appelle ?</p> <span class="timestamp">01:19</span> </div> <div class="msg msg-right"> <p>Pas ce soir.</p> <span class="timestamp">01:20</span> </div> <div class="msg msg-left"> <p>Tu m’évites ?</p> <span class="timestamp corrupted-time">01:2█</span> </div> <div class="msg msg-right glitch-fade"> <p>…</p> <span class="timestamp">01:2█</span> </div> <div class="msg msg-right final"> <p>Bonne nuit, <span class="blurred glitched">Alan</span>.</p> <span class="timestamp">01:23</span> </div> </div> <div class="chat-footer"> <<button "↩ Retour à la messagerie">> <<goto "MESSAGES_MENU">> <</button>> </div> </main> <<include "SIDEBAR_RIGHT">> </div> <</nobr>> <style> .blurred { color: #aaa; filter: blur(3px); user-select: none; opacity: 0.8; text-shadow: 0 0 6px rgba(255,255,255,0.2); transition: filter 0.4s ease, opacity 0.4s ease; } .blurred:hover { filter: blur(0px); opacity: 1; text-shadow: 0 0 10px #88f; } /* --- Texte glitché --- */ .glitched { position: relative; display: inline-block; color: #f0f; animation: glitchAnim 0.2s infinite; font-weight: 500; text-shadow: 1px 0 #0ff, -1px 0 #f0f; } @keyframes glitchAnim { 0% { transform: translate(0); text-shadow: 1px 0 #0ff, -1px 0 #f0f; } 25% { transform: translate(1px, -1px); text-shadow: 2px 0 #f0f, -2px 0 #0ff; } 50% { transform: translate(-1px, 1px); text-shadow: 1px 0 #0ff, -1px 0 #f0f; } 75% { transform: translate(1px, 1px); text-shadow: 3px 0 #f0f, -3px 0 #0ff; } 100% { transform: translate(0); text-shadow: 1px 0 #0ff, -1px 0 #f0f; } } /* Variante glitch + flou (optionnel) */ .glitched.blurred { filter: blur(2px); opacity: 0.9; } </style>
<<nobr>> <<include "CSS_MESSAGERIE">> <<audio "introhum" play volume 0.25>> <<include "CSS_HUB">> <div class="connecta-ui-dark"> <<include "SIDEBAR_PARTIAL">> <main class="chat-container"> <div class="chat-header"> <div class="chat-avatar antoine"></div> <div class="chat-info"> <h3>Antoine</h3> <p>En ligne</p> </div> </div> <div class="chat-thread"> <div class="msg msg-left"> <p>T’as encore reçu des messages bizarres ?</p> <span class="timestamp">23:41</span> </div> <div class="msg msg-right"> <p>Oui… je crois qu’il lit tout.</p> <span class="timestamp">23:42</span> </div> <div class="msg msg-left"> <p>Tu veux que je signale ?</p> <span class="timestamp">23:43</span> </div> <div class="msg msg-right"> <p>Non, ça ne servirait à rien, il trouvera un autre moyen.</p> <span class="timestamp">23:44</span> </div> <div class="msg msg-left"> <p>Alice, c’est grave.</p> <span class="timestamp">23:45</span> </div> <div class="msg msg-right"> <p>Je gère.</p> <span class="timestamp">23:46</span> </div> <div class="msg msg-left"> <p>Ce n’est pas “gérer” quand tu dors plus.</p> <span class="timestamp">23:46</span> </div> <div class="msg msg-right glitch-line"> <p>…</p> <span class="timestamp">23:47</span> </div> <div class="msg msg-left"> <p>Donne-moi son pseudo.</p> <span class="timestamp">23:48</span> </div> <div class="msg msg-right glitch"> <p>Il change à chaque fois.</p> <span class="timestamp">23:48</span> </div> <div class="msg msg-right final glitch-fade"> <p>Il a déjà pris le contrôle de mon comppte une fois...</p> <span class="timestamp">23:49</span> </div> </div> <div class="chat-footer"> <<button "↩ Retour à la messagerie">> <<goto "MESSAGES_MENU">> <</button>> </div> </main> <<include "SIDEBAR_RIGHT">> </div> <</nobr>>
<<audio "introhum" play volume 0.25>> <div class="terminal-screen clean"> <div class="terminal-header">FICHIER TECHNIQUE :</div> <div class="terminal-body"> <p><span class="file-name">login_history.json</span></p> <div class="log-list"> <p>13/06 - 22:48:12 - <span class="ip-normal">IP: 192.168.54.23</span></p> <p>14/06 - 03:21:05 - <span class="ip-normal">IP: 192.168.54.23</span></p> <p class="log-highlight">15/06 - 04:07:42 - <span class="ip-suspect">IP: 145.22.88.104</span></p> </div> </div> <div class="alan-monologue"> <p><strong>Alan :</strong></p> <p>“Tiens, cette IP revient souvent. Peut-être celle du harceleur.”</p> </div> <div class="terminal-choice"> <<button "Vérifier mes connexions">> <<goto "MY_LOGS">> <</button>> </div> </div> <style> .terminal-screen.clean { background: radial-gradient(circle at 50% 20%, #060616 0%, #000 100%); color: #baffff; font-family: 'IBM Plex Mono', monospace; padding: 60px 8%; min-height: 100vh; overflow: hidden; animation: fadeInTerminal 1s ease forwards; } .terminal-header { text-transform: uppercase; color: #00ffcc; font-weight: 700; border-bottom: 1px solid rgba(0,255,200,0.2); padding-bottom: 10px; margin-bottom: 25px; letter-spacing: 0.05em; } .file-name { color: #a4f1ff; font-weight: 600; display: block; margin-bottom: 12px; font-size: 1rem; text-shadow: 0 0 6px rgba(0,255,200,0.2); } .log-list p { margin: 6px 0; font-size: 0.95rem; color: #8fffee; } .ip-normal { color: #7fffd9; } .log-highlight { animation: flickerHighlight 6s infinite; } @keyframes flickerHighlight { 0%, 100% { color: #8fffee; } 45% { color: #00ffc8; } 50% { color: #ff6666; } 52% { color: #8fffee; } } .ip-suspect { color: #ff5c5c; text-shadow: 0 0 6px rgba(255, 80, 80, 0.5); animation: ipPulse 4s infinite; } @keyframes ipPulse { 0%, 100% { opacity: 1; } 45% { opacity: 0.8; } 50% { opacity: 0.5; text-shadow: 0 0 8px rgba(255, 0, 0, 0.4); } 55% { opacity: 0.9; } } .alan-monologue { margin-top: 40px; font-size: 1rem; color: #b0f6f2; line-height: 1.5; font-style: italic; text-shadow: 0 0 6px rgba(0,255,200,0.1); animation: revealText 1.5s ease forwards; } @keyframes revealText { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .terminal-choice { text-align: center; margin-top: 60px; } .terminal-choice button { background: linear-gradient(90deg, rgba(0,255,200,0.08), rgba(0,120,255,0.08)); border: 1px solid rgba(0,255,200,0.2); color: #baffff; padding: 14px 32px; border-radius: 10px; font-weight: 600; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; } .terminal-choice button:hover { background: linear-gradient(90deg, rgba(0,255,200,0.25), rgba(0,120,255,0.25)); box-shadow: 0 0 20px rgba(0,255,200,0.25); } @keyframes fadeInTerminal { from { opacity: 0; filter: blur(8px); transform: translateY(20px); } to { opacity: 1; filter: none; transform: translateY(0); } } </style>
<<audio "introhum" play volume 0.25>> <div class="terminal-screen corrupt"> <div class="terminal-header">FICHIER TECHNIQUE — SESSION UTILISATEUR : ALAN</div> <div class="terminal-body"> <p><span class="log-label">Dernière connexion :</span> <span class="ip-same">145.22.88.104</span></p> </div> <div class="alan-monologue"> <p><strong>Alan :</strong></p> <p>“C’est… la même.<br> Non, c’est juste un cache réseau. Ou un VPN mal configuré.”</p> </div> <div class="audio-glitch"></div> <div class="terminal-choice"> <<button "↩ Retour">> <<goto "CHOICE_SCREEN">> <</button>> </div> </div> <style> .terminal-screen.corrupt { background: radial-gradient(circle at 50% 30%, #040410 0%, #000 100%); color: #baffff; font-family: 'IBM Plex Mono', monospace; padding: 60px 8%; min-height: 100vh; overflow: hidden; animation: fadeInTerminal 1.5s ease forwards, staticNoise 5s infinite; } .terminal-header { text-transform: uppercase; color: #00ffc8; font-weight: 700; border-bottom: 1px solid rgba(0,255,200,0.2); padding-bottom: 10px; margin-bottom: 25px; letter-spacing: 0.05em; } .terminal-body { margin-bottom: 40px; font-size: 1rem; color: #a8fff4; } .ip-same { color: #ff5555; text-shadow: 0 0 10px rgba(255, 60, 60, 0.8); animation: ipShock 4s infinite; } @keyframes ipShock { 0%, 100% { opacity: 1; transform: none; } 45% { opacity: 0.6; transform: translateX(-1px); } 50% { opacity: 0.4; transform: skewX(2deg); filter: blur(1px); } 55% { opacity: 1; transform: none; } } .alan-monologue { font-size: 1rem; color: #d6fffb; line-height: 1.6; font-style: italic; max-width: 700px; text-shadow: 0 0 8px rgba(0,255,200,0.1); animation: revealText 2s ease forwards; } .alan-monologue p:last-child { color: #ffbbbb; animation: textPulse 3.5s infinite; } @keyframes textPulse { 0%, 100% { opacity: 1; } 45% { opacity: 0.8; } 50% { opacity: 0.5; filter: blur(0.5px); } 55% { opacity: 1; } } @keyframes staticNoise { 0%, 100% { background-position: 0 0; } 50% { background-position: 5px 3px; } } .audio-glitch { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; background: repeating-linear-gradient( 0deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02) 1px, transparent 1px, transparent 2px ); animation: glitchScan 0.5s infinite; } @keyframes glitchScan { 0%, 100% { opacity: 0.03; } 50% { opacity: 0.15; } } .terminal-choice { text-align: center; margin-top: 60px; } .terminal-choice button { background: linear-gradient(90deg, rgba(255,80,80,0.1), rgba(0,255,200,0.1)); border: 1px solid rgba(255,80,80,0.3); color: #ffffff; padding: 14px 32px; border-radius: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; } .terminal-choice button:hover { background: linear-gradient(90deg, rgba(255,80,80,0.25), rgba(0,255,200,0.25)); box-shadow: 0 0 20px rgba(255,80,80,0.25); } </style>
<<audio "introhum" play volume 0.25>> <<nobr>> <div class="terminal-screen"> <div class="terminal-header">ANALYSE DES CONNEXIONS UTILISATEUR : JULIEN</div> <div class="terminal-body"> <p><span class="log-label">Dernière activité :</span> 15/06 – 04:07:42</p> <p><span class="log-label">IP :</span> <span class="ip-highlight">145.22.88.104</span></p> <p><span class="log-label">Localisation estimée :</span> Paris, FR</p> </div> <div class="alan-monologue"> <p><strong>Alan (voix intérieure)</strong></p> <p>Attends… cette IP.<br> C’est la même que celle des logs d’Alice.<br> Et c’est celle que Connecta m’a signalée tout à l’heure.</p> <p>Julien s’est connecté à son compte.<br> C’est évident maintenant.</p> <p>C’est lui qui a modifié les accès.<br> C’est lui qui m’a bloqué.<br> Il veut que je crois que c’est de ma faute.</p> <p>Il veut l’éloigner de moi.</p> <p class="glitch-line">Depuis le début, il joue à ça.<br> Il a dû trouver un moyen d’usurper mon IP.<br> C’est facile quand on sait s’y prendre.</p> <p>Peut-être même qu’il a cloné mon ordi.<br> <span class="glitch-flicker">Ou pire : qu’il est déjà dans mon système.</span></p> <p class="glitch-fade">C’est pour ça qu’elle ne me répond plus.<br> Il contrôle son compte.<br> Il parle à ma place.</p> <p>Il faut que je le démasque.<br> Il faut que je trouve Alice avant lui.</p> </div> <div class="terminal-choice"> <<button "🔍 Trouver Alice">> <<goto "EVENT_RETURN">> <</button>> </div> </div> <</nobr>> <style> .terminal-screen { background: radial-gradient(circle at 50% 30%, #040410 0%, #000 100%); color: #00ffcc; font-family: 'IBM Plex Mono', monospace; min-height: 100vh; padding: 60px 8%; overflow: hidden; animation: fadeInTerminal 1.5s ease forwards; } .terminal-header { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #00ffc8; margin-bottom: 30px; border-bottom: 1px solid rgba(0,255,200,0.2); padding-bottom: 10px; text-shadow: 0 0 8px rgba(0,255,200,0.3); } .terminal-body { background: rgba(0, 255, 180, 0.04); border: 1px solid rgba(0,255,200,0.1); border-radius: 8px; padding: 15px 25px; line-height: 1.5em; margin-bottom: 40px; color: #8affdf; } .log-label { color: #00ffc8; font-weight: 600; letter-spacing: 0.04em; } .ip-highlight { color: #ff4b4b; font-weight: bold; text-shadow: 0 0 8px rgba(255, 80, 80, 0.6); animation: flickerIP 2.5s infinite; } @keyframes flickerIP { 0%, 100% { opacity: 1; } 48% { opacity: 0.6; } 50% { opacity: 0.3; } 52% { opacity: 1; } } .alan-monologue { margin-top: 30px; font-size: 1rem; color: #b9ffee; line-height: 1.6; text-shadow: 0 0 4px rgba(0, 255, 200, 0.2); } .alan-monologue p { margin-bottom: 16px; } .glitch-line { position: relative; } .glitch-line::after { content: ""; position: absolute; bottom: 5px; left: 0; width: 0; height: 1px; background: rgba(255, 0, 0, 0.4); animation: glitchLineJulien 3s infinite; } @keyframes glitchLineJulien { 0%, 100% { width: 0; opacity: 0; } 40%, 60% { width: 100%; opacity: 1; } } .glitch-flicker { color: #ff6666; animation: textFlicker 3s infinite; } @keyframes textFlicker { 0%, 100% { opacity: 1; } 45% { opacity: 0.4; } 50% { opacity: 0.2; filter: blur(1px); } 55% { opacity: 0.9; } } .glitch-fade { opacity: 0.8; animation: fadeText 6s infinite; } @keyframes fadeText { 0%, 100% { opacity: 1; filter: none; } 50% { opacity: 0.5; filter: blur(2px); } } .terminal-choice { text-align: center; margin-top: 60px; } .terminal-choice button { background: linear-gradient(90deg, rgba(0,255,200,0.1), rgba(0,150,255,0.1)); border: 1px solid rgba(0,255,200,0.2); color: #baffff; padding: 14px 32px; border-radius: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; } .terminal-choice button:hover { background: linear-gradient(90deg, rgba(0,255,200,0.25), rgba(0,150,255,0.25)); box-shadow: 0 0 20px rgba(0,255,200,0.25); } @keyframes fadeInTerminal { from { opacity: 0; filter: blur(10px); transform: translateY(10px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } } </style>
<<audio "introhum" play volume 0.25>> <div class="archive-container"> <pre class="system"> Chargement des messages envoyés par ALN21... </pre> <div class="alan fade"> Non... ce n’est pas possible.<br> Je n’ai jamais écrit ça...<br> Je n’aurais jamais... </div> <pre class="terminal"> [Alice_15/04 - 03:12] "Pourquoi tu fais ça, Alan ?" [Alice_15/04 - 03:13] "Tu m’as dit que tu ne me suivrais plus." [ALN21 - 03:14] "Tu mens. Tu me caches quelque chose." [ALN21 - 03:18] "Tu ne peux pas m’effacer comme ça. Je te retrouverai." </pre> <div class="alan fade"> Ces messages… je les avais effacés.<br> Mais Connecta… Connecta garde tout. </div> <div class="choice fade"> <<button "Retour aux archives">> <<goto "ARCHIVE_ALAN">> <</button>> </div> </div> <style> .archive-container { background: radial-gradient(circle at 50% 30%, #010511 0%, #000 100%); color: #b8ebff; font-family: 'IBM Plex Mono', monospace; padding: 60px 8%; min-height: 100vh; line-height: 1.6; overflow: hidden; animation: fadeInScene 1.5s ease forwards; } .system { background: rgba(0,255,200,0.04); border: 1px solid rgba(0,255,200,0.1); border-radius: 6px; color: #00ffc8; padding: 14px; font-size: 0.95rem; white-space: pre-line; margin-bottom: 40px; animation: flickerSystem 5s infinite; } .terminal { background: rgba(255,255,255,0.03); border-left: 2px solid rgba(0,255,255,0.3); padding: 20px 24px; color: #8cfaff; font-size: 0.9rem; line-height: 1.7; border-radius: 8px; white-space: pre-line; margin: 50px 0; position: relative; overflow: hidden; animation: glitchReveal 5s ease-in-out infinite; } .terminal::before { content: ""; position: absolute; top: -10%; left: 0; width: 100%; height: 120%; background: linear-gradient(0deg, transparent 30%, rgba(255,255,255,0.05) 50%, transparent 70%); animation: scanline 6s linear infinite; pointer-events: none; } @keyframes scanline { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } .alan { color: #aeefff; font-style: italic; margin: 25px 0; opacity: 0; animation: fadeText 3s ease forwards; } .choice { text-align: center; margin-top: 60px; animation: fadeIn 4s ease forwards; } .choice button { background: linear-gradient(90deg, rgba(0,255,255,0.1), rgba(255,255,255,0.08)); border: 1px solid rgba(0,255,255,0.3); border-radius: 8px; color: #d6faff; padding: 14px 32px; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-family: 'IBM Plex Mono', monospace; } .choice button:hover { background: linear-gradient(90deg, rgba(0,255,255,0.25), rgba(255,255,255,0.25)); box-shadow: 0 0 20px rgba(0,255,255,0.4); color: #fff; } @keyframes fadeText { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } } @keyframes flickerSystem { 0%, 100% { opacity: 1; } 45% { opacity: 0.85; } 50% { opacity: 0.5; } 55% { opacity: 1; } } @keyframes glitchReveal { 0%, 100% { opacity: 1; } 48% { opacity: 0.9; filter: blur(0px); } 50% { opacity: 0.6; filter: blur(1px); } 52% { opacity: 1; } } @keyframes fadeInScene { from { opacity: 0; filter: blur(15px); transform: translateY(40px); } to { opacity: 1; filter: none; transform: none; } } </style>
<<audio "introhum" play volume 0.25>> <div class="archive-container"> <pre class="system"> Chargement : Notes personnelles / ALN21 </pre> <pre class="terminal clean"> [Note_04_05] "Elle a cours le mardi matin à l’université. 8h15 bâtiment B." [Note_06_05] "Elle aime le café de la rue des Carmes. Toujours vers 14h." [Note_07_05] "Elle a changé sa coupe. Peut-être pour que je ne la reconnaisse pas." </pre> <div class="alan fade"> Non… c’étaient juste des observations…<br> Pas du harcèlement…<br> Je voulais juste comprendre. </div> <div class="choice fade"> <<button "Retour aux archives">> <<goto "ARCHIVE_ALAN">> <</button>> </div> </div> <style> .archive-container { background: linear-gradient(180deg, #01040c 0%, #000 100%); color: #b8ebff; font-family: 'IBM Plex Mono', monospace; padding: 60px 8%; min-height: 100vh; line-height: 1.6; overflow: hidden; animation: fadeInScene 1.5s ease forwards; } .system { background: rgba(0,255,200,0.03); border: 1px solid rgba(0,255,200,0.1); border-radius: 6px; color: #00ffc8; padding: 14px; font-size: 0.95rem; white-space: pre-line; margin-bottom: 40px; animation: flickerSystem 6s infinite; } .terminal.clean { background: rgba(255,255,255,0.02); border-left: 2px solid rgba(0,255,200,0.3); padding: 24px 30px; color: #aeefff; font-size: 0.95rem; line-height: 1.7; border-radius: 8px; white-space: pre-line; margin: 40px 0 50px; position: relative; animation: fadeText 3s ease forwards; } .alan { color: #aeefff; font-style: italic; margin: 25px 0; opacity: 0; animation: fadeText 3s ease forwards; } .choice { text-align: center; margin-top: 60px; animation: fadeIn 4s ease forwards; } .choice button { background: linear-gradient(90deg, rgba(0,255,255,0.1), rgba(255,255,255,0.08)); border: 1px solid rgba(0,255,255,0.3); border-radius: 8px; color: #d6faff; padding: 14px 32px; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-family: 'IBM Plex Mono', monospace; } .choice button:hover { background: linear-gradient(90deg, rgba(0,255,255,0.25), rgba(255,255,255,0.25)); box-shadow: 0 0 20px rgba(0,255,255,0.4); color: #fff; } @keyframes fadeText { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } } @keyframes flickerSystem { 0%, 100% { opacity: 1; } 45% { opacity: 0.9; } 50% { opacity: 0.6; } 55% { opacity: 1; } } @keyframes fadeInScene { from { opacity: 0; filter: blur(10px); transform: translateY(30px); } to { opacity: 1; filter: none; transform: none; } } </style>
<<audio "introhum" play volume 0.25>> <div class="archive-container red"> <pre class="system"> Analyse des connexions externes // Utilisateur : ALN21 </pre> <pre class="terminal red"> - Accès non autorisé au compte ALC42 (Alice) — 9 occurrences. - Falsification de messages — 3 occurrences. - Contournement signalement — 1 occurrence. - Tentative de suppression des logs : échouée. </pre> <div class="alan fade"> Je ne me souviens pas de tout ça.<br> C’est comme si… quelqu’un d’autre l’avait fait à ma place. </div> <div class="system"> > Connexion active actuelle : 145.22.88.104 (Localhost) </div> <div class="choice fade"> <<button "Retour aux archives">> <<goto "ARCHIVE_ALAN">> <</button>> </div> </div> <style> .archive-container.red { background: radial-gradient(circle at 50% 40%, #100000 0%, #000 100%); color: #ffb3b3; font-family: 'IBM Plex Mono', monospace; padding: 60px 8%; min-height: 100vh; line-height: 1.6; overflow: hidden; animation: fadeInScene 1.5s ease forwards; } .system { background: rgba(255,80,80,0.03); border: 1px solid rgba(255,80,80,0.15); border-radius: 6px; color: #ff6666; padding: 14px; font-size: 0.95rem; white-space: pre-line; margin-bottom: 40px; animation: flickerSystemRed 6s infinite; } .terminal.red { background: rgba(255,0,0,0.03); border-left: 2px solid rgba(255,80,80,0.4); padding: 24px 30px; color: #ffcccc; font-size: 0.95rem; line-height: 1.7; border-radius: 8px; white-space: pre-line; margin: 40px 0 50px; position: relative; animation: alertPulse 3s ease-in-out infinite; } .terminal.red::before { content: ""; position: absolute; top: -10%; left: 0; width: 100%; height: 120%; background: linear-gradient(0deg, transparent 30%, rgba(255,0,0,0.05) 50%, transparent 70%); animation: scanlineRed 5s linear infinite; pointer-events: none; } .alan { color: #ffc7c7; font-style: italic; margin: 25px 0; opacity: 0; animation: fadeText 3s ease forwards; } .choice { text-align: center; margin-top: 60px; animation: fadeIn 4s ease forwards; } .choice button { background: linear-gradient(90deg, rgba(255,60,60,0.1), rgba(255,100,100,0.1)); border: 1px solid rgba(255,60,60,0.3); border-radius: 8px; color: #ffc7c7; padding: 14px 32px; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-family: 'IBM Plex Mono', monospace; } .choice button:hover { background: linear-gradient(90deg, rgba(255,80,80,0.3), rgba(255,100,100,0.3)); box-shadow: 0 0 20px rgba(255,80,80,0.4); color: #fff; } @keyframes fadeText { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } } @keyframes fadeInScene { from { opacity: 0; filter: blur(15px); transform: translateY(40px); } to { opacity: 1; filter: none; transform: none; } } @keyframes flickerSystemRed { 0%, 100% { opacity: 1; } 45% { opacity: 0.9; } 50% { opacity: 0.6; } 55% { opacity: 1; } } @keyframes alertPulse { 0%, 100% { box-shadow: 0 0 0 rgba(255,0,0,0); } 50% { box-shadow: 0 0 30px rgba(255,80,80,0.2); } } @keyframes scanlineRed { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } </style>
<<audio "introhum" play volume 0.25>> <div class="event-container"> <pre class="system"> Chargement de l’événement Connecta : "Soirée Étudiante VR — 15/06/24" Participants en ligne : 1... ... 2 </pre> <!-- Alan --> <div class="alan"> Quelqu’un est là.<br> Julien ?<br> Montre-toi, enfoiré. </div> <!-- Voix glitchée --> <div class="voice glitch"> Tu recommences, Alan. </div> <div class="alan"> Qui parle ?<br> C’est toi, Julien ? </div> <div class="voice"> Tu crois que tu cherches quelqu’un.<br> Mais tu répètes toujours le même scénario. </div> <div class="alan"> Arrête tes conneries !<br> Tu l’as piratée !<br> C’est toi qui m’as bloqué, avoue ! </div> <div class="voice glitch"> Tu te connectes.<br> Tu observes.<br> Tu modifies.<br> Tu mens. </div> <div class="alan fade">Non... c’est faux. C’est pas moi.</div> <!-- Terminal logs --> <pre class="terminal"> CONNECTA_LOGS_RECOVERED >> - Tentative de connexion non autorisée : 09/04 - 02:21 - Intrusion réussie : 15/04 - 04:07 - Messages modifiés : 17/04 - 03:58 - Suppression signalement utilisateur : 20/04 - 05:14 - Suivi d’événement VR : "Concert Horizon" - 28/04 - Suivi d’événement VR : "Afterwork Arts Connecta" - 02/05 - Suivi d’événement VR : "Soirée Étudiante" - 15/06 </pre> <div class="alan intense"> Des fausses données... tu les as trafiquées !<br> C’est pas moi ! </div> <div class="voice alice"> Je les ai gardées, Alan.<br> Les IP. Les dates.<br> Chaque fois que tu disais vouloir comprendre... tu revenais. </div> <div class="voice alice"> Tu disais vouloir m’aider.<br> Mais tu ne répares rien.<br> Tu recommences. </div> <div class="alan">Non… j’ai fait ça parce que je t’aime !</div> <div class="voice alice"> Parce que j’avais peur, Alan.<br> Parce que tu me regardais même hors ligne.<br> Parce que même mes silences t’appartenaient. </div> <pre class="terminal red flicker"> INTRUSION : 145.22.88.104 SOURCE : LOCALHOST </pre> <div class="alan reveal"> ...Localhost.<br> C’est... moi. </div> <div class="voice alice glitch"> Tu recommences toujours, Alan. </div> <div id="response" class="alan reveal"> </div> <div class="choice"> <<link "Répondre">> <<replace "#response">> <div id="response" class="alan">Alice… je suis désolé.</div> <div class="system">[Utilisateur introuvable]</div> <</replace>> <</link>> <br><br> <<button "Revoir les messages">> <<goto "ARCHIVE_ALAN">> <</button>> <<button "Continuer">> <<goto "DISCONNECT">> <</button>> </div> </div> <style> .event-container { background: radial-gradient(circle at 50% 30%, #050513 0%, #000 100%); color: #c8faff; font-family: 'IBM Plex Mono', monospace; padding: 60px 8%; min-height: 100vh; line-height: 1.6; overflow: hidden; animation: fadeInScene 1.2s ease forwards; } .system { background: rgba(0,255,200,0.05); border: 1px solid rgba(0,255,200,0.2); border-radius: 8px; color: #00ffc8; padding: 16px; font-size: 0.95rem; margin-bottom: 40px; white-space: pre-line; animation: flickerText 4s infinite; } .alan { color: #aeefff; margin: 25px 0; font-style: italic; animation: fadeInText 1s forwards; } .alan.intense { color: #ffaaaa; font-weight: 600; text-shadow: 0 0 10px rgba(255,100,100,0.4); animation: pulseEmotion 3s infinite; } .alan.reveal { color: #ff6666; font-weight: bold; text-shadow: 0 0 20px rgba(255,60,60,0.7); animation: revealMoment 5s forwards; } .voice { color: #b4c6ff; font-style: italic; margin: 20px 0; opacity: 0.95; } .voice.alice { color: #d8b4ff; text-shadow: 0 0 6px rgba(200,140,255,0.4); } .voice.glitch { color: #ff6b6b; text-shadow: 0 0 8px rgba(255,60,60,0.5); animation: glitchVoice 3s infinite; } .terminal { background: rgba(0,255,200,0.03); border: 1px solid rgba(0,255,200,0.2); border-radius: 8px; color: #66ffee; padding: 20px; font-size: 0.9rem; margin: 30px 0; white-space: pre-line; } .terminal.red { color: #ff5555; border-color: rgba(255,100,100,0.3); text-shadow: 0 0 8px rgba(255,80,80,0.5); } .flicker { animation: flickerRed 3s infinite; } .choice { text-align: center; margin-top: 60px; } .choice button, .choice a { background: linear-gradient(90deg, rgba(255,60,60,0.15), rgba(0,255,200,0.15)); border: 1px solid rgba(255,60,60,0.4); color: #fff; padding: 14px 32px; border-radius: 8px; text-transform: uppercase; font-weight: bold; cursor: pointer; transition: all 0.3s ease; } .choice button:hover { background: linear-gradient(90deg, rgba(255,60,60,0.3), rgba(0,255,200,0.3)); box-shadow: 0 0 20px rgba(255,80,80,0.3); } @keyframes fadeInScene { from { opacity: 0; filter: blur(10px); transform: translateY(20px); } to { opacity: 1; filter: none; transform: none; } } @keyframes fadeInText { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes flickerText { 0%, 100% { opacity: 1; } 45% { opacity: 0.8; } 50% { opacity: 0.6; } 55% { opacity: 1; } } @keyframes glitchVoice { 0%, 100% { opacity: 1; } 45% { opacity: 0.4; transform: skewX(2deg); } 50% { opacity: 0.2; filter: blur(1px); } 55% { opacity: 0.8; transform: none; } } @keyframes flickerRed { 0%, 100% { opacity: 1; } 48% { opacity: 0.5; } 50% { opacity: 0.2; filter: blur(0.8px); } 52% { opacity: 1; } } @keyframes pulseEmotion { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.02); opacity: 0.9; } } @keyframes revealMoment { from { opacity: 0; transform: translateY(10px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } } </style>
<<audio "introhum" play volume 0.25>> <div class="disconnect-container"> <pre class="system"> DÉCONNEXION EN COURS... </pre> <div class="alan fade"> Je n’entends plus rien.<br> Plus de messages.<br> Plus de voix.<br> Seulement le bruit blanc. </div> <div class="alan fade delay"> Peut-être que c’est ça, le silence.<br> Peut-être qu’elle est vraiment partie.<br> Ou peut-être... que je suis resté trop longtemps connecté. </div> <pre class="terminal red flicker"> [Signal perdu] [Connexion interrompue : 145.22.88.104] [Utilisateur : ALN21] </pre> <div class="voice alice glitch"> "Tu ne t’es jamais vraiment déconnecté, Alan." </div> <div class="alan fade"> Je... je peux encore essayer.<br> Je peux réparer.<br> Je dois juste... me reconnecter. </div> <div class="choice fade"> <<link "Se déconnecter définitivement">> <<replace "#fadeout">> <div id="fadeout" class="system">[Écran noir]</div> <<goto "END">> <</replace>> <</link>> <br><br> <<button "Rester en ligne">> <<goto "RECONNECT">> <</button>> </div> </div> <style> .disconnect-container { background: radial-gradient(circle at 50% 30%, #010108 0%, #000 100%); color: #c8faff; font-family: 'IBM Plex Mono', monospace; padding: 60px 8%; min-height: 100vh; overflow: hidden; animation: fadeInScene 2s ease forwards; } .system { background: rgba(0,255,200,0.03); border: 1px solid rgba(0,255,200,0.15); border-radius: 6px; color: #00ffc8; padding: 18px; font-size: 0.95rem; white-space: pre-line; margin-bottom: 40px; animation: flickerSystem 5s infinite; } /* Alan monologue */ .alan { color: #aeefff; margin: 25px 0; font-style: italic; opacity: 0; animation: fadeText 3s ease forwards; } .alan.delay { animation-delay: 1.5s; } @keyframes fadeText { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } } .voice.alice { color: #d8b4ff; text-shadow: 0 0 6px rgba(200,140,255,0.4); font-style: italic; margin: 40px 0; text-align: center; animation: glitchVoice 3s infinite; } .terminal { background: rgba(255,80,80,0.05); border: 1px solid rgba(255,80,80,0.2); border-radius: 6px; color: #ff7777; padding: 20px; font-size: 0.9rem; white-space: pre-line; text-shadow: 0 0 10px rgba(255,80,80,0.4); margin: 40px 0; } .flicker { animation: flickerRed 4s infinite; } .choice { text-align: center; margin-top: 60px; animation: fadeIn 5s ease forwards; } .choice button, .choice a { background: linear-gradient(90deg, rgba(255,60,60,0.15), rgba(0,255,200,0.15)); border: 1px solid rgba(255,60,60,0.4); color: #fff; padding: 14px 32px; border-radius: 8px; text-transform: uppercase; font-weight: bold; cursor: pointer; transition: all 0.3s ease; } .choice button:hover { background: linear-gradient(90deg, rgba(255,60,60,0.3), rgba(0,255,200,0.3)); box-shadow: 0 0 20px rgba(255,80,80,0.3); } @keyframes flickerSystem { 0%, 100% { opacity: 1; } 45% { opacity: 0.8; } 50% { opacity: 0.4; } 55% { opacity: 1; } } @keyframes glitchVoice { 0%, 100% { opacity: 1; } 45% { opacity: 0.4; transform: skewX(1deg); } 50% { opacity: 0.2; filter: blur(1px); } 55% { opacity: 0.9; transform: none; } } @keyframes flickerRed { 0%, 100% { opacity: 1; } 48% { opacity: 0.6; } 50% { opacity: 0.3; filter: blur(0.6px); } 52% { opacity: 1; } } @keyframes fadeInScene { from { opacity: 0; filter: blur(12px); transform: translateY(30px); } to { opacity: 1; filter: none; transform: none; } } </style>
<<audio "introhum" play volume 0.25>> <div class="reconnect-container"> <pre class="system"> REBOOT SYSTÈME... RECHARGEMENT DE L’ENVIRONNEMENT CONNECTA... </pre> <div class="alan fade"> Elle n’a plus donné signe de vie depuis deux mois.<br> Personne ne semble inquiet...<br> Mais moi, je sais que quelque chose cloche. </div> <div class="system"> Chargement des conversations précédentes... </div> <div class="alan fade delay"> Je ne referai pas les mêmes erreurs cette fois. </div> <div class="system glitch white"> NOUVEL UTILISATEUR CONNECTÉ : EMMA_23 </div> <div class="alan fade"> Salut.<br> Tu veux parler ? </div> <div class="choice fade"> <<button "Commencer la conversation">> <<goto "OLDMESSAGES">> <</button>> </div> </div> <style> .reconnect-container { background: radial-gradient(circle at 50% 20%, #020216 0%, #000 100%); color: #d6faff; font-family: 'IBM Plex Mono', monospace; padding: 60px 8%; min-height: 100vh; overflow: hidden; animation: fadeInScene 2s ease forwards; } .system { background: rgba(0,255,255,0.03); border: 1px solid rgba(0,255,255,0.15); border-radius: 6px; color: #00eaff; padding: 18px; font-size: 0.95rem; white-space: pre-line; margin: 30px 0; animation: flickerSystem 6s infinite; } .system.glitch.white { color: #ffffff; text-shadow: 0 0 10px rgba(255,255,255,0.8); animation: whiteGlitch 5s infinite; } .alan { color: #aeefff; margin: 25px 0; font-style: italic; opacity: 0; animation: fadeText 3s ease forwards; } .alan.delay { animation-delay: 1.2s; } @keyframes fadeText { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } } .choice { text-align: center; margin-top: 70px; animation: fadeIn 4s ease forwards; } .choice button { background: linear-gradient(90deg, rgba(0,255,255,0.1), rgba(255,255,255,0.1)); border: 1px solid rgba(0,255,255,0.4); color: #ffffff; padding: 14px 32px; border-radius: 8px; text-transform: uppercase; font-weight: bold; cursor: pointer; transition: all 0.3s ease; } .choice button:hover { background: linear-gradient(90deg, rgba(0,255,255,0.3), rgba(255,255,255,0.3)); box-shadow: 0 0 20px rgba(0,255,255,0.4); } @keyframes flickerSystem { 0%, 100% { opacity: 1; } 45% { opacity: 0.85; } 50% { opacity: 0.5; } 55% { opacity: 1; } } @keyframes whiteGlitch { 0%, 100% { opacity: 1; } 45% { opacity: 0.6; transform: skewX(1deg); } 50% { opacity: 0.4; filter: blur(1px); } 55% { opacity: 1; transform: none; } } @keyframes fadeInScene { from { opacity: 0; filter: blur(15px); transform: translateY(40px); } to { opacity: 1; filter: none; transform: none; } } </style>
<<audio "introhum" play volume 0.25>> <div class="archive-container audio"> <pre class="system"> Lecture : audio_recover_003.wav </pre> <div class="voice alice fade"> "Alan… si tu écoutes ça, c’est que tu as encore forcé l’accès."<br> "Je n’ai jamais voulu que ça se termine comme ça."<br> "Mais tu ne peux pas continuer à me chercher."<br> "Tu ne cherches pas à me comprendre, tu cherches à me garder." </div> <div class="alan fade"> Alice...<br> Je... </div> <div class="choice fade"> <<button "Retour aux archives">> <<goto "ARCHIVE_ALAN">> <</button>> <br><br> <<button "Continuer">> <<goto "DISCONNECT">> <</button>> </div> </div> <style> .archive-container.audio { background: radial-gradient(circle at 50% 30%, #01030a 0%, #000 100%); color: #c0e7ff; font-family: 'IBM Plex Mono', monospace; padding: 60px 8%; min-height: 100vh; line-height: 1.7; overflow: hidden; position: relative; animation: fadeInScene 2s ease forwards; } .archive-container.audio::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient( to bottom, rgba(0,255,255,0.05) 0px, rgba(0,255,255,0.05) 1px, transparent 2px, transparent 6px ); opacity: 0.4; mix-blend-mode: lighten; animation: pulseSpectre 8s ease-in-out infinite; } .system { background: rgba(0,255,255,0.03); border: 1px solid rgba(0,255,255,0.15); border-radius: 6px; color: #00ffc8; padding: 14px; font-size: 0.95rem; white-space: pre-line; margin-bottom: 50px; animation: flickerSystem 6s infinite; } .voice.alice { color: #d8b4ff; text-shadow: 0 0 8px rgba(200,140,255,0.4); font-style: italic; margin: 40px 0; text-align: center; line-height: 2; opacity: 0; animation: fadeText 4s ease forwards; } .voice.alice::before { content: "▮▮▮ TRANSCRIPTION ▮▮▮"; display: block; color: rgba(255,255,255,0.2); font-size: 0.8rem; letter-spacing: 0.2em; margin-bottom: 25px; } .alan { color: #aeefff; font-style: italic; margin: 30px 0; opacity: 0; animation: fadeText 4s ease forwards; animation-delay: 1.5s; } .choice { text-align: center; margin-top: 60px; animation: fadeIn 5s ease forwards; } .choice button { background: linear-gradient(90deg, rgba(0,255,255,0.1), rgba(255,255,255,0.08)); border: 1px solid rgba(0,255,255,0.3); border-radius: 8px; color: #d6faff; padding: 14px 32px; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-family: 'IBM Plex Mono', monospace; } .choice button:hover { background: linear-gradient(90deg, rgba(0,255,255,0.25), rgba(255,255,255,0.25)); box-shadow: 0 0 20px rgba(0,255,255,0.4); color: #fff; } @keyframes fadeText { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } } @keyframes pulseSpectre { 0%, 100% { opacity: 0.4; filter: blur(0); } 50% { opacity: 0.7; filter: blur(1px); } } @keyframes fadeInScene { from { opacity: 0; filter: blur(15px); transform: translateY(40px); } to { opacity: 1; filter: none; transform: none; } } @keyframes flickerSystem { 0%, 100% { opacity: 1; } 45% { opacity: 0.85; } 50% { opacity: 0.5; } 55% { opacity: 1; } } </style>
<style> .chat-container { min-height: 100vh; background: linear-gradient(180deg, #050511 0%, #0a0a18 100%); color: #e9ecff; font-family: 'Inter', 'IBM Plex Sans', sans-serif; display: flex; flex-direction: column; justify-content: space-between; padding: 0; animation: fadeInChat 1s ease forwards; } .chat-header { display: flex; align-items: center; padding: 20px 30px; background: rgba(15, 15, 30, 0.7); border-bottom: 1px solid rgba(150,150,255,0.1); backdrop-filter: blur(10px); } .chat-avatar { width: 50px; height: 50px; border-radius: 50%; background-size: cover; background-position: center; margin-right: 15px; } .chat-avatar.lea { background-image: url("https://dylanjacquet.com/wp-content/uploads/2025/10/lea-avatar.jpg"); filter: brightness(0.9) contrast(1.05); } .chat-info h3 { margin: 0; font-size: 1.1rem; color: #d4d8ff; } .chat-info p { margin: 0; font-size: 0.85rem; color: #7c83b8; } .chat-thread { flex: 1; padding: 30px 40px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(120,120,200,0.2) transparent; } .msg { max-width: 70%; padding: 10px 15px; border-radius: 12px; font-size: 0.95rem; line-height: 1.4; position: relative; box-shadow: 0 4px 15px rgba(0,0,0,0.2); word-break: break-word; } .msg-left { align-self: flex-start; background: rgba(100,120,255,0.12); border: 1px solid rgba(150,150,255,0.15); color: #dbe0ff; border-top-left-radius: 2px; } .msg-right { align-self: flex-end; background: rgba(80,200,160,0.12); border: 1px solid rgba(120,255,200,0.15); color: #d8ffef; border-top-right-radius: 2px; } .timestamp { display: block; text-align: right; font-size: 0.7rem; color: rgba(180,180,255,0.4); margin-top: 4px; } .msg.glitch { animation: msgGlitch 2s infinite; background: rgba(255,80,120,0.1); border-color: rgba(255,100,150,0.2); } @keyframes msgGlitch { 0%, 100% { transform: none; opacity: 1; } 48% { transform: skewX(1deg); opacity: 0.95; } 50% { transform: skewX(-1deg); opacity: 0.85; } 52% { transform: translateX(1px); } } .chat-footer { text-align: center; padding: 25px; border-top: 1px solid rgba(150,150,255,0.1); background: rgba(10,10,30,0.5); backdrop-filter: blur(10px); } .chat-footer button { background: linear-gradient(90deg, rgba(60,80,200,0.18), rgba(100,70,200,0.18)); border: 1px solid rgba(140,120,255,0.1); color: #e9eaff; padding: 12px 28px; border-radius: 8px; font-weight: 600; letter-spacing: 0.05em; cursor: pointer; transition: all 0.25s ease; } .chat-footer button:hover { background: linear-gradient(90deg, rgba(80,100,255,0.25), rgba(140,110,255,0.25)); box-shadow: 0 0 20px rgba(120,100,255,0.25); } @keyframes fadeInChat { from { opacity: 0; filter: blur(8px); transform: translateY(15px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } } @media (max-width: 640px) { .chat-thread { padding: 20px; } .msg { max-width: 90%; font-size: 0.9rem; } .chat-header { padding: 15px; } } .chat-avatar.julien { background-image: url("https://dylanjacquet.com/wp-content/uploads/2025/10/julien-avatar.jpg"); filter: brightness(0.85) contrast(1.1); } .msg-right { align-self: flex-end; background: rgba(255, 60, 60, 0.08); border: 1px solid rgba(255, 100, 100, 0.18); color: #ffdada; border-top-right-radius: 2px; box-shadow: 0 0 12px rgba(255, 0, 0, 0.08); } .msg-left { align-self: flex-start; background: rgba(100, 120, 255, 0.08); border: 1px solid rgba(150, 150, 255, 0.12); color: #dbe0ff; border-top-left-radius: 2px; } .msg.glitch { background: rgba(255, 80, 120, 0.12); border-color: rgba(255, 80, 120, 0.25); animation: msgGlitchJulien 3s infinite; } @keyframes msgGlitchJulien { 0%, 100% { opacity: 1; transform: none; } 45% { transform: skewX(2deg); opacity: 0.9; } 50% { transform: translateX(2px) scale(1.01); opacity: 0.85; filter: blur(0.5px); } 55% { transform: skewX(-2deg); opacity: 0.9; } } .chat-thread { border-left: 1px solid rgba(255,80,80,0.08); border-right: 1px solid rgba(255,80,80,0.08); box-shadow: inset 0 0 20px rgba(255, 0, 0, 0.04); transition: all 1s ease; } .chat-avatar.alice { background-image: url("https://dylanjacquet.com/wp-content/uploads/2025/10/alice-avatar-small.jpg"); filter: brightness(0.9) contrast(1.05); } .chat-container.corrupted { animation: screenGlitch 6s infinite; background: linear-gradient(180deg, #050511 0%, #0a0a18 100%); } @keyframes screenGlitch { 0%, 100% { filter: none; } 48% { filter: contrast(1.05) brightness(0.98); } 50% { filter: hue-rotate(2deg) blur(0.5px); } 52% { filter: none; } } .msg-left, .msg-right { transition: all 0.4s ease; } .glitch-fade { animation: glitchFade 5s infinite; } @keyframes glitchFade { 0%, 100% { opacity: 1; } 45% { opacity: 0.9; } 50% { opacity: 0.5; filter: blur(2px); } 55% { opacity: 0.95; filter: none; } } .glitch-line { position: relative; color: #dbe0ff; } .glitch-line::after { content: ""; position: absolute; bottom: 8px; left: 0; width: 80%; height: 1px; background: rgba(255, 50, 50, 0.3); animation: glitchLine 3s infinite; } @keyframes glitchLine { 0%, 100% { width: 0; opacity: 0; } 40%, 60% { width: 100%; opacity: 1; } } .corrupted-time { color: rgba(255, 100, 100, 0.5); text-shadow: 0 0 6px rgba(255, 0, 0, 0.3); animation: flickerTime 2s infinite; } @keyframes flickerTime { 0%, 100% { opacity: 1; } 45% { opacity: 0.5; } 50% { opacity: 0.2; } 55% { opacity: 0.8; } } .msg.final { background: rgba(255, 255, 255, 0.05); border-color: rgba(150, 150, 255, 0.1); color: #aab3ff; font-style: italic; opacity: 0; animation: revealFinal 4s forwards; animation-delay: 2s; } @keyframes revealFinal { from { opacity: 0; filter: blur(6px); transform: translateY(20px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } } .chat-avatar.antoine { background-image: url("https://dylanjacquet.com/wp-content/uploads/2025/10/antoine-avatar.jpg"); filter: brightness(0.9) contrast(1.05); } .msg-right { align-self: flex-end; background: rgba(80, 180, 255, 0.08); border: 1px solid rgba(120, 220, 255, 0.2); color: #d9f6ff; border-top-right-radius: 2px; } .msg-left { align-self: flex-start; background: rgba(140, 140, 255, 0.08); border: 1px solid rgba(150, 150, 255, 0.15); color: #dee1ff; border-top-left-radius: 2px; } .glitch-line { position: relative; color: #dee1ff; } .glitch-line::after { content: ""; position: absolute; bottom: 8px; left: 0; width: 100%; height: 1px; background: rgba(0, 200, 255, 0.3); animation: glitchScanAntoine 3s infinite; } @keyframes glitchScanAntoine { 0%, 100% { width: 0; opacity: 0; } 40%, 60% { width: 100%; opacity: 1; } } /* effet de corruption plus froid */ .msg.glitch { background: rgba(80, 180, 255, 0.1); border-color: rgba(120, 220, 255, 0.25); animation: msgGlitchAntoine 4s infinite; } @keyframes msgGlitchAntoine { 0%, 100% { opacity: 1; transform: none; } 45% { transform: skewX(1deg); opacity: 0.9; } 50% { transform: translateX(1px) scale(1.01); opacity: 0.8; filter: blur(0.4px); } 55% { transform: skewX(-1deg); opacity: 0.95; } } .chat-container { background: linear-gradient(180deg, #070716 0%, #0a0a18 100%); } .chat-thread { box-shadow: inset 0 0 30px rgba(120, 180, 255, 0.08); } .msg.final { color: #b0b9ff; opacity: 0; animation: revealFinal 6s forwards; animation-delay: 1s; } @keyframes revealFinal { from { opacity: 0; filter: blur(8px); transform: translateY(10px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } } </style>
Un écran qui va montrer Alan se connectant avec une nouvelle personne. Reproduisant ainsi la boucle en question. Il commencera à lui parler, puis nous aurons un message deux mois plus tard, ce qui montrera le journal de bord de Alan qui observe la nouvelle fille.
Un écran de fin qui va mener Alan a supprimer tous ses comptes sur Connecta. Il va prendre un nouveau départ en cherchant à se former une vie dans la vraie vie et non plus dans Connecta. Pas de répercussion avec des questions de légalités.
<<include "CSS_HACKSCREEN">> <div class="hack-intro-main"> <h1 class="hack-headline"> "Devrais-je arrêter d'enquêter ?" </h1> <div class="hack-choice"> <div class="photo-return"> <<button "Continuer">> <<goto "CHOICE_SCREEN">> <</button>> </div> </div> <div class="hack-choice"> <div class="photo-return"> <<button "Arrêter">> <<goto "HESITATION_SECOND">> <</button>> </div> </div> </div>
<<include "CSS_HACKSCREEN">> <div class="hack-intro-main"> <h1 class="hack-headline"> "Mais elle est peut-être en danger ?" </h1> <div class="hack-choice"> <div class="photo-return"> <<button "Continuer">> <<goto "CHOICE_SCREEN">> <</button>> </div> </div> <div class="hack-choice"> <div class="photo-return"> <<button "Arrêter">> <<goto "HESITATION_THIRD">> <</button>> </div> </div> </div>
<<include "CSS_HACKSCREEN">> <div class="hack-intro-main"> <h1 class="hack-headline"> "Elle a besoin de moi..." </h1> <div class="hack-choice"> <div class="photo-return"> <<button "Continuer">> <<goto "CHOICE_SCREEN">> <</button>> </div> </div> </div>
<style> .hack-intro-main { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height: 100vh; padding: 6% 8%; text-align:center; background: radial-gradient(circle at 50% 20%, #07060b 0%, #000 85%); color: #e5e8ff; font-family: 'IBM Plex Mono', monospace; } .hack-headline { max-width: 900px; font-size: 1.5rem; line-height: 1.6em; color: #cbd1ff; font-weight: 400; margin: 0 0 40px 0; text-shadow: 0 0 8px rgba(120,120,255,0.08); opacity: 0; animation: fadeInText 1.3s ease forwards; } .postit-wrap { position: relative; width: 320px; height: 220px; margin: 16px auto 40px; display:flex; align-items:center; justify-content:center; transform: rotate(-3deg); filter: drop-shadow(0 10px 30px rgba(0,0,0,0.6)); transition: transform 0.35s ease, box-shadow 0.35s ease; } .postit-wrap:hover { transform: rotate(-1deg) translateY(-6px); box-shadow: 0 20px 40px rgba(10,10,30,0.6); } .postit-img { position: absolute; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255,255,255,0.03); filter: saturate(0.9) contrast(0.95); } .postit-text { position: relative; z-index: 2; font-family: 'Courier New', monospace; color: #141414; background: rgba(255,255,255,0.0); padding: 8px 14px; border-radius: 4px; font-size: 0.98rem; letter-spacing: 0.02em; box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset; /* give the impression of ink slightly faded */ opacity: 0.95; } .postit-wrap::before { content: ""; position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(-6deg); width: 120px; height: 22px; background: linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06)); border-radius: 4px; filter: blur(0.3px); opacity: 0.9; } .hack-choice { margin-top: 20px; text-align:center; } .hack-choice a.link-internal, .hack-choice button { display:inline-block; margin: 10px; padding: 12px 28px; color: #e9ecff; background: linear-gradient(90deg, rgba(80,80,180,0.15), rgba(120,70,180,0.18)); border: 1px solid rgba(140,120,255,0.09); border-radius: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight:700; text-decoration:none; cursor:pointer; transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.25s ease; font-family: 'IBM Plex Mono', monospace; } .hack-choice a.link-internal:hover, .hack-choice button:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 28px rgba(100,70,220,0.14); } @keyframes fadeInText { from { opacity: 0; transform: translateY(6px) scale(0.995); filter: blur(2px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @media (max-width:720px) { .postit-wrap { width: 260px; height: 180px; } .hack-headline { font-size: 1.15rem; padding: 0 10px; } } #passages { max-width: 64rem; } </style> #passages { max-width: 64rem; }
<<nobr>> <div class="home-container"> <h1 class="glitch-title">Alice.Disconnected</h1> <p class="subtitle">Une expérience psychologique interactive</p> <div class="menu-buttons"> <<link "▶ Jouer">><<goto "INTRO_0">><</link>> <<link "Crédits">><<goto "CREDITS">><</link>> <<link "Paramètres">><<goto "OPTIONS">><</link>> </div> </div> <div class="footer"> <p>© 2025 – Un récit de Dylan Jacquet</p> </div> <</nobr>> <style> body { background: url("https://dylanjacquet.com/wp-content/uploads/2025/10/alice-disconnected-background-home-ezgif.com-video-to-gif-converter.gif") no-repeat center center fixed; background-size: cover; font-family: 'Orbitron', 'Segoe UI', sans-serif; color: #e0e0ff; text-align: center; height: 100vh; margin: 0; overflow: hidden; } body::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 20, 0.55); backdrop-filter: blur(2px); z-index: 0; } .home-container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; position: relative; } .link-internal { font-size: 1.1em; padding: 12px 40px; border: 2px solid #6b5bff; color: #e0e0ff !important; text-transform: uppercase; text-decoration: none; letter-spacing: 1px; background: transparent; border-radius: 8px; transition: all 0.3s ease; display: inline-block; cursor: pointer; min-width: 160px; text-align: center; } .link-internal:hover { background: rgba(107, 91, 255, 0.1); box-shadow: 0 0 10px rgba(107, 91, 255, 0.4); text-decoration : none; } .glitch-title { font-size: 3.8em; letter-spacing: 3px; font-weight: 700; text-transform: uppercase; color: #c0b5ff; text-shadow: 0 0 10px rgba(160, 130, 255, 0.8), 0 0 20px rgba(80, 60, 255, 0.4), 2px 2px 1px rgba(255,255,255,0.1); animation: flicker 4s infinite alternate; } @keyframes flicker { 0% { opacity: 1; text-shadow: 0 0 8px #b59cff; } 50% { opacity: 0.95; text-shadow: 0 0 15px #9270ff; } 100% { opacity: 1; text-shadow: 0 0 10px #cbb9ff; } } .subtitle { font-size: 1em; color: #7777aa; margin-top: 10px; letter-spacing: 2px; } .menu-buttons { margin-top: 80px; display: flex; flex-direction: column; gap: 20px; align-items: center; } .menu-btn { font-size: 1.1em; padding: 12px 40px; border: 2px solid #6b5bff; color: #e0e0ff; text-transform: uppercase; letter-spacing: 1px; background: transparent; border-radius: 8px; transition: all 0.3s ease; cursor: pointer; } .menu-btn:hover { background: rgba(107, 91, 255, 0.1); box-shadow: 0 0 10px rgba(107, 91, 255, 0.4); } .footer { position: absolute; bottom: 15px; font-size: 0.8em; color: #555585; } .credit-popup { background: rgba(20, 20, 40, 0.95); border: 1px solid #6666aa; padding: 20px 30px; border-radius: 10px; color: #aaaadf; width: 60%; margin: 50px auto; animation: fadeIn 0.5s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } </style>
<style> .sidebar__list { display: flex; flex-direction : column; gap: 1.5rem; } #passages { max-width: 100%; } body { background: radial-gradient(circle at 50% 20%, #0a0a15 0%, #000 90%); color: #e0e0ff; font-family: 'IBM Plex Sans', sans-serif; margin: 0; overflow: hidden; } .connecta-ui-dark { position: relative; top: -28px; display: grid; grid-template-columns: 260px 1fr 300px; height: 100vh; backdrop-filter: blur(20px); background: rgba(10, 10, 25, 0.95); box-shadow: inset 0 0 50px rgba(80, 80, 200, 0.05); } .sidebar { background: rgba(20, 20, 45, 0.8); border-right: 1px solid rgba(100,100,255,0.1); padding: 25px; display: flex; flex-direction: column; gap: 15px; height: 100%; } .sidebar h2{ color: #e0e0ff; margin-top: 0; } .logo { font-size: 1.5em; font-weight: 700; color: #b8b3ff; text-shadow: 0 0 8px rgba(140,120,255,0.3); margin-bottom: 15px; } .sidebar ul { list-style: none; padding: 0; margin: 0; } .sidebar li { padding: 12px 0; color: #b8b8ff; font-weight: 500; letter-spacing: 0.02em; cursor: pointer; transition: all 0.3s ease; } .sidebar li:hover { color: #fff; text-shadow: 0 0 8px rgba(120,100,255,0.3); } .feed { background: rgba(15, 15, 30, 0.8); padding: 40px 60px; overflow-y: auto; box-shadow: inset 0 0 20px rgba(80,80,255,0.05); } .post { background: rgba(30, 30, 60, 0.5); border: 1px solid rgba(100,100,255,0.1); border-radius: 12px; padding: 20px; margin-bottom: 30px; transition: all 0.3s ease; } .post:hover { box-shadow: 0 0 15px rgba(150,150,255,0.15); transform: translateY(-2px); } .post-header { display: flex; align-items: center; gap: 10px; } .avatar { border-radius: 50%; border: 2px solid rgba(150,150,255,0.3); } .post h3 { color: #c8c8ff; margin: 0; } .post p { margin: 4px 0; } .post-content { color: #dcdcff; font-size: 1em; margin: 15px 0; } .post-img { width: 100%; border-radius: 10px; margin-top: 10px; opacity: 0.9; } .post-footer { font-size: 0.9em; color: #aaaaff; margin-top: 8px; } .sidebar.right { background: rgba(20, 20, 45, 0.8); border-left: 1px solid rgba(100,100,255,0.1); padding: 25px; color: #b8b8ff; overflow-y: auto; } .sidebar.right h3 { color: #a0a0ff; font-size: 1em; margin-bottom: 10px; } .sidebar.right ul { list-style: none; padding: 0; } .sidebar.right li { padding: 5px 0; color: #ccc; } .sidebar.right .alert { color: #ff8080; text-shadow: 0 0 5px rgba(255,80,80,0.3); } </style>
<<nobr>> <aside class="sidebar"> <h2>Connecta</h2> <div class="sidebar__list"> <<link "🏠 Fil d’actualité">><<goto "CHOICE_SCREEN">><</link>> <<link "💬 Messages">><<goto "MESSAGES_MENU">><</link>> <<link "📷 Photos">><<goto "PHOTOS">><</link>> <<link "👥 Contacts">><<goto "CONTACTS">><</link>> <<link "⚙️ Paramètres">><<goto "LOGS_SCREEN">><</link>> </div> </aside> <</nobr>>
<<nobr>> <aside class="sidebar right"> <h3>Tendances</h3> <ul> <li>#ConnectaUpdate</li> <li>#SafeZone</li> <li>#Disparitions</li> </ul> <h3>Notifications</h3> <p>🔔 Nouvelle alerte : activité suspecte détectée sur le compte Alice.Connecta</p> <p>⚠️ IP inconnue : 145.22.88.104</p> </aside> <</nobr>>
<<nobr>> <div class="boot-screen"> <div class="boot-text"> <p>> [BOOTING CONNECTA MEMORY_7.3]</p> <p>> [User reconstruction: A.L.A.N_021]</p> <p>> [Emotional link: BROKEN]</p> <p>> [Running backup fragment...]</p> <p>> [Error :: fragment unstable]</p> <br> <p class="fade-line">"Ce n’est pas un bug. C’est un souvenir."</p> <div class="boot-choice"> [[Lancer la reconstruction →|INTRO_1]] </div> </div> </div> <</nobr>> <style> body { margin: 0; background: radial-gradient(circle at 50% 50%, #03030a 0%, #000 90%); color: #aab0ff; font-family: 'IBM Plex Mono', monospace; overflow: hidden; } .boot-screen { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; text-align: left; padding: 0 5%; animation: fadeIn 3s ease forwards; } .boot-text p { margin: 6px 0; font-size: 1.05em; color: rgba(180, 190, 255, 0.8); text-shadow: 0 0 4px rgba(130, 120, 255, 0.3); letter-spacing: 0.04em; } .fade-line { margin-top: 30px; font-size: 1.3em; font-style: italic; text-align: center; color: #c7c7ff; opacity: 0; animation: fadeInText 3s ease 4s forwards; } .boot-choice { text-align: center; margin-top: 60px; animation: fadeIn 2s ease 6s forwards; opacity: 0; } .boot-choice a.link-internal { color: #99aaff; border: 1px solid rgba(100,100,255,0.3); padding: 12px 24px; border-radius: 8px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; transition: all 0.3s ease; } .boot-choice a.link-internal:hover { background-color: rgba(80, 80, 255, 0.1); color: #fff; border-color: rgba(150,150,255,0.4); text-shadow: 0 0 10px #99f; } @keyframes fadeInText { 0% { opacity: 0; transform: translateY(20px); filter: blur(6px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } </style>
<<nobr>> <div class="intro-main"> <p class="glitch-line">[LINK::ALAN→ALICE - SIGNAL RECONSTRUCTED]</p> <h1 class="intro-headline"> "Alice n’est pas comme les autres.<br> Elle comprend ce que je ressens, même quand je ne dis rien.<br><br> Les autres ne la voient pas vraiment... moi, si.<br> Elle disait que nos connexions n’étaient que des signaux électriques.<br> Peut-être.<br><br> Mais alors pourquoi je ressens encore son absence ?<br> Pourquoi je n’arrive pas à couper le lien ?<br><br> Je suis le seul à pouvoir la retrouver." </h1> <div class="intro-choice"> [[Ouvrir Connecta|MESSAGES]] </div> </div> <</nobr>> <style> body { margin: 0; height: 100%; background: radial-gradient(circle at 50% 20%, #0a0a15 0%, #000 90%); background-repeat: no-repeat; overflow: scroll; position: relative; } body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(90, 70, 200, 0.15), transparent 70%), radial-gradient(circle at 80% 70%, rgba(140, 90, 255, 0.1), transparent 70%); animation: pulseLight 14s infinite alternate ease-in-out; z-index: -3; } body::after { content: ""; position: fixed; inset: 0; background-image: radial-gradient(rgba(180, 180, 255, 0.1) 1px, transparent 1px); background-size: 3px 3px; opacity: 0.25; animation: drift 60s linear infinite; z-index: -2; } .glitch-line { font-family: 'IBM Plex Mono', monospace; color: rgba(150, 150, 255, 0.4); font-size: 1.25em; margin-top: 15px; animation: glitchFlash 2s infinite alternate; letter-spacing: 0.05em; } .intro-main { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 10%; animation: fadeIn 3s ease forwards; } .intro-headline { font-size: 1.6em; line-height: 1.7em; font-weight: 400; color: #c7c7ff; max-width: 850px; text-shadow: 0 0 6px rgba(150, 150, 255, 0.25); opacity: 0; animation: fadeInText 4s ease forwards; animation-delay: 0.8s; } .intro-choice { margin-top: 60px; text-align: center; animation: fadeIn 2s ease forwards; animation-delay: 4s; } .intro-choice a.link-internal { color: #99aaff; text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid #333; padding: 12px 24px; border-radius: 8px; text-decoration: none; transition: all 0.3s ease; font-weight: 600; } .intro-choice a.link-internal:hover { background-color: rgba(80, 80, 255, 0.1); text-shadow: 0 0 8px #88f; color: #fff; border-color: #555; transform: scale(1.02); } @keyframes fadeInText { 0% { opacity: 0; transform: translateY(20px); filter: blur(4px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pulseLight { 0% { filter: brightness(0.9) hue-rotate(0deg); } 50% { filter: brightness(1.1) hue-rotate(20deg); } 100% { filter: brightness(0.9) hue-rotate(-20deg); } } @keyframes drift { from { background-position: 0 0; } to { background-position: 300px 600px; } } @keyframes glitchFlash { 0%, 40% { opacity: 0; } 60% { opacity: 0.9; } 100% { opacity: 0; } } </style>
<<include "CSS_MESSAGERIE">> <<nobr>> <<audio "introhum" play volume 0.25>> <div class="chat-container corrupted"> <div class="chat-header"> <div class="chat-avatar alice"></div> <div class="chat-info"> <h3>Alice</h3> <p>Hors ligne</p> </div> </div> <div class="chat-thread"> <div class="msg msg-right"> <p>Ça te dit qu’on se voit ?</p> <span class="timestamp">01:13</span> </div> <div class="msg msg-left"> <p>Désolé Alan, je suis pas mal occupée pour le moment.</p> <span class="timestamp">01:14</span> </div> <div class="msg msg-right"> <p>Tu es sûre ? Même une heure ?</p> <span class="timestamp">01:15</span> </div> <div class="msg msg-right"> <p>J’ai vu que tu étais connectée tout à l’heure, mais tu n’as pas répondu.</p> <span class="timestamp">01:16</span> </div> <div class="msg msg-right"> <p>Tu es partie ?</p> <span class="timestamp">01:17</span> </div> <div class="msg msg-left"> <p><span class="blurred glitched">Alan, arrête de me poser les mêmes questions tous les jours...</span></p> <span class="timestamp">04:23</span> </div> <div class="msg msg-left"> <p><span class="blurred glitched">Alan si tu continues à me harceler, j'irai porter plainte.</span></p> <span class="timestamp">04:24</span> </div> <div class="system-msg">Connexion interrompue — compte indisponible</div> </div> <div class="chat-choices"> [[Revoir la soirée][$partySeen = true]] </div> </div> <</nobr>> <style> #passages { max-width: 64rem; } .blurred { color: #aaa; filter: blur(3px); user-select: none; opacity: 0.8; text-shadow: 0 0 6px rgba(255,255,255,0.2); transition: filter 0.4s ease, opacity 0.4s ease; } .blurred:hover { filter: blur(0px); opacity: 1; text-shadow: 0 0 10px #88f; } .glitched { position: relative; display: inline-block; color: #f0f; animation: glitchAnim 0.2s infinite; font-weight: 500; text-shadow: 1px 0 #0ff, -1px 0 #f0f; } @keyframes glitchAnim { 0% { transform: translate(0); text-shadow: 1px 0 #0ff, -1px 0 #f0f; } 25% { transform: translate(1px, -1px); text-shadow: 2px 0 #f0f, -2px 0 #0ff; } 50% { transform: translate(-1px, 1px); text-shadow: 1px 0 #0ff, -1px 0 #f0f; } 75% { transform: translate(1px, 1px); text-shadow: 3px 0 #f0f, -3px 0 #0ff; } 100% { transform: translate(0); text-shadow: 1px 0 #0ff, -1px 0 #f0f; } } .glitched.blurred { filter: blur(2px); opacity: 0.9; } .system-msg { text-align: center; color: #777; font-size: 0.9em; margin-top: 30px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; animation: blink 1.2s infinite; } @keyframes blink { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } .chat-choices { text-align: center; margin-top: 60px; } .chat-choices a.link-internal { display: inline-block; margin: 10px; padding: 10px 20px; color: #99aaff; background: rgba(40,40,60,0.4); border-radius: 8px; border: 1px solid rgba(255,255,255,0.05); text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.3s ease; } .chat-choices a.link-internal:hover { background-color: rgba(90,90,255,0.1); text-shadow: 0 0 6px #88f; color: #fff; } /* Bouton final */ button { background: linear-gradient(90deg, #2222aa, #6611cc); border: none; border-radius: 8px; padding: 12px 30px; color: #fff; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; transition: all 0.3s ease; } body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(70, 60, 180, 0.15), transparent 70%), radial-gradient(circle at 80% 70%, rgba(150, 80, 255, 0.1), transparent 70%), radial-gradient(circle at 20% 80%, rgba(50, 100, 255, 0.1), transparent 80%); animation: pulseLight 12s infinite alternate ease-in-out; z-index: -3; } body::after { content: ""; position: fixed; inset: 0; background-image: radial-gradient(rgba(180, 180, 255, 0.1) 1px, transparent 1px); background-size: 3px 3px; opacity: 0.25; animation: drift 60s linear infinite; z-index: -2; } @keyframes pulseLight { 0% { filter: brightness(0.9) hue-rotate(0deg); } 50% { filter: brightness(1.1) hue-rotate(20deg); } 100% { filter: brightness(0.9) hue-rotate(-20deg); } } @keyframes drift { from { background-position: 0 0; } to { background-position: 300px 600px; } } .glitch-overlay { position: fixed; inset: 0; background: repeating-linear-gradient( 0deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 2px, transparent 4px ); mix-blend-mode: overlay; opacity: 0.15; animation: scan 8s linear infinite; z-index: -1; } @keyframes scan { 0% { background-position-y: 0; } 100% { background-position-y: 100%; } } </style>