Merge pull request #929 from PrabhjotBajwa/smallbranch

arghadipmanna101 · Jun 1, 2024 · cf3d330 · cf3d330
2 parents f8c6532 + 3485708
commit cf3d330
Show file tree

Hide file tree

Showing 3 changed files with 132 additions and 1 deletion.
diff --git a/Navabar.html b/Navabar.html
@@ -212,7 +212,7 @@
             <i class="fa-solid fa-ellipsis-vertical"></i>
           </a>
           <div class="dropdown-menu dropdown-menu-right" aria-labelledby="moreLinksDropdown">
-            <a class="dropdown-item" href="/communication-preferences/push?t=all">Notification Preferences</a>
+            <a class="dropdown-item" href="notification.html">Notification Preferences</a>
             <a class="dropdown-item" href="/helpcentre">24x7 Customer Care</a>
             <a class="dropdown-item" href="https://advertising.flipkart.com/?otracker=ch_vn_advertise_header">Advertise</a>
             <a class="dropdown-item" href="/mobile-apps?otracker=ch_vn_mobile_apps">Download App</a>

diff --git a/notification.css b/notification.css
@@ -0,0 +1,60 @@
+body {
+    background-color: #f8f9fa;
+  }
+
+  .navbar {
+    background-color: #2874f0;
+  }
+
+  .navbar-brand {
+    color: #fff;
+  }
+
+  .nav-link {
+    color: #fff !important;
+  }
+
+  .card {
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+  }
+
+  .bg-gradient {
+    background: linear-gradient(45deg, #2874f0, #1e90ff);
+    animation: gradientAnimation 5s ease infinite;
+  }
+
+  @keyframes gradientAnimation {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+  }
+
+  .text-white {
+    color: #fff !important;
+  }
+
+  .custom-control-input:checked ~ .custom-control-label::before {
+    background-color: #2874f0;
+  }
+
+  .btn-primary {
+    background-color: #2874f0;
+    border-color: #2874f0;
+    transition: background-color 0.3s ease, box-shadow 0.3s ease;
+  }
+
+  .btn-primary:hover {
+    background-color: #1e90ff;
+    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
+  }
+
+  .container {
+    max-width: 600px;
+  }
+
+  .card-body {
+    padding: 2rem;
+  }
+
+
diff --git a/notification.html b/notification.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Flipkart Notification Preferences</title>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+  <link rel="stylesheet" href="notification.css">
+</head>
+<body>
+
+    <div class="container mt-5 wider-card">
+        <div class="card">
+          <div class="card-header bg-gradient text-white">
+            <h3>Notification Preferences</h3>
+          </div>
+          <div class="card-body">
+            <form>
+              <div class="form-group">
+                <label>Email Notifications</label>
+                <div class="custom-control custom-switch">
+                  <input type="checkbox" class="custom-control-input" id="emailNotifications">
+                  <label class="custom-control-label" for="emailNotifications">Enable</label>
+                </div>
+              </div>
+              <div class="form-group">
+                <label>SMS Notifications</label>
+                <div class="custom-control custom-switch">
+                  <input type="checkbox" class="custom-control-input" id="smsNotifications">
+                  <label class="custom-control-label" for="smsNotifications">Enable</label>
+                </div>
+              </div>
+              <div class="form-group">
+                <label>Push Notifications</label>
+                <div class="custom-control custom-switch">
+                  <input type="checkbox" class="custom-control-input" id="pushNotifications">
+                  <label class="custom-control-label" for="pushNotifications">Enable</label>
+                </div>
+              </div>
+              <div class="form-group">
+                <label>Order Updates</label>
+                <div class="custom-control custom-switch">
+                  <input type="checkbox" class="custom-control-input" id="orderUpdates">
+                  <label class="custom-control-label" for="orderUpdates">Enable</label>
+                </div>
+              </div>
+              <div class="form-group">
+                <label>Promotional Offers</label>
+                <div class="custom-control custom-switch">
+                  <input type="checkbox" class="custom-control-input" id="promoOffers">
+                  <label class="custom-control-label" for="promoOffers">Enable</label>
+                </div>
+              </div>
+              <div class="form-group">
+                <label>Feedback Requests</label>
+                <div class="custom-control custom-switch">
+                  <input type="checkbox" class="custom-control-input" id="feedbackRequests">
+                  <label class="custom-control-label" for="feedbackRequests">Enable</label>
+                </div>
+              </div>
+              <button type="submit" class="btn btn-primary">Save Preferences</button>
+            </form>
+          </div>
+        </div>
+      </div>
+
+  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+</body>
+</html>