File size: 16,167 Bytes
23cd7b9 | 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 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gotham Nutra Labs - Premium Nutraceutical Solutions</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: {
50: '#f0fdf4',
100: '#dcfce7',
200: '#bbf7d0',
300: '#86efac',
400: '#4ade80',
500: '#22c55e',
600: '#16a34a',
700: '#15803d',
800: '#166534',
900: '#14532d',
},
gotham: {
concrete: '#2a2a2a',
steel: '#4a5568',
glass: 'rgba(255, 255, 255, 0.1)',
neon: '#00ff88',
}
},
fontFamily: {
'bebas': ['Bebas Neue', 'cursive'],
'roboto': ['Roboto', 'sans-serif'],
},
backdropBlur: {
'xl': '20px',
}
}
}
}
</script>
</head>
<body class="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white overflow-x-hidden">
<!-- Parallax Background Layers -->
<div class="fixed inset-0 z-0">
<div class="absolute inset-0 bg-[url('https://static.photos/cityscape/1920x1080/42')] opacity-20 parallax-layer" data-speed="0.5"></div>
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-gray-900/50 to-gray-900"></div>
<div class="absolute inset-0" id="comic-overlay"></div>
</div>
<!-- Navigation -->
<custom-navbar></custom-navbar>
<main class="relative z-10">
<!-- Hero Section -->
<section class="min-h-screen flex items-center justify-center relative">
<div class="container mx-auto px-6 text-center">
<div class="glass-morphic max-w-4xl mx-auto p-12 rounded-2xl" data-aos="fade-up">
<div class="comic-border">
<h1 class="font-bebas text-6xl lg:text-8xl mb-4 text-primary-400 tracking-wider">
GOTHAM
</h1>
<h2 class="font-bebas text-4xl lg:text-6xl mb-6 text-primary-500 tracking-wide">
NUTRA LABS
</h2>
<p class="text-xl lg:text-2xl mb-8 text-gray-300 font-roboto">
Precision-Engineered Nutraceutical Solutions for the Modern World
</p>
<div class="flex flex-col sm:flex-row gap-6 justify-center">
<button onclick="openModal('products')" class="px-8 py-4 bg-primary-500 text-gray-900 rounded-lg font-bold hover:bg-primary-400 transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-primary-500/50">
Explore Products
</button>
<button onclick="openModal('coa')" class="px-8 py-4 glass-border text-primary-400 rounded-lg font-bold hover:bg-gotham-glass transform hover:scale-105 transition-all duration-300">
View COA Data
</button>
</div>
</div>
</div>
</div>
<!-- Floating Elements -->
<div class="absolute top-20 left-10 floating-element" data-aos="fade-right" data-aos-delay="200">
<div class="w-20 h-20 glass-morphic rounded-full flex items-center justify-center">
<i data-feather="shield" class="w-10 h-10 text-primary-400"></i>
</div>
</div>
<div class="absolute top-40 right-10 floating-element" data-aos="fade-left" data-aos-delay="400">
<div class="w-16 h-16 glass-morphic rounded-lg flex items-center justify-center">
<i data-feather="award" class="w-8 h-8 text-primary-400"></i>
</div>
</div>
</section>
<!-- Features Section -->
<section class="py-20 relative">
<div class="container mx-auto px-6">
<h2 class="font-bebas text-5xl lg:text-6xl text-center mb-16 text-primary-400" data-aos="fade-up">
OUR CAPABILITIES
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="glass-morphic p-8 rounded-xl hover-glow" data-aos="fade-up" data-aos-delay="100">
<div class="w-16 h-16 bg-primary-500/20 rounded-lg flex items-center justify-center mb-6">
<i data-feather="zap" class="w-8 h-8 text-primary-400"></i>
</div>
<h3 class="font-bebas text-2xl mb-3 text-primary-400">RAPID FORMULATION</h3>
<p class="text-gray-400">Cutting-edge extraction processes delivering premium bioactive compounds with unmatched purity.</p>
</div>
<div class="glass-morphic p-8 rounded-xl hover-glow" data-aos="fade-up" data-aos-delay="200">
<div class="w-16 h-16 bg-primary-500/20 rounded-lg flex items-center justify-center mb-6">
<i data-feather="layers" class="w-8 h-8 text-primary-400"></i>
</div>
<h3 class="font-bebas text-2xl mb-3 text-primary-400">LAB GRADE QUALITY</h3>
<p class="text-gray-400">ISO certified facilities with comprehensive COA documentation for every batch.</p>
</div>
<div class="glass-morphic p-8 rounded-xl hover-glow" data-aos="fade-up" data-aos-delay="300">
<div class="w-16 h-16 bg-primary-500/20 rounded-lg flex items-center justify-center mb-6">
<i data-feather="trending-up" class="w-8 h-8 text-primary-400"></i>
</div>
<h3 class="font-bebas text-2xl mb-3 text-primary-400">SCALABLE SOLUTIONS</h3>
<p class="text-gray-400">From R&D to mass production, we scale with your business needs.</p>
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="py-20 relative">
<div class="container mx-auto px-6">
<div class="glass-morphic p-12 rounded-2xl">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center">
<div data-aos="fade-up" data-aos-delay="100">
<div class="font-bebas text-5xl lg:text-6xl text-primary-400 mb-2">500+</div>
<div class="text-gray-400">PRODUCTS FORMULATED</div>
</div>
<div data-aos="fade-up" data-aos-delay="200">
<div class="font-bebas text-5xl lg:text-6xl text-primary-400 mb-2">99.8%</div>
<div class="text-gray-400">PURITY RATE</div>
</div>
<div data-aos="fade-up" data-aos-delay="300">
<div class="font-bebas text-5xl lg:text-6xl text-primary-400 mb-2">24/7</div>
<div class="text-gray-400">LAB OPERATIONS</div>
</div>
<div data-aos="fade-up" data-aos-delay="400">
<div class="font-bebas text-5xl lg:text-6xl text-primary-400 mb-2">50K+</div>
<div class="text-gray-400">SATISFIED CLIENTS</div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Products Modal -->
<div id="products-modal" class="modal fixed inset-0 z-50 hidden">
<div class="modal-backdrop absolute inset-0 bg-black/80" onclick="closeModal('products')"></div>
<div class="modal-content absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-6xl max-h-[90vh] overflow-y-auto">
<div class="glass-morphic p-8 rounded-2xl">
<div class="flex justify-between items-center mb-8">
<h2 class="font-bebas text-4xl text-primary-400">PRODUCT PORTFOLIO</h2>
<button onclick="closeModal('products')" class="text-gray-400 hover:text-white">
<i data-feather="x" class="w-8 h-8"></i>
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="product-card glass-border p-6 rounded-xl hover:scale-105 transition-transform cursor-pointer" onclick="showProductDetails('7OH-Coffee')">
<img src="https://static.photos/technology/320x240/123" alt="7OH Coffee Tablets" class="w-full h-48 object-cover rounded-lg mb-4">
<h3 class="font-bebas text-2xl text-primary-400 mb-2">7OH-Coffee Tablets</h3>
<p class="text-gray-400 mb-4">100mg Premium Extract</p>
<div class="flex justify-between items-center">
<span class="text-primary-400 font-bold">$29.99</span>
<span class="text-xs bg-primary-500/20 text-primary-400 px-2 py-1 rounded">IN STOCK</span>
</div>
</div>
<div class="product-card glass-border p-6 rounded-xl hover:scale-105 transition-transform cursor-pointer" onclick="showProductDetails('Focus-Blend')">
<img src="https://static.photos/technology/320x240/456" alt="Focus Blend" class="w-full h-48 object-cover rounded-lg mb-4">
<h3 class="font-bebas text-2xl text-primary-400 mb-2">Focus Blend</h3>
<p class="text-gray-400 mb-4">Cognitive Enhancement</p>
<div class="flex justify-between items-center">
<span class="text-primary-400 font-bold">$39.99</span>
<span class="text-xs bg-primary-500/20 text-primary-400 px-2 py-1 rounded">IN STOCK</span>
</div>
</div>
<div class="product-card glass-border p-6 rounded-xl hover:scale-105 transition-transform cursor-pointer" onclick="showProductDetails('Recovery-Plus')">
<img src="https://static.photos/technology/320x240/789" alt="Recovery Plus" class="w-full h-48 object-cover rounded-lg mb-4">
<h3 class="font-bebas text-2xl text-primary-400 mb-2">Recovery Plus</h3>
<p class="text-gray-400 mb-4">Athletic Performance</p>
<div class="flex justify-between items-center">
<span class="text-primary-400 font-bold">$49.99</span>
<span class="text-xs bg-primary-500/20 text-primary-400 px-2 py-1 rounded">IN STOCK</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- COA Modal -->
<div id="coa-modal" class="modal fixed inset-0 z-50 hidden">
<div class="modal-backdrop absolute inset-0 bg-black/80" onclick="closeModal('coa')"></div>
<div class="modal-content absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-5xl max-h-[90vh] overflow-y-auto">
<div class="glass-morphic p-8 rounded-2xl">
<div class="flex justify-between items-center mb-8">
<h2 class="font-bebas text-4xl text-primary-400">CERTIFICATE OF ANALYSIS</h2>
<button onclick="closeModal('coa')" class="text-gray-400 hover:text-white">
<i data-feather="x" class="w-8 h-8"></i>
</button>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div>
<canvas id="purityChart"></canvas>
</div>
<div>
<canvas id="compoundChart"></canvas>
</div>
</div>
<div class="mt-8 glass-border p-6 rounded-xl">
<h3 class="font-bebas text-2xl text-primary-400 mb-4">BATCH SPECIFICATIONS</h3>
<div class="space-y-3">
<div class="flex justify-between border-b border-gray-700 pb-2">
<span class="text-gray-400">Product ID</span>
<span class="text-primary-400">GNL-7OH-2024-001</span>
</div>
<div class="flex justify-between border-b border-gray-700 pb-2">
<span class="text-gray-400">Manufacture Date</span>
<span class="text-primary-400">2024-01-15</span>
</div>
<div class="flex justify-between border-b border-gray-700 pb-2">
<span class="text-gray-400">Expiry Date</span>
<span class="text-primary-400">2026-01-15</span>
</div>
<div class="flex justify-between border-b border-gray-700 pb-2">
<span class="text-gray-400">Purity</span>
<span class="text-primary-400">99.8%</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">Status</span>
<span class="text-primary-400">✓ LAB CERTIFIED</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Product Details Modal -->
<div id="product-modal" class="modal fixed inset-0 z-50 hidden">
<div class="modal-backdrop absolute inset-0 bg-black/80" onclick="closeModal('product')"></div>
<div class="modal-content absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-4xl max-h-[90vh] overflow-y-auto">
<div class="glass-morphic p-8 rounded-2xl">
<div class="flex justify-between items-center mb-8">
<h2 id="product-title" class="font-bebas text-4xl text-primary-400"></h2>
<button onclick="closeModal('product')" class="text-gray-400 hover:text-white">
<i data-feather="x" class="w-8 h-8"></i>
</button>
</div>
<div id="product-content"></div>
</div>
</div>
</div>
<script src="script.js"></script>
<script src="components/navbar.js"></script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |