File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090027/shop02/index.html

Back
<!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>VORTEX STREETWEAR \| BREAK THE MOLD.</title> <!-- Google Fonts --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <!-- Icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- Stylesheet --> <link rel="stylesheet" href="style.css"> </head> <body> <!-- ANNOUNCEMENT BAR --> <div class="announcement-bar"> ⚡ FREE EXPRESS SHIPPING ON ORDERS OVER ฿1,500 \| USE CODE: VORTEX10 ⚡ </div> <!-- HEADER --> <header class="main-header"> <div class="container header-container"> <a href="index.html" class="logo">VORTEX<span>.</span></a> <nav> <ul class="nav-menu"> <li><a href="index.html" class="nav-link active">NEW DROPS</a></li> <li><a href="#" class="nav-link">TOPS</a></li> <li><a href="#" class="nav-link">BOTTOMS</a></li> <li><a href="#" class="nav-link">ACCESSORIES</a></li> <li><a href="product.html" class="nav-link">CUSTOM LAB</a></li> </ul> </nav> <div class="header-actions"> <button class="action-btn" id="search-toggle" aria-label="Search"> <i class="fa-solid fa-magnifying-glass"></i> </button> <button class="action-btn" id="user-btn" aria-label="Account"> <i class="fa-solid fa-user"></i> </button> <button class="action-btn" id="cart-toggle" aria-label="Cart"> <i class="fa-solid fa-bag-shopping"></i> <span class="cart-count-badge" id="cart-badge-count">0</span> </button> </div> </div> </header> <!-- HERO SECTION --> <section class="hero-section"> <div class="container hero-grid"> <div class="hero-content"> <span class="hero-tagline">DROP #09 / NEO-FUTURE</span> <h1 class="hero-title">BREAK THE MOLD.<br>RULE THE STREETS.</h1> <p class="hero-desc">คอลเลกชันสตรีทแวร์ใหม่ล่าสุดที่สะท้อนตัวตนอย่างไร้ขีดจำกัด ปลดปล่อยความดิบและสไตล์ในแบบของคุณเอง ด้วยดีไซน์กราฟิกออริจินัลและเนื้อผ้าเกรดพรีเมียม</p> <div class="hero-ctas"> <a href="product.html" class="neon-btn-orange">SHOP THE DROP <i class="fa-solid fa-arrow-right"></i></a> <a href="#" class="neon-btn-outline">DISCOVER LAB</a> </div> </div> <div class="hero-image-wrapper"> <div class="hero-image-glow"></div> <img src="https://images.unsplash.com/photo-1509631179647-0177331693ae?q=80&w=800&auto=format&fit=crop" alt="Vortex Streetwear Hero Model" class="hero-image" width="500" height="600"> </div> </div> </section> <!-- BRAND USPs --> <section class="usps-section"> <div class="container usps-grid"> <div class="usp-card"> <div class="usp-icon"><i class="fa-solid fa-wand-magic-sparkles"></i></div> <h3 class="usp-title">100% ORIGINAL GRAPHICS</h3> <p class="usp-desc">ดีไซน์ลิขสิทธิ์เฉพาะแบรนด์ วาดและออกแบบจากดีไซเนอร์สตรีทอาร์ตชั้นนำ ไม่ซ้ำใครแน่นอน</p> </div> <div class="usp-card"> <div class="usp-icon"><i class="fa-solid fa-shirt"></i></div> <h3 class="usp-title">PREMIUM FABRIC ONLY</h3> <p class="usp-desc">เนื้อผ้าคอตตอนพรีเมียมน้ำหนัก 280-320g หนา นุ่ม ทนทาน ระบายอากาศดีเยี่ยมตามมาตรฐานสากล</p> </div> <div class="usp-card"> <div class="usp-icon"><i class="fa-solid fa-truck-fast"></i></div> <h3 class="usp-title">FREE EXPRESS SHIPPING</h3> <p class="usp-desc">จัดส่งพัสดุด่วนฟรีทั่วไทยเมื่อสั่งช็อปครบ 1,500 บาทขึ้นไป พร้อมระบบแท็กกิ้งแบบเรียลไทม์</p> </div> </div> </section> <!-- CATEGORIES GRID --> <section class="categories-section"> <div class="container"> <h2 class="section-title">CHOOSE YOUR VIBE</h2> <div class="categories-grid"> <!-- Tops Large Card --> <div class="category-card large"> <img src="https://images.unsplash.com/photo-1556821840-3a63f95609a7?q=80&w=800&auto=format&fit=crop" alt="Tops Category" class="category-image"> <div class="category-overlay"> <h3 class="category-title">TOPS & HOODIES</h3> <a href="#" class="category-link">SHOP COLLECTION <i class="fa-solid fa-arrow-right-long"></i></a> </div> </div> <!-- Bottoms Small Card --> <div class="category-card small"> <img src="https://images.unsplash.com/photo-1541099649105-f69ad21f3246?q=80&w=600&auto=format&fit=crop" alt="Bottoms Category" class="category-image"> <div class="category-overlay"> <h3 class="category-title">BOTTOMS</h3> <a href="#" class="category-link">EXPLORE <i class="fa-solid fa-arrow-right-long"></i></a> </div> </div> <!-- Accessories Small Card --> <div class="category-card small"> <img src="https://images.unsplash.com/photo-1588850561407-ed78c282e89b?q=80&w=600&auto=format&fit=crop" alt="Accessories Category" class="category-image"> <div class="category-overlay"> <h3 class="category-title">ACC.</h3> <a href="#" class="category-link">VIEW ALL <i class="fa-solid fa-arrow-right-long"></i></a> </div> </div> </div> </div> </section> <!-- NEW DROPS (PRODUCTS GRID) --> <section class="products-section"> <div class="container"> <h2 class="section-title">NEW DROPS / READY TO SHIP</h2> <div class="products-grid"> <!-- Product 1 (The featured page product) --> <div class="product-card"> <span class="product-badge badge badge-limited">LIMITED DROPS</span> <button class="product-wishlist" aria-label="Add to Wishlist"><i class="fa-regular fa-heart"></i></button> <div class="product-image-container"> <a href="product.html"> <img src="https://images.unsplash.com/photo-1556821840-3a63f95609a7?q=80&w=600&auto=format&fit=crop" alt="VORTEX NEO-FUTURE HOODIE" class="product-img main-img"> <img src="https://images.unsplash.com/photo-1556821840-410a56d4fb9a?q=80&w=600&auto=format&fit=crop" alt="VORTEX NEO-FUTURE HOODIE" class="product-img hover-img"> </a> </div> <div class="product-info"> <span class="product-category">TOPS / HOODIES</span> <a href="product.html"><h3 class="product-name">VORTEX NEO-FUTURE HOODIE</h3></a> <div class="product-card-bottom"> <span class="product-price">฿2,490 <span class="original">฿2,990</span></span> <button class="quick-add-btn" data-id="1" data-name="VORTEX NEO-FUTURE HOODIE" data-price="2490" data-img="https://images.unsplash.com/photo-1556821840-3a63f95609a7?q=80&w=600&auto=format&fit=crop" data-size="M" aria-label="Quick Add To Cart"> <i class="fa-solid fa-plus"></i> </button> </div> </div> </div> <!-- Product 2 --> <div class="product-card"> <span class="product-badge badge badge-new">NEW</span> <button class="product-wishlist" aria-label="Add to Wishlist"><i class="fa-regular fa-heart"></i></button> <div class="product-image-container"> <a href="#"> <img src="https://images.unsplash.com/photo-1503342217505-b0a15ec3261c?q=80&w=600&auto=format&fit=crop" alt="CYBER PUNK GLITCH TEE" class="product-img main-img"> <img src="https://images.unsplash.com/photo-1503341455253-b2e723bb3dbb?q=80&w=600&auto=format&fit=crop" alt="CYBER PUNK GLITCH TEE" class="product-img hover-img"> </a> </div> <div class="product-info"> <span class="product-category">TOPS / T-SHIRT</span> <a href="#"><h3 class="product-name">CYBER PUNK GLITCH TEE</h3></a> <div class="product-card-bottom"> <span class="product-price">฿1,290</span> <button class="quick-add-btn" data-id="2" data-name="CYBER PUNK GLITCH TEE" data-price="1290" data-img="https://images.unsplash.com/photo-1503342217505-b0a15ec3261c?q=80&w=600&auto=format&fit=crop" data-size="L" aria-label="Quick Add To Cart"> <i class="fa-solid fa-plus"></i> </button> </div> </div> </div> <!-- Product 3 --> <div class="product-card"> <span class="product-badge badge badge-limited">LIMITED DROPS</span> <button class="product-wishlist" aria-label="Add to Wishlist"><i class="fa-regular fa-heart"></i></button> <div class="product-image-container"> <a href="#"> <img src="https://images.unsplash.com/photo-1517423568366-8b83523034fd?q=80&w=600&auto=format&fit=crop" alt="VORTEX CARGO PANTS" class="product-img main-img"> <img src="https://images.unsplash.com/photo-1517423738875-5ce310acd3da?q=80&w=600&auto=format&fit=crop" alt="VORTEX CARGO PANTS" class="product-img hover-img"> </a> </div> <div class="product-info"> <span class="product-category">BOTTOMS / PANTS</span> <a href="#"><h3 class="product-name">VORTEX NEON CARGO PANTS</h3></a> <div class="product-card-bottom"> <span class="product-price">฿1,890 <span class="original">฿2,290</span></span> <button class="quick-add-btn" data-id="3" data-name="VORTEX NEON CARGO PANTS" data-price="1890" data-img="https://images.unsplash.com/photo-1517423568366-8b83523034fd?q=80&w=600&auto=format&fit=crop" data-size="32" aria-label="Quick Add To Cart"> <i class="fa-solid fa-plus"></i> </button> </div> </div> </div> <!-- Product 4 --> <div class="product-card"> <span class="product-badge badge badge-new">NEW</span> <button class="product-wishlist" aria-label="Add to Wishlist"><i class="fa-regular fa-heart"></i></button> <div class="product-image-container"> <a href="#"> <img src="https://images.unsplash.com/photo-1576871337632-b9aef4c17ab9?q=80&w=600&auto=format&fit=crop" alt="ACID WASH ORANGE BEANIE" class="product-img main-img"> <img src="https://images.unsplash.com/photo-1576871337622-98d48d4aa53e?q=80&w=600&auto=format&fit=crop" alt="ACID WASH ORANGE BEANIE" class="product-img hover-img"> </a> </div> <div class="product-info"> <span class="product-category">ACCESSORIES / HATS</span> <a href="#"><h3 class="product-name">ACID WASH ORANGE BEANIE</h3></a> <div class="product-card-bottom"> <span class="product-price">฿790</span> <button class="quick-add-btn" data-id="4" data-name="ACID WASH ORANGE BEANIE" data-price="790" data-img="https://images.unsplash.com/photo-1576871337632-b9aef4c17ab9?q=80&w=600&auto=format&fit=crop" data-size="Free Size" aria-label="Quick Add To Cart"> <i class="fa-solid fa-plus"></i> </button> </div> </div> </div> </div> </div> </section> <!-- SOCIAL WALL SECTION --> <section class="social-section"> <div class="container"> <div class="social-header"> <h2>WEAR IT WITH REBELLION</h2> <p>TAG US @VORTEX_STREETWEAR TO BE FEATURED</p> </div> <div class="social-grid"> <div class="social-card"> <img src="https://images.unsplash.com/photo-1509281373149-e957c6296406?q=80&w=400&auto=format&fit=crop" alt="Social Post 1" class="social-img"> <div class="social-hover"> <i class="fa-brands fa-instagram"></i> <span>@alex_vortex</span> </div> </div> <div class="social-card"> <img src="https://images.unsplash.com/photo-1529139574466-a303027c1d8b?q=80&w=400&auto=format&fit=crop" alt="Social Post 2" class="social-img"> <div class="social-hover"> <i class="fa-brands fa-instagram"></i> <span>@maya.street</span> </div> </div> <div class="social-card"> <img src="https://images.unsplash.com/photo-1556821840-410a56d4fb9a?q=80&w=400&auto=format&fit=crop" alt="Social Post 3" class="social-img"> <div class="social-hover"> <i class="fa-brands fa-instagram"></i> <span>@k_neon_future</span> </div> </div> <div class="social-card"> <img src="https://images.unsplash.com/photo-1543163521-1bf539c55dd2?q=80&w=400&auto=format&fit=crop" alt="Social Post 4" class="social-img"> <div class="social-hover"> <i class="fa-brands fa-instagram"></i> <span>@street_rebel</span> </div> </div> </div> </div> </section> <!-- NEWSLETTER --> <section class="newsletter-section"> <div class="container newsletter-container"> <h2 class="newsletter-title text-gradient">JOIN THE RESISTANCE</h2> <p class="newsletter-desc">สมัครรับจดหมายข่าวของเราเพื่อเป็นคนแรกที่จะได้รับอัปเดตเกี่ยวกับ Exclusive Drops, คูปองส่วนลดพิเศษ 10% สำหรับการสั่งซื้อครั้งแรก และคอนเทนต์แฟชั่นสุดเอ็กซ์คลูซีฟ</p> <form class="newsletter-form" onsubmit="event.preventDefault(); alert('ขอบคุณที่เข้าร่วมคลับ VORTEX!');"> <input type="email" placeholder="YOUR EMAIL ADDRESS..." class="newsletter-input" required> <button type="submit" class="neon-btn-orange">SUBSCRIBE</button> </form> </div> </section> <!-- FOOTER --> <footer class="main-footer"> <div class="container footer-grid"> <div class="footer-brand"> <h3>VORTEX<span>.</span></h3> <p>แบรนด์เสื้อผ้าแนวสตรีทระดับพรีเมียมที่รังสรรค์ด้วยความขบถและศิลปะแนว Cyberpunk-Streetwear ดีไซน์เพื่อสะท้อนความแปลกใหม่ ทลายกรอบแฟชั่นเดิมๆ</p> <div class="social-links"> <a href="#" class="social-icon" aria-label="Facebook"><i class="fa-brands fa-facebook-f"></i></a> <a href="#" class="social-icon" aria-label="Instagram"><i class="fa-brands fa-instagram"></i></a> <a href="#" class="social-icon" aria-label="TikTok"><i class="fa-brands fa-tiktok"></i></a> </div> </div> <div> <h4 class="footer-title">SHOP</h4> <ul class="footer-links"> <li><a href="index.html">NEW DROPS</a></li> <li><a href="#">TOPS & HOODIES</a></li> <li><a href="#">BOTTOMS</a></li> <li><a href="#">ACCESSORIES</a></li> </ul> </div> <div> <h4 class="footer-title">HELP</h4> <ul class="footer-links"> <li><a href="#">CONTACT US</a></li> <li><a href="#">SHIPPING & RETURNS</a></li> <li><a href="#">SIZE CHART</a></li> <li><a href="#">SECURE PAYMENT</a></li> </ul> </div> <div> <h4 class="footer-title">CONTACT VORTEX</h4> <ul class="footer-contact"> <li><i class="fa-solid fa-location-dot"></i> 88 Vortex Street, Sukhumvit Rd, Bangkok, Thailand</li> <li><i class="fa-solid fa-phone"></i> +66 (0) 2 123 4567</li> <li><i class="fa-solid fa-envelope"></i> contact@vortexstreetwear.com</li> </ul> </div> </div> <div class="container footer-bottom"> <p class="copyright">© 2026 VORTEX STREETWEAR. ALL RIGHTS RESERVED.</p> <div class="payment-methods"> <i class="fa-brands fa-cc-visa" title="Visa"></i> <i class="fa-brands fa-cc-mastercard" title="Mastercard"></i> <i class="fa-brands fa-cc-stripe" title="Stripe"></i> <i class="fa-solid fa-qrcode" title="Thai QR Payment"></i> </div> </div> </footer> <!-- SIDEBAR MINI CART --> <div class="cart-backdrop" id="cart-backdrop"></div> <div class="cart-sidebar" id="cart-sidebar"> <div class="cart-header"> <h3 class="cart-title">YOUR BAG (<span id="cart-sidebar-count">0</span>)</h3> <button class="close-cart-btn" id="close-cart" aria-label="Close Cart"><i class="fa-solid fa-xmark"></i></button> </div> <div class="cart-items-list" id="cart-items-container"> <!-- Items will be dynamically rendered here via app.js --> <div class="empty-cart-message" style="text-align: center; margin-top: 40px; color: var(--text-muted);"> <i class="fa-solid fa-bag-shopping" style="font-size: 3rem; margin-bottom: 16px; display: block; color: rgba(255,255,255,0.05)"></i> BAG IS EMPTY </div> </div> <div class="cart-footer"> <div class="cart-summary-line"> <span>SUBTOTAL</span> <span id="cart-subtotal">฿0</span> </div> <div class="cart-summary-line"> <span>SHIPPING</span> <span id="cart-shipping" style="color: var(--accent-green); font-weight: 700;">FREE</span> </div> <div class="cart-summary-line total"> <span>TOTAL</span> <span id="cart-total">฿0</span> </div> <button class="neon-btn-orange checkout-btn" onclick="alert('กำลังเข้าสู่ระบบชำระเงินจำลอง...');">SECURE CHECKOUT</button> </div> </div> <!-- AUTHENTICATION MODAL (LOGIN/REGISTER) --> <div class="auth-modal-backdrop" id="auth-modal"> <div class="auth-modal-container"> <button class="close-modal-btn" id="close-auth-modal" aria-label="Close Modal"><i class="fa-solid fa-xmark"></i></button> <div class="auth-tabs"> <button class="auth-tab-btn active" id="tab-login">LOGIN</button> <button class="auth-tab-btn" id="tab-register">REGISTER</button> </div> <!-- Login Form --> <div class="auth-form-wrapper active" id="form-login-container"> <form id="login-form"> <div class="auth-input-group"> <label class="auth-label" for="login-email">EMAIL ADDRESS</label> <input type="email" id="login-email" class="auth-input" placeholder="REBEL@VORTEX.COM" required> </div> <div class="auth-input-group"> <label class="auth-label" for="login-password">PASSWORD</label> <input type="password" id="login-password" class="auth-input" placeholder="••••••••" required> </div> <button type="submit" class="neon-btn-orange auth-submit-btn">ENTER VORTEX</button> </form> </div> <!-- Register Form --> <div class="auth-form-wrapper" id="form-register-container"> <form id="register-form"> <div class="auth-input-group"> <label class="auth-label" for="reg-name">YOUR NAME</label> <input type="text" id="reg-name" class="auth-input" placeholder="NEO REBEL" required> </div> <div class="auth-input-group"> <label class="auth-label" for="reg-email">EMAIL ADDRESS</label> <input type="email" id="reg-email" class="auth-input" placeholder="REBEL@VORTEX.COM" required> </div> <div class="auth-input-group"> <label class="auth-label" for="reg-password">PASSWORD</label> <input type="password" id="reg-password" class="auth-input" placeholder="••••••••" required> </div> <button type="submit" class="neon-btn-orange auth-submit-btn">JOIN RESISTANCE</button> </form> </div> <div class="social-login-separator">OR CONNECT WITH</div> <div class="social-login-grid"> <button class="social-login-btn" type="button" id="social-google-btn"> <i class="fa-brands fa-google"></i> GOOGLE </button> <button class="social-login-btn" type="button" id="social-apple-btn"> <i class="fa-brands fa-apple"></i> APPLE </button> </div> </div> </div> <!-- NOTIFICATION TOAST --> <div class="notification-toast" id="toast"> <i class="fa-solid fa-circle-check"></i> <span class="notification-text" id="toast-text">ADDED TO BAG!</span> </div> <!-- JavaScript --> <script src="app.js"></script> </body> </html>

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.29 | proxy | phpinfo | Settings