update

public/index.php

@@ -9,7 +9,7 @@ init();
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="shortcut icon" href="/favicon.ico" />
+    <!-- <link rel="shortcut icon" href="/favicon.ico" /> -->
     <title><?php echo get_page_title(); ?></title>
     <link rel="stylesheet" href="/css/style.css">
 </head>
@@ -25,10 +25,10 @@ init();
 
             <div class="flex space-x-5 text-xl px-5">
                 <div>
-                    <a href="/">Home</a>
+                    <a href="/" class="<?php if ($_SERVER["REQUEST_URI"] == "/index") echo "text-red-300"; ?>">Home</a>
                 </div>
                 <div>
-                    <a href="/about">About</a>
+                    <a href="/about" class="<?php if ($_SERVER["REQUEST_URI"] == "/about") echo "text-red-300"; ?>">About</a>
                 </div>
             </div>
 
@@ -57,23 +57,42 @@ init();
 
 function show_index()
 {
+    $imgUrl1 = "/img/2.jpg";
+    $imgUrl2 = "/img/1.jpg";
+    $imgUrl3 = "/img/3.jpg";
     ob_start(); ?>
 
     <?php
-    $list = [1, 2, 3]
+    $list = [$imgUrl1, $imgUrl2, $imgUrl3]
-
     ?>
 
-    <div class="flex flex-col md:space-y-10 space-y-5">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-3">
 
         <?php foreach ($list as $row) { ?>
+            <div class="bg-red-50 md:h-[260px] h-[180px] w-full rounded-xl border-red-100 border-1">
                 <a href="/">
-                <div class="bg-red-50 md:h-[300px] h-[180px] w-full rounded-md border-dark-100 border-2">
+                    <img id="image" class="image object-cover h-full w-full rounded-xl" src="<?php echo create_blurred_resized_image(PUBLIC_PATH . $row, 10, 10); ?>" alt="" orgSrc="<?php echo $row ?>">
+                </a>
+            </div>
+
+        <?php } ?>
+
 
     </div>
-            </a>
+
-        <?php } ?>
+    <script>
-    </div>
+        const images = document.getElementsByClassName('image');
+
+        for (var i = 0; i < images.length; i++) {
+            const originalImageUrl = images[i].getAttribute("orgSrc");
+            const img = images[i];
+            const onLoadHandler = () => {
+                img.removeEventListener('load', onLoadHandler);
+                img.src = originalImageUrl;
+            };
+            images[i].addEventListener('load', onLoadHandler);
+        }
+    </script>
 
 <?php
     $html = ob_get_contents();
@@ -164,6 +183,7 @@ function init()
 {
     define("BASE_PATH", __DIR__ . "/../");
     define("CONFIG_PATH", BASE_PATH . "/./config/");
+    define("PUBLIC_PATH", BASE_PATH . "/./public/");
     empty($_SERVER['REQUEST_URI']) || $_SERVER['REQUEST_URI'] == "/" && $_SERVER['REQUEST_URI'] = "/index";
 
     check_api();
@@ -187,6 +207,43 @@ function show_page()
         call_user_func("show_404");
     }
 }
+function create_blurred_resized_image($source_image_path, $width, $height)
+{
+    $image = imagecreatefromjpeg($source_image_path);
+    $originalWidth = imagesx($image);
+    $originalHeight = imagesy($image);
+
+    // 计算缩放比例
+    $ratio = min($width / $originalWidth, $height / $originalHeight);
+
+    // 计算缩放后的尺寸
+    $newWidth = intval($originalWidth * $ratio);
+    $newHeight = intval($originalHeight * $ratio);
+
+    // 创建一个新的空白画布
+    $resizedImage = imagecreatetruecolor($newWidth, $newHeight);
+
+    // 将原始图片缩放并复制到新画布
+    imagecopyresampled($resizedImage, $image, 0, 0, 0, 0, $newWidth, $newHeight, $originalWidth, $originalHeight);
+
+    // 模糊程度
+    $blurFactor = 15;
+
+    // 使用 imagefilter 函数实现模糊效果
+    for ($i = 0; $i < $blurFactor; $i++) {
+        imagefilter($resizedImage, IMG_FILTER_GAUSSIAN_BLUR);
+    }
+
+    // 将模糊后的图片转换为 base64
+    ob_start();
+    imagejpeg($resizedImage);
+    $contents = ob_get_contents();
+    ob_end_clean();
+    imagedestroy($image);
+    imagedestroy($resizedImage);
+
+    return 'data:image/jpeg;base64,' . base64_encode($contents);
+}
 
 // common func end
 ?>