<style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namelola">Lola</div>
<div class="dialogue-box"><<type 25ms>>\Comme je l'ai dit, nous sommes amis, ça n'a jamais dégénéré comme ça. On s'est juste disputé, comme n'importe quels amis qui ont parfois des avis divergents. NON, il ne m'a jamais frappée.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Choix1 1')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namelola">Lola</div>
<div class="dialogue-box"><<type 25ms>>\Vous savez, les amis se disputent parfois, ce n'était pas une grosse dispute, rien de sérieux. Ce n’était pas une vraie tension ou un problème, juste des points de vue différents, vous voyez ce que je veux dire.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Choix2 1')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namelola">Lola</div>
<div class="dialogue-box"><<type 25ms>>\Au début, non, personne n’était au courant. Je ne l’ai pas dit à Émilie parce que je ne voulais pas envenimer les choses et rendre nos sorties gênantes. Et évidemment, je ne l’ai pas dit à mon frère.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Choix3 1')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namelola">Lola</div>
<div class="dialogue-box"><<type 25ms>>\Comme je vous l’ai déjà dit, nous sommes amis, rien de plus, c'était sans importance et c'était il y a un certain temps.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Choix4 1')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box"><<type 25ms>>\Ça ne doit pas forcément être lui… je veux dire, peut-être que la colère vous a fait perdre vos moyens et que sans le vouloir vous l’avez frappé ? Peut-être… à la tête ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Choix1 2')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namelola">Lola</div>
<div class="dialogue-box"><<type 25ms>>\Bien sûr que non, en fait il est bien plus fort que moi, je ne pourrais même pas le frapper, même si je le voulais.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Choix1 3')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box"><<type 25ms>>\Hmm… L’autopsie a révélé un coup à la tête avec un objet contondant, et pas à cause de la chute.
C’est une blessure récente, probablement de la nuit où vous étiez ensemble.
Comment expliquez-vous cela ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Choix1 4')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namelola">Lola</div>
<div class="dialogue-box"><<type 25ms>>\Une blessure ? Hmm je ne vois vraiment pas, je suis désolée j’ai les souvenirs un peu en avec toutes ces émotions…\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Lola10')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box"><<type 25ms>>\Et en quoi portait ce problème ? Pouvez-vous m'en dire plus ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Choix2 2')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namelola">Lola</div>
<div class="dialogue-box"><<type 25ms>>\Comme je l'ai dit, Paul avait un crush sur Émilie et Émilie ne le voulait pas, donc en gros, j'essayais de l'aider en lui disant d’oublier et de passer à autre chose, mais il insistait et me demandait de les rapprocher. Et comme Émilie est ma meilleure amie, c’était un peu compliqué. C’est tout.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Choix2 3')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box"><<type 25ms>>\Donc après avoir beaucoup parlé d’Émilie, pensez-vous qu'elle était assez frustrée pour le tuer ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Choix2 4')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namelola">Lola</div>
<div class="dialogue-box"><<type 25ms>>\Peut-être… Je ne peux pas dire oui, mais je ne peux pas dire non non plus. Ces derniers jours, Émilie n'arrêtait pas de m'en parler, probablement parce que Paul la pressait sur ce sujet. Mais je ne la pense pas capable de tuer une personne ! C’est impossible...\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Lola10')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box"><<type 25ms>>\Et Paul ? Peut-être l’a-t-il dit à quelqu’un ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Choix3 2')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namelola">Lola</div>
<div class="dialogue-box"><<type 25ms>>\Pas à ma connaissance… Je ne pense pas qu’on en ait parlé à qui que ce soit. Mais plus tard, je pense que Justin l’a su.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Choix3 3')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box"><<type 25ms>>\Qu’a-t-il fait ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Choix3 4')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namelola">Lola</div>
<div class="dialogue-box"><<type 25ms>>\Je ne sais pas trop, nous n’en avons pas vraiment discuté. Et je ne pense pas qu’il le savait depuis longtemps. C’est peut-être la raison pour laquelle il était nerveux et lançait des regards étranges à Paul ce soir-là. Parce que la plupart du temps, il est tellement protecteur, au point où ça m’agace. Mais étrangement, je n’ai jamais entendu dire qu’il avait parlé à Paul de ça. Peut-être qu’il ne voulait pas gâcher leur amitié…\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Lola19')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box"><<type 25ms>>\Donc, vous saviez que Paul aimait Émilie, qu'il en était amoureux, et vous avez quand même couché avec lui ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Choix4 2')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namelola">Lola</div>
<div class="dialogue-box"><<type 25ms>>\C'était avant que je sache que Paul avait un crush sur Émilie. Autrement, je ne me serais évidemment pas mise dans cette situation.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Choix4 3')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box"><<type 25ms>>\Vous étiez au courant qu’il possédait ces photos ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Choix4 4')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namelola">Lola</div>
<div class="dialogue-box"><<type 25ms>>\Je l'ai su récemment. Je ne savais pas qu'il avait des photos de moi cette nuit-là… Mais lui ne…\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Choix4 5')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box"><<type 25ms>>\Et quelle a été votre réaction après cela ? Vous en avez évidemment discuté, non ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Choix4 6')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namelola">Lola</div>
<div class="dialogue-box"><<type 25ms>>\Oui, je lui ai demandé de supprimer les photos. Ce n'était pas une grosse dispute, nous avons juste convenu qu'il les effacerait et il a été compréhensif à ce sujet.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Choix4 7')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box"><<type 25ms>>Pourtant, les photos sont toujours sur son téléphone… Intéressant…\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Lola19')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Hum… Paul et Justin s’entendaient vraiment super bien, ils étaient toujours fourrés ensemble quand Justin était encore dans le coin. D’ailleurs ils sont si différents, je n’imaginais pas qu’ils puissent être aussi proches.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie choix Justin1')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\C’est-à-dire ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie choix Justin2')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Eh bien, Paul est un bon ami mais c’est un gars qui aime faire la fête si vous voyez ce que je veux dire. Et quand il boit beaucoup, ou juste quand il a envie de s’amuser, il peut se montrer assez pénible voire carrément lourd. Bien sûr, en tant qu’amis on le supporte mais parfois on se dit qu’il va trop loin.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie choix Justin3')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Justin est tout le contraire, c’est un gars réservé et sérieux. Il est vraiment soucieux au sujet de Lola, c’est sa sœur vous comprenez. Parfois elle trouve qu’il est surprotecteur avec elle, moi je trouve qu’il a raison de s’inquiéter puisqu’elle peut être du genre insouciant.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie13')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Hum… Paul et Lola sont amis…\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie choix Lola1')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Il y a quelque chose de plus entre eux ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie choix Lola2')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Eh bien… Disons qu’ils ont déjà couché ensemble.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie choix Lola3')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Pouvez-vous développer ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie choix Lola4')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Ahhh… Bon, ils ont déjà couché ensemble après une soirée, mais ils ne sont pas vraiment sur la même longueur d’onde. Lola aime sincèrement Paul malgré les apparences. Elle était sérieuse avec lui, elle le connaît depuis si longtemps.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie choix Lola5')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Quand elle m’a raconté qu’il s’était passé un truc entre eux, elle avait l’air d’une gamine qui rêve au prince charmant. Et ça me désole parce que Paul n’a pas du tout les mêmes sentiments à son égard. Je sais qu’il a couché avec elle dans le feu de l’action, si vous voyez ce que je veux dire.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie choix Lola6')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Pour lui, c’était une de plus ou de moins, rien d’autre. Il s’amusait à une soirée, Lola était là, il passait du bon temps, alors quand elle lui a proposé d’aller plus loin il n’avait pas de raison de refuser. Enfin si, une énorme raison, mais lui et moi n’avons pas les mêmes principes donc je suppose que pour lui il n’y avait pas de raison.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie choix Lola7')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Très bien, donc Lola avait une raison d’en vouloir à Paul.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie choix Lola8')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Oui et non… pas vraiment. Elle est tellement amoureuse de lui qu’elle en devient aveugle. Elle pourrait tout lui accorder, tout lui pardonner. C’est pour ça que j’ai autant de peine pour elle.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie13')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Euh… Pas grand-chose. Je suis arrivée au milieu d’un sujet banal, il me semble qu’ils parlaient du chien de Lola.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie choix conv1')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Mais… Vous venez de me dire qu’il devenait pénible. J’ai du mal à imaginer comment il aurait pu le devenir sur un sujet aussi commun que le chien de votre amie.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie choix conv2')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Vous êtes sûre qu’ils ne se sont rien dit d’autre ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie choix conv3')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Euh… Eh-eh bien, Paul n’a jamais été très tourné animaux de compagnie donc… euh… il lui est déjà arrivé de se moquer du chien de Lola.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie choix conv4')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Elle a un chihuahua, Paul trouve cette race particulièrement laide. C’est déjà arrivé qu’il qualifie son chien de « p’tite crotte » ou ce genre de surnom ridicule.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie choix conv5')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Personnellement, je m’en fiche mais Lola est super attachée à son chien alors elle ne supporte pas qu’on parle en mal de lui, ça la rend triste vous voyez le genre. J’ai jugé préférable de partir avec elle avant qu’il ne l’embête avec ça…\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie choix conv6')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Hum… Je vois…\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie20')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
body::after {
content: ''; /* Required to generate the pseudo-element */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
z-index: -1; /* Place it behind the content */
}
.letter {
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, 0);
opacity: 0;
width: 80px;
height: 100px;
background-image: url('https://www.dropbox.com/scl/fi/ofazhuxkv3g0jt28rfj08/Fichier-3.png?rlkey=7rayb9mi12xjavu5j6iei5945&st=f7fehv9l&raw=1');
background-size: contain;
background-repeat: no-repeat;
transition: all 1s ease-out;
}
.letter-fullscreen {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: url('https://www.dropbox.com/scl/fi/ofazhuxkv3g0jt28rfj08/Fichier-3.png?rlkey=7rayb9mi12xjavu5j6iei5945&st=f7fehv9l&raw=1');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 1000;
}
.return-button {
background-color: orange; /* Orange background */
color: white;
padding: 15px 32px;
font-family: "VT323", monospace; /* Custom font */
font-weight: 400;
font-style: normal;
border: none;
cursor: pointer;
text-decoration: none;
border-radius: 4px;
display: inline-block;
margin-top: 20px;
position: absolute;
top: 10px;
right: 10px;
z-index: 2000;
transition: background-color 0.3s; /* Smooth transition for hover */
}
/* Remove default link hover behavior */
.return-button:hover {
background-color: rgba(255, 165, 0, 0.7); /* Orange with opacity */
text-decoration: none; /* Remove underline on hover */
color: white; /* Keep text white on hover */
}
</style>
<div id="handbag-container">
<div class="letter" id="letter"></div>
<div class="letter-fullscreen" id="letter-fullscreen"></div>
<div class="return-button" onclick="goToPassage('Emilie choix sac2')"> Suite </div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\D’après ce que vous avez vous-même écrit, il n’est pas improbable que Lola ait commis une bêtise. Qui plus est, elle avait prévu d’avouer ses sentiments à Paul. Si cela s’est mal passé, elle aurait une raison de lui en vouloir.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie choix sac3')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Non, quand je parle d’une bêtise, je veux dire qu’elle serait capable de se mettre minable. Elle pourrait commettre une bêtise pour elle, mais pas pour les autres, surtout pas pour Paul. Elle l’aime tellement… Elle serait incapable de lui faire du mal.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie choix sac4')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name ">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Même par accident ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie choix sac5')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Même par accident.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie choix sac6')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\C’est bien ce que je vais devoir découvrir.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie25')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
body::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: -1;
}
.clickable-image {
position: absolute;
top: 35%;
cursor: pointer;
width: 20vw;
height: auto;
}
.scrollable-content p {
margin: 0;
padding: 2px 10px;
}
.border-container {
width: 18vw;
height: 36vw;
background: url('https://www.dropbox.com/scl/fi/y3uvphnjta7l16qnbdc5b/imagetest.png?rlkey=plcer5i216yxnd3edk9c7zru1&st=ah5irgct&raw=1') center center no-repeat;
background-size: contain;
padding: 20px;
display: flex;
align-items: flex-start;
justify-content: center;
transition: transform 0.6s ease, opacity 0.6s ease;
transform: scale(1); /* Adjust scaling if needed */
opacity: 1;
visibility: visible; /* Ensure it's visible */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.scrollable-content {
margin-top: 40%;
width: 80%;
height: 70%;
overflow-y: auto;
font-family: Arial, sans-serif;
font-size: 14px;
display: flex;
flex-direction: column;
gap: 0px;
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollable-content::-webkit-scrollbar {
display: none;
}
.message {
max-width: 70%;
padding: 10px;
border-radius: 15px;
line-height: 1.5;
color: #4C4C4C;
}
.message-left {
align-self: flex-start;
background-color: #E5E5E5;
border-top-left-radius: 0;
}
.message-right {
align-self: flex-end;
background-color: #DCF8C6;
border-top-right-radius: 0;
}
.return-button {
background-color: orange; /* Orange background */
color: white;
padding: 15px 32px;
font-family: "VT323", monospace; /* Custom font */
font-weight: 400;
font-style: normal;
border: none;
cursor: pointer;
text-decoration: none;
border-radius: 4px;
display: inline-block;
margin-top: 20px;
position: absolute;
top: 10px;
right: 10px;
z-index: 2000;
transition: background-color 0.3s; /* Smooth transition for hover */
}
/* Remove default link hover behavior */
.return-button:hover {
background-color: rgba(255, 165, 0, 0.7); /* Orange with opacity */
text-decoration: none; /* Remove underline on hover */
color: white; /* Keep text white on hover */
}
</style>
<div class="border-container" id="phone-container">
<div class="scrollable-content">
<p class="message message-left"><strong>Paul</strong>
Yo Em’ ! Tu seras là à la soirée pour fêter le retour de Justin ? Finalement ce sera chez moi</p>
<p class="message message-left"><strong>Paul</strong>
Aller Em’, répond tu sais que c’était pas méchant la dernière fois</p>
<p class="message message-right"><strong>Emilie</strong>
Oui je serai là.</p>
<p class="message message-left"><strong>Paul</strong>
Super ! Mais pourquoi t’es aussi froide ? Tu me fais vraiment la tête pour ce qui s’est passé la dernière fois ? Aller chui désolé, reste cool on va bien s’amuser !</p>
<p class="message message-right"><strong>Emilie</strong>
J’arrive pas à croire que tu prennes ça autant à la légère Paul, t’es vraiment allé trop loin ! Il serait temps que tu t’en rendes compte.</p>
<p class="message message-left"><strong>Paul</strong>
Rho c’que tu peux être coincée ! Tu sais bien que chui du genre tactile, tu me connais depuis le temps !</p>
<p class="message message-right"><strong>Emilie</strong>
Eh bien justement ! Je croyais suffisamment te connaître pour que ce genre de choses n’arrive jamais, mais on dirait bien que je me suis trompée ! C’est du harcèlement sexuel ce que tu fais !</p>
<p class="message message-left"><strong>Paul</strong>
Tout de suite les grands mots, t’abuses ! Au contraire, tu devrais être flattée ! T’as vu l’effet que tu me fais ?</p>
<p class="message message-right"><strong>Emilie</strong>
Tu me dégoûtes, t’es un danger public. Ce sont les gens comme toi qui devraient se faire enfermer au plus vite ! Je viens à la soirée uniquement pour Lola et Justin mais je te préviens, au moindre geste suspect de ta part t’es un homme mort.</p>
<p class="message message-left"><strong>Paul</strong>
Ouais ouais je sais pfff</p>
<p class="message message-left"><strong>Paul</strong>
J’espère au moins que tu me laisseras m’amuser un peu sinon bonjour la soirée rasoir !</p>
<p class="message message-right"><strong>Emilie</strong>
Bien sûr, amuse-toi bien ! Et touche à un seul de mes cheveux ou de ceux de Lola et tu pourras regretter d’être né.</p>
<p class="message message-left"><strong>Paul</strong>
Bon, je vois que t’es pas d’humeur donc je vais te laisser. Essaie d’être agréable pendant la fête au moins, histoire que ça devienne pas gênant pour tout le monde.</p>
<p class="message message-right"><strong>Emilie</strong>
Ouais, c’est ça.</p>
</div>
</div>
<div class="return-button" onclick="goToPassage('Emilie choix tél2')"> Suite </div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\L’autopsie a révélée qu’il avait été drogué, en plus d’avoir une commotion cérébrale et les poumons remplis d’eau.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie choix tél11')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\J’aurais pu ! Mais je ne l’ai pas fait.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie choix tél12')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Je suis restée tout le long du karaoké avec Lola et je n’ai revu Paul qu’une fois mort. Certes, j’avais une bonne raison de lui en vouloir et je l’ai même menacé, mais vous savez comme les mots peuvent parfois dépasser la pensée !\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie choix tél13')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Dire à quelqu’un qu’on souhaite le tuer et passer à l’acte sont deux choses bien distinctes ! Je n’aurais pas pu faire ça, je vous l’assure.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie choix tél14')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Et puis, comme vous dites, il avait beaucoup bu. Il a peut-être glissé tout seul dans la piscine !\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie choix tél15')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Ça c’est à moi de le découvrir.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie25')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Vous m’avez affirmé tout à l’heure que vous et Paul étiez amis, pourquoi ne pas m’avoir parlé de cette dispute ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie choix tél3')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\…C’est vrai, j’aurais pu vous en parler, mais parler en mal des morts comme ça…\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie choix tél4')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Vous êtes au courant que ça renforce nos soupçons à votre égard ? D’autant plus que vous le menacez de mort...\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie choix tél5')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\...\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie choix tél6')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Expliquez-moi, ne rien dire n’arrange pas vos affaires.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie choix tél7')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Écoutez… la soirée est assez difficile comme ça… J’aimerais rentrer chez moi.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie choix tél8')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Au vu de la situation, vous comprenez bien que cela semble compromis. Vous auriez très bien pu vous absenter pendant votre soit disant karaoké pour retrouver Paul.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie choix tél9')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Vous disiez qu’il avait beaucoup bu, vous auriez pu profiter de son état d’ivresse pour le pousser dans la piscine. D’autant qu’il semblait vouloir s’amuser avec vous, il vous aurait suivi sans la moindre méfiance.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie choix tél10')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Hum… non… Je ne crois pas… Je n’ai pas vraiment fait attention.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie choix étrange1')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Essayez de vous rappeler sa façon d’être quand il vous a rejointes, sa façon de marcher, sa façon de se comporter, sa façon de parler peut-être aussi.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie choix étrange2')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Hum… Je ne sais pas… Peut-être qu’il était nerveux…\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie choix étrange3')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\En fait, maintenant que vous le dites, je crois me souvenir qu’il m’avait semblé agité. Il parlait plus fort que d’habitude. Enfin peut-être qu’avec la musique il ne s’entendait plus parler aussi. Mais il nous jetait des regards furtifs à Lola et moi, il n’arrêtait pas de tourner la tête dans tous les sens comme s’il cherchait quelque chose.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie choix étrange4')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Il ne tenait tellement pas en place que je lui ai même dit en rigolant qu’il semblait avoir commis un crime… A ce moment-là, il m’avait regardé avec des yeux ronds donc je me suis moquée de lui et on a rigolé tous les deux…\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie choix étrange5')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Je vois.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie choix étrange6')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Vous croyez que… Non, c’est impossible ! Justin est quelqu’un de sérieux et mesuré, il ne ferait jamais ça !\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie choix étrange7')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Je ne l’accuse en rien pour le moment. J’attends de collecter tous les éléments avant de tirer des conclusions. J’entends bien que vous ne le croyez pas capable de faire une telle chose. L’enquête nous en dira plus.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie20')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><<set $e to true>>
<!-- J'ai mis $l et $j to true pour que ça fonctionne, en temps normal on ne les change pas ici mais dans les autres interrogatoires -->
<<set $l to true>>
<<set $j to true>>
<style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #FFFFFF; /* Set text color to white */
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative; /* Add this for stacking context */
}
body::after {
content: ''; /* Required to generate the pseudo-element */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
z-index: -1; /* Place it behind the content */
}
.button-container {
text-align: center;
position: fixed; /* Fix position on screen */
left: 50%; /* Center horizontally */
transform: translateX(-50%);
bottom: 20px;
z-index: 1;
}
.return-button {
background-color: orange; /* Orange background */
padding: 0px 32px;
font-family: "VT323", monospace; /* Custom font */
font-weight: 400;
font-style: normal;
border: none;
cursor: pointer;
text-decoration: none;
border-radius: 4px;
display: inline-block;
transition: background-color 0.3s; /* Smooth transition for hover */
}
/* Remove default link hover behavior */
.return-button:hover {
background-color: rgba(255, 165, 0, 0.7);
text-decoration: none;
}
/* Style for the paragraph text */
.preuves {
color: white; /* Explicitly set text color */
font-family: "VT323", monospace; /* Ensure the font is consistent */
text-align: center;
font-size: 20px; /* Adjust font size if needed */
}
</style>
<div class="button-container">
<p class="preuves" id="preuves"> <<type 25ms>>L'entretien avec Emilie est maintenant terminé. Vous vous levez de votre chaise et tournez les talons pour vous diriger vers la porte.\<</type>></p>
<<if $l and $j>>
<div class="return-button">
[[Salle des portes|Fin interro]]
</div>
<<else>>
<div class="return-button">
[[Choix coupable|Salle des portes]]
</div>
<</if>>
</div><<set$varemilie to "true">>
<style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Bonjour, je suis l’inspecteur chargé de cette affaire. Vous êtes Émilie, n’est-ce pas ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie2')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Je suis désolé.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie11')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\…\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie12')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
#button-container {
position: fixed;
bottom: 7%;
left: 50%;
transform: translateX(-50%);
z-index: 100;
display: flex;
gap: 10px;
width: 70%;
}
#button-container button {
background-color: transparent;
border: 2px solid orange;
color: inherit;
font-family: "VT323", monospace;
font-weight: 400;
font-style: normal;
font-size: 20px;
padding: 10px 20px;
cursor: pointer;
flex: 1; /* Make each button take equal space in the container */
border-radius:4px;
}
#button-container button:hover {
background-color: orange;
color: white;
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box"><<type 25ms>>\Qu’est-ce que vous savez sur la relation qu’il y a entre Paul et…\<</type>>
</div>
</div>
<div id="button-container">
<button onclick="goToPassage('Emilie choix Lola')">Lola ?</button>
<button onclick="goToPassage('Emilie choix Justin')">Justin ?</button>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Je vois. Et quand avez-vous vu Paul pour la dernière fois ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie14')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Il me semble que c’était vers 23h… Dans ces eaux-là.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie15')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Et que vous êtes-vous dit ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie16')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Pas grand-chose, il parlait avec Lola dans la cuisine. Il avait l’air de passer une bonne soirée.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie17')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Il était un peu trop joyeux à mon goût, enfin il avait clairement bu plus d’un verre. Je sentais qu’il allait devenir lourd alors j’ai proposé à Lola d’aller dans le salon avec moi pour faire un karaoké, je sais que c’est loin d’être une des activités favorites de Paul donc il y avait peu de chances qu’il nous accompagne.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie18')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Quelques minutes après, Justin nous a rejointes. Il avait entendu la musique donc il était venu voir.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie19')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
#button-container {
position: fixed;
bottom: 7%;
left: 50%;
transform: translateX(-50%);
z-index: 100;
display: flex;
gap: 10px;
width: 70%;
}
#button-container button {
background-color: transparent;
border: 2px solid orange;
color: inherit;
font-family: "VT323", monospace;
font-weight: 400;
font-style: normal;
font-size: 20px;
padding: 10px 20px;
cursor: pointer;
flex: 1; /* Make each button take equal space in the container */
border-radius:4px;
}
#button-container button:hover {
background-color: orange;
color: white;
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
</div>
</div>
<div id="button-container">
<button onclick="goToPassage('Emilie choix étrange')">Et à ce moment-là, le comportement de Justin vous a-t-il paru étrange ?</button>
<button onclick="goToPassage('Emilie choix conv')">Et qu’avez-vous entendu de la conversation entre Paul et Lola ?</button>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Oui, c’est ça.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie3')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Et après ça alors, que s’est-il passé ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie21')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Eh bien… On s’amusait bien. Au bout d’un moment, Justin a demandé où était passé Paul. On lui a dit qu’il était encore dans la cuisine quand on l’a quitté.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie22')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\On a donc décidé d’aller le chercher tous les trois pour continuer la soirée avec lui. Mais... en arrivant dans la cuisine, on a vu que quelque chose flottait dans la piscine. On n’a pas tout de suite osé s’approcher parce que ce qui flottait était quand même gros !\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie23')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\On a fini par y aller tous ensemble et… en découvrant que c’était Paul… qu’il était mort… On a tout de suite appelé la police.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie24')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
body::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: -1;
}
.clickable-image {
position: absolute;
top: 35%;
cursor: pointer;
width: 20vw;
height: auto;
}
#phone-image {
left: 15%;
}
#handbag-image {
right: 15%;
}
#phone-image, #handbag-image {
border: 3px solid orange;
border-radius: 5px;
}
.scrollable-content p {
margin: 0;
padding: 2px 10px;
}
.border-container {
width: 18vw;
height: 36vw;
background: url('https://www.dropbox.com/scl/fi/y3uvphnjta7l16qnbdc5b/imagetest.png?rlkey=plcer5i216yxnd3edk9c7zru1&st=ah5irgct&raw=1') center center no-repeat;
background-size: contain;
padding: 20px;
display: flex;
align-items: flex-start;
justify-content: center;
transition: transform 0.6s ease, opacity 0.6s ease;
transform: scale(0);
opacity: 0;
visibility: hidden;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.letter {
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, 0);
opacity: 0;
width: 80px;
height: 100px;
background-image: url('https://www.dropbox.com/scl/fi/ofazhuxkv3g0jt28rfj08/Fichier-3.png?rlkey=7rayb9mi12xjavu5j6iei5945&st=f7fehv9l&raw=1');
background-size: contain;
background-repeat: no-repeat;
transition: all 1s ease-out;
}
#phone-image:hover, #handbag-image:hover {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
transform: scale(1.1);
transition: all 0.3s ease;
}
</style>
<p class="preuves" id="preuves"><<type 25ms>>Je vois. Je sais que c’est difficile pour vous mais, nos équipes ont fouillé…\<</type>></p>
<img src="https://www.dropbox.com/scl/fi/uljih67pox0fmkrjqrd1f/Group-2.png?rlkey=y5iir7cff7yzpj8f47zddgq5l&st=ywkd6seb&raw=1" alt="Phone" id="phone-image" class="clickable-image" onclick="goToPassage('Emilie choix tél1')">
<div id="handbag-container">
<img src="https://www.dropbox.com/scl/fi/epnq34y8w7urn6r99c47z/Group-1.png?rlkey=o66ufr08khc358flot3g5m5go&st=5ozao553&raw=1" alt="Handbag" id="handbag-image" class="clickable-image" onclick="goToPassage('Emilie choix sac1')">
<div class="letter" id="letter"></div>
<div class="letter-fullscreen" id="letter-fullscreen"></div>
</div>
<!-- Twine Story Code -->
<script src="https://cdn.jsdelivr.net/npm/twine-sugarcube@2.34.1/dist/twine.js"></script>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
body::after {
content: ''; /* Required to generate the pseudo-element */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
z-index: -1; /* Place it behind the content */
}
.clickable-image {
position: absolute;
top: 35%;
cursor: pointer;
width: 20vw; /* Make the image larger */
height: auto;
}
#phone-image {
left: 15%;
}
#handbag-image {
right: 15%;
}
#phone-image, #handbag-image {
border: 3px solid orange; /* Add a 5px solid red border */
border-radius: 5px;
}
.scrollable-content p {
margin: 0;
padding: 2px 10px;
}
.border-container {
width: 18vw; /* Phone container width */
height: 36vw; /* Phone container height */
background: url('https://www.dropbox.com/scl/fi/y3uvphnjta7l16qnbdc5b/imagetest.png?rlkey=plcer5i216yxnd3edk9c7zru1&st=ah5irgct&raw=1') center center no-repeat;
background-size: contain;
padding: 20px;
display: flex;
align-items: flex-start; /* Align the scrollable content to start below the header */
justify-content: center;
transition: transform 1s ease-in-out, opacity 1s ease-in-out, visibility 1s ease-in-out;
transform: scale(0);
opacity: 0;
visibility: hidden;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.6s ease, opacity 0.6s ease;
}
.scrollable-content {
margin-top: 40%;
width: 80%;
height: 70%;
overflow-y: auto;
font-family: Arial, sans-serif;
font-size: 14px;
display: flex;
flex-direction: column;
gap:0px;
-ms-overflow-style: none; /* For Internet Explorer and Edge */
scrollbar-width: none; /* For Firefox */
}
.scrollable-content::-webkit-scrollbar {
display: none; /* Hide scrollbar for modern browsers */
}
.message {
max-width: 70%;
padding: 10px;
border-radius: 15px;
line-height: 1.5;
color: #4C4C4C;
}
.message-left {
align-self: flex-start;
background-color: #E5E5E5;
border-top-left-radius: 0;
}
.message-right {
align-self: flex-end;
background-color: #DCF8C6;
border-top-right-radius: 0;
}
.letter {
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, 0);
opacity: 0;
width: 80px;
height: 100px;
background-image: url('https://www.dropbox.com/scl/fi/ofazhuxkv3g0jt28rfj08/Fichier-3.png?rlkey=7rayb9mi12xjavu5j6iei5945&st=f7fehv9l&raw=1');
background-size: contain;
background-repeat: no-repeat;
transition: all 1s ease-out;
}
.letter-fullscreen {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: url('https://www.dropbox.com/scl/fi/ofazhuxkv3g0jt28rfj08/Fichier-3.png?rlkey=7rayb9mi12xjavu5j6iei5945&st=f7fehv9l&raw=1');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 1000;
}
#phone-image:hover, #handbag-image:hover {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6); /* Add shadow when hovering over the phone image */
transform: scale(1.1); /* Slightly scale the image on hover */
transition: all 0.3s ease; /* Smooth transition */
}
</style>
<p class="preuves" id="preuves"> <<type 25ms>>Je vois. Je sais que c’est difficile pour vous mais, nos équipes ont fouillé…\<</type>></p>
<img src="https://www.dropbox.com/scl/fi/uljih67pox0fmkrjqrd1f/Group-2.png?rlkey=y5iir7cff7yzpj8f47zddgq5l&st=ywkd6seb&raw=1" alt="Phone" id="phone-image" class="clickable-image">
<div id="handbag-container">
<img src="https://www.dropbox.com/scl/fi/epnq34y8w7urn6r99c47z/Group-1.png?rlkey=o66ufr08khc358flot3g5m5go&st=5ozao553&raw=1" alt="Handbag" id="handbag-image" class="clickable-image">
<div class="letter" id="letter"></div>
<div class="letter-fullscreen" id="letter-fullscreen"></div>
</div>
<div class="border-container" id="phone-container">
<div class="scrollable-content">
<p class="message message-left"><strong>Paul</strong>
Yo Em’ ! Tu seras là à la soirée pour fêter le retour de Justin ? Finalement ce sera chez moi</p>
<p class="message message-left"><strong>Paul</strong>
Aller Em’, répond tu sais que c’était pas méchant la dernière fois</p>
<p class="message message-right"><strong>Emilie</strong>
Oui je serai là.</p>
<p class="message message-left"><strong>Paul</strong>
Super ! Mais pourquoi t’es aussi froide ? Tu me fais vraiment la tête pour ce qui s’est passé la dernière fois ? Aller chui désolé, reste cool on va bien s’amuser !</p>
<p class="message message-right"><strong>Emilie</strong>
J’arrive pas à croire que tu prennes ça autant à la légère Paul, t’es vraiment allé trop loin ! Il serait temps que tu t’en rendes compte.</p>
<p class="message message-left"><strong>Paul</strong>
Rho c’que tu peux être coincée ! Tu sais bien que chui du genre tactile, tu me connais depuis le temps !</p>
<p class="message message-right"><strong>Emilie</strong>
Eh bien justement ! Je croyais suffisamment te connaître pour que ce genre de choses n’arrive jamais, mais on dirait bien que je me suis trompée ! C’est du harcèlement sexuel ce que tu fais !</p>
<p class="message message-left"><strong>Paul</strong>
Tout de suite les grands mots, t’abuses ! Au contraire, tu devrais être flattée ! T’as vu l’effet que tu me fais ?</p>
<p class="message message-right"><strong>Emilie</strong>
Tu me dégoûtes, t’es un danger public. Ce sont les gens comme toi qui devraient se faire enfermer au plus vite ! Je viens à la soirée uniquement pour Lola et Justin mais je te préviens, au moindre geste suspect de ta part t’es un homme mort.</p>
<p class="message message-left"><strong>Paul</strong>
Ouais ouais je sais pfff</p>
<p class="message message-left"><strong>Paul</strong>
J’espère au moins que tu me laisseras m’amuser un peu sinon bonjour la soirée rasoir !</p>
<p class="message message-right"><strong>Emilie</strong>
Bien sûr, amuse-toi bien ! Et touche à un seul de mes cheveux ou de ceux de Lola et tu pourras regretter d’être né.</p>
<p class="message message-left"><strong>Paul</strong>
Bon, je vois que t’es pas d’humeur donc je vais te laisser. Essaie d’être agréable pendant la fête au moins, histoire que ça devienne pas gênant pour tout le monde.</p>
<p class="message message-right"><strong>Emilie</strong>
Ouais, c’est ça.</p>
</div>
</div>
<script>
const phoneImage = document.getElementById('phone-image');
const phoneContainer = document.getElementById('phone-container');
const handbagImage = document.getElementById('handbag-image');
const letter = document.getElementById('letter');
const letterFullscreen = document.getElementById('letter-fullscreen');
const nextPageLink = document.createElement('div');
const preuves = document.getElementById('preuves');
// Add the "Next Page" link to the DOM but keep it hidden initially
nextPageLink.className = 'next-page-link';
nextPageLink.style.display = 'none'; // Initially hidden
nextPageLink.innerHTML = '⮞';
nextPageLink.onclick = function() {
goToPassage(passageName); // Use the dynamic passageName
};
document.body.appendChild(nextPageLink);
let passageName = ''; // Variable to store the current page name
function hideElements() {
phoneImage.style.display = 'none';
handbagImage.style.display = 'none';
preuves.style.display = 'none';
}
phoneImage.addEventListener('click', function() {
hideElements();
phoneContainer.style.visibility = 'visible';
phoneContainer.style.transform = 'translate(-50%, -50%) scale(1)';
phoneContainer.style.opacity = '1';
// Set the passage name for the next page
passageName = 'Emilie choix tél2'; // You can change this to any specific page for phone
nextPageLink.style.display = 'block';
});
handbagImage.addEventListener('click', function() {
hideElements();
letter.style.opacity = '1';
letter.style.transform = 'translate(-50%, -200%) scale(1.5)';
setTimeout(() => {
letter.style.opacity = '0';
letterFullscreen.style.display = 'block';
}, 1000);
// Set the passage name for the next page
passageName = 'Emilie choix sac2'; // You can change this to any specific page for handbag
nextPageLink.style.display = 'block';
});
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Très bien, j’en ai fini avec vous. Merci d’avoir répondu à mes questions. Nous vous tiendrons informée pour la suite.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie26')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Vous pouvez rentrer chez vous, mais interdiction de quitter la ville. Nous vous surveillons. Essayez tout de même de passer une bonne nuit.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie27')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Merci inspecteur, je vais essayer oui…\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie fin')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Je suis désolé de vous demander ça mais je vais être obligé de vous poser des questions sur ce qu’il s’est passé ce soir.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie4')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Pouvez-vous m’expliquer un peu comment vous vous êtes tous retrouvés là ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie5')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Je... C’était une soirée, on était censés se retrouver tous les quatre chez Paul ce soir pour fêter le retour de Justin. Il travaille à l’étranger donc on ne le voit pas souvent.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie6')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\D’accord. Vous vous connaissez d’où tous les quatre ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie7')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\On s’est rencontrés au lycée. Lola était dans la même classe que moi, elle connaissait déjà Paul qui avait un an de plus que nous, et Justin est le frère de Lola.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie8')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Je vois. Quelle est votre relation avec Paul ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Emilie9')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\C’est un ami. On fait partie du même groupe de potes donc on se voit souvent. Avant à quatre quand Justin ne travaillait pas encore à l’étranger, puis jusqu’à… hum… Jusqu’à ce soir on se voyait régulièrement à trois avec Lola.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('Emilie10')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
body::after {
content: ''; /* Required to generate the pseudo-element */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
z-index: -1; /* Place it behind the content */
}
.button-container {
text-align: center;
}
.return-button {
background-color: orange; /* Orange background */
color: white;
padding: 15px 32px;
font-family: "VT323", monospace; /* Custom font */
font-weight: 400;
font-style: normal;
border: none;
cursor: pointer;
text-decoration: none;
border-radius: 4px;
display: inline-block;
margin-top: 20px;
transition: background-color 0.3s; /* Smooth transition for hover */
}
/* Remove default link hover behavior */
.return-button:hover {
background-color: rgba(255, 165, 0, 0.7); /* Orange with opacity */
text-decoration: none; /* Remove underline on hover */
color: white; /* Keep text white on hover */
}
</style>
<div class="button-container">
<p class="preuves" id="preuves"> Fin </p>
<div class="return-button" onclick="goToPassage('Merci')"> Suite</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/iixkoyr4xhi6ml3jeq48x/emilie-y-o-b-o.gif?rlkey=j67v3diqsnfieqi2hzdti96a1&st=lswz4ti3&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name nameemilie">Emilie</div>
<div class="dialogue-box">
<<type 25ms>>\Attendez… Quoi ? Non… non… LÂCHEZ-MOI !!! C’est une blague… haha… N’importe quoi c’est N’IMPORTE QUOI !!!\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link nameemilie" onclick="goToPassage('The end')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\*écarquille les yeux* …\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Fin Justin1')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\Je… *referme la bouche*\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('The end')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namelola">Lola</div>
<div class="dialogue-box"><<type 25ms>>\*s’effondre en sanglot* Non… ce n’est pas possible… Non s’il vous plaît laissez-moi rentrer chez moi j’en peux plus je veux partir ! *pleure* Laissez-moi je vous en supplie… s’il vous plaît…\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namelola" onclick="goToPassage('The end')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/k6st02olr0ukw9b55ghdm/fonddd.png?rlkey=jjopsox2zu0rcockhjumwst7m&st=egsv8xtq&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
body::after {
content: ''; /* Required to generate the pseudo-element */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
z-index: -1; /* Place it behind the content */
}
.clickable-image {
position: absolute;
top: 35%;
cursor: pointer;
width: 20vw; /* Make the image larger */
height: auto;
}
#phone-image {
left: 10%;
}
#justin {
left: calc(50% - 10vw);
}
#handbag-image {
right: 10%;
}
#phone-image, #handbag-image, #justin {
border: 3px solid orange; /* Add a 5px solid red border */
border-radius: 5px;
}
#phone-image:hover, #handbag-image:hover,#justin:hover {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6); /* Add shadow when hovering over the phone image */
transform: scale(1.1); /* Slightly scale the image on hover */
transition: all 0.3s ease; /* Smooth transition */
}
</style>
<p class="preuves" id="preuves"> <<type 25ms>>Vous avez interrogé les trois suspects de cette affaire, bon travail. Il vous faut à présent désigner un coupable. Prenez le temps de la réflexion, cette décision découle entièrement de votre responsabilité. Si vous vous sentez prêt.e, qui pensez-vous être le coupable?\<</type>></p>
<img src="https://www.dropbox.com/scl/fi/r4fl045h1sd4eqdfe2q01/Frame-3.png?rlkey=j3ggrk9174xd4fip7ihk8b82r&st=olsx7e26&raw=1" alt="Phone" id="phone-image" class="clickable-image" onclick="goToPassage('Fin Lola')">
<img src="https://www.dropbox.com/scl/fi/uztb43kxj903kq10rjsz5/Frame-2.png?rlkey=btfjvv688hfpm6fx6bsdd8rhw&st=9s64wyau&raw=1" alt="Phone" id="justin" class="clickable-image" onclick="goToPassage('Fin Justin')">
<div id="handbag-container">
<img src="https://www.dropbox.com/scl/fi/6naoclyex1ckea6mazf8r/Frame-1.png?rlkey=petdrcu3uhnkwdnw4k1qadl8d&st=lb6skyyo&raw=1" alt="Handbag" id="handbag-image" class="clickable-image" onclick="goToPassage('Fin Emilie')">
<div class="letter" id="letter"></div>
<div class="letter-fullscreen" id="letter-fullscreen"></div>
</div>
<script>
// Function to navigate to a specific passage
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\... Je ne comprends pas.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin carnet1')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\(Je crois que je me suis trompé…)\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('dossier')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\C’est assez froid entre ces deux là… Émilie est au courant qu’il a déjà couché avec Lola. Et elle n’a pas l’air d’apprécier leur relation. Et je suis complètement d’accord !\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin choix Emilie1')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Pourquoi ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Justin choix Emilie2')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\Paul aimait bien s’amuser… Il n’était jamais sérieux avec les filles. Ce n’est pas le genre d’homme fait pour ma sœur.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin choix Emilie3')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Émilie avait donc de la rancune envers Paul !\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Justin choix Emilie4')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\Oui… surtout que Lola n’arrêtait pas de parler de Paul tous les jours, je crois qu’elle l’aimait vraiment…\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin14')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\Lola est ma sœur… Elle et Paul s’entendaient bien. Elle l’aimait beaucoup. Même si j’ai toujours su que c’était pas un gars pour elle.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin choix Lola1')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Pourquoi ça ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Justin choix Lola2')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\Paul aimait bien s’amuser… Il n’était jamais sérieux avec les filles. Ce n’est pas le genre d’homme fait pour ma sœur.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin14')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\N-n-nnnnnon je VOIS pas du TOUT de quoi vous parlez ! Émilie est une amie ! J-Jamais je pourrais la voir autrement.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin choix amoureux1')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\*Justin sert son carnet de plus en plus fort*\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin choix amoureux2')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\Je non… Je la protège !\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin choix amoureux11')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\(Je crois que j’ai compris…)\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Justin choix amoureux12')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Paul l’avait deviné n’est-ce pas ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Justin choix amoureux13')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\...\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin choix amoureux14')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Et lors de votre dispute au sujet de Lola, il vous a parlé d’Émilie. En particulier de votre secret envers Émilie ! Ce secret que vous gardez au fond de vous depuis des années.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Justin choix amoureux15')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\C’est ce qui vous a mis en colère et vous l’avez...\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Justin choix amoureux16')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\Non !… C’est vrai, je stalke Émilie… et Paul me l’a reproché ! Pour lui j’étais en mauvaise posture pour parler de relations à cause… de ça…\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin choix amoureux17')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\Mais je ne l’ai pas tué ! Il est parti ensuite parler avec les filles ! Et c’est la dernière fois que je l’ai vu vivant… Vous devez me croire ! Je suis un stalker, mais pas un tueur !\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin fin')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Alors pourquoi vous vous acharnez sur ce carnet ? Que diriez-vous de l’ouvrir ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Justin choix amoureux3')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
#button-container {
position: fixed;
bottom: 7%;
left: 50%;
transform: translateX(-50%);
z-index: 100;
display: flex;
gap: 10px;
width: 70%;
}
#button-container button {
background-color: transparent;
border: 2px solid orange;
color: inherit;
font-family: "VT323", monospace;
font-weight: 400;
font-style: normal;
font-size: 20px;
padding: 10px 20px;
cursor: pointer;
flex: 1; /* Make each button take equal space in the container */
border-radius:4px;
}
#button-container button:hover {
background-color: orange;
color: white;
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\Argh…\<</type>>
<div id="button-container">
<button onclick="goToPassage('carnet2')">Montrer le carnet </button>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\(Dans le carnet il y a des tas de notes écrites sur une mystérieuse E. On y voit sa nourriture préférée, ses fréquentations, l’heure à laquelle elle va à l’école…)\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Justin choix amoureux5')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\C’est quoi tout ça…\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Justin choix amoureux6')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\…\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin choix amoureux7')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Ce sont des notes sur… Émilie !\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Justin choix amoureux8')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\Je…\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin choix amoureux9')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Vous la stalkez ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Justin choix amoureux10')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\Je crois pas qu’Émilie l’apprécie beaucoup. Depuis qu’il a couché avec Lola…\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin choix déteste1')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Est-ce que ça a affecté Paul ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Justin choix déteste2')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\Non ça l’amusait de courir après Émilie, il avait envie qu’elle tombe dans ses bras. Je ne crois pas que ça fonctionnait.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin choix déteste3')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\Elle le trouvait plutôt lourd…\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin choix déteste4')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Est-ce que Paul aurait pu faire du mal à Émilie durant la soirée ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Justin choix déteste5')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\Je ne crois pas mais Émilie vous en dira plus j’imagine…\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin fin')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\*Justin sert son carnet de plus en plus fort*\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin choix rapport1')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Émilie est une gentille fille n’est-ce pas, qui est-elle pour vous ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Justin choix rapport2')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\O-oui… c’est la meilleure amie de Lola.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin choix rapport3')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\(Il semble perturbé quand je parle d’elle)\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Justin choix rapport4')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Vous m’avez dit que Paul adorait draguer et avoir de nouvelles conquêtes… Est-ce qu’il avait Émilie dans le viseur ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Justin choix rapport5')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\…Même s’il avait des sentiments à son égard, Paul n’est pas un homme bien. Il fait pleurer toutes les filles qu’il aborde !\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin choix rapport6')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
#button-container {
position: fixed;
bottom: 7%;
left: 50%;
transform: translateX(-50%);
z-index: 100;
display: flex;
gap: 10px;
width: 70%;
}
#button-container button {
background-color: transparent;
border: 2px solid orange;
color: inherit;
font-family: "VT323", monospace;
font-weight: 400;
font-style: normal;
font-size: 20px;
padding: 10px 20px;
cursor: pointer;
flex: 1; /* Make each button take equal space in the container */
border-radius:4px;
}
#button-container button:hover {
background-color: orange;
color: white;
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box"><<type 25ms>>\(Je suis sûr que je tiens quelque chose, je dois trouver un lien entre Émilie et cette conversation avec Paul)\<</type>>
</div>
</div>
<div id="button-container">
<button onclick="goToPassage('Justin choix amoureux')">Êtes-vous amoureux d’Émilie ?</button>
<button onclick="goToPassage('Justin choix déteste')">Émilie déteste-t-elle Paul ?</button>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\On ne s’est jamais battu... même si parfois l’envie ne manquait pas.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin choix violent1')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\On était en colère l’un contre l’autre…\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin choix violent2')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\On a commencé à s’insulter et se dire plein de choses…\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin choix violent3')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\Ça me fait mal de savoir qu’il est mort… et qu’on était en mauvais termes.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin choix violent4')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\Il est sorti de la chambre en colère. Je crois qu’il est allé voir les filles. Ensuite je suis resté dans la chambre... je ne voulais plus parler à personne.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin choix violent5')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\C’était vers quelle heure ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Justin choix violent6')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\Il était 22h passées...\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin choix violent7')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Vous n’êtes pas ressorti ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Justin choix violent8')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\Si, 5-10 min plus tard. J’ai entendu de la musique dans le salon... Donc j’ai suivi le mouvement et j’ai rejoint les filles qui faisaient un karaoké…\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin choix violent9')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\On s’est bien amusé ! Et un peu plus tard avec les filles on s’est dit qu’il faudrait qu’on cherche Paul... Et c’est là qu’on l’a trouvé tous les trois dans la piscine.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin fin')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><<set $j to true>>
<style>
body {
background-image: url('https://uc1d0833b23b51e7c7fd81139779.previews.dropboxusercontent.com/p/thumb/ACdTVt9QeSZcEz367-wMPq58_hQxpO3vJCqfOfNCErEmrN-KIzr2BTpz8g5m2GnO5dR5V1b4JDwWUNBlCAyM1yPbz0UGNeaiA05DNanwqvU6QWOc52WmoSY_Hcs7m0l2tgaLexq3KWdOqJztvktYlZqjdE2wkOJ-dwDphXb_cxxx5Gt7BDp2LV2jHPeZIIH_gNeVWjyCmSnRWeqiDLy2vivteiSGYHfiET7kjViqH0cYhXwF5W2MAkPOU86CzqRoDIcT7WlBAUsK7QG6PJU8pGYfY-qGUsbbHdIcd_5XhBk-g3QgpJ6UHZ_ZmTV2EZDPCUWQyJg4_DE6Blr3muLlseX5JISQF5P8DirLf5evuUP4Jg/p.gif');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #FFFFFF; /* Set text color to white */
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative; /* Add this for stacking context */
}
body::after {
content: ''; /* Required to generate the pseudo-element */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
z-index: -1; /* Place it behind the content */
}
.button-container {
text-align: center;
position: fixed; /* Fix position on screen */
left: 50%; /* Center horizontally */
transform: translateX(-50%);
bottom: 20px;
z-index: 1;
}
.return-button {
background-color: orange; /* Orange background */
padding: 0px 32px;
font-family: "VT323", monospace; /* Custom font */
font-weight: 400;
font-style: normal;
border: none;
cursor: pointer;
text-decoration: none;
border-radius: 4px;
display: inline-block;
transition: background-color 0.3s; /* Smooth transition for hover */
}
/* Remove default link hover behavior */
.return-button:hover {
background-color: rgba(255, 165, 0, 0.7);
text-decoration: none;
}
/* Style for the paragraph text */
.preuves {
color: white; /* Explicitly set text color */
font-family: "VT323", monospace; /* Ensure the font is consistent */
text-align: center;
font-size: 20px; /* Adjust font size if needed */
}
</style>
<div class="button-container">
<p class="preuves" id="preuves"><<type 25ms>>L'entretien avec Justin est maintenant terminé. Vous vous levez de votre chaise et tournez les talons pour vous diriger vers la porte.\<</type>></p>
<<if $l and $j>>
<div class="return-button">
[[Salle des portes|Fin interro]]
</div>
<<else>>
<div class="return-button">
[[Salle des portes|Salle des portes]]
</div>
<</if>>
</div><<set$varjustin to "true">>
<style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Bonjour je suis l’inspecteur chargé de cette affaire vous êtes Justin c’est bien ça ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Justin2')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\On était trois. Émilie, Lola qui est ma sœur, et moi-même.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin11')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\D’accord et vous êtes arrivés vers quelle heure à la soirée ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Justin12')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\On est arrivés vers 21h.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin13')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
#button-container {
position: fixed;
bottom: 7%;
left: 50%;
transform: translateX(-50%);
z-index: 100;
display: flex;
gap: 10px;
width: 70%;
}
#button-container button {
background-color: transparent;
border: 2px solid orange;
color: inherit;
font-family: "VT323", monospace;
font-weight: 400;
font-style: normal;
font-size: 20px;
padding: 10px 20px;
cursor: pointer;
flex: 1; /* Make each button take equal space in the container */
border-radius:4px;
}
#button-container button:hover {
background-color: orange;
color: white;
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box"><<type 25ms>>\D’accord je note. Parlez-moi de la relation qu’il y a entre Paul et...\<</type>>
</div>
</div>
<div id="button-container">
<button onclick="goToPassage('Justin choix Lola')">Lola</button>
<button onclick="goToPassage('Justin choix Emilie')">Émilie</button>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Est-ce que Paul connaissait les sentiments de Lola à son égard ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Justin15')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\On ne parle pas de ce genre de choses…\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin16')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
body::after {
content: ''; /* Required to generate the pseudo-element */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
z-index: -1; /* Place it behind the content */
}
.clickable-image {
position: absolute;
top: 35%;
cursor: pointer;
width: 20vw; /* Make the image larger */
height: auto;
}
#phone-image {
left: 15%;
}
#handbag-image {
right: 15%;
}
#phone-image, #handbag-image {
border: 3px solid orange; /* Add a 5px solid red border */
border-radius: 5px;
}
#phone-image:hover, #handbag-image:hover {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6); /* Add shadow when hovering over the phone image */
transform: scale(1.1); /* Slightly scale the image on hover */
transition: all 0.3s ease; /* Smooth transition */
}
</style>
<p class="preuves" id="preuves"> <<type 25ms>>(C’est bizarre quelque chose cloche)
(Le confronter avec...)\<</type>></p>
<img src="https://www.dropbox.com/scl/fi/t2b3j4eabpuppybi13i0y/Group-3-2.png?rlkey=rrg1ns2nlw41df8dqu17q1vfu&st=bgpqrbal&raw=1" alt="Phone" id="phone-image" class="clickable-image" onclick="goToPassage('dossier')">
<div id="handbag-container">
<img src="https://www.dropbox.com/scl/fi/mlbolemfwds44qnhstlt6/Group-4.png?rlkey=kxx7bzco63atlxdoqzxyo5j69&st=kjzkfsmo&raw=1" alt="Handbag" id="handbag-image" class="clickable-image" onclick="goToPassage('carnet')">
<div class="letter" id="letter"></div>
<div class="letter-fullscreen" id="letter-fullscreen"></div>
</div>
<!-- Twine Story Code -->
<script src="https://cdn.jsdelivr.net/npm/twine-sugarcube@2.34.1/dist/twine.js"></script>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\...Argh\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin18')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\C’est vrai… il le savait. Et je lui en ai parlé ce soir là.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin19')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Comment l’a-t-il pris ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Justin20')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\O-Oui…\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin3')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\Il le savait déjà… depuis que… Lola et lui ont couché ensemble… Il savait que Lola craquait pour lui. Et il aimait bien ça.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin21')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\Il jouait avec les sentiments de ma sœur... Et ce soir là je l’ai confronté.
Je lui ai dis que c’était pas bien, que Lola allait en souffrir.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin22')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\C’était juste une petite dispute rien de bien méchant... Il m’a dit que c’était pas mes affaires et la discussion s’est arrêtée là.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin23')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
#button-container {
position: fixed;
bottom: 7%;
left: 50%;
transform: translateX(-50%);
z-index: 100;
display: flex;
gap: 10px;
width: 70%;
}
#button-container button {
background-color: transparent;
border: 2px solid orange;
color: inherit;
font-family: "VT323", monospace;
font-weight: 400;
font-style: normal;
font-size: 20px;
padding: 10px 20px;
cursor: pointer;
flex: 1; /* Make each button take equal space in the container */
border-radius:4px;
}
#button-container button:hover {
background-color: orange;
color: white;
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box"><<type 25ms>>\La discussion s’est arrêtée là ? Vous avez abandonné ? Pourquoi ? Cela n’a pas de sens !\<</type>>
</div>
</div>
<div id="button-container">
<button onclick="goToPassage('Justin choix violent')">Est-ce que Paul est devenu violent ?</button>
<button onclick="goToPassage('Justin choix rapport')">Est-ce en rapport avec Émilie ?</button>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Je suis là pour vous aider donc vous pouvez être 100 % honnête à mon égard.
Donc quand avez-vous vu Paul pour la dernière fois ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Justin4')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\...C’était à la soirée. Il nous avait invité Émilie, Lola et moi. C’était censé être une fête amusante. Mais ça a dérapé…\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin5')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\A cause de ce qui est arrivé à Paul ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Justin6')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\Oui… C’était mon meilleur ami, on se disait tout sur tout, je suis encore sous le choc de ce qui lui est arrivé. Je m’en remets pas.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin7')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\C’est compréhensible… Dites-moi, à quelle heure s’est déroulée la soirée ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Justin8')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namejustin">Justin</div>
<div class="dialogue-box">
<<type 25ms>>\J’ai rejoint Émilie en bas de chez-elle pour aller tous ensemble en voiture chez Paul.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namejustin" onclick="goToPassage('Justin9')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Quand vous dites tous ensemble, vous parlez d’Émilie et vous ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Justin10')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
body::after {
content: ''; /* Required to generate the pseudo-element */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
z-index: -1; /* Place it behind the content */
}
.clickable-image {
position: absolute;
top: 35%;
cursor: pointer;
width: 20vw; /* Make the image larger */
height: auto;
}
#phone-image {
left: 15%;
}
#handbag-image {
right: 15%;
}
#phone-image, #handbag-image {
border: 3px solid orange; /* Add a 5px solid red border */
border-radius: 5px;
}
#phone-popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0); /* Initially hidden */
opacity: 0;
visibility: hidden;
transform: translate(-50%, -50%) scale(0); /* Keep the image centered */
transition: transform 0.6s ease, opacity 0.6s ease;
}
#phone-image:hover, #handbag-image:hover {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6); /* Add shadow when hovering over the phone image */
transform: scale(1.1); /* Slightly scale the image on hover */
transition: all 0.3s ease; /* Smooth transition */
}
</style>
<p class="preuves" id="preuves"> <<type 25ms>>L'entretien avec Lola est maintenant terminé. Avant de quitter la salle d'interrogatoire vous avez accès à une des deux preuves disponibles :\<</type>></p>
<img src="https://www.dropbox.com/scl/fi/se9readhnfybp76vrlm36/Group-5-1.png?rlkey=ti89hzjq4srdjl3i1a309iyn4&st=elyth8ve&raw=1" alt="Phone" id="phone-image" class="clickable-image" onclick="goToPassage('voicenote')">
<div id="handbag-container">
<img src="https://www.dropbox.com/scl/fi/nvzbnsozhjmvo254hdnx6/Group-6-1.png?rlkey=6kdtds1idzioarrukfl456py5&st=uyifqoel&raw=1" alt="Handbag" id="handbag-image" class="clickable-image" onclick="goToPassage('notepad')">
<div class="letter" id="letter"></div>
<div class="letter-fullscreen" id="letter-fullscreen"></div>
</div>
<!-- Twine Story Code -->
<script src="https://cdn.jsdelivr.net/npm/twine-sugarcube@2.34.1/dist/twine.js"></script>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><<set $l to true>>
<style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #FFFFFF; /* Set text color to white */
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative; /* Add this for stacking context */
}
body::after {
content: ''; /* Required to generate the pseudo-element */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
z-index: -1; /* Place it behind the content */
}
.button-container {
text-align: center;
position: fixed; /* Fix position on screen */
left: 50%; /* Center horizontally */
transform: translateX(-50%);
bottom: 20px;
z-index: 1;
}
.return-button {
background-color: orange; /* Orange background */
padding: 0px 32px;
font-family: "VT323", monospace; /* Custom font */
font-weight: 400;
font-style: normal;
border: none;
cursor: pointer;
text-decoration: none;
border-radius: 4px;
display: inline-block;
transition: background-color 0.3s; /* Smooth transition for hover */
}
/* Remove default link hover behavior */
.return-button:hover {
background-color: rgba(255, 165, 0, 0.7);
text-decoration: none;
}
/* Style for the paragraph text */
.preuves {
color: white; /* Explicitly set text color */
font-family: "VT323", monospace; /* Ensure the font is consistent */
text-align: center;
font-size: 20px; /* Adjust font size if needed */
}
</style>
<div class="button-container">
<p class="preuves" id="preuves"> <<type 25ms>>L'entretien avec Lola est maintenant terminé. Vous vous levez de votre chaise et tournez les talons pour vous diriger vers la porte.\<</type>></p>
<<if $e and $j>>
<div class="return-button">
[[Choix coupable|Fin interro]]
</div>
<<else>>
<div class="return-button">
[[Salle des portes|Salle des portes]]
</div>
<</if>>
</div><<set$varlola to "true">>
<style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Bonjour Lola, je suis l’inspecteur chargé de cette affaire.
Je pense que vous savez pourquoi vous êtes ici maintenant, je vous épargne les explications. Comme nous le savons tous les deux, Paul a été retrouvé mort dans la piscine. Mais revenons un peu en arrière. Pouvez-vous me parler de cette soirée ? Vous étiez tous réunis. Y avait-il une raison particulière à cela ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Lola2')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box"><<type 25ms>>\Bon… je comprends. Et que pensez-vous de la relation entre votre frère et Paul, puisque nous avons surtout parlé d’Émilie ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Lola11')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namelola">Lola</div>
<div class="dialogue-box"><<type 25ms>>\Ils sont de bons amis, Paul était vraiment excité de retrouver Justin et de le revoir après un moment.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Lola12')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box"><<type 25ms>>\Les avez-vous déjà vus se disputer ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Lola13')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namelola">Lola</div>
<div class="dialogue-box"><<type 25ms>>\Je ne suis pas sûre, sans doute, oui, des disputes basiques entre amis, parfois ça finit par des rires et ils oublient, parfois ils ne se parlent pas pendant un ou deux jours, et puis tout revient à la normale.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Lola14')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box"><<type 25ms>>\Et cette nuit-là, ils allaient bien ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Lola15')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namelola">Lola</div>
<div class="dialogue-box"><<type 25ms>>\Oui… mais à la fin de la soirée, quand on était tous assis à discuter, j'ai remarqué des regards nerveux de mon frère vers Paul. Comme nous étions tous ensemble, je ne pouvais pas lui demander à ce moment-là. Mais probablement rien de sérieux.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Lola16')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box"><<type 25ms>>\Nous avons réussi à déverrouiller le téléphone de Paul, qui avait un mot de passe... regardez ça.
L'inspecteur montre à Lola des photos qui immortalisent une nuit qu'elle a passé avec Paul.
Eh bien, je pense que nous avons raté quelque chose dans l’histoire. Revenons au moment où vous m’avez dit que Paul et vous étiez "juste amis", car les photos que j’ai sous les yeux ne semblent pas montrer ça.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Lola17')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namelola">Lola</div>
<div class="dialogue-box"><<type 25ms>>\Euh… ce n'est rien… c'était une erreur… juste une nuit… rien d’important.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Lola18')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
#button-container {
position: fixed;
bottom: 7%;
left: 50%;
transform: translateX(-50%);
z-index: 100;
display: flex;
gap: 10px;
width: 70%;
}
#button-container button {
background-color: transparent;
border: 2px solid orange;
color: inherit;
font-family: "VT323", monospace;
font-weight: 400;
font-style: normal;
font-size: 20px;
padding: 10px 20px;
cursor: pointer;
flex: 1; /* Make each button take equal space in the container */
border-radius: 4px;
}
#button-container button:hover {
background-color: orange;
color: white;
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box"><<type 25ms>>\Rien ? Je dois dire que clairement, ce n’est pas une relation exclusivement amicale.\<</type>></div>
</div>
<div id="button-container">
<button onclick="goToPassage('Choix 3 : autre ?')">Quelqu'un d’autre était au courant de cette relation ?</button>
<button onclick="goToPassage('Choix 4 : Relation Paul ?')">Quelle est la « vraie » relation entre Paul et toi ?</button>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box"><<type 25ms>>Donc, malgré les photos entre Paul et vous, c'est un peu étrange que les disputes concernent principalement Paul et Émilie ou Justin et Paul, et que vous soyez très calme avec tout ce qui concerne Paul, non ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Lola20')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namelola">Lola</div>
<div class="dialogue-box"><<type 25ms>>\Nous sommes amis depuis longtemps maintenant, nous avons l'habitude de traîner ensemble, soit chez l’un d’entre nous, soit ailleurs. Et cette nuit-là, nous célébrions le retour de Justin, c'est pour cela que nous nous étions mis d'accord il y a quelques semaines pour nous retrouver. Ça faisait un moment que nous n'avions pas passé de temps ensemble à quatre, depuis que Justin était parti à l’étranger.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namelola" onclick="goToPassage('Lola3')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namelola">Lola</div>
<div class="dialogue-box "><<type 25ms>>Ce n’est pas ça et... nous étions sur la même longueur d'onde concernant ce sujet.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Lola21')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box"><<type 25ms>>Qui a trouvé Paul en premier ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Lola22')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namelola">Lola</div>
<div class="dialogue-box"><<type 25ms>>Je ne pense pas pouvoir bien me souvenir. Tout ce dont je me souviens, c’est qu’on était tous les trois dans le salon à faire notre karaoké depuis un petit bout de temps, quand on s’est rendu compte que Paul n’était pas là. Nous nous sommes mis à sa recherche et c’est là que nous avons retrouvé son corps inerte dans le piscine…\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Lola avant fin')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box"><<type 25ms>>\Et d'habitude, il n’y a que vous quatre ou bien il y a parfois d'autres personnes ?
Quelqu’un d’autre a-t-il été invité ce soir-là, à part vous quatre ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Lola4')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namelola">Lola</div>
<div class="dialogue-box"><<type 25ms>>\Euh... Non, juste nous quatre. C'est notre rituel. Parfois, nous sortons avec d'autres amis, mais comme c'était une soirée spéciale pour nous retrouver après un moment, on voulait que ce soit une réunion entre nous, juste les proches.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namelola" onclick="goToPassage('Lola5')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box"><<type 25ms>>\Je vois que vous êtes très proches les uns des autres, c'est étrange que l'un de vous ne soit maintenant plus des nôtres... Avez-vous remarqué une quelconque tension entre deux personnes du groupe ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Lola6')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namelola">Lola</div>
<div class="dialogue-box"><<type 25ms>>\Je ne pense pas, je crois que nous sommes tous proches et honnêtes les uns envers les autres… mais, euh…\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link namelola" onclick="goToPassage('Lola7')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box"><<type 25ms>>\Mais ?\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Lola8')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name namelola">Lola</div>
<div class="dialogue-box"><<type 25ms>>\J'ai récemment découvert que Paul avait un crush sur Émilie et qu'il essayait de se rapprocher d'elle, pas seulement en tant qu'ami. Mais, d’après ce que j’ai compris, elle le rejetait constamment.\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link " onclick="goToPassage('Lola9')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
#button-container {
position: fixed;
bottom: 7%;
left: 50%;
transform: translateX(-50%);
z-index: 100;
display: flex;
gap: 10px;
width: 70%;
}
#button-container button {
background-color: transparent;
border: 2px solid orange;
color: inherit;
font-family: "VT323", monospace;
font-weight: 400;
font-style: normal;
font-size: 20px;
padding: 10px 20px;
cursor: pointer;
flex: 1; /* Make each button take equal space in the container */
border-radius:4px;
}
#button-container button:hover {
background-color: orange;
color: white;
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box"><<type 25ms>>\Seulement Émilie, hein ? J'ai entendu dire qu'il y avait aussi une dispute entre toi et Paul… alors…\<</type>>
</div>
</div>
<div id="button-container">
<button onclick="goToPassage('Choix 1 : Blessure Paul ?')">La dispute en est-elle venue aux mains, entraînant la blessure à la tête de Paul ?</button>
<button onclick="goToPassage('Choix 2 : Raisons dispute ?')">Quelles étaient les raisons précises de votre dispute ?</button>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
body::after {
content: ''; /* Required to generate the pseudo-element */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
z-index: -1; /* Place it behind the content */
}
.button-container {
text-align: center;
}
.return-button {
background-color: orange; /* Orange background */
color: white;
padding: 15px 32px;
font-family: "VT323", monospace; /* Custom font */
font-weight: 400;
font-style: normal;
border: none;
cursor: pointer;
text-decoration: none;
border-radius: 4px;
display: inline-block;
margin-top: 20px;
transition: background-color 0.3s; /* Smooth transition for hover */
}
/* Remove default link hover behavior */
.return-button:hover {
background-color: rgba(255, 165, 0, 0.7); /* Orange with opacity */
text-decoration: none; /* Remove underline on hover */
color: white; /* Keep text white on hover */
}
</style>
<div class="button-container">
<p class="preuves" id="preuves"> <<type 25ms>>\
Merci d’avoir joué !
\<</type>> </p>
</div>
<div class="return-button" onclick="goToPassage('Salle des portes')"> Recommencer l'enquête</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Alors que dites-vous de ça !!\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Justin carnet')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
background-attachment: fixed; /* Keeps the background image in place as the page scrolls */
}
</style>
<div class="dialogue-container">
<div class="character-name">Detective</div>
<div class="dialogue-box">
<<type 25ms>>\Pourtant vous m’avez affirmé que vous et Justin étiez meilleurs amis et que vous vous confiiez tout... C’est étrange que le sujet de cette relation n’ait pas été mis sur la table !\<</type>>
<!-- Link inside the dialogue box -->
<div class="next-page-link" onclick="goToPassage('Justin17')"> ⮞</div>
</div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/k6st02olr0ukw9b55ghdm/fonddd.png?rlkey=jjopsox2zu0rcockhjumwst7m&st=egsv8xtq&raw=1');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh;
margin: 0;
overflow:hidden;
}
</style>
<p class="question_page1">Qui souhaitez-vous <span class="interroger">interroger?</span></p>
<!-- Door 1: Link to passage "d1" -->
<div class="door door-1" onclick="goToPassage('Justin1')"></div>
<!-- Door 2: Link to passage "d2" -->
<div class="door door-2" onclick="goToPassage('Lola1')"></div>
<!-- Door 3: Link to passage "d3" -->
<div class="door door-3" onclick="goToPassage('Emilie1')"></div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script>
<<set $route1Complete to false>>
<<set $route2Complete to false>>
<<set $route3Complete to false>><<set $l to false>>
<<set $e to false>>
<<set $j to false>><style>
body {
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
body::after {
content: ''; /* Required to generate the pseudo-element */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
z-index: -1; /* Place it behind the content */
}
.button-container {
text-align: center;
}
.return-button {
background-color: orange; /* Orange background */
color: white;
padding: 15px 32px;
font-family: "VT323", monospace; /* Custom font */
font-weight: 400;
font-style: normal;
border: none;
cursor: pointer;
text-decoration: none;
border-radius: 4px;
display: inline-block;
margin-top: 20px;
transition: background-color 0.3s; /* Smooth transition for hover */
}
/* Remove default link hover behavior */
.return-button:hover {
background-color: rgba(255, 165, 0, 0.7); /* Orange with opacity */
text-decoration: none; /* Remove underline on hover */
color: white; /* Keep text white on hover */
}
.preuves{
font-size: 18px;
}
</style>
<div class="button-container">
<p class="preuves" id="preuves"><<type 25ms>>\
Vous êtes appelé.e en tant que détective suite au décès de Paul Padeubold.
Ce dernier a été retrouvé mort dans la piscine de Justin, un ami de longue date, chez qui il était avec deux autres amies le soir du drame, Lola et Emilie, pour une soirée de retrouvailles entre amis.
L’autopsie révèle qu’il est mort par noyade, mais également qu’on lui a asséné un coup à la tête et administré une quantité importante de diphenhydramine, un antihistaminique qui peut provoquer une forte somnolence.
Vous arrivez au commissariat de police pour interroger les trois suspects qui étaient sur place le soir du crime.
Réussirez-vous à résoudre le mystère de la mort de Paul Padeubold ?
Arriverez-vous à déceler la vérité ?
L’enquête est à présent entre vos mains...
\<</type>></p>
<div class="return-button" onclick="goToPassage('Salle des portes')"> Commencer l'enquête </div>
</div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><!-- Rend le bouton orange et plus visuel -->
<style>
.return-button {
background-color: orange; /* Orange background */
color: white;
padding: 15px 32px;
font-family: "VT323", monospace; /* Custom font */
font-weight: 400;
font-style: normal;
border: none;
cursor: pointer;
text-decoration: none;
border-radius: 4px;
display: inline-block;
margin-top: 20px;
transition: background-color 0.3s; /* Smooth transition for hover */
}
</style>
<!-- Code de ChatGPT pour afficher la vidéo youtube -->
<div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden; max-width:100%; width:100%;"><iframe src="https://www.youtube.com/embed/3utIqmvLDNs?autoplay=1" style="position:absolute; top:0; left:0; width:100%; height:100%;" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<!-- Envoie au passage d'après -->
<div class="return-button" onclick="goToPassage('Salle des portes')"> Commencer l'enquête </div>
<!-- Définit la fonction pour aller au prochain passage -->
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
body::after {
content: ''; /* Required to generate the pseudo-element */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
z-index: -1; /* Place it behind the content */
}
.button-container {
text-align: center;
}
.return-button {
background-color: orange; /* Orange background */
color: white;
padding: 15px 32px;
font-family: "VT323", monospace; /* Custom font */
font-weight: 400;
font-style: normal;
border: none;
cursor: pointer;
text-decoration: none;
border-radius: 4px;
margin-top: 20px;
transition: background-color 0.3s; /* Smooth transition for hover */
display: none; /* Initially hide the button */
}
.return-button:hover {
background-color: rgba(255, 165, 0, 0.7); /* Orange with opacity */
text-decoration: none; /* Remove underline on hover */
color: white; /* Keep text white on hover */
}
</style>
<div class="button-container">
<p class="preuves" id="preuves"></p>
<div class="return-button" id="suiteButton" onclick="goToPassage('Fin')">Suite</div>
</div>
<script>
const text = "Etait-ce vraiment le coupable ? Aviez-vous réellement tous les éléments pour prendre une telle décision ? Peut-être qu’il n’est jamais possible de connaître toute la vérité…";
const typingSpeed = 25; // Speed of typing in ms
let index = 0;
const textElement = document.getElementById("preuves");
const suiteButton = document.getElementById("suiteButton");
// Function to type the text out
function typeText() {
if (index < text.length) {
textElement.innerHTML += text.charAt(index);
index++;
} else {
clearInterval(typingInterval);
suiteButton.style.display = "inline-block"; // Show the button after typing is done
}
}
// Start typing the text
const typingInterval = setInterval(typeText, typingSpeed);
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
body::after {
content: ''; /* Required to generate the pseudo-element */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
z-index: -1; /* Place it behind the content */
}
.letter-fullscreen {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: url('https://www.dropbox.com/scl/fi/4cpila41r4oju49l88fvn/Carnet-de-justin.png?rlkey=e130nl2m6kt97ctxfc3c7h3lu&st=9g077gzq&raw=1');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 1000;
}
.return-button {
background-color: orange; /* Orange background */
color: white;
padding: 15px 32px;
font-family: "VT323", monospace; /* Custom font */
font-weight: 400;
font-style: normal;
border: none;
cursor: pointer;
text-decoration: none;
border-radius: 4px;
display: inline-block;
margin-top: 20px;
position: absolute;
top: 10px;
right: 10px;
z-index: 2000;
transition: background-color 0.3s; /* Smooth transition for hover */
}
/* Remove default link hover behavior */
.return-button:hover {
background-color: rgba(255, 165, 0, 0.7); /* Orange with opacity */
text-decoration: none; /* Remove underline on hover */
color: white; /* Keep text white on hover */
}
</style>
<div id="handbag-container">
<div class="letter" id="letter"></div>
<div class="letter-fullscreen" id="letter-fullscreen"></div>
<div class="return-button" onclick="goToPassage('Montrer le carnet')"> Suite </div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
body::after {
content: ''; /* Required to generate the pseudo-element */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
z-index: -1; /* Place it behind the content */
}
.letter-fullscreen {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: url('https://www.dropbox.com/scl/fi/4cpila41r4oju49l88fvn/Carnet-de-justin.png?rlkey=e130nl2m6kt97ctxfc3c7h3lu&st=9g077gzq&raw=1');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 1000;
}
.return-button {
background-color: orange; /* Orange background */
color: white;
padding: 15px 32px;
font-family: "VT323", monospace; /* Custom font */
font-weight: 400;
font-style: normal;
border: none;
cursor: pointer;
text-decoration: none;
border-radius: 4px;
display: inline-block;
margin-top: 20px;
position: absolute;
top: 10px;
right: 10px;
z-index: 2000;
transition: background-color 0.3s; /* Smooth transition for hover */
}
/* Remove default link hover behavior */
.return-button:hover {
background-color: rgba(255, 165, 0, 0.7); /* Orange with opacity */
text-decoration: none; /* Remove underline on hover */
color: white; /* Keep text white on hover */
}
</style>
<div id="handbag-container">
<div class="letter" id="letter"></div>
<div class="letter-fullscreen" id="letter-fullscreen"></div>
<div class="return-button" onclick="goToPassage('Justin choix amoureux4')"> Suite </div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/jaxghfgkjbnjfsshimiap/justin-bouche-ouverte-et-cligne.gif?rlkey=8csezlv6qbdvy6fgentv3qg4u&st=i148tmxg&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
body::after {
content: ''; /* Required to generate the pseudo-element */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
z-index: -1; /* Place it behind the content */
}
.letter-fullscreen {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: url('https://www.dropbox.com/scl/fi/jqvb1i93lqhhigxecuala/Fichier-1.png?rlkey=gsdikj6dyucnfofowl1zeyun1&st=ykx92rw1&raw=1');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 1000;
}
.return-button {
background-color: orange; /* Orange background */
color: white;
padding: 15px 32px;
font-family: "VT323", monospace; /* Custom font */
font-weight: 400;
font-style: normal;
border: none;
cursor: pointer;
text-decoration: none;
border-radius: 4px;
display: inline-block;
margin-top: 20px;
position: absolute;
top: 10px;
right: 10px;
z-index: 2000;
transition: background-color 0.3s; /* Smooth transition for hover */
}
/* Remove default link hover behavior */
.return-button:hover {
background-color: rgba(255, 165, 0, 0.7); /* Orange with opacity */
text-decoration: none; /* Remove underline on hover */
color: white; /* Keep text white on hover */
}
</style>
<div id="handbag-container">
<div class="letter" id="letter"></div>
<div class="letter-fullscreen" id="letter-fullscreen"></div>
<div class="return-button" onclick="goToPassage('Montrer le dossier')"> Suite </div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
body::after {
content: ''; /* Required to generate the pseudo-element */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
z-index: -1; /* Place it behind the content */
}
.letter-fullscreen {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* This centers the element */
width: 18vw; /* Phone container width */
height: 36vw; /* Phone container height */
background-image: url('https://www.dropbox.com/scl/fi/fai06zbf0ljub03r0tp8v/notepad-BON.png?rlkey=t0o6qvflexmo4ui3d7rtgmykq&st=emmkdyt8&raw=1');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 1000;
}
.return-button {
background-color: orange; /* Orange background */
color: white;
padding: 15px 32px;
font-family: "VT323", monospace; /* Custom font */
font-weight: 400;
font-style: normal;
border: none;
cursor: pointer;
text-decoration: none;
border-radius: 4px;
display: inline-block;
margin-top: 20px;
position: absolute;
top: 10px;
right: 10px;
z-index: 2000;
transition: background-color 0.3s; /* Smooth transition for hover */
}
/* Remove default link hover behavior */
.return-button:hover {
background-color: rgba(255, 165, 0, 0.7); /* Orange with opacity */
text-decoration: none; /* Remove underline on hover */
color: white; /* Keep text white on hover */
}
</style>
<div id="handbag-container">
<div class="letter" id="letter"></div>
<div class="letter-fullscreen" id="letter-fullscreen"></div>
<div class="return-button" onclick="goToPassage('Lola fin')"> Suite </div>
<script>
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script><style>
body {
background-image: url('https://www.dropbox.com/scl/fi/a8hk9ikwhxpexir0552iu/lola-GIF-cligne.gif?rlkey=03og689qbfvfehrznh5et0acp&st=hczo4cr5&raw=1');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
margin: 0;
color: #E0E0E0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
body::after {
content: ''; /* Required to generate the pseudo-element */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
z-index: -1; /* Place it behind the content */
}
.scrollable-content p {
margin: 0;
padding: 2px 10px;
}
.border-container {
width: 18vw; /* Phone container width */
height: 36vw; /* Phone container height */
background: url('https://www.dropbox.com/scl/fi/y3uvphnjta7l16qnbdc5b/imagetest.png?rlkey=plcer5i216yxnd3edk9c7zru1&st=ah5irgct&raw=1') center center no-repeat;
background-size: contain;
padding: 20px;
display: flex;
align-items: flex-start; /* Align the scrollable content to start below the header */
justify-content: center;
transition: transform 1s ease-in-out, opacity 1s ease-in-out, visibility 1s ease-in-out;
transform: scale(0);
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.6s ease, opacity 0.6s ease;
}
.scrollable-content {
margin-top: 40%;
width: 80%;
height: 70%;
overflow-y: auto;
font-family: Arial, sans-serif;
font-size: 14px;
display: flex;
flex-direction: column;
gap:0px;
-ms-overflow-style: none; /* For Internet Explorer and Edge */
scrollbar-width: none; /* For Firefox */
}
.scrollable-content::-webkit-scrollbar {
display: none; /* Hide scrollbar for modern browsers */
}
.message {
max-width: 70%;
padding: 10px;
border-radius: 15px;
line-height: 1.5;
color: #4C4C4C;
}
.message-left {
align-self: flex-start;
background-color: #E5E5E5;
border-top-left-radius: 0;
}
.message-right {
align-self: flex-end;
background-color: #DCF8C6;
border-top-right-radius: 0;
}
.voice-note-container {
background-color: #DCF8C6;
display: flex;
align-items: center;
border-radius: 15px;
height: 50px;
}
/* Voice note button - prevent button shift */
.voice-note-button {
width: 40px;
height: 40px;
background-color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
}
.voice-note-button:before {
content: "▶";
color:black;
font-size: 18px;
}
/* Apply a small scale effect when the button is active */
.voice-note-button:active {
transform: scale(0.85); /* Shrinks slightly on click without shifting */
}
/* Animated line */
.voice-line {
width: 5px;
height: 4px;
background-color: black;
border-radius: 2px;
animation: voice-wave 10s infinite ease-in-out;
display: none; /* Hidden until audio plays */
margin-left: 20px;
}
@keyframes voice-wave {
0% { width: 0%; } /* Start with 0% width */
100% { width: 55%; } /* End with full width of the parent */
}
.return-button {
background-color: orange; /* Orange background */
color: white;
padding: 15px 32px;
font-family: "VT323", monospace; /* Custom font */
font-weight: 400;
font-style: normal;
border: none;
cursor: pointer;
text-decoration: none;
border-radius: 4px;
display: inline-block;
margin-top: 20px;
position: absolute;
top: 10px;
right: 10px;
z-index: 2000;
transition: background-color 0.3s; /* Smooth transition for hover */
}
/* Remove default link hover behavior */
.return-button:hover {
background-color: rgba(255, 165, 0, 0.7); /* Orange with opacity */
text-decoration: none; /* Remove underline on hover */
color: white; /* Keep text white on hover */
}
</style>
<div class="finishButton" id="finishButton" style="display: none;" onclick="goToPassage('Lola fin')"> Suite</div>
<div class="border-container" id="phone-popup">
<div class="scrollable-content">
<!-- Conversation messages -->
<p class="message message-left"><strong>Paul:</strong> Je pense que je n'ai pas besoin de te rappeler pour les photos...</p>
<!-- Voice note container -->
<div class="voice-note-container">
<div class="voice-note-button" onclick="toggleAudio()"></div>
<div class="voice-line" id="voiceLine"></div>
<audio id="voiceNote" src="https://www.dropbox.com/scl/fi/7epyv8cau2ak5rxykhhzr/audio-lola.m4a?rlkey=5goqj8z3nzzldrtvlkg065aui&st=26vcdvxk&raw=1"></audio> <!-- Replace with your audio file path -->
</div>
</div>
</div>
<div class="return-button" onclick="goToPassage('Lola fin')"> Suite </div>
<script>
const aud = document.getElementById('voiceNote');
const voiceLine = document.getElementById('voiceLine');
function toggleAudio() {
if (aud.paused) {
aud.play();
voiceLine.style.display = 'block'; // Show the animated line
} else {
aud.pause();
voiceLine.style.display = 'none'; // Hide the animated line when paused
}
}
aud.onended = function() {
voiceLine.style.display = 'none'; // Hide the line when the audio finishes
};
function goToPassage(passageName) {
SugarCube.Engine.play(passageName);
}
</script>