Merge branch 'swaraj-das:main' into main

swaraj-das · Oct 20, 2024 · 9f1548f · 9f1548f
2 parents f2c244d + d33ded2
commit 9f1548f
Show file tree

Hide file tree

Showing 7 changed files with 158 additions and 12 deletions.
diff --git a/images/logo-192x192.png b/images/logo-192x192.png
diff --git a/images/logo-512x512.png b/images/logo-512x512.png
diff --git a/index.html b/index.html
@@ -26,6 +26,9 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
     <link rel="stylesheet" href="./popup/popup.css" />
 
+    <!-- Manifest file for PWA -->
+    <link rel="manifest" href="/manifest.json">
+
 </head>
 
 <body>
@@ -120,8 +123,8 @@ <h2 class="h2">Sign up for exclusive offers & updates</h2>
                         <button type="submit" class="signup-btn1">Get 30% Off Now</button>
                     </form>
                     <a href="#" class="no-thanks close1-btn">No thanks</a>
-                    <p class="terms">By signing up, you agree to our <a href="#">Terms of Service</a> and <a
-                            href="#">Privacy Policy</a>.</p>
+                    <p class="terms">By signing up, you agree to our <a href="terms.html">Terms of Service</a> and <a
+                            href="PrivacyPolicy/PrivacyPolicy.html">Privacy Policy</a>.</p>
                 </div>
             </div>
         </div>
@@ -643,9 +646,9 @@ <h2 class="logo-text">Collect your GamingTools</h2>
                     selection of controllers, VR gear, and more.
                 </p>
                 <div class="contact">
-                    <span><i class="fas fa-phone"></i> &nbsp; 123-456-789</span>
-                    <span><i class="fas fa-envelope"></i> &nbsp; [email protected]</span>
-                </div>
+                    <span><a href="tel:123-456-789" style="color: white; text-decoration: none;"><i class="fas fa-phone"></i> &nbsp; 123-456-789</a></span>
+                    <span><a href="mailto:[email protected]" style="color: white; text-decoration: none;"><i class="fas fa-envelope"></i> &nbsp; [email protected]</a></span>
+                </div>                              
                 <div class="socials">
                     <!-- Added classes to the <a> tags to add the Hover animations -->
                     <a class="facebook" href="#"><i class="fab fa-facebook"></i></a>
@@ -671,7 +674,7 @@ <h2>Quick Links</h2>
                 <h2>Legal Links</h2>
                 <ul>
                     <li><a href="PrivacyPolicy/PrivacyPolicy.html">Privacy Policy</a></li>
-                    <li><a href="#">Terms of Service </a></li>
+                    <li><a href="terms.html">Terms of Service </a></li>
                     <li><a href="#">Cookie Policy</a></li>
                     <li><a href="#">Disclaimer</a></li>
                     <li><a href="#">Return Policy</a></li>

diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,21 @@
+{
+    "name": "Collect your GamingTools",
+    "short_name": "Collect your GamingTools",
+    "description": "A responsive and dynamic website to showcase the best gaming accessories for every gamer!",
+    "start_url": "/index.html",
+    "display": "standalone",
+    "background_color": "#ffffff",
+    "theme_color": "#000000",
+    "icons": [
+      {
+        "src": "/images/logo-192x192.png",
+        "sizes": "192x192",
+        "type": "image/png"
+      },
+      {
+        "src": "/images/logo-512x512.png",
+        "sizes": "512x512",
+        "type": "image/png"
+      }
+    ]
+  }
diff --git a/script.js b/script.js
@@ -204,4 +204,17 @@ function testimonialJs() {
 
 });
 }
-testimonialJs();
+testimonialJs();
+
+// Service Worker code for PWA
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('/service-worker.js')
+      .then((registration) => {
+        console.log('ServiceWorker registration successful with scope: ', registration.scope);
+      })
+      .catch((error) => {
+        console.log('ServiceWorker registration failed: ', error);
+      });
+  });
+}
diff --git a/service-worker.js b/service-worker.js
@@ -0,0 +1,43 @@
+const CACHE_NAME = 'my-pwa-cache-v1';
+const urlsToCache = [
+  '/',
+  '/index.html',
+  '/styles.css',
+  '/script.js',
+  '/manifest.json',
+  '/images/logo-192x192.png',
+  '/images/logo-512x512.png'
+];
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then((cache) => {
+        return cache.addAll(urlsToCache);
+      })
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    caches.match(event.request)
+      .then((response) => {
+        return response || fetch(event.request);
+      })
+  );
+});
+
+self.addEventListener('activate', (event) => {
+  const cacheWhitelist = [CACHE_NAME];
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames.map((cacheName) => {
+          if (!cacheWhitelist.includes(cacheName)) {
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});
diff --git a/style.css b/style.css
@@ -994,7 +994,7 @@ button {
   font-size: 20px;
   color: white;
   cursor: pointer;
-  background-color: #1f2937;
+  background-color: #ff1476;
   border: 2px solid white;
   border-radius: 50%;
   display: flex;
@@ -1008,15 +1008,19 @@ button {
   top: 50%;
   right: 0;
   transform: translateY(-50%);
-  transition: transform 0.3s ease-in-out;
-  background-color: #333;
+  transition: all 0.5s linear, width 0.5s ease;
+  background: linear-gradient(45deg, #8a2be2, #FF1493);
   border-radius: 10px 0 0 10px;
   cursor: pointer;
   color: white;
   font-size: 25px;
   padding: 12px;
   z-index: 1;
 }
+.toggle-arrow:hover{
+  background: linear-gradient(45deg, #8400ffa6, #ff0088ac);
+  width: 30px;
+}
 
 .social-sidebar {
   position: fixed;
@@ -1026,7 +1030,7 @@ button {
   display: flex;
   flex-direction: column;
   gap: 15px;
-  background-color: #333;
+  background: linear-gradient(135deg, #8514ee, #00ffffc9, #ff078b);
   padding: 3px;
   border-radius: 15px 0 0 15px;
   border: none;
@@ -1070,8 +1074,9 @@ button {
 .social-sidebar li a:hover {
   background-color: #ffffff;
   border-radius: 50%;
-  color: #1f2937;
+  /* color: #1f2937; */
   transform: scale(1.1);
+  transition: all linear 0.3s;
 }
 
 .social-sidebar i {
@@ -1083,6 +1088,22 @@ button {
   transform: scale(1.1);
 }
 
+.social-sidebar .facebook:hover{
+  color: #1877F2;
+}
+
+.social-sidebar .twitter:hover {
+  color: black;
+}
+
+.social-sidebar .instagram:hover {
+  color: #C13584;
+}
+
+.social-sidebar .youtube:hover {
+  color: #FF0000;
+}
+
 /* -----------------------------------------------Responsiveness----------------------------------------------------- */
 
 /* ----------------------------for mobiles--------------------------------------- */
@@ -1940,3 +1961,48 @@ button {
     width: 1000vw !important;
   }
 }
+
+
+/* Add hover effects and shadows to the card */
+#contact .card {
+  border: 1px solid #ddd;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+#contact .card:hover {
+  transform: scale(1.03);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+  border-color: #54546b;
+}
+
+/* Add hover effect to the form input fields */
+#contact .form-group input,
+#contact .form-group textarea {
+  border: 1px solid #ccc;
+  padding: 10px;
+  border-radius: 4px;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+#contact .form-group input:hover,
+#contact .form-group textarea:hover {
+  border-color: #767d86;
+  box-shadow: 0 2px 6px rgba(0, 123, 255, 0.2);
+}
+
+/* Style the button with hover effects */
+#contact button {
+  background-color: #007BFF;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+#contact button:hover {
+  background-color: #0056b3;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}