thinkswell · arpitavbhosale · Aug 23, 2025 · Aug 24, 2025
diff --git a/OnlineCoursesPlatform/arpitavbhosale/images/course1.jpg b/OnlineCoursesPlatform/arpitavbhosale/images/course1.jpg
diff --git a/OnlineCoursesPlatform/arpitavbhosale/images/course2.jpg b/OnlineCoursesPlatform/arpitavbhosale/images/course2.jpg
diff --git a/OnlineCoursesPlatform/arpitavbhosale/images/course3.webp b/OnlineCoursesPlatform/arpitavbhosale/images/course3.webp
diff --git a/OnlineCoursesPlatform/arpitavbhosale/images/hero-bg.jpg b/OnlineCoursesPlatform/arpitavbhosale/images/hero-bg.jpg
diff --git a/OnlineCoursesPlatform/arpitavbhosale/images/instructor.jpg b/OnlineCoursesPlatform/arpitavbhosale/images/instructor.jpg
diff --git a/OnlineCoursesPlatform/arpitavbhosale/images/logo.png b/OnlineCoursesPlatform/arpitavbhosale/images/logo.png
diff --git a/OnlineCoursesPlatform/arpitavbhosale/index.html b/OnlineCoursesPlatform/arpitavbhosale/index.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Online Education Website</title>
+  <link rel="stylesheet" href="style.css">
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+</head>
+<body>
+  <!-- Header -->
+  <header>
+    <div class="container">
+      <div class="logo">
+        <img src="images/logo.png" alt="Online Education Logo">
+      </div>
+      <nav>
+        <ul>
+          <li><a href="#home">Home</a></li>
+          <li><a href="#courses">Courses</a></li>
+          <li><a href="#about">About</a></li>
+          <li><a href="#contact">Contact</a></li>
+        </ul>
+      </nav>
+      <button id="menuToggle">&#9776;</button>
+    </div>
+  </header>
+
+  <!-- Hero Section -->
+  <section id="home" class="hero">
+    <div class="container">
+      <h1>Welcome to Online Education</h1>
+      <p>Learn from the best instructors and enhance your skills.</p>
+      <a href="#courses" class="btn">Explore Courses</a>
+    </div>
+  </section>
+
+  <!-- Courses Section -->
+  <section id="courses" class="courses">
+    <div class="container">
+      <h2>Our Courses</h2>
+      <div class="course-list">
+        <div class="course-item">
+          <img src="images/course1.jpg" alt="Course 1">
+          <h3>Web Development</h3>
+          <p>Learn to build modern websites and web applications.</p>
+        </div>
+        <div class="course-item">
+          <img src="images/course2.jpg" alt="Course 2">
+          <h3>Data Science</h3>
+          <p>Master data analysis and machine learning.</p>
+        </div>
+        <div class="course-item">
+          <img src="images/course3.webp" alt="Course 3">
+          <h3>Graphic Design</h3>
+          <p>Create stunning visuals and designs.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- About Section -->
+  <section id="about" class="about">
+    <div class="container">
+      <h2>About Us</h2>
+      <p>We are a leading online education platform offering high-quality courses in various fields. Our mission is to make education accessible to everyone.</p>
+      <img src="images/instructor.jpg" alt="Instructor">
+    </div>
+  </section>
+
+  <!-- Contact Section -->
+  <section id="contact" class="contact">
+    <div class="container">
+      <h2>Contact Us</h2>
+      <form id="contactForm">
+        <input type="text" placeholder="Your Name" required>
+        <input type="email" placeholder="Your Email" required>
+        <textarea placeholder="Your Message" required></textarea>
+        <button type="submit">Send Message</button>
+      </form>
+    </div>
+  </section>
+
+  <!-- Footer -->
+  <footer>
+    <div class="container">
+      <p>&copy; 2025 Online Education. All rights reserved.</p>
+    </div>
+  </footer>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/OnlineCoursesPlatform/arpitavbhosale/script.js b/OnlineCoursesPlatform/arpitavbhosale/script.js
@@ -0,0 +1,93 @@
+$(document).ready(function () {
+  // Toggle menu on smaller screens
+  $("#menuToggle").click(function () {
+    $("nav ul").slideToggle();
+  });
+
+  // Smooth scrolling for anchor links
+  $('a[href^="#"]').on("click", function (e) {
+    e.preventDefault();
+    var target = $(this).attr("href");
+    $("html, body").animate(
+      {
+        scrollTop: $(target).offset().top,
+      },
+      1000
+    );
+  });
+
+  // Form submission handling with Background Sync
+  if ("serviceWorker" in navigator && "SyncManager" in window) {
+    navigator.serviceWorker.ready.then((sw) => {
+      $("#contactForm").submit(function (e) {
+        e.preventDefault();
+
+        const formData = {
+          name: $("input[type='text']").val(),
+          email: $("input[type='email']").val(),
+          message: $("textarea").val(),
+        };
+
+        // Save form data locally
+        localStorage.setItem("pendingMessage", JSON.stringify(formData));
+
+        // Register sync event
+        sw.sync.register("sendFormData").then(() => {
+          alert("Message saved! Will be sent when online.");
+        });
+
+        this.reset();
+      });
+    });
+  } else {
+    // Fallback: Send directly if sync is not supported
+    $("#contactForm").submit(function (e) {
+      e.preventDefault();
+
+      const formData = {
+        name: $("input[type='text']").val(),
+        email: $("input[type='email']").val(),
+        message: $("textarea").val(),
+      };
+
+      fetch("/send-message", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(formData),
+      })
+        .then(() => alert("Message sent successfully!"))
+        .catch(() => alert("Message failed to send!"));
+
+      this.reset();
+    });
+  }
+
+  // Service Worker Registration
+  if ("serviceWorker" in navigator) {
+    window.addEventListener("load", () => {
+      navigator.serviceWorker
+        .register("/service-worker.js")
+        .then((registration) => {
+          console.log("Service Worker registered with scope:", registration.scope);
+        })
+        .catch((error) => {
+          console.log("Service Worker registration failed:", error);
+        });
+    });
+  }
+
+  // Push Notification Subscription
+  if ("serviceWorker" in navigator && "PushManager" in window) {
+    navigator.serviceWorker.ready.then((registration) => {
+      registration.pushManager
+        .subscribe({
+          userVisibleOnly: true,
+          applicationServerKey: "<Your Public VAPID Key>",
+        })
+        .then((subscription) => {
+          console.log("Push Subscription:", JSON.stringify(subscription));
+        })
+        .catch((error) => console.error("Push subscription failed:", error));
+    });
+  }
+});
diff --git a/OnlineCoursesPlatform/arpitavbhosale/service-worker.js b/OnlineCoursesPlatform/arpitavbhosale/service-worker.js
@@ -0,0 +1,93 @@
+const CACHE_NAME = "online-education-cache-v2";
+const urlsToCache = [
+  "/",
+  "/index.html",
+  "/style.css",
+  "/script.js",
+  "/images/logo.png",
+  "/images/course1.jpg",
+  "/images/course2.jpg",
+  "/images/course3.webp",
+  "/images/instructor.jpg",
+  "/images/hero-bg.jpg",
+];
+
+// Install Service Worker
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      console.log("Opened cache");
+      return cache.addAll(urlsToCache);
+    })
+  );
+});
+
+// Activate Service Worker and Remove Old Caches
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys().then((cacheNames) =>
+      Promise.all(
+        cacheNames.map((cache) => {
+          if (cache !== CACHE_NAME) {
+            console.log("Deleting old cache:", cache);
+            return caches.delete(cache);
+          }
+        })
+      )
+    )
+  );
+});
+
+// Fetch Event: Improved Cache Strategy
+self.addEventListener("fetch", (event) => {
+  event.respondWith(
+    caches.match(event.request).then((cachedResponse) => {
+      if (cachedResponse) return cachedResponse;
+      return fetch(event.request)
+        .then((response) => {
+          let responseClone = response.clone();
+          caches.open(CACHE_NAME).then((cache) => {
+            cache.put(event.request, responseClone);
+          });
+          return response;
+        })
+        .catch(() => caches.match("/index.html")); // Fallback to home page if offline
+    })
+  );
+});
+
+// Sync Event: Retry Sending Form Data When Online
+self.addEventListener("sync", (event) => {
+  if (event.tag === "sendFormData") {
+    event.waitUntil(
+      (async () => {
+        const data = JSON.parse(localStorage.getItem("pendingMessage"));
+        if (data) {
+          fetch("/send-message", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(data),
+          })
+            .then(() => {
+              console.log("Form data sent successfully!");
+              localStorage.removeItem("pendingMessage"); // Clear stored message
+            })
+            .catch((error) => console.error("Sync failed:", error));
+        }
+      })()
+    );
+  }
+});
+
+// Push Notification Event
+self.addEventListener("push", (event) => {
+  const options = {
+    body: "New course updates available! 🎉",
+    icon: "/images/logo.png",
+    badge: "/images/logo.png",
+  };
+
+  event.waitUntil(
+    self.registration.showNotification("Online Education", options)
+  );
+});