<?php
echo 123;die;
init();
?>

<!doctype html>
<html>

<head>
    <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" /> -->
    <title><?php echo get_page_title(); ?></title>
    <link rel="stylesheet" href="/css/style.css">
</head>

<body class="" style="background-color: #fafaf9;">

    <div class="w-full flex justify-center">
        <div class="flex h-12 p-3 w-[1080px] justify-center font-thin">

            <!-- <div class="flex text-xl">
                Logo
            </div> -->

            <div class="flex space-x-5 text-xl px-5">
                <div>
                    <a href="/" class="<?php if ($_SERVER["REQUEST_URI"] == "/index") echo "text-red-300"; ?>">Home</a>
                </div>
                <div>
                    <a href="/about" class="<?php if ($_SERVER["REQUEST_URI"] == "/about") echo "text-red-300"; ?>">About</a>
                </div>
            </div>

        </div>
    </div>

    <div class="w-full flex justify-center">
        <div class="flex justify-center w-[1080px]">

            <div class="p-2 md:p-3 w-full">
                <div class="md:h-[50px] h-[10px]"></div>
                <?php show_page(); ?>
                <div class="md:h-[100px] h-[20px]"></div>
            </div>
        </div>
    </div>


</body>

</html>


<?php
// page func start

function show_index()
{
    $imgUrl1 = "/img/2.jpg";
    $imgUrl2 = "/img/1.jpg";
    $imgUrl3 = "/img/3.jpg";
    ob_start(); ?>

    <?php
    $list = [$imgUrl1, $imgUrl2, $imgUrl3]
    ?>

    <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="/">
                    <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>

    <script>
        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();
    ob_clean();
    echo $html;
}

?>

<?php function show_about()
{
    ob_start(); ?>

    <div class="">
        <p class="text-2xl">
            this is about
        </p>
    </div>


<?php
    $html = ob_get_contents();
    ob_clean();
    echo $html;
}

?>

<?php function show_404()
{
    ob_start(); ?>

    <div class="">
        404 NOT FOUND
    </div>


<?php
    $html = ob_get_contents();
    ob_clean();
    echo $html;
}

// page func end
?>


<?php
// api func start
function check_api()
{
    $uri = $_SERVER["REQUEST_URI"];
    $func = ltrim(implode("_", explode("/", $uri)), "_");
    if (str_starts_with($uri, "/api")) {
        if (!function_exists($func)) echo_json([
            "code" => 1,
            "msg" => "uri错误",
            "data" => []
        ]);

        call_user_func($func);
    }
}

function echo_json($data)
{
    header('Content-Type: application/json; charset=utf-8');
    echo json_encode($data, JSON_UNESCAPED_UNICODE);
    die;
}

function api_test()
{
    echo_json([
        "code" => 0,
        "msg" => "test",
        "data" => []
    ]);
}

// api func end
?>


<?php
// common func start
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();
}

function get_page_title()
{
    $uri = $_SERVER['REQUEST_URI'];
    $pages = json_decode(file_get_contents(CONFIG_PATH . "page.json"), true);
    return $pages[$uri]["title"] ?? "404 NOT FOUND";
}

function show_page()
{
    $uri = $_SERVER["REQUEST_URI"];
    $func = ltrim(implode("_", explode("/", $uri)), "_");

    if (function_exists("show_{$func}")) {
        call_user_func("show_{$func}");
    } else {
        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
?>