add mobile surport2

y2kr · Feb 26, 2025 · f09ee7c · f09ee7c
1 parent b4c84ee
commit f09ee7c
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 10 deletions.
diff --git a/src/modal.js b/src/modal.js
@@ -4,14 +4,81 @@ document.addEventListener('DOMContentLoaded', function () {
   const modalImg = document.getElementById('modalImg');
   const closeBtn = document.querySelector('.close');
 
+  const style = document.createElement('style');
+  style.textContent = `
+    .gallery-image {
+      position: relative;
+    }
+    .gallery-image.loading {
+      min-height: 100px;
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+    .gallery-image.error {
+      border: 1px solid #ff6b6b;
+    }
+    .loading-indicator {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: rgba(0, 0, 0, 0.5);
+      color: white;
+    }
+  `;
+  document.head.appendChild(style);
+
   if (images.length > 0 && modal && modalImg && closeBtn) {
     images.forEach((img) => {
-      img.addEventListener('click', function () {
-        modal.style.display = 'flex';
-        modalImg.src = this.src;
+      img.classList.add('loading');
+
+      const imgLoader = new Image();
+
+      const loadingIndicator = document.createElement('div');
+      loadingIndicator.className = 'loading-indicator';
+      loadingIndicator.textContent = 'Loading...';
+      img.parentNode.style.position = 'relative';
+      img.parentNode.appendChild(loadingIndicator);
+
+      imgLoader.onload = function () {
+        img.classList.remove('loading');
+        if (loadingIndicator.parentNode) {
+          loadingIndicator.parentNode.removeChild(loadingIndicator);
+        }
+      };
 
-        modalImg.style.width = '';
-        modalImg.style.height = '';
+      imgLoader.onerror = function () {
+        console.error(`Failed to load image: ${img.src}`);
+        img.classList.remove('loading');
+        img.classList.add('error');
+
+        setTimeout(() => {
+          const cacheBuster = `?cb=${new Date().getTime()}`;
+          const newSrc = img.src.split('?')[0] + cacheBuster;
+          img.src = newSrc;
+          imgLoader.src = newSrc;
+        }, 500);
+
+        if (loadingIndicator.parentNode) {
+          loadingIndicator.textContent = 'Retrying...';
+        }
+      };
+
+      imgLoader.src = img.src;
+
+      img.addEventListener('click', function () {
+        if (
+          !img.classList.contains('loading') &&
+          !img.classList.contains('error')
+        ) {
+          modal.style.display = 'flex';
+          modalImg.src = this.src;
+          modalImg.style.width = '';
+          modalImg.style.height = '';
+        }
       });
     });
 
@@ -31,7 +98,7 @@ document.addEventListener('DOMContentLoaded', function () {
       }
     });
 
-    console.log('Modal functionality initialized successfully');
+    console.log('Enhanced modal functionality initialized successfully');
   } else {
     console.log('Modal elements not found on this page');
   }

diff --git a/src/style.css b/src/style.css
@@ -29,7 +29,7 @@ body {
   background-color: white;
   border-radius: 50%;
   opacity: 0;
-  transition: opacity 0.3s ease;
+  transition: opacity 0.2s ease;
 }
 
 .star.visible {
@@ -39,7 +39,7 @@ body {
 @keyframes twinkle {
   0%,
   100% {
-    opacity: 0.2;
+    opacity: 0.3;
   }
   50% {
     opacity: 1;
@@ -84,6 +84,8 @@ header {
   margin: 0 auto;
   max-width: 100%;
   padding: 10px 0;
+  line-height: 1.2;
+  transform-origin: top center;
 }
 
 #geo-container {
@@ -342,6 +344,11 @@ header {
     width: 250px;
     height: 250px;
   }
+
+  #ascii-art2 {
+    font-size: 10px;
+    transform: scale(0.9);
+  }
 }
 
 @media only screen and (max-width: 768px) {
@@ -363,6 +370,12 @@ header {
 
   #ascii-art2 {
     font-size: 8px;
+    transform: scale(0.8);
+    margin-bottom: -10px; /* Compensate for empty space after scaling */
+  }
+
+  header {
+    margin-bottom: 0;
   }
 
   #ascii-art2 pre {
@@ -411,7 +424,13 @@ header {
   }
 
   #ascii-art2 {
-    font-size: 6px;
+    font-size: 5px;
+    transform: scale(0.7);
+    margin-bottom: -20px;
+  }
+
+  #ascii-art2 pre {
+    margin: 0;
   }
 
   .project-title {
@@ -449,7 +468,9 @@ header {
   }
 
   #ascii-art2 {
-    font-size: 4px;
+    font-size: 3px;
+    transform: scale(0.6);
+    margin-bottom: -25px;
   }
 
   .stars {