first commit

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+static/assets/sounds/music.mp3 filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,24 @@
+# Use official Python runtime as base image
+FROM python:3.9-slim
+
+# Set working directory
+WORKDIR /app
+
+# Copy requirements first to leverage Docker cache
+COPY requirements.txt .
+
+# Install dependencies
+RUN pip install -r requirements.txt
+
+# Copy the rest of the application
+COPY . .
+
+# Set environment variables
+ENV PYTHONUNBUFFERED=1
+ENV PORT=7860
+
+# Expose the port the app runs on
+EXPOSE 7860
+
+# Command to run the application
+CMD ["python", "app.py"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Johnny
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,11 +1,24 @@
 ---
-title: TestSpace
-emoji: 🦀
-colorFrom: purple
+title: The Last Message
+emoji: 📱
+colorFrom: gray
 colorTo: red
-sdk: docker
+sdk: gradio
+sdk_version: "3.50.2"
+app_file: app.py
 pinned: false
-short_description: test
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# The Last Message - Horror Escape Game
+
+An interactive horror escape game where your messages determine the fate of others.
+
+### Docker
+
+# Build the image
+
+docker build -t p5js-game .
+
+# Run the container
+
+docker run -p 8000:8000 p5js-game

app.py

@@ -0,0 +1,58 @@
+from flask import Flask, request, jsonify, render_template, send_from_directory
+import requests
+import os
+from flask_cors import CORS
+import logging
+
+app = Flask(__name__)
+CORS(app)  # Enable CORS for development
+
+# Set up logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+@app.route('/mistral-proxy', methods=['POST'])
+def proxy_to_mistral():
+    MISTRAL_API_KEY = os.getenv('MISTRAL_API_KEY')
+    MISTRAL_API_URL = "https://api.mistral.ai/v1/chat/completions"
+    
+    if not MISTRAL_API_KEY:
+        logger.error("MISTRAL_API_KEY not configured")
+        return jsonify({"error": "MISTRAL_API_KEY not configured"}), 500
+    
+    headers = {
+        'Authorization': f'Bearer {MISTRAL_API_KEY}',
+        'Content-Type': 'application/json'
+    }
+    
+    try:
+        # Log incoming request (excluding sensitive data)
+        logger.info(f"Received request for Mistral API")
+        
+        response = requests.post(MISTRAL_API_URL, 
+                               headers=headers,
+                               json=request.json)
+        
+        # Check if the response was successful
+        response.raise_for_status()
+        
+        return jsonify(response.json())
+    except requests.exceptions.RequestException as e:
+        logger.error(f"Error calling Mistral API: {str(e)}")
+        return jsonify({"error": f"Error calling Mistral API: {str(e)}"}), 500
+    except Exception as e:
+        logger.error(f"Unexpected error: {str(e)}")
+        return jsonify({"error": str(e)}), 500
+
+# Serve static files
+@app.route('/')
+def index():
+    return send_from_directory('static', 'index.html')
+
+# Add this if you want to serve other static files
+@app.route('/<path:path>')
+def serve_static(path):
+    return send_from_directory('static', path)
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860) 

front_edits/CSS/game-style.css

@@ -0,0 +1,550 @@
+/* Layout */
+body {
+  margin: 0;
+  font-family: Arial, sans-serif;
+  display: flex;
+  background-color: #220a0a;
+  height: 100vh;
+  position: relative;
+  overflow: hidden;
+}
+
+#gameContainer {
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  overflow: auto;
+  position: relative;
+  z-index: 1;
+  align-items: center;
+}
+
+#mapSection {
+  flex: 1;
+  min-width: 600px;
+  width: fit-content;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow: auto;
+  z-index: 2;
+  padding: 20px;
+}
+
+/* We'll place the P5 canvas in here */
+.map-wrapper {
+  margin: 20px;
+  transform-origin: center center;
+  min-width: min-content;
+}
+
+#chatSection {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #000000;
+  border-radius: 38px;
+  overflow: hidden;
+}
+
+#chatHistory {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  background: #f8f8fa;
+}
+
+/* Style moderne pour la barre de scroll */
+#chatHistory::-webkit-scrollbar {
+  width: 6px;
+}
+
+#chatHistory::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+#chatHistory::-webkit-scrollbar-thumb {
+  background: #d1d1d6;
+  border-radius: 3px;
+}
+
+#chatControls {
+  padding: 16px;
+  background: #ffffff;
+  display: flex;
+  gap: 12px;
+  border-top: 1px solid #f1f1f5;
+}
+
+.chat-message {
+  padding: 12px 16px;
+  margin: 6px 0;
+  border-radius: 20px;
+  max-width: 75%;
+  font-size: 0.95em;
+  line-height: 1.4;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.3s ease;
+}
+
+.user-message {
+  background: #007aff;
+  color: white;
+  margin-left: auto;
+  border-radius: 20px 20px 4px 20px;
+}
+
+.assistant-message {
+  color: black;
+  margin-right: auto;
+  border-radius: 20px 20px 20px 4px;
+}
+
+input {
+  flex: 1;
+  padding: 12px 16px;
+  border: none;
+  border-radius: 20px;
+  font-family: inherit;
+  font-size: 0.95em;
+  background: #f1f1f5;
+  transition: background 0.2s;
+}
+
+input:focus {
+  outline: none;
+  background: #e5e5ea;
+}
+
+input::placeholder {
+  color: #8e8e93;
+}
+
+button {
+  padding: 8px;
+  width: 40px;
+  height: 40px;
+  background: #007aff;
+  color: white;
+  border: none;
+  border-radius: 20px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s, background 0.2s;
+}
+
+button:hover {
+  background: #0056b3;
+  transform: scale(1.05);
+}
+
+/* Style moderne pour l'indicateur de chargement */
+.loading-dots {
+  display: inline-flex;
+  gap: 4px;
+  padding: 8px 12px;
+  background: #f1f1f5;
+  border-radius: 16px;
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  background: #8e8e93;
+  border-radius: 50%;
+  animation: bounce 1.4s infinite ease-in-out;
+}
+
+.dot:nth-child(1) {
+  animation-delay: -0.32s;
+}
+
+.dot:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+@keyframes bounce {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+
+  40% {
+    transform: scale(1);
+  }
+}
+
+/* Modal for API key (if needed) */
+#apiKeyModal {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-content {
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  width: 300px;
+}
+
+#apiKey {
+  width: 100%;
+  margin: 10px 0;
+  padding: 8px;
+}
+
+/* Modifier les styles du chat et du mockup */
+.phone-mockup {
+  position: relative;
+  width: 400px;
+  height: 800px;
+  background: url("/static/assets/img/phone.png") no-repeat center;
+  background-size: contain;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
+  padding: 35px 0;
+  flex-shrink: 0;
+  z-index: 2;
+}
+
+.phone-screen {
+  width: 90%;
+  height: 96.5%;
+  position: relative;
+  overflow: hidden;
+  margin: 0;
+  border-radius: 40px;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Update media queries for better responsiveness */
+@media (max-height: 900px) {
+  .phone-mockup {
+    width: 350px;
+    height: 700px;
+  }
+}
+
+@media (max-height: 700px) {
+  .phone-mockup {
+    width: 300px;
+    height: 600px;
+  }
+}
+
+@media (max-width: 1200px) {
+  #mapSection {
+    flex: none;
+    width: fit-content;
+  }
+}
+
+@media (max-width: 900px) {
+  #mapSection {
+    flex: none;
+    width: fit-content;
+  }
+  .phone-mockup {
+    min-width: 280px;
+  }
+}
+
+/* Ajouter les nouveaux styles pour l'en-tête du chat */
+#chatHeader {
+  padding: 16px;
+  justify-content: center;
+  background: #ffffff;
+  border-bottom: 1px solid #f1f1f5;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.profile-picture {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: #f1f1f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.chat-name {
+  font-size: 1.1em;
+  font-weight: 600;
+  color: #000000;
+}
+
+/* LED Bar */
+.led-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 0, 0, 0.4) 20%,
+    rgba(255, 0, 0, 0.8) 35%,
+    rgba(255, 50, 50, 1) 50%,
+    rgba(255, 0, 0, 0.8) 65%,
+    rgba(255, 0, 0, 0.4) 80%,
+    transparent 100%
+  );
+  z-index: 100;
+  animation: ledFlicker 4s infinite, ledPulse 10s infinite;
+  box-shadow: 0 0 20px rgba(255, 0, 0, 0.7), 0 0 35px rgba(255, 0, 0, 0.5),
+    0 0 50px rgba(255, 0, 0, 0.4), 0 0 70px rgba(155, 0, 0, 0.3);
+  filter: blur(0.6px);
+}
+
+.light-beam {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 250px;
+  background: linear-gradient(
+    180deg,
+    rgba(255, 0, 0, 0.3) 0%,
+    rgba(255, 0, 0, 0.2) 20%,
+    rgba(255, 0, 0, 0.15) 30%,
+    rgba(155, 0, 0, 0.08) 60%,
+    transparent 100%
+  );
+  animation: beamFlicker 4s infinite;
+  pointer-events: none;
+  filter: blur(2px);
+}
+
+@keyframes ledFlicker {
+  0% {
+    opacity: 1;
+  }
+
+  95% {
+    opacity: 1;
+  }
+
+  96% {
+    opacity: 0.3;
+  }
+
+  97% {
+    opacity: 1;
+  }
+
+  98% {
+    opacity: 0.2;
+  }
+
+  99% {
+    opacity: 0.9;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes ledPulse {
+  0% {
+    filter: brightness(1) blur(0.6px);
+  }
+
+  50% {
+    filter: brightness(1.3) blur(0.4px);
+  }
+
+  100% {
+    filter: brightness(1) blur(0.6px);
+  }
+}
+
+@keyframes beamFlicker {
+  0% {
+    opacity: 0.7;
+  }
+
+  95% {
+    opacity: 0.7;
+  }
+
+  96% {
+    opacity: 0.2;
+  }
+
+  97% {
+    opacity: 0.7;
+  }
+
+  98% {
+    opacity: 0.1;
+  }
+
+  99% {
+    opacity: 0.6;
+  }
+
+  100% {
+    opacity: 0.7;
+  }
+}
+
+/* Background Elements */
+.background-elements {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.blood {
+  position: absolute;
+  top: 94%;
+  opacity: 0.6;
+  transform: rotate(20deg);
+  right: 10%;
+}
+
+.blood-top-left {
+  top: 0;
+  left: 0;
+  width: 300px;
+}
+
+.blood-top-right {
+  top: 0;
+  right: 0;
+  width: 200px;
+  transform: rotate(20deg);
+}
+
+.splatter {
+  bottom: 20%;
+  left: 10%;
+  width: 200px;
+}
+
+.blood-bottom-right {
+  bottom: 0;
+  right: 0;
+  position: absolute;
+  top: 90%;
+  left: 90%;
+  width: 200px;
+}
+
+/* Sound button styles */
+.sound-button {
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+  width: 100px;
+  height: 100px;
+  cursor: pointer;
+  z-index: 1000;
+  transition: transform 0.2s ease;
+}
+
+.sound-button:hover {
+  transform: scale(1.1);
+}
+
+.sound-button img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* Update button styles */
+button {
+  padding: 8px;
+  width: 40px;
+  height: 40px;
+  background: #007aff;
+  color: white;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s, background 0.2s;
+}
+
+button img {
+  width: 15px;
+  height: 15px;
+  color: #ffffff;
+}
+
+/* Update input styles */
+input {
+  border-radius: 10px;
+}
+
+@keyframes lightShake {
+  0% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(2px);
+  }
+  50% {
+    transform: translateX(-2px);
+  }
+  75% {
+    transform: translateX(2px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes heavyShake {
+  0% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(4px);
+  }
+  50% {
+    transform: translateX(-4px);
+  }
+  75% {
+    transform: translateX(4px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.light-shake {
+  animation: lightShake 0.5s ease-in-out infinite;
+}
+
+.heavy-shake {
+  animation: heavyShake 0.5s ease-in-out infinite;
+}

front_edits/CSS/how-to-play.css

@@ -0,0 +1,429 @@
+/* Styles généraux pour toutes les pages How to Play */
+.content {
+  color: #fff;
+  text-align: center;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 20px;
+}
+
+.content h1 {
+  font-family: "HorrorBrush", cursive;
+  font-size: 64px;
+  color: #9b0000;
+  position: relative;
+  margin-bottom: 30px;
+  letter-spacing: 4px;
+}
+
+/* Styles pour la première page */
+.game-description p {
+  font-size: 2.5rem;
+  margin-bottom: 2rem;
+  color: #fff;
+}
+
+.gf-image {
+  width: 400px;
+  height: auto;
+  margin-top: 50px;
+}
+
+/* Styles pour la deuxième page */
+.objects-container {
+  display: flex;
+  justify-content: center;
+  gap: 50px;
+  margin: 50px 0 30px 0;
+  width: 100%;
+}
+
+.object-type {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 300px;
+}
+
+.object-title {
+  font-family: "HorrorBrush", cursive;
+  font-size: 2.5rem;
+  color: #fff;
+  margin-bottom: 10px;
+}
+
+.sub-text {
+  font-size: 2rem;
+  color: #ffffff;
+  margin-bottom: 20px;
+}
+
+.image-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+/* Styles pour les images tutorielles */
+.tutorial-image {
+  width: 250px;
+  height: 250px;
+  object-fit: contain;
+}
+
+/* Styles de navigation */
+.navigation-buttons {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 50px;
+  margin-top: 30px;
+  width: 100%;
+  height: auto;
+}
+
+.navigation-buttons .back-button,
+.navigation-buttons .next-button {
+  display: inline-block;
+  font-family: "HorrorBrush", cursive;
+  font-size: 36px;
+  color: #fff;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  letter-spacing: 4px;
+  text-transform: uppercase;
+  background-color: rgba(155, 0, 0, 0.3);
+  padding: 10px 30px;
+  border: 2px solid #9b0000;
+  border-radius: 5px;
+  line-height: 1;
+  margin: 0;
+}
+
+.navigation-buttons .back-button {
+  position: static;
+  transform: none;
+  bottom: auto;
+  left: auto;
+}
+
+.navigation-buttons .next-button:hover,
+.navigation-buttons .back-button:hover {
+  color: #9b0000;
+  background-color: rgba(155, 0, 0, 0.1);
+  box-shadow: 0 0 15px rgba(155, 0, 0, 0.5);
+}
+
+/* Style spécifique pour le bouton Back to Menu */
+.back-to-menu {
+  position: absolute;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/* Styles pour la deuxième page */
+.object-type.green .object-title {
+  color: #20bb43;
+}
+
+.object-type.red .object-title {
+  color: #d25658;
+}
+
+.object-type.white .object-title {
+  color: white;
+}
+
+/* Media Queries pour la responsivité */
+@media screen and (max-width: 1200px) {
+  .content {
+    max-width: 95%;
+    padding: 15px;
+  }
+}
+
+@media screen and (max-width: 900px) {
+  .objects-container {
+    flex-direction: column;
+    align-items: center;
+    gap: 40px;
+    margin: 50px 0 30px 0;
+  }
+
+  .object-type {
+    width: 100%;
+    max-width: 400px;
+  }
+
+  .tutorial-image {
+    width: 200px;
+    height: 200px;
+  }
+
+  .content h1 {
+    font-size: 48px;
+  }
+
+  .object-title {
+    font-size: 2rem;
+  }
+
+  .sub-text {
+    font-size: 1.5rem;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .gf-image {
+    width: 90%;
+    max-width: 300px;
+  }
+
+  .content h1 {
+    font-size: 36px;
+  }
+
+  .game-description p {
+    font-size: 1.8rem;
+  }
+
+  .navigation-buttons {
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .navigation-buttons .back-button,
+  .navigation-buttons .next-button {
+    font-size: 28px;
+    padding: 8px 20px;
+  }
+
+  .object-title {
+    font-size: 1.8rem;
+  }
+
+  .sub-text {
+    font-size: 1.2rem;
+  }
+
+  .tutorial-image {
+    width: 180px;
+    height: 180px;
+  }
+}
+
+@media screen and (max-width: 400px) {
+  .content h1 {
+    font-size: 32px;
+  }
+
+  .game-description p {
+    font-size: 1.5rem;
+  }
+
+  .navigation-buttons .back-button,
+  .navigation-buttons .next-button {
+    font-size: 24px;
+    padding: 6px 16px;
+  }
+}
+
+@media screen and (max-height: 800px) {
+  .content {
+    margin-top: 10px;
+  }
+
+  .content h1 {
+    font-size: 48px;
+    margin-bottom: 20px;
+  }
+
+  .game-description p {
+    font-size: 2rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .gf-image {
+    width: 300px;
+    margin-top: 30px;
+  }
+
+  .objects-container {
+    margin: 50px 0 20px 0;
+  }
+
+  .object-type {
+    width: 250px;
+  }
+
+  .tutorial-image {
+    width: 200px;
+    height: 200px;
+  }
+}
+
+@media screen and (max-height: 600px) {
+  .content {
+    margin-top: 5px;
+  }
+
+  .content h1 {
+    font-size: 36px;
+    margin-bottom: 15px;
+  }
+
+  .game-description p {
+    font-size: 1.8rem;
+    margin-bottom: 1rem;
+  }
+
+  .gf-image {
+    width: 250px;
+    margin-top: 20px;
+  }
+
+  .objects-container {
+    margin: 30px 0 15px 0;
+  }
+
+  .object-type {
+    width: 200px;
+  }
+
+  .tutorial-image {
+    width: 180px;
+    height: 180px;
+  }
+
+  .navigation-buttons {
+    margin-top: 30px;
+  }
+
+  .navigation-buttons .back-button,
+  .navigation-buttons .next-button {
+    font-size: 28px;
+    padding: 8px 20px;
+  }
+}
+
+@media screen and (max-height: 500px) {
+  .content h1 {
+    font-size: 32px;
+    margin-bottom: 10px;
+  }
+
+  .game-description p {
+    font-size: 1.5rem;
+  }
+
+  .gf-image {
+    width: 200px;
+    margin-top: 15px;
+  }
+
+  .objects-container {
+    margin: 20px 0 10px 0;
+  }
+
+  .object-type {
+    width: 180px;
+  }
+
+  .tutorial-image {
+    width: 130px;
+    height: 130px;
+  }
+
+  .navigation-buttons {
+    margin-top: 20px;
+  }
+
+  .navigation-buttons .back-button,
+  .navigation-buttons .next-button {
+    font-size: 24px;
+    padding: 6px 16px;
+  }
+}
+
+/* Styles pour la page 3 */
+.main-description {
+  font-size: 2.5rem;
+  color: #fff;
+  font-family: "HorrorBrush", cursive;
+}
+
+.object-type.yellow .object-title {
+  color: #ffd700;
+}
+
+/* Ajustement pour deux objets au lieu de trois */
+.objects-container.two-items {
+  justify-content: center;
+  gap: 100px; /* Plus d'espace entre deux éléments */
+}
+
+/* Media queries pour la page 3 */
+@media screen and (max-width: 900px) {
+  .main-description {
+    font-size: 2rem;
+    margin: 20px 0;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .main-description {
+    font-size: 1.8rem;
+    margin: 15px 0;
+  }
+}
+
+@media screen and (max-height: 600px) {
+  .main-description {
+    font-size: 1.8rem;
+    margin: 10px 0;
+  }
+}
+
+/* Styles pour la page 4 */
+.video-container {
+  margin-top: 20px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.tutorial-video {
+  max-width: 200px;
+  width: 100%;
+  border-radius: 30px;
+}
+
+/* Media queries pour la page 4 */
+@media screen and (max-width: 900px) {
+  .tutorial-video {
+    max-width: 350px;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .tutorial-video {
+    max-width: 300px;
+  }
+}
+
+@media screen and (max-height: 800px) {
+  .video-container {
+    margin: 30px 0;
+  }
+}
+
+@media screen and (max-height: 600px) {
+  .video-container {
+    margin: 20px 0;
+  }
+}

front_edits/CSS/index-style.css

@@ -0,0 +1,482 @@
+@font-face {
+  font-family: "HorrorBrush";
+  src: url("/static/assets/fonts/horrorbrush.ttf") format("truetype");
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #000000;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.background-elements {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.blood {
+  position: absolute;
+}
+
+.blood-top-left {
+  top: 0;
+  left: 0;
+  width: 350px;
+  opacity: 50%;
+}
+
+.blood-bottom-right {
+  bottom: 0;
+  right: 0;
+  width: 250px;
+  position: absolute;
+  bottom: -120px;
+  right: -50px;
+  opacity: 40%;
+}
+
+.blood-top-right {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 250px;
+  margin: 20px 20px 0px 0px;
+  transform: rotate(30deg);
+}
+
+.splatter {
+  position: absolute;
+  opacity: 60%;
+  bottom: 240px;
+  left: 30%;
+  transform: translateX(-50%);
+  transform: rotate(20deg);
+  width: 400px;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 100px;
+  z-index: 1;
+}
+
+.logo {
+  position: absolute;
+  top: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  animation: flicker 4s linear infinite;
+}
+
+.logo img {
+  width: 230px;
+  height: auto;
+}
+
+.menu {
+  display: flex;
+  margin-top: 250px;
+  flex-direction: column;
+  gap: 30px;
+  align-items: center;
+  position: relative;
+}
+
+.menu::after {
+  content: "";
+  position: absolute;
+  width: 800px;
+  height: 800px;
+  background: radial-gradient(
+    circle,
+    rgba(155, 0, 0, 0.35) 0%,
+    rgba(0, 0, 0, 0) 70%
+  );
+  z-index: -1;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.menu-item {
+  font-family: "HorrorBrush", cursive;
+  font-size: 48px;
+  color: #fff;
+  text-decoration: none;
+  transition: color 0.3s ease;
+  letter-spacing: 4px;
+  text-transform: uppercase;
+}
+
+.new-game {
+  color: #9b0000;
+}
+
+.menu-item:hover {
+  color: #9b0000;
+}
+
+.how-to-play:hover {
+  color: #9b0000;
+}
+
+.level-maker:hover {
+  color: #9b0000;
+}
+
+@keyframes flicker {
+  0% {
+    opacity: 1;
+  }
+  5% {
+    opacity: 0.9;
+  }
+  10% {
+    opacity: 1;
+  }
+  15% {
+    opacity: 0.4;
+  }
+  16% {
+    opacity: 1;
+  }
+  17% {
+    opacity: 0.4;
+  }
+  18% {
+    opacity: 1;
+  }
+  35% {
+    opacity: 1;
+  }
+  36% {
+    opacity: 0.3;
+  }
+  37% {
+    opacity: 1;
+  }
+  38% {
+    opacity: 0.5;
+  }
+  39% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 1;
+  }
+  51% {
+    opacity: 0.7;
+  }
+  52% {
+    opacity: 1;
+  }
+  53% {
+    opacity: 0.4;
+  }
+  54% {
+    opacity: 1;
+  }
+  85% {
+    opacity: 1;
+  }
+  86% {
+    opacity: 0.6;
+  }
+  87% {
+    opacity: 1;
+  }
+  88% {
+    opacity: 0.4;
+  }
+  89% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.led-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 0, 0, 0.4) 20%,
+    rgba(255, 0, 0, 0.8) 35%,
+    rgba(255, 50, 50, 1) 50%,
+    rgba(255, 0, 0, 0.8) 65%,
+    rgba(255, 0, 0, 0.4) 80%,
+    transparent 100%
+  );
+  z-index: 100;
+  animation: ledFlicker 4s infinite, ledPulse 10s infinite;
+  box-shadow: 0 0 20px rgba(255, 0, 0, 0.7), 0 0 35px rgba(255, 0, 0, 0.5),
+    0 0 50px rgba(255, 0, 0, 0.4), 0 0 70px rgba(155, 0, 0, 0.3);
+  filter: blur(0.6px);
+}
+
+.light-beam {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 250px;
+  background: linear-gradient(
+    180deg,
+    rgba(255, 0, 0, 0.3) 0%,
+    rgba(255, 0, 0, 0.2) 20%,
+    rgba(255, 0, 0, 0.15) 30%,
+    rgba(155, 0, 0, 0.08) 60%,
+    transparent 100%
+  );
+  animation: beamFlicker 4s infinite;
+  pointer-events: none;
+  filter: blur(2px);
+}
+
+@keyframes ledFlicker {
+  0% {
+    opacity: 1;
+  }
+  95% {
+    opacity: 1;
+  }
+  96% {
+    opacity: 0.3;
+  }
+  97% {
+    opacity: 1;
+  }
+  98% {
+    opacity: 0.2;
+  }
+  99% {
+    opacity: 0.9;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes ledPulse {
+  0% {
+    filter: brightness(1) blur(0.6px);
+  }
+  50% {
+    filter: brightness(1.3) blur(0.4px);
+  }
+  100% {
+    filter: brightness(1) blur(0.6px);
+  }
+}
+
+@keyframes beamFlicker {
+  0% {
+    opacity: 0.7;
+  }
+  95% {
+    opacity: 0.7;
+  }
+  96% {
+    opacity: 0.2;
+  }
+  97% {
+    opacity: 0.7;
+  }
+  98% {
+    opacity: 0.1;
+  }
+  99% {
+    opacity: 0.6;
+  }
+  100% {
+    opacity: 0.7;
+  }
+}
+
+/* How to Play Page Styles */
+.content {
+  color: #fff;
+  text-align: center;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 0px;
+}
+
+.content h1 {
+  font-family: "HorrorBrush", cursive;
+  font-size: 64px;
+  color: #9b0000;
+  position: relative;
+  margin-bottom: 30px;
+  letter-spacing: 4px;
+}
+
+.game-description p {
+  font-size: 2.5rem;
+  margin-bottom: 2rem;
+  color: #fff;
+}
+
+.back-button {
+  font-family: "HorrorBrush", cursive;
+  font-size: 36px;
+  color: #fff;
+  text-decoration: none;
+  transition: color 0.3s ease;
+  letter-spacing: 4px;
+  text-transform: uppercase;
+  position: absolute;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.back-button:hover {
+  color: #9b0000;
+}
+
+.character {
+  position: absolute;
+  bottom: -30px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  animation: characterFlicker 6s infinite;
+}
+
+.character img {
+  width: 550px;
+  height: auto;
+}
+
+@keyframes characterFlicker {
+  0% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  42% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  43% {
+    opacity: 0.8;
+    filter: brightness(1.2);
+  }
+  44% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  45% {
+    opacity: 0.6;
+    filter: brightness(1.3);
+  }
+  46% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  47% {
+    opacity: 0.2;
+    filter: brightness(1.5);
+  }
+  48% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  49% {
+    opacity: 0.4;
+    filter: brightness(1.2);
+  }
+  50% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  80% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  81% {
+    opacity: 0.5;
+    filter: brightness(1.3);
+  }
+  82% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  100% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+}
+
+/* Modifier les styles pour le bouton son */
+.sound-button {
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+  width: 100px;
+  height: 100px;
+  cursor: pointer;
+  z-index: 1000;
+  transition: transform 0.2s ease;
+}
+
+.sound-button:hover {
+  transform: scale(1.1);
+}
+
+.sound-button img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.gf-image {
+  width: 400px;
+  height: auto;
+  margin-top: 50px;
+}
+
+.next-button {
+  font-family: "HorrorBrush", cursive;
+  font-size: 36px;
+  color: #fff;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  letter-spacing: 4px;
+  text-transform: uppercase;
+  display: block;
+  margin-top: 50px;
+  background-color: rgba(155, 0, 0, 0.3);
+  padding: 10px 30px;
+  border: 2px solid #9b0000;
+  border-radius: 5px;
+}
+
+.next-button:hover {
+  color: #9b0000;
+  background-color: rgba(155, 0, 0, 0.1);
+  box-shadow: 0 0 15px rgba(155, 0, 0, 0.5);
+}

front_edits/howto/how-to-play-2.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Through Their Eyes - How to Play</title>
+    <link rel="stylesheet" href="assets/css/index-style.css" />
+    <link rel="stylesheet" href="assets/css/how-to-play.css" />
+  </head>
+  <body>
+    <div class="led-bar">
+      <div class="light-beam"></div>
+    </div>
+
+    <div class="background-elements">
+      <img src="assets/img/blood-2.png" alt="" class="blood blood-top-left" />
+      <img src="assets/img/help.png" alt="" class="blood blood-top-right" />
+      <img src="assets/img/splatter.png" alt="" class="blood splatter" />
+      <img src="assets/img/hand.png" alt="" class="blood blood-bottom-right" />
+    </div>
+
+    <main>
+      <div class="content">
+        <h1>How to Play</h1>
+        <div class="objects-container">
+          <div class="object-type green">
+            <div class="image-container">
+              <img
+                src="assets/img/how_to_play/CoffeeTableUsable_1.png"
+                alt="Green object example"
+                class="tutorial-image"
+              />
+            </div>
+            <p class="object-title">Green objects</p>
+            <p class="sub-text">can be searched</p>
+          </div>
+
+          <div class="object-type red">
+            <div class="image-container">
+              <img
+                src="assets/img/how_to_play/TVUnused_1.png"
+                alt="Red object example"
+                class="tutorial-image"
+              />
+            </div>
+            <p class="object-title">Red objects</p>
+            <p class="sub-text">require an item</p>
+          </div>
+
+          <div class="object-type white">
+            <div class="image-container">
+              <img
+                src="assets/img/how_to_play/Untitled_Artwork.png"
+                alt="White object example"
+                class="tutorial-image"
+              />
+            </div>
+            <p class="object-title">White objects</p>
+            <p class="sub-text">do nothing</p>
+          </div>
+        </div>
+
+        <div class="navigation-buttons">
+          <a href="how-to-play.html" class="back-button">Back</a>
+          <a href="how-to-play-3.html" class="next-button">Next 2/4</a>
+        </div>
+      </div>
+    </main>
+
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

front_edits/howto/how-to-play-3.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Through Their Eyes - How to Play</title>
+    <link rel="stylesheet" href="assets/css/index-style.css" />
+    <link rel="stylesheet" href="assets/css/how-to-play.css" />
+  </head>
+  <body>
+    <div class="led-bar">
+      <div class="light-beam"></div>
+    </div>
+
+    <div class="background-elements">
+      <img src="assets/img/blood-2.png" alt="" class="blood blood-top-left" />
+      <img src="assets/img/help.png" alt="" class="blood blood-top-right" />
+      <img src="assets/img/splatter.png" alt="" class="blood splatter" />
+      <img src="assets/img/hand.png" alt="" class="blood blood-bottom-right" />
+    </div>
+
+    <main>
+      <div class="content">
+        <h1>How to Play</h1>
+        <p class="main-description">
+          Make sure the murderous ghost clown doesn't see you
+        </p>
+
+        <div class="objects-container">
+          <div class="object-type red">
+            <div class="image-container">
+              <img
+                src="assets/img/how_to_play/monster.png"
+                alt="Monster warning"
+                class="tutorial-image"
+              />
+            </div>
+            <p class="object-title">Don't let him see</p>
+            <p class="sub-text">or catch your girlfriend</p>
+          </div>
+
+          <div class="object-type yellow">
+            <div class="image-container">
+              <img
+                src="assets/img/how_to_play/bed.png"
+                alt="Hiding spot example"
+                class="tutorial-image"
+              />
+            </div>
+            <p class="object-title">Yellow objects</p>
+            <p class="sub-text">are hiding spots</p>
+          </div>
+        </div>
+
+        <div class="navigation-buttons">
+          <a href="how-to-play-2.html" class="back-button">Back</a>
+          <a href="how-to-play-4.html" class="next-button">Next 3/4</a>
+        </div>
+      </div>
+    </main>
+
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

front_edits/howto/how-to-play-4.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Through Their Eyes - How to Play</title>
+    <link rel="stylesheet" href="assets/css/index-style.css" />
+    <link rel="stylesheet" href="assets/css/how-to-play.css" />
+  </head>
+  <body>
+    <div class="led-bar">
+      <div class="light-beam"></div>
+    </div>
+
+    <div class="background-elements">
+      <img src="assets/img/blood-2.png" alt="" class="blood blood-top-left" />
+      <img src="assets/img/help.png" alt="" class="blood blood-top-right" />
+      <img src="assets/img/splatter.png" alt="" class="blood splatter" />
+      <img src="assets/img/hand.png" alt="" class="blood blood-bottom-right" />
+    </div>
+
+    <main>
+      <div class="content">
+        <h1>How to Play</h1>
+        <p class="main-description">
+          You can only communicate by texting. Keep her calm and focused.
+        </p>
+
+        <div class="video-container">
+          <img
+            src="assets/img/how_to_play/video.gif"
+            alt="Communication example"
+            class="tutorial-video"
+          />
+        </div>
+
+        <div class="navigation-buttons">
+          <a href="./" class="next-button">Back to Menu</a>
+        </div>
+      </div>
+    </main>
+
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

front_edits/howto/how-to-play.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Through Their Eyes - How to Play</title>
+    <link rel="stylesheet" href="assets/css/index-style.css" />
+    <link rel="stylesheet" href="assets/css/how-to-play.css" />
+  </head>
+  <body>
+    <div class="led-bar">
+      <div class="light-beam"></div>
+    </div>
+
+    <div class="background-elements">
+      <img src="assets/img/blood-2.png" alt="" class="blood blood-top-left" />
+      <img src="assets/img/help.png" alt="" class="blood blood-top-right" />
+      <img src="assets/img/splatter.png" alt="" class="blood splatter" />
+      <img src="assets/img/hand.png" alt="" class="blood blood-bottom-right" />
+    </div>
+
+    <main>
+      <div class="content">
+        <h1>How to Play</h1>
+        <div class="game-description">
+          <p>Your girlfriend is trapped in your apartment</p>
+          <img
+            src="assets/img/gf.png"
+            alt="Trapped girlfriend"
+            class="gf-image"
+          />
+        </div>
+        <div class="navigation-buttons">
+          <a href="./" class="back-button back-to-menu">Back to Menu</a>
+          <a href="how-to-play-2.html" class="next-button">Next 1/4</a>
+        </div>
+      </div>
+    </main>
+
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

front_edits/index.html

@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Through Their Eyes</title>
+    <link rel="stylesheet" href="./assets/css/index-style.css" />
+  </head>
+  <body>
+    <div class="led-bar">
+      <div class="light-beam"></div>
+    </div>
+    <div class="background-elements">
+      <img src="assets/img/blood-2.png" alt="" class="blood blood-top-left" />
+      <img src="assets/img/help.png" alt="" class="blood blood-top-right" />
+      <img src="assets/img/splatter.png" alt="" class="blood splatter" />
+      <img src="assets/img/hand.png" alt="" class="blood blood-bottom-right" />
+    </div>
+
+    <main>
+      <div class="logo">
+        <img src="assets/img/logo.png" alt="Through Their Eyes" />
+      </div>
+
+      <nav class="menu">
+        <a href="game/index.html" class="menu-item new-game">NEW GAME</a>
+        <a href="how-to-play.html" class="menu-item how-to-play">HOW TO PLAY</a>
+      </nav>
+      <div class="character">
+        <img src="assets/img/perso.png" alt="Character" />
+      </div>
+    </main>
+
+    <div class="sound-button" onclick="toggleSound()">
+      <img
+        src="/static/assets/img/sondon.png"
+        alt="Sound control"
+        id="soundIcon"
+      />
+    </div>
+
+    <audio id="bgMusic" loop>
+      <source src="/static/assets/sounds/music.mp3" type="audio/mp3" />
+    </audio>
+
+    <script>
+      // Définir isSoundOn comme true par défaut
+      let isSoundOn = true; // Toujours commencer avec le son activé
+      const soundIcon = document.getElementById("soundIcon");
+      const bgMusic = document.getElementById("bgMusic");
+
+      window.addEventListener("DOMContentLoaded", () => {
+        // Vérifier si c'est la première visite
+        if (localStorage.getItem("isSoundOn") === null) {
+          // Première visite : initialiser avec le son activé
+          localStorage.setItem("isSoundOn", "true");
+        } else {
+          // Visites suivantes : récupérer l'état précédent
+          isSoundOn = localStorage.getItem("isSoundOn") === "true";
+        }
+
+        // Mettre à jour l'icône
+        updateSoundIcon();
+
+        try {
+          bgMusic.currentTime = 10;
+          // Jouer la musique si le son est activé
+          if (isSoundOn) {
+            bgMusic.play().catch((error) => {
+              console.log("Autoplay prevented:", error);
+              isSoundOn = false;
+              localStorage.setItem("isSoundOn", "false");
+              updateSoundIcon();
+            });
+          }
+        } catch (error) {
+          console.error("Error playing audio:", error);
+        }
+      });
+
+      function toggleSound() {
+        isSoundOn = !isSoundOn;
+        localStorage.setItem("isSoundOn", isSoundOn.toString());
+
+        if (isSoundOn) {
+          if (bgMusic.currentTime < 10) {
+            bgMusic.currentTime = 10;
+          }
+          bgMusic.play();
+        } else {
+          bgMusic.pause();
+        }
+        updateSoundIcon();
+      }
+
+      function updateSoundIcon() {
+        soundIcon.src = isSoundOn
+          ? "/static/assets/img/sondon.png"
+          : "/static/assets/img/soundoff.png";
+      }
+    </script>
+  </body>
+</html>

requirements.txt

@@ -0,0 +1,4 @@
+flask==3.0.0
+requests==2.31.0
+flask-cors==4.0.0
+python-dotenv==1.0.0

static/assets/css/game-style.css

@@ -0,0 +1,564 @@
+  /* Layout */
+  body {
+    margin: 0;
+    font-family: Arial, sans-serif;
+    display: flex;
+    background-color: #220a0a;
+    height: 100vh;
+    position: relative;
+    overflow: hidden;
+}
+
+#gameContainer {
+    display: flex;
+    width: 100%;
+    height: 100vh;
+    overflow: auto;
+    position: relative;
+    z-index: 1;
+    align-items: center;
+}
+
+#mapSection {
+    flex: 1;
+    min-width: 600px;
+    width: fit-content;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    overflow: auto;
+    z-index: 2;
+    padding: 20px;
+}
+
+/* We'll place the P5 canvas in here */
+.map-wrapper {
+    margin: 20px;
+    transform-origin: center center;
+    min-width: min-content;
+}
+
+#chatSection {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background: #000000;
+    border-radius: 38px;
+    overflow: hidden;
+}
+
+#chatHistory {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+    background: #f8f8fa;
+}
+
+/* Style moderne pour la barre de scroll */
+#chatHistory::-webkit-scrollbar {
+    width: 6px;
+}
+
+#chatHistory::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+#chatHistory::-webkit-scrollbar-thumb {
+    background: #d1d1d6;
+    border-radius: 3px;
+}
+
+#chatControls {
+    padding: 16px;
+    background: #ffffff;
+    display: flex;
+    gap: 12px;
+    border-top: 1px solid #f1f1f5;
+}
+
+.chat-message {
+    padding: 12px 16px;
+    margin: 6px 0;
+    border-radius: 20px;
+    max-width: 75%;
+    font-size: 0.95em;
+    line-height: 1.4;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.user-message {
+    background: #007aff;
+    color: white;
+    margin-left: auto;
+    border-radius: 20px 20px 4px 20px;
+}
+
+.assistant-message {
+    background: #f1f1f5;
+    color: #000000;
+    margin-right: auto;
+    border-radius: 20px 20px 20px 4px;
+}
+
+input {
+    flex: 1;
+    padding: 12px 16px;
+    border: none;
+    border-radius: 20px;
+    font-family: inherit;
+    font-size: 0.95em;
+    background: #f1f1f5;
+    transition: background 0.2s;
+}
+
+input:focus {
+    outline: none;
+    background: #e5e5ea;
+}
+
+input::placeholder {
+    color: #8e8e93;
+}
+
+button {
+    padding: 8px;
+    width: 40px;
+    height: 40px;
+    background: #007aff;
+    color: white;
+    border: none;
+    border-radius: 20px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.2s, background 0.2s;
+}
+
+button:hover {
+    background: #0056b3;
+    transform: scale(1.05);
+}
+
+/* Style moderne pour l'indicateur de chargement */
+.loading-dots {
+    display: inline-flex;
+    gap: 4px;
+    padding: 8px 12px;
+    background: #f1f1f5;
+    border-radius: 16px;
+}
+
+.dot {
+    width: 6px;
+    height: 6px;
+    background: #8e8e93;
+    border-radius: 50%;
+    animation: bounce 1.4s infinite ease-in-out;
+}
+
+.dot:nth-child(1) {
+    animation-delay: -0.32s;
+}
+
+.dot:nth-child(2) {
+    animation-delay: -0.16s;
+}
+
+@keyframes bounce {
+
+    0%,
+    80%,
+    100% {
+        transform: scale(0);
+    }
+
+    40% {
+        transform: scale(1);
+    }
+}
+
+/* Modal for API key (if needed) */
+#apiKeyModal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    justify-content: center;
+    align-items: center;
+}
+
+.modal-content {
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    width: 300px;
+}
+
+#apiKey {
+    width: 100%;
+    margin: 10px 0;
+    padding: 8px;
+}
+
+/* Modifier les styles du chat et du mockup */
+.phone-mockup {
+    position: relative;
+    width: 400px;
+    height: 800px;
+    background: url("/static/assets/img/phone.png") no-repeat center;
+    background-size: contain;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
+    padding: 35px 0;
+    flex-shrink: 0;
+    z-index: 2;
+}
+
+.phone-screen {
+    width: 90%;
+    height: 96.5%;
+    position: relative;
+    overflow: hidden;
+    margin: 0;
+    border-radius: 40px;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Update media queries for better responsiveness */
+@media (max-height: 900px) {
+    .phone-mockup {
+        width: 350px;
+        height: 700px;
+    }
+}
+
+@media (max-height: 700px) {
+    .phone-mockup {
+        width: 300px;
+        height: 600px;
+    }
+}
+
+@media (max-width: 1200px) {
+    #mapSection {
+        flex: none;
+        width: fit-content;
+    }
+}
+
+@media (max-width: 900px) {
+    #mapSection {
+        flex: none;
+        width: fit-content;
+    }
+    .phone-mockup {
+        min-width: 280px;
+    }
+}
+
+/* Ajouter les nouveaux styles pour l'en-tête du chat */
+#chatHeader {
+    padding: 16px;
+    justify-content: center;
+    background: #ffffff;
+    border-bottom: 1px solid #f1f1f5;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.profile-picture {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: #f1f1f5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.chat-name {
+    font-size: 1.1em;
+    font-weight: 600;
+    color: #000000;
+}
+
+/* LED Bar */
+.led-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: linear-gradient(90deg,
+            transparent 0%,
+            rgba(255, 0, 0, 0.4) 20%,
+            rgba(255, 0, 0, 0.8) 35%,
+            rgba(255, 50, 50, 1) 50%,
+            rgba(255, 0, 0, 0.8) 65%,
+            rgba(255, 0, 0, 0.4) 80%,
+            transparent 100%);
+    z-index: 100;
+    animation: ledFlicker 4s infinite, ledPulse 10s infinite;
+    box-shadow: 0 0 20px rgba(255, 0, 0, 0.7),
+        0 0 35px rgba(255, 0, 0, 0.5),
+        0 0 50px rgba(255, 0, 0, 0.4),
+        0 0 70px rgba(155, 0, 0, 0.3);
+    filter: blur(0.6px);
+}
+
+.light-beam {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 250px;
+    background: linear-gradient(180deg,
+            rgba(255, 0, 0, 0.3) 0%,
+            rgba(255, 0, 0, 0.2) 20%,
+            rgba(255, 0, 0, 0.15) 30%,
+            rgba(155, 0, 0, 0.08) 60%,
+            transparent 100%);
+    animation: beamFlicker 4s infinite;
+    pointer-events: none;
+    filter: blur(2px);
+}
+
+@keyframes ledFlicker {
+    0% {
+        opacity: 1;
+    }
+
+    95% {
+        opacity: 1;
+    }
+
+    96% {
+        opacity: 0.3;
+    }
+
+    97% {
+        opacity: 1;
+    }
+
+    98% {
+        opacity: 0.2;
+    }
+
+    99% {
+        opacity: 0.9;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes ledPulse {
+    0% {
+        filter: brightness(1) blur(0.6px);
+    }
+
+    50% {
+        filter: brightness(1.3) blur(0.4px);
+    }
+
+    100% {
+        filter: brightness(1) blur(0.6px);
+    }
+}
+
+@keyframes beamFlicker {
+    0% {
+        opacity: 0.7;
+    }
+
+    95% {
+        opacity: 0.7;
+    }
+
+    96% {
+        opacity: 0.2;
+    }
+
+    97% {
+        opacity: 0.7;
+    }
+
+    98% {
+        opacity: 0.1;
+    }
+
+    99% {
+        opacity: 0.6;
+    }
+
+    100% {
+        opacity: 0.7;
+    }
+}
+
+/* Background Elements */
+.background-elements {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 1;
+}
+
+.blood {
+    position: absolute;
+    top: 94%;
+    opacity: 0.6;
+    transform: rotate(20deg);
+    right: 10%;
+}
+
+.blood-top-left {
+    top: 0;
+    left: 0;
+    width: 300px;
+}
+
+.blood-top-right {
+    top: 0;
+    right: 0;
+    width: 200px;
+    transform: rotate(20deg);
+}
+
+.splatter {
+    bottom: 20%;
+    left: 10%;
+    width: 200px;
+}
+
+.blood-bottom-right {
+    bottom: 0;
+    right: 0;
+    position: absolute;
+    top: 90%;
+    left: 90%;
+    width: 200px;
+}
+
+/* Sound button styles */
+.sound-button {
+    position: fixed;
+    bottom: 20px;
+    left: 20px;
+    width: 100px;
+    height: 100px;
+    cursor: pointer;
+    z-index: 1000;
+    transition: transform 0.2s ease;
+}
+
+.sound-button:hover {
+    transform: scale(1.1);
+}
+
+.sound-button img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+/* Update button styles */
+button {
+    padding: 8px;
+    width: 40px;
+    height: 40px;
+    background: #007aff;
+    color: white;
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.2s, background 0.2s;
+}
+
+button img {
+    width: 15px;
+    height: 15px;
+    color: #ffffff;
+}
+
+.numpad-overlay {
+    position: fixed;
+    top: 50%;
+    right: 52%;
+    transform: translateY(-50%);
+    background: rgba(0, 0, 0, 0.9);
+    padding: 20px;
+    border-radius: 10px;
+    z-index: 1000;
+}
+
+.hidden {
+    display: none;
+}
+
+.toggle-numpad {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    padding: 10px 15px;
+    font-size: 20px;
+    background: #333;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    z-index: 1001;
+}
+
+.numpad-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+    max-width: 300px;
+    margin: 10px auto;
+}
+
+.numpad-key {
+    padding: 25px;
+    font-size: 27px;
+    border: 1px solid #444;
+    background: #333;
+    color: white;
+    cursor: pointer;
+    border-radius: 5px;
+}
+
+.numpad-key:hover {
+    background: #444;
+}
+
+.numpad-display {
+    text-align: center;
+    font-size: 24px;
+    margin: 10px;
+    letter-spacing: 5px;
+    color: white;
+}
+
+/* Update input styles */
+input {
+    border-radius: 10px;
+}

static/assets/css/how-to-play.css

@@ -0,0 +1,429 @@
+/* Styles généraux pour toutes les pages How to Play */
+.content {
+  color: #fff;
+  text-align: center;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 20px;
+}
+
+.content h1 {
+  font-family: "HorrorBrush", cursive;
+  font-size: 64px;
+  color: #9b0000;
+  position: relative;
+  margin-bottom: 30px;
+  letter-spacing: 4px;
+}
+
+/* Styles pour la première page */
+.game-description p {
+  font-size: 2.5rem;
+  margin-bottom: 2rem;
+  color: #fff;
+}
+
+.gf-image {
+  width: 400px;
+  height: auto;
+  margin-top: 50px;
+}
+
+/* Styles pour la deuxième page */
+.objects-container {
+  display: flex;
+  justify-content: center;
+  gap: 50px;
+  margin: 50px 0 30px 0;
+  width: 100%;
+}
+
+.object-type {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 300px;
+}
+
+.object-title {
+  font-family: "HorrorBrush", cursive;
+  font-size: 2.5rem;
+  color: #fff;
+  margin-bottom: 10px;
+}
+
+.sub-text {
+  font-size: 2rem;
+  color: #ffffff;
+  margin-bottom: 20px;
+}
+
+.image-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+/* Styles pour les images tutorielles */
+.tutorial-image {
+  width: 250px;
+  height: 250px;
+  object-fit: contain;
+}
+
+/* Styles de navigation */
+.navigation-buttons {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 50px;
+  margin-top: 30px;
+  width: 100%;
+  height: auto;
+}
+
+.navigation-buttons .back-button,
+.navigation-buttons .next-button {
+  display: inline-block;
+  font-family: "HorrorBrush", cursive;
+  font-size: 36px;
+  color: #fff;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  letter-spacing: 4px;
+  text-transform: uppercase;
+  background-color: rgba(155, 0, 0, 0.3);
+  padding: 10px 30px;
+  border: 2px solid #9b0000;
+  border-radius: 5px;
+  line-height: 1;
+  margin: 0;
+}
+
+.navigation-buttons .back-button {
+  position: static;
+  transform: none;
+  bottom: auto;
+  left: auto;
+}
+
+.navigation-buttons .next-button:hover,
+.navigation-buttons .back-button:hover {
+  color: #9b0000;
+  background-color: rgba(155, 0, 0, 0.1);
+  box-shadow: 0 0 15px rgba(155, 0, 0, 0.5);
+}
+
+/* Style spécifique pour le bouton Back to Menu */
+.back-to-menu {
+  position: absolute;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/* Styles pour la deuxième page */
+.object-type.green .object-title {
+  color: #20bb43;
+}
+
+.object-type.red .object-title {
+  color: #d25658;
+}
+
+.object-type.white .object-title {
+  color: white;
+}
+
+/* Media Queries pour la responsivité */
+@media screen and (max-width: 1200px) {
+  .content {
+    max-width: 95%;
+    padding: 15px;
+  }
+}
+
+@media screen and (max-width: 900px) {
+  .objects-container {
+    flex-direction: column;
+    align-items: center;
+    gap: 40px;
+    margin: 50px 0 30px 0;
+  }
+
+  .object-type {
+    width: 100%;
+    max-width: 400px;
+  }
+
+  .tutorial-image {
+    width: 200px;
+    height: 200px;
+  }
+
+  .content h1 {
+    font-size: 48px;
+  }
+
+  .object-title {
+    font-size: 2rem;
+  }
+
+  .sub-text {
+    font-size: 1.5rem;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .gf-image {
+    width: 90%;
+    max-width: 300px;
+  }
+
+  .content h1 {
+    font-size: 36px;
+  }
+
+  .game-description p {
+    font-size: 1.8rem;
+  }
+
+  .navigation-buttons {
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .navigation-buttons .back-button,
+  .navigation-buttons .next-button {
+    font-size: 28px;
+    padding: 8px 20px;
+  }
+
+  .object-title {
+    font-size: 1.8rem;
+  }
+
+  .sub-text {
+    font-size: 1.2rem;
+  }
+
+  .tutorial-image {
+    width: 180px;
+    height: 180px;
+  }
+}
+
+@media screen and (max-width: 400px) {
+  .content h1 {
+    font-size: 32px;
+  }
+
+  .game-description p {
+    font-size: 1.5rem;
+  }
+
+  .navigation-buttons .back-button,
+  .navigation-buttons .next-button {
+    font-size: 24px;
+    padding: 6px 16px;
+  }
+}
+
+@media screen and (max-height: 800px) {
+  .content {
+    margin-top: 10px;
+  }
+
+  .content h1 {
+    font-size: 48px;
+    margin-bottom: 20px;
+  }
+
+  .game-description p {
+    font-size: 2rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .gf-image {
+    width: 300px;
+    margin-top: 30px;
+  }
+
+  .objects-container {
+    margin: 50px 0 20px 0;
+  }
+
+  .object-type {
+    width: 250px;
+  }
+
+  .tutorial-image {
+    width: 200px;
+    height: 200px;
+  }
+}
+
+@media screen and (max-height: 600px) {
+  .content {
+    margin-top: 5px;
+  }
+
+  .content h1 {
+    font-size: 36px;
+    margin-bottom: 15px;
+  }
+
+  .game-description p {
+    font-size: 1.8rem;
+    margin-bottom: 1rem;
+  }
+
+  .gf-image {
+    width: 250px;
+    margin-top: 20px;
+  }
+
+  .objects-container {
+    margin: 30px 0 15px 0;
+  }
+
+  .object-type {
+    width: 200px;
+  }
+
+  .tutorial-image {
+    width: 180px;
+    height: 180px;
+  }
+
+  .navigation-buttons {
+    margin-top: 30px;
+  }
+
+  .navigation-buttons .back-button,
+  .navigation-buttons .next-button {
+    font-size: 28px;
+    padding: 8px 20px;
+  }
+}
+
+@media screen and (max-height: 500px) {
+  .content h1 {
+    font-size: 32px;
+    margin-bottom: 10px;
+  }
+
+  .game-description p {
+    font-size: 1.5rem;
+  }
+
+  .gf-image {
+    width: 200px;
+    margin-top: 15px;
+  }
+
+  .objects-container {
+    margin: 20px 0 10px 0;
+  }
+
+  .object-type {
+    width: 180px;
+  }
+
+  .tutorial-image {
+    width: 130px;
+    height: 130px;
+  }
+
+  .navigation-buttons {
+    margin-top: 20px;
+  }
+
+  .navigation-buttons .back-button,
+  .navigation-buttons .next-button {
+    font-size: 24px;
+    padding: 6px 16px;
+  }
+}
+
+/* Styles pour la page 3 */
+.main-description {
+  font-size: 2.5rem;
+  color: #fff;
+  font-family: "HorrorBrush", cursive;
+}
+
+.object-type.yellow .object-title {
+  color: #ffd700;
+}
+
+/* Ajustement pour deux objets au lieu de trois */
+.objects-container.two-items {
+  justify-content: center;
+  gap: 100px; /* Plus d'espace entre deux éléments */
+}
+
+/* Media queries pour la page 3 */
+@media screen and (max-width: 900px) {
+  .main-description {
+    font-size: 2rem;
+    margin: 20px 0;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .main-description {
+    font-size: 1.8rem;
+    margin: 15px 0;
+  }
+}
+
+@media screen and (max-height: 600px) {
+  .main-description {
+    font-size: 1.8rem;
+    margin: 10px 0;
+  }
+}
+
+/* Styles pour la page 4 */
+.video-container {
+  margin-top: 20px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.tutorial-video {
+  max-width: 200px;
+  width: 100%;
+  border-radius: 30px;
+}
+
+/* Media queries pour la page 4 */
+@media screen and (max-width: 900px) {
+  .tutorial-video {
+    max-width: 350px;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .tutorial-video {
+    max-width: 300px;
+  }
+}
+
+@media screen and (max-height: 800px) {
+  .video-container {
+    margin: 30px 0;
+  }
+}
+
+@media screen and (max-height: 600px) {
+  .video-container {
+    margin: 20px 0;
+  }
+}

static/assets/css/index-style.css

@@ -0,0 +1,482 @@
+@font-face {
+  font-family: "HorrorBrush";
+  src: url("/static/assets/fonts/horrorbrush.ttf") format("truetype");
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #000000;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.background-elements {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.blood {
+  position: absolute;
+}
+
+.blood-top-left {
+  top: 0;
+  left: 0;
+  width: 350px;
+  opacity: 50%;
+}
+
+.blood-bottom-right {
+  bottom: 0;
+  right: 0;
+  width: 250px;
+  position: absolute;
+  bottom: -120px;
+  right: -50px;
+  opacity: 40%;
+}
+
+.blood-top-right {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 250px;
+  margin: 20px 20px 0px 0px;
+  transform: rotate(30deg);
+}
+
+.splatter {
+  position: absolute;
+  opacity: 60%;
+  bottom: 240px;
+  left: 30%;
+  transform: translateX(-50%);
+  transform: rotate(20deg);
+  width: 400px;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 100px;
+  z-index: 1;
+}
+
+.logo {
+  position: absolute;
+  top: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  animation: flicker 4s linear infinite;
+}
+
+.logo img {
+  width: 230px;
+  height: auto;
+}
+
+.menu {
+  display: flex;
+  margin-top: 250px;
+  flex-direction: column;
+  gap: 30px;
+  align-items: center;
+  position: relative;
+}
+
+.menu::after {
+  content: "";
+  position: absolute;
+  width: 800px;
+  height: 800px;
+  background: radial-gradient(
+    circle,
+    rgba(155, 0, 0, 0.35) 0%,
+    rgba(0, 0, 0, 0) 70%
+  );
+  z-index: -1;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.menu-item {
+  font-family: "HorrorBrush", cursive;
+  font-size: 48px;
+  color: #fff;
+  text-decoration: none;
+  transition: color 0.3s ease;
+  letter-spacing: 4px;
+  text-transform: uppercase;
+}
+
+.new-game {
+  color: #9b0000;
+}
+
+.menu-item:hover {
+  color: #9b0000;
+}
+
+.how-to-play:hover {
+  color: #9b0000;
+}
+
+.level-maker:hover {
+  color: #9b0000;
+}
+
+@keyframes flicker {
+  0% {
+    opacity: 1;
+  }
+  5% {
+    opacity: 0.9;
+  }
+  10% {
+    opacity: 1;
+  }
+  15% {
+    opacity: 0.4;
+  }
+  16% {
+    opacity: 1;
+  }
+  17% {
+    opacity: 0.4;
+  }
+  18% {
+    opacity: 1;
+  }
+  35% {
+    opacity: 1;
+  }
+  36% {
+    opacity: 0.3;
+  }
+  37% {
+    opacity: 1;
+  }
+  38% {
+    opacity: 0.5;
+  }
+  39% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 1;
+  }
+  51% {
+    opacity: 0.7;
+  }
+  52% {
+    opacity: 1;
+  }
+  53% {
+    opacity: 0.4;
+  }
+  54% {
+    opacity: 1;
+  }
+  85% {
+    opacity: 1;
+  }
+  86% {
+    opacity: 0.6;
+  }
+  87% {
+    opacity: 1;
+  }
+  88% {
+    opacity: 0.4;
+  }
+  89% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.led-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 0, 0, 0.4) 20%,
+    rgba(255, 0, 0, 0.8) 35%,
+    rgba(255, 50, 50, 1) 50%,
+    rgba(255, 0, 0, 0.8) 65%,
+    rgba(255, 0, 0, 0.4) 80%,
+    transparent 100%
+  );
+  z-index: 100;
+  animation: ledFlicker 4s infinite, ledPulse 10s infinite;
+  box-shadow: 0 0 20px rgba(255, 0, 0, 0.7), 0 0 35px rgba(255, 0, 0, 0.5),
+    0 0 50px rgba(255, 0, 0, 0.4), 0 0 70px rgba(155, 0, 0, 0.3);
+  filter: blur(0.6px);
+}
+
+.light-beam {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 250px;
+  background: linear-gradient(
+    180deg,
+    rgba(255, 0, 0, 0.3) 0%,
+    rgba(255, 0, 0, 0.2) 20%,
+    rgba(255, 0, 0, 0.15) 30%,
+    rgba(155, 0, 0, 0.08) 60%,
+    transparent 100%
+  );
+  animation: beamFlicker 4s infinite;
+  pointer-events: none;
+  filter: blur(2px);
+}
+
+@keyframes ledFlicker {
+  0% {
+    opacity: 1;
+  }
+  95% {
+    opacity: 1;
+  }
+  96% {
+    opacity: 0.3;
+  }
+  97% {
+    opacity: 1;
+  }
+  98% {
+    opacity: 0.2;
+  }
+  99% {
+    opacity: 0.9;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes ledPulse {
+  0% {
+    filter: brightness(1) blur(0.6px);
+  }
+  50% {
+    filter: brightness(1.3) blur(0.4px);
+  }
+  100% {
+    filter: brightness(1) blur(0.6px);
+  }
+}
+
+@keyframes beamFlicker {
+  0% {
+    opacity: 0.7;
+  }
+  95% {
+    opacity: 0.7;
+  }
+  96% {
+    opacity: 0.2;
+  }
+  97% {
+    opacity: 0.7;
+  }
+  98% {
+    opacity: 0.1;
+  }
+  99% {
+    opacity: 0.6;
+  }
+  100% {
+    opacity: 0.7;
+  }
+}
+
+/* How to Play Page Styles */
+.content {
+  color: #fff;
+  text-align: center;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 0px;
+}
+
+.content h1 {
+  font-family: "HorrorBrush", cursive;
+  font-size: 64px;
+  color: #9b0000;
+  position: relative;
+  margin-bottom: 30px;
+  letter-spacing: 4px;
+}
+
+.game-description p {
+  font-size: 2.5rem;
+  margin-bottom: 2rem;
+  color: #fff;
+}
+
+.back-button {
+  font-family: "HorrorBrush", cursive;
+  font-size: 36px;
+  color: #fff;
+  text-decoration: none;
+  transition: color 0.3s ease;
+  letter-spacing: 4px;
+  text-transform: uppercase;
+  position: absolute;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.back-button:hover {
+  color: #9b0000;
+}
+
+.character {
+  position: absolute;
+  bottom: -30px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  animation: characterFlicker 6s infinite;
+}
+
+.character img {
+  width: 550px;
+  height: auto;
+}
+
+@keyframes characterFlicker {
+  0% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  42% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  43% {
+    opacity: 0.8;
+    filter: brightness(1.2);
+  }
+  44% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  45% {
+    opacity: 0.6;
+    filter: brightness(1.3);
+  }
+  46% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  47% {
+    opacity: 0.2;
+    filter: brightness(1.5);
+  }
+  48% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  49% {
+    opacity: 0.4;
+    filter: brightness(1.2);
+  }
+  50% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  80% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  81% {
+    opacity: 0.5;
+    filter: brightness(1.3);
+  }
+  82% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+  100% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+}
+
+/* Modifier les styles pour le bouton son */
+.sound-button {
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+  width: 100px;
+  height: 100px;
+  cursor: pointer;
+  z-index: 1000;
+  transition: transform 0.2s ease;
+}
+
+.sound-button:hover {
+  transform: scale(1.1);
+}
+
+.sound-button img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.gf-image {
+  width: 400px;
+  height: auto;
+  margin-top: 50px;
+}
+
+.next-button {
+  font-family: "HorrorBrush", cursive;
+  font-size: 36px;
+  color: #fff;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  letter-spacing: 4px;
+  text-transform: uppercase;
+  display: block;
+  margin-top: 50px;
+  background-color: rgba(155, 0, 0, 0.3);
+  padding: 10px 30px;
+  border: 2px solid #9b0000;
+  border-radius: 5px;
+}
+
+.next-button:hover {
+  color: #9b0000;
+  background-color: rgba(155, 0, 0, 0.1);
+  box-shadow: 0 0 15px rgba(155, 0, 0, 0.5);
+}