start over with fresh build - theme glassmorphic gotham comic book parallax
Browse filesUse green colors and unique component placements and overlays or masking
Must be ultra professional for nutraceutical startup in soft regulated market so credibility is paramount especially if we're attempting a comic illustration theme
Refine this website with a focus on clean components and smooth animation on modal actions and page navigation, include data visuals on product pages to show active content based on the COA attachments
thematic style like comic book illustration mixed with glassmorphic sophistication and stable foundational industrial toughness with textures of steel and concrete, all considered an homage to New York City and the concrete jungle sophistication, juxtapose the glassmorphic modals and components and softened comic book illustration style; e.g., Gotham
https://bxtracts.com/
https://bxtracts.com/products/100mg-7oh-coffee-flavor-tablets
Lets get a beautiful demo together to see how this looks in real world
- README.md +9 -5
- components/navbar.js +208 -0
- index.html +275 -19
- script.js +337 -0
- style.css +168 -18
README.md
CHANGED
|
@@ -1,10 +1,14 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: undefined
|
| 3 |
+
colorFrom: red
|
| 4 |
+
colorTo: yellow
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://huggingface.co/deepsite).
|
| 14 |
+
|
components/navbar.js
ADDED
|
@@ -0,0 +1,208 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class CustomNavbar extends HTMLElement {
|
| 2 |
+
connectedCallback() {
|
| 3 |
+
this.attachShadow({ mode: 'open' });
|
| 4 |
+
this.shadowRoot.innerHTML = `
|
| 5 |
+
<style>
|
| 6 |
+
nav {
|
| 7 |
+
position: fixed;
|
| 8 |
+
top: 0;
|
| 9 |
+
left: 0;
|
| 10 |
+
right: 0;
|
| 11 |
+
z-index: 40;
|
| 12 |
+
background: rgba(10, 10, 10, 0.8);
|
| 13 |
+
backdrop-filter: blur(20px);
|
| 14 |
+
-webkit-backdrop-filter: blur(20px);
|
| 15 |
+
border-bottom: 1px solid rgba(34, 197, 94, 0.3);
|
| 16 |
+
padding: 1rem 0;
|
| 17 |
+
transition: all 0.3s ease;
|
| 18 |
+
}
|
| 19 |
+
|
| 20 |
+
.nav-container {
|
| 21 |
+
max-width: 1280px;
|
| 22 |
+
margin: 0 auto;
|
| 23 |
+
padding: 0 1.5rem;
|
| 24 |
+
display: flex;
|
| 25 |
+
justify-content: space-between;
|
| 26 |
+
align-items: center;
|
| 27 |
+
}
|
| 28 |
+
|
| 29 |
+
.logo {
|
| 30 |
+
font-family: 'Bebas Neue', cursive;
|
| 31 |
+
font-size: 2rem;
|
| 32 |
+
color: #22c55e;
|
| 33 |
+
text-decoration: none;
|
| 34 |
+
display: flex;
|
| 35 |
+
align-items: center;
|
| 36 |
+
gap: 0.5rem;
|
| 37 |
+
transition: all 0.3s ease;
|
| 38 |
+
}
|
| 39 |
+
|
| 40 |
+
.logo:hover {
|
| 41 |
+
color: #16a34a;
|
| 42 |
+
transform: scale(1.05);
|
| 43 |
+
}
|
| 44 |
+
|
| 45 |
+
.logo-icon {
|
| 46 |
+
width: 40px;
|
| 47 |
+
height: 40px;
|
| 48 |
+
background: linear-gradient(135deg, #22c55e, #16a34a);
|
| 49 |
+
border-radius: 8px;
|
| 50 |
+
display: flex;
|
| 51 |
+
align-items: center;
|
| 52 |
+
justify-content: center;
|
| 53 |
+
}
|
| 54 |
+
|
| 55 |
+
.nav-links {
|
| 56 |
+
display: flex;
|
| 57 |
+
gap: 2rem;
|
| 58 |
+
list-style: none;
|
| 59 |
+
margin: 0;
|
| 60 |
+
padding: 0;
|
| 61 |
+
}
|
| 62 |
+
|
| 63 |
+
.nav-link {
|
| 64 |
+
color: #ffffff;
|
| 65 |
+
text-decoration: none;
|
| 66 |
+
font-weight: 500;
|
| 67 |
+
position: relative;
|
| 68 |
+
transition: all 0.3s ease;
|
| 69 |
+
padding: 0.5rem 1rem;
|
| 70 |
+
border-radius: 4px;
|
| 71 |
+
}
|
| 72 |
+
|
| 73 |
+
.nav-link:hover {
|
| 74 |
+
color: #22c55e;
|
| 75 |
+
background: rgba(34, 197, 94, 0.1);
|
| 76 |
+
}
|
| 77 |
+
|
| 78 |
+
.nav-link::after {
|
| 79 |
+
content: '';
|
| 80 |
+
position: absolute;
|
| 81 |
+
bottom: 0;
|
| 82 |
+
left: 50%;
|
| 83 |
+
width: 0;
|
| 84 |
+
height: 2px;
|
| 85 |
+
background: #22c55e;
|
| 86 |
+
transition: all 0.3s ease;
|
| 87 |
+
transform: translateX(-50%);
|
| 88 |
+
}
|
| 89 |
+
|
| 90 |
+
.nav-link:hover::after {
|
| 91 |
+
width: 80%;
|
| 92 |
+
}
|
| 93 |
+
|
| 94 |
+
.nav-actions {
|
| 95 |
+
display: flex;
|
| 96 |
+
gap: 1rem;
|
| 97 |
+
align-items: center;
|
| 98 |
+
}
|
| 99 |
+
|
| 100 |
+
.nav-button {
|
| 101 |
+
padding: 0.5rem 1.5rem;
|
| 102 |
+
border: 2px solid #22c55e;
|
| 103 |
+
background: transparent;
|
| 104 |
+
color: #22c55e;
|
| 105 |
+
border-radius: 6px;
|
| 106 |
+
cursor: pointer;
|
| 107 |
+
font-weight: 600;
|
| 108 |
+
transition: all 0.3s ease;
|
| 109 |
+
}
|
| 110 |
+
|
| 111 |
+
.nav-button:hover {
|
| 112 |
+
background: #22c55e;
|
| 113 |
+
color: #000000;
|
| 114 |
+
transform: translateY(-2px);
|
| 115 |
+
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
|
| 116 |
+
}
|
| 117 |
+
|
| 118 |
+
.mobile-menu-toggle {
|
| 119 |
+
display: none;
|
| 120 |
+
background: transparent;
|
| 121 |
+
border: none;
|
| 122 |
+
color: #ffffff;
|
| 123 |
+
cursor: pointer;
|
| 124 |
+
padding: 0.5rem;
|
| 125 |
+
}
|
| 126 |
+
|
| 127 |
+
@media (max-width: 768px) {
|
| 128 |
+
.nav-links {
|
| 129 |
+
display: none;
|
| 130 |
+
}
|
| 131 |
+
|
| 132 |
+
.mobile-menu-toggle {
|
| 133 |
+
display: block;
|
| 134 |
+
}
|
| 135 |
+
|
| 136 |
+
.nav-actions {
|
| 137 |
+
gap: 0.5rem;
|
| 138 |
+
}
|
| 139 |
+
|
| 140 |
+
.nav-button {
|
| 141 |
+
padding: 0.5rem 1rem;
|
| 142 |
+
font-size: 0.875rem;
|
| 143 |
+
}
|
| 144 |
+
}
|
| 145 |
+
|
| 146 |
+
.scrolled {
|
| 147 |
+
background: rgba(10, 10, 10, 0.95);
|
| 148 |
+
padding: 0.5rem 0;
|
| 149 |
+
}
|
| 150 |
+
</style>
|
| 151 |
+
<nav id="navbar">
|
| 152 |
+
<div class="nav-container">
|
| 153 |
+
<a href="#" class="logo">
|
| 154 |
+
<div class="logo-icon">
|
| 155 |
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
| 156 |
+
<path d="M12 2L2 7L12 12L22 7L12 2Z"></path>
|
| 157 |
+
<path d="M2 17L12 22L22 17"></path>
|
| 158 |
+
<path d="M2 12L12 17L22 12"></path>
|
| 159 |
+
</svg>
|
| 160 |
+
</div>
|
| 161 |
+
GOTHAM NUTRA
|
| 162 |
+
</a>
|
| 163 |
+
|
| 164 |
+
<ul class="nav-links">
|
| 165 |
+
<li><a href="#home" class="nav-link">HOME</a></li>
|
| 166 |
+
<li><a href="#products" class="nav-link">PRODUCTS</a></li>
|
| 167 |
+
<li><a href="#about" class="nav-link">ABOUT</a></li>
|
| 168 |
+
<li><a href="#coa" class="nav-link">COA</a></li>
|
| 169 |
+
<li><a href="#contact" class="nav-link">CONTACT</a></li>
|
| 170 |
+
</ul>
|
| 171 |
+
|
| 172 |
+
<div class="nav-actions">
|
| 173 |
+
<button class="nav-button" onclick="window.parent.openModal('products')">
|
| 174 |
+
PRODUCTS
|
| 175 |
+
</button>
|
| 176 |
+
<button class="nav-button" onclick="window.parent.openModal('coa')">
|
| 177 |
+
VIEW COA
|
| 178 |
+
</button>
|
| 179 |
+
<button class="mobile-menu-toggle">
|
| 180 |
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
| 181 |
+
<line x1="3" y1="12" x2="21" y2="12"></line>
|
| 182 |
+
<line x1="3" y1="6" x2="21" y2="6"></line>
|
| 183 |
+
<line x1="3" y1="18" x2="21" y2="18"></line>
|
| 184 |
+
</svg>
|
| 185 |
+
</button>
|
| 186 |
+
</div>
|
| 187 |
+
</div>
|
| 188 |
+
</nav>
|
| 189 |
+
`;
|
| 190 |
+
|
| 191 |
+
// Add scroll effect
|
| 192 |
+
let lastScroll = 0;
|
| 193 |
+
window.addEventListener('scroll', () => {
|
| 194 |
+
const navbar = this.shadowRoot.getElementById('navbar');
|
| 195 |
+
const currentScroll = window.pageYOffset;
|
| 196 |
+
|
| 197 |
+
if (currentScroll > 50) {
|
| 198 |
+
navbar.classList.add('scrolled');
|
| 199 |
+
} else {
|
| 200 |
+
navbar.classList.remove('scrolled');
|
| 201 |
+
}
|
| 202 |
+
|
| 203 |
+
lastScroll = currentScroll;
|
| 204 |
+
});
|
| 205 |
+
}
|
| 206 |
+
}
|
| 207 |
+
|
| 208 |
+
customElements.define('custom-navbar', CustomNavbar);
|
index.html
CHANGED
|
@@ -1,19 +1,275 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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>Gotham Nutra Labs - Premium Nutraceutical Solutions</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| 8 |
+
<link rel="stylesheet" href="style.css">
|
| 9 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 11 |
+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
| 12 |
+
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
| 13 |
+
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
| 14 |
+
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
| 15 |
+
<script>
|
| 16 |
+
tailwind.config = {
|
| 17 |
+
darkMode: 'class',
|
| 18 |
+
theme: {
|
| 19 |
+
extend: {
|
| 20 |
+
colors: {
|
| 21 |
+
primary: {
|
| 22 |
+
50: '#f0fdf4',
|
| 23 |
+
100: '#dcfce7',
|
| 24 |
+
200: '#bbf7d0',
|
| 25 |
+
300: '#86efac',
|
| 26 |
+
400: '#4ade80',
|
| 27 |
+
500: '#22c55e',
|
| 28 |
+
600: '#16a34a',
|
| 29 |
+
700: '#15803d',
|
| 30 |
+
800: '#166534',
|
| 31 |
+
900: '#14532d',
|
| 32 |
+
},
|
| 33 |
+
gotham: {
|
| 34 |
+
concrete: '#2a2a2a',
|
| 35 |
+
steel: '#4a5568',
|
| 36 |
+
glass: 'rgba(255, 255, 255, 0.1)',
|
| 37 |
+
neon: '#00ff88',
|
| 38 |
+
}
|
| 39 |
+
},
|
| 40 |
+
fontFamily: {
|
| 41 |
+
'bebas': ['Bebas Neue', 'cursive'],
|
| 42 |
+
'roboto': ['Roboto', 'sans-serif'],
|
| 43 |
+
},
|
| 44 |
+
backdropBlur: {
|
| 45 |
+
'xl': '20px',
|
| 46 |
+
}
|
| 47 |
+
}
|
| 48 |
+
}
|
| 49 |
+
}
|
| 50 |
+
</script>
|
| 51 |
+
</head>
|
| 52 |
+
<body class="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white overflow-x-hidden">
|
| 53 |
+
|
| 54 |
+
<!-- Parallax Background Layers -->
|
| 55 |
+
<div class="fixed inset-0 z-0">
|
| 56 |
+
<div class="absolute inset-0 bg-[url('https://static.photos/cityscape/1920x1080/42')] opacity-20 parallax-layer" data-speed="0.5"></div>
|
| 57 |
+
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-gray-900/50 to-gray-900"></div>
|
| 58 |
+
<div class="absolute inset-0" id="comic-overlay"></div>
|
| 59 |
+
</div>
|
| 60 |
+
|
| 61 |
+
<!-- Navigation -->
|
| 62 |
+
<custom-navbar></custom-navbar>
|
| 63 |
+
|
| 64 |
+
<main class="relative z-10">
|
| 65 |
+
<!-- Hero Section -->
|
| 66 |
+
<section class="min-h-screen flex items-center justify-center relative">
|
| 67 |
+
<div class="container mx-auto px-6 text-center">
|
| 68 |
+
<div class="glass-morphic max-w-4xl mx-auto p-12 rounded-2xl" data-aos="fade-up">
|
| 69 |
+
<div class="comic-border">
|
| 70 |
+
<h1 class="font-bebas text-6xl lg:text-8xl mb-4 text-primary-400 tracking-wider">
|
| 71 |
+
GOTHAM
|
| 72 |
+
</h1>
|
| 73 |
+
<h2 class="font-bebas text-4xl lg:text-6xl mb-6 text-primary-500 tracking-wide">
|
| 74 |
+
NUTRA LABS
|
| 75 |
+
</h2>
|
| 76 |
+
<p class="text-xl lg:text-2xl mb-8 text-gray-300 font-roboto">
|
| 77 |
+
Precision-Engineered Nutraceutical Solutions for the Modern World
|
| 78 |
+
</p>
|
| 79 |
+
<div class="flex flex-col sm:flex-row gap-6 justify-center">
|
| 80 |
+
<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">
|
| 81 |
+
Explore Products
|
| 82 |
+
</button>
|
| 83 |
+
<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">
|
| 84 |
+
View COA Data
|
| 85 |
+
</button>
|
| 86 |
+
</div>
|
| 87 |
+
</div>
|
| 88 |
+
</div>
|
| 89 |
+
</div>
|
| 90 |
+
|
| 91 |
+
<!-- Floating Elements -->
|
| 92 |
+
<div class="absolute top-20 left-10 floating-element" data-aos="fade-right" data-aos-delay="200">
|
| 93 |
+
<div class="w-20 h-20 glass-morphic rounded-full flex items-center justify-center">
|
| 94 |
+
<i data-feather="shield" class="w-10 h-10 text-primary-400"></i>
|
| 95 |
+
</div>
|
| 96 |
+
</div>
|
| 97 |
+
<div class="absolute top-40 right-10 floating-element" data-aos="fade-left" data-aos-delay="400">
|
| 98 |
+
<div class="w-16 h-16 glass-morphic rounded-lg flex items-center justify-center">
|
| 99 |
+
<i data-feather="award" class="w-8 h-8 text-primary-400"></i>
|
| 100 |
+
</div>
|
| 101 |
+
</div>
|
| 102 |
+
</section>
|
| 103 |
+
|
| 104 |
+
<!-- Features Section -->
|
| 105 |
+
<section class="py-20 relative">
|
| 106 |
+
<div class="container mx-auto px-6">
|
| 107 |
+
<h2 class="font-bebas text-5xl lg:text-6xl text-center mb-16 text-primary-400" data-aos="fade-up">
|
| 108 |
+
OUR CAPABILITIES
|
| 109 |
+
</h2>
|
| 110 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
| 111 |
+
<div class="glass-morphic p-8 rounded-xl hover-glow" data-aos="fade-up" data-aos-delay="100">
|
| 112 |
+
<div class="w-16 h-16 bg-primary-500/20 rounded-lg flex items-center justify-center mb-6">
|
| 113 |
+
<i data-feather="zap" class="w-8 h-8 text-primary-400"></i>
|
| 114 |
+
</div>
|
| 115 |
+
<h3 class="font-bebas text-2xl mb-3 text-primary-400">RAPID FORMULATION</h3>
|
| 116 |
+
<p class="text-gray-400">Cutting-edge extraction processes delivering premium bioactive compounds with unmatched purity.</p>
|
| 117 |
+
</div>
|
| 118 |
+
<div class="glass-morphic p-8 rounded-xl hover-glow" data-aos="fade-up" data-aos-delay="200">
|
| 119 |
+
<div class="w-16 h-16 bg-primary-500/20 rounded-lg flex items-center justify-center mb-6">
|
| 120 |
+
<i data-feather="layers" class="w-8 h-8 text-primary-400"></i>
|
| 121 |
+
</div>
|
| 122 |
+
<h3 class="font-bebas text-2xl mb-3 text-primary-400">LAB GRADE QUALITY</h3>
|
| 123 |
+
<p class="text-gray-400">ISO certified facilities with comprehensive COA documentation for every batch.</p>
|
| 124 |
+
</div>
|
| 125 |
+
<div class="glass-morphic p-8 rounded-xl hover-glow" data-aos="fade-up" data-aos-delay="300">
|
| 126 |
+
<div class="w-16 h-16 bg-primary-500/20 rounded-lg flex items-center justify-center mb-6">
|
| 127 |
+
<i data-feather="trending-up" class="w-8 h-8 text-primary-400"></i>
|
| 128 |
+
</div>
|
| 129 |
+
<h3 class="font-bebas text-2xl mb-3 text-primary-400">SCALABLE SOLUTIONS</h3>
|
| 130 |
+
<p class="text-gray-400">From R&D to mass production, we scale with your business needs.</p>
|
| 131 |
+
</div>
|
| 132 |
+
</div>
|
| 133 |
+
</div>
|
| 134 |
+
</section>
|
| 135 |
+
|
| 136 |
+
<!-- Stats Section -->
|
| 137 |
+
<section class="py-20 relative">
|
| 138 |
+
<div class="container mx-auto px-6">
|
| 139 |
+
<div class="glass-morphic p-12 rounded-2xl">
|
| 140 |
+
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center">
|
| 141 |
+
<div data-aos="fade-up" data-aos-delay="100">
|
| 142 |
+
<div class="font-bebas text-5xl lg:text-6xl text-primary-400 mb-2">500+</div>
|
| 143 |
+
<div class="text-gray-400">PRODUCTS FORMULATED</div>
|
| 144 |
+
</div>
|
| 145 |
+
<div data-aos="fade-up" data-aos-delay="200">
|
| 146 |
+
<div class="font-bebas text-5xl lg:text-6xl text-primary-400 mb-2">99.8%</div>
|
| 147 |
+
<div class="text-gray-400">PURITY RATE</div>
|
| 148 |
+
</div>
|
| 149 |
+
<div data-aos="fade-up" data-aos-delay="300">
|
| 150 |
+
<div class="font-bebas text-5xl lg:text-6xl text-primary-400 mb-2">24/7</div>
|
| 151 |
+
<div class="text-gray-400">LAB OPERATIONS</div>
|
| 152 |
+
</div>
|
| 153 |
+
<div data-aos="fade-up" data-aos-delay="400">
|
| 154 |
+
<div class="font-bebas text-5xl lg:text-6xl text-primary-400 mb-2">50K+</div>
|
| 155 |
+
<div class="text-gray-400">SATISFIED CLIENTS</div>
|
| 156 |
+
</div>
|
| 157 |
+
</div>
|
| 158 |
+
</div>
|
| 159 |
+
</div>
|
| 160 |
+
</section>
|
| 161 |
+
</main>
|
| 162 |
+
|
| 163 |
+
<!-- Products Modal -->
|
| 164 |
+
<div id="products-modal" class="modal fixed inset-0 z-50 hidden">
|
| 165 |
+
<div class="modal-backdrop absolute inset-0 bg-black/80" onclick="closeModal('products')"></div>
|
| 166 |
+
<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">
|
| 167 |
+
<div class="glass-morphic p-8 rounded-2xl">
|
| 168 |
+
<div class="flex justify-between items-center mb-8">
|
| 169 |
+
<h2 class="font-bebas text-4xl text-primary-400">PRODUCT PORTFOLIO</h2>
|
| 170 |
+
<button onclick="closeModal('products')" class="text-gray-400 hover:text-white">
|
| 171 |
+
<i data-feather="x" class="w-8 h-8"></i>
|
| 172 |
+
</button>
|
| 173 |
+
</div>
|
| 174 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
| 175 |
+
<div class="product-card glass-border p-6 rounded-xl hover:scale-105 transition-transform cursor-pointer" onclick="showProductDetails('7OH-Coffee')">
|
| 176 |
+
<img src="https://static.photos/technology/320x240/123" alt="7OH Coffee Tablets" class="w-full h-48 object-cover rounded-lg mb-4">
|
| 177 |
+
<h3 class="font-bebas text-2xl text-primary-400 mb-2">7OH-Coffee Tablets</h3>
|
| 178 |
+
<p class="text-gray-400 mb-4">100mg Premium Extract</p>
|
| 179 |
+
<div class="flex justify-between items-center">
|
| 180 |
+
<span class="text-primary-400 font-bold">$29.99</span>
|
| 181 |
+
<span class="text-xs bg-primary-500/20 text-primary-400 px-2 py-1 rounded">IN STOCK</span>
|
| 182 |
+
</div>
|
| 183 |
+
</div>
|
| 184 |
+
<div class="product-card glass-border p-6 rounded-xl hover:scale-105 transition-transform cursor-pointer" onclick="showProductDetails('Focus-Blend')">
|
| 185 |
+
<img src="https://static.photos/technology/320x240/456" alt="Focus Blend" class="w-full h-48 object-cover rounded-lg mb-4">
|
| 186 |
+
<h3 class="font-bebas text-2xl text-primary-400 mb-2">Focus Blend</h3>
|
| 187 |
+
<p class="text-gray-400 mb-4">Cognitive Enhancement</p>
|
| 188 |
+
<div class="flex justify-between items-center">
|
| 189 |
+
<span class="text-primary-400 font-bold">$39.99</span>
|
| 190 |
+
<span class="text-xs bg-primary-500/20 text-primary-400 px-2 py-1 rounded">IN STOCK</span>
|
| 191 |
+
</div>
|
| 192 |
+
</div>
|
| 193 |
+
<div class="product-card glass-border p-6 rounded-xl hover:scale-105 transition-transform cursor-pointer" onclick="showProductDetails('Recovery-Plus')">
|
| 194 |
+
<img src="https://static.photos/technology/320x240/789" alt="Recovery Plus" class="w-full h-48 object-cover rounded-lg mb-4">
|
| 195 |
+
<h3 class="font-bebas text-2xl text-primary-400 mb-2">Recovery Plus</h3>
|
| 196 |
+
<p class="text-gray-400 mb-4">Athletic Performance</p>
|
| 197 |
+
<div class="flex justify-between items-center">
|
| 198 |
+
<span class="text-primary-400 font-bold">$49.99</span>
|
| 199 |
+
<span class="text-xs bg-primary-500/20 text-primary-400 px-2 py-1 rounded">IN STOCK</span>
|
| 200 |
+
</div>
|
| 201 |
+
</div>
|
| 202 |
+
</div>
|
| 203 |
+
</div>
|
| 204 |
+
</div>
|
| 205 |
+
</div>
|
| 206 |
+
|
| 207 |
+
<!-- COA Modal -->
|
| 208 |
+
<div id="coa-modal" class="modal fixed inset-0 z-50 hidden">
|
| 209 |
+
<div class="modal-backdrop absolute inset-0 bg-black/80" onclick="closeModal('coa')"></div>
|
| 210 |
+
<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">
|
| 211 |
+
<div class="glass-morphic p-8 rounded-2xl">
|
| 212 |
+
<div class="flex justify-between items-center mb-8">
|
| 213 |
+
<h2 class="font-bebas text-4xl text-primary-400">CERTIFICATE OF ANALYSIS</h2>
|
| 214 |
+
<button onclick="closeModal('coa')" class="text-gray-400 hover:text-white">
|
| 215 |
+
<i data-feather="x" class="w-8 h-8"></i>
|
| 216 |
+
</button>
|
| 217 |
+
</div>
|
| 218 |
+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
| 219 |
+
<div>
|
| 220 |
+
<canvas id="purityChart"></canvas>
|
| 221 |
+
</div>
|
| 222 |
+
<div>
|
| 223 |
+
<canvas id="compoundChart"></canvas>
|
| 224 |
+
</div>
|
| 225 |
+
</div>
|
| 226 |
+
<div class="mt-8 glass-border p-6 rounded-xl">
|
| 227 |
+
<h3 class="font-bebas text-2xl text-primary-400 mb-4">BATCH SPECIFICATIONS</h3>
|
| 228 |
+
<div class="space-y-3">
|
| 229 |
+
<div class="flex justify-between border-b border-gray-700 pb-2">
|
| 230 |
+
<span class="text-gray-400">Product ID</span>
|
| 231 |
+
<span class="text-primary-400">GNL-7OH-2024-001</span>
|
| 232 |
+
</div>
|
| 233 |
+
<div class="flex justify-between border-b border-gray-700 pb-2">
|
| 234 |
+
<span class="text-gray-400">Manufacture Date</span>
|
| 235 |
+
<span class="text-primary-400">2024-01-15</span>
|
| 236 |
+
</div>
|
| 237 |
+
<div class="flex justify-between border-b border-gray-700 pb-2">
|
| 238 |
+
<span class="text-gray-400">Expiry Date</span>
|
| 239 |
+
<span class="text-primary-400">2026-01-15</span>
|
| 240 |
+
</div>
|
| 241 |
+
<div class="flex justify-between border-b border-gray-700 pb-2">
|
| 242 |
+
<span class="text-gray-400">Purity</span>
|
| 243 |
+
<span class="text-primary-400">99.8%</span>
|
| 244 |
+
</div>
|
| 245 |
+
<div class="flex justify-between">
|
| 246 |
+
<span class="text-gray-400">Status</span>
|
| 247 |
+
<span class="text-primary-400">✓ LAB CERTIFIED</span>
|
| 248 |
+
</div>
|
| 249 |
+
</div>
|
| 250 |
+
</div>
|
| 251 |
+
</div>
|
| 252 |
+
</div>
|
| 253 |
+
</div>
|
| 254 |
+
|
| 255 |
+
<!-- Product Details Modal -->
|
| 256 |
+
<div id="product-modal" class="modal fixed inset-0 z-50 hidden">
|
| 257 |
+
<div class="modal-backdrop absolute inset-0 bg-black/80" onclick="closeModal('product')"></div>
|
| 258 |
+
<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">
|
| 259 |
+
<div class="glass-morphic p-8 rounded-2xl">
|
| 260 |
+
<div class="flex justify-between items-center mb-8">
|
| 261 |
+
<h2 id="product-title" class="font-bebas text-4xl text-primary-400"></h2>
|
| 262 |
+
<button onclick="closeModal('product')" class="text-gray-400 hover:text-white">
|
| 263 |
+
<i data-feather="x" class="w-8 h-8"></i>
|
| 264 |
+
</button>
|
| 265 |
+
</div>
|
| 266 |
+
<div id="product-content"></div>
|
| 267 |
+
</div>
|
| 268 |
+
</div>
|
| 269 |
+
</div>
|
| 270 |
+
|
| 271 |
+
<script src="script.js"></script>
|
| 272 |
+
<script src="components/navbar.js"></script>
|
| 273 |
+
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
|
| 274 |
+
</body>
|
| 275 |
+
</html>
|
script.js
ADDED
|
@@ -0,0 +1,337 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
// Initialize AOS
|
| 2 |
+
AOS.init({
|
| 3 |
+
duration: 1000,
|
| 4 |
+
once: true,
|
| 5 |
+
offset: 100
|
| 6 |
+
});
|
| 7 |
+
|
| 8 |
+
// Parallax Effect
|
| 9 |
+
window.addEventListener('scroll', () => {
|
| 10 |
+
const scrolled = window.pageYOffset;
|
| 11 |
+
const parallaxElements = document.querySelectorAll('.parallax-layer');
|
| 12 |
+
|
| 13 |
+
parallaxElements.forEach(element => {
|
| 14 |
+
const speed = element.dataset.speed || 0.5;
|
| 15 |
+
const yPos = -(scrolled * speed);
|
| 16 |
+
element.style.transform = `translateY(${yPos}px)`;
|
| 17 |
+
});
|
| 18 |
+
});
|
| 19 |
+
|
| 20 |
+
// Modal Functions
|
| 21 |
+
function openModal(modalId) {
|
| 22 |
+
const modal = document.getElementById(`${modalId}-modal`);
|
| 23 |
+
modal.classList.remove('hidden');
|
| 24 |
+
document.body.style.overflow = 'hidden';
|
| 25 |
+
|
| 26 |
+
if (modalId === 'coa') {
|
| 27 |
+
setTimeout(() => initCharts(), 100);
|
| 28 |
+
}
|
| 29 |
+
}
|
| 30 |
+
|
| 31 |
+
function closeModal(modalId) {
|
| 32 |
+
const modal = document.getElementById(`${modalId}-modal`);
|
| 33 |
+
modal.classList.add('hidden');
|
| 34 |
+
document.body.style.overflow = 'auto';
|
| 35 |
+
}
|
| 36 |
+
|
| 37 |
+
function showProductDetails(productId) {
|
| 38 |
+
const productData = {
|
| 39 |
+
'7OH-Coffee': {
|
| 40 |
+
title: '7OH-COFFEE TABLETS',
|
| 41 |
+
content: `
|
| 42 |
+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
| 43 |
+
<div>
|
| 44 |
+
<img src="https://static.photos/technology/640x360/123" alt="7OH Coffee" class="w-full rounded-lg mb-6">
|
| 45 |
+
<div class="glass-border p-6 rounded-xl">
|
| 46 |
+
<h3 class="font-bebas text-2xl text-primary-400 mb-4">SPECIFICATIONS</h3>
|
| 47 |
+
<div class="space-y-2">
|
| 48 |
+
<div class="flex justify-between">
|
| 49 |
+
<span class="text-gray-400">Active Compound</span>
|
| 50 |
+
<span class="text-primary-400">7-Hydroxymitragynine</span>
|
| 51 |
+
</div>
|
| 52 |
+
<div class="flex justify-between">
|
| 53 |
+
<span class="text-gray-400">Dosage</span>
|
| 54 |
+
<span class="text-primary-400">100mg per tablet</span>
|
| 55 |
+
</div>
|
| 56 |
+
<div class="flex justify-between">
|
| 57 |
+
<span class="text-gray-400">Tablets per Bottle</span>
|
| 58 |
+
<span class="text-primary-400">60 tablets</span>
|
| 59 |
+
</div>
|
| 60 |
+
<div class="flex justify-between">
|
| 61 |
+
<span class="text-gray-400">Flavor</span>
|
| 62 |
+
<span class="text-primary-400">Premium Coffee</span>
|
| 63 |
+
</div>
|
| 64 |
+
</div>
|
| 65 |
+
</div>
|
| 66 |
+
</div>
|
| 67 |
+
<div>
|
| 68 |
+
<h3 class="font-bebas text-2xl text-primary-400 mb-4">PRODUCT ANALYSIS</h3>
|
| 69 |
+
<canvas id="productChart" class="mb-6"></canvas>
|
| 70 |
+
<div class="glass-border p-6 rounded-xl">
|
| 71 |
+
<h4 class="font-bebas text-xl text-primary-400 mb-3">BATCH DATA</h4>
|
| 72 |
+
<div class="space-y-2">
|
| 73 |
+
<div class="flex justify-between">
|
| 74 |
+
<span class="text-gray-400">Purity</span>
|
| 75 |
+
<span class="text-primary-400">99.8%</span>
|
| 76 |
+
</div>
|
| 77 |
+
<div class="flex justify-between">
|
| 78 |
+
<span class="text-gray-400">Potency</span>
|
| 79 |
+
<span class="text-primary-400">98.5%</span>
|
| 80 |
+
</div>
|
| 81 |
+
<div class="flex justify-between">
|
| 82 |
+
<span class="text-gray-400">Dissolution Rate</span>
|
| 83 |
+
<span class="text-primary-400">95%</span>
|
| 84 |
+
</div>
|
| 85 |
+
<div class="flex justify-between">
|
| 86 |
+
<span class="text-gray-400">Stability</span>
|
| 87 |
+
<span class="text-primary-400">24 months</span>
|
| 88 |
+
</div>
|
| 89 |
+
</div>
|
| 90 |
+
</div>
|
| 91 |
+
</div>
|
| 92 |
+
</div>
|
| 93 |
+
`
|
| 94 |
+
},
|
| 95 |
+
'Focus-Blend': {
|
| 96 |
+
title: 'FOCUS BLEND',
|
| 97 |
+
content: `
|
| 98 |
+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
| 99 |
+
<div>
|
| 100 |
+
<img src="https://static.photos/technology/640x360/456" alt="Focus Blend" class="w-full rounded-lg mb-6">
|
| 101 |
+
<div class="glass-border p-6 rounded-xl">
|
| 102 |
+
<h3 class="font-bebas text-2xl text-primary-400 mb-4">SPECIFICATIONS</h3>
|
| 103 |
+
<div class="space-y-2">
|
| 104 |
+
<div class="flex justify-between">
|
| 105 |
+
<span class="text-gray-400">Active Compounds</span>
|
| 106 |
+
<span class="text-primary-400">Multi-blend</span>
|
| 107 |
+
</div>
|
| 108 |
+
<div class="flex justify-between">
|
| 109 |
+
<span class="text-gray-400">Dosage</span>
|
| 110 |
+
<span class="text-primary-400">200mg per capsule</span>
|
| 111 |
+
</div>
|
| 112 |
+
<div class="flex justify-between">
|
| 113 |
+
<span class="text-gray-400">Capsules per Bottle</span>
|
| 114 |
+
<span class="text-primary-400">90 capsules</span>
|
| 115 |
+
</div>
|
| 116 |
+
<div class="flex justify-between">
|
| 117 |
+
<span class="text-gray-400">Type</span>
|
| 118 |
+
<span class="text-primary-400">Cognitive Enhancer</span>
|
| 119 |
+
</div>
|
| 120 |
+
</div>
|
| 121 |
+
</div>
|
| 122 |
+
</div>
|
| 123 |
+
<div>
|
| 124 |
+
<h3 class="font-bebas text-2xl text-primary-400 mb-4">PRODUCT ANALYSIS</h3>
|
| 125 |
+
<canvas id="productChart" class="mb-6"></canvas>
|
| 126 |
+
<div class="glass-border p-6 rounded-xl">
|
| 127 |
+
<h4 class="font-bebas text-xl text-primary-400 mb-3">BATCH DATA</h4>
|
| 128 |
+
<div class="space-y-2">
|
| 129 |
+
<div class="flex justify-between">
|
| 130 |
+
<span class="text-gray-400">Purity</span>
|
| 131 |
+
<span class="text-primary-400">99.2%</span>
|
| 132 |
+
</div>
|
| 133 |
+
<div class="flex justify-between">
|
| 134 |
+
<span class="text-gray-400">Potency</span>
|
| 135 |
+
<span class="text-primary-400">97.8%</span>
|
| 136 |
+
</div>
|
| 137 |
+
<div class="flex justify-between">
|
| 138 |
+
<span class="text-gray-400">Bioavailability</span>
|
| 139 |
+
<span class="text-primary-400">92%</span>
|
| 140 |
+
</div>
|
| 141 |
+
<div class="flex justify-between">
|
| 142 |
+
<span class="text-gray-400">Stability</span>
|
| 143 |
+
<span class="text-primary-400">18 months</span>
|
| 144 |
+
</div>
|
| 145 |
+
</div>
|
| 146 |
+
</div>
|
| 147 |
+
</div>
|
| 148 |
+
</div>
|
| 149 |
+
`
|
| 150 |
+
},
|
| 151 |
+
'Recovery-Plus': {
|
| 152 |
+
title: 'RECOVERY PLUS',
|
| 153 |
+
content: `
|
| 154 |
+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
| 155 |
+
<div>
|
| 156 |
+
<img src="https://static.photos/technology/640x360/789" alt="Recovery Plus" class="w-full rounded-lg mb-6">
|
| 157 |
+
<div class="glass-border p-6 rounded-xl">
|
| 158 |
+
<h3 class="font-bebas text-2xl text-primary-400 mb-4">SPECIFICATIONS</h3>
|
| 159 |
+
<div class="space-y-2">
|
| 160 |
+
<div class="flex justify-between">
|
| 161 |
+
<span class="text-gray-400">Active Compounds</span>
|
| 162 |
+
<span class="text-primary-400">Recovery Matrix</span>
|
| 163 |
+
</div>
|
| 164 |
+
<div class="flex justify-between">
|
| 165 |
+
<span class="text-gray-400">Dosage</span>
|
| 166 |
+
<span class="text-primary-400">300mg per serving</span>
|
| 167 |
+
</div>
|
| 168 |
+
<div class="flex justify-between">
|
| 169 |
+
<span class="text-gray-400">Servings per Container</span>
|
| 170 |
+
<span class="text-primary-400">30 servings</span>
|
| 171 |
+
</div>
|
| 172 |
+
<div class="flex justify-between">
|
| 173 |
+
<span class="text-gray-400">Form</span>
|
| 174 |
+
<span class="text-primary-400">Powder</span>
|
| 175 |
+
</div>
|
| 176 |
+
</div>
|
| 177 |
+
</div>
|
| 178 |
+
</div>
|
| 179 |
+
<div>
|
| 180 |
+
<h3 class="font-bebas text-2xl text-primary-400 mb-4">PRODUCT ANALYSIS</h3>
|
| 181 |
+
<canvas id="productChart" class="mb-6"></canvas>
|
| 182 |
+
<div class="glass-border p-6 rounded-xl">
|
| 183 |
+
<h4 class="font-bebas text-xl text-primary-400 mb-3">BATCH DATA</h4>
|
| 184 |
+
<div class="space-y-2">
|
| 185 |
+
<div class="flex justify-between">
|
| 186 |
+
<span class="text-gray-400">Purity</span>
|
| 187 |
+
<span class="text-primary-400">98.9%</span>
|
| 188 |
+
</div>
|
| 189 |
+
<div class="flex justify-between">
|
| 190 |
+
<span class="text-gray-400">Potency</span>
|
| 191 |
+
<span class="text-primary-400">96.5%</span>
|
| 192 |
+
</div>
|
| 193 |
+
<div class="flex justify-between">
|
| 194 |
+
<span class="text-gray-400">Absorption Rate</span>
|
| 195 |
+
<span class="text-primary-400">88%</span>
|
| 196 |
+
</div>
|
| 197 |
+
<div class="flex justify-between">
|
| 198 |
+
<span class="text-gray-400">Stability</span>
|
| 199 |
+
<span class="text-primary-400">24 months</span>
|
| 200 |
+
</div>
|
| 201 |
+
</div>
|
| 202 |
+
</div>
|
| 203 |
+
</div>
|
| 204 |
+
</div>
|
| 205 |
+
`
|
| 206 |
+
}
|
| 207 |
+
};
|
| 208 |
+
|
| 209 |
+
const product = productData[productId];
|
| 210 |
+
document.getElementById('product-title').textContent = product.title;
|
| 211 |
+
document.getElementById('product-content').innerHTML = product.content;
|
| 212 |
+
|
| 213 |
+
openModal('product');
|
| 214 |
+
setTimeout(() => initProductChart(), 100);
|
| 215 |
+
}
|
| 216 |
+
|
| 217 |
+
// Chart Functions
|
| 218 |
+
function initCharts() {
|
| 219 |
+
// Purity Chart
|
| 220 |
+
const purityCtx = document.getElementById('purityChart').getContext('2d');
|
| 221 |
+
new Chart(purityCtx, {
|
| 222 |
+
type: 'doughnut',
|
| 223 |
+
data: {
|
| 224 |
+
labels: ['Pure Compound', 'Other'],
|
| 225 |
+
datasets: [{
|
| 226 |
+
data: [99.8, 0.2],
|
| 227 |
+
backgroundColor: ['#22c55e', '#4a5568'],
|
| 228 |
+
borderWidth: 0
|
| 229 |
+
}]
|
| 230 |
+
},
|
| 231 |
+
options: {
|
| 232 |
+
responsive: true,
|
| 233 |
+
plugins: {
|
| 234 |
+
legend: {
|
| 235 |
+
labels: { color: '#ffffff' }
|
| 236 |
+
},
|
| 237 |
+
title: {
|
| 238 |
+
display: true,
|
| 239 |
+
text: 'PURITY ANALYSIS',
|
| 240 |
+
color: '#22c55e',
|
| 241 |
+
font: { size: 16, family: 'Bebas Neue' }
|
| 242 |
+
}
|
| 243 |
+
}
|
| 244 |
+
}
|
| 245 |
+
});
|
| 246 |
+
|
| 247 |
+
// Compound Chart
|
| 248 |
+
const compoundCtx = document.getElementById('compoundChart').getContext('2d');
|
| 249 |
+
new Chart(compoundCtx, {
|
| 250 |
+
type: 'bar',
|
| 251 |
+
data: {
|
| 252 |
+
labels: ['7OH', 'MG', 'Alkaloids', 'Flavonoids'],
|
| 253 |
+
datasets: [{
|
| 254 |
+
label: 'Concentration (%)',
|
| 255 |
+
data: [45, 25, 20, 10],
|
| 256 |
+
backgroundColor: '#22c55e',
|
| 257 |
+
borderWidth: 0
|
| 258 |
+
}]
|
| 259 |
+
},
|
| 260 |
+
options: {
|
| 261 |
+
responsive: true,
|
| 262 |
+
plugins: {
|
| 263 |
+
legend: {
|
| 264 |
+
labels: { color: '#ffffff' }
|
| 265 |
+
},
|
| 266 |
+
title: {
|
| 267 |
+
display: true,
|
| 268 |
+
text: 'COMPOUND BREAKDOWN',
|
| 269 |
+
color: '#22c55e',
|
| 270 |
+
font: { size: 16, family: 'Bebas Neue' }
|
| 271 |
+
}
|
| 272 |
+
},
|
| 273 |
+
scales: {
|
| 274 |
+
y: {
|
| 275 |
+
ticks: { color: '#ffffff' },
|
| 276 |
+
grid: { color: 'rgba(255, 255, 255, 0.1)' }
|
| 277 |
+
},
|
| 278 |
+
x: {
|
| 279 |
+
ticks: { color: '#ffffff' },
|
| 280 |
+
grid: { color: 'rgba(255, 255, 255, 0.1)' }
|
| 281 |
+
}
|
| 282 |
+
}
|
| 283 |
+
}
|
| 284 |
+
});
|
| 285 |
+
}
|
| 286 |
+
|
| 287 |
+
function initProductChart() {
|
| 288 |
+
const productCtx = document.getElementById('productChart');
|
| 289 |
+
if (!productCtx) return;
|
| 290 |
+
|
| 291 |
+
new Chart(productCtx.getContext('2d'), {
|
| 292 |
+
type: 'radar',
|
| 293 |
+
data: {
|
| 294 |
+
labels: ['Purity', 'Potency', 'Bioavailability', 'Stability', 'Efficacy'],
|
| 295 |
+
datasets: [{
|
| 296 |
+
label: 'Product Metrics',
|
| 297 |
+
data: [99, 98, 95, 97, 96],
|
| 298 |
+
backgroundColor: 'rgba(34, 197, 94, 0.2)',
|
| 299 |
+
borderColor: '#22c55e',
|
| 300 |
+
borderWidth: 2
|
| 301 |
+
}]
|
| 302 |
+
},
|
| 303 |
+
options: {
|
| 304 |
+
responsive: true,
|
| 305 |
+
plugins: {
|
| 306 |
+
legend: {
|
| 307 |
+
labels: { color: '#ffffff' }
|
| 308 |
+
}
|
| 309 |
+
},
|
| 310 |
+
scales: {
|
| 311 |
+
r: {
|
| 312 |
+
angleLines: { color: 'rgba(255, 255, 255, 0.1)' },
|
| 313 |
+
grid: { color: 'rgba(255, 255, 255, 0.1)' },
|
| 314 |
+
pointLabels: { color: '#ffffff' },
|
| 315 |
+
ticks: {
|
| 316 |
+
color: '#ffffff',
|
| 317 |
+
backdropColor: 'transparent'
|
| 318 |
+
}
|
| 319 |
+
}
|
| 320 |
+
}
|
| 321 |
+
}
|
| 322 |
+
});
|
| 323 |
+
}
|
| 324 |
+
|
| 325 |
+
// Initialize Feather Icons
|
| 326 |
+
feather.replace();
|
| 327 |
+
|
| 328 |
+
// Smooth scroll for anchor links
|
| 329 |
+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
| 330 |
+
anchor.addEventListener('click', function (e) {
|
| 331 |
+
e.preventDefault();
|
| 332 |
+
const target = document.querySelector(this.getAttribute('href'));
|
| 333 |
+
if (target) {
|
| 334 |
+
target.scrollIntoView({ behavior: 'smooth' });
|
| 335 |
+
}
|
| 336 |
+
});
|
| 337 |
+
});
|
style.css
CHANGED
|
@@ -1,28 +1,178 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
body {
|
| 2 |
-
|
| 3 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 4 |
}
|
| 5 |
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 9 |
}
|
| 10 |
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
margin-top: 5px;
|
| 16 |
}
|
| 17 |
|
| 18 |
-
.card {
|
| 19 |
-
|
| 20 |
-
|
| 21 |
-
padding: 16px;
|
| 22 |
-
border: 1px solid lightgray;
|
| 23 |
-
border-radius: 16px;
|
| 24 |
}
|
| 25 |
|
| 26 |
-
|
| 27 |
-
|
|
|
|
| 28 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:wght@300;400;500;700;900&display=swap');
|
| 2 |
+
|
| 3 |
+
* {
|
| 4 |
+
margin: 0;
|
| 5 |
+
padding: 0;
|
| 6 |
+
box-sizing: border-box;
|
| 7 |
+
}
|
| 8 |
+
|
| 9 |
body {
|
| 10 |
+
font-family: 'Roboto', sans-serif;
|
| 11 |
+
background: #0a0a0a;
|
| 12 |
+
color: #ffffff;
|
| 13 |
+
overflow-x: hidden;
|
| 14 |
+
}
|
| 15 |
+
|
| 16 |
+
/* Glassmorphic Effects */
|
| 17 |
+
.glass-morphic {
|
| 18 |
+
background: rgba(255, 255, 255, 0.05);
|
| 19 |
+
backdrop-filter: blur(20px);
|
| 20 |
+
-webkit-backdrop-filter: blur(20px);
|
| 21 |
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
| 22 |
+
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
| 23 |
+
}
|
| 24 |
+
|
| 25 |
+
.glass-border {
|
| 26 |
+
border: 2px solid rgba(34, 197, 94, 0.3);
|
| 27 |
+
background: rgba(255, 255, 255, 0.02);
|
| 28 |
+
backdrop-filter: blur(10px);
|
| 29 |
+
}
|
| 30 |
+
|
| 31 |
+
/* Comic Book Style */
|
| 32 |
+
.comic-border {
|
| 33 |
+
position: relative;
|
| 34 |
+
border: 3px solid #22c55e;
|
| 35 |
+
border-radius: 8px;
|
| 36 |
+
padding: 2rem;
|
| 37 |
+
background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
|
| 38 |
+
}
|
| 39 |
+
|
| 40 |
+
.comic-border::before {
|
| 41 |
+
content: '';
|
| 42 |
+
position: absolute;
|
| 43 |
+
top: -3px;
|
| 44 |
+
left: -3px;
|
| 45 |
+
right: -3px;
|
| 46 |
+
bottom: -3px;
|
| 47 |
+
background: linear-gradient(45deg, #22c55e, #16a34a, #22c55e);
|
| 48 |
+
border-radius: 8px;
|
| 49 |
+
z-index: -1;
|
| 50 |
+
animation: comicGlow 3s ease-in-out infinite;
|
| 51 |
+
}
|
| 52 |
+
|
| 53 |
+
@keyframes comicGlow {
|
| 54 |
+
0%, 100% { opacity: 0.5; }
|
| 55 |
+
50% { opacity: 1; }
|
| 56 |
+
}
|
| 57 |
+
|
| 58 |
+
/* Parallax Effects */
|
| 59 |
+
.parallax-layer {
|
| 60 |
+
will-change: transform;
|
| 61 |
+
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
| 62 |
+
}
|
| 63 |
+
|
| 64 |
+
/* Comic Overlay Pattern */
|
| 65 |
+
#comic-overlay {
|
| 66 |
+
background-image:
|
| 67 |
+
repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(34, 197, 94, 0.03) 35px, rgba(34, 197, 94, 0.03) 70px),
|
| 68 |
+
repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(34, 197, 94, 0.02) 35px, rgba(34, 197, 94, 0.02) 70px);
|
| 69 |
+
pointer-events: none;
|
| 70 |
+
}
|
| 71 |
+
|
| 72 |
+
/* Floating Elements */
|
| 73 |
+
.floating-element {
|
| 74 |
+
animation: float 6s ease-in-out infinite;
|
| 75 |
+
}
|
| 76 |
+
|
| 77 |
+
@keyframes float {
|
| 78 |
+
0%, 100% { transform: translateY(0px); }
|
| 79 |
+
50% { transform: translateY(-20px); }
|
| 80 |
+
}
|
| 81 |
+
|
| 82 |
+
/* Hover Glow Effects */
|
| 83 |
+
.hover-glow {
|
| 84 |
+
transition: all 0.3s ease;
|
| 85 |
+
position: relative;
|
| 86 |
+
}
|
| 87 |
+
|
| 88 |
+
.hover-glow:hover {
|
| 89 |
+
transform: translateY(-5px);
|
| 90 |
+
box-shadow: 0 10px 40px rgba(34, 197, 94, 0.3);
|
| 91 |
+
border-color: rgba(34, 197, 94, 0.5);
|
| 92 |
+
}
|
| 93 |
+
|
| 94 |
+
/* Modal Styles */
|
| 95 |
+
.modal {
|
| 96 |
+
animation: fadeIn 0.3s ease;
|
| 97 |
+
}
|
| 98 |
+
|
| 99 |
+
.modal-backdrop {
|
| 100 |
+
animation: fadeIn 0.3s ease;
|
| 101 |
+
}
|
| 102 |
+
|
| 103 |
+
.modal-content {
|
| 104 |
+
animation: slideUp 0.3s ease;
|
| 105 |
+
}
|
| 106 |
+
|
| 107 |
+
@keyframes fadeIn {
|
| 108 |
+
from { opacity: 0; }
|
| 109 |
+
to { opacity: 1; }
|
| 110 |
}
|
| 111 |
|
| 112 |
+
@keyframes slideUp {
|
| 113 |
+
from {
|
| 114 |
+
opacity: 0;
|
| 115 |
+
transform: translate(-50%, -40%);
|
| 116 |
+
}
|
| 117 |
+
to {
|
| 118 |
+
opacity: 1;
|
| 119 |
+
transform: translate(-50%, -50%);
|
| 120 |
+
}
|
| 121 |
}
|
| 122 |
|
| 123 |
+
/* Product Cards */
|
| 124 |
+
.product-card {
|
| 125 |
+
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
| 126 |
+
cursor: pointer;
|
|
|
|
| 127 |
}
|
| 128 |
|
| 129 |
+
.product-card:hover {
|
| 130 |
+
transform: scale(1.05) rotateY(5deg);
|
| 131 |
+
box-shadow: 0 20px 60px rgba(34, 197, 94, 0.4);
|
|
|
|
|
|
|
|
|
|
| 132 |
}
|
| 133 |
|
| 134 |
+
/* Scrollbar Styling */
|
| 135 |
+
::-webkit-scrollbar {
|
| 136 |
+
width: 8px;
|
| 137 |
}
|
| 138 |
+
|
| 139 |
+
::-webkit-scrollbar-track {
|
| 140 |
+
background: rgba(255, 255, 255, 0.1);
|
| 141 |
+
}
|
| 142 |
+
|
| 143 |
+
::-webkit-scrollbar-thumb {
|
| 144 |
+
background: #22c55e;
|
| 145 |
+
border-radius: 4px;
|
| 146 |
+
}
|
| 147 |
+
|
| 148 |
+
::-webkit-scrollbar-thumb:hover {
|
| 149 |
+
background: #16a34a;
|
| 150 |
+
}
|
| 151 |
+
|
| 152 |
+
/* Animations */
|
| 153 |
+
.animate-fade-in {
|
| 154 |
+
animation: fadeInUp 0.8s ease;
|
| 155 |
+
}
|
| 156 |
+
|
| 157 |
+
@keyframes fadeInUp {
|
| 158 |
+
from {
|
| 159 |
+
opacity: 0;
|
| 160 |
+
transform: translateY(30px);
|
| 161 |
+
}
|
| 162 |
+
to {
|
| 163 |
+
opacity: 1;
|
| 164 |
+
transform: translateY(0);
|
| 165 |
+
}
|
| 166 |
+
}
|
| 167 |
+
|
| 168 |
+
/* Responsive */
|
| 169 |
+
@media (max-width: 768px) {
|
| 170 |
+
.modal-content {
|
| 171 |
+
width: 95%;
|
| 172 |
+
max-height: 95vh;
|
| 173 |
+
}
|
| 174 |
+
|
| 175 |
+
.comic-border {
|
| 176 |
+
padding: 1rem;
|
| 177 |
+
}
|
| 178 |
+
}
|