Update

Author: Karniverse

sourcecode/App.svelte

@@ -6,8 +6,8 @@
 </script>
 
 <div>
+	<!-- <Test /> -->
 	<IntroCard />
 	<SearchBox />
 	<Gallery />
-	<!-- <Test /> -->
 </div>

sourcecode/Gallery.svelte

@@ -94,7 +94,16 @@
             imageEntriesData.sort((a, b) => b.date - a.date);
             imageEntries = [...imageEntriesData]; // Update the reactive variable.
         } catch (error) {
-            console.error("Error fetching images:", error);
+            // console.error("Error fetching images:", error);
+            // let errormessage;
+            // if errormessage = "TypeError: NetworkError when attempting to fetch resource."{
+            imageEntries = [];
+            imageEntries.push({
+                thumb: `/error.jpg`,
+                full: `/error.jpg`,
+                //date: dateObj,
+            });
+            //}
         }
     }
 

sourcecode/IntroCard.svelte

@@ -3,23 +3,120 @@
     export let description =
         "I'm KarMukil, this page exclusively showcases my AI art.<br>All wallpapers are free to download";
     // export let imageUrl = "https://via.placeholder.com/300";
+
+    let imagecount = 0;
+
+    window.addEventListener("load", () => {
+        setTimeout(() => {
+            const gallery = document.querySelector(".gallery"); // Select the gallery component
+            if (gallery) {
+                imagecount = gallery.getElementsByTagName("img").length;
+            }
+        }, 1000); // Short delay to ensure external images are counted
+    });
+    export function homepage() {
+        window.location = "https://www.karmukil.in";
+    }
+    //imagecount = [...imagecount];
 </script>
 
 <div class="card">
     <!-- <img class="image" src={imageUrl} alt={title} /> -->
-    <div class="content">
+    <!-- <div class="content">
         <div class="title">{title}</div>
         <div class="description">{@html description}</div>
+    </div> -->
+    <button class="homebtn" on:click={() => homepage()}>
+        <img class="homeimage" src="/home.png" alt="buttonpng" border="0" />
+    </button>
+    <!-- <div class="introimage" style="background-image: url('/header.gif');"> -->
+    <div class="introimage">
+        <img class="headerimg" src="/header.gif" />
     </div>
+    <div class="count">Total Images : {imagecount}</div>
 </div>
 
 <style>
+    .count .introimage {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .count {
+        width: 100%;
+        font-family: "Lucida Sans", Geneva, Verdana, sans-serif;
+        font-size: 1.2rem;
+        font-weight: bold;
+        padding: 10px;
+        text-align: center;
+    }
+
+    .introimage {
+        max-width: 100%;
+        height: auto;
+        border-radius: 12px;
+        overflow: hidden;
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+        padding: 1px;
+        transition: transform 0.2s ease-in-out;
+    }
+    .introimage:hover {
+        transform: scale(1.05);
+    }
+
+    .headerimg {
+        width: 100%;
+        max-width: 100%;
+        height: auto;
+        object-fit: cover;
+    }
+
     .card {
+        display: grid;
+        grid-template-columns: 1fr 2fr 1fr; /* Ensuring exactly 3 columns */
+        justify-content: center;
+        align-items: center;
+        gap: 20px;
+    }
+
+    .homeimage {
+        width: 50px; /* Adjust size */
+        height: 50px;
+        margin: auto;
+        justify-content: center;
+        border-radius: 12px;
+        background-color: white;
+    }
+
+    button:hover {
+        transform: scale(1.25);
+    }
+    .homebtn {
+        width: 4.5vw;
+        margin-left: auto;
+        margin-right: auto;
+        height: auto;
+        border: none;
+        background-color: transparent;
+        transition: transform 0.2s ease-in-out;
+    }
+    /* Responsive adjustments
+        @media (max-width: 1024px) {
+        .gallery img {
+            max-width: calc(33.333% - 10px);
+        }
+    }
+    @media (max-width: 768px) {
+        .gallery img {
+            max-width: calc(50% - 10px);
+        }
+    } */
+    /* .card {
         border-radius: 12px;
         overflow: hidden;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         transition: transform 0.3s ease-in-out;
-        /* background: linear-gradient(135deg, #db7fff, #f5d2ed); */
+        background: linear-gradient(135deg, #db7fff, #f5d2ed);
         background-image: linear-gradient(
             125deg,
             #ce9ffc,
@@ -69,5 +166,5 @@
         100% {
             background-position: 0% 50%;
         }
-    }
+    } */
 </style>