Spaces:

simorocco02
/

promptgenius-wizard

Running

App Files Files Community

simorocco02 commited on Oct 12, 2025

Commit

542802a

verified ·

1 Parent(s): c8da4c3

Migliora il sito, rendilo un pochino più estetico,

Browse files

Files changed (1) hide show

index.html +58 -29

index.html CHANGED Viewed

@@ -14,14 +14,24 @@
             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%; }
@@ -31,12 +41,26 @@
             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;
@@ -89,16 +113,22 @@
         .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);
@@ -114,14 +144,14 @@
 </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>
@@ -164,22 +194,22 @@
             <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 class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                    <div class="bg-blue-50 p-5 rounded-lg">
-                        <h4 class="font-bold text-blue-800 mb-3 flex items-center">
                             <i data-feather="settings" class="mr-2"></i> Recommended Settings
                         </h4>
                         <div id="recommendedSettings" class="text-gray-700"></div>
                     </div>
-                    <div class="bg-green-50 p-5 rounded-lg">
-                        <h4 class="font-bold text-green-800 mb-3 flex items-center">
                             <i data-feather="tool" class="mr-2"></i> Suggested Tools
                         </h4>
                         <div id="suggestedTools" class="text-gray-700"></div>
@@ -188,10 +218,9 @@
             </div>
         </div>
     </div>
     <!-- Examples Section -->
-    <div class="container mx-auto max-w-4xl px-4 py-16">
-        <h2 class="text-2xl md:text-3xl font-bold text-center text-gray-800 mb-12">Prompt Examples</h2>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div class="prompt-card bg-white p-6 rounded-xl">
@@ -220,19 +249,19 @@
         </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">

             font-family: 'Poppins', sans-serif;
             scroll-behavior: smooth;
         }
         .gradient-bg {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             animation: gradientShift 15s ease infinite;
             background-size: 200% 200%;
+            position: relative;
+            overflow: hidden;
         }
+        .gradient-bg::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%);
+        }
+@keyframes gradientShift {
             0% { background-position: 0% 50%; }
             50% { background-position: 100% 50%; }
             100% { background-position: 0% 50%; }
             box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
             transform: perspective(1000px) rotateX(0deg);
             backface-visibility: hidden;
+            border: 1px solid rgba(0,0,0,0.05);
+            position: relative;
+            overflow: hidden;
         }
+        .prompt-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 4px;
+            background: linear-gradient(90deg, #667eea, #764ba2);
+        }
         .prompt-card:hover {
             transform: perspective(1000px) rotateX(5deg) translateY(-10px);
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
         }
+.typewriter {
             border-right: 3px solid;
             white-space: nowrap;
             overflow: hidden;
         .btn-glow:hover::after {
             opacity: 0.6;
         }
         .text-gradient {
+            background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
             -webkit-background-clip: text;
             background-clip: text;
             color: transparent;
             display: inline;
+            background-size: 200% auto;
+            animation: shine 3s linear infinite;
         }
+        @keyframes shine {
+            to {
+                background-position: 200% center;
+            }
+        }
+.result-appear {
             animation: appear 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
             opacity: 0;
             transform: translateY(20px);
 </head>
 <body class="min-h-screen bg-gray-50">
     <!-- Hero Section -->
+    <div class="gradient-bg text-white py-24 px-4">
+<div class="container mx-auto max-w-6xl text-center">
+            <h1 class="text-5xl md:text-7xl 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 font-light">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 hover:shadow-xl">
 <i data-feather="wand" class="mr-2"></i> Start the Magic
                 </button>
             </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 border border-gray-100">
+<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 class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div class="bg-blue-50 p-5 rounded-lg border border-blue-100">
+<h4 class="font-bold text-blue-800 mb-3 flex items-center">
                             <i data-feather="settings" class="mr-2"></i> Recommended Settings
                         </h4>
                         <div id="recommendedSettings" class="text-gray-700"></div>
                     </div>
+                    <div class="bg-green-50 p-5 rounded-lg border border-green-100">
+<h4 class="font-bold text-green-800 mb-3 flex items-center">
                             <i data-feather="tool" class="mr-2"></i> Suggested Tools
                         </h4>
                         <div id="suggestedTools" class="text-gray-700"></div>
             </div>
         </div>
     </div>
     <!-- Examples Section -->
+    <div class="container mx-auto max-w-4xl px-4 py-20">
+<h2 class="text-2xl md:text-3xl font-bold text-center text-gray-800 mb-12">Prompt Examples</h2>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div class="prompt-card bg-white p-6 rounded-xl">
         </div>
     </div>
     <!-- Footer -->
+    <footer class="bg-gray-900 text-white py-16 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-8 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-8">
+<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">