Hugging Face's logo

Spaces:
jejunepixels
/
noexit
Running

App Files Community
ckonteos80 commited on
Commit
547cd59
·
1 Parent(s): 4f6d1df

Update index.html

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