SI28_V23

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…

<<set $mute to false>>  <<audio "10-song " stop>> <<audio "1-song " loop play>> <<audio "1-song " volume 0 fadein>> <script>$('body').removeClass().addClass('Paulbureau')</script> <div class="text_intro "> Hier, je me suis endormie comme une masse, dans un sommeil sans rêves. J'ai pu réccuperer un peu d'energie, et je m'éfforce d'effacer de ma mémoire les évenements de la soirée. En passant devant la salle de pause, je croise le regard du directeur, il discutait avec Paul. Je les salue rapidement, mais alors que je m'appretais à rejoindre mon bureau, Paul sort de la salle et m'interpelle avec un grand sourire. "- Salut, le Directeur souhaite te parler !" En rentrant dans la salle, le directeur m'invite à en prendre un café avec lui. Je repense soudainement à l'ombre dans le miroir. Puis à ma fille. Et enfin, les loutres. [[Prendre le café avec le Directeur|Prendre le café]] </div>

<<set $mute to false>> <<audio "5-song " stop>> <<audio "7-song " loop play>> <<audio "7-song " volume 0 fadein>> <script>$('body').removeClass().addClass('Juliette1')</script> <div class="text_intro "> Je retrouve Juliette comme prévu, qui m'attend à une table de pique-nique. - Hey $Prenom ! T'as petite mine dis donc... - Salut Juliette. J'ai eu la visite de l'Office central de lutte contre les atteintes à l'environnement. Son sourire disparait de son visage. - Ah oui ? Pourquoi ? - Ils ont dit avoir été prévenus par des associations que nous déversions des produits chimiques dans la nature. Elle rit jaune. - Ces putains d'assos veulent vraiment pas nous laisser faire notre boulot en paix, hein! [[Lui poser la question pour le stockage]] <<if ($Déplacer is "true")>> [[Défendre les associations]] <</if>> </div>

<<set $mute to false>> <script>$('body').removeClass().addClass('Intro')</script> <div id="overlay-container"> <div id="text-container"> <div id="options-container" style=" text-align: center; margin-top: 20px;">  Vous incarnerez une femme. Votre prénom : <<textbox "$Prenom" "Anne">>  Votre nom : <<textbox "$Nom" "Onyme">>  <div id="button-container1" class="hidden"> <<link "suivant">><<goto "Welcoming">><</link>> </div> </div> </div>

<<set $mute to false>> <<audio "7-song " stop>> <<audio "8-song " stop>> <<audio "6-song " loop play>> <<audio "6-song " volume 0 fadein>> <script>$('body').removeClass().addClass('Chef')</script> <div class="text_intro "> Après un trajet en voiture depuis le site du chantier jusqu'à l'entreprise, j'arrive devant la porte de son bureau. J'échange un regard avec Paul, qui est assis à son bureau. Il m'adresse un sourire d'encouragements, que j'ai du mal à lui rendre. J'enclanche la poignée et me retrouve face au directeur assis à son bureu, le visage fermé. Lorsqu'il me voit, il me fait signe de m'assoir. "- Je vous convoque car j'ai reçu ce matin un rapport de l'Office central de la lutte contre les atteintes à l'environnement. $Prenom, je suis assez déçu de ne pas avoir été prévenu plus tôt de la situation. - Je vous présente mes excuses. J'ai été surprise également de leur passage hier matin sur le site du chantier. Je comptais vous en informer une fois avoir tiré la situation au clair. - Très bien, expliquez-moi ce qu'il s'est passé, et comment ces barils ont pu se retrouver stockés en exterieur." [[Expliquer toute l'histoire]] [[Couvrir Juliette]] </div>

<div class="text_intro "> ~~ 3 mois plus tard ~~ J'entre en trombe dans la chambre. Les alarmes des appareils médicaux sont affolées et les diodes clignotent sans fin. Les médecins sont affairés autour du lit et m'empêchent de voir ma fille. Je l'entends tousser à s'en arracher les poumons. J'attrape un médecin par le bras. "-Qu'est ce qu'il se passe ? J'ai été appelée en urgence... - Madame, sortez s'il vous plait, on viendra vous chercher." Il me pousse jusqu'à l'exterieur de la chambre. Je vois flou. Ma vision se trouble. Je m'effondre contre le mur. C'est un cauchemar. Après un moment qui me semble être une éternité, une voix me rappelle à la réalité. "-Madame, vous m'entendez ?" Je me relève difficilement. "-Votre fille est dans un état critique. Nous avons dû la placer dans un coma artificiel le temps de réfléchir à la marche à suivre." J'entre dans la chambre. Les alarmes se sont arrétées, il n'y a plus que le son régulier de l'électrocardiogramme. Le petit coprs de ma petite fille se trouve sur le lit, immobile. Son visage est émacié, sa peau est d'une paleur extrême. Je voudrais hurler pour que ses paupières closes s'ouvrent, mais rien ne sort de ma bouche. Je caresse doucement son visage et remets ses mêches de cheveux en place derriere son oreille. Je pleure. Je prends ses mains et les place sur mes joues. En bougeant, je fais tomber son doudou ours polaire. Je le ramasse machinalement. À l'instant où je le prends dans mes mains, une voix familière retentit dans ma tête. La voix de l'ombre. "-Acceptes-tu cette fin ?" [[NON!|CHAPITRE 1 : Introduction / Scène 1 : Hôpital]] </div>

<div class="text_intro "> ~~ 3 mois plus tard ~~ J'entre dans la chambre d'hôpital. Ma fille est assise sur son lit, un calepin à la main. "-Coucou ma chérie, comment vas tu aujourd'hui ?" Elle ne me répond pas. Depuis quelques temps, nos relations se sont dégradées. J'ai l'impression qu'elle a perdu son innocence, au cours de ces derniers mois. La semaine dernière, quand je lui ai demandé ce qui n'allait pas, elle m'a dit qu'elle était déçue de mes choix. Depuis, je suis triste. J'essaye de me dire que c'est la crise d'adolescence. Elle a commencé son nouveau traitement récemment, mais il n'y a pas d'amélioration nette pour l'instant. Les médecins la surveillent toujours etespèrent voir un changement bientôt. Je croise les doigts. "-Qu'est ce que tu écris là ? - Rien. - Allez, montre moi s'il te plait ?" Elle hausse les épaules et me tends le bloc-note. "-C'est une lettre pour les aliens. Pour quand l'humanité aura disparu." Je lis la lettre. "Chers êtres intelligents, Si vous lisez cette lettre, cela signifie que notre espèce n'existe plus. Il y a sans doute beaucoup de raisons à notre disparition, mais je souhaite vous raconter une histoire, mon histoire, qui symbolise notre déclin. Ma mère, comme tant d'autres, a fait des choix discutables. Elle a sacrifié sa morale et son éthique pour obtenir plus d'argent. En pensant me sauver, elle a choisi l'égoïsme. <<if $Deplacer is "false">>[Elle n'a pas compris pourquoi j'ai pleuré quand les loutres géantes se sont éteintes. C'est parce que j'ai compris que nous serions les prochains. Mais cela n'a plus d'importance.] <</if>> Chaque choix que nous avons fait nous a éloignés un peu plus de notre propre survie. Je me demande maintenant, en vous écrivant, chers êtres intelligents : ferez-vous les mêmes erreurs que nous ?" ~~ Fin ~~ </div>

<div class="text_intro "> ~~ 3 mois plus tard ~~ <<if $Denoncer is "true">> [Des mois se sont écoulés depuis le départ de Juliette. Depuis l'affaires des produits chimiques, j'ai tenu un point d'honneur à ce que le chantier soit organisé de manière irréprochable. Nous avons contacté une société de valorisation des déchets pour tout ce qu'il était possible de recycler. Après plus d'un mois de travail acharné, le site a finalement été dépollué. Toutes ces mesures ont fait perdre du temps et de l'argent à l'entreprise, mais j'ai insisté auprès du directeur pour que cela soit fait. C'était important. À part cela, le chantier d'hôpital avance bien. J'ai réussi à m'imposer en temps que cheffe de projet, sans l'aide de Juliette. La nouvelle cheffe de chantier est très efficace, je n'ai pas à me plaindre. Je suis tirée de mes pensées par un bruit à ma droite. La portière de la voiture s'ouvre, laissant apparaitre ma fille. Elle prends place sur le siège passager, son sac sur les genoux, pendant que je démarre la voiture.] <<else>>[Des mois se sont écoulés depuis le renvoi des ouvriers de manutention. Cela m'a hanté pendant des semaines, je n'en ai pas parlé à ma fille, mais j'ai l'impression qu'elle est au courant quand même. J'essaye de passer à autre chose. À cause de ma culpabilité, mes relations avec Juliette se sont dégradées. Je l'évite autant que possible, tout en gardant un oeil sur ses faits et gestes. Depuis l'affaires des produits chimiques, j'ai tenu un point d'honneur à ce que le chantier soit organisé de manière irréprochable. Nous avons contacté une société de valorisation des déchets pour tout ce qu'il était possible de recycler. Après plus d'un mois de travail acharné, le site a finalement été dépollué. Toutes ces mesures ont fait perdre du temps et de l'argent à l'entreprise, mais j'ai insisté auprès du directeur pour que cela soit fait. C'était important. À part cela, le chantier d'hôpital avance bien. J'ai réussi à m'imposer en temps que cheffe de projet, sans l'aide de Juliette. Je suis tirée de mes pensées par un bruit à ma droite. La portière de la voiture s'ouvre, laissant apparaitre ma fille. Elle prends place sur le siège passager, son sac sur les genoux, pendant que je démarre la voiture.] <</if>> <<if $Deplacer is "true">> ["- Alors ma chérie, ta première journée s'est bien passée ? - Oui maman, ça va. Et devine quoi ? - Raconte moi. - Eh bien dans deux semaines, on aura une sortie scolaire pour aller voir la nouvelle reserve naturelle des loutres géantes, tu sais, celle qui a été créée après ton chantier. - C'est super, tu passeras le bonjour aux loutres de ma part ! Elle sourit. - Bon, et tu t'es fait des amis ?] <<else>> ["- Alors ma chérie, ta première journée s'est bien passée ? - Oui maman, ça va. - Tu es sûre ? Tu as l'air contrariée... - Eh bien si tu veux tout savoir, en cours aujourd'hui, j'ai appris que la dernière loutre géante venait de disparaitre. Il n'y en a plus, c'est fini. C'est une espèce éteinte. Je garde le silence. Je ne sais pas trop quoi dire. - C'est très triste. Ça arrive malheureusement. <<if ($Promesse1 is "true" or $Promesse2 is "true")>> [-Tu avais promis que ça n'arriverai pas. -Je sais. Je suis sincèrement désolée.] <<else>> [- Il ne faut plus que ça arrive. - Oui je suis d'accord.] <</if>> S'ensuit un long silence. Je me racle la gorge et tente de changer de sujet. - Ahem, bon, et tu t'es fait des amis ?] <</if>> - Je ne les connais pas encore beaucoup, mais la plupart ont l'air sympa." Je lui jette un regard, tout en restant concentrée sur la route. J'ai l'impression qu'elle a perdu son innocence, au cours de ces derniers mois. <<if $Deplacer is "false">>[La semaine dernière, quand je lui ai demandé ce qui n'allait pas, elle m'a dit qu'elle était déçue de mes choix.] <</if>> Depuis, je suis triste. Mais j'essaye de me concentrer sur l'avenir, sur son retour à l'école. C'est une chance qu'elle ait guéri avec ce traitement, les médecins la surveillent toujours en cas de rechute, mais sont très optimistes pour la suite. "-On retourne quand à l'hôpital maman ? -Tu es si pressée que ça d'y retourner ? -Non mais, j'ai oublié mon doudou ours polaire là bas... C'est le seul souvenir qu'il me reste de mon amie, puisque je ne la vois plus." Je lève les yeux au ciel. -Mais enfin, tu veux bien me dire qui était ton amie maintenant ? - C'est un secret." ~~ Fin ~~ </div>

<div class="text_intro "> ~~ 3 mois plus tard ~~ <<if $Denoncer is "true">>[Des mois se sont écoulés depuis le départ de Juliette. Depuis l'affaires des produits chimiques, j'ai tenu un point d'honneur à ce que le chantier soit organisé de manière irréprochable. Nous avons contacté une société de valorisation des déchets pour tout ce qu'il était possible de recycler. Après plus d'un mois de travail acharné, le site a finalement été dépollué. Toutes ces mesures ont fait perdre du temps et de l'argent à l'entreprise, mais j'ai insisté auprès du directeur pour que cela soit fait. C'était important. À part cela, le chantier d'hôpital avance bien. J'ai réussi à m'imposer en temps que cheffe de projet, sans l'aide de Juliette. La nouvelle cheffe de chantier est très efficace, je n'ai pas à me plaindre.] <<else>>[Des mois se sont écoulés depuis le renvoi des ouvriers de manutention. Cela m'a hanté pendant des semaines, je n'en ai pas parlé à ma fille. J'essaye de passer à autre chose. À cause de ma culpabilité, mes relations avec Juliette se sont dégradées. Je l'évite autant que possible, tout en gardant un oeil sur ses faits et gestes. Depuis l'affaires des produits chimiques, j'ai tenu un point d'honneur à ce que le chantier soit organisé de manière irréprochable. Nous avons contacté une société de valorisation des déchets pour tout ce qu'il était possible de recycler. Après plus d'un mois de travail acharné, le site a finalement été dépollué. Toutes ces mesures ont fait perdre du temps et de l'argent à l'entreprise, mais j'ai insisté auprès du directeur pour que cela soit fait. C'était important. À part cela, le chantier d'hôpital avance bien. J'ai réussi à m'imposer en temps que cheffe de projet, sans l'aide de Juliette.] <</if>> <<if $Deplacer is "true">>[Je suis tirée de mes pensées par un bruit à ma droite. La portière de la voiture s'ouvre, laissant apparaitre ma fille. Elle prends place sur le siège passager, son sac sur les genoux, pendant que je démarre la voiture. "- Alors ma chérie, ta première journée s'est bien passée ? - Oui maman, ça va. Et devine quoi ? - Raconte moi. - Eh bien dans deux semaines, on aura une sortie scolaire pour aller voir la nouvelle reserve naturelle des loutres géantes, tu sais, celle qui a été créée après ton chantier. - C'est super, tu passeras le bonjour aux loutres de ma part ! Elle sourit. - Bon, et tu t'es fait des amis ?] <<else>>[Je suis tirée de mes pensées par un bruit à ma droite. La portière de la voiture s'ouvre, laissant apparaitre ma fille. Elle prends place sur le siège passager, son sac sur les genoux, pendant que je démarre la voiture. "- Alors ma chérie, ta première journée s'est bien passée ? - Oui maman, ça va. - Tu es sûre ? Tu as l'air contrariée... - Eh bien si tu veux tout savoir, en cours aujourd'hui, j'ai appris que la dernière loutre géante venait de disparaitre. Il n'y en a plus, c'est fini. C'est une espèce éteinte. Je garde le silence. Je ne sais pas trop quoi dire. - C'est très triste. Ça arrive malheureusement. - Il ne faut plus que ça arrive. - Oui je suis d'accord. S'ensuit un long silence. Je me racle la gorge et tente de changer de sujet. - Ahem, bon, et tu t'es fait des amis ?] <</if>> - Je ne les connais pas encore beaucoup, mais mon voisin de table s'appelle Anatole et il a l'air gentil. Il y a aussi Emma et Sophie." Je lui jette un regard, tout en restant concentrée sur la route. J'ai l'impression qu'elle a perdu son innocence, au cours de ces derniers mois. Je suis un peu triste. Mais j'essaye de me concentrer sur l'avenir, sur son retour à l'école. C'est une chance qu'elle ait guéri avec ce traitement, les médecins la surveillent toujours en cas de rechute, mais sont très optimistes pour la suite. "-On retourne quand à l'hôpital maman ? -Tu es si pressée que ça d'y retourner ? -Non mais, j'ai oublié mon doudou ours polaire là bas... C'est le seul souvenir qu'il me reste de mon amie, puisque je ne la vois plus." Je lève les yeux au ciel. -Mais enfin, tu veux bien me dire qui était ton amie maintenant ? - C'est un secret." ~~ Fin ~~ </div>

<div class="text_intro "> ~~ 3 mois plus tard ~~ Des mois se sont écoulés depuis le départ de Juliette. Depuis l'affaires des produits chimiques, j'ai tenu un point d'honneur à ce que le chantier soit organisé de manière irréprochable. Nous avons contacté une société de valorisation des déchets pour tout ce qu'il était possible de recycler. Après plus d'un mois de travail acharné, le site a finalement été dépollué. Toutes ces mesures ont fait perdre du temps et de l'argent à l'entreprise, mais j'ai insisté auprès du directeur pour que cela soit fait. C'était important. À part cela, le chantier d'hôpital avance bien. J'ai réussi à m'imposer en temps que cheffe de projet, sans l'aide de Juliette. La nouvelle cheffe de chantier est très efficace, je n'ai pas à me plaindre. Je suis tirée de mes pensées par un bruit à ma droite. La portiere de la voiture s'ouvre, laissant apparaitre ma fille, un grand sourire sur le visage. Elle prends place sur le siège passager, son sac sur les genoux, pendant que je démarre la voiture. "- Alors ma chérie, ta première journée s'est bien passée ? - Oui maman ! C'était vraiment chouette, et devine quoi ? - Feur ? - Maman ! Elle me tape, agacée. - Bon alors raconte moi, je peux pas deviner ! - Eh bien dans deux semaines, on aura une sortie scolaire pour aller voir la nouvelle reserve naturelle des loutres géantes, tu sais, celle qui a été créée après ton chantier ! - C'est super, tu passeras le bonjour aux loutres de ma part ! Elle rigole. - J'espère que je vais voir des bébés loutres, j'aime trop les bébés loutres. - Bon, et tu t'es fait des amis ? - Je ne les connais pas encore beaucoup, mais mon voisin de table s'appelle Anatole et il a l'air gentil. Il y a aussi Emma et Sophie, Sophie avait des bonbons et elle en a donné à toute la classe." Je lui jette un regard, tout en restant concentrée sur la route. Elle a l'air heureuse. En quelques mois, elle redevenue la fillette pleine de vie que j'aime tant. Les médecins la surveillent toujours en cas de rechute, mais sont très optimistes pour la suite. "-On retourne quand à l'hôpital maman ? -Tu es si pressée que ça d'y retourner ? -Non mais, j'ai oublié mon doudou ours polaire là bas... C'est le seul souvenir qu'il me reste de mon amie, puisque je ne la vois plus." Je lève les yeux au ciel. -Mais enfin, tu veux bien me dire qui était ton amie maintenant ? - Devine !" ~~ Fin ~~ </div>

<<set $mute to false>> <<audio "7-song " stop>> <<audio "8-song " loop play>> <<audio "8-song " volume 0 fadein>> <script>$('body').removeClass().addClass('Juliette1')</script> <div class="text_intro "> "-Je vais faire ce que je peux Juliette. - Merci $Prenom. Ça fait du bien d'avoir une amie dans ce genre de situation." Elle se lève et me prend dans ses bras, puis sort du bureau. Aussitôt, mon téléphone sonne. C'est le Directeur. "- Allo ? - $Prenom, je veux vous voir à 14h dans mon bureau. Nous devons parler." -Très bien monsieur, à tout à l'heure. J'ai la boule au ventre. [[Aller voir le Directeur|Entrer dans la pièce]] </div>

<<set $mute to false>> <<audio "4-song " stop>> <<audio "1-song " loop play>> <<audio "1-song " volume 0 fadein>> <script>$('body').removeClass().addClass('Chef')</script> <div class="text_intro "> "Alors $Prenom, vous partez vendredi travailler à proximité du site de construction c'est bien cela ? Pas trop stressée ? - Non monsieur, je suis même plutôt enthousiaste à l'idée de conduire mon propre projet. - C'est bien, profitez bien de cette première experience ! En regardant dans ma tasse de café, il me semble que le reflet se trouble... Je fronce les sourcils et regarde de plus près. Mon coeur s'arrete en reconnaissant l'ombre de la veille. Je lève les yeux vers le Directeur, qui me regarde interloqué. "Tout va bien ?" Cette ombre... devrais-je me fier à elle ? "-Oui, tout va bien, c'est seulement que... - Vous avez quelque chose à me dire ?" [[Jeter le café et retourner travailler]] [[Parler des loutres au Directeur]] </div>

<<set $mute to false>>  <<audio "1-song " loop play>>  <<audio "1-song " volume 0 fadein>>  <<audio "2-song " stop>>  <div id="titre-initial"> <h1 id="titre">Echos of Tomorrow</h1> <div id="button-container" class="hidden"> <<link "Commencer">><<goto "Début">><</link>>  </div> </div>  <script> // Au début, l'audio est mis en place let mute = false; $('body').removeClass().addClass('Intro')  // Fonction d'initialisation de l'audio function playAudio() { let audio1 = new Audio("1-song.mp3"); audio1.loop = true; audio1.play(); // Si l'audio commence, fade-in audio1.volume = 0; let fadeinInterval = setInterval(function() { if (audio1.volume < 1) { audio1.volume += 0.05; // Augmentation progressive du volume } else { clearInterval(fadeinInterval); } }, 100); // Augmenter tous les 100ms let audio2 = new Audio("2-song.mp3"); audio2.pause(); // Stopper la deuxième chanson (si nécessaire) } // Lorsque le DOM est prêt, initialiser l'audio et ajouter un délai pour afficher le bouton document.addEventListener("DOMContentLoaded", function() { playAudio(); // Appel de la fonction de lecture audio // Ajout de la classe Intro à body pour l'animation document.body.classList.add('Intro'); // Afficher le bouton "Commencer" après 11 secondes setTimeout(function() { document.querySelector("#button-container").classList.remove("hidden"); }, 11000); // 11 secondes d'attente avant d'afficher le bouton }); </script>

<<set $Hôpital to "false">> <<set $Loutre to "false">> <<set $Refus to "false">> <<set $Denoncer to "false">> <<set $Deplacer to "false">> <<set $Promesse1 to "false">> <<set $Promesse2 to "false">> <<set $Score to 0>> <<cacheaudio "1-song" "audio/1-welcoming.mp3">> <<cacheaudio "2-song" "audio/typing.mp3">> <<set $imageFin to false>> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <<cacheaudio "1-song" "audio/1-welcoming.mp3">> <<cacheaudio "2-song" "audio/2-beginning.mp3">> <<cacheaudio "3-song" "audio/Chap 1 bip Hopital.mp3">> <<cacheaudio "4-song" "audio/Chapitre 1 salon.mp3">> <<cacheaudio "5-song" "audio/chap 3 eau qui coule .mp3">> <<cacheaudio "Typing-song" "audio/typing.mp3">> <<cacheaudio "6-song" "audio/Son chap 2 bureau.mp3">> <<cacheaudio "7-song" "audio/Confrontation.mp3">> <<cacheaudio "8-song" "audio/Rennoncer.mp3">> <<cacheaudio "9-song" "audio/son chap 2 exterieur devant la maison.mp3">><<cacheaudio "10-song" "audio/Bruitage brosse a dents (1).mp3">>

<<set $mute to false>> <<audio "4-song " stop>> <<audio "5-song " loop play>> <<audio "5-song " volume 0 fadein>> <script>$('body').removeClass().addClass('Toilette')</script> <div class="text_intro "> Je vais aux toilettes pour me calmer. J'ai la nausée, j'ai du mal à respirer. J'imagine toutes les conséquences désastreuses si tout cela s'avère vrai. La presse va s'en mêler, les sponsors et partenaires vont se retirer du projet, une enquête sera ouverte, des poursuites judiciaires pour mon entreprise... Et je perdrai mon emploi. Je n'aurai plus de quoi payer le traitement de ma fille, elle retombera malade, et... Stop. Ressaisis-toi et réfléchis. Je passe de l'eau sur mon visage. Cela m'apaise un peu. Comment tout cela a-il pu se produire ? Je revisionne dans ma tête la réunion sur le plan de gestion des déchets d'il y a quelques mois. Suite à cette réunion, il avait été convenu que Juliette enverrait le compte rendu à son équipe d'ouvriers, et leur ferait un briefing, pour que le plan soit mis en oeuvre dès le début du chantier. L'a-t'elle fait ? Oui, elle me l'a dit. Elle m'a dit qu'elle l'avait fait... Toutes les fois où je me suis rendue sur le site, tout avait l'air en ordre... Je n'ai pas pensé à vérifier le stockage des déchets chimiques. Je lève les yeux vers le miroir qui me fait face. Je vois l'ombre apparaître. Cela faisait longtemps. [[Parler à l'ombre|Ombre]] </div>

<<set $mute to false>> /*audio*/ <<audio "2-song" stop>> <<audio "1-song" stop>> <div id="typing-container" style="font-family: 'Courier New', monospace; font-size: 24px; position: fixed; top: 100px; left: 100px; width: calc(100% - 200px); max-width: 800px;"> </div> <div id="options-container" style="display: none; text-align: center; position: fixed; top: 60%; left: 50%; transform: translateX(-50%); width: calc(100% - 200px); max-width: 800px;"> <div id="button-container1" class="hidden"> <<link "suivant">><<goto "CHAPITRE 1 : Introduction / Scène 1 : Hôpital">><</link>> </div> </div> <div id="skip-button-container" style="position: fixed; top: 10px; right: 50px; z-index: 1000;"> <<link "⏩" "CHAPITRE 1 : Introduction / Scène 1 : Hôpital">> <button id="skip-button" style=" background-color: transparent; border: none; font-size: 30px; cursor: pointer; color: #FFFFFF;"> <img src="path/to/skip-icon.png" alt="Skip" style="width: 30px; height: 30px;"> </button> <</link>> </div> <script> let typingAudio; function typeWriter(elementId, text, speed, callback) { let i = 0; const element = document.getElementById(elementId); if (element) { // Verifier si l'element existe function type() { if (i < text.length) { element.innerHTML += text.charAt(i); i++; setTimeout(type, speed); } else if (callback) { callback(); } } type(); } } $(document).on(":passagedisplay", function () { if (!typingAudio) { typingAudio = new Audio("audio/typing.mp3"); typingAudio.volume = 0.5; typingAudio.loop = true; typingAudio.play(); } const container = document.getElementById("typing-container"); if (container) { // Premier texte const firstText = document.createElement("p"); firstText.id = "firstText"; container.appendChild(firstText); typeWriter("firstText", "Bienvenue " + SugarCube.State.variables.Prenom + ",", 100, () => { // Deuxieme texte const secondText = document.createElement("p"); secondText.id = "secondText"; container.appendChild(secondText); typeWriter("secondText", "Vos choix détermineront l'avenir.", 100, () => { // Troisieme texte const thirdText = document.createElement("p"); thirdText.id = "thirdText"; container.appendChild(thirdText); typeWriter("thirdText", "Mais rappelez-vous : chaque décision a un prix. Soyez sage.", 100, () => { // Quatrieme texte const fourthText = document.createElement("p"); fourthText.id = "fourthText"; container.appendChild(fourthText); typeWriter("fourthText", "Bonne chance.", 100, () => { // Afficher le lien après le texte intégral document.getElementById("options-container").style.display = "block"; typingAudio.pause(); // Arrêt de l'audio de saisie une fois le texte }); }); }); }); } }); </script> <script> // Exibe le button "Avancer" apres 3 seg setTimeout(() => { document.querySelector("#button-container1").classList.remove("hidden"); }, 1000); </script>

<div id="overlay-container"> <div id="text-container"> <h1>SI28-webmail</h1> <div id="mail-container"> <div id="folders"> <h2>Dossiers</h2> <ul> <li id="inbox">Boîte de réception</li> <li id="drafts">Brouillons</li> <li id="sent">Envoyés</li> <li id="trash">Corbeille</li> </ul> </div> <div id="mails"> <h2>Mails</h2> <ul id="mail">  </ul> </div> <div id="content"> <h2>Contenu</h2> <div id="mail-content-wrapper"> <div id="mail-content"> <p>Sélectionnez un mail pour voir son contenu.</p> </div> </div> </div> </div> <div id="shutdown-button"> <<link "🛌">><<goto "Scène 3 : Rêve 2">><</link>> </div> </div> </div>  <div id="random-messages-container"></div> <script> // Définition des mails par défaut const mails = [ { "id": 0, "folder": "inbox", "subject": "...........................................", "sender": "...........................................", "date": "1 minutes", "content": "Tu peux changer les choses", read: false }, { id: 1, folder: 'inbox', subject: 'Devis soins', sender: 'admin@hopital_bouchardon.com', date: '2024-12-01', content: "Madame,\nSuite à vos échanges avec notre équipe médicale, nous vous transmettons le devis pour le traitement envisagé pour votre fille.\n\nAprès une évaluation approfondie de son état de santé et des options thérapeutiques disponibles, nous vous confirmons que le traitement recommandé est considéré comme prometteur et correspond aux besoins spécifiques de votre enfant.\n\nLe coût total estimé pour l’ensemble des soins et des traitements associés est de 120 000 $. Ce montant couvre :\n\nLes consultations spécialisées,\nLes interventions médicales nécessaires,\nLes médicaments et équipements spécifiques,\nLes frais d’hospitalisation et de suivi post-traitement.\nNous comprenons que cette somme peut représenter un engagement financier important, et notre équipe reste à votre disposition pour toute question ou information complémentaire concernant ce devis ou les modalités de paiement.\n\nNous restons mobilisés pour offrir les meilleurs soins possibles à votre fille et vous remercions pour la confiance que vous accordez à notre établissement.\n\nCordialement,\nCentre Hospitalier Bouchardon", read: false }, { id: 3, folder: 'sent', subject: 'Demande envoyée', sender: 'vous@example.com', date: '2024-11-30', content: 'Voici une copie de la demande que vous avez envoyée.', read: true }, { "id": 12, "folder": "inbox", "subject": "Confirmation collaboration", "sender": "partnerships@engineeringgroup.com", "date": "2024-12-02", "content": "Madame,\n\nNous avons bien pris en compte votre demande de collaboration et sommes ravis d'initier cette discussion. Un membre de notre équipe prendra contact avec vous sous peu pour définir les prochaines étapes.\n\nNous restons à votre disposition pour toute information complémentaire.\n\nCordialement,\nL’équipe de partenariat du Groupe d’Ingénierie", read: true }, ]; let currentFolder = 'inbox'; // Variable pour suivre le dossier actuel // Fonction pour afficher les mails d'un dossier function showFolder(folder) { currentFolder = folder; // Met à jour le dossier actuel const mailList = document.getElementById('mail'); mailList.innerHTML = ''; // Réinitialise la liste mails .filter((mail) => mail.folder === folder) .forEach((mail) => { const mailItem = document.createElement('li'); mailItem.className = mail.read ? '' : 'unread'; mailItem.textContent = `${mail.subject} - ${mail.sender} (${mail.date})`; mailItem.onclick = () => showMail(mail.id); // Affiche le mail lorsqu'il est cliqué mailList.appendChild(mailItem); }); } // Fonction pour afficher le contenu d'un mail // Fonction pour afficher le contenu d'un mail function showMail(id) { const mail = mails.find((m) => m.id === id); if (mail) { mail.read = true; // Marque comme lu const content = document.getElementById('mail-content'); content.innerHTML = ` <h3>${mail.subject}</h3> <p><strong>De :</strong> ${mail.sender}</p> <p><strong>Date :</strong> ${mail.date}</p> <hr> <p>${mail.content}</p> `; showFolder(currentFolder); // Rafraîchit la liste des mails } } // Affiche la boîte de réception par défaut document.addEventListener('DOMContentLoaded', () => { showFolder('inbox'); }); // Ajout des gestionnaires d'événements pour les dossiers document.getElementById('inbox').addEventListener('click', () => showFolder('inbox')); document.getElementById('drafts').addEventListener('click', () => showFolder('drafts')); document.getElementById('sent').addEventListener('click', () => showFolder('sent')); document.getElementById('trash').addEventListener('click', () => showFolder('trash')); // Messages aléatoires const messages = [ "Il n'y a pas d'objet au mail, ni d'adresse de l'expéditeur... Est-ce un bug de la messagerie ?", "C'est étrange.", "Je regarde l'heure d'envoi, le mail a été envoyé il y a 1 minute." ]; // Fonction pour afficher un message aléatoire à droite de l'écran function showRandomMessage() { const messageContainer = document.getElementById('random-messages-container'); if (!messageContainer) { console.error('Le conteneur pour les messages aléatoires est introuvable.'); return; } // Créer un élément pour afficher le message const messageElement = document.createElement('div'); messageElement.classList.add('random-message'); messageElement.textContent = messages[Math.floor(Math.random() * messages.length)]; // Ajouter le message au conteneur messageContainer.appendChild(messageElement); // Faire apparaître le message setTimeout(() => { messageElement.style.opacity = 1; }, 100); // Faire disparaître le message après 3 secondes setTimeout(() => { messageElement.classList.add('hide'); setTimeout(() => { messageContainer.removeChild(messageElement); // Supprimer après animation }, 1000); }, 3000); } // Afficher un message toutes les 2 à 7 secondes setInterval(showRandomMessage, Math.floor(Math.random() * 5000) + 4000); </script> <style> body { margin: 0; padding: 0; font-family: Helvetica, sans-serif; font-size: 125%; background-color: #1a1a1a; /* Fond sombre */ color: white; /* Texte blanc */ display: flex; justify-content: center; /* Centre horizontalement */ align-items: center; /* Collé en haut de la fenêtre */ height: 100vh; overflow: hidden; /* Désactive le défilement global */ } h1, h2 { color: #1E90FF; /* Texte bleu pour les titres */ } #overlay-container { position: absolute; top:0px; left: 0px; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; z-index: 1000; } #text-container { width: 80%; max-width: 1200px; margin: 10 auto; background-color: rgba(255, 255, 255, 0.2); padding: 20px; border-radius: 15px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } #options-container { text-align: center; margin-top: 20px; } #options-container a { color: white; text-decoration: none; font-weight: bold; margin: 0 10px; padding: 10px 20px; border: 2px solid white; border-radius: 5px; transition: background-color 0.3s, color 0.3s; } #options-container a:hover { background-color: white; color: black; } #mail-container { width: 100%; display: flex; flex-direction: row; justify-content: space-between; } #folders, #mails, #content { width: 30%; background-color: #333; padding: 20px; border-radius: 10px; margin: 10px; } #folders { background-color: #1E90FF; /* Bleu pour la section des dossiers */ } #folders li { list-style: none; padding: 10px; background-color: #4b8cdb; border: 2px solid #1E90FF; border-radius: 5px; margin-bottom: 10px; cursor: pointer; } #folders li:hover { background-color: #5a9bd4; } #mails { background-color: #222; } #content { background-color: #111; color: lightgray; padding: 20px; border-radius: 10px; } #content h3 { color: #1E90FF; } .unread { font-weight: bold; color: #f0f0f0; } .text_intro { width: 1200px; max-width: 90%; max-height: 70vh; height: auto; margin-top: 0; text-align: justify; overflow-y: auto; background: black; border: thick solid blue; opacity: 0.8; color: white; font-size: 125%; padding: 20px; box-sizing: border-box; } .text_intro::-webkit-scrollbar { width: 8px; } .text_intro::-webkit-scrollbar-thumb { background-color: #1E90FF; border-radius: 4px; } .text_intro::-webkit-scrollbar-track { background-color: #333; } #button-container a { display: inline-block; padding: 15px 30px; background-color: #1E90FF; color: white; font-size: 1.5em; text-decoration: none; border-radius: 25px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); transition: background-color 0.3s ease, transform 0.2s ease; } #button-container a:hover { background-color: #4682b4; transform: scale(1.05); } #button-container a:active { background-color: #004085; } /* Animation de Fade In */ @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /*pensée*/ /* Conteneur principal pour les messages */ #random-messages-container { position: fixed; /* Fixé par rapport à la fenêtre */ top: 20px; /* Positionné en haut */ pointer-events: none; /* Ne pas interférer avec les clics */ z-index: 9999; /* Toujours au-dessus des autres éléments */ } /* Style des messages */ .random-message { position: center; margin-top: 10px; /* Espacement entre les messages */ font-size: 1.2em; color: black; background-color: white; padding: 15px; border-radius: 10px; /* Coins arrondis */ box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3); /* Ombre */ border: 2px solid lightgray; /* Contour gris clair */ opacity: 0; /* Invisible par défaut */ transition: opacity 1s ease-out; } /* Bulles de pensée */ .random-message::after { content: ""; position: absolute; bottom: -15px; right: 15px; width: 20px; height: 20px; background-color: white; border: 2px solid lightgray; border-radius: 50%; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); } .random-message::before { content: ""; position: absolute; bottom: -35px; right: 10px; width: 15px; height: 15px; background-color: white; border: 2px solid lightgray; border-radius: 50%; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); } /* Petit cercle ajouté dynamiquement */ .random-message .bubble-small { content: ""; position: absolute; bottom: -50px; right: 5px; width: 10px; height: 10px; background-color: white; border: 2px solid lightgray; border-radius: 50%; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); } /* bouton arret */ #shutdown-button { position: relative; top: 0px; right: 0px; width: 40px; background-color: grey; color: white; border: none; padding: 10px; border-radius: 100%; font-size: 1.5em; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3); transition: transform 0.2s, background-color 0.3s; } #shutdown-button:hover { transform: scale(1.1); background-color: darkred; } #mail-content-wrapper { width: 100%; height: 300px; /* Hauteur fixe pour le conteneur */ overflow-y: auto; /* Active le défilement vertical */ border: 2px solid #1E90FF; border-radius: 10px; padding: 15px; background-color: #111; box-sizing: border-box; /* S'assure que le padding ne change pas la taille */ } #mail-content-wrapper::-webkit-scrollbar { width: 8px; } #mail-content-wrapper::-webkit-scrollbar-thumb { background-color: #1E90FF; border-radius: 4px; } #mail-content-wrapper::-webkit-scrollbar-track { background-color: #333; } #mail-content { white-space: pre-wrap; /* Préserve les sauts de ligne et les espaces */ color: lightgray; font-size: 1.2em; line-height: 1.6; } </style>