generated from dellevin/template
370 lines
17 KiB
HTML
370 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="95后，全干开发者">
|
||
<meta name="keywords" content="Java,Spring,个人博客，微信小程序，博客，技术文章，编程，开发者，白荼，Del Levin">
|
||
<link rel="shortcut icon" href="./favicon.ico">
|
||
<script type="text/javascript">
|
||
if (!!window.ActiveXObject || "ActiveXObject" in window) { //is IE?
|
||
alert('朋友，上古浏览器不支持呢～');
|
||
}
|
||
</script>
|
||
<!-- 今日诗词 -->
|
||
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
|
||
<!-- 百度统计 -->
|
||
<script>
|
||
var _hmt = _hmt || [];
|
||
(function () {
|
||
var hm = document.createElement("script");
|
||
hm.src = "https://hm.baidu.com/hm.js?d82271fd27b69793bf97f088c0a87fd4";
|
||
var s = document.getElementsByTagName("script")[0];
|
||
s.parentNode.insertBefore(hm, s);
|
||
})();
|
||
</script>
|
||
<!-- umami统计 -->
|
||
<!-- <script defer src="https://umami.iletter.top/anyjs" data-website-id="ae6cd64c-5900-49c9-9c22-95cedc24a508"></script> -->
|
||
<!-- ECharts 库 -->
|
||
<script src="./static/js/echarts/echarts.min.js"></script>
|
||
<!-- 多语言 -->
|
||
<script src="./static/js/language/zh.js"></script>
|
||
<script src="./static/js/language/en.js"></script>
|
||
<script src="./static/js/axios.min.js"></script>
|
||
<style>
|
||
@import url("./static/css/main.css");
|
||
@import url("./static/css/memos.css");
|
||
@import url("./static/css/game_dialog.css");
|
||
@import url("./static/css/guestbook.css");
|
||
</style>
|
||
<title data-i18n="page_title">白荼 - BAITU</title>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="letter-container">
|
||
<!-- 语言切换按钮 -->
|
||
<div class="lang-switch-container">
|
||
<img id="lang-switch-btn" src="./static/img/中文.png" alt="Switch Language" title="切换语言" />
|
||
</div>
|
||
|
||
<!-- 留言板按钮 -->
|
||
<div class="guestbook-btn-container">
|
||
<button id="guestbook-btn" class="guestbook-btn" title="留言板">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M21 15C21 15.5304 20.7893 16.0391 20.4142 16.4142C20.0391 16.7893 19.5304 17 19 17H7L3 21V7C3 6.46957 3.21071 5.96086 3.58579 5.58579C3.96086 5.21071 4.46957 5 5 5H19C19.5304 5 20.0391 5.21071 20.4142 5.58579C20.7893 5.96086 21 6.46957 21 7V15Z"
|
||
stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
<span class="btn-label" data-i18n="btn_guestbook">留言板</span>
|
||
</button>
|
||
|
||
<!-- Hover 浮动预览面板 -->
|
||
<div id="guestbook-preview" class="guestbook-preview">
|
||
<div class="preview-header">
|
||
<h3 data-i18n="guestbook_title">留言板</h3>
|
||
</div>
|
||
<div class="preview-body">
|
||
<!-- 最新留言预览将在这里动态加载 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 博客文章按钮 -->
|
||
<div class="blog-posts-btn-container">
|
||
<button id="blog-posts-btn" class="blog-posts-btn" title="博客文章">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z"
|
||
stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<path d="M14 2V8H20" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<path d="M16 13H8" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<path d="M16 17H8" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<path d="M10 9H8" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
<span class="btn-label" data-i18n="btn_blog_posts">博客文章</span>
|
||
</button>
|
||
|
||
<!-- Hover 浮动预览面板 -->
|
||
<div id="blog-posts-preview" class="blog-posts-preview">
|
||
<div class="preview-header">
|
||
<h3 data-i18n="blog_latest_posts">最新文章</h3>
|
||
</div>
|
||
<div class="preview-body blog-posts-list">
|
||
<!-- 最新文章预览将在这里动态加载 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 完整博客文章弹窗（点击后显示） -->
|
||
<div id="blog-posts-full-modal" class="guestbook-full-modal">
|
||
<div class="full-modal-content">
|
||
<div class="guestbook-header">
|
||
<h2>博客文章</h2>
|
||
<button id="blog-posts-close" class="guestbook-close" title="关闭">×</button>
|
||
</div>
|
||
<div class="guestbook-body">
|
||
<!-- 文章列表将在这里动态加载 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 人生相册按钮 -->
|
||
<div class="photo-album-btn-container">
|
||
<button id="photo-album-btn" class="photo-album-btn" title="人生相册">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" stroke="#666" stroke-width="2"/>
|
||
<circle cx="8.5" cy="8.5" r="1.5" fill="#666"/>
|
||
<path d="M21 15L16 10L5 21" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
<span class="btn-label" data-i18n="btn_photo_album">人生相册</span>
|
||
</button>
|
||
|
||
<!-- Hover 浮动预览面板 -->
|
||
<div id="photo-album-preview" class="photo-album-preview">
|
||
<div class="preview-header">
|
||
<h3 data-i18n="photo_latest_photos">最新照片</h3>
|
||
</div>
|
||
<div class="preview-body photo-album-list">
|
||
<!-- 最新照片预览将在这里动态加载 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 完整人生相册弹窗（点击后显示） -->
|
||
<div id="photo-album-full-modal" class="guestbook-full-modal">
|
||
<div class="full-modal-content">
|
||
<div class="guestbook-header">
|
||
<h2 data-i18n="photo_album_title">人生相册</h2>
|
||
<button id="photo-album-close" class="guestbook-close" title="关闭">×</button>
|
||
</div>
|
||
<div class="guestbook-body photo-album-body">
|
||
<!-- 照片网格将在这里动态加载 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 完整留言板弹窗（点击后显示） -->
|
||
<div id="guestbook-full-modal" class="guestbook-full-modal">
|
||
<div class="full-modal-content">
|
||
<div class="guestbook-header">
|
||
<h2 data-i18n="guestbook_title">留言板</h2>
|
||
<button id="guestbook-close" class="guestbook-close" title="关闭">×</button>
|
||
</div>
|
||
<div class="guestbook-body">
|
||
<!-- 留言列表将在这里动态加载 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 头部导航 -->
|
||
<div class="nav-tabs">
|
||
<div class="nav-tab active" data-tab="about"><span data-i18n="nav_about"></span></div>
|
||
<div class="nav-tab" data-tab="website"><span data-i18n="nav_website"></span></div>
|
||
<div class="nav-tab" data-tab="tools"><span data-i18n="nav_tools"></span></div>
|
||
<div class="nav-tab" data-tab="games"><span data-i18n="nav_games"></span></div>
|
||
<div class="nav-tab" data-tab="footprint"><span data-i18n="nav_footprint"></span></div>
|
||
<div class="nav-tab" data-tab="memos"><span data-i18n="nav_memos"></span></div>
|
||
<div class="nav-tab" data-tab="contact"><span data-i18n="nav_contact"></span></div>
|
||
</div>
|
||
|
||
<!-- 今日诗词 -->
|
||
<div id="jinrishici-sentence">正在加载今日诗词...</div>
|
||
|
||
<!-- 联系我内容 -->
|
||
<div class="tab-content" id="contact-content">
|
||
<div class="content-section">
|
||
<h2 data-i18n="contact_me_h2"></h2>
|
||
<p data-i18n="contact_intro"></p>
|
||
<div class="contact-info">
|
||
<div class="contact-item">
|
||
<span class="contact-label" data-i18n="email_label">邮箱：</span>
|
||
<span>dellevin99@gmail.com</span>
|
||
</div>
|
||
<div class="contact-item">
|
||
<span class="contact-label" data-i18n="wechat_label">微信：</span>
|
||
<span>E-Levin_</span>
|
||
</div>
|
||
<div class="contact-item">
|
||
<span class="contact-label" data-i18n="qq_label">扣扣：</span>
|
||
<span>1754084631</span>
|
||
</div>
|
||
<div class="contact-item">
|
||
<span class="contact-label" data-i18n="address_label">地址：</span>
|
||
<span data-i18n="address_value">山东省·济南市·市中区</span>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 data-i18n="social_media_h3">社交媒体</h3>
|
||
<div class="website-links">
|
||
<a href="https://github.com/dellevin" target="_blank" data-i18n="social_link1"
|
||
data-i18n-attr="href">GitHub</a>
|
||
<a href="https://weibo.com/u/6094785109999999999" target="_blank" data-i18n="social_link2"
|
||
data-i18n-attr="href">微博</a>
|
||
<a href="https://www.zhihu.com/people/bing-xue-chen-xi-59" target="_blank" data-i18n="social_link3"
|
||
data-i18n-attr="href">知乎</a>
|
||
<a href="https://space.bilibili.com/403551212" target="_blank" data-i18n="social_link4"
|
||
data-i18n-attr="href">B站</a>
|
||
<a href="https://www.52pojie.cn/home.php?mod=space&uid=2059006" target="_blank"
|
||
data-i18n="social_link5" data-i18n-attr="href">52pojie</a>
|
||
</div>
|
||
<h3 data-i18n="leave_message_h3">留言</h3>
|
||
<p data-i18n="leave_message_p"><a href="https://blog.iletter.top/401.html" target="_blank"
|
||
data-i18n="leave_message_link" data-i18n-attr="href">点击此链接</a>去我的博客下面给我留言！</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 关于我内容 -->
|
||
<div class="tab-content active" id="about-content">
|
||
<div class="content-section about-me-content">
|
||
<h2 data-i18n="hello"></h2>
|
||
<p data-i18n="greeting"></p>
|
||
<p data-i18n="about_me_p1"></p>
|
||
<p data-i18n="about_me_p2"></p>
|
||
<p data-i18n="about_me_p3"></p>
|
||
<p data-i18n="about_me_p4"></p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 我的网站内容 -->
|
||
<div class="tab-content" id="website-content">
|
||
<div class="content-section">
|
||
<h2 data-i18n="my_website_h2"></h2>
|
||
<div class="website-links" id="dynamic-website-links">
|
||
<div class="memo-loading" data-i18n="loading_website"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 工具内容 -->
|
||
<div class="tab-content" id="tools-content">
|
||
<div class="content-section">
|
||
<h2 data-i18n="my_tools_h2">我的工具</h2>
|
||
<div id="tools-container" class="tools-grid">
|
||
<div class="memo-loading" data-i18n="loading_tools"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 游戏内容 -->
|
||
<div class="tab-content" id="games-content">
|
||
<div class="content-section">
|
||
<h2 data-i18n="my_games_h2">我常玩的游戏</h2>
|
||
<div id="games-container" class="games-grid">
|
||
<div class="memo-loading" data-i18n="loading_games"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 历史足迹 (地图) -->
|
||
<div id="footprint-content" class="tab-content">
|
||
<div class="content-section">
|
||
<h2 data-i18n="footprint_map_h2">历史足迹</h2>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 闲言碎语内容 -->
|
||
<div class="tab-content" id="memos-content">
|
||
<div class="content-section">
|
||
<h2 data-i18n="memos_h2">闲言碎语</h2>
|
||
<div id="memos-container" class="memos-container">
|
||
<div class="memo-loading" data-i18n="loading_memos"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="letter-footer">
|
||
<span data-i18n="footer_text"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部版权信息和网站统计 - 在信纸外部 -->
|
||
<div id="footer-wrap">
|
||
<div class="webinfo">
|
||
<div class="webinfo-item">
|
||
<div class="webinfo-site-uv-name" data-i18n="visitor_count_label"></div>
|
||
<div class="webinfo-site-uv-count" id="site_uv">-</div>
|
||
</div>
|
||
<div class="webinfo-item">
|
||
<div class="webinfo-site-name" data-i18n="visit_count_label"></div>
|
||
<div class="webinfo-site-pv-count" id="site_pv">-</div>
|
||
</div>
|
||
</div>
|
||
<div class="copyright" style="margin-top: 15px;"><a href="http://beian.miit.gov.cn"
|
||
target="_blank">冀ICP备2025122609号</a> ©<span>2024 - 2026</span> <span>Power BY</span> <span>Del
|
||
Levin </span>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="modalOverlay"
|
||
style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1000;cursor: pointer; ">
|
||
<div id="modalContent"
|
||
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
||
background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); text-align: center; cursor: default; ">
|
||
<p>博主是个宅男，还没去过哦～</p>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
// ========== 语言切换逻辑 ==========
|
||
const translations = {
|
||
'zh': translationsZH,
|
||
'en': translationsEN
|
||
};
|
||
if (typeof translations === 'undefined') {
|
||
console.error('Translations file (translations.js) is not loaded!');
|
||
}
|
||
const switchButton = document.getElementById('lang-switch-btn');
|
||
const LANG_KEY = 'preferred_language';
|
||
function switchLanguage() {
|
||
let currentLang = localStorage.getItem(LANG_KEY) || 'zh';
|
||
let newLang = currentLang === 'zh' ? 'en' : 'zh';
|
||
|
||
localStorage.setItem(LANG_KEY, newLang);
|
||
updatePageContent(newLang);
|
||
updateLanguageIcon(newLang);
|
||
document.documentElement.lang = newLang;
|
||
|
||
location.reload();
|
||
}
|
||
function updatePageContent(lang) {
|
||
const elements = document.querySelectorAll('[data-i18n]');
|
||
elements.forEach(element => {
|
||
const key = element.getAttribute('data-i18n');
|
||
const translation = translations[lang][key];
|
||
if (translation !== undefined) {
|
||
element.innerHTML = translation;
|
||
} else {
|
||
console.warn(`Translation key '${key}' not found for language '${lang}'`);
|
||
}
|
||
});
|
||
}
|
||
function updateLanguageIcon(lang) {
|
||
if (lang === 'zh') {
|
||
switchButton.src = './static/img/中文.png';
|
||
switchButton.alt = 'Switch to English';
|
||
switchButton.title = '切换到英文';
|
||
} else {
|
||
switchButton.src = './static/img/英文.png';
|
||
switchButton.alt = 'Switch to Chinese';
|
||
switchButton.title = '切换到中文';
|
||
}
|
||
}
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
const savedLang = localStorage.getItem(LANG_KEY) || 'zh';
|
||
updatePageContent(savedLang);
|
||
updateLanguageIcon(savedLang);
|
||
document.documentElement.lang = savedLang;
|
||
switchButton.addEventListener('click', switchLanguage);
|
||
});
|
||
</script>
|
||
<script src="./static/js/anypage.js"></script>
|
||
<script src="./static/js/game_my.js"></script>
|
||
<script src="./static/js/tools_my.js"></script>
|
||
<script src="./static/js/websites_my.js"></script>
|
||
<script src="./static/js/memos.js"></script>
|
||
<script src="./static/js/map-footprint.js"></script>
|
||
<script src="./static/js/guestbook.js"></script>
|
||
<script src="./static/js/blog_posts.js"></script>
|
||
<script src="./static/js/photo_album.js"></script>
|
||
<script src="./static/js/tabchange.js"></script>
|
||
</body>
|
||
|
||
</html> |