Upload 23 files

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: white;
+  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/How to play/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/How to play/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/How to play/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/How to play/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>