Update index.html

index.html

@@ -6,170 +6,156 @@
     <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');
-        
-        :root {
-            --gold: #f5c242;
-            --deep-purple: #2a0d4a;
-            --star-bg: radial-gradient(circle at 25% 25%, #4b0082 0%, #000033 100%);
-        }
-        
+
         body {
             margin: 0;
             padding: 0;
-            background: var(--star-bg);
+            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/2000') center/cover;
-            opacity: 0.15;
+            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;
-            animation: twinkle 8s infinite alternate;
+            pointer-events: none;
         }
-        
+
         @keyframes twinkle {
-            0% { opacity: 0.15; }
-            100% { opacity: 0.25; }
+            0% { opacity: 0.16; }
+            100% { opacity: 0.26; }
         }
-        
+
         .container {
             max-width: 1280px;
             margin: 0 auto;
-            padding: 20px;
+            padding: 40px 20px;
         }
-        
+
         .header {
             text-align: center;
-            margin-bottom: 30px;
+            margin-bottom: 50px;
         }
-        
+
         .title {
-            font-size: 3.5rem;
             font-family: 'UnifrakturCook', cursive;
-            color: var(--gold);
-            text-shadow: 0 0 20px var(--gold);
+            font-size: 4.2rem;
+            color: #f5c242;
+            text-shadow: 0 0 30px #f5c242;
             margin: 0;
-            letter-spacing: 4px;
+            letter-spacing: 6px;
         }
-        
+
         .subtitle {
-            font-size: 1.3rem;
+            font-size: 1.5rem;
             color: #e0c0ff;
-            margin: 10px 0 0;
+            margin-top: 10px;
+        }
+
+        .main-content {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 50px;
+            align-items: start;
         }
-        
-        .phones {
+
+        .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;
-            justify-content: center;
-            flex-wrap: wrap;
-            margin: 40px 0;
         }
-        
+
         .phone {
-            width: 320px;
-            background: #111;
-            border-radius: 60px;
-            padding: 15px;
-            box-shadow: 0 0 60px rgba(245, 194, 66, 0.6),
-                        inset 0 0 40px rgba(255,255,255,0.1);
-            position: relative;
-        }
-        
-        .phone::before {
-            content: '';
-            position: absolute;
-            top: 12px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 140px;
-            height: 28px;
-            background: #111;
-            border-radius: 30px;
-            z-index: 2;
+            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: 45px;
+            border-radius: 40px;
             overflow: hidden;
             height: 620px;
             position: relative;
-            border: 8px solid #111;
+            border: 10px solid #111;
         }
-        
-        .content {
-            padding: 20px;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .gold-frame {
-            border: 6px solid var(--gold);
-            border-image: linear-gradient(45deg, #f5c242, #ffd700, #f5c242) 1;
-            padding: 15px;
-            background: rgba(255,255,255,0.05);
-            border-radius: 15px;
-            box-shadow: 0 0 30px var(--gold);
-        }
-        
-        .output-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 30px;
-            margin-top: 40px;
-        }
-        
-        .card {
-            background: rgba(255,255,255,0.08);
-            border-radius: 25px;
-            overflow: hidden;
-            box-shadow: 0 20px 40px rgba(245, 194, 66, 0.3);
-            transition: transform 0.3s;
-        }
-        
-        .card:hover {
-            transform: scale(1.03);
+
+        .output-area {
+            margin-top: 60px;
+            text-align: center;
         }
-        
+
         .btn {
             background: linear-gradient(45deg, #f5c242, #ffd700);
             color: #2a0d4a;
             border: none;
-            padding: 18px 40px;
-            font-size: 1.4rem;
+            padding: 16px 40px;
+            font-size: 1.35rem;
             font-weight: bold;
             border-radius: 50px;
             cursor: pointer;
-            box-shadow: 0 10px 30px rgba(245, 194, 66, 0.5);
-            transition: all 0.3s;
             font-family: 'UnifrakturCook', cursive;
+            box-shadow: 0 10px 30px rgba(245, 194, 66, 0.6);
+            transition: all 0.3s;
         }
-        
+
         .btn:hover {
-            transform: translateY(-4px);
-            box-shadow: 0 20px 40px rgba(245, 194, 66, 0.8);
-        }
-        
-        .input-group {
-            background: rgba(255,255,255,0.1);
-            padding: 20px;
-            border-radius: 20px;
-            margin-bottom: 20px;
+            transform: translateY(-5px);
+            box-shadow: 0 20px 50px rgba(245, 194, 66, 0.9);
         }
-        
+
         label {
-            color: var(--gold);
-            font-size: 1.1rem;
+            color: #f5c242;
+            font-size: 1.15rem;
             display: block;
-            margin-bottom: 8px;
+            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>
@@ -177,182 +163,119 @@
     <div class="container">
         <div class="header">
             <h1 class="title">HOLY SMOKES</h1>
-            <h2 class="title" style="font-size:2.8rem;margin-top:-15px;">SAINTIFIER</h2>
-            <p class="subtitle">Upload your chaos and summon a random saint.<br>Either way, you're getting canonized! 🔥</p>
+            <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>
 
-        <!-- INPUTS -->
-        <div style="display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:1100px;margin:0 auto;">
-            <div class="input-group">
-                <label>📸 Your Chaos (photo to saintify)</label>
-                <input type="file" id="photo-upload" accept="image/*" style="width:100%;padding:12px;background:#fff1;border-radius:12px;color:#fff;">
-                <div style="margin-top:15px;font-size:0.9rem;color:#e0c0ff;">or leave blank for random saint base</div>
-                
-                <label style="margin-top:25px;">👑 Saint Name</label>
-                <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;">
-                
-                <label style="margin-top:25px;">💥 Your Most Chaotic Sin</label>
-                <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;">
-                
-                <div style="margin-top:30px;display:flex;gap:15px;">
-                    <button onclick="randomSaint()" class="btn" style="flex:1;padding:14px;font-size:1.2rem;">🎲 Random Saint</button>
-                    <button onclick="canonizeMe()" class="btn" style="flex:1;padding:14px;font-size:1.2rem;">✨ CANONIZE ME</button>
-                </div>
-            </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>
 
-            <!-- ADVANCED CHAOS OPTIONS -->
-            <div class="input-group" style="background:rgba(255,255,255,0.12);">
-                <h3 style="color:#f5c242;margin-top:0;text-align:center;">🌟 Advanced Chaos Options</h3>
-                
-                <label>Your Divine Vibe</label>
-                <select id="divine-vibe" style="width:100%;padding:12px;background:#2a0d4a;border:3px solid #f5c242;border-radius:12px;color:#fff;font-size:1.1rem;">
-                    <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 style="margin-top:20px;">Your Sacred Accessory</label>
-                <select id="sacred-accessory" style="width:100%;padding:12px;background:#2a0d4a;border:3px solid #f5c242;border-radius:12px;color:#fff;font-size:1.1rem;">
-                    <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>
-                
-                <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:25px;">
-                    <div>
                         <label>Drama Intensity</label>
                         <input type="range" id="drama" min="1" max="5" value="3" style="width:100%;">
-                        <div style="display:flex;justify-content:space-between;font-size:0.9rem;color:#e0c0ff;"><span>1</span><span>5</span></div>
-                    </div>
-                    <div>
+                        <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 style="display:flex;justify-content:space-between;font-size:0.9rem;color:#e0c0ff;"><span>1</span><span>5</span></div>
-                    </div>
-                    <div>
+                        <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 style="display:flex;justify-content:space-between;font-size:0.9rem;color:#e0c0ff;"><span>1</span><span>10</span></div>
+                        <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>
-                
-                <button onclick="randomChaos()" class="btn" style="margin-top:25px;width:100%;">🌌 Random Chaos</button>
             </div>
         </div>
 
-        <!-- OUTPUT CARDS -->
-        <div id="output-area" style="display:none;">
-            <h2 style="text-align:center;color:#f5c242;margin:40px 0 20px;font-size:2rem;">✨ YOUR CANONIZED RESULTS ✨</h2>
-            <div class="output-grid">
-                <!-- Saint Card will be injected here by JS -->
-                <div id="saint-card-container" class="card"></div>
-                
-                <!-- Oracle Card will be injected here by JS -->
-                <div id="oracle-card-container" class="card"></div>
-            </div>
-            
-            <div style="text-align:center;margin-top:30px;">
-                <button onclick="downloadBoth()" class="btn" style="font-size:1.1rem;padding:12px 30px;">⬇️ Download Both Cards</button>
-            </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>
-        let currentSaintImage = null;
-        let currentOracleImage = null;
-
-        async function randomSaint() {
-            // In real app.py this would return a random saint_base_*.png
-            // Here we simulate with a placeholder saint image
-            const response = await fetch('https://picsum.photos/id/1015/800/800');
-            const blob = await response.blob();
-            const img = document.createElement('img');
-            img.src = URL.createObjectURL(blob);
-            currentSaintImage = blob;
-            // For demo we just show a toast
-            showToast("🎲 Random saint base loaded! Now hit CANONIZE ME");
+        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 randomChaos() {
-            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)];
-            document.getElementById('sacred-accessory').value = ['Money & Bills','Sequins & Drama','Crystal Ball of Chaos','Receipts & Regrets'][Math.floor(Math.random()*4)];
-            document.getElementById('drama').value = Math.floor(Math.random()*5)+1;
-            document.getElementById('debauch').value = Math.floor(Math.random()*5)+1;
-            document.getElementById('delulu').value = Math.floor(Math.random()*10)+1;
-            showToast("🌌 Chaos randomized!");
-        }
-
-        async function canonizeMe() {
-            const name = document.getElementById('saint-name').value || "Unnamed Saint";
-            const sin = document.getElementById('chaotic-sin').value || "Still has to confess";
-            const vibe = document.getElementById('divine-vibe').value;
-            const accessory = document.getElementById('sacred-accessory').value;
-            const drama = parseInt(document.getElementById('drama').value);
-            const debauch = parseInt(document.getElementById('debauch').value);
-            const delulu = parseInt(document.getElementById('delulu').value);
-
-            const outputArea = document.getElementById('output-area');
-            outputArea.style.display = 'block';
-
-            // Simulate AI image-to-image + composition (this is where app.py does the real work)
-            showToast("🧪 Transforming into saint... (this would call Stable Diffusion img2img in app.py)");
-
-            // Mock saint card image (in real app it would be the composited PIL result)
-            const saintHTML = `
-                <div style="padding:20px;text-align:center;background:linear-gradient(#1a0033,#2a0d4a);border-radius:25px;">
-                    <div style="position:relative;display:inline-block;">
-                        <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">
-                        <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>
-                        <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>
-                        <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>
-                        <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>
-                    </div>
-                </div>`;
-            document.getElementById('saint-card-container').innerHTML = saintHTML;
-
-            // Mock oracle card (text on parchment)
-            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. ✨`;
+        function canonizeMe() {
+            const name = document.getElementById("saint-name").value;
+            const sin = document.getElementById("chaotic-sin").value;
             
-            const oracleHTML = `
-                <div style="padding:30px;background:#f5e8c7;color:#2a0d4a;border-radius:25px;height:100%;box-shadow:0 0 40px #f5c242;">
-                    <div style="border:12px solid #d4a017;padding:25px;height:100%;display:flex;flex-direction:column;">
-                        <div style="text-align:center;font-size:1.6rem;margin-bottom:20px;font-family:'UnifrakturCook',cursive;">${prayer.split('\n')[0]}</div>
-                        <div style="flex:1;font-size:1.15rem;line-height:1.7;white-space:pre-line;">${prayer.split('\n').slice(1).join('\n')}</div>
-                        <div style="text-align:center;margin-top:20px;border-top:4px solid #d4a017;padding-top:15px;">
-                            <div style="font-size:1.3rem;color:#2a0d4a;font-family:'UnifrakturCook',cursive;">STILL HAS TO CONFESS</div>
-                            <div style="color:#d4a017;font-size:1.6rem;font-family:'UnifrakturCook',cursive;">HOLY SMOKES</div>
-                        </div>
+            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>`;
-            document.getElementById('oracle-card-container').innerHTML = oracleHTML;
-
-            // Store for download
-            currentSaintImage = "saint-card-mock";
-            currentOracleImage = "oracle-card-mock";
             
-            showToast("✅ Canonized! Your saint and oracle cards are ready 🔥");
-        }
-
-        function downloadBoth() {
-            if (!currentSaintImage) return;
-            showToast("📥 Downloading both cards as PNGs (in real app.py this would use PIL to return real files)");
-            // In real Gradio this would be handled by gr.DownloadButton
-            alert("In your real Hugging Face Space the cards would download automatically as high-quality PNGs with your custom FONT.ttf applied.");
-        }
-
-        function showToast(msg) {
-            const toast = document.createElement('div');
-            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;';
-            toast.textContent = msg;
-            document.body.appendChild(toast);
-            setTimeout(() => toast.remove(), 3000);
+            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!`);
         }
 
-        // Keyboard shortcut for fun
-        document.addEventListener('keydown', (e) => {
-            if (e.metaKey && e.key === "k") {
+        // Bonus: Press Ctrl/Cmd + K to canonize
+        document.addEventListener("keydown", (e) => {
+            if ((e.ctrlKey || e.metaKey) && e.key === "k") {
                 e.preventDefault();
                 canonizeMe();
             }