diff --git a/OnlineCoursesPlatform/arpitavbhosale/images/course1.jpg b/OnlineCoursesPlatform/arpitavbhosale/images/course1.jpg new file mode 100644 index 000000000..d39494628 Binary files /dev/null and b/OnlineCoursesPlatform/arpitavbhosale/images/course1.jpg differ diff --git a/OnlineCoursesPlatform/arpitavbhosale/images/course2.jpg b/OnlineCoursesPlatform/arpitavbhosale/images/course2.jpg new file mode 100644 index 000000000..15e568b3e Binary files /dev/null and b/OnlineCoursesPlatform/arpitavbhosale/images/course2.jpg differ diff --git a/OnlineCoursesPlatform/arpitavbhosale/images/course3.webp b/OnlineCoursesPlatform/arpitavbhosale/images/course3.webp new file mode 100644 index 000000000..cb325568a Binary files /dev/null and b/OnlineCoursesPlatform/arpitavbhosale/images/course3.webp differ diff --git a/OnlineCoursesPlatform/arpitavbhosale/images/hero-bg.jpg b/OnlineCoursesPlatform/arpitavbhosale/images/hero-bg.jpg new file mode 100644 index 000000000..b0fa22347 Binary files /dev/null and b/OnlineCoursesPlatform/arpitavbhosale/images/hero-bg.jpg differ diff --git a/OnlineCoursesPlatform/arpitavbhosale/images/instructor.jpg b/OnlineCoursesPlatform/arpitavbhosale/images/instructor.jpg new file mode 100644 index 000000000..16218de0b Binary files /dev/null and b/OnlineCoursesPlatform/arpitavbhosale/images/instructor.jpg differ diff --git a/OnlineCoursesPlatform/arpitavbhosale/images/logo.png b/OnlineCoursesPlatform/arpitavbhosale/images/logo.png new file mode 100644 index 000000000..f820622a8 Binary files /dev/null and b/OnlineCoursesPlatform/arpitavbhosale/images/logo.png differ diff --git a/OnlineCoursesPlatform/arpitavbhosale/index.html b/OnlineCoursesPlatform/arpitavbhosale/index.html new file mode 100644 index 000000000..0ba589f62 --- /dev/null +++ b/OnlineCoursesPlatform/arpitavbhosale/index.html @@ -0,0 +1,93 @@ + + + + + + Online Education Website + + + + + +
+
+ + + +
+
+ + +
+
+

Welcome to Online Education

+

Learn from the best instructors and enhance your skills.

+ Explore Courses +
+
+ + +
+
+

Our Courses

+
+
+ Course 1 +

Web Development

+

Learn to build modern websites and web applications.

+
+
+ Course 2 +

Data Science

+

Master data analysis and machine learning.

+
+
+ Course 3 +

Graphic Design

+

Create stunning visuals and designs.

+
+
+
+
+ + +
+
+

About Us

+

We are a leading online education platform offering high-quality courses in various fields. Our mission is to make education accessible to everyone.

+ Instructor +
+
+ + +
+
+

Contact Us

+
+ + + + +
+
+
+ + + + + + + \ No newline at end of file diff --git a/OnlineCoursesPlatform/arpitavbhosale/script.js b/OnlineCoursesPlatform/arpitavbhosale/script.js new file mode 100644 index 000000000..ff66b0cdc --- /dev/null +++ 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: "", + }) + .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 new file mode 100644 index 000000000..2c73a0a58 --- /dev/null +++ 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) + ); +}); diff --git a/OnlineCoursesPlatform/arpitavbhosale/style.css b/OnlineCoursesPlatform/arpitavbhosale/style.css new file mode 100644 index 000000000..28d592bfa --- /dev/null +++ b/OnlineCoursesPlatform/arpitavbhosale/style.css @@ -0,0 +1,166 @@ +/* General Styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + body { + font-family: Arial, sans-serif; + line-height: 1.6; + } + + .container { + width: 90%; + max-width: 1200px; + margin: 0 auto; + } + + /* Header */ + header { + background-color: #333; + color: #fff; + padding: 10px 0; + } + + header .logo img { + height: 50px; + } + + nav ul { + list-style: none; + display: flex; + } + + nav ul li { + margin-left: 20px; + } + + nav ul li a { + color: #fff; + text-decoration: none; + } + + #menuToggle { + display: none; + background: none; + border: none; + color: #fff; + font-size: 24px; + cursor: pointer; + } + + /* Hero Section */ + .hero { + background: url('images/hero-bg.jpg') no-repeat center center/cover; + color: #fff; + padding: 100px 0; + text-align: center; + } + + .hero h1 { + font-size: 48px; + margin-bottom: 20px; + } + + .hero .btn { + background-color: #ff6f61; + color: #fff; + padding: 10px 20px; + text-decoration: none; + border-radius: 5px; + } + + /* Courses Section */ + .courses { + padding: 50px 0; + } + + .courses h2 { + text-align: center; + margin-bottom: 40px; + } + + .course-list { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + } + + .course-item { + width: 30%; + margin-bottom: 20px; + text-align: center; + } + + .course-item img { + width: 100%; + border-radius: 10px; + } + + /* About Section */ + .about { + padding: 50px 0; + text-align: center; + } + + .about img { + width: 100%; + max-width: 500px; + margin-top: 20px; + } + + /* Contact Section */ + .contact { + padding: 50px 0; + } + + .contact form { + display: flex; + flex-direction: column; + max-width: 500px; + margin: 0 auto; + } + + .contact form input, + .contact form textarea { + margin-bottom: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + } + + .contact form button { + background-color: #333; + color: #fff; + padding: 10px; + border: none; + border-radius: 5px; + cursor: pointer; + } + + /* Footer */ + footer { + background-color: #333; + color: #fff; + text-align: center; + padding: 20px 0; + } + + /* Responsive Styles */ + @media (max-width: 768px) { + nav ul { + display: none; + flex-direction: column; + background-color: #444; + padding: 10px; + } + + #menuToggle { + display: block; + } + + .course-item { + width: 100%; + } + } \ No newline at end of file