From 65e1511e0af76be1e3b39d9fa2c5ed4e4ede5c29 Mon Sep 17 00:00:00 2001
From: Aryan Gupta <aryang60923@gmail.com>
Date: Sat, 26 Oct 2024 18:52:44 +0530
Subject: [PATCH 1/2] Added skeleton screen loading for home page

---
 index.html | 38 ++++++++++++++++++++++++++++++++++
 style.css  | 60 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 97 insertions(+), 1 deletion(-)
diff --git a/index.html b/index.html
index b9759c0..ca7bb27 100644
--- a/index.html
+++ b/index.html
@@ -58,6 +58,44 @@
 <link rel="stylesheet" href="registor_btn.css" />
 
 <body>
+  <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SkillWise Homepage</title>
+    <link rel="stylesheet" href="style.css"> <!-- Link to your CSS file -->
+</head>
+<body>
+
+<!-- Skeleton loader section -->
+<div class="skeleton-loader">
+    <div class="skeleton skeleton-text"></div>
+    <div class="skeleton skeleton-text short"></div>
+    <div class="skeleton skeleton-image"></div>
+    <div class="skeleton skeleton-card"></div>
+</div>
+
+<!-- Actual content, initially hidden -->
+<div class="content" style="display: none;">
+    <h1>Welcome to SkillWise!</h1>
+    <p>This is the actual content that will appear after loading.</p>
+    <img src="path/to/image.jpg" alt="SkillWise image">
+</div>
+
+<script>
+    // Simulate loading time, toggle skeleton and content visibility
+    document.addEventListener("DOMContentLoaded", () => {
+        setTimeout(() => {
+            document.querySelector('.skeleton-loader').style.display = 'none';
+            document.querySelector('.content').style.display = 'block';
+        }, 2000); // Adjust delay based on loading time
+    });
+</script>
+
+</body>
+</html>
+
 
   <!--
     - PRELOADER
diff --git a/style.css b/style.css
index 52a7261..b113e7b 100644
--- a/style.css
+++ b/style.css
@@ -237,4 +237,62 @@
   background-color: rgba(0, 0, 0, 0.977);
   transform: scale(1.3);
   color: white;
-}
\ No newline at end of file
+}
+/* Basic styles for the skeleton loader */
+.skeleton-loader {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 2rem;
+}
+
+.skeleton {
+  background-color: #e0e0e0;
+  position: relative;
+  overflow: hidden;
+  border-radius: 4px;
+}
+
+/* Different skeleton shapes */
+.skeleton-text {
+  width: 100%;
+  height: 16px;
+}
+
+.skeleton-text.short {
+  width: 60%;
+}
+
+.skeleton-image {
+  width: 100%;
+  height: 200px;
+  border-radius: 8px;
+}
+
+.skeleton-card {
+  width: 100%;
+  height: 150px;
+  border-radius: 8px;
+}
+
+/* Shimmer animation for loading effect */
+.skeleton::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -150px;
+  height: 100%;
+  width: 150px;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+  animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
+/* Style for the actual content (hidden initially) */
+.content {
+  padding: 2rem;
+}

From cabf83cff870a7d4b4323106615d58d8e04143c3 Mon Sep 17 00:00:00 2001
From: Aryan Gupta <aryang60923@gmail.com>
Date: Thu, 31 Oct 2024 14:26:58 +0530
Subject: [PATCH 2/2] feat: Add skeleton loading screen in home page

---
 assets/css/style.css | 53 +++++++++++++++++++++++++++++++++
 index.html           | 70 ++++++++++++++++++--------------------------
 2 files changed, 82 insertions(+), 41 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index f0ca458..ef582bd 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -2376,3 +2376,56 @@ body {
   }
 }
   
+.skeleton {
+  background-color: #e0e0e0;
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Hero section */
+.skeleton-hero {
+  width: 100%;
+  height: 250px;
+  margin-bottom: 1.5rem;
+}
+
+/* Category cards */
+.skeleton-category-section {
+  display: flex;
+  gap: 1rem;
+}
+.skeleton-category {
+  width: 30%;
+  height: 100px;
+}
+
+/* Featured courses */
+.skeleton-courses-section {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+.skeleton-course {
+  width: 48%;
+  height: 150px;
+  margin-bottom: 1rem;
+}
+
+/* Loading animation */
+.skeleton::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+  0% { left: -100%; }
+  100% { left: 100%; }
+}
+
diff --git a/index.html b/index.html
index d841930..2b8d35c 100644
--- a/index.html
+++ b/index.html
@@ -57,53 +57,32 @@
 <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
 <link rel="stylesheet" href="registor_btn.css" />
 
-<body>
-  <!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SkillWise Homepage</title>
-    <link rel="stylesheet" href="style.css"> <!-- Link to your CSS file -->
-</head>
 <body>
 
-<!-- Skeleton loader section -->
-<div class="skeleton-loader">
-    <div class="skeleton skeleton-text"></div>
-    <div class="skeleton skeleton-text short"></div>
-    <div class="skeleton skeleton-image"></div>
-    <div class="skeleton skeleton-card"></div>
-</div>
+  <div id="skeleton-loader" style="display: flex; flex-direction: column; gap: 1rem; padding: 1rem;">
+    <!-- Hero Section Placeholder -->
+    <div class="skeleton skeleton-hero"></div>
+    
+    <!-- Category Cards Placeholder -->
+    <div class="skeleton-category-section">
+        <div class="skeleton skeleton-category"></div>
+        <div class="skeleton skeleton-category"></div>
+        <div class="skeleton skeleton-category"></div>
+    </div>
 
-<!-- Actual content, initially hidden -->
-<div class="content" style="display: none;">
-    <h1>Welcome to SkillWise!</h1>
-    <p>This is the actual content that will appear after loading.</p>
-    <img src="path/to/image.jpg" alt="SkillWise image">
+    <!-- Featured Courses Placeholder -->
+    <div class="skeleton-courses-section">
+        <div class="skeleton skeleton-course"></div>
+        <div class="skeleton skeleton-course"></div>
+        <div class="skeleton skeleton-course"></div>
+    </div>
 </div>
 
-<script>
-    // Simulate loading time, toggle skeleton and content visibility
-    document.addEventListener("DOMContentLoaded", () => {
-        setTimeout(() => {
-            document.querySelector('.skeleton-loader').style.display = 'none';
-            document.querySelector('.content').style.display = 'block';
-        }, 2000); // Adjust delay based on loading time
-    });
-</script>
-
-</body>
-</html>
-
+<!-- Main Content -->
+<div id="main-content" style="display: none;">
+ 
 
-  <!--
-    - PRELOADER
-  -->
 
-  <div class="preloader" data-preloader>
-    <div class="circle" data-circle></div>
-  </div>
 
 
 
@@ -1712,7 +1691,7 @@ <h3 class="event-title">Creative Design Thinking</h3>
 
   </footer>
 
-
+</div>
 
    <!--JS for searching courses -->
  <script>
@@ -1802,6 +1781,15 @@ <h3 class="event-title">Creative Design Thinking</h3>
   <!-- Bootstrap JS Bundle (Optional) -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
 
+ <script>
+    window.addEventListener("load", function() {
+      setTimeout(() => {
+          document.getElementById("skeleton-loader").style.display = "none";
+          document.getElementById("main-content").style.display = "block";
+      }, 1000); // 1 second delay
+    });
+  </script> 
+
 </body>
 
 </html>
