From 637aafdecf54c0bf08b1599e2f2ed1f2003c1909 Mon Sep 17 00:00:00 2001
From: Anshuman Tiwari <tanshuman145@gmail.com>
Date: Sat, 3 Aug 2024 19:08:30 +0000
Subject: [PATCH] added the gift store page

---
 account/notifications.html     |   2 +-
 account/rewards.html           |   2 +-
 components/footer.html         |   2 +-
 footer/footer.html             |   2 +-
 helpcenter.html                |   2 +-
 index.html                     |   2 +-
 the-gift-card-store/index.html | 163 ++++++++++++++++++++++++++-------
 7 files changed, 138 insertions(+), 37 deletions(-)

diff --git a/account/notifications.html b/account/notifications.html
index 76e056e6..f5ad7929 100644
--- a/account/notifications.html
+++ b/account/notifications.html
@@ -48,7 +48,7 @@ <h4>Hello</h4>
                     <div class="options-heading">PAYMENTS</div>
                 </div>
                 <ul class="lists">
-                    <li><a href="">Gift Cards</a>
+                    <li><a href="/the-gift-card-store/index.html">Gift Cards</a>
                     <p>₹0</p></li>
                     <li><a href="">Saved UPI</a></li>
                     <li><a href="">Saved Cards</a></li>
diff --git a/account/rewards.html b/account/rewards.html
index 3b89047c..288ef69e 100644
--- a/account/rewards.html
+++ b/account/rewards.html
@@ -339,7 +339,7 @@ <h3>PAYMENTS</h3>
                         </div>
                         <div class="nav-list">
                         <ul>
-                            <li><a href="#">Gift Cards</a></li>
+                            <li><a href="/the-gift-card-store/index.html">Gift Cards</a></li>
                             <li><a href="#">Saved UPI</a></li>
                             <li><a href="#">Saved Cards</a></li>
                         </ul></div>
diff --git a/components/footer.html b/components/footer.html
index c6cbab45..a6601ec9 100644
--- a/components/footer.html
+++ b/components/footer.html
@@ -95,7 +95,7 @@
         <div class="c4gehN"><img
                 src="https://static-assets-web.flixcart.com/batman-returns/batman-returns/p/images/gift-cards-image-d7ff24.svg"
                 alt="Gift Cards" width="13" height="13"><a
-                href="/the-gift-card-store?otracker=${otracker}_footer_navlinks" aria-label="Gift Cards"><span>Gift
+                href="/the-gift-card-store/index.html" aria-label="Gift Cards"><span>Gift
                     Cards</span></a></div>
         <div class="c4gehN"><img
                 src="https://static-assets-web.flixcart.com/batman-returns/batman-returns/p/images/help-centre-image-c4ace8.svg"
diff --git a/footer/footer.html b/footer/footer.html
index 75aa2054..10cdcce4 100644
--- a/footer/footer.html
+++ b/footer/footer.html
@@ -125,7 +125,7 @@ <h5>Registered Office Address:</h5>
                 <div class="col-auto">
                     <img src="https://static-assets-web.flixcart.com/batman-returns/batman-returns/p/images/gift-cards-image-d7ff24.svg"
                         alt="Gift Cards" width="13" height="13">
-                    <a href="https://www.flipkart.com/the-gift-card-store?otracker=${otracker}_footer_navlinks"
+                    <a href="../the-gift-card-store/index.html"
                         aria-label="Gift Cards"><span>Gift Cards</span></a>
                 </div>
                 <div class="col-auto">
diff --git a/helpcenter.html b/helpcenter.html
index de0629db..03006881 100644
--- a/helpcenter.html
+++ b/helpcenter.html
@@ -103,7 +103,7 @@
 							<a class="dropdown-item" href="account/rewards.html">
 								<img width="20" src="img/svg/rewards.svg" alt="flipKart">
 								Rewards</a>
-							<a class="dropdown-item" href="the-gift-card-store/">
+							<a class="dropdown-item" href="./the-gift-card-store/index.html">
 								<img width="20" src="img/svg/giftCard.svg" alt="flipKart">
 								Gift Cards</a>
 								<a class="dropdown-item" href="account/contact.html">
diff --git a/index.html b/index.html
index c34751dd..f0315661 100644
--- a/index.html
+++ b/index.html
@@ -440,7 +440,7 @@ <h4>Login</h4>
                                 Notifications</a>
                             <a class="dropdown-item d-flex gap-2" href="account/rewards.html"><img width="20"
                                     src="img/svg/rewards.svg" alt="flipKart" style="margin-right: 5px;"> Rewards</a>
-                            <a class="dropdown-item d-flex gap-2" href="the-gift-card-store/"><img width="20"
+                            <a class="dropdown-item d-flex gap-2" href="./the-gift-card-store/index.html"><img width="20"
                                     src="img/svg/giftCard.svg" alt="flipKart" style="margin-right: 5px;"> Gift Cards</a>
                             <a class="dropdown-item d-flex gap-2" href="account/contact.html"><img width="20" height="10"
                                     src="https://pngimg.com/uploads/phone/phone_PNG48988.png" alt="flipKart"
diff --git a/the-gift-card-store/index.html b/the-gift-card-store/index.html
index c558b09c..945b202f 100644
--- a/the-gift-card-store/index.html
+++ b/the-gift-card-store/index.html
@@ -6,28 +6,132 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Flipkart Gift Card</title>
   <link rel="shortcut icon" href="../img/flipkart_favicon.ico" type="image/x-icon">
-  <link rel="stylesheet" href="giftcard.css">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
   <style>
-     #progress-container {
-    position: fixed ;
-    top: 0px;
-    left: 0;
-    width: 100%;
-    height: 15px;
-    z-index: 99990;
-    /* background: #f3f3f3; */
-}
-
-#progress-bar {
-    height: 53%;
-    width: 0;
-    background: linear-gradient(90deg, rgb(0, 72, 255) 0%, rgb(153, 187, 255) 50%, rgb(0, 184, 250) 100%);
-    box-shadow: 0 0 4px rgba(0, 166, 255, 0.7), 0 0 10px rgba(255, 255, 255, 0.7);
-    transition: width 0.09s ease-in-out;
-    border-radius: 10px;
-}
+    /* Progress Bar Styles */
+    #progress-container {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 15px;
+      z-index: 99990;
+    }
 
+    #progress-bar {
+      height: 53%;
+      width: 0;
+      background: linear-gradient(90deg, rgb(0, 72, 255) 0%, rgb(153, 187, 255) 50%, rgb(0, 184, 250) 100%);
+      box-shadow: 0 0 4px rgba(0, 166, 255, 0.7), 0 0 10px rgba(255, 255, 255, 0.7);
+      transition: width 0.09s ease-in-out;
+      border-radius: 10px;
+    }
+
+    /* Navbar Styles */
+    .navbar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px 20px;
+      background-color: #f8f9fa;
+      border-bottom: 1px solid #e5e5e5;
+    }
+
+    .navbar .logo .title {
+      font-size: 24px;
+      font-weight: bold;
+      color: #007bff;
+    }
+
+    .navbar .search-bar input {
+      padding: 5px 10px;
+      width: 300px;
+      border-radius: 5px;
+      border: 1px solid #ddd;
+    }
+
+    .navbar .links a {
+      margin: 0 10px;
+      text-decoration: none;
+      color: #007bff;
+      font-size: 16px;
+    }
+
+    .navbar .links a:hover {
+      text-decoration: underline;
+    }
+
+    /* Info Section Styles */
+    .info {
+      padding: 20px;
+      background-color: #f4f4f4;
+    }
+
+    .info .head {
+      font-size: 28px;
+      margin-bottom: 20px;
+    }
+
+    .info .detail {
+      font-size: 16px;
+      line-height: 1.6;
+    }
+
+    /* Gift Card Section Styles */
+    .gift-card-section {
+      padding: 20px;
+      background-color: #fff;
+    }
+
+    .gift-card-section h1 {
+      font-size: 24px;
+      margin-bottom: 20px;
+    }
+
+    .gift-card-section form {
+      margin-bottom: 20px;
+    }
+
+    .gift-card-section label {
+      display: block;
+      margin-bottom: 5px;
+      font-weight: bold;
+    }
+
+    .gift-card-section select {
+      padding: 5px;
+      border-radius: 5px;
+      border: 1px solid #ddd;
+      margin-bottom: 10px;
+    }
+
+    .gift-card-section button {
+      padding: 10px 20px;
+      background-color: #007bff;
+      color: #fff;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+    }
+
+    .gift-card-section button:hover {
+      background-color: #0056b3;
+    }
+
+    .gift-card-section .preview {
+      margin-top: 20px;
+    }
+
+    .gift-card-section .preview h2 {
+      font-size: 20px;
+    }
+
+    /* Footer Styles */
+    #footer-giftCard {
+      height: 100px;
+      background-color: #292d33;
+      margin-top: 20px;
+    }
   </style>
 </head>
 
@@ -37,15 +141,13 @@
   </div>
 
   <script>
-        
     window.addEventListener('scroll', function() {
-        const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
-        const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
-        const scrolled = (winScroll / height) * 100;
-        document.getElementById('progress-bar').style.width = scrolled + '%';
+      const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+      const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+      const scrolled = (winScroll / height) * 100;
+      document.getElementById('progress-bar').style.width = scrolled + '%';
     });
-    </script>
-  
+  </script>
 
   <div class="navbar">
     <div class="logo">
@@ -61,6 +163,7 @@
       <a href="../helpcentre/index.html">Support</a>
     </div>
   </div>
+
   <div class="info">
     <h1 class="head">Gift Card Store</h1>
     <div class="detail">
@@ -76,6 +179,7 @@ <h1 class="head">Gift Card Store</h1>
       special!. The information you are reading has been last updated on 17-May-24.
     </div>
   </div>
+
   <div class="gift-card-section">
     <h1>Flipkart Gift Card</h1>
     <form id="giftCardForm">
@@ -94,10 +198,7 @@ <h2>Gift Card Preview</h2>
     </div>
   </div>
 
-
-
-  <div id="footer-giftCard" style="background-color: #292d33;"></div>
-  <script src="../js/giftCard.js"></script>
+  <div id="footer-giftCard"></div>
 </body>
 
-</html>
\ No newline at end of file
+</html>