Hugging Face's logo

Spaces:
HolySmokes1234
/
BETASAINT2.0
Runtime error

App Files Community
HolySmokes1234 commited on
Commit
ac4dcd6
·
verified ·
1 Parent(s): 9c935f2

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +362 -0
index.html ADDED
@@ -0,0 +1,362 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>HOLY SMOKES SAINTIFIER</title>
7
+ <style>
8
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=UnifrakturCook:wght@700&display=swap');
9
+
10
+ :root {
11
+ --gold: #f5c242;
12
+ --deep-purple: #2a0d4a;
13
+ --star-bg: radial-gradient(circle at 25% 25%, #4b0082 0%, #000033 100%);
14
+ }
15
+
16
+ body {
17
+ margin: 0;
18
+ padding: 0;
19
+ background: var(--star-bg);
20
+ color: white;
21
+ font-family: 'Playfair Display', serif;
22
+ overflow-x: hidden;
23
+ position: relative;
24
+ }
25
+
26
+ body::before {
27
+ content: '';
28
+ position: fixed;
29
+ top: 0; left: 0; right: 0; bottom: 0;
30
+ background: url('https://picsum.photos/id/1015/2000/2000') center/cover;
31
+ opacity: 0.15;
32
+ z-index: -1;
33
+ animation: twinkle 8s infinite alternate;
34
+ }
35
+
36
+ @keyframes twinkle {
37
+ 0% { opacity: 0.15; }
38
+ 100% { opacity: 0.25; }
39
+ }
40
+
41
+ .container {
42
+ max-width: 1280px;
43
+ margin: 0 auto;
44
+ padding: 20px;
45
+ }
46
+
47
+ .header {
48
+ text-align: center;
49
+ margin-bottom: 30px;
50
+ }
51
+
52
+ .title {
53
+ font-size: 3.5rem;
54
+ font-family: 'UnifrakturCook', cursive;
55
+ color: var(--gold);
56
+ text-shadow: 0 0 20px var(--gold);
57
+ margin: 0;
58
+ letter-spacing: 4px;
59
+ }
60
+
61
+ .subtitle {
62
+ font-size: 1.3rem;
63
+ color: #e0c0ff;
64
+ margin: 10px 0 0;
65
+ }
66
+
67
+ .phones {
68
+ display: flex;
69
+ gap: 30px;
70
+ justify-content: center;
71
+ flex-wrap: wrap;
72
+ margin: 40px 0;
73
+ }
74
+
75
+ .phone {
76
+ width: 320px;
77
+ background: #111;
78
+ border-radius: 60px;
79
+ padding: 15px;
80
+ box-shadow: 0 0 60px rgba(245, 194, 66, 0.6),
81
+ inset 0 0 40px rgba(255,255,255,0.1);
82
+ position: relative;
83
+ }
84
+
85
+ .phone::before {
86
+ content: '';
87
+ position: absolute;
88
+ top: 12px;
89
+ left: 50%;
90
+ transform: translateX(-50%);
91
+ width: 140px;
92
+ height: 28px;
93
+ background: #111;
94
+ border-radius: 30px;
95
+ z-index: 2;
96
+ }
97
+
98
+ .screen {
99
+ background: linear-gradient(180deg, #1a0033, #2a0d4a);
100
+ border-radius: 45px;
101
+ overflow: hidden;
102
+ height: 620px;
103
+ position: relative;
104
+ border: 8px solid #111;
105
+ }
106
+
107
+ .content {
108
+ padding: 20px;
109
+ height: 100%;
110
+ display: flex;
111
+ flex-direction: column;
112
+ }
113
+
114
+ .gold-frame {
115
+ border: 6px solid var(--gold);
116
+ border-image: linear-gradient(45deg, #f5c242, #ffd700, #f5c242) 1;
117
+ padding: 15px;
118
+ background: rgba(255,255,255,0.05);
119
+ border-radius: 15px;
120
+ box-shadow: 0 0 30px var(--gold);
121
+ }
122
+
123
+ .output-grid {
124
+ display: grid;
125
+ grid-template-columns: 1fr 1fr;
126
+ gap: 30px;
127
+ margin-top: 40px;
128
+ }
129
+
130
+ .card {
131
+ background: rgba(255,255,255,0.08);
132
+ border-radius: 25px;
133
+ overflow: hidden;
134
+ box-shadow: 0 20px 40px rgba(245, 194, 66, 0.3);
135
+ transition: transform 0.3s;
136
+ }
137
+
138
+ .card:hover {
139
+ transform: scale(1.03);
140
+ }
141
+
142
+ .btn {
143
+ background: linear-gradient(45deg, #f5c242, #ffd700);
144
+ color: #2a0d4a;
145
+ border: none;
146
+ padding: 18px 40px;
147
+ font-size: 1.4rem;
148
+ font-weight: bold;
149
+ border-radius: 50px;
150
+ cursor: pointer;
151
+ box-shadow: 0 10px 30px rgba(245, 194, 66, 0.5);
152
+ transition: all 0.3s;
153
+ font-family: 'UnifrakturCook', cursive;
154
+ }
155
+
156
+ .btn:hover {
157
+ transform: translateY(-4px);
158
+ box-shadow: 0 20px 40px rgba(245, 194, 66, 0.8);
159
+ }
160
+
161
+ .input-group {
162
+ background: rgba(255,255,255,0.1);
163
+ padding: 20px;
164
+ border-radius: 20px;
165
+ margin-bottom: 20px;
166
+ }
167
+
168
+ label {
169
+ color: var(--gold);
170
+ font-size: 1.1rem;
171
+ display: block;
172
+ margin-bottom: 8px;
173
+ }
174
+ </style>
175
+ </head>
176
+ <body>
177
+ <div class="container">
178
+ <div class="header">
179
+ <h1 class="title">HOLY SMOKES</h1>
180
+ <h2 class="title" style="font-size:2.8rem;margin-top:-15px;">SAINTIFIER</h2>
181
+ <p class="subtitle">Upload your chaos and summon a random saint.<br>Either way, you're getting canonized! 🔥</p>
182
+ </div>
183
+
184
+ <!-- INPUTS -->
185
+ <div style="display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:1100px;margin:0 auto;">
186
+ <div class="input-group">
187
+ <label>📸 Your Chaos (photo to saintify)</label>
188
+ <input type="file" id="photo-upload" accept="image/*" style="width:100%;padding:12px;background:#fff1;border-radius:12px;color:#fff;">
189
+ <div style="margin-top:15px;font-size:0.9rem;color:#e0c0ff;">or leave blank for random saint base</div>
190
+
191
+ <label style="margin-top:25px;">👑 Saint Name</label>
192
+ <input type="text" id="saint-name" value="Santa Vibra Raro" style="width:100%;padding:15px;font-size:1.3rem;background:#2a0d4a;border:3px solid #f5c242;border-radius:12px;color:#fff;">
193
+
194
+ <label style="margin-top:25px;">💥 Your Most Chaotic Sin</label>
195
+ <input type="text" id="chaotic-sin" value="Still has to confess" style="width:100%;padding:15px;font-size:1.3rem;background:#2a0d4a;border:3px solid #f5c242;border-radius:12px;color:#fff;">
196
+
197
+ <div style="margin-top:30px;display:flex;gap:15px;">
198
+ <button onclick="randomSaint()" class="btn" style="flex:1;padding:14px;font-size:1.2rem;">🎲 Random Saint</button>
199
+ <button onclick="canonizeMe()" class="btn" style="flex:1;padding:14px;font-size:1.2rem;">✨ CANONIZE ME</button>
200
+ </div>
201
+ </div>
202
+
203
+ <!-- ADVANCED CHAOS OPTIONS -->
204
+ <div class="input-group" style="background:rgba(255,255,255,0.12);">
205
+ <h3 style="color:#f5c242;margin-top:0;text-align:center;">🌟 Advanced Chaos Options</h3>
206
+
207
+ <label>Your Divine Vibe</label>
208
+ <select id="divine-vibe" style="width:100%;padding:12px;background:#2a0d4a;border:3px solid #f5c242;border-radius:12px;color:#fff;font-size:1.1rem;">
209
+ <option value="Saint of Divine Titles">Saint of Divine Titles</option>
210
+ <option value="Saint of Glitter Chaos">Saint of Glitter Chaos</option>
211
+ <option value="Saint of Unbothered Vibes">Saint of Unbothered Vibes</option>
212
+ <option value="Saint of Delulu Energy">Saint of Delulu Energy</option>
213
+ </select>
214
+
215
+ <label style="margin-top:20px;">Your Sacred Accessory</label>
216
+ <select id="sacred-accessory" style="width:100%;padding:12px;background:#2a0d4a;border:3px solid #f5c242;border-radius:12px;color:#fff;font-size:1.1rem;">
217
+ <option value="Money & Bills">Money & Bills</option>
218
+ <option value="Sequins & Drama">Sequins & Drama</option>
219
+ <option value="Crystal Ball of Chaos">Crystal Ball of Chaos</option>
220
+ <option value="Receipts & Regrets">Receipts & Regrets</option>
221
+ </select>
222
+
223
+ <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:25px;">
224
+ <div>
225
+ <label>Drama Intensity</label>
226
+ <input type="range" id="drama" min="1" max="5" value="3" style="width:100%;">
227
+ <div style="display:flex;justify-content:space-between;font-size:0.9rem;color:#e0c0ff;"><span>1</span><span>5</span></div>
228
+ </div>
229
+ <div>
230
+ <label>Level of Debauch</label>
231
+ <input type="range" id="debauch" min="1" max="5" value="2" style="width:100%;">
232
+ <div style="display:flex;justify-content:space-between;font-size:0.9rem;color:#e0c0ff;"><span>1</span><span>5</span></div>
233
+ </div>
234
+ <div>
235
+ <label>Level of Delulu</label>
236
+ <input type="range" id="delulu" min="1" max="10" value="6" style="width:100%;">
237
+ <div style="display:flex;justify-content:space-between;font-size:0.9rem;color:#e0c0ff;"><span>1</span><span>10</span></div>
238
+ </div>
239
+ </div>
240
+
241
+ <button onclick="randomChaos()" class="btn" style="margin-top:25px;width:100%;">🌌 Random Chaos</button>
242
+ </div>
243
+ </div>
244
+
245
+ <!-- OUTPUT CARDS -->
246
+ <div id="output-area" style="display:none;">
247
+ <h2 style="text-align:center;color:#f5c242;margin:40px 0 20px;font-size:2rem;">✨ YOUR CANONIZED RESULTS ✨</h2>
248
+ <div class="output-grid">
249
+ <!-- Saint Card will be injected here by JS -->
250
+ <div id="saint-card-container" class="card"></div>
251
+
252
+ <!-- Oracle Card will be injected here by JS -->
253
+ <div id="oracle-card-container" class="card"></div>
254
+ </div>
255
+
256
+ <div style="text-align:center;margin-top:30px;">
257
+ <button onclick="downloadBoth()" class="btn" style="font-size:1.1rem;padding:12px 30px;">⬇️ Download Both Cards</button>
258
+ </div>
259
+ </div>
260
+ </div>
261
+
262
+ <script>
263
+ let currentSaintImage = null;
264
+ let currentOracleImage = null;
265
+
266
+ async function randomSaint() {
267
+ // In real app.py this would return a random saint_base_*.png
268
+ // Here we simulate with a placeholder saint image
269
+ const response = await fetch('https://picsum.photos/id/1015/800/800');
270
+ const blob = await response.blob();
271
+ const img = document.createElement('img');
272
+ img.src = URL.createObjectURL(blob);
273
+ currentSaintImage = blob;
274
+ // For demo we just show a toast
275
+ showToast("🎲 Random saint base loaded! Now hit CANONIZE ME");
276
+ }
277
+
278
+ function randomChaos() {
279
+ document.getElementById('divine-vibe').value = ['Saint of Divine Titles','Saint of Glitter Chaos','Saint of Unbothered Vibes','Saint of Delulu Energy'][Math.floor(Math.random()*4)];
280
+ document.getElementById('sacred-accessory').value = ['Money & Bills','Sequins & Drama','Crystal Ball of Chaos','Receipts & Regrets'][Math.floor(Math.random()*4)];
281
+ document.getElementById('drama').value = Math.floor(Math.random()*5)+1;
282
+ document.getElementById('debauch').value = Math.floor(Math.random()*5)+1;
283
+ document.getElementById('delulu').value = Math.floor(Math.random()*10)+1;
284
+ showToast("🌌 Chaos randomized!");
285
+ }
286
+
287
+ async function canonizeMe() {
288
+ const name = document.getElementById('saint-name').value || "Unnamed Saint";
289
+ const sin = document.getElementById('chaotic-sin').value || "Still has to confess";
290
+ const vibe = document.getElementById('divine-vibe').value;
291
+ const accessory = document.getElementById('sacred-accessory').value;
292
+ const drama = parseInt(document.getElementById('drama').value);
293
+ const debauch = parseInt(document.getElementById('debauch').value);
294
+ const delulu = parseInt(document.getElementById('delulu').value);
295
+
296
+ const outputArea = document.getElementById('output-area');
297
+ outputArea.style.display = 'block';
298
+
299
+ // Simulate AI image-to-image + composition (this is where app.py does the real work)
300
+ showToast("🧪 Transforming into saint... (this would call Stable Diffusion img2img in app.py)");
301
+
302
+ // Mock saint card image (in real app it would be the composited PIL result)
303
+ const saintHTML = `
304
+ <div style="padding:20px;text-align:center;background:linear-gradient(#1a0033,#2a0d4a);border-radius:25px;">
305
+ <div style="position:relative;display:inline-block;">
306
+ <img src="https://picsum.photos/id/1015/620/620" style="width:100%;max-width:620px;border-radius:15px;box-shadow:0 0 40px #f5c242;" alt="Saint Card">
307
+ <div style="position:absolute;top:30px;left:0;right:0;text-align:center;color:#f5c242;font-size:2.2rem;font-family:'UnifrakturCook',cursive;text-shadow:0 0 15px #000;letter-spacing:3px;">${name.toUpperCase()}</div>
308
+ <div style="position:absolute;bottom:120px;left:0;right:0;text-align:center;color:#ffd700;font-size:1.4rem;font-weight:bold;text-shadow:0 0 10px #000;">${sin.toUpperCase()}</div>
309
+ <div style="position:absolute;bottom:25px;left:0;right:0;background:rgba(0,0,0,0.7);padding:12px 0;color:#fff;font-size:1.1rem;font-family:'UnifrakturCook',cursive;letter-spacing:4px;">STILL HAS TO CONFESS</div>
310
+ <div style="position:absolute;bottom:5px;left:0;right:0;color:#f5c242;font-size:1.4rem;font-family:'UnifrakturCook',cursive;letter-spacing:6px;">HOLY SMOKES</div>
311
+ </div>
312
+ </div>`;
313
+ document.getElementById('saint-card-container').innerHTML = saintHTML;
314
+
315
+ // Mock oracle card (text on parchment)
316
+ const prayer = `Prayer to ${name} the Unbothered\n\nOh ${name}, 3 a.m. comeback daily.\nBless me with ${accessory} as my dignity's grease\nand that unbothered face slays.\nEdges snatched, receipts gone because of ${sin}.\n\nWerk.\nAmen. ✨`;
317
+
318
+ const oracleHTML = `
319
+ <div style="padding:30px;background:#f5e8c7;color:#2a0d4a;border-radius:25px;height:100%;box-shadow:0 0 40px #f5c242;">
320
+ <div style="border:12px solid #d4a017;padding:25px;height:100%;display:flex;flex-direction:column;">
321
+ <div style="text-align:center;font-size:1.6rem;margin-bottom:20px;font-family:'UnifrakturCook',cursive;">${prayer.split('\n')[0]}</div>
322
+ <div style="flex:1;font-size:1.15rem;line-height:1.7;white-space:pre-line;">${prayer.split('\n').slice(1).join('\n')}</div>
323
+ <div style="text-align:center;margin-top:20px;border-top:4px solid #d4a017;padding-top:15px;">
324
+ <div style="font-size:1.3rem;color:#2a0d4a;font-family:'UnifrakturCook',cursive;">STILL HAS TO CONFESS</div>
325
+ <div style="color:#d4a017;font-size:1.6rem;font-family:'UnifrakturCook',cursive;">HOLY SMOKES</div>
326
+ </div>
327
+ </div>
328
+ </div>`;
329
+ document.getElementById('oracle-card-container').innerHTML = oracleHTML;
330
+
331
+ // Store for download
332
+ currentSaintImage = "saint-card-mock";
333
+ currentOracleImage = "oracle-card-mock";
334
+
335
+ showToast("✅ Canonized! Your saint and oracle cards are ready 🔥");
336
+ }
337
+
338
+ function downloadBoth() {
339
+ if (!currentSaintImage) return;
340
+ showToast("📥 Downloading both cards as PNGs (in real app.py this would use PIL to return real files)");
341
+ // In real Gradio this would be handled by gr.DownloadButton
342
+ alert("In your real Hugging Face Space the cards would download automatically as high-quality PNGs with your custom FONT.ttf applied.");
343
+ }
344
+
345
+ function showToast(msg) {
346
+ const toast = document.createElement('div');
347
+ toast.style.cssText = 'position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:#f5c242;color:#2a0d4a;padding:18px 30px;border-radius:50px;font-weight:bold;box-shadow:0 10px 30px rgba(245,194,66,0.6);z-index:9999;';
348
+ toast.textContent = msg;
349
+ document.body.appendChild(toast);
350
+ setTimeout(() => toast.remove(), 3000);
351
+ }
352
+
353
+ // Keyboard shortcut for fun
354
+ document.addEventListener('keydown', (e) => {
355
+ if (e.metaKey && e.key === "k") {
356
+ e.preventDefault();
357
+ canonizeMe();
358
+ }
359
+ });
360
+ </script>
361
+ </body>
362
+ </html>