<?php
$data = json_decode(file_get_contents(__DIR__ . '/data.json'), true);
function h($s) { return htmlspecialchars($s, ENT_QUOTES, 'UTF-8'); }
?>
<!--
	HTML Starter Template
	Original Source: https://github.com/AsisYu/html-starter-qwpicu.git
	License: Open Source
	Author: AsisYu
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<title><?= h($data['site_title']) ?></title>
	<meta charset="UTF-8">
	<link rel="icon" href="./favicon.ico">
	<meta http-equiv="Expires" content="0" />
	<meta name='robots' content='index,follow'>
	<meta name='keywords' content='<?= h($data['keywords']) ?>'>
	<meta http-equiv="Pragma" content="no-cache" />
	<meta name='description' content='<?= h($data['meta_description']) ?>'>
	<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
	<?php $v = @filemtime(__DIR__ . '/asset/css/main.css') ?: time(); ?>
	<?php $featureJsV = @filemtime(__DIR__ . '/asset/js/feature.js') ?: time(); ?>
	<?php $mainJsV = @filemtime(__DIR__ . '/asset/js/main.js') ?: time(); ?>
	<link rel="stylesheet" href="asset/css/main.css?v=<?= $v ?>" />
	<link rel="stylesheet" type="text/css" href="asset/css/iconfont.css?v=<?= $v ?>">
	<link rel="stylesheet" type="text/css" href="asset/css/style.css?v=<?= $v ?>">
	<link rel="stylesheet" type="text/css" href="asset/css/fonts.css?v=<?= $v ?>">
	<link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/volantis-x/cdn-fontawesome-pro@master/css/all.min.css" media="all">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
	<?php
	$bgMode      = $data['bg_mode'] ?? 'api';
	$bgApiUrl    = $data['bg_api_url'] ?? 'https://img-api.moeblock.com/api.php';
	$bgCustomUrl = $data['bg_custom_url'] ?? '';
	$titleSuffixMode = $data['title_suffix_mode'] ?? 'random';
	$titleSuffixText = $data['title_suffix_text'] ?? '';
	?>
	<style>
	<?php if ($bgMode === 'custom' && $bgCustomUrl): ?>
	#bg {
		background: #ffffff url("<?= h($bgCustomUrl) ?>") center center !important;
		background-size: cover !important;
		background-repeat: no-repeat !important;
		animation: none !important;
		width: 100% !important;
	}
	<?php elseif ($bgApiUrl !== 'https://img-api.moeblock.com/api.php'): ?>
	#bg {
		background: #ffffff url("<?= h($bgApiUrl) ?>") center left !important;
	}
	<?php endif; ?>
	</style>
	<script>
	window.TITLE_SUFFIX_MODE = <?= json_encode($titleSuffixMode, JSON_UNESCAPED_UNICODE) ?>;
	window.TITLE_SUFFIX_TEXT = <?= json_encode($titleSuffixText, JSON_UNESCAPED_UNICODE) ?>;
	</script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
	<script data-cfasync="false" src="asset/js/feature.js?v=<?= $featureJsV ?>"></script>
	<noscript>
		<link rel="stylesheet" href="asset/css/noscript.css" />
	</noscript>
</head>
<body class="is-preload font-milky-coffee">
	<div id="wrapper">
		<div id="bg"></div>
		<div id="overlay"></div>
		<div id="main">
			<header id="header">
				<div class="panel-main__content">
					<div class="ih-item circle effect right_to_left">
						<a class="blog-button">
							<div class="img"> <img src="<?= h($data['avatar']) ?>" alt="img"
									class="js-avatar iUp profilepic header-logo">
							</div>
							<div class="info iUp">
								<div class="info-back">
									<img alt="img" src="<?= h($data['avatar_back']) ?>" class="js-avatar profilepic">
								</div>
							</div>
						</a>
					</div>
					<h1 class="panel-cover__title panel-title iUp"><?= h($data['title']) ?></h1>
					<p class="panel-cover__subtitle panel-subtitle iUp"><?= h($data['subtitle']) ?></p>
					<canvas class="navigation-wrapper iUp" id="canvas" style="width:50%;padding-top: 15px;padding-right: 20px;" width="920"
						height="350"></canvas>
					<script src="asset/js/clock.js"></script>

					<?php foreach (array_chunk($data['modules'], 4) as $row): ?>
					<div class="pill-buttons-container iUp">
						<?php foreach ($row as $m): ?>
						<a href="<?= h($m['url']) ?>" class="pill-button" target="_blank">
							<div class="pill-button-decor pill-left"></div>
							<div class="pill-button-decor pill-right"></div>
							<span class="pill-button-text"><?= h($m['text']) ?></span>
						</a>
						<?php endforeach; ?>
					</div>
					<?php endforeach; ?>

					<div class="contact-icons-container iUp">
						<?php foreach ($data['contacts'] as $c): ?>
						<a href="<?= h($c['url']) ?>" class="contact-icon<?= !empty($c['qr']) ? ' wechat-icon' : '' ?>" title="<?= h($c['title']) ?>"<?= empty($c['qr']) ? ' target="_blank"' : '' ?>>
							<i class="<?= h($c['icon']) ?>"></i>
							<?php if (!empty($c['qr'])): ?>
							<div class="wechat-qr">
								<img src="<?= h($c['qr']) ?>" alt="<?= h($c['title']) ?>二维码">
							</div>
							<?php endif; ?>
						</a>
						<?php endforeach; ?>
					</div>

					<hr class="iUp" />
					<p id="description" class="panel-cover__description iUp"><?= $data['description_html'] ?></p>
				</div>
			</header>
			<footer id="footer">
				<p>
					<b>&copy; <?= h($data['footer_year_start']) ?> - <script>document.write(new Date().getFullYear());</script><a href="<?= h($data['footer_name_url']) ?>" class="active"><?= h($data['footer_name']) ?></a>
					</b>
					<b>
						<a href="<?= h($data['footer_icp_url']) ?>"><?= h($data['footer_icp']) ?></a>
					</b>
				</p>
			</footer>
		</div>
	</div>
    <script src="https://fastly.jsdelivr.net/npm/sweetalert2@10.15.5/dist/sweetalert2.all.min.js"></script>
    <script type="text/javascript" src="asset/js/jquery.min.js"></script>
    <script type="text/javascript" src="asset/js/fetch.min.js"></script>
    <script type="text/javascript" src="asset/js/main.js?v=<?= $mainJsV ?>"></script>
</body>
</html>
