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