Spaces:

simorocco02
/

promptgenius-wizard

Running

App Files Files Community

simorocco02 commited on Oct 12, 2025

Commit

c8da4c3

verified ·

1 Parent(s): b487229

Aggiungi qualche animazione al sito miglioralo in generale fai in modo che la gente non lo trovi soltanto utile ma anche bello da navigare.. non dargli il solito aspetto noioso

Browse files

Files changed (1) hide show

index.html +175 -44

index.html CHANGED Viewed

@@ -8,24 +8,49 @@
     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <style>
         .gradient-bg {
             background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
         }
         .prompt-card {
-            transition: all 0.3s ease;
             box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
         }
         .prompt-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
         }
         .typewriter {
             border-right: 3px solid;
             white-space: nowrap;
             overflow: hidden;
-            animation: typing 3s steps(40, end), blink-caret .75s step-end infinite;
         }
-        @keyframes typing {
             from { width: 0 }
             to { width: 100% }
         }
@@ -33,17 +58,71 @@
             from, to { border-color: transparent }
             50% { border-color: #6e8efb }
         }
     </style>
 </head>
 <body class="min-h-screen bg-gray-50">
     <!-- Hero Section -->
     <div class="gradient-bg text-white py-20 px-4">
         <div class="container mx-auto max-w-6xl text-center">
-            <h1 class="text-4xl md:text-6xl font-bold mb-6">PromptGenius Wizard</h1>
-            <p class="text-xl md:text-2xl mb-8 typewriter">The magical tool to craft perfect AI prompts ✨</p>
             <div class="flex justify-center">
-                <button id="startBtn" class="bg-white text-purple-600 font-bold py-3 px-8 rounded-full text-lg hover:bg-purple-100 transition duration-300 flex items-center">
-                    <i data-feather="wand" class="mr-2"></i> Start the Magic
                 </button>
             </div>
         </div>
@@ -86,8 +165,8 @@
             <div id="resultSection" class="hidden mt-8">
                 <h3 class="text-xl font-bold text-gray-800 mb-4">✨ Your Perfect Prompt:</h3>
                 <div class="bg-gray-50 p-6 rounded-lg mb-6">
-                    <div id="generatedPrompt" class="text-gray-700 font-medium"></div>
-                    <button id="copyPromptBtn" class="mt-4 bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded-lg transition duration-300 flex items-center">
                         <i data-feather="copy" class="mr-2"></i> Copy Prompt
                     </button>
                 </div>
@@ -140,46 +219,85 @@
             </div>
         </div>
     </div>
     <!-- Footer -->
-    <footer class="bg-gray-800 text-white py-12 px-4">
-        <div class="container mx-auto max-w-6xl">
             <div class="flex flex-col md:flex-row justify-between items-center">
                 <div class="mb-6 md:mb-0">
                     <h3 class="text-2xl font-bold mb-2">PromptGenius Wizard</h3>
                     <p class="text-gray-300">Crafting perfect AI prompts since 2023</p>
                 </div>
                 <div class="flex space-x-6">
-                    <a href="#" class="text-gray-300 hover:text-white transition duration-300">
-                        <i data-feather="github"></i>
-                    </a>
-                    <a href="#" class="text-gray-300 hover:text-white transition duration-300">
-                        <i data-feather="twitter"></i>
-                    </a>
-                    <a href="#" class="text-gray-300 hover:text-white transition duration-300">
-                        <i data-feather="mail"></i>
-                    </a>
-                </div>
             </div>
-            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
-                <p>© 2023 PromptGenius Wizard. All prompts are free to use.</p>
             </div>
-        </div>
     </footer>
     <script>
         // Initialize Feather Icons
         feather.replace();
         // Show assistant section when start button is clicked
         document.getElementById('startBtn').addEventListener('click', function() {
-            this.classList.add('hidden');
-            document.getElementById('assistantSection').classList.remove('hidden');
-            window.scrollTo({
-                top: document.getElementById('assistantSection').offsetTop - 50,
-                behavior: 'smooth'
             });
-        });
         // Prompt generation based on category
         const promptButtons = document.querySelectorAll('.prompt-btn');
@@ -247,17 +365,30 @@
                     tools = 'ChatGPT\nPerplexity AI\nElicit (for research)\nNotion (for organization)';
                     break;
             }
-            document.getElementById('generatedPrompt').textContent = prompt;
-            document.getElementById('recommendedSettings').innerHTML = settings.replace(/\n/g, '<br>');
-            document.getElementById('suggestedTools').innerHTML = tools.replace(/\n/g, '<br>');
-            document.getElementById('resultSection').classList.remove('hidden');
-            window.scrollTo({
-                top: document.getElementById('resultSection').offsetTop - 50,
-                behavior: 'smooth'
-            });
-        }
     </script>
 </body>
 </html>

     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
+        body {
+            font-family: 'Poppins', sans-serif;
+            scroll-behavior: smooth;
+        }
         .gradient-bg {
             background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
+            animation: gradientShift 15s ease infinite;
+            background-size: 200% 200%;
+        }
+        @keyframes gradientShift {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
         }
         .prompt-card {
+            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
             box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+            transform: perspective(1000px) rotateX(0deg);
+            backface-visibility: hidden;
         }
         .prompt-card:hover {
+            transform: perspective(1000px) rotateX(5deg) translateY(-10px);
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
         }
         .typewriter {
             border-right: 3px solid;
             white-space: nowrap;
             overflow: hidden;
+            animation:
+                typing 3s steps(40, end),
+                blink-caret .75s step-end infinite,
+                fadeIn 1s ease-in-out;
         }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+@keyframes typing {
             from { width: 0 }
             to { width: 100% }
         }
             from, to { border-color: transparent }
             50% { border-color: #6e8efb }
         }
+        .floating {
+            animation: floating 3s ease-in-out infinite;
+        }
+        @keyframes floating {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0px); }
+        }
+        .btn-glow {
+            position: relative;
+            overflow: hidden;
+        }
+        .btn-glow::after {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
+            transform: translate(25%, 25%);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .btn-glow:hover::after {
+            opacity: 0.6;
+        }
+        .text-gradient {
+            background: linear-gradient(90deg, #6e8efb, #a777e3);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+            display: inline;
+        }
+        .result-appear {
+            animation: appear 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+            opacity: 0;
+            transform: translateY(20px);
+        }
+        @keyframes appear {
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
     </style>
 </head>
 <body class="min-h-screen bg-gray-50">
     <!-- Hero Section -->
     <div class="gradient-bg text-white py-20 px-4">
         <div class="container mx-auto max-w-6xl text-center">
+            <h1 class="text-4xl md:text-6xl font-bold mb-6">
+                <span class="text-gradient floating inline-block">PromptGenius Wizard</span>
+            </h1>
+<p class="text-xl md:text-2xl mb-8 typewriter">The magical tool to craft perfect AI prompts ✨</p>
             <div class="flex justify-center">
+                <button id="startBtn" class="bg-white text-purple-600 font-bold py-3 px-8 rounded-full text-lg hover:bg-purple-100 transition duration-300 flex items-center btn-glow shadow-lg">
+<i data-feather="wand" class="mr-2"></i> Start the Magic
                 </button>
             </div>
         </div>
             <div id="resultSection" class="hidden mt-8">
                 <h3 class="text-xl font-bold text-gray-800 mb-4">✨ Your Perfect Prompt:</h3>
                 <div class="bg-gray-50 p-6 rounded-lg mb-6">
+                <div id="generatedPrompt" class="text-gray-700 font-medium text-lg leading-relaxed"></div>
+<button id="copyPromptBtn" class="mt-4 bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded-lg transition duration-300 flex items-center">
                         <i data-feather="copy" class="mr-2"></i> Copy Prompt
                     </button>
                 </div>
             </div>
         </div>
     </div>
     <!-- Footer -->
+    <footer class="bg-gray-900 text-white py-12 px-4 relative overflow-hidden">
+        <div class="absolute top-0 left-0 w-full h-full opacity-10">
+            <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-purple-500 mix-blend-screen filter blur-3xl animate-pulse"></div>
+            <div class="absolute top-3/4 right-1/4 w-64 h-64 rounded-full bg-blue-500 mix-blend-screen filter blur-3xl animate-pulse delay-500"></div>
+        </div>
+<div class="container mx-auto max-w-6xl">
             <div class="flex flex-col md:flex-row justify-between items-center">
                 <div class="mb-6 md:mb-0">
                     <h3 class="text-2xl font-bold mb-2">PromptGenius Wizard</h3>
                     <p class="text-gray-300">Crafting perfect AI prompts since 2023</p>
                 </div>
                 <div class="flex space-x-6">
+                <a href="#" class="text-gray-300 hover:text-white transition duration-300 hover:-translate-y-1 transform">
+                    <i data-feather="github" class="w-6 h-6 hover:text-purple-400"></i>
+                </a>
+                <a href="#" class="text-gray-300 hover:text-white transition duration-300 hover:-translate-y-1 transform">
+                    <i data-feather="twitter" class="w-6 h-6 hover:text-blue-400"></i>
+                </a>
+                <a href="#" class="text-gray-300 hover:text-white transition duration-300 hover:-translate-y-1 transform">
+                    <i data-feather="mail" class="w-6 h-6 hover:text-pink-400"></i>
+                </a>
+</div>
             </div>
+            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400 relative z-10">
+                <p class="text-sm">© 2023 PromptGenius Wizard. All prompts are free to use.</p>
+                <div class="mt-2">
+                    <span class="inline-block w-2 h-2 rounded-full bg-purple-500 animate-pulse"></span>
+                    <span class="inline-block w-2 h-2 rounded-full bg-purple-500 animate-pulse delay-100 mx-1"></span>
+                    <span class="inline-block w-2 h-2 rounded-full bg-purple-500 animate-pulse delay-200"></span>
+                </div>
             </div>
+</div>
     </footer>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
     <script>
         // Initialize Feather Icons
         feather.replace();
+        // Animate elements on page load
+        document.addEventListener('DOMContentLoaded', () => {
+            gsap.from('.prompt-card', {
+                duration: 0.8,
+                y: 30,
+                opacity: 0,
+                stagger: 0.15,
+                ease: 'back.out(1.2)'
+            });
+            gsap.from('#startBtn', {
+                duration: 1,
+                y: 20,
+                opacity: 0,
+                delay: 0.5,
+                ease: 'elastic.out(1, 0.5)'
+            });
+        });
         // Show assistant section when start button is clicked
         document.getElementById('startBtn').addEventListener('click', function() {
+            gsap.to(this, {
+                duration: 0.5,
+                opacity: 0,
+                y: -20,
+                onComplete: () => this.classList.add('hidden')
             });
+            gsap.from('#assistantSection', {
+                duration: 1,
+                y: 50,
+                opacity: 0,
+                ease: 'back.out(1.2)',
+                onStart: () => document.getElementById('assistantSection').classList.remove('hidden')
+            });
+            gsap.to(window, {
+                duration: 1.2,
+                scrollTo: '#assistantSection',
+                ease: 'power3.inOut'
+            });
+});
         // Prompt generation based on category
         const promptButtons = document.querySelectorAll('.prompt-btn');
                     tools = 'ChatGPT\nPerplexity AI\nElicit (for research)\nNotion (for organization)';
                     break;
             }
+            const resultSection = document.getElementById('resultSection');
+            resultSection.classList.add('result-appear');
+            setTimeout(() => {
+                document.getElementById('generatedPrompt').textContent = prompt;
+                document.getElementById('recommendedSettings').innerHTML = settings.replace(/\n/g, '<br>');
+                document.getElementById('suggestedTools').innerHTML = tools.replace(/\n/g, '<br>');
+                resultSection.classList.remove('hidden');
+                gsap.from('.result-appear > *', {
+                    duration: 0.6,
+                    y: 20,
+                    opacity: 0,
+                    stagger: 0.1,
+                    ease: 'back.out(1.2)'
+                });
+                gsap.to(window, {
+                    duration: 1,
+                    scrollTo: '#resultSection',
+                    ease: 'power2.inOut'
+                });
+            }, 300);
+}
     </script>
 </body>
 </html>