Hugging Face's logo

Spaces:
jejunepixels
/
noexit
Running

App Files Community
jejunepixels commited on
Commit
da0be06
·
1 Parent(s): 7499e3d

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +196 -0
index.html ADDED
@@ -0,0 +1,196 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>NoExit – An Interactive AI Experiment</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ body {
15
+ background: url('NoExitScreenshot.jpg') center center / cover no-repeat fixed;
16
+ color: #e8e8e8;
17
+ font-family: 'Georgia', serif;
18
+ min-height: 100vh;
19
+ padding: 40px 20px;
20
+ margin: 0;
21
+ display: flex;
22
+ align-items: center;
23
+ justify-content: center;
24
+ position: relative;
25
+ }
26
+
27
+ body::before {
28
+ content: '';
29
+ position: absolute;
30
+ top: 0;
31
+ left: 0;
32
+ right: 0;
33
+ bottom: 0;
34
+ background: rgba(0, 0, 0, 0.6);
35
+ z-index: 1;
36
+ }
37
+
38
+ .content-wrapper {
39
+ position: relative;
40
+ z-index: 2;
41
+ }
42
+
43
+ .container {
44
+ max-width: 900px;
45
+ text-align: center;
46
+ background: rgba(0, 0, 0, 0.85);
47
+ padding: 80px 60px;
48
+ border-radius: 8px;
49
+ border: 2px solid rgba(212, 175, 55, 0.4);
50
+ box-shadow: 0 12px 48px rgba(0, 0, 0, 0.9);
51
+ backdrop-filter: blur(10px);
52
+ }
53
+
54
+ h1 {
55
+ font-size: 5.5em;
56
+ margin-bottom: 15px;
57
+ color: #D4AF37;
58
+ font-weight: 400;
59
+ letter-spacing: 2px;
60
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
61
+ }
62
+
63
+ .subtitle {
64
+ font-size: 1.7em;
65
+ color: #b8b8b8;
66
+ font-style: italic;
67
+ margin-bottom: 40px;
68
+ letter-spacing: 1px;
69
+ }
70
+
71
+ .description {
72
+ font-size: 1.6em;
73
+ line-height: 1.8;
74
+ margin-bottom: 40px;
75
+ color: #d4d4d4;
76
+ font-family: 'Helvetica Neue', Arial, sans-serif;
77
+ }
78
+
79
+ .features {
80
+ text-align: left;
81
+ margin: 40px auto;
82
+ max-width: 650px;
83
+ }
84
+
85
+ .features h2 {
86
+ font-size: 1.9em;
87
+ color: #D4AF37;
88
+ margin-bottom: 20px;
89
+ text-align: center;
90
+ font-weight: 400;
91
+ letter-spacing: 1px;
92
+ }
93
+
94
+ .features ul {
95
+ list-style: none;
96
+ }
97
+
98
+ .features li {
99
+ padding: 12px 0;
100
+ padding-left: 30px;
101
+ position: relative;
102
+ font-size: 1.4em;
103
+ line-height: 1.6;
104
+ color: #c8c8c8;
105
+ }
106
+
107
+ .features li:before {
108
+ content: "→";
109
+ position: absolute;
110
+ left: 0;
111
+ color: #8B1538;
112
+ font-weight: bold;
113
+ }
114
+
115
+ .play-button {
116
+ display: inline-block;
117
+ margin-top: 40px;
118
+ padding: 20px 70px;
119
+ background: linear-gradient(135deg, #8B1538 0%, #6d0f2a 100%);
120
+ color: #D4AF37;
121
+ text-decoration: none;
122
+ font-size: 1.7em;
123
+ font-weight: bold;
124
+ border-radius: 4px;
125
+ letter-spacing: 3px;
126
+ text-transform: uppercase;
127
+ border: 2px solid #D4AF37;
128
+ transition: all 0.3s ease;
129
+ box-shadow: 0 4px 15px rgba(139, 21, 56, 0.4);
130
+ font-family: 'Helvetica Neue', Arial, sans-serif;
131
+ }
132
+
133
+ .play-button:hover {
134
+ background: linear-gradient(135deg, #D4AF37 0%, #b8941f 100%);
135
+ color: #1a1a1a;
136
+ transform: translateY(-2px);
137
+ box-shadow: 0 6px 25px rgba(212, 175, 55, 0.5);
138
+ }
139
+
140
+ .quote {
141
+ margin-top: 50px;
142
+ font-style: italic;
143
+ color: #8B1538;
144
+ font-size: 1.6em;
145
+ opacity: 0.9;
146
+ }
147
+
148
+ @media (max-width: 768px) {
149
+ .container {
150
+ padding: 40px 25px;
151
+ }
152
+
153
+ h1 {
154
+ font-size: 2.5em;
155
+ }
156
+
157
+ .description {
158
+ font-size: 1.05em;
159
+ }
160
+
161
+ .play-button {
162
+ padding: 15px 40px;
163
+ font-size: 1.2em;
164
+ }
165
+ }
166
+ </style>
167
+ </head>
168
+ <body>
169
+ <div class="content-wrapper">
170
+ <div class="container">
171
+ <h1>No Exit</h1>
172
+ <div class="subtitle">Inspired by the one act play "No Exit"<br>by Jean-Paul Sartre</div>
173
+
174
+ <div class="description">
175
+ What happens when you're locked in a room with AI characters who won't let you leave?
176
+ Inspired by Sartre's existentialist masterpiece, this interactive experiment explores whether
177
+ hell really is other people—even when those people are algorithms. Rendered in atmospheric
178
+ pixel art, choose your words carefully; they're watching, learning, and judging.
179
+ </div>
180
+
181
+ <div class="features">
182
+ <h2>Experience</h2>
183
+ <ul>
184
+ <li>3 AI-Powered Characters with Memory & Personality</li>
185
+ <li>Atmospheric Generative Pixel Art</li>
186
+ <li>Existential Dialogues & Moral Dilemmas</li>
187
+ </ul>
188
+ </div>
189
+
190
+ <a href="./game/index.html" class="play-button">Enter</a>
191
+
192
+ <div class="quote">"L'enfer, c'est les autres" — Jean-Paul Sartre</div>
193
+ </div>
194
+ </div>
195
+ </body>
196
+ </html>