Spaces:

haraberget
/

FakeDashWalletCreator_MadeWithDeepseek

Running

App Files Files Community

haraberget commited on Oct 1, 2025

Commit

cc29ad9

verified ·

1 Parent(s): 0b54a96

clear all, make a cool shader with 3d graphics

Browse files

Files changed (1) hide show

index.html +31 -22

index.html CHANGED Viewed

@@ -8,30 +8,40 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
-    <style>
         .bg-dash {
-            background: linear-gradient(135deg, #008CE7 0%, #0E007C 100%);
         }
         .wallet-card {
-            backdrop-filter: blur(10px);
-            background: rgba(255, 255, 255, 0.1);
-            border: 1px solid rgba(255, 255, 255, 0.2);
         }
         .download-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 20px rgba(0, 140, 231, 0.3);
         }
         input:focus {
-            box-shadow: 0 0 0 3px rgba(0, 140, 231, 0.3);
         }
-    </style>
 </head>
 <body class="min-h-screen bg-dash text-white">
-    <div id="vanta-bg"></div>
-    <div class="container mx-auto px-4 py-12 relative z-10">
-        <div class="max-w-md mx-auto text-center mb-12">
             <div class="flex justify-center mb-6">
                 <svg width="64" height="64" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#008CE7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -100,8 +110,8 @@
     </div>
     <script>
-        // Initialize Vanta.js background
-        VANTA.WAVES({
             el: "#vanta-bg",
             mouseControls: true,
             touchControls: true,
@@ -111,13 +121,12 @@
             scale: 1.00,
             scaleMobile: 1.00,
             color: 0x008ce7,
-            shininess: 35.00,
-            waveHeight: 15.00,
-            waveSpeed: 0.85,
-            zoom: 0.75
         });
-        // Generate random wallet data
         function generateWalletData() {
             const username = document.getElementById('username').value;
             const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+<style>
         .bg-dash {
+            background: linear-gradient(135deg, #001233 0%, #00041a 100%);
         }
         .wallet-card {
+            backdrop-filter: blur(16px);
+            background: rgba(0, 10, 50, 0.4);
+            border: 1px solid rgba(0, 140, 231, 0.3);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+            transition: all 0.3s ease;
+        }
+        .wallet-card:hover {
+            border-color: rgba(0, 140, 231, 0.6);
+            box-shadow: 0 8px 32px rgba(0, 140, 231, 0.2);
         }
         .download-btn:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 12px 24px rgba(0, 140, 231, 0.4);
+            filter: brightness(1.1);
         }
         input:focus {
+            box-shadow: 0 0 0 4px rgba(0, 140, 231, 0.4);
+            transform: scale(1.02);
+            transition: all 0.2s ease;
         }
+</style>
 </head>
 <body class="min-h-screen bg-dash text-white">
+    <div id="vanta-bg" class="fixed inset-0 z-0"></div>
+    <div class="absolute inset-0 z-0 bg-gradient-to-b from-transparent to-black opacity-30"></div>
+    <div class="container mx-auto px-4 py-12 relative z-10 transform-gpu">
+<div class="max-w-md mx-auto text-center mb-12">
             <div class="flex justify-center mb-6">
                 <svg width="64" height="64" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#008CE7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
     </div>
     <script>
+        // Initialize Vanta.js 3D globe background
+        VANTA.GLOBE({
             el: "#vanta-bg",
             mouseControls: true,
             touchControls: true,
             scale: 1.00,
             scaleMobile: 1.00,
             color: 0x008ce7,
+            backgroundColor: 0x0a0a2a,
+            size: 1.00,
+            rings: 12,
+            points: 12.00
         });
+// Generate random wallet data
         function generateWalletData() {
             const username = document.getElementById('username').value;
             const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';