Hugging Face's logo

Spaces:
ProjectGenesis
/
mysticcrate-vault
Running

App Files Community
ProjectGenesis commited on
Commit
b00ca40
·
verified ·
1 Parent(s): d62dca5

Apply this

Browse files
Files changed (3) hide show
  1. index.html +14 -10
  2. inventory.html +131 -0
  3. leaderboard.html +95 -0
index.html CHANGED
@@ -53,15 +53,14 @@
53
  <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-amber-500/5 via-transparent to-transparent"></div>
54
  <div id="particles" class="absolute inset-0"></div>
55
  </div>
56
-
57
  <!-- Navigation -->
58
  <nav class="fixed top-0 w-full z-50 bg-black/20 backdrop-blur-md border-b border-amber-500/20">
59
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
60
  <div class="flex justify-between items-center h-16">
61
  <div class="flex items-center">
62
- <div class="text-2xl font-orbitron font-bold bg-gradient-to-r from-amber-400 to-yellow-300 bg-clip-text text-transparent">
63
  MYSTICCRATE
64
- </div>
65
  </div>
66
  <div class="flex items-center space-x-6">
67
  <div class="flex items-center space-x-2 bg-amber-500/10 px-4 py-2 rounded-full border border-amber-500/30">
@@ -76,12 +75,15 @@
76
  <span class="text-secondary-300">150 GC</span>
77
  </div>
78
  </div>
 
 
 
 
79
  </div>
80
  </div>
81
  </div>
82
  </nav>
83
-
84
- <!-- Hero Section -->
85
  <section class="relative pt-32 pb-20 px-4 text-center">
86
  <div class="max-w-4xl mx-auto">
87
  <h1 class="text-6xl md:text-7xl font-orbitron font-black uppercase mb-6">
@@ -221,15 +223,14 @@
221
  </div>
222
  </div>
223
  </section>
224
-
225
  <!-- Action Buttons -->
226
  <section class="relative py-12 px-4">
227
  <div class="max-w-7xl mx-auto flex flex-col sm:flex-row gap-4 justify-center">
228
- <button class="action-btn primary">
229
  <i data-feather="package" class="w-5 h-5 mr-2"></i>
230
  OPEN ALL BOXES
231
  </button>
232
- <button class="action-btn secondary">
233
  <i data-feather="refresh-cw" class="w-5 h-5 mr-2"></i>
234
  CONVERT BOXES
235
  </button>
@@ -237,10 +238,13 @@
237
  <i data-feather="bar-chart-2" class="w-5 h-5 mr-2"></i>
238
  VIEW DROP RATES
239
  </button>
 
 
 
 
240
  </div>
241
  </section>
242
-
243
- <!-- Reveal Modal -->
244
  <div id="revealModal" class="fixed inset-0 z-50 hidden">
245
  <div class="absolute inset-0 bg-black/80 backdrop-blur-sm"></div>
246
  <div class="relative flex items-center justify-center min-h-screen p-4">
 
53
  <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-amber-500/5 via-transparent to-transparent"></div>
54
  <div id="particles" class="absolute inset-0"></div>
55
  </div>
 
56
  <!-- Navigation -->
57
  <nav class="fixed top-0 w-full z-50 bg-black/20 backdrop-blur-md border-b border-amber-500/20">
58
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
59
  <div class="flex justify-between items-center h-16">
60
  <div class="flex items-center">
61
+ <a href="/" class="text-2xl font-orbitron font-bold bg-gradient-to-r from-amber-400 to-yellow-300 bg-clip-text text-transparent">
62
  MYSTICCRATE
63
+ </a>
64
  </div>
65
  <div class="flex items-center space-x-6">
66
  <div class="flex items-center space-x-2 bg-amber-500/10 px-4 py-2 rounded-full border border-amber-500/30">
 
75
  <span class="text-secondary-300">150 GC</span>
76
  </div>
77
  </div>
78
+ <a href="/inventory.html" class="flex items-center space-x-2 bg-purple-500/10 px-4 py-2 rounded-full border border-purple-500/30 hover:bg-purple-500/20 transition-colors">
79
+ <i data-feather="package" class="w-5 h-5 text-purple-400"></i>
80
+ <span class="font-semibold text-purple-300">Inventory</span>
81
+ </a>
82
  </div>
83
  </div>
84
  </div>
85
  </nav>
86
+ <!-- Hero Section -->
 
87
  <section class="relative pt-32 pb-20 px-4 text-center">
88
  <div class="max-w-4xl mx-auto">
89
  <h1 class="text-6xl md:text-7xl font-orbitron font-black uppercase mb-6">
 
223
  </div>
224
  </div>
225
  </section>
 
226
  <!-- Action Buttons -->
227
  <section class="relative py-12 px-4">
228
  <div class="max-w-7xl mx-auto flex flex-col sm:flex-row gap-4 justify-center">
229
+ <button class="action-btn primary" onclick="openAllBoxes()">
230
  <i data-feather="package" class="w-5 h-5 mr-2"></i>
231
  OPEN ALL BOXES
232
  </button>
233
+ <button class="action-btn secondary" onclick="convertBoxes()">
234
  <i data-feather="refresh-cw" class="w-5 h-5 mr-2"></i>
235
  CONVERT BOXES
236
  </button>
 
238
  <i data-feather="bar-chart-2" class="w-5 h-5 mr-2"></i>
239
  VIEW DROP RATES
240
  </button>
241
+ <a href="/leaderboard.html" class="action-btn tertiary">
242
+ <i data-feather="award" class="w-5 h-5 mr-2"></i>
243
+ LEADERBOARD
244
+ </a>
245
  </div>
246
  </section>
247
+ <!-- Reveal Modal -->
 
248
  <div id="revealModal" class="fixed inset-0 z-50 hidden">
249
  <div class="absolute inset-0 bg-black/80 backdrop-blur-sm"></div>
250
  <div class="relative flex items-center justify-center min-h-screen p-4">
inventory.html ADDED
@@ -0,0 +1,131 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MysticCrate Vault - Inventory</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <script src="https://cdn.tailwindcss.com"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <link rel="stylesheet" href="style.css">
14
+ <script>
15
+ tailwind.config = {
16
+ theme: {
17
+ extend: {
18
+ colors: {
19
+ primary: {
20
+ 50: '#fff7ed',
21
+ 100: '#ffedd5',
22
+ 200: '#fed7aa',
23
+ 300: '#fdba74',
24
+ 400: '#fb923c',
25
+ 500: '#f97316',
26
+ 600: '#ea580c',
27
+ 700: '#c2410c',
28
+ 800: '#9a3412',
29
+ 900: '#7c2d12',
30
+ },
31
+ secondary: {
32
+ 50: '#f0f9ff',
33
+ 100: '#e0f2fe',
34
+ 200: '#bae6fd',
35
+ 300: '#7dd3fc',
36
+ 400: '#38bdf8',
37
+ 500: '#0ea5e9',
38
+ 600: '#0284c7',
39
+ 700: '#0369a1',
40
+ 800: '#075985',
41
+ 900: '#0c4a6e',
42
+ }
43
+ }
44
+ }
45
+ }
46
+ }
47
+ </script>
48
+ </head>
49
+ <body class="bg-black font-poppins text-white overflow-x-hidden">
50
+ <!-- Background Elements -->
51
+ <div class="fixed inset-0 -z-10">
52
+ <div class="absolute inset-0 bg-gradient-to-br from-[#0a0a0a] via-[#1a0d00] to-[#2e1300] opacity-100"></div>
53
+ <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-amber-500/5 via-transparent to-transparent"></div>
54
+ <div id="particles" class="absolute inset-0"></div>
55
+ </div>
56
+
57
+ <!-- Navigation -->
58
+ <nav class="fixed top-0 w-full z-50 bg-black/20 backdrop-blur-md border-b border-amber-500/20">
59
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
60
+ <div class="flex justify-between items-center h-16">
61
+ <div class="flex items-center">
62
+ <a href="/" class="text-2xl font-orbitron font-bold bg-gradient-to-r from-amber-400 to-yellow-300 bg-clip-text text-transparent">
63
+ MYSTICCRATE
64
+ </a>
65
+ </div>
66
+ <div class="flex items-center space-x-6">
67
+ <div class="flex items-center space-x-2 bg-amber-500/10 px-4 py-2 rounded-full border border-amber-500/30">
68
+ <i data-feather="key" class="w-5 h-5 text-amber-400"></i>
69
+ <span class="font-semibold text-amber-300">5 Keys</span>
70
+ </div>
71
+ <div class="flex items-center space-x-4">
72
+ <div class="text-sm bg-primary-500/10 px-3 py-1 rounded-full border border-primary-500/30">
73
+ <span class="text-primary-300">2,500 SC</span>
74
+ </div>
75
+ <div class="text-sm bg-secondary-500/10 px-3 py-1 rounded-full border border-secondary-500/30">
76
+ <span class="text-secondary-300">150 GC</span>
77
+ </div>
78
+ </div>
79
+ <a href="/inventory.html" class="flex items-center space-x-2 bg-purple-500/10 px-4 py-2 rounded-full border border-purple-500/30 hover:bg-purple-500/20 transition-colors">
80
+ <i data-feather="package" class="w-5 h-5 text-purple-400"></i>
81
+ <span class="font-semibold text-purple-300">Inventory</span>
82
+ </a>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ </nav>
87
+
88
+ <!-- Hero Section -->
89
+ <section class="relative pt-32 pb-12 px-4 text-center">
90
+ <div class="max-w-4xl mx-auto">
91
+ <h1 class="text-6xl md:text-7xl font-orbitron font-black uppercase mb-6">
92
+ <span class="bg-gradient-to-r from-purple-500 via-pink-400 to-purple-300 bg-clip-text text-transparent">
93
+ YOUR INVENTORY
94
+ </span>
95
+ </h1>
96
+ <p class="text-xl md:text-2xl text-purple-200/80 mb-12 max-w-3xl mx-auto leading-relaxed">
97
+ All your collected rewards and unopened crates in one place.
98
+ </p>
99
+ </div>
100
+ </section>
101
+
102
+ <!-- Inventory Sections -->
103
+ <section class="relative py-12 px-4">
104
+ <div class="max-w-7xl mx-auto">
105
+ <div class="glass-panel p-8 rounded-2xl">
106
+ <div class="flex justify-between items-center mb-8">
107
+ <h2 class="text-3xl font-orbitron font-bold text-purple-300">Your Collection</h2>
108
+ <div class="flex space-x-4">
109
+ <button class="filter-btn active" data-filter="all">All Items</button>
110
+ <button class="filter-btn" data-filter="currency">Currency</button>
111
+ <button class="filter-btn" data-filter="skins">Skins</button>
112
+ <button class="filter-btn" data-filter="boosts">Boosts</button>
113
+ </div>
114
+ </div>
115
+
116
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6" id="inventoryGrid">
117
+ <!-- Items will be loaded dynamically -->
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </section>
122
+
123
+ <script src="components/particles.js"></script>
124
+ <script src="script.js"></script>
125
+ <script>
126
+ feather.replace();
127
+ initParticles();
128
+ loadInventory();
129
+ </script>
130
+ </body>
131
+ </html>
leaderboard.html ADDED
@@ -0,0 +1,95 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ```html
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>MysticCrate Vault - Leaderboard</title>
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
11
+ <script src="https://cdn.tailwindcss.com"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
13
+ <script src="https://unpkg.com/feather-icons"></script>
14
+ <link rel="stylesheet" href="style.css">
15
+ <script>
16
+ tailwind.config = {
17
+ theme: {
18
+ extend: {
19
+ colors: {
20
+ primary: {
21
+ 50: '#fff7ed',
22
+ 100: '#ffedd5',
23
+ 200: '#fed7aa',
24
+ 300: '#fdba74',
25
+ 400: '#fb923c',
26
+ 500: '#f97316',
27
+ 600: '#ea580c',
28
+ 700: '#c2410c',
29
+ 800: '#9a3412',
30
+ 900: '#7c2d12',
31
+ },
32
+ secondary: {
33
+ 50: '#f0f9ff',
34
+ 100: '#e0f2fe',
35
+ 200: '#bae6fd',
36
+ 300: '#7dd3fc',
37
+ 400: '#38bdf8',
38
+ 500: '#0ea5e9',
39
+ 600: '#0284c7',
40
+ 700: '#0369a1',
41
+ 800: '#075985',
42
+ 900: '#0c4a6e',
43
+ }
44
+ }
45
+ }
46
+ }
47
+ }
48
+ </script>
49
+ </head>
50
+ <body class="bg-black font-poppins text-white overflow-x-hidden">
51
+ <!-- Background Elements -->
52
+ <div class="fixed inset-0 -z-10">
53
+ <div class="absolute inset-0 bg-gradient-to-br from-[#0a0a0a] via-[#1a0d00] to-[#2e1300] opacity-100"></div>
54
+ <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-amber-500/5 via-transparent to-transparent"></div>
55
+ <div id="particles" class="absolute inset-0"></div>
56
+ </div>
57
+
58
+ <!-- Navigation -->
59
+ <nav class="fixed top-0 w-full z-50 bg-black/20 backdrop-blur-md border-b border-amber-500/20">
60
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
61
+ <div class="flex justify-between items-center h-16">
62
+ <div class="flex items-center">
63
+ <a href="/" class="text-2xl font-orbitron font-bold bg-gradient-to-r from-amber-400 to-yellow-300 bg-clip-text text-transparent">
64
+ MYSTICCRATE
65
+ </a>
66
+ </div>
67
+ <div class="flex items-center space-x-6">
68
+ <div class="flex items-center space-x-2 bg-amber-500/10 px-4 py-2 rounded-full border border-amber-500/30">
69
+ <i data-feather="key" class="w-5 h-5 text-amber-400"></i>
70
+ <span class="font-semibold text-amber-300">5 Keys</span>
71
+ </div>
72
+ <div class="flex items-center space-x-4">
73
+ <div class="text-sm bg-primary-500/10 px-3 py-1 rounded-full border border-primary-500/30">
74
+ <span class="text-primary-300">2,500 SC</span>
75
+ </div>
76
+ <div class="text-sm bg-secondary-500/10 px-3 py-1 rounded-full border border-secondary-500/30">
77
+ <span class="text-secondary-300">150 GC</span>
78
+ </div>
79
+ </div>
80
+ <a href="/inventory.html" class="flex items-center space-x-2 bg-purple-500/10 px-4 py-2 rounded-full border border-purple-500/30 hover:bg-purple-500/20 transition-colors">
81
+ <i data-feather="package" class="w-5 h-5 text-purple-400"></i>
82
+ <span class="font-semibold text-purple-300">Inventory</span>
83
+ </a>
84
+ </div>
85
+ </div>
86
+ </div>
87
+ </nav>
88
+
89
+ <!-- Hero Section -->
90
+ <section class="relative pt-32 pb-12 px-4 text-center">
91
+ <div class="max-w-4xl mx-auto">
92
+ <h1 class="text-6xl md:text-7xl font-orbitron font-black uppercase mb-6">
93
+ <span class="bg-gradient-to-r from-amber-500 via-yellow-400 to-amber-300 bg-clip-text text-transparent">
94
+ LEADERBOARD
95
+ </