Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NIGHTFALL • Elite Prompt Compiler</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;400;500;600;700&family=Bebas+Neue&family=Syncopate:wght@400;700&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| 'orbitron': ['Orbitron', 'sans-serif'], | |
| 'rajdhani': ['Rajdhani', 'sans-serif'], | |
| 'bebas': ['Bebas Neue', 'cursive'], | |
| 'syncopate': ['Syncopate', 'sans-serif'], | |
| }, | |
| colors: { | |
| 'club-black': '#080505', | |
| 'club-red': '#FF003C', | |
| 'club-red-glow': '#FF003C80', | |
| 'club-pink': '#FF1493', | |
| 'club-pink-glow': '#FF149380', | |
| 'club-gold': '#D4AF37', | |
| 'club-gold-dim': '#8B7355', | |
| 'club-cyan': '#00F0FF', | |
| 'club-amber': '#FF6B35', | |
| 'club-wine': '#4A0011', | |
| 'club-velvet': '#1A0A0F', | |
| 'club-surface': '#120808', | |
| 'club-card': '#0E0606', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| :root { | |
| --neon-red: #FF003C; | |
| --neon-pink: #FF1493; | |
| --neon-gold: #D4AF37; | |
| --neon-cyan: #00F0FF; | |
| } | |
| * { box-sizing: border-box; } | |
| html, body { margin: 0; padding: 0; overflow-x: hidden; } | |
| body { | |
| font-family: 'Rajdhani', sans-serif; | |
| background: #080505; | |
| color: #E8D5C4; | |
| min-height: 100vh; | |
| position: relative; | |
| } | |
| ::-webkit-scrollbar { width: 4px; height: 4px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { background: var(--neon-red); border-radius: 4px; } | |
| ::-webkit-scrollbar-thumb:hover { background: var(--neon-pink); } | |
| .bg-noise { | |
| position: fixed; inset: 0; opacity: 0.03; z-index: 0; pointer-events: none; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); | |
| } | |
| .bg-vignette { | |
| position: fixed; inset: 0; | |
| background: radial-gradient(ellipse at center, transparent 0%, #080505 70%, #000000 100%); | |
| z-index: 1; pointer-events: none; | |
| } | |
| .bg-spotlight { | |
| position: fixed; width: 800px; height: 800px; border-radius: 50%; | |
| background: radial-gradient(circle, rgba(255, 0, 60, 0.08) 0%, transparent 70%); | |
| filter: blur(100px); z-index: 1; pointer-events: none; | |
| animation: spotlightDrift 20s ease-in-out infinite; | |
| } | |
| @keyframes spotlightDrift { | |
| 0%, 100% { top: -20%; left: 20%; transform: scale(1); } | |
| 33% { top: 10%; left: 60%; transform: scale(1.3); } | |
| 66% { top: -10%; left: 40%; transform: scale(0.8); } | |
| } | |
| .stage-beam { | |
| position: fixed; width: 3px; height: 100vh; top: 0; z-index: 1; pointer-events: none; opacity: 0.15; | |
| } | |
| .stage-beam-left { left: 15%; background: linear-gradient(to bottom, transparent, var(--neon-red), transparent); animation: beamSweepLeft 8s ease-in-out infinite; } | |
| .stage-beam-right { right: 15%; background: linear-gradient(to bottom, transparent, var(--neon-pink), transparent); animation: beamSweepRight 10s ease-in-out infinite; } | |
| @keyframes beamSweepLeft { | |
| 0%, 100% { opacity: 0.1; transform: translateX(0) rotate(-5deg); } | |
| 50% { opacity: 0.25; transform: translateX(30px) rotate(5deg); } | |
| } | |
| @keyframes beamSweepRight { | |
| 0%, 100% { opacity: 0.1; transform: translateX(0) rotate(5deg); } | |
| 50% { opacity: 0.25; transform: translateX(-30px) rotate(-5deg); } | |
| } | |
| .confetti-container { position: fixed; inset: 0; z-index: 100; pointer-events: none; overflow: hidden; } | |
| .confetti-particle { position: absolute; width: 8px; height: 8px; opacity: 0; border-radius: 2px; } | |
| @keyframes confettiFall { | |
| 0% { transform: translateY(-20px) rotate(0deg) scale(0); opacity: 0; } | |
| 10% { opacity: 0.9; transform: translateY(0) rotate(45deg) scale(1); } | |
| 90% { opacity: 0.7; transform: translateY(calc(100vh - 40px)) rotate(360deg) scale(0.6); } | |
| 100% { transform: translateY(100vh) rotate(400deg) scale(0); opacity: 0; } | |
| } | |
| @keyframes confettiRise { | |
| 0% { transform: translateY(100vh) rotate(0deg) scale(0); opacity: 0; } | |
| 10% { opacity: 0.8; transform: translateY(calc(100vh - 80px)) rotate(-45deg) scale(1); } | |
| 90% { opacity: 0.5; transform: translateY(20px) rotate(-360deg) scale(0.6); } | |
| 100% { transform: translateY(-20px) rotate(-400deg) scale(0); opacity: 0; } | |
| } | |
| .neon-text { color: var(--neon-red); text-shadow: 0 0 10px var(--neon-red-glow), 0 0 20px var(--neon-red-glow), 0 0 40px var(--neon-red-glow); animation: neonPulse 2s ease-in-out infinite; } | |
| .neon-text-gold { color: var(--neon-gold); text-shadow: 0 0 10px rgba(212, 175, 55, 0.3), 0 0 20px rgba(212, 175, 55, 0.2); } | |
| .neon-text-pink { color: var(--neon-pink); text-shadow: 0 0 10px var(--neon-pink-glow), 0 0 20px var(--neon-pink-glow); } | |
| @keyframes neonPulse { | |
| 0%, 100% { text-shadow: 0 0 10px var(--neon-red-glow), 0 0 20px var(--neon-red-glow), 0 0 40px var(--neon-red-glow); } | |
| 50% { text-shadow: 0 0 5px var(--neon-red-glow), 0 0 10px var(--neon-red-glow), 0 0 20px var(--neon-red-glow); } | |
| } | |
| .neon-border { border: 1px solid var(--neon-red); box-shadow: 0 0 5px var(--neon-red-glow), inset 0 0 5px var(--neon-red-glow), 0 0 0 1px rgba(255, 0, 60, 0.05); position: relative; } | |
| .neon-border-pink { border: 1px solid var(--neon-pink); box-shadow: 0 0 5px var(--neon-pink-glow), inset 0 0 5px var(--neon-pink-glow); } | |
| .neon-border-gold { border: 1px solid var(--neon-gold); box-shadow: 0 0 5px rgba(212, 175, 55, 0.2), inset 0 0 5px rgba(212, 175, 55, 0.05); } | |
| @keyframes logoReveal { | |
| 0% { opacity: 0; transform: translateY(30px) scale(0.9); } | |
| 60% { opacity: 1; transform: translateY(0) scale(1.02); } | |
| 100% { transform: scale(1); } | |
| } | |
| .logo-animate { animation: logoReveal 1.5s ease-out forwards; } | |
| @keyframes cardEntrance { | |
| from { opacity: 0; transform: translateY(30px) scale(0.95); } | |
| to { opacity: 1; transform: translateY(0) scale(1); } | |
| } | |
| .card-entrance { animation: cardEntrance 0.5s ease-out forwards; } | |
| @keyframes cardSelected { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.03); box-shadow: 0 0 30px var(--neon-red-glow); } | |
| 100% { transform: scale(1); } | |
| } | |
| .card-selected-pulse { animation: cardSelected 0.6s ease-out; } | |
| @keyframes shimmerSweep { | |
| 0% { left: -100%; } | |
| 50% { left: 100%; } | |
| 100% { left: 100%; } | |
| } | |
| .shimmer-overlay { position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent); animation: shimmerSweep 4s ease-in-out infinite; pointer-events: none; } | |
| .option-card { | |
| background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 0, 60, 0.08); border-radius: 8px; | |
| padding: 14px 18px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; | |
| } | |
| .option-card::before { | |
| content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 0, 60, 0.06) 0%, transparent 60%); opacity: 0; transition: opacity 0.3s; pointer-events: none; | |
| } | |
| .option-card:hover { border-color: rgba(255, 0, 60, 0.35); transform: translateY(-2px); box-shadow: 0 4px 25px rgba(255, 0, 60, 0.1), 0 0 0 1px rgba(255, 0, 60, 0.08); } | |
| .option-card:hover::before { opacity: 1; } | |
| .option-card.selected { background: rgba(255, 0, 60, 0.06); border-color: var(--neon-red); box-shadow: 0 0 20px rgba(255, 0, 60, 0.15), inset 0 0 20px rgba(255, 0, 60, 0.05); } | |
| .option-card.selected::after { content: '✦'; position: absolute; top: 6px; right: 10px; color: var(--neon-red); font-size: 12px; animation: neonPulse 1.5s ease-in-out infinite; } | |
| .cat-header { background: linear-gradient(90deg, rgba(255, 0, 60, 0.12) 0%, transparent 100%); border-left: 3px solid var(--neon-red); border-radius: 0 6px 6px 0; padding: 12px 16px; margin-bottom: 8px; position: relative; overflow: hidden; } | |
| .cat-header-number { font-family: 'Orbitron', sans-serif; font-size: 11px; color: var(--neon-red); opacity: 0.5; letter-spacing: 2px; } | |
| .cat-pill { | |
| padding: 8px 16px; border-radius: 30px; border: 1px solid rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.02); | |
| color: rgba(232, 213, 196, 0.5); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.3s; white-space: nowrap; font-family: 'Orbitron', sans-serif; letter-spacing: 0.5px; | |
| } | |
| .cat-pill:hover { border-color: rgba(255, 0, 60, 0.3); color: rgba(232, 213, 196, 0.8); background: rgba(255, 0, 60, 0.04); } | |
| .cat-pill.active { border-color: var(--neon-red); background: rgba(255, 0, 60, 0.1); color: #E8D5C4; box-shadow: 0 0 15px rgba(255, 0, 60, 0.15); } | |
| .cat-pill.complete { border-color: rgba(212, 175, 55, 0.4); color: var(--neon-gold); } | |
| .preview-glass { background: rgba(255, 255, 255, 0.01); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; backdrop-filter: blur(20px); position: relative; overflow: hidden; } | |
| .preview-glass::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 0, 60, 0.03) 0%, transparent 40%, transparent 60%, rgba(255, 20, 147, 0.02) 100%); pointer-events: none; } | |
| .step-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); transition: all 0.4s; } | |
| .step-dot.active { background: var(--neon-red); box-shadow: 0 0 10px var(--neon-red-glow); transform: scale(1.3); } | |
| .step-dot.complete { background: var(--neon-gold); box-shadow: 0 0 8px rgba(212, 175, 55, 0.3); } | |
| .step-connector { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.08); margin: 0 4px; } | |
| .step-connector.complete { background: rgba(212, 175, 55, 0.3); } | |
| .btn-club { position: relative; padding: 14px 36px; font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 2px; border-radius: 4px; cursor: pointer; overflow: hidden; transition: all 0.3s; border: none; outline: none; text-transform: uppercase; } | |
| .btn-club::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1), transparent); opacity: 0; transition: opacity 0.3s; } | |
| .btn-club:hover::before { opacity: 1; } | |
| .btn-primary { background: linear-gradient(135deg, #FF003C, #CC0030); color: #fff; box-shadow: 0 0 30px rgba(255, 0, 60, 0.3), 0 4px 20px rgba(255, 0, 60, 0.2); } | |
| .btn-primary:hover { box-shadow: 0 0 50px rgba(255, 0, 60, 0.5), 0 6px 30px rgba(255, 0, 60, 0.3); transform: translateY(-2px); } | |
| .btn-gold { background: linear-gradient(135deg, #B8960B, #8B7355); color: #fff; box-shadow: 0 0 25px rgba(212, 175, 55, 0.2); } | |
| .btn-gold:hover { box-shadow: 0 0 40px rgba(212, 175, 55, 0.4); transform: translateY(-2px); } | |
| .btn-secondary { background: transparent; color: rgba(232, 213, 196, 0.7); border: 1px solid rgba(255, 255, 255, 0.1); } | |
| .btn-secondary:hover { border-color: rgba(255, 0, 60, 0.3); color: #E8D5C4; background: rgba(255, 0, 60, 0.05); } | |
| .scanline { position: fixed; top: 0; left: 0; width: 100%; height: 2px; background: rgba(255, 0, 60, 0.08); z-index: 50; pointer-events: none; animation: scanlineMove 8s linear infinite; } | |
| @keyframes scanlineMove { | |
| 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100vh; opacity: 0; } | |
| } | |
| @keyframes pulseRing { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.5); opacity: 0; } } | |
| .pulse-ring { animation: pulseRing 2s ease-out infinite; } | |
| .tag-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; font-family: 'Orbitron', sans-serif; letter-spacing: 0.5px; transition: all 0.3s; } | |
| .tag-filled { background: rgba(255, 0, 60, 0.1); border: 1px solid rgba(255, 0, 60, 0.2); color: var(--neon-red); } | |
| .tag-empty { background: rgba(255, 255, 255, 0.03); border: 1px dashed rgba(255, 255, 255, 0.1); color: rgba(232, 213, 196, 0.25); } | |
| .selection-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px; transition: all 0.3s; } | |
| .selection-row:hover { background: rgba(255, 0, 60, 0.03); } | |
| .selection-row .sel-label { font-family: 'Orbitron', sans-serif; font-size: 9px; letter-spacing: 1.5px; color: var(--neon-red); opacity: 0.6; text-transform: uppercase; min-width: 60px; flex-shrink: 0; } | |
| .selection-row .sel-value { font-size: 13px; color: #E8D5C4; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } | |
| .selection-row .sel-value.empty { color: rgba(232, 213, 196, 0.2); font-style: italic; } | |
| .modal-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(15px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.4s; } | |
| .modal-overlay.active { opacity: 1; pointer-events: all; } | |
| .modal-panel { max-width: 800px; width: 90%; max-height: 90vh; background: #0A0404; border: 1px solid rgba(255, 0, 60, 0.15); border-radius: 16px; padding: 40px; transform: scale(0.9) translateY(20px); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); overflow-y: auto; box-shadow: 0 0 80px rgba(255, 0, 60, 0.15), 0 40px 80px rgba(0, 0, 0, 0.5); } | |
| .modal-overlay.active .modal-panel { transform: scale(1) translateY(0); } | |
| .age-modal { position: fixed; inset: 0; z-index: 9999; background: #080505; display: flex; align-items: center; justify-content: center; flex-direction: column; } | |
| .age-modal-content { position: relative; max-width: 520px; width: 90%; padding: 48px 40px; text-align: center; border: 1px solid rgba(255, 0, 60, 0.15); border-radius: 12px; background: rgba(10, 4, 4, 0.98); backdrop-filter: blur(40px); box-shadow: 0 0 80px rgba(255, 0, 60, 0.1), 0 30px 60px rgba(0, 0, 0, 0.5); } | |
| .corner-accent { position: absolute; width: 30px; height: 30px; border: 1px solid rgba(255, 0, 60, 0.15); } | |
| .corner-accent-tl { top: -1px; left: -1px; border-right: none; border-bottom: none; } | |
| .corner-accent-tr { top: -1px; right: -1px; border-left: none; border-bottom: none; } | |
| .corner-accent-bl { bottom: -1px; left: -1px; border-right: none; border-top: none; } | |
| .corner-accent-br { bottom: -1px; right: -1px; border-left: none; border-top: none; } | |
| @keyframes ladySway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } } | |
| .lady-silhouette { animation: ladySway 6s ease-in-out infinite; transform-origin: bottom center; } | |
| @keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } | |
| .marquee-track { animation: marqueeScroll 30s linear infinite; } | |
| .marquee-track:hover { animation-play-state: paused; } | |
| .club-ticker { background: linear-gradient(90deg, rgba(255, 0, 60, 0.05), rgba(255, 20, 147, 0.05)); border-top: 1px solid rgba(255, 0, 60, 0.08); border-bottom: 1px solid rgba(255, 0, 60, 0.08); overflow: hidden; } | |
| @media (max-width: 768px) { .hide-mobile { display: none ; } .full-mobile { width: 100% ; } } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Background Effects --> | |
| <div class="bg-noise"></div> | |
| <div class="bg-vignette"></div> | |
| <div class="bg-spotlight"></div> | |
| <div class="stage-beam stage-beam-left"></div> | |
| <div class="stage-beam stage-beam-right"></div> | |
| <div class="scanline"></div> | |
| <!-- Confetti Container --> | |
| <div class="confetti-container" id="confettiContainer"></div> | |
| <!-- AGE VERIFICATION MODAL --> | |
| <div class="age-modal" id="ageModal"> | |
| <div class="age-modal-content"> | |
| <div class="corner-accent corner-accent-tl"></div> | |
| <div class="corner-accent corner-accent-tr"></div> | |
| <div class="corner-accent corner-accent-bl"></div> | |
| <div class="corner-accent corner-accent-br"></div> | |
| <div class="flex justify-center mb-6"> | |
| <svg class="lady-silhouette" width="120" height="180" viewBox="0 0 120 180" fill="none"> | |
| <ellipse cx="60" cy="28" rx="14" ry="16" fill="#FF003C" opacity="0.8" /> | |
| <path d="M46 20 C38 12 30 18 26 28 C24 38 30 46 38 44" stroke="#FF003C" stroke-width="2" fill="none" opacity="0.6" /> | |
| <path d="M74 20 C82 12 90 18 94 28 C96 38 90 46 82 44" stroke="#FF003C" stroke-width="2" fill="none" opacity="0.6" /> | |
| <path d="M60 44 Q68 50 72 60 L75 80 Q76 90 72 100 L68 115 Q64 120 60 125" stroke="#FF003C" stroke-width="2.5" fill="none" opacity="0.7" /> | |
| <path d="M60 44 Q52 50 48 60 L45 80 Q44 90 48 100 L52 115 Q56 120 60 125" stroke="#FF003C" stroke-width="2.5" fill="none" opacity="0.7" /> | |
| <path d="M60 125 Q58 140 55 155 L52 175" stroke="#FF003C" stroke-width="2.5" fill="none" opacity="0.6" /> | |
| <path d="M60 125 Q62 140 65 155 L68 175" stroke="#FF003C" stroke-width="2.5" fill="none" opacity="0.6" /> | |
| <path d="M50 58 Q35 35 40 15" stroke="#FF003C" stroke-width="2" fill="none" opacity="0.5" /> | |
| <path d="M70 58 Q85 35 80 15" stroke="#FF003C" stroke-width="2" fill="none" opacity="0.5" /> | |
| <line x1="60" y1="0" x2="60" y2="180" stroke="#FF003C" stroke-width="1.5" opacity="0.3" /> | |
| <text x="30" y="40" fill="#FF1493" font-size="10" opacity="0.8">✦</text> | |
| <text x="85" y="50" fill="#FF1493" font-size="8" opacity="0.6">✧</text> | |
| <text x="45" y="95" fill="#FF1493" font-size="9" opacity="0.7">✦</text> | |
| </svg> | |
| </div> | |
| <div class="font-syncopate text-sm font-bold text-club-gold tracking-[6px] mb-3">EXPLICIT CONTENT</div> | |
| <h1 class="font-bebas text-5xl md:text-6xl text-white tracking-wider mb-2">NIGHT<span class="text-club-red">FALL</span></h1> | |
| <p class="font-syncopate text-xs text-club-red tracking-[4px] mb-6">PROMPT COMPILER</p> | |
| <div class="w-full h-px bg-gradient-to-r from-transparent via-club-red to-transparent mb-6"></div> | |
| <div class="mb-8"> | |
| <p class="font-rajdhani text-base text-club-gold-dim mb-4 leading-relaxed"> | |
| This application generates <span class="text-club-red font-semibold">adult content prompts</span> intended for mature audiences. | |
| </p> | |
| <div class="flex items-center justify-center gap-3 mb-4"> | |
| <div class="w-2 h-2 rounded-full bg-club-red pulse-ring"></div> | |
| <span class="font-orbitron text-xs text-club-red tracking-wider">18+ ONLY</span> | |
| <div class="w-2 h-2 rounded-full bg-club-red pulse-ring" style="animation-delay: 1s;"></div> | |
| </div> | |
| <p class="font-rajdhani text-sm text-club-gold-dim"> | |
| By entering, you confirm you are of legal age to view explicit material in your jurisdiction. | |
| </p> | |
| </div> | |
| <div class="flex flex-col gap-3 max-w-xs mx-auto"> | |
| <button id="enterBtn" class="btn-club btn-primary w-full"><span class="relative z-10">ENTER THE CLUB</span></button> | |
| <button id="leaveBtn" class="btn-club btn-secondary w-full text-xs"><span class="relative z-10">LEAVE</span></button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- MAIN APPLICATION --> | |
| <div id="mainApp" class="opacity-0 transition-opacity duration-1000" style="display:none;"> | |
| <!-- Header --> | |
| <header class="fixed top-0 left-0 right-0 z-50 border-b border-white/[0.04]" style="background: rgba(8,5,5,0.92); backdrop-filter: blur(20px);"> | |
| <div class="max-w-[1600px] mx-auto px-4 md:px-8 h-16 flex items-center justify-between"> | |
| <div class="flex items-center gap-4"> | |
| <div class="font-bebas text-2xl md:text-3xl text-white tracking-widest logo-animate" id="logoText">NIGHT<span class="text-club-red">FALL</span></div> | |
| <div class="hidden md:block w-px h-6 bg-white/10"></div> | |
| <div class="hidden md:block font-syncopate text-[10px] text-club-gold tracking-[3px]">PROMPT COMPILER</div> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="font-orbitron text-[10px] text-club-gold-dim hover:text-club-gold transition-colors tracking-wider uppercase cursor-pointer"> | |
| Built with <span class="text-club-pink font-bold">anycoder</span> | |
| </a> | |
| <div class="hidden md:block w-px h-6 bg-white/10"></div> | |
| <div class="flex items-center gap-2"> | |
| <span class="font-orbitron text-[10px] text-club-red tracking-wider" id="completionCount">0/16</span> | |
| <div class="w-8 h-1 bg-white/5 rounded-full overflow-hidden"> | |
| <div id="progressBar" class="h-full bg-club-red rounded-full transition-all duration-500" style="width:0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Club Ticker --> | |
| <div class="club-ticker fixed top-16 left-0 right-0 z-40 py-1.5 overflow-hidden"> | |
| <div class="flex whitespace-nowrap marquee-track"> | |
| <span class="font-rajdhani text-[11px] text-club-gold-dim tracking-[2px] px-4">WELCOME TO NIGHTFALL • SELECT YOUR DESIRES • BUILD YOUR VISION • GENERATE WITH PRECISION •</span> | |
| <span class="font-rajdhani text-[11px] text-club-red/60 tracking-[2px] px-4">NSFW PROMPT ENGINE v2.0 • CRAFTED FOR ARTISTS •</span> | |
| <span class="font-rajdhani text-[11px] text-club-gold-dim tracking-[2px] px-4">WELCOME TO NIGHTFALL • SELECT YOUR DESIRES • BUILD YOUR VISION • GENERATE WITH PRECISION •</span> | |
| <span class="font-rajdhani text-[11px] text-club-red/60 tracking-[2px] px-4">NSFW PROMPT ENGINE v2.0 • CRAFTED FOR ARTISTS •</span> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="max-w-[1600px] mx-auto px-4 md:px-8 pt-28 pb-12 flex flex-col lg:flex-row gap-6"> | |
| <!-- LEFT: Category Pills + Options --> | |
| <div class="flex-1 min-w-0"> | |
| <!-- Category Pills --> | |
| <div class="flex gap-2 mb-6 overflow-x-auto pb-2" id="categoryNav" style="scrollbar-width: none; -ms-overflow-style: none;"> | |
| <!-- Injected via JS --> | |
| </div> | |
| <!-- Category Header --> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="cat-header flex-1"> | |
| <div class="cat-header-number" id="catNumber">STEP 01</div> | |
| <h2 class="font-orbitron text-lg md:text-xl text-white tracking-wider" id="catTitle">Gender</h2> | |
| </div> | |
| <div class="ml-4 flex items-center gap-2"> | |
| <button id="prevCatBtn" class="p-2 rounded-lg border border-white/10 text-white/40 hover:text-white/80 hover:border-club-red/50 transition-all"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg> | |
| </button> | |
| <button id="nextCatBtn" class="p-2 rounded-lg border border-white/10 text-white/40 hover:text-white/80 hover:border-club-red/50 transition-all"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Options Grid --> | |
| <div id="optionsGrid" class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3 mb-6"> | |
| <!-- Injected via JS --> | |
| </div> | |
| <!-- Step Dots --> | |
| <div class="flex items-center gap-1 mb-8" id="stepDots"></div> | |
| <!-- Bottom Actions --> | |
| <div class="flex flex-wrap gap-3"> | |
| <button id="autoGenBtn" class="btn-club btn-secondary text-xs"><span class="relative z-10">AUTO-GENERATE</span></button> | |
| <button id="resetBtn" class="btn-club btn-secondary text-xs"><span class="relative z-10">RESET ALL</span></button> | |
| <button id="copyBtn" class="btn-club btn-gold text-xs ml-auto"><span class="relative z-10">COPY PROMPT</span></button> | |
| </div> | |
| </div> | |
| <!-- RIGHT: Live Preview --> | |
| <div class="w-full lg:w-[380px] xl:w-[420px] flex-shrink-0"> | |
| <div class="lg:sticky lg:top-28 space-y-4"> | |
| <div class="preview-glass p-5"> | |
| <div class="shimmer-overlay"></div> | |
| <div class="relative z-10"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-orbitron text-xs text-club-gold tracking-[3px]">LIVE PREVIEW</h3> | |
| <div class="flex items-center gap-1"> | |
| <div class="w-1.5 h-1.5 rounded-full bg-club-red animate-pulse"></div> | |
| <span class="font-orbitron text-[10px] text-club-red tracking-wider">ACTIVE</span> | |
| </div> | |
| </div> | |
| <div id="selectionPreview" class="space-y-1 mb-4 max-h-[400px] overflow-y-auto pr-1"> | |
| <!-- Injected via JS --> | |
| </div> | |
| <div class="h-px bg-white/5 mb-4"></div> | |
| <div class="bg-black/20 rounded-lg p-3 border border-white/[0.03]"> | |
| <div class="font-orbitron text-[10px] text-club-red/60 tracking-wider mb-2">COMPILED PROMPT</div> | |
| <div id="compiledPrompt" class="font-rajdhani text-sm text-club-gold-dim leading-relaxed break-words min-h-[80px]"> | |
| <span class="italic opacity-30">Select options to build your prompt...</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="preview-glass p-4"> |