249 lines
5.7 KiB
PHP
249 lines
5.7 KiB
PHP
<?php
|
|
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
|
|
?>
|