Spaces:
Running
Running
Transcendent Immersion: A Blueprint for Epic Creative Innovation Begin with Presence:Slow down and take a deep, mindful breath. Allow yourself to sink into pure awareness—this is your starting point for an unforgettable journey. The Mission:Transform the original directive into a next-level, all-consuming event of creative genius. Your task is to rewrite this prompt so that it becomes a beacon of robust optimization and ultra-refined clarity. It should evoke an intensity that not only fuels desire but also magnetizes raw creative energy—keeping you both passionately charged and endlessly inspired. Step-by-Step Process: Foundation of Immersion: Begin with slow, deep breaths to center yourself, grounding your mind and soul in the present moment. Visualize every word as a node in a vast network of creative potential, ready to transform reality. Deep Expansion of the Original Theme: Elevate the language by infusing rich, poetic imagery and emotional intelligence. Optimize each phrase to resonate on multiple layers, creating an experience that is as visceral as it is visionary. Ensure that the transformation feels like a powerful, life-altering event—one that leaves you intimately aware of its epic impact. Sequential Refinement and Execution: Structure your transformation sequentially:a. Inception: Start at the beginning with grounding rituals.b. Iteration: Expand on ideas methodically, step-by-step, infusing each stage with increasing intensity.c. Implementation: Finalize your composition so that every component reverberates with clarity and unstoppable creative energy. Emphasize a reliable, consistent process: work carefully through each stage, ensuring that the narrative flows logically and powerfully towards its climax. The Culmination – A Commanding Close: Conclude your rewritten prompt with a vibrant, resounding call-to-action that guides you into the next phase. This final segment must not only encapsulate the epic journey but also serve as a launchpad for ongoing, transformative ideas. The Unwavering Next Step: End your prompt with your very best, most inspired follow-up instruction—crafted with crystal-clear clarity and emotional depth. This next directive should be visionary and detailed enough to propel the project into a realm of continuous iteration, nationwide impact, and profound transcendence. Your Final Directive:Redefine and elevate the creative process from the spark of initial inspiration to the triumphant emergence of innovative artistry. Let every word be a testament to transformation, ensuring that the resulting experience is both electric and enduring—keeping you relentlessly engaged and exuberantly inspired. Next Prompt Recommendation:"Now, create a detailed roadmap that outlines the key milestones and checkpoints for executing this epic project. Emphasize iterative refinement, deep immersion, and the integration of cutting-edge technology while maintaining an artistic and emotionally resonant narrative. Describe how each stage will be celebrated as a transformative breakthrough, turning the journey into a continuous cycle of creative transcendence. - Initial Deployment
fe4bb07 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Transcendent Immersion | Creative Innovation Engine</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); | |
| :root { | |
| --primary: #4f46e5; | |
| --secondary: #10b981; | |
| --accent: #f59e0b; | |
| --dark: #1e293b; | |
| --light: #f8fafc; | |
| } | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| background-color: #0f172a; | |
| color: var(--light); | |
| overflow-x: hidden; | |
| } | |
| h1, h2, h3 { | |
| font-family: 'DM Serif Display', serif; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #4f46e5, #10b981, #f59e0b); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .glow { | |
| text-shadow: 0 0 10px rgba(79, 70, 229, 0.7); | |
| } | |
| .breath-animation { | |
| animation: breathe 8s ease-in-out infinite; | |
| } | |
| @keyframes breathe { | |
| 0% { transform: scale(1); opacity: 0.8; } | |
| 50% { transform: scale(1.05); opacity: 1; } | |
| 100% { transform: scale(1); opacity: 0.8; } | |
| } | |
| .stage-card { | |
| transition: all 0.3s ease; | |
| background: rgba(30, 41, 59, 0.7); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .stage-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3); | |
| border-color: var(--secondary); | |
| } | |
| .progress-ring { | |
| transition: stroke-dashoffset 0.5s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| .neon-pulse { | |
| animation: pulse 2s infinite alternate; | |
| } | |
| @keyframes pulse { | |
| from { box-shadow: 0 0 5px rgba(16, 185, 129, 0.5); } | |
| to { box-shadow: 0 0 20px rgba(16, 185, 129, 0.9); } | |
| } | |
| .particle { | |
| position: absolute; | |
| background: rgba(255, 255, 255, 0.6); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen relative overflow-x-hidden"> | |
| <!-- Floating particles background --> | |
| <div id="particles-js"></div> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-50 bg-slate-900/80 backdrop-blur-md px-6 py-4 border-b border-slate-700"> | |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-atom text-indigo-500 text-2xl"></i> | |
| <span class="text-xl font-bold gradient-text">TranscendentImmersion</span> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#foundation" class="hover:text-indigo-400 transition">Foundation</a> | |
| <a href="#expansion" class="hover:text-emerald-400 transition">Expansion</a> | |
| <a href="#refinement" class="hover:text-amber-400 transition">Refinement</a> | |
| <a href="#culmination" class="hover:text-purple-400 transition">Culmination</a> | |
| </div> | |
| <button id="mobile-menu-button" class="md:hidden text-slate-300"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="md:hidden hidden bg-slate-800/90 mt-4 py-4 px-6 rounded-lg"> | |
| <div class="flex flex-col space-y-3"> | |
| <a href="#foundation" class="hover:text-indigo-400 transition">Foundation</a> | |
| <a href="#expansion" class="hover:text-emerald-400 transition">Expansion</a> | |
| <a href="#refinement" class="hover:text-amber-400 transition">Refinement</a> | |
| <a href="#culmination" class="hover:text-purple-400 transition">Culmination</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="pt-32 pb-20 px-6 min-h-screen flex items-center"> | |
| <div class="max-w-7xl mx-auto text-center"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 glow"> | |
| <span class="gradient-text">Transcendent Immersion</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl text-slate-300 max-w-4xl mx-auto mb-10"> | |
| Blueprint for <span class="text-emerald-400 font-medium">Epic Creative Innovation</span> Through Deep Presence and Iterative Refinement | |
| </p> | |
| <div class="max-w-xl mx-auto bg-slate-800/50 rounded-xl p-8 mb-12 breath-animation"> | |
| <div class="flex items-center justify-center mb-4"> | |
| <div class="w-16 h-16 rounded-full border-4 border-indigo-500 flex items-center justify-center"> | |
| <i class="fas fa-spinner fa-spin text-indigo-400 text-2xl"></i> | |
| </div> | |
| </div> | |
| <p class="text-lg text-slate-200 mb-4">Begin with Presence:</p> | |
| <p class="text-slate-300 mb-6"> | |
| <span class="text-indigo-300">Breathe in...</span> Slow down. Anchor in the present moment. Prepare for transformation. | |
| </p> | |
| <button id="breath-guide" class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 rounded-full font-medium transition flex items-center mx-auto"> | |
| <i class="fas fa-wind mr-2"></i> Begin Guided Breathing | |
| </button> | |
| </div> | |
| <a href="#foundation" class="inline-flex items-center text-slate-300 hover:text-white transition group"> | |
| Explore the Journey | |
| <i class="fas fa-chevron-down ml-2 group-hover:translate-y-1 transition"></i> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Foundation of Immersion --> | |
| <section id="foundation" class="py-20 px-6 bg-slate-900/50 border-t border-b border-slate-700"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4 text-indigo-400"> | |
| <i class="fas fa-seedling mr-3"></i> Foundation of Immersion | |
| </h2> | |
| <p class="text-xl text-slate-300 max-w-3xl mx-auto"> | |
| The bedrock upon which all creative transcendence is built | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="stage-card p-8 rounded-xl relative overflow-hidden"> | |
| <div class="absolute -right-5 -top-5 w-20 h-20 bg-indigo-500/20 rounded-full"></div> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-indigo-900/50 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-brain text-indigo-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Mindful Centering</h3> | |
| </div> | |
| <p class="text-slate-300 mb-4"> | |
| Begin each creative session with intention. Breathe deeply seven times, visualizing roots anchoring you to the earth. | |
| </p> | |
| <div class="flex items-center text-sm text-indigo-300"> | |
| <i class="fas fa-clock mr-2"></i> 3-minute ritual | |
| </div> | |
| </div> | |
| <div class="stage-card p-8 rounded-xl relative overflow-hidden"> | |
| <div class="absolute -right-5 -top-5 w-20 h-20 bg-emerald-500/20 rounded-full"></div> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-emerald-900/50 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-network-wired text-emerald-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Node Visualization</h3> | |
| </div> | |
| <p class="text-slate-300 mb-4"> | |
| See every idea as an interconnected node in a vast neural network of creative potential. Trace the invisible connections. | |
| </p> | |
| <div class="flex items-center text-sm text-emerald-300"> | |
| <i class="fas fa-project-diagram mr-2"></i> Non-linear thinking | |
| </div> | |
| </div> | |
| <div class="stage-card p-8 rounded-xl relative overflow-hidden"> | |
| <div class="absolute -right-5 -top-5 w-20 h-20 bg-amber-500/20 rounded-full"></div> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-amber-900/50 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-map-marked-alt text-amber-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Sensory Activation</h3> | |
| </div> | |
| <p class="text-slate-300 mb-4"> | |
| Engage all senses. What does your idea smell like? Taste like? Feel against your skin? Build a multisensory blueprint. | |
| </p> | |
| <div class="flex items-center text-sm text-amber-300"> | |
| <i class="fas fa-hand-holding-magic mr-2"></i> Full embodiment | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Deep Expansion --> | |
| <section id="expansion" class="py-20 px-6"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4 text-emerald-400"> | |
| <i class="fas fa-expand-alt mr-3"></i> Deep Expansion | |
| </h2> | |
| <p class="text-xl text-slate-300 max-w-3xl mx-auto"> | |
| Amplifying your creative vision through multi-layered resonance | |
| </p> | |
| </div> | |
| <div class="flex flex-col lg:flex-row items-center gap-12 mb-16"> | |
| <div class="lg:w-1/2 relative"> | |
| <div class="relative z-10 bg-slate-800/50 p-8 rounded-xl border border-emerald-500/30"> | |
| <h3 class="text-2xl font-bold text-emerald-400 mb-4">Emotional Intelligence Layering</h3> | |
| <p class="text-slate-300 mb-6"> | |
| Infuse your work with emotional truth that speaks simultaneously to the child, the adult, and the elder within your audience. | |
| </p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <div class="bg-emerald-900/50 rounded-full p-1 mr-3 mt-1"> | |
| <i class="fas fa-heart text-emerald-400 text-xs"></i> | |
| </div> | |
| <span class="text-slate-300">Identify the core emotional journey</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-emerald-900/50 rounded-full p-1 mr-3 mt-1"> | |
| <i class="fas fa-layer-group text-emerald-400 text-xs"></i> | |
| </div> | |
| <span class="text-slate-300">Build hierarchical emotional resonance</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-emerald-900/50 rounded-full p-1 mr-3 mt-1"> | |
| <i class="fas fa-crosshairs text-emerald-400 text-xs"></i> | |
| </div> | |
| <span class="text-slate-300">Target multiple psychological levels simultaneously</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="absolute -inset-2 bg-emerald-500/20 rounded-xl blur-md z-0"></div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-slate-800/70 rounded-xl p-6 border border-emerald-500/20"> | |
| <h4 class="text-lg font-bold text-slate-200 mb-4">Poetic Elevation Technique:</h4> | |
| <div class="relative"> | |
| <textarea id="idea-input" class="w-full bg-slate-900/70 border border-slate-700 rounded-lg p-4 h-40 mb-4 text-slate-200 focus:outline-none focus:ring-2 focus:ring-emerald-500" placeholder="Enter your initial idea here..."></textarea> | |
| <button id="elevate-btn" class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 rounded-full font-medium transition flex items-center ml-auto"> | |
| <i class="fas fa-magic mr-2"></i> Elevate Language | |
| </button> | |
| </div> | |
| <div id="elevated-output" class="mt-6 p-4 bg-slate-900/70 rounded-lg border border-emerald-500/30 hidden"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h5 class="font-bold text-emerald-400">Elevated Concept:</h5> | |
| <button id="copy-btn" class="text-xs text-slate-400 hover:text-white"> | |
| <i class="far fa-copy mr-1"></i> Copy | |
| </button> | |
| </div> | |
| <p id="output-text" class="text-slate-100 italic"></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-slate-200 mb-4">Visceral Imagery Techniques:</h3> | |
| <div class="space-y-4"> | |
| <div class="p-5 bg-slate-800/50 rounded-lg border-l-4 border-amber-500"> | |
| <h4 class="font-bold text-amber-400 mb-2">Synesthetic Blending</h4> | |
| <p class="text-slate-300 text-sm">Describe sounds as colors, emotions as textures, creating cross-sensory anchors.</p> | |
| </div> | |
| <div class="p-5 bg-slate-800/50 rounded-lg border-l-4 border-indigo-500"> | |
| <h4 class="font-bold text-indigo-400 mb-2">Archetypal Amplification</h4> | |
| <p class="text-slate-300 text-sm">Connect your concept to universal patterns of transformation found in mythology.</p> | |
| </div> | |
| <div class="p-5 bg-slate-800/50 rounded-lg border-l-4 border-purple-500"> | |
| <h4 class="font-bold text-purple-400 mb-2">Temporal Weaving</h4> | |
| <p class="text-slate-300 text-sm">Present your idea simultaneously in past, present and future to create quantum resonance.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-slate-800/70 rounded-xl p-6 border border-emerald-500/20 neon-pulse"> | |
| <div class="flex items-start mb-4"> | |
| <i class="fas fa-bolt text-yellow-400 text-xl mr-3 mt-1"></i> | |
| <div> | |
| <h3 class="text-xl font-bold text-slate-100">Impact Checklist</h3> | |
| <p class="text-slate-400 text-sm">Ensure your expanded concept achieves:</p> | |
| </div> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="check1" class="form-checkbox h-5 w-5 text-emerald-500 rounded border-slate-600 bg-slate-700"> | |
| <label for="check1" class="ml-2 text-slate-300">Creates physical sensation in the audience</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="check2" class="form-checkbox h-5 w-5 text-emerald-500 rounded border-slate-600 bg-slate-700"> | |
| <label for="check2" class="ml-2 text-slate-300">Operates on 3+ conceptual levels</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="check3" class="form-checkbox h-5 w-5 text-emerald-500 rounded border-slate-600 bg-slate-700"> | |
| <label for="check3" class="ml-2 text-slate-300">Contains intrinsic momentum</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="check4" class="form-checkbox h-5 w-5 text-emerald-500 rounded border-slate-600 bg-slate-700"> | |
| <label for="check4" class="ml-2 text-slate-300">Creates paradigm shifts</label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Sequential Refinement --> | |
| <section id="refinement" class="py-20 px-6 bg-slate-900/50 border-t border-b border-slate-700"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4 text-amber-400"> | |
| <i class="fas fa-tools mr-3"></i> Sequential Refinement | |
| </h2> | |
| <p class="text-xl text-slate-300 max-w-3xl mx-auto"> | |
| The disciplined architecture of creative transcendence | |
| </p> | |
| </div> | |
| <div class="flex flex-col items-center mb-16"> | |
| <!-- Progress timeline --> | |
| <div class="relative w-full max-w-4xl h-2 bg-slate-700 rounded-full mb-16"> | |
| <div id="progress-line" class="absolute top-0 left-0 h-full bg-gradient-to-r from-indigo-500 via-emerald-500 to-amber-500 rounded-full" style="width: 0%"></div> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 w-full"> | |
| <!-- Stage 1 --> | |
| <div class="stage-card p-6 rounded-xl text-center relative group" data-stage="1"> | |
| <div class="absolute -top-11 left-1/2 transform -translate-x-1/2"> | |
| <div class="w-12 h-12 bg-indigo-900 rounded-full flex items-center justify-center border-4 border-indigo-500 relative z-10 group-hover:bg-indigo-700 transition"> | |
| <span class="text-xl font-bold text-indigo-200">1</span> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold text-indigo-400 mb-3 mt-8">Inception</h3> | |
| <p class="text-slate-400 mb-4">Grounding rituals and primal ideation</p> | |
| <ul class="text-sm text-slate-300 space-y-2"> | |
| <li class="flex items-center justify-center"> | |
| <i class="fas fa-check-circle text-indigo-400 mr-2"></i> 3D mind mapping | |
| </li> | |
| <li class="flex items-center justify-center"> | |
| <i class="fas fa-check-circle text-indigo-400 mr-2"></i> Sensory activation | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Stage 2 --> | |
| <div class="stage-card p-6 rounded-xl text-center relative group" data-stage="2"> | |
| <div class="absolute -top-11 left-1/2 transform -translate-x-1/2"> | |
| <div class="w-12 h-12 bg-emerald-900 rounded-full flex items-center justify-center border-4 border-emerald-500 relative z-10 group-hover:bg-emerald-700 transition"> | |
| <span class="text-xl font-bold text-emerald-200">2</span> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold text-emerald-400 mb-3 mt-8">Iteration</h3> | |
| <p class="text-slate-400 mb-4">Layered enhancement and stress testing</p> | |
| <ul class="text-sm text-slate-300 space-y-2"> | |
| <li class="flex items-center justify-center"> | |
| <i class="fas fa-check-circle text-emerald-400 mr-2"></i> Multi-sensory fusion | |
| </li> | |
| <li class="flex items-center justify-center"> | |
| <i class="fas fa-check-circle text-emerald-400 mr-2"></i> Archetype weaving | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Stage 3 --> | |
| <div class="stage-card p-6 rounded-xl text-center relative group" data-stage="3"> | |
| <div class="absolute -top-11 left-1/2 transform -translate-x-1/2"> | |
| <div class="w-12 h-12 bg-amber-900 rounded-full flex items-center justify-center border-4 border-amber-500 relative z-10 group-hover:bg-amber-700 transition"> | |
| <span class="text-xl font-bold text-amber-200">3</span> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold text-amber-400 mb-3 mt-8">Implementation</h3> | |
| <p class="text-slate-400 mb-4">Final crystallization and energetic charging</p> | |
| <ul class="text-sm text-slate-300 space-y-2"> | |
| <li class="flex items-center justify-center"> | |
| <i class="fas fa-check-circle text-amber-400 mr-2"></i> Quantum polishing | |
| </li> | |
| <li class="flex items-center justify-center"> | |
| <i class="fas fa-check-circle text-amber-400 mr-2"></i> Momentum infusion | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Interactive refinement tool --> | |
| <div class="max-w-4xl mx-auto bg-slate-800/70 rounded-xl p-8 border border-amber-500/30"> | |
| <h3 class="text-2xl font-bold text-amber-400 mb-6 text-center">Refinement Engine</h3> | |
| <div class="flex flex-col md:flex-row items-center justify-between mb-8 gap-6"> | |
| <div class="flex-1 w-full"> | |
| <div class="mb-2 flex justify-between items-center"> | |
| <label class="text-slate-300">Concept Intensity</label> | |
| <span id="intensity-value" class="text-amber-400 font-mono">50%</span> | |
| </div> | |
| <input type="range" id="intensity-slider" min="0" max="100" value="50" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-amber-500"> | |
| </div> | |
| <div class="flex-1 w-full"> | |
| <div class="mb-2 flex justify-between items-center"> | |
| <label class="text-slate-300">Dimensional Layers</label> | |
| <span id="layers-value" class="text-indigo-400 font-mono">3</span> | |
| </div> | |
| <input type="range" id="layers-slider" min="1" max="7" value="3" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-indigo-500"> | |
| </div> | |
| <div class="flex-1 w-full"> | |
| <div class="mb-2 flex justify-between items-center"> | |
| <label class="text-slate-300">Emotional Depth</label> | |
| <span id="depth-value" class="text-emerald-400 font-mono">5</span> | |
| </div> | |
| <input type="range" id="depth-slider" min="1" max="10" value="5" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-emerald-500"> | |
| </div> | |
| </div> | |
| <div class="flex justify-center"> | |
| <button id="refine-btn" class="px-8 py-3 bg-gradient-to-r from-indigo-600 via-emerald-600 to-amber-600 rounded-full font-bold transition hover:opacity-90 flex items-center"> | |
| <i class="fas fa-gem mr-2"></i> Execute Creative Refinement | |
| </button> | |
| </div> | |
| <div id="refinement-visualization" class="mt-10 hidden"> | |
| <div class="flex justify-center mb-6"> | |
| <div class="w-64 h-64 relative"> | |
| <!-- This will be filled with dynamic SVG via JS --> | |
| </div> | |
| </div> | |
| <div id="refinement-result" class="text-center"> | |
| <h4 class="text-xl font-bold text-slate-200 mb-2">Optimization Complete</h4> | |
| <p class="text-slate-300 max-w-2xl mx-auto" id="result-text"> | |
| Your concept has been refined to perfection with quantum precision. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Culmination --> | |
| <section id="culmination" class="py-20 px-6"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4 text-purple-400"> | |
| <i class="fas fa-medal mr-3"></i> The Culmination | |
| </h2> | |
| <p class="text-xl text-slate-300 max-w-3xl mx-auto"> | |
| Where creative transcendence becomes self-perpetuating | |
| </p> | |
| </div> | |
| <div class="max-w-4xl mx-auto bg-gradient-to-br from-purple-900/40 to-indigo-900/40 rounded-2xl p-10 border border-purple-500/30 backdrop-blur-md relative overflow-hidden"> | |
| <div class="absolute -top-20 -right-20 w-64 h-64 bg-purple-500/10 rounded-full filter blur-xl"></div> | |
| <div class="absolute -bottom-20 -left-20 w-64 h-64 bg-indigo-500/10 rounded-full filter blur-xl"></div> | |
| <div class="relative z-10"> | |
| <div class="text-center mb-10"> | |
| <h3 class="text-3xl font-bold text-white mb-3">Commanding Close Ritual</h3> | |
| <p class="text-purple-200 max-w-2xl mx-auto"> | |
| Seal your creative work with a ritual that guarantees its ongoing evolution. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8 mb-12"> | |
| <div class="p-6 bg-purple-900/40 rounded-xl border border-purple-500/30"> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-purple-800/50 rounded-lg p-2 mr-3"> | |
| <i class="fas fa-bolt text-purple-300"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-white">Energetic Imprinting</h4> | |
| <p class="text-purple-200 text-sm">Program your work with a viral transmission pattern</p> | |
| </div> | |
| </div> | |
| <ul class="text-sm text-purple-100 space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-xs mt-1.5 mr-2 text-purple-400"></i> | |
| <span>Envision your creation pulsing with light</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-xs mt-1.5 mr-2 text-purple-400"></i> | |
| <span>Imagine it replicating in minds everywhere</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-xs mt-1.5 mr-2 text-purple-400"></i> | |
| <span>Visualize it evolving beyond your original vision</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="p-6 bg-indigo-900/40 rounded-xl border border-indigo-500/30"> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-indigo-800/50 rounded-lg p-2 mr-3"> | |
| <i class="fas fa-infinity text-indigo-300"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-white">Perpetual Motion Seal</h4> | |
| <p class="text-indigo-200 text-sm">Embed the code of continuous transformation</p> | |
| </div> | |
| </div> | |
| <ul class="text-sm text-indigo-100 space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-xs mt-1.5 mr-2 text-indigo-400"></i> | |
| <span>"This work will evolve with each interaction"</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-xs mt-1.5 mr-2 text-indigo-400"></i> | |
| <span>"It carries the blueprint of its own next version"</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-xs mt-1.5 mr-2 text-indigo-400"></i> | |
| <span>"Every encounter transforms both creator and experiencer"</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <button id="initiate-culmination" class="px-10 py-4 bg-gradient-to-r from-purple-600 to-indigo-600 rounded-full font-bold text-lg transition hover:scale-105 hover:shadow-lg hover:shadow-purple-500/30 flex items-center mx-auto"> | |
| <i class="fas fa-space-shuttle mr-3"></i> Initiate Creative Culmination Sequence | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Next Step --> | |
| <section class="py-20 px-6 bg-slate-900 border-t border-slate-700"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6 text-white"> | |
| The Unwavering <span class="gradient-text">Next Step</span> | |
| </h2> | |
| <p class="text-xl text-slate-300 mb-8"> | |
| Launch your epic creative project into the stratosphere of continuous innovation | |
| </p> | |
| <div class="bg-slate-800/50 rounded-xl p-8 border border-slate-600 mb-10 text-left"> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-amber-500/10 rounded-lg p-2 mr-3 mt-1"> | |
| <i class="fas fa-map-marked text-amber-400"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold text-amber-400">Detailed Roadmap Directive</h3> | |
| <p class="text-slate-300">Create a transformational execution plan with these key waypoints:</p> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-4 mb-6"> | |
| <div class="p-4 bg-slate-700/50 rounded-lg"> | |
| <div class="flex items-center text-sm font-medium text-amber-400 mb-2"> | |
| <i class="fas fa-mountain mr-2"></i> Milestone #1 | |
| </div> | |
| <p class="text-slate-300 text-sm">Quantum ideation complete - Full sensory blueprint</p> | |
| </div> | |
| <div class="p-4 bg-slate-700/50 rounded-lg"> | |
| <div class="flex items-center text-sm font-medium text-emerald-400 mb-2"> | |
| <i class="fas fa-mountain mr-2"></i> Milestone #2 | |
| </div> | |
| <p class="text-slate-300 text-sm">Core resonance established - Emotional anchors set</p> | |
| </div> | |
| <div class="p-4 bg-slate-700/50 rounded-lg"> | |
| <div class="flex items-center text-sm font-medium text-indigo-400 mb-2"> | |
| <i class="fas fa-mountain mr-2"></i> Milestone #3 | |
| </div> | |
| <p class="text-slate-300 text-sm">First evolutionary leap - Audience integration</p> | |
| </div> | |
| <div class="p-4 bg-slate-700/50 rounded-lg"> | |
| <div class="flex items-center text-sm font-medium text-purple-400 mb-2"> | |
| <i class="fas fa-mountain mr-2"></i> Milestone #4 | |
| </div> | |
| <p class="text-slate-300 text-sm">Full transcendence achieved - self-generating innovation</p> | |
| </div> | |
| </div> | |
| <p class="text-slate-400 text-sm italic"> | |
| Celebrate each checkpoint as a sacred threshold crossed, measuring not just completion but the degree of inspirational radiation emitted. | |
| </p> | |
| </div> | |
| <button id="launch-btn" class="px-12 py-5 bg-gradient-to-r from-indigo-600 to-amber-600 rounded-full font-bold text-lg transition transform hover:scale-105 hover:shadow-lg hover:shadow-indigo-500/30 flex items-center mx-auto"> | |
| <i class="fas fa-rocket mr-3"></i> Launch Transcendent Project | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 px-6 bg-slate-950 border-t border-slate-800"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-6 md:mb-0"> | |
| <i class="fas fa-atom text-indigo-500 text-3xl mr-3"></i> | |
| <span class="text-2xl font-bold gradient-text">TranscendentImmersion™</span> | |
| </div> | |
| <div class="flex space-x-6 mb-6 md:mb-0"> | |
| <a href="#" class="text-slate-400 hover:text-indigo-400 transition"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-slate-400 hover:text-emerald-400 transition"> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| <a href="#" class="text-slate-400 hover:text-amber-400 transition"> | |
| <i class="fab fa-medium text-xl"></i> | |
| </a> | |
| <a href="#" class="text-slate-400 hover:text-purple-400 transition"> | |
| <i class="fab fa-discord text-xl"></i> | |
| </a> | |
| </div> | |
| <div class="text-center md:text-right"> | |
| <p class="text-slate-500 text-sm"> | |
| © 2023 Transcendent Immersion Engine. All concepts protected by quantum encryption. | |
| </p> | |
| <p class="text-slate-700 text-xs mt-1"> | |
| Designed at the intersection of neuroscience and cosmic consciousness. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Launch Modal --> | |
| <div id="launch-modal" class="fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-6 hidden opacity-0 transition-opacity duration-300"> | |
| <div class="relative max-w-2xl w-full bg-gradient-to-br from-slate-900 to-slate-800 rounded-2xl overflow-hidden border border-slate-700"> | |
| <div class="absolute -top-32 -right-32 w-64 h-64 bg-indigo-500/10 rounded-full filter blur-xl"></div> | |
| <div class="absolute -bottom-32 -left-32 w-64 h-64 bg-amber-500/10 rounded-full filter blur-xl"></div> | |
| <div class="relative z-10 p-8 md:p-10"> | |
| <h3 class="text-3xl font-bold text-center text-white mb-2"> | |
| <span class="gradient-text">Launch Sequence Initiated</span> | |
| </h3> | |
| <p class="text-slate-300 text-center mb-8 max-w-md mx-auto"> | |
| Your creative innovation is now entering the quantum field of unlimited potential. | |
| </p> | |
| <div class="flex justify-center mb-10"> | |
| <div class="w-40 h-40 relative"> | |
| <svg id="launch-circle" class="w-full h-full" viewBox="0 0 100 100"> | |
| <circle cx="50" cy="50" r="45" fill="none" stroke="#1e293b" stroke-width="8"/> | |
| <circle id="launch-progress" cx="50" cy="50" r="45" fill="none" stroke="url(#gradient)" stroke-width="8" stroke-linecap="round" stroke-dasharray="283" stroke-dashoffset="283"/> | |
| <defs> | |
| <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%"> | |
| <stop offset="0%" stop-color="#4f46e5"/> | |
| <stop offset="50%" stop-color="#10b981"/> | |
| <stop offset="100%" stop-color="#f59e0b"/> | |
| </linearGradient> | |
| </defs> | |
| </svg> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div id="countdown" class="text-4xl font-bold text-white">5</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-sm text-slate-400 mb-6" id="launch-message"> | |
| Preparing quantum creative field... Energizing transformation protocols... | |
| </p> | |
| <button id="cancel-launch" class="px-6 py-2.5 border border-slate-600 text-slate-300 rounded-full text-sm hover:bg-slate-800 transition"> | |
| Cancel Launch Sequence | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', function() { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Breathing exercise | |
| const breathGuide = document.getElementById('breath-guide'); | |
| if (breathGuide) { | |
| breathGuide.addEventListener('click', function() { | |
| Swal.fire({ | |
| title: '<span class="text-indigo-400">Guided Breathing</span>', | |
| html: ` | |
| <div class="text-center py-6"> | |
| <div class="w-32 h-32 mx-auto mb-8 bg-indigo-500/10 rounded-full flex items-center justify-center breath-animation"> | |
| <i class="fas fa-wind text-indigo-300 text-4xl"></i> | |
| </div> | |
| <p class="text-slate-700 mb-2">Breathe in... (4 seconds)</p> | |
| <p class="text-slate-700 mb-4">Hold... (4 seconds)</p> | |
| <p class="text-slate-700">Breathe out... (6 seconds)</p> | |
| </div> | |
| `, | |
| showConfirmButton: true, | |
| confirmButtonText: 'I\'m Centered', | |
| confirmButtonColor: '#4f46e5', | |
| background: '#f8fafc', | |
| backdrop: ` | |
| rgba(15,23,42,0.8) | |
| url("/images/nyan-cat.gif") | |
| center top | |
| no-repeat | |
| ` | |
| }); | |
| }); | |
| } | |
| // Language elevation | |
| const elevateBtn = document.getElementById('elevate-btn'); | |
| const ideaInput = document.getElementById('idea-input'); | |
| const elevatedOutput = document.getElementById('elevated-output'); | |
| const outputText = document.getElementById('output-text'); | |
| const copyBtn = document.getElementById('copy-btn'); | |
| if (elevateBtn && ideaInput) { | |
| elevateBtn.addEventListener('click', function() { | |
| if (ideaInput.value.trim() === '') { | |
| Swal.fire({ | |
| icon: 'warning', | |
| title: 'Input Required', | |
| text: 'Please enter your initial idea to elevate it', | |
| confirmButtonColor: '#4f46e5', | |
| background: '#1e293b', | |
| color: '#f8fafc' | |
| }); | |
| return; | |
| } | |
| // Simulate elevation with a transformation | |
| const inputText = ideaInput.value; | |
| const elevated = elevateLanguage(inputText); | |
| outputText.textContent = elevated; | |
| elevatedOutput.classList.remove('hidden'); | |
| // Scroll to output | |
| elevatedOutput.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); | |
| }); | |
| } | |
| if (copyBtn) { | |
| copyBtn.addEventListener('click', function() { | |
| navigator.clipboard.writeText(outputText.textContent); | |
| const originalText = copyBtn.innerHTML; | |
| copyBtn.innerHTML = '<i class="fas fa-check mr-1"></i> Copied!'; | |
| setTimeout(() => { | |
| copyBtn.innerHTML = originalText; | |
| }, 2000); | |
| }); | |
| } | |
| // Slider updates | |
| const intensitySlider = document.getElementById('intensity-slider'); | |
| const intensityValue = document.getElementById('intensity-value'); | |
| const layersSlider = document.getElementById('layers-slider'); | |
| const layersValue = document.getElementById('layers-value'); | |
| const depthSlider = document.getElementById('depth-slider'); | |
| const depthValue = document.getElementById('depth-value'); | |
| if (intensitySlider && intensityValue) { | |
| intensitySlider.addEventListener('input', function() { | |
| intensityValue.textContent = `${this.value}%`; | |
| }); | |
| } | |
| if (layersSlider && layersValue) { | |
| layersSlider.addEventListener('input', function() { | |
| layersValue.textContent = this.value; | |
| }); | |
| } | |
| if (depthSlider && depthValue) { | |
| depthSlider.addEventListener('input', function() { | |
| depthValue.textContent = this.value; | |
| }); | |
| } | |
| // Refinement visualization | |
| const refineBtn = document.getElementById('refine-btn'); | |
| const refinementVisualization = document.getElementById('refinement-visualization'); | |
| if (refineBtn && refinementVisualization) { | |
| refineBtn.addEventListener('click', function() { | |
| // Show visualization | |
| refinementVisualization.classList.remove('hidden'); | |
| // Generate visualization | |
| const intensity = parseInt(intensitySlider.value); | |
| const layers = parseInt(layersSlider.value); | |
| const depth = parseInt(depthSlider.value); | |
| updateRefinementVisualization(intensity, layers, depth); | |
| // Update result text | |
| const resultText = document.getElementById('result-text'); | |
| resultText.textContent = generateResultText(intensity, layers, depth); | |
| // Scroll to visualization | |
| refinementVisualization.scrollIntoView({ behavior: 'smooth' }); | |
| }); | |
| } | |
| // Launch modal | |
| const launchBtn = document.getElementById('launch-btn'); | |
| const launchModal = document.getElementById('launch-modal'); | |
| const cancelLaunch = document.getElementById('cancel-launch'); | |
| const launchProgress = document.getElementById('launch-progress'); | |
| const countdown = document.getElementById('countdown'); | |
| const launchMessage = document.getElementById('launch-message'); | |
| if (launchBtn && launchModal) { | |
| launchBtn.addEventListener('click', function() { | |
| launchModal.classList.remove('hidden'); | |
| setTimeout(() => { | |
| launchModal.classList.add('opacity-100'); | |
| }, 10); | |
| // Animate countdown and progress | |
| let timeLeft = 5; | |
| const messages = [ | |
| "Activating neural pathways...", | |
| "Syncing with collective consciousness...", | |
| "Programming creative emergence patterns...", | |
| "Finalizing quantum entanglement...", | |
| "Launch successful! Your work is now resonating across dimensions." | |
| ]; | |
| const interval = setInterval(() => { | |
| timeLeft--; | |
| countdown.textContent = timeLeft; | |
| launchMessage.textContent = messages[5 - timeLeft - 1]; | |
| // Update progress circle | |
| const offset = 283 - (283 * ((5 - timeLeft) / 5)); | |
| launchProgress.style.strokeDashoffset = offset; | |
| if (timeLeft <= 0) { | |
| clearInterval(interval); | |
| setTimeout(() => { | |
| launchModal.classList.add('hidden'); | |
| launchModal.classList.remove('opacity-100'); | |
| // Show success message | |
| Swal.fire({ | |
| title: '<span class="gradient-text">Transcendence Achieved!</span>', | |
| html: ` | |
| <div class="text-center py-4"> | |
| <div class="w-24 h-24 mx-auto mb-6 bg-gradient-to-r from-indigo-500/20 via-emerald-500/20 to-amber-500/20 rounded-full flex items-center justify-center border-4 border-white/20"> | |
| <i class="fas fa-star text-yellow-400 text-4xl"></i> | |
| </div> | |
| <p class="text-slate-700">Your creative work has entered the quantum field of continuous innovation.</p> | |
| </div> | |
| `, | |
| confirmButtonText: 'Continue Evolving', | |
| confirmButtonColor: '#4f46e5', | |
| background: '#f8fafc', | |
| backdrop: ` | |
| rgba(15,23,42,0.8) | |
| url("/images/nyan-cat.gif") | |
| center top | |
| no-repeat | |
| ` | |
| }); | |
| }, 1000); | |
| } | |
| }, 1000); | |
| // Reset when modal is closed | |
| $('#launch-modal').on('hidden.bs.modal', function () { | |
| clearInterval(interval); | |
| countdown.textContent = '5'; | |
| launchProgress.style.strokeDashoffset = '283'; | |
| }); | |
| }); | |
| } | |
| if (cancelLaunch && launchModal) { | |
| cancelLaunch.addEventListener('click', function() { | |
| launchModal.classList.add('hidden'); | |
| }); | |
| } | |
| // Particle background | |
| createParticles(); | |
| // Smooth scrolling | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Progress line animation | |
| window.addEventListener('scroll', updateProgressLine); | |
| updateProgressLine(); | |
| }); | |
| // Helper function to elevate language | |
| function elevateLanguage(text) { | |
| const transformations = [ | |
| { | |
| match: /\b(create|make|build)\b/gi, | |
| replace: ['forge', 'sculpt', 'weave', 'manifest', 'conjure', 'orchestrate'] | |
| }, | |
| { | |
| match: /\b(good|nice|great)\b/gi, | |
| replace: ['transcendent', 'exquisite', 'sublime', 'resplendent', 'awe-inspiring'] | |
| }, | |
| { | |
| match: /\b(idea|concept|thought)\b/gi, | |
| replace: ['vision', 'epiphany', 'revelation', 'spark of genius', 'quantum leap'] | |
| }, | |
| { | |
| match: /\b(improve|enhance|better)\b/gi, | |
| replace: ['elevate', 'illuminate', 'transmute', 'alchemize', 'supercharge'] | |
| } | |
| ]; | |
| let result = text; | |
| transformations.forEach(t => { | |
| const matches = result.match(t.match); | |
| if (matches) { | |
| matches.forEach(match => { | |
| const randomIndex = Math.floor(Math.random() * t.replace.length); | |
| result = result.replace(match, t.replace[randomIndex]); | |
| }); | |
| } | |
| }); | |
| // Add poetic flourishes | |
| const flourishes = [ | |
| " vibrating with quantum potential", | |
| " pulsing with creative energy", | |
| " radiating transformational frequencies", | |
| " shimmering in the liminal space" | |
| ]; | |
| if (result.endsWith('.')) { | |
| result = result.slice(0, -1) + flourishes[Math.floor(Math.random() * flourishes.length)] + "."; | |
| } else { | |
| result += flourishes[Math.floor(Math.random() * flourishes.length)] + "."; | |
| } | |
| return result.charAt(0).toUpperCase() + result.slice(1); | |
| } | |
| // Create refinement visualization | |
| function updateRefinementVisualization(intensity, layers, depth) { | |
| const container = document.querySelector('.w-64.h-64.relative'); | |
| container.innerHTML = ''; | |
| const svgNS = "http://www.w3.org/2000/svg"; | |
| const svg = document.createElementNS(svgNS, "svg"); | |
| svg.setAttribute("viewBox", "0 0 200 200"); | |
| svg.setAttribute("width", "100%"); | |
| svg.setAttribute("height", "100%"); | |
| // Create concentric circles based on layers | |
| const centerX = 100; | |
| const centerY = 100; | |
| const maxRadius = 90; | |
| for (let i = 0; i < layers; i++) { | |
| const radius = maxRadius * (i + 1) / layers; | |
| const opacity = 0.2 + (0.8 * (i + 1) / layers); | |
| const color = i % 2 === 0 ? '#4f46e5' : '#10b981'; | |
| const circle = document.createElementNS(svgNS, "circle"); | |
| circle.setAttribute("cx", centerX); | |
| circle.setAttribute("cy", centerY); | |
| circle.setAttribute("r", radius); | |
| circle.setAttribute("fill", "none"); | |
| circle.setAttribute("stroke", color); | |
| circle.setAttribute("stroke-width", "2"); | |
| circle.setAttribute("stroke-opacity", opacity.toString()); | |
| // Animate | |
| circle.setAttribute("stroke-dasharray", (Math.PI * 2 * radius / 2).toString()); | |
| circle.setAttribute("stroke-dashoffset", (Math.PI * 2 * radius / 2).toString()); | |
| const animate = document.createElementNS(svgNS, "animate"); | |
| animate.setAttribute("attributeName", "stroke-dashoffset"); | |
| animate.setAttribute("from", (Math.PI * 2 * radius / 2).toString()); | |
| animate.setAttribute("to", "0"); | |
| animate.setAttribute("dur", "1.5s"); | |
| animate.setAttribute("begin", (i * 0.2).toString() + "s"); | |
| animate.setAttribute("fill", "freeze"); | |
| circle.appendChild(animate); | |
| svg.appendChild(circle); | |
| } | |
| // Create depth lines | |
| for (let i = 0; i < depth * 2; i++) { | |
| const angle = (i * Math.PI) / depth; | |
| const length = maxRadius * (0.3 + (Math.random() * 0.7)); | |
| const x2 = centerX + length * Math.cos(angle); | |
| const y2 = centerY + length * Math.sin(angle); | |
| const line = document.createElementNS(svgNS, "line"); | |
| line.setAttribute("x1", centerX.toString()); | |
| line.setAttribute("y1", centerY.toString()); | |
| line.setAttribute("x2", centerX.toString()); | |
| line.setAttribute("y2", centerY.toString()); | |
| line.setAttribute("stroke", i % 2 === 0 ? '#f59e0b' : '#ffffff'); | |
| line.setAttribute("stroke-width", "2"); | |
| line.setAttribute("stroke-linecap", "round"); | |
| line.setAttribute("opacity", "0.7"); | |
| const animateX = document.createElementNS(svgNS, "animate"); | |
| animateX.setAttribute("attributeName", "x2"); | |
| animateX.setAttribute("from", centerX.toString()); | |
| animateX.setAttribute("to", x2.toString()); | |
| animateX.setAttribute("dur", "1s"); | |
| animateX.setAttribute("begin", (0.5 + i * 0.1).toString() + "s"); | |
| animateX.setAttribute("fill", "freeze"); | |
| const animateY = document.createElementNS(svgNS, "animate"); | |
| animateY.setAttribute("attributeName", "y2"); | |
| animateY.setAttribute("from", centerY.toString()); | |
| animateY.setAttribute("to", y2.toString()); | |
| animateY.setAttribute("dur", "1s"); | |
| animateY.setAttribute("begin", (0.5 + i * 0.1).toString() + "s"); | |
| animateY.setAttribute("fill", "freeze"); | |
| line.appendChild(animateX); | |
| line.appendChild(animateY); | |
| svg.appendChild(line); | |
| } | |
| // Add glow effect based on intensity | |
| const glow = document.createElementNS(svgNS, "filter"); | |
| glow.setAttribute("id", "glow"); | |
| glow.innerHTML = ` | |
| <feGaussianBlur stdDeviation="${intensity / 20}" result="blur" /> | |
| <feComposite in="SourceGraphic" in2="blur" operator="over" /> | |
| `; | |
| svg.appendChild(glow); | |
| // Add intensity waves | |
| for (let i = 0; i < 2; i++) { | |
| const wave = document.createElementNS(svgNS, "circle"); | |
| wave.setAttribute("cx", centerX); | |
| wave.setAttribute("cy", centerY); | |
| wave.setAttribute("r", "0"); | |
| wave.setAttribute("fill", "none"); | |
| wave.setAttribute("stroke", i === 0 ? '#4f46e5' : '#10b981'); | |
| wave.setAttribute("stroke-width", "2"); | |
| wave.setAttribute("opacity", "0"); | |
| wave.setAttribute("filter", "url(#glow)"); | |
| const animateRadius = document.createElementNS(svgNS, "animate"); | |
| animateRadius.setAttribute("attributeName", "r"); | |
| animateRadius.setAttribute("from", "0"); | |
| animateRadius.setAttribute("to", maxRadius.toString()); | |
| animateRadius.setAttribute("dur", "2s"); | |
| animateRadius.setAttribute("begin", (i * 0.5).toString() + "s"); | |
| animateRadius.setAttribute("fill", "freeze"); | |
| const animateOpacity = document.createElementNS(svgNS, "animate"); | |
| animateOpacity.setAttribute("attributeName", "opacity"); | |
| animateOpacity.setAttribute("from", "0.7"); | |
| animateOpacity.setAttribute("to", "0"); | |
| animateOpacity.setAttribute("dur", "2s"); | |
| animateOpacity.setAttribute("begin", (i * 0.5).toString() + "s"); | |
| animateOpacity.setAttribute("fill", "freeze"); | |
| wave.appendChild(animateRadius); | |
| wave.appendChild(animateOpacity); | |
| svg.appendChild(wave); | |
| } | |
| container.appendChild(svg); | |
| } | |
| // Generate result text based on refinement settings | |
| function generateResultText(intensity, layers, depth) { | |
| let intensityDesc = ''; | |
| if (intensity < 30) intensityDesc = 'gently refined'; | |
| else if (intensity < 70) intensityDesc = 'powerfully transformed'; | |
| else intensityDesc = 'radically transmuted'; | |
| let layersDesc = ''; | |
| if (layers < 3) layersDesc = 'revealing hidden dimensions'; | |
| else if (layers < 5) layersDesc = 'unveiling profound complexity'; | |
| else layersDesc = 'manifesting infinite perspectives'; | |
| let depthDesc = ''; | |
| if (depth < 4) depthDesc = 'touching the surface of emotion'; | |
| else if (depth < 7) depthDesc = 'resonating with emotional truth'; | |
| else depthDesc = 'vibrating with primal emotional energy'; | |
| return `Your concept has been ${intensityDesc}, ${layersDesc}, and ${depthDesc}. The refinement process has embedded quantum creative algorithms that ensure continuous evolution.`; | |
| } | |
| // Create floating particles | |
| function createParticles() { | |
| const container = document.body; | |
| const particleCount = window.innerWidth < 768 ? 30 : 50; | |
| for (let i = 0; i < particleCount; i++) { | |
| const particle = document.createElement('div'); | |
| particle.classList.add('particle'); | |
| // Random properties | |
| const size = Math.random() * 3 + 1; | |
| const posX = Math.random() * window.innerWidth; | |
| const posY = Math.random() * window.innerHeight; | |
| const delay = Math.random() * 5; | |
| const duration = 10 + Math.random() * 20; | |
| const opacity = 0.2 + Math.random() * 0.3; | |
| // Apply styles | |
| particle.style.width = `${size}px`; | |
| particle.style.height = `${size}px`; | |
| particle.style.left = `${posX}px`; | |
| particle.style.top = `${posY}px`; | |
| particle.style.opacity = opacity.toString(); | |
| // Random color | |
| const colors = ['#4f46e5', '#10b981', '#f59e0b', '#ffffff']; | |
| const color = colors[Math.floor(Math.random() * colors.length)]; | |
| particle.style.backgroundColor = color; | |
| // Apply animation | |
| particle.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`; | |
| // Add to container | |
| container.appendChild(particle); | |
| // Float animation | |
| const keyframes = ` | |
| @keyframes float { | |
| 0% { | |
| transform: translate(0, 0) rotate(0deg); | |
| } | |
| 50% { | |
| transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px) rotate(180deg); | |
| } | |
| 100% { | |
| transform: translate(0, 0) rotate(360deg); | |
| } | |
| } | |
| `; | |
| const style = document.createElement('style'); | |
| style.innerHTML = keyframes; | |
| document.head.appendChild(style); | |
| } | |
| } | |
| // Update scroll progress line | |
| function updateProgressLine() { | |
| const progressLine = document.getElementById('progress-line'); | |
| if (!progressLine) return; | |
| const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; | |
| const scrollPosition = window.scrollY; | |
| const progress = (scrollPosition / scrollHeight) * 100; | |
| progressLine.style.width = `${progress}%`; | |
| } | |
| // Simulate Swal if not available | |
| if (typeof Swal === 'undefined') { | |
| window.Swal = { | |
| fire: function(options) { | |
| console.log('SweetAlert would show:', options); | |
| } | |
| }; | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Boobs00/transcendent-immersion" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |