Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>HOLY SMOKES SAINTIFIER</title> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=UnifrakturCook:wght@700&display=swap'); | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| background: radial-gradient(circle at center, #2a0d4a 0%, #000022 70%, #000011 100%); | |
| color: white; | |
| font-family: 'Playfair Display', serif; | |
| overflow-x: hidden; | |
| position: relative; | |
| min-height: 100vh; | |
| } | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| background: url('https://picsum.photos/id/1015/2000/1200') center/cover; | |
| opacity: 0.18; | |
| z-index: -2; | |
| animation: twinkle 12s infinite alternate ease-in-out; | |
| } | |
| body::after { | |
| content: ''; | |
| position: fixed; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| background: radial-gradient(circle, rgba(255,215,0,0.08) 0%, transparent 70%); | |
| z-index: -1; | |
| pointer-events: none; | |
| } | |
| @keyframes twinkle { | |
| 0% { opacity: 0.16; } | |
| 100% { opacity: 0.26; } | |
| } | |
| .container { | |
| max-width: 1280px; | |
| margin: 0 auto; | |
| padding: 40px 20px; | |
| } | |
| .header { | |
| text-align: center; | |
| margin-bottom: 50px; | |
| } | |
| .title { | |
| font-family: 'UnifrakturCook', cursive; | |
| font-size: 4.2rem; | |
| color: #f5c242; | |
| text-shadow: 0 0 30px #f5c242; | |
| margin: 0; | |
| letter-spacing: 6px; | |
| } | |
| .subtitle { | |
| font-size: 1.5rem; | |
| color: #e0c0ff; | |
| margin-top: 10px; | |
| } | |
| .main-content { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 50px; | |
| align-items: start; | |
| } | |
| .input-panel { | |
| background: rgba(255,255,255,0.08); | |
| border-radius: 25px; | |
| padding: 35px; | |
| border: 3px solid #f5c242; | |
| box-shadow: 0 0 40px rgba(245, 194, 66, 0.4); | |
| } | |
| .preview { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 30px; | |
| } | |
| .phone { | |
| width: 100%; | |
| max-width: 340px; | |
| background: #0f0f1f; | |
| border-radius: 55px; | |
| padding: 18px; | |
| box-shadow: 0 0 60px rgba(245, 194, 66, 0.7), | |
| inset 0 0 30px rgba(255,255,255,0.08); | |
| margin: 0 auto; | |
| } | |
| .screen { | |
| background: linear-gradient(180deg, #1a0033, #2a0d4a); | |
| border-radius: 40px; | |
| overflow: hidden; | |
| height: 620px; | |
| position: relative; | |
| border: 10px solid #111; | |
| } | |
| .output-area { | |
| margin-top: 60px; | |
| text-align: center; | |
| } | |
| .btn { | |
| background: linear-gradient(45deg, #f5c242, #ffd700); | |
| color: #2a0d4a; | |
| border: none; | |
| padding: 16px 40px; | |
| font-size: 1.35rem; | |
| font-weight: bold; | |
| border-radius: 50px; | |
| cursor: pointer; | |
| font-family: 'UnifrakturCook', cursive; | |
| box-shadow: 0 10px 30px rgba(245, 194, 66, 0.6); | |
| transition: all 0.3s; | |
| } | |
| .btn:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 50px rgba(245, 194, 66, 0.9); | |
| } | |
| label { | |
| color: #f5c242; | |
| font-size: 1.15rem; | |
| display: block; | |
| margin: 20px 0 8px; | |
| } | |
| input[type="text"], select, input[type="file"] { | |
| width: 100%; | |
| padding: 14px; | |
| background: #2a0d4a; | |
| border: 3px solid #f5c242; | |
| border-radius: 12px; | |
| color: white; | |
| font-size: 1.1rem; | |
| } | |
| .slider-label { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.95rem; | |
| color: #e0c0ff; | |
| margin-top: 5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <h1 class="title">HOLY SMOKES</h1> | |
| <h2 class="title" style="font-size:3.2rem; margin-top:-20px;">SAINTIFIER</h2> | |
| <p class="subtitle">Upload your chaos • Summon a random saint • Get canonized 🔥</p> | |
| </div> | |
| <div class="main-content"> | |
| <!-- Left: Controls --> | |
| <div class="input-panel"> | |
| <label>📸 Upload your photo to saintify (optional)</label> | |
| <input type="file" id="photo" accept="image/*"> | |
| <label>👑 Saint Name</label> | |
| <input type="text" id="saint-name" value="Santa Vibra Raro"> | |
| <label>💥 Your Most Chaotic Sin</label> | |
| <input type="text" id="chaotic-sin" value="Still has to confess"> | |
| <button onclick="randomSaint()" class="btn" style="width:100%; margin:25px 0 15px;">🎲 Random Saint Base</button> | |
| <button onclick="canonizeMe()" class="btn" style="width:100%;">✨ CANONIZE ME</button> | |
| <!-- Advanced Options --> | |
| <details style="margin-top:35px;"> | |
| <summary style="color:#f5c242; font-size:1.3rem; cursor:pointer;">🌟 Advanced Chaos Options</summary> | |
| <div style="margin-top:20px;"> | |
| <label>Your Divine Vibe</label> | |
| <select id="divine-vibe"> | |
| <option value="Saint of Divine Titles">Saint of Divine Titles</option> | |
| <option value="Saint of Glitter Chaos">Saint of Glitter Chaos</option> | |
| <option value="Saint of Unbothered Vibes">Saint of Unbothered Vibes</option> | |
| <option value="Saint of Delulu Energy">Saint of Delulu Energy</option> | |
| </select> | |
| <label>Your Sacred Accessory</label> | |
| <select id="sacred-accessory"> | |
| <option value="Money & Bills">Money & Bills</option> | |
| <option value="Sequins & Drama">Sequins & Drama</option> | |
| <option value="Crystal Ball of Chaos">Crystal Ball of Chaos</option> | |
| <option value="Receipts & Regrets">Receipts & Regrets</option> | |
| </select> | |
| <label>Drama Intensity</label> | |
| <input type="range" id="drama" min="1" max="5" value="3" style="width:100%;"> | |
| <div class="slider-label"><span>Chill</span><span>Maximum Drama</span></div> | |
| <label>Level of Debauch</label> | |
| <input type="range" id="debauch" min="1" max="5" value="2" style="width:100%;"> | |
| <div class="slider-label"><span>Pure</span><span>Full Chaos</span></div> | |
| <label>Level of Delulu</label> | |
| <input type="range" id="delulu" min="1" max="10" value="6" style="width:100%;"> | |
| <div class="slider-label"><span>Grounded</span><span>Maximum Delulu</span></div> | |
| </div> | |
| </details> | |
| </div> | |
| <!-- Right: Phone Previews --> | |
| <div class="preview"> | |
| <div class="phone"> | |
| <div class="screen" id="saint-preview"> | |
| <div style="padding:25px; text-align:center; height:100%; display:flex; flex-direction:column; justify-content:center; color:#f5c242;"> | |
| <h3 style="font-family:'UnifrakturCook', cursive; font-size:2.1rem;">Saint Card Preview</h3> | |
| <p style="margin-top:20px; opacity:0.8;">Your transformed saint with frame, name & sin will appear here after canonization</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="phone"> | |
| <div class="screen" id="oracle-preview"> | |
| <div style="padding:25px; text-align:center; height:100%; display:flex; flex-direction:column; justify-content:center; color:#f5c242;"> | |
| <h3 style="font-family:'UnifrakturCook', cursive; font-size:2.1rem;">Oracle Card Preview</h3> | |
| <p style="margin-top:20px; opacity:0.8;">Personalized prayer card will appear here</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="output-area" id="output-section" style="display:none;"> | |
| <h2 style="color:#f5c242; font-size:2.4rem;">✨ YOUR CANONIZED RESULTS ✨</h2> | |
| <p style="margin:10px 0 30px; font-size:1.2rem;">Download both cards from your live Space after generation</p> | |
| <a href="https://your-space-name.hf.space" target="_blank" class="btn" style="font-size:1.4rem; padding:18px 50px;"> | |
| → Go to Live App & Generate Real Cards | |
| </a> | |
| </div> | |
| </div> | |
| <script> | |
| function randomSaint() { | |
| alert("🎲 In the real app.py this loads a random saint_base_*.png\n\nTry uploading a photo or hit CANONIZE ME!"); | |
| } | |
| function canonizeMe() { | |
| const name = document.getElementById("saint-name").value; | |
| const sin = document.getElementById("chaotic-sin").value; | |
| document.getElementById("output-section").style.display = "block"; | |
| // Update previews with entered values | |
| document.getElementById("saint-preview").innerHTML = ` | |
| <div style="padding:20px; text-align:center; color:#ffd700;"> | |
| <div style="font-size:2.4rem; margin-bottom:15px; font-family:'UnifrakturCook', cursive;">${name.toUpperCase()}</div> | |
| <div style="font-size:1.4rem; margin-bottom:30px;">${sin}</div> | |
| <div style="border:4px solid #f5c242; padding:12px; display:inline-block; border-radius:12px;"> | |
| STILL HAS TO CONFESS<br> | |
| <span style="font-size:1.6rem; color:#f5c242;">HOLY SMOKES</span> | |
| </div> | |
| </div>`; | |
| alert(`✅ Canonization request sent!\n\nName: ${name}\nSin: ${sin}\n\nNow go to your live Hugging Face Space and click "CANONIZE ME" there for real AI-generated cards with your frames and FONT.ttf!`); | |
| } | |
| // Bonus: Press Ctrl/Cmd + K to canonize | |
| document.addEventListener("keydown", (e) => { | |
| if ((e.ctrlKey || e.metaKey) && e.key === "k") { | |
| e.preventDefault(); | |
| canonizeMe(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |