Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>JERSEY LAB | Custom & Performance Athletic Wear</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg-dark: #090d16; | |
| --card-bg: #111827; | |
| --accent-red: #e11d48; | |
| --accent-blue: #2563eb; | |
| --text: #f8fafc; | |
| --text-muted: #94a3b8; | |
| --border: rgba(255, 255, 255, 0.1); | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', sans-serif; } | |
| h1, h2, h3, .logo, .nav-cat { font-family: 'Montserrat', sans-serif; text-transform: uppercase; } | |
| body { background-color: var(--bg-dark); color: var(--text); line-height: 1.5; } | |
| /* Top Announcement Bar */ | |
| .announcement { background: var(--accent-red); color: white; text-align: center; font-size: 0.8rem; font-weight: 700; padding: 0.4rem; letter-spacing: 1px; } | |
| /* Header & Navigation */ | |
| header { background: rgba(9, 13, 22, 0.95); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--border); } | |
| .header-top { padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; } | |
| .logo { font-size: 1.8rem; font-weight: 900; letter-spacing: 1.5px; color: #fff; } | |
| .logo span { color: var(--accent-red); } | |
| .nav-categories { display: flex; justify-content: center; gap: 2rem; padding: 0.75rem; background: #0f172a; border-top: 1px solid var(--border); overflow-x: auto; } | |
| .nav-cat { color: var(--text-muted); text-decoration: none; font-size: 0.85rem; font-weight: 700; transition: color 0.3s; white-space: nowrap; } | |
| .nav-cat:hover, .nav-cat.active { color: var(--accent-red); } | |
| .user-badge { background: rgba(255,255,255,0.08); padding: 0.4rem 1rem; border-radius: 4px; font-size: 0.85rem; border: 1px solid var(--border); cursor: pointer; font-weight: 600; } | |
| /* Hero Banner */ | |
| .hero { text-align: center; padding: 5rem 1rem; background: linear-gradient(180deg, rgba(225, 29, 72, 0.15) 0%, rgba(9, 13, 22, 1) 100%); } | |
| .hero h1 { font-size: 3.2rem; font-weight: 900; margin-bottom: 1rem; letter-spacing: -1px; } | |
| .hero p { color: var(--text-muted); max-width: 650px; margin: 0 auto 2rem; font-size: 1.1rem; } | |
| .hero-btns { display: flex; justify-content: center; gap: 1rem; } | |
| .btn { display: inline-block; background: var(--accent-red); color: white; border: none; padding: 0.9rem 1.8rem; font-weight: 700; text-transform: uppercase; border-radius: 4px; cursor: pointer; transition: 0.2s; text-decoration: none; text-align: center; } | |
| .btn:hover { opacity: 0.9; transform: translateY(-2px); } | |
| .btn-secondary { background: transparent; border: 2px solid var(--border); color: #fff; } | |
| /* Login Modal */ | |
| .modal-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); display: flex; justify-content: center; align-items: center; z-index: 1000; } | |
| .modal-card { background: #111827; border: 1px solid var(--border); border-radius: 8px; width: 90%; max-width: 400px; padding: 2.5rem; text-align: center; } | |
| .form-group { margin-bottom: 1.2rem; text-align: left; } | |
| label { display: block; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.4rem; } | |
| input, select, textarea { width: 100%; background: #0b0f19; border: 1px solid var(--border); color: #fff; padding: 0.8rem; border-radius: 4px; font-size: 0.95rem; outline: none; } | |
| input:focus, select:focus, textarea:focus { border-color: var(--accent-red); } | |
| /* Studio Layout */ | |
| .container { max-width: 1200px; margin: 0 auto; padding: 3rem 1.5rem; } | |
| .section-title { font-size: 2rem; font-weight: 800; margin-bottom: 2rem; text-align: center; } | |
| .studio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; background: var(--card-bg); border: 1px solid var(--border); padding: 2.5rem; border-radius: 8px; } | |
| @media(max-width: 768px) { .studio-grid { grid-template-columns: 1fr; } } | |
| .preview-box { background: #0b0f19; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 380px; border: 1px dashed var(--border); } | |
| .jersey-canvas { width: 220px; height: 270px; background: var(--accent-blue); border-radius: 20px 20px 8px 8px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 15px 35px rgba(0,0,0,0.6); transition: background 0.3s; } | |
| .jersey-canvas::before { content: ''; position: absolute; top: 0; width: 65px; height: 25px; background: #0b0f19; border-radius: 0 0 30px 30px; } | |
| .custom-logo-preview { max-width: 85px; max-height: 85px; margin-top: 20px; object-fit: contain; display: none; } | |
| /* Product Cards */ | |
| .catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; } | |
| .product-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; position: relative; } | |
| .badge { position: absolute; top: 12px; left: 12px; background: var(--accent-red); color: white; padding: 4px 8px; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; } | |
| .product-card img { width: 100%; height: 280px; object-fit: cover; } | |
| .product-details { padding: 1.5rem; text-align: left; } | |
| .product-details h3 { font-size: 1.1rem; margin-bottom: 0.5rem; } | |
| .price { color: var(--accent-red); font-weight: 800; font-size: 1.2rem; margin-bottom: 1rem; } | |
| .size-selector { display: flex; gap: 0.5rem; margin-bottom: 1rem; } | |
| .size-btn { border: 1px solid var(--border); background: transparent; color: var(--text); padding: 4px 8px; font-size: 0.8rem; font-weight: 600; cursor: pointer; border-radius: 2px; } | |
| .size-btn:hover { border-color: var(--accent-red); color: var(--accent-red); } | |
| footer { text-align: center; padding: 3rem 1rem; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.85rem; margin-top: 4rem; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="announcement">FREE SHIPPING ON ALL CUSTOM TEAM ORDERS</div> | |
| <!-- Mandatory Mobile Login Modal --> | |
| <div class="modal-overlay" id="loginModal"> | |
| <div class="modal-card"> | |
| <h2 style="margin-bottom: 0.5rem;">JERSEY LAB</h2> | |
| <p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.5rem;">Enter your mobile number to access custom designing & track orders.</p> | |
| <form onsubmit="handleLogin(event)"> | |
| <div class="form-group"> | |
| <label>Mobile Number *</label> | |
| <input type="tel" id="userMobile" placeholder="+1 (555) 000-0000" required> | |
| </div> | |
| <div class="form-group"> | |
| <label>Email Address (Optional)</label> | |
| <input type="email" id="userEmail" placeholder="name@example.com"> | |
| </div> | |
| <button type="submit" class="btn" style="width: 100%;">Enter Studio</button> | |
| </form> | |
| </div> | |
| </div> | |
| <header> | |
| <div class="header-top"> | |
| <div class="logo">JERSEY <span>LAB</span></div> | |
| <div class="user-badge" id="userBadge" onclick="showLoginModal()">Login</div> | |
| </div> | |
| <nav class="nav-categories"> | |
| <a href="#catalog" class="nav-cat active">Basketball Fits</a> | |
| <a href="#catalog" class="nav-cat">Football Fits</a> | |
| <a href="#catalog" class="nav-cat">Volleyball Fits</a> | |
| <a href="#catalog" class="nav-cat">Badminton Fits</a> | |
| <a href="#studio" class="nav-cat">Custom Design Studio</a> | |
| </nav> | |
| </header> | |
| <section class="hero"> | |
| <h1>ELEVATE YOUR GAME</h1> | |
| <p>Premium athletic sportswear engineered for teams and individual athletes. Custom-built or ready-to-ship designs.</p> | |
| <div class="hero-btns"> | |
| <a href="#studio" class="btn">Customize Your Jersey</a> | |
| <a href="#catalog" class="btn btn-secondary">Shop Collection</a> | |
| </div> | |
| </section> | |
| <div class="container"> | |
| <!-- Custom Studio Section --> | |
| <h2 id="studio" class="section-title">CUSTOM DESIGN STUDIO</h2> | |
| <div class="studio-grid"> | |
| <div class="preview-box"> | |
| <div class="jersey-canvas" id="jerseyCanvas"> | |
| <img id="logoPreview" class="custom-logo-preview" alt="Uploaded Logo Preview"> | |
| <span id="canvasText" style="font-weight: 800; font-size: 1.1rem; text-transform: uppercase; margin-top: 10px;">YOUR LOGO</span> | |
| </div> | |
| </div> | |
| <div class="controls"> | |
| <form id="orderForm" action="mailto:vendor@jerseylab.com" method="post" enctype="multipart/form-data"> | |
| <input type="hidden" name="Customer Mobile" id="hiddenMobile"> | |
| <input type="hidden" name="Customer Email" id="hiddenEmail"> | |
| <div class="form-group"> | |
| <label>Sport Category</label> | |
| <select name="Sport Category"> | |
| <option value="Basketball">Basketball Jersey & Shorts</option> | |
| <option value="Football">Football Kit</option> | |
| <option value="Volleyball">Volleyball Uniform</option> | |
| <option value="Badminton">Badminton Tee</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label>Base Accent Color</label> | |
| <input type="color" value="#2563eb" style="height: 45px; cursor: pointer;" onchange="updateColor(this.value)"> | |
| </div> | |
| <div class="form-group"> | |
| <label>Upload Artwork / Logo (PNG, JPG, SVG)</label> | |
| <input type="file" id="logoUpload" accept="image/*" onchange="previewUpload(event)"> | |
| </div> | |
| <div class="form-group"> | |
| <label>Customization Details & Roster Info</label> | |
| <textarea name="Customization Notes" rows="3" placeholder="Provide details on player names, numbers, sleeve graphics, and placement..."></textarea> | |
| </div> | |
| <button type="submit" class="btn" style="width: 100%;">📩 Request Vendor Quote</button> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Ready-Made Collection --> | |
| <h2 class="section-title" id="catalog" style="margin-top: 5rem;">TRENDING FITS</h2> | |
| <div class="catalog"> | |
| <div class="product-card"> | |
| <span class="badge">Bestseller</span> | |
| <img src="https://images.unsplash.com/photo-1577210897962-3f572228a0b3?auto=format&fit=crop&w=500&q=80" alt="Pro Basketball Jersey"> | |
| <div class="product-details"> | |
| <h3>Pro Basketball Jersey</h3> | |
| <div class="price">$49.99</div> | |
| <div class="size-selector"> | |
| <button class="size-btn">S</button> | |
| <button class="size-btn">M</button> | |
| <button class="size-btn">L</button> | |
| <button class="size-btn">XL</button> | |
| <button class="size-btn">XXL</button> | |
| </div> | |
| <button class="btn" style="width: 100%;" onclick="quickOrder('Pro Basketball Jersey')">Order Now</button> | |
| </div> | |
| </div> | |
| <div class="product-card"> | |
| <span class="badge">New Release</span> | |
| <img src="https://images.unsplash.com/photo-1521572267360-ee0c2909d518?auto=format&fit=crop&w=500&q=80" alt="Elite Football Kit"> | |
| <div class="product-details"> | |
| <h3>Elite Football Kit</h3> | |
| <div class="price">$39.99</div> | |
| <div class="size-selector"> | |
| <button class="size-btn">S</button> | |
| <button class="size-btn">M</button> | |
| <button class="size-btn">L</button> | |
| <button class="size-btn">XL</button> | |
| <button class="size-btn">XXL</button> | |
| </div> | |
| <button class="btn" style="width: 100%;" onclick="quickOrder('Elite Football Kit')">Order Now</button> | |
| </div> | |
| </div> | |
| <div class="product-card"> | |
| <span class="badge">Team Choice</span> | |
| <img src="https://images.unsplash.com/photo-1503342217505-b0a15ec3261c?auto=format&fit=crop&w=500&q=80" alt="Warmup Zipper Tee"> | |
| <div class="product-details"> | |
| <h3>Warmup Zipper Polo</h3> | |
| <div class="price">$44.99</div> | |
| <div class="size-selector"> | |
| <button class="size-btn">S</button> | |
| <button class="size-btn">M</button> | |
| <button class="size-btn">L</button> | |
| <button class="size-btn">XL</button> | |
| <button class="size-btn">XXL</button> | |
| </div> | |
| <button class="btn" style="width: 100%;" onclick="quickOrder('Warmup Zipper Polo')">Order Now</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| <p>© 2026 JERSEY LAB. All rights reserved.</p> | |
| </footer> | |
| <script> | |
| let userPhone = ""; | |
| let userMail = ""; | |
| function showLoginModal() { | |
| document.getElementById('loginModal').style.display = 'flex'; | |
| } | |
| function handleLogin(e) { | |
| e.preventDefault(); | |
| userPhone = document.getElementById('userMobile').value; | |
| userMail = document.getElementById('userEmail').value || "Not provided"; | |
| document.getElementById('hiddenMobile').value = userPhone; | |
| document.getElementById('hiddenEmail').value = userMail; | |
| document.getElementById('userBadge').innerText = "📱 " + userPhone; | |
| document.getElementById('loginModal').style.display = 'none'; | |
| } | |
| function updateColor(color) { | |
| document.getElementById('jerseyCanvas').style.backgroundColor = color; | |
| } | |
| function previewUpload(event) { | |
| const file = event.target.files[0]; | |
| if (file) { | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| const img = document.getElementById('logoPreview'); | |
| img.src = e.target.result; | |
| img.style.display = 'block'; | |
| document.getElementById('canvasText').style.display = 'none'; | |
| } | |
| reader.readAsDataURL(file); | |
| } | |
| } | |
| function quickOrder(itemName) { | |
| if (!userPhone) { | |
| showLoginModal(); | |
| return; | |
| } | |
| alert('Order initiated for ' + itemName + '. Confirmation details sent to ' + userPhone + '.'); | |
| } | |
| </script> | |
| </body> | |
| </html> |