Update index.html

index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>HOUSE OF SCREENS - Custom Basketball & Football Jerseys</title>
+    <title>HOUSE OF SCREENS</title>
     <style>
         * {
             box-sizing: border-box;
@@ -13,301 +13,160 @@
         }
 
         body {
-            background-color: #0b0c10;
+            background-color: #121212;
             color: #ffffff;
         }
 
         /* Top Announcement Bar */
         .top-bar {
-            background-color: #1a1a1d;
+            background-color: #4a72d4; /* Blue bar matching the site */
             color: #ffffff;
             text-align: center;
-            padding: 8px 15px;
-            font-size: 13px;
+            padding: 10px 15px;
+            font-size: 14px;
+            font-weight: 500;
             letter-spacing: 0.5px;
-            border-bottom: 1px solid #282828;
         }
 
-        /* Header Navigation */
+        /* Header Navigation Container */
         header {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            padding: 18px 50px;
-            background-color: #0b0c10;
-            border-bottom: 1px solid #1f1f23;
+            padding: 15px 30px;
+            background-color: #121212;
             position: sticky;
             top: 0;
             z-index: 100;
         }
 
-        .logo {
-            font-size: 20px;
-            font-weight: 900;
-            letter-spacing: 2px;
-            text-transform: uppercase;
-        }
-
-        nav ul {
+        /* Hamburger Menu Icon (Left) */
+        .menu-btn {
+            background: none;
+            border: none;
+            cursor: pointer;
+            padding: 5px;
             display: flex;
-            list-style: none;
-            gap: 22px;
-            flex-wrap: wrap;
-        }
-
-        nav a {
-            color: #c5c6c8;
-            text-decoration: none;
-            font-size: 13px;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.8px;
-            transition: color 0.2s;
-        }
-
-        nav a:hover {
-            color: #ffffff;
+            align-items: center;
         }
 
-        .header-icons {
-            display: flex;
-            gap: 20px;
-            font-size: 18px;
-            cursor: pointer;
+        .menu-btn svg {
+            width: 24px;
+            height: 24px;
+            fill: #ffffff;
         }
 
-        /* Multi-Sport Hero Banner */
-        .hero {
-            position: relative;
-            width: 100%;
-            height: 75vh;
-            background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.8)), 
-                        url('https://images.unsplash.com/photo-1546519638-68e109498ffc?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
+        /* Centered Logo */
+        .logo {
             display: flex;
-            flex-direction: column;
             align-items: center;
-            justify-content: flex-end;
-            padding-bottom: 60px;
-            text-align: center;
+            justify-content: center;
         }
 
-        .hero-btn {
-            background-color: #1f1f23;
+        .logo-text {
+            font-size: 22px;
+            font-weight: 900;
+            letter-spacing: 2px;
             color: #ffffff;
-            padding: 12px 35px;
-            text-decoration: none;
-            font-weight: 700;
-            font-size: 14px;
             text-transform: uppercase;
-            border-radius: 4px;
-            border: 1px solid #3a3a40;
-            letter-spacing: 1.5px;
-            transition: all 0.3s;
-        }
-
-        .hero-btn:hover {
-            background-color: #3a3a40;
-            border-color: #666;
+            text-decoration: none;
         }
 
-        /* Modal Pop-up Overlay (Matches Viewport) */
-        .modal-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.85);
+        /* Action Icons (Right) */
+        .header-icons {
             display: flex;
             align-items: center;
-            justify-content: center;
-            z-index: 1000;
-        }
-
-        .modal-box {
-            background-color: #000000;
-            border: 1px solid #222;
-            border-radius: 8px;
-            padding: 40px 30px;
-            width: 90%;
-            max-width: 440px;
-            text-align: center;
-            position: relative;
-            box-shadow: 0 10px 40px rgba(0,0,0,0.9);
+            gap: 20px;
         }
 
-        .close-btn {
-            position: absolute;
-            top: -12px;
-            right: -12px;
-            background: #ffffff;
-            color: #000000;
+        .icon-btn {
+            background: none;
             border: none;
-            border-radius: 50%;
-            width: 28px;
-            height: 28px;
-            font-size: 16px;
             cursor: pointer;
-            line-height: 28px;
-            text-align: center;
-            font-weight: bold;
-        }
-
-        .modal-title {
-            color: #2196f3;
-            font-size: 20px;
-            font-weight: 800;
-            margin-bottom: 25px;
-            letter-spacing: 1.5px;
-            text-transform: uppercase;
-        }
-
-        .modal-body {
-            font-size: 18px;
-            line-height: 1.6;
             color: #ffffff;
+            display: flex;
+            align-items: center;
         }
 
-        .modal-body p {
-            margin-bottom: 20px;
-        }
-
-        .modal-body u {
-            text-underline-offset: 4px;
-        }
-
-        /* Featured Section */
-        .section-container {
-            max-width: 1100px;
-            margin: 70px auto;
-            padding: 0 20px;
-            text-align: center;
-        }
-
-        .product-card {
-            background-color: #121317;
-            border: 1px solid #22252a;
-            border-radius: 8px;
-            padding: 35px;
-            max-width: 420px;
-            margin: 0 auto;
-        }
-
-        .product-card h2 {
-            font-size: 18px;
-            letter-spacing: 1px;
-            margin-bottom: 20px;
+        .icon-btn svg {
+            width: 20px;
+            height: 20px;
+            fill: none;
+            stroke: #ffffff;
+            stroke-width: 2;
+            stroke-linecap: round;
+            stroke-linejoin: round;
         }
 
-        .btn-add {
-            background-color: #ffffff;
-            color: #000000;
-            padding: 12px 24px;
-            border: none;
-            font-weight: bold;
-            cursor: pointer;
-            text-transform: uppercase;
+        /* Slide-out Drawer Navigation */
+        .drawer-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
             width: 100%;
-            margin-bottom: 15px;
-            border-radius: 2px;
-            transition: background 0.2s;
-        }
-
-        .btn-add:hover {
-            background-color: #dddddd;
-        }
-
-        /* Instagram Section */
-        .instagram-section {
-            border-top: 1px solid #1f1f23;
-            padding: 60px 20px;
-            text-align: center;
-        }
-
-        .instagram-section h3 {
-            font-size: 22px;
-            letter-spacing: 1px;
-            margin-bottom: 8px;
-        }
-
-        /* Newsletter Signup */
-        .newsletter {
-            background-color: #121317;
-            padding: 60px 20px;
-            text-align: center;
-            border-top: 1px solid #1f1f23;
-        }
-
-        .newsletter h3 {
-            font-size: 22px;
-            margin-bottom: 10px;
-            letter-spacing: 1px;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.7);
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.3s ease;
+            z-index: 200;
         }
 
-        .newsletter p {
-            color: #888;
-            font-size: 14px;
-            margin-bottom: 25px;
+        .drawer-overlay.active {
+            opacity: 1;
+            visibility: visible;
         }
 
-        .newsletter-form {
+        .nav-drawer {
+            position: fixed;
+            top: 0;
+            left: -320px;
+            width: 300px;
+            height: 100%;
+            background-color: #181818;
+            box-shadow: 2px 0 10px rgba(0,0,0,0.5);
+            transition: left 0.3s ease;
+            z-index: 201;
+            padding: 25px 20px;
             display: flex;
-            justify-content: center;
-            gap: 10px;
-            max-width: 400px;
-            margin: 0 auto;
+            flex-direction: column;
         }
 
-        .newsletter-input {
-            padding: 12px 15px;
-            background: #0b0c10;
-            border: 1px solid #22252a;
-            color: #fff;
-            width: 100%;
-            border-radius: 4px;
+        .nav-drawer.active {
+            left: 0;
         }
 
-        /* Floating WhatsApp Widget */
-        .whatsapp-float {
-            position: fixed;
-            bottom: 25px;
-            right: 25px;
-            background-color: #25d366;
+        .drawer-close {
+            align-self: flex-end;
+            background: none;
+            border: none;
             color: #fff;
-            border-radius: 50%;
-            width: 52px;
-            height: 52px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            text-decoration: none;
-            font-size: 26px;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.6);
-            z-index: 999;
+            font-size: 24px;
+            cursor: pointer;
+            margin-bottom: 20px;
         }
 
-        /* Footer */
-        footer {
-            background-color: #070709;
-            padding: 35px 20px;
-            border-top: 1px solid #1f1f23;
-            text-align: center;
-            font-size: 13px;
-            color: #777;
+        .drawer-menu {
+            list-style: none;
         }
 
-        footer nav {
-            margin-top: 15px;
+        .drawer-menu li {
+            border-bottom: 1px solid #282828;
         }
 
-        footer a {
-            color: #777;
+        .drawer-menu a {
+            display: block;
+            padding: 15px 0;
+            color: #ffffff;
             text-decoration: none;
-            margin: 0 8px;
+            font-size: 14px;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 1px;
         }
 
-        footer a:hover {
-            color: #fff;
+        .drawer-menu a:hover {
+            color: #3b82f6;
         }
     </style>
 </head>
@@ -320,87 +179,52 @@
 
     <!-- Header Navigation -->
     <header>
-        <div class="logo">HOUSE OF SCREENS</div>
-        <nav>
-            <ul>
-                <li><a href="https://www.houseofscreens.in/?srsltid=AfmBOoqXtiYRyRxzZaNTo-DB1c_8nWS9CoZDoyIYyNzFapHQ4WFAC7UF#">Basketball Fits</a></li>
-                <li><a href="https://www.houseofscreens.in/?srsltid=AfmBOoqXtiYRyRxzZaNTo-DB1c_8nWS9CoZDoyIYyNzFapHQ4WFAC7UF#">Volleyball Fits</a></li>
-                <li><a href="https://www.houseofscreens.in/?srsltid=AfmBOoqXtiYRyRxzZaNTo-DB1c_8nWS9CoZDoyIYyNzFapHQ4WFAC7UF#">Football Fits</a></li>
-                <li><a href="https://www.houseofscreens.in/?srsltid=AfmBOoqXtiYRyRxzZaNTo-DB1c_8nWS9CoZDoyIYyNzFapHQ4WFAC7UF#">Badminton Fits</a></li>
-                <li><a href="https://www.houseofscreens.in/?srsltid=AfmBOoqXtiYRyRxzZaNTo-DB1c_8nWS9CoZDoyIYyNzFapHQ4WFAC7UF#">PRO Basketball</a></li>
-                <li><a href="https://www.houseofscreens.in/?srsltid=AfmBOoqXtiYRyRxzZaNTo-DB1c_8nWS9CoZDoyIYyNzFapHQ4WFAC7UF#">Zippered Polo</a></li>
-                <li><a href="https://www.houseofscreens.in/?srsltid=AfmBOoqXtiYRyRxzZaNTo-DB1c_8nWS9CoZDoyIYyNzFapHQ4WFAC7UF#">Full sleeve Warmups</a></li>
-                <li><a href="https://www.houseofscreens.in/?srsltid=AfmBOoqXtiYRyRxzZaNTo-DB1c_8nWS9CoZDoyIYyNzFapHQ4WFAC7UF#">Basketball Tees</a></li>
-            </ul>
-        </nav>
-        <div class="header-icons">
-            <span>🔍</span>
-            <span>👤</span>
-            <span>🛍️</span>
+        <!-- Left: Hamburger Button -->
+        <button class="menu-btn" onclick="toggleMenu()" aria-label="Open Menu">
+            <svg viewBox="0 0 24 24">
+                <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
+            </svg>
+        </button>
+
+        <!-- Center: Logo -->
+        <div class="logo">
+            <a href="#" class="logo-text">HOUSE OF SCREENS</a>
         </div>
-    </header>
-
-    <!-- Main Hero Banner -->
-    <section class="hero">
-        <a href="#" class="hero-btn">Customize This!</a>
-    </section>
 
-    <!-- Product Showcase -->
-    <section class="section-container">
-        <div class="product-card">
-            <h2>HOFS ELITE CREDITS GIFT CARD</h2>
-            <button class="btn-add">Add to Cart</button>
-            <br>
-            <a href="https://www.houseofscreens.in/?srsltid=AfmBOoqXtiYRyRxzZaNTo-DB1c_8nWS9CoZDoyIYyNzFapHQ4WFAC7UF#" style="color: #888; font-size: 13px;">View full details</a>
+        <!-- Right: Icons (Search, Account, Cart) -->
+        <div class="header-icons">
+            <button class="icon-btn" aria-label="Search">
+                <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+            </button>
+            <button class="icon-btn" aria-label="Account">
+                <svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+            </button>
+            <button class="icon-btn" aria-label="Cart">
+                <svg viewBox="0 0 24 24"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line><path d="M16 10a4 4 0 0 1-8 0"></path></svg>
+            </button>
         </div>
-    </section>
-
-    <!-- Instagram Community Section -->
-    <section class="instagram-section">
-        <h3>Our Instagram Community</h3>
-        <p style="color: #888; font-size: 14px; margin-top: 5px;">Follow us on Instagram for trending products</p>
-    </section>
-
-    <!-- Newsletter Section -->
-    <section class="newsletter">
-        <h3>Subscribe to our emails</h3>
-        <p>Be the first to know about new collections and exclusive offers.</p>
-        <form class="newsletter-form" onsubmit="event.preventDefault();">
-            <input type="email" class="newsletter-input" placeholder="Email" required>
-            <button type="submit" class="hero-btn" style="padding: 12px 20px;">→</button>
-        </form>
-    </section>
+    </header>
 
-    <!-- Pop-up Modal Overlay -->
-    <div class="modal-overlay" id="noticeModal">
-        <div class="modal-box">
-            <button class="close-btn" onclick="closeModal()">✕</button>
-            <div class="modal-title">READ BEFORE PURCHASING</div>
-            <div class="modal-body">
-                <p>All orders will be shipped as per <u><strong>delivery timeline shown on product pages</strong></u>.</p>
-                <p>Please note all orders will take <u><strong>20-25 days to deliver</strong></u> from the time of order as they are <strong><u>CUSTOM</u> made on order.</strong></p>
-            </div>
-        </div>
+    <!-- Slide-out Navigation Drawer -->
+    <div class="drawer-overlay" id="overlay" onclick="toggleMenu()"></div>
+    <div class="nav-drawer" id="drawer">
+        <button class="drawer-close" onclick="toggleMenu()">✕</button>
+        <ul class="drawer-menu">
+            <li><a href="#">Basketball Fits</a></li>
+            <li><a href="#">Volleyball Fits</a></li>
+            <li><a href="#">Football Fits</a></li>
+            <li><a href="#">Badminton Fits</a></li>
+            <li><a href="#">PRO Basketball</a></li>
+            <li><a href="#">Zippered Polo</a></li>
+            <li><a href="#">Full sleeve Warmups</a></li>
+            <li><a href="#">Basketball Tees</a></li>
+        </ul>
     </div>
 
-    <!-- Floating WhatsApp Button -->
-    <a href="#" class="whatsapp-float" title="Contact Us">💬</a>
-
-    <!-- Footer -->
-    <footer>
-        <p>© 2026, [HOUSE OF SCREENS](https://www.houseofscreens.in/?srsltid=AfmBOoqXtiYRyRxzZaNTo-DB1c_8nWS9CoZDoyIYyNzFapHQ4WFAC7UF)</p>
-        <nav>
-            <a href="https://www.houseofscreens.in/?srsltid=AfmBOoqXtiYRyRxzZaNTo-DB1c_8nWS9CoZDoyIYyNzFapHQ4WFAC7UF#">Refund policy</a> ·
-            <a href="https://www.houseofscreens.in/?srsltid=AfmBOoqXtiYRyRxzZaNTo-DB1c_8nWS9CoZDoyIYyNzFapHQ4WFAC7UF#">Privacy policy</a> ·
-            <a href="https://www.houseofscreens.in/?srsltid=AfmBOoqXtiYRyRxzZaNTo-DB1c_8nWS9CoZDoyIYyNzFapHQ4WFAC7UF#">Terms of service</a> ·
-            <a href="https://www.houseofscreens.in/?srsltid=AfmBOoqXtiYRyRxzZaNTo-DB1c_8nWS9CoZDoyIYyNzFapHQ4WFAC7UF#">Shipping policy</a> ·
-            <a href="https://www.houseofscreens.in/?srsltid=AfmBOoqXtiYRyRxzZaNTo-DB1c_8nWS9CoZDoyIYyNzFapHQ4WFAC7UF#">Contact information</a>
-        </nav>
-    </footer>
-
     <script>
-        function closeModal() {
-            document.getElementById('noticeModal').style.display = 'none';
+        function toggleMenu() {
+            document.getElementById('drawer').classList.toggle('active');
+            document.getElementById('overlay').classList.toggle('active');
         }
     </script>
 </body>