Spaces:

KBLLR
/

character-selector

Running

App Files Files Community

KBLLR commited on Oct 1

Commit

e300bff

verified ·

1 Parent(s): e70468a

make it more modern and detailed

Browse files

Files changed (1) hide show

index.html +134 -29

index.html CHANGED Viewed

@@ -12,72 +12,177 @@
         body {
             margin: 0;
             overflow: hidden;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
         #canvas {
             display: block;
         }
         .transition-all {
-            transition: all 0.3s ease;
         }
         .character-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
         }
         .dialog-box {
-            background: rgba(0, 0, 0, 0.8);
-            backdrop-filter: blur(5px);
         }
         .character-preview {
             width: 100%;
             height: 200px;
             background: rgba(255, 255, 255, 0.1);
-            border-radius: 0.5rem;
         }
     </style>
 </head>
 <body class="bg-gray-900 text-white">
     <!-- Welcome Screen -->
-    <div id="welcome-screen" class="fixed inset-0 flex items-center justify-center bg-gray-900 z-50 transition-all duration-500">
-        <div class="text-center max-w-2xl p-8 bg-gray-800 rounded-xl shadow-2xl">
-            <h1 class="text-5xl font-bold mb-6 bg-gradient-to-r from-purple-500 to-blue-500 bg-clip-text text-transparent">3D Character World</h1>
-            <p class="text-xl mb-8 text-gray-300">Explore a vibrant 3D world with interactive characters. Select your avatar and meet others along your journey!</p>
-            <button id="start-btn" class="px-8 py-3 bg-gradient-to-r from-purple-600 to-blue-600 rounded-full text-white font-bold text-lg hover:from-purple-700 hover:to-blue-700 transition-all transform hover:scale-105 shadow-lg">
-                Begin Adventure
             </button>
         </div>
     </div>
     <!-- Character Selection Screen -->
-    <div id="character-selection" class="fixed inset-0 bg-gray-900 z-40 transition-all duration-500 opacity-0 pointer-events-none">
-        <div class="container mx-auto px-4 py-8 h-full flex flex-col">
-            <h2 class="text-3xl font-bold mb-8 text-center">Choose Your Character</h2>
-            <div class="flex-1 overflow-y-auto pb-24">
-                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                     <!-- Character cards will be dynamically inserted here -->
                 </div>
             </div>
-            <div class="fixed bottom-0 left-0 right-0 bg-gray-900 border-t border-gray-700 py-4 px-4 z-50">
                 <div class="container mx-auto text-center">
-                    <button id="confirm-character" class="px-8 py-3 bg-green-600 rounded-full text-white font-bold text-lg hover:bg-green-700 transition-all transform hover:scale-105 shadow-lg opacity-0">
-                        Confirm Selection
                     </button>
                 </div>
             </div>
         </div>
     </div>
     <!-- World Selection Screen -->
-    <div id="world-selection" class="fixed inset-0 bg-gray-900 z-30 transition-all duration-500 opacity-0 pointer-events-none">
-        <div class="container mx-auto px-4 py-8 h-full flex flex-col">
-            <h2 class="text-3xl font-bold mb-8 text-center">Select 5 Characters for Your World</h2>
-            <div class="flex-1 overflow-y-auto pb-24">
-                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6">
                     <!-- World character cards will be dynamically inserted here -->
                 </div>
             </div>
-            <div class="fixed bottom-0 left-0 right-0 bg-gray-900 border-t border-gray-700 py-4 px-4 z-50">
                 <div class="container mx-auto text-center">
-                    <button id="start-world" class="px-8 py-3 bg-green-600 rounded-full text-white font-bold text-lg hover:bg-green-700 transition-all transform hover:scale-105 shadow-lg opacity-0">
-                        Generate World
                     </button>
                 </div>
             </div>

         body {
             margin: 0;
             overflow: hidden;
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
         }
         #canvas {
             display: block;
         }
         .transition-all {
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .character-card {
+            background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.9));
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
         }
         .character-card:hover {
+            transform: translateY(-8px) scale(1.02);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+            border-color: rgba(139, 92, 246, 0.5);
         }
         .dialog-box {
+            background: rgba(15, 23, 42, 0.95);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
         }
         .character-preview {
             width: 100%;
             height: 200px;
+            background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
+            border-radius: 1rem;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            position: relative;
+            overflow: hidden;
+        }
+        .character-preview::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.05), transparent);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .character-card:hover .character-preview::before {
+            opacity: 1;
+        }
+        .glass-effect {
             background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        .gradient-text {
+            background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .floating-animation {
+            animation: float 6s ease-in-out infinite;
+        }
+        @keyframes float {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+        }
+        .pulse-glow {
+            animation: pulse-glow 2s ease-in-out infinite alternate;
+        }
+        @keyframes pulse-glow {
+            from { box-shadow: 0 0 20px rgba(139, 92, 246, 0.4); }
+            to { box-shadow: 0 0 30px rgba(139, 92, 246, 0.8); }
         }
     </style>
 </head>
 <body class="bg-gray-900 text-white">
     <!-- Welcome Screen -->
+    <div id="welcome-screen" class="fixed inset-0 flex items-center justify-center bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 z-50 transition-all duration-500">
+        <div class="absolute inset-0 overflow-hidden">
+            <div class="absolute -top-1/2 -left-1/2 w-full h-full bg-gradient-conic from-transparent via-purple-500/10 to-transparent animate-spin-slow"></div>
+            <div class="absolute -top-1/2 -right-1/2 w-full h-full bg-gradient-conic from-transparent via-blue-500/10 to-transparent animate-spin-slow" style="animation-delay: -3s;"></div>
+        </div>
+        <div class="text-center max-w-4xl p-12 glass-effect rounded-3xl shadow-2xl relative z-10 border border-white/10">
+            <div class="floating-animation mb-8">
+                <div class="w-32 h-32 mx-auto bg-gradient-to-r from-purple-500 to-blue-500 rounded-full flex items-center justify-center shadow-2xl">
+                    <svg class="w-16 h-16 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                    </svg>
+                </div>
+            </div>
+            <h1 class="text-6xl font-black mb-6 gradient-text tracking-tight">CharacterVerse</h1>
+            <p class="text-2xl mb-10 text-gray-200 leading-relaxed">Immerse yourself in an expansive 3D universe where every character has a story. Choose your avatar and embark on an unforgettable journey through dynamic worlds filled with interactive companions.</p>
+            <button id="start-btn" class="px-12 py-4 bg-gradient-to-r from-purple-600 to-blue-600 rounded-2xl text-white font-bold text-xl hover:from-purple-700 hover:to-blue-700 transition-all transform hover:scale-110 shadow-2xl pulse-glow border border-white/20">
+                <span class="flex items-center justify-center space-x-3">
+                    <span>Begin Epic Journey</span>
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
+                    </svg>
+                </span>
             </button>
+            <div class="mt-8 flex justify-center space-x-6 text-sm text-gray-400">
+                <div class="flex items-center space-x-2">
+                    <div class="w-2 h-2 bg-green-500 rounded-full"></div>
+                    <span>Real-time 3D Graphics</span>
+                </div>
+                <div class="flex items-center space-x-2">
+                    <div class="w-2 h-2 bg-blue-500 rounded-full"></div>
+                    <span>Interactive Characters</span>
+                </div>
+                <div class="flex items-center space-x-2">
+                    <div class="w-2 h-2 bg-purple-500 rounded-full"></div>
+                    <span>Dynamic Environments</span>
+                </div>
+            </div>
         </div>
     </div>
     <!-- Character Selection Screen -->
+    <div id="character-selection" class="fixed inset-0 bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 z-40 transition-all duration-500 opacity-0 pointer-events-none">
+        <div class="absolute inset-0 bg-black/20 backdrop-blur-sm"></div>
+        <div class="container mx-auto px-6 py-8 h-full flex flex-col relative z-10">
+            <div class="text-center mb-12">
+                <h2 class="text-5xl font-black mb-4 gradient-text">Choose Your Champion</h2>
+                <p class="text-xl text-gray-300 max-w-2xl mx-auto">Select the perfect avatar that represents your journey. Each character comes with unique abilities and personality traits.</p>
+            </div>
+            <div class="flex-1 overflow-y-auto pb-32">
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 max-w-7xl mx-auto">
                     <!-- Character cards will be dynamically inserted here -->
                 </div>
             </div>
+            <div class="fixed bottom-0 left-0 right-0 bg-gradient-to-t from-slate-900/95 via-slate-900/80 to-transparent py-8 px-6 z-50 backdrop-blur-lg border-t border-white/10">
                 <div class="container mx-auto text-center">
+                    <button id="confirm-character" class="px-12 py-4 bg-gradient-to-r from-green-600 to-emerald-500 rounded-2xl text-white font-bold text-lg hover:from-green-700 hover:to-emerald-600 transition-all transform hover:scale-105 shadow-2xl border border-white/20 opacity-0 pulse-glow">
+                        <span class="flex items-center justify-center space-x-3">
+                            <span>Confirm Champion</span>
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                            </svg>
+                        </span>
                     </button>
                 </div>
             </div>
         </div>
     </div>
     <!-- World Selection Screen -->
+    <div id="world-selection" class="fixed inset-0 bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900 z-30 transition-all duration-500 opacity-0 pointer-events-none">
+        <div class="absolute inset-0 bg-black/20 backdrop-blur-sm"></div>
+        <div class="container mx-auto px-6 py-8 h-full flex flex-col relative z-10">
+            <div class="text-center mb-12">
+                <h2 class="text-5xl font-black mb-4 gradient-text">Forge Your Universe</h2>
+                <p class="text-xl text-gray-300 max-w-2xl mx-auto">Select 5 unique characters to populate your world. Each will bring their own stories and interactions to your adventure.</p>
+                <div class="mt-4 inline-flex items-center space-x-4 bg-white/5 rounded-full px-6 py-3 border border-white/10">
+                    <span class="text-green-400 font-semibold" id="selected-count">0</span>
+                    <span class="text-gray-400">/</span>
+                    <span class="text-gray-300">5 Characters Selected</span>
+                </div>
+            </div>
+            <div class="flex-1 overflow-y-auto pb-32">
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-8 max-w-7xl mx-auto">
                     <!-- World character cards will be dynamically inserted here -->
                 </div>
             </div>
+            <div class="fixed bottom-0 left-0 right-0 bg-gradient-to-t from-slate-900/95 via-slate-900/80 to-transparent py-8 px-6 z-50 backdrop-blur-lg border-t border-white/10">
                 <div class="container mx-auto text-center">
+                    <button id="start-world" class="px-12 py-4 bg-gradient-to-r from-purple-600 to-blue-600 rounded-2xl text-white font-bold text-lg hover:from-purple-700 hover:to-blue-700 transition-all transform hover:scale-105 shadow-2xl border border-white/20 opacity-0 pulse-glow">
+                        <span class="flex items-center justify-center space-x-3">
+                            <span>Generate Dynamic World</span>
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+                            </svg>
+                        </span>
                     </button>
                 </div>
             </div>