Spaces:

jejunepixels
/

noexit

Running

ckonteos80 commited on Dec 7, 2025

Commit

63572a0

1 Parent(s): 547cd59

Add background image and enhance landing page styles

Introduces NoExitScreenshot.jpg as a full-page background with a dark overlay for improved readability. Refactors index.html to wrap content in a new .content-wrapper, updates container and typography styles for a more immersive and modern look, and revises feature descriptions for clarity.

Files changed (2) hide show

NoExitScreenshot.jpg +0 -0
index.html +59 -38

NoExitScreenshot.jpg ADDED Viewed

index.html CHANGED Viewed

@@ -12,28 +12,47 @@
         }
         body {
-            background: linear-gradient(135deg, #1a1a1a 0%, #2d1b1b 100%);
             color: #e8e8e8;
             font-family: 'Georgia', serif;
             min-height: 100vh;
             display: flex;
             align-items: center;
             justify-content: center;
-            padding: 20px;
         }
         .container {
-            max-width: 700px;
             text-align: center;
-            background: rgba(0, 0, 0, 0.3);
-            padding: 60px 40px;
             border-radius: 8px;
-            border: 1px solid rgba(212, 175, 55, 0.2);
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
         }
         h1 {
-            font-size: 4.5em;
             margin-bottom: 15px;
             color: #D4AF37;
             font-weight: 400;
@@ -42,7 +61,7 @@
         }
         .subtitle {
-            font-size: 1.4em;
             color: #b8b8b8;
             font-style: italic;
             margin-bottom: 40px;
@@ -50,7 +69,7 @@
         }
         .description {
-            font-size: 1.35em;
             line-height: 1.8;
             margin-bottom: 40px;
             color: #d4d4d4;
@@ -60,11 +79,11 @@
         .features {
             text-align: left;
             margin: 40px auto;
-            max-width: 500px;
         }
         .features h2 {
-            font-size: 1.6em;
             color: #D4AF37;
             margin-bottom: 20px;
             text-align: center;
@@ -80,7 +99,7 @@
             padding: 12px 0;
             padding-left: 30px;
             position: relative;
-            font-size: 1.2em;
             line-height: 1.6;
             color: #c8c8c8;
         }
@@ -96,11 +115,11 @@
         .play-button {
             display: inline-block;
             margin-top: 40px;
-            padding: 18px 60px;
             background: linear-gradient(135deg, #8B1538 0%, #6d0f2a 100%);
             color: #D4AF37;
             text-decoration: none;
-            font-size: 1.4em;
             font-weight: bold;
             border-radius: 4px;
             letter-spacing: 3px;
@@ -122,7 +141,7 @@
             margin-top: 50px;
             font-style: italic;
             color: #8B1538;
-            font-size: 1.3em;
             opacity: 0.9;
         }
@@ -147,29 +166,31 @@
     </style>
 </head>
 <body>
-    <div class="container">
-        <h1>No Exit</h1>
-        <div class="subtitle">Inspired by the one act play "No Exit"<br>by Jean-Paul Sartre</div>
-        <div class="description">
-            What happens when you're locked in a room with AI characters who won't let you leave?
-            Inspired by Sartre's existentialist masterpiece, this interactive experiment explores whether
-            hell really is other people—even when those people are algorithms. Rendered in atmospheric
-            pixel art, choose your words carefully; they're watching, learning, and judging.
-        </div>
-        <div class="features">
-            <h2>Experience</h2>
-            <ul>
-                <li>AI-Powered Characters with Memory & Personality</li>
-                <li>Generative Pixel Art</li>
-                <li>Existential Dialogues & Moral Dilemmas</li>
-            </ul>
         </div>
-        <a href="./game/index.html" class="play-button">Enter</a>
-        <div class="quote">"L'enfer, c'est les autres" — Jean-Paul Sartre</div>
     </div>
 </body>
 </html>

         }
         body {
+            background: url('NoExitScreenshot.jpg') center center / cover no-repeat fixed;
             color: #e8e8e8;
             font-family: 'Georgia', serif;
             min-height: 100vh;
+            padding: 40px 20px;
+            margin: 0;
             display: flex;
             align-items: center;
             justify-content: center;
+            position: relative;
+        }
+        body::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.6);
+            z-index: 1;
+        }
+        .content-wrapper {
+            position: relative;
+            z-index: 2;
         }
         .container {
+            max-width: 900px;
             text-align: center;
+            background: rgba(0, 0, 0, 0.85);
+            padding: 80px 60px;
             border-radius: 8px;
+            border: 2px solid rgba(212, 175, 55, 0.4);
+            box-shadow: 0 12px 48px rgba(0, 0, 0, 0.9);
+            backdrop-filter: blur(10px);
         }
         h1 {
+            font-size: 5.5em;
             margin-bottom: 15px;
             color: #D4AF37;
             font-weight: 400;
         }
         .subtitle {
+            font-size: 1.7em;
             color: #b8b8b8;
             font-style: italic;
             margin-bottom: 40px;
         }
         .description {
+            font-size: 1.6em;
             line-height: 1.8;
             margin-bottom: 40px;
             color: #d4d4d4;
         .features {
             text-align: left;
             margin: 40px auto;
+            max-width: 650px;
         }
         .features h2 {
+            font-size: 1.9em;
             color: #D4AF37;
             margin-bottom: 20px;
             text-align: center;
             padding: 12px 0;
             padding-left: 30px;
             position: relative;
+            font-size: 1.4em;
             line-height: 1.6;
             color: #c8c8c8;
         }
         .play-button {
             display: inline-block;
             margin-top: 40px;
+            padding: 20px 70px;
             background: linear-gradient(135deg, #8B1538 0%, #6d0f2a 100%);
             color: #D4AF37;
             text-decoration: none;
+            font-size: 1.7em;
             font-weight: bold;
             border-radius: 4px;
             letter-spacing: 3px;
             margin-top: 50px;
             font-style: italic;
             color: #8B1538;
+            font-size: 1.6em;
             opacity: 0.9;
         }
     </style>
 </head>
 <body>
+    <div class="content-wrapper">
+        <div class="container">
+            <h1>No Exit</h1>
+            <div class="subtitle">Inspired by the one act play "No Exit"<br>by Jean-Paul Sartre</div>
+            <div class="description">
+                What happens when you're locked in a room with AI characters who won't let you leave?
+                Inspired by Sartre's existentialist masterpiece, this interactive experiment explores whether
+                hell really is other people—even when those people are algorithms. Rendered in atmospheric
+                pixel art, choose your words carefully; they're watching, learning, and judging.
+            </div>
+            <div class="features">
+                <h2>Experience</h2>
+                <ul>
+                    <li>3 AI-Powered Characters with Memory & Personality</li>
+                    <li>Atmospheric Generative Pixel Art</li>
+                    <li>Existential Dialogues & Moral Dilemmas</li>
+                </ul>
+            </div>
+            <a href="./game/index.html" class="play-button">Enter</a>
+            <div class="quote">"L'enfer, c'est les autres" — Jean-Paul Sartre</div>
         </div>
     </div>
 </body>
 </html>