feat: Enhance image gallery with modal functionality and improved styles in index.html

Author: Michaelwucoc

waimai/index.html

@@ -61,13 +61,72 @@
             padding: 30px;
             box-shadow: 0 8px 32px rgba(0,0,0,0.1);
             backdrop-filter: blur(10px);
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 20px;
         }
 
         .trophy-image {
-            max-width: 100%;
-            height: auto;
+            width: 200px;
+            height: 200px;
+            object-fit: cover;
             border-radius: 15px;
             box-shadow: 0 8px 25px rgba(0,0,0,0.2);
+            cursor: pointer;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        .trophy-image:hover {
+            transform: scale(1.05);
+            box-shadow: 0 12px 30px rgba(0,0,0,0.3);
+        }
+
+        /* 模态框样式 */
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0,0,0,0.8);
+            backdrop-filter: blur(5px);
+        }
+
+        .modal-content {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            max-width: 90%;
+            max-height: 90%;
+            border-radius: 15px;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
+        }
+
+        .modal-image {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            border-radius: 15px;
+        }
+
+        .close {
+            position: absolute;
+            top: 15px;
+            right: 25px;
+            color: white;
+            font-size: 35px;
+            font-weight: bold;
+            cursor: pointer;
+            z-index: 1001;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+        }
+
+        .close:hover {
+            color: #ff6b6b;
         }
 
         .contribute-section {
@@ -111,6 +170,27 @@
                 padding: 12px 24px;
                 font-size: 1rem;
             }
+
+            .trophy-image {
+                width: 150px;
+                height: 150px;
+            }
+
+            .image-section {
+                gap: 15px;
+                padding: 20px;
+            }
+
+            .modal-content {
+                max-width: 95%;
+                max-height: 95%;
+            }
+
+            .close {
+                font-size: 30px;
+                top: 10px;
+                right: 20px;
+            }
         }
     </style>
 </head>
@@ -134,12 +214,20 @@ <h2>自2025/09/01起</h2>
         </div>
 <br><br><br>
         <div class="image-section"><!--PR请在项目添加png然后按照格式命名引用-->
-            <img src="oops1.png" alt="外卖被收走现场" class="trophy-image">
-            <img src="oops2.png" alt="外卖被收走现场" class="trophy-image">
-            <img src="oops3.png" alt="外卖被收走现场" class="trophy-image">
+            <img src="oops1.png" alt="外卖被收走现场" class="trophy-image" onclick="openModal(this)">
+            <img src="oops2.png" alt="外卖被收走现场" class="trophy-image" onclick="openModal(this)">
+            <img src="oops3.png" alt="外卖被收走现场" class="trophy-image" onclick="openModal(this)">
         </div><!--PR请在项目添加png然后按照格式命名引用-->
     </div>
 
+    <!-- 模态框 -->
+    <div id="imageModal" class="modal">
+        <span class="close" onclick="closeModal()">&times;</span>
+        <div class="modal-content">
+            <img id="modalImage" class="modal-image" src="" alt="">
+        </div>
+    </div>
+
     <script>
         // 随机标题数组
         const titles = [
@@ -154,6 +242,41 @@ <h2>自2025/09/01起</h2>
             document.getElementById('random-title').textContent = titles[randomIndex];
         }
 
+        // 打开模态框
+        function openModal(img) {
+            const modal = document.getElementById('imageModal');
+            const modalImg = document.getElementById('modalImage');
+            modal.style.display = 'block';
+            modalImg.src = img.src;
+            modalImg.alt = img.alt;
+            
+            // 防止背景滚动
+            document.body.style.overflow = 'hidden';
+        }
+
+        // 关闭模态框
+        function closeModal() {
+            const modal = document.getElementById('imageModal');
+            modal.style.display = 'none';
+            
+            // 恢复背景滚动
+            document.body.style.overflow = 'auto';
+        }
+
+        // 点击模态框背景关闭
+        document.getElementById('imageModal').addEventListener('click', function(e) {
+            if (e.target === this) {
+                closeModal();
+            }
+        });
+
+        // ESC键关闭模态框
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape') {
+                closeModal();
+            }
+        });
+
         // 页面加载时设置随机标题
         document.addEventListener('DOMContentLoaded', function() {
             setRandomTitle();