generated from dellevin/template
531 lines
28 KiB
HTML
531 lines
28 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>
|
||
<!-- Three.js 用于星空预览 -->
|
||
<script src="./static/js/three.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");
|
||
@import url("./static/css/galaxy.css");
|
||
</style>
|
||
<title data-i18n="page_title">白荼 - BAITU</title>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- 搜索功能 -->
|
||
<div id="search-overlay" class="search-overlay">
|
||
<div class="search-modal">
|
||
<button class="search-lock-btn" id="search-lock-btn" title="搜索常驻">
|
||
<svg id="lock-icon-open" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
|
||
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
|
||
</svg>
|
||
<svg id="lock-icon-closed" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: none;">
|
||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
|
||
<path d="M7 11V7a5 5 0 0 1 9.9-1"></path>
|
||
</svg>
|
||
</button>
|
||
<div class="search-box">
|
||
<div class="search-engine-selector" id="search-engine-selector">
|
||
<img src="./static/img/search_icon/google.png" alt="Google" id="search-engine-icon" />
|
||
<div class="search-engine-dropdown" id="search-engine-dropdown">
|
||
<div class="engine-option active" data-engine="google" data-icon="./static/img/search_icon/google.png">
|
||
<img src="./static/img/search_icon/google.png" alt="Google" /> Google
|
||
</div>
|
||
<div class="engine-option" data-engine="baidu" data-icon="./static/img/search_icon/baidu.png">
|
||
<img src="./static/img/search_icon/baidu.png" alt="Baidu" /> Baidu
|
||
</div>
|
||
<div class="engine-option" data-engine="duckduckgo" data-icon="./static/img/search_icon/DuckDuckGo.png">
|
||
<img src="./static/img/search_icon/DuckDuckGo.png" alt="DuckDuckGo" /> DuckDuckGo
|
||
</div>
|
||
<div class="engine-option" data-engine="yandex" data-icon="./static/img/search_icon/Yandex.png">
|
||
<img src="./static/img/search_icon/Yandex.png" alt="Yandex" /> Yandex
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<input type="text" id="global-search-input" placeholder="Search..." autocomplete="off" />
|
||
<button id="global-search-btn">搜索</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<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 solid-modal">
|
||
<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>
|
||
<div class="header-controls">
|
||
<div class="mode-switch-container">
|
||
<button id="mode-switch" class="mode-switch-btn" title="切换模式">
|
||
<span class="mode-label active" data-mode="galaxy">星空模式</span>
|
||
<span class="mode-label" data-mode="waterfall">瀑布模式</span>
|
||
</button>
|
||
</div>
|
||
<button id="photo-album-close" class="guestbook-close" title="关闭">×</button>
|
||
</div>
|
||
</div>
|
||
<div class="guestbook-body photo-album-body">
|
||
<!-- 照片网格将在这里动态加载（瀑布模式） -->
|
||
</div>
|
||
<!-- 星空模式画布 -->
|
||
<div id="galaxy-canvas-wrapper" class="galaxy-canvas-wrapper">
|
||
<canvas id="galaxy-canvas"></canvas>
|
||
<div class="galaxy-tip">滚轮缩放 | 拖拽旋转 | 点击星星查看照片</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 完整留言板弹窗（点击后显示） -->
|
||
<div id="guestbook-full-modal" class="guestbook-full-modal">
|
||
<div class="full-modal-content solid-modal">
|
||
<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" onclick="return confirmLink(this.href)">GitHub</a>
|
||
<a href="https://weibo.com/u/6094785109999999999" target="_blank" data-i18n="social_link2"
|
||
data-i18n-attr="href" onclick="return confirmLink(this.href)">微博</a>
|
||
<a href="https://www.zhihu.com/people/bing-xue-chen-xi-59" target="_blank" data-i18n="social_link3"
|
||
data-i18n-attr="href" onclick="return confirmLink(this.href)">知乎</a>
|
||
<a href="https://space.bilibili.com/403551212" target="_blank" data-i18n="social_link4"
|
||
data-i18n-attr="href" onclick="return confirmLink(this.href)">B站</a>
|
||
<a href="https://www.xiaohongshu.com/user/profile/65aabb99000000000e0271f1" target="_blank"
|
||
data-i18n="social_link6"
|
||
data-i18n-attr="href" onclick="return confirmLink(this.href)">小红书</a>
|
||
<a href="https://www.52pojie.cn/home.php?mod=space&uid=2059006" target="_blank"
|
||
data-i18n="social_link5" data-i18n-attr="href" onclick="return confirmLink(this.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" onclick="return confirmLink(this.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 id="custom-confirm-modal" class="custom-confirm-modal">
|
||
<div class="custom-confirm-content">
|
||
<div class="custom-confirm-message"></div>
|
||
<div class="custom-confirm-buttons">
|
||
<button class="confirm-btn-cancel">取消</button>
|
||
<button class="confirm-btn-ok">确定</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MookNote 作品详情弹窗 -->
|
||
<div id="mooknote-modal" class="guestbook-full-modal">
|
||
<div class="full-modal-content solid-modal mooknote-modal-content">
|
||
<div class="guestbook-header">
|
||
<h2>MookNote：为记录而生</h2>
|
||
<button id="mooknote-close" class="guestbook-close" title="关闭">×</button>
|
||
</div>
|
||
<div class="guestbook-body mooknote-body">
|
||
<div class="mooknote-banner-carousel">
|
||
<div class="carousel-container">
|
||
<img src="./static/img/my_work/mooknote/banner.jpg" alt="MookNote Banner" class="carousel-image active" onclick="openMooknoteLightbox(0)">
|
||
<img src="./static/img/my_work/mooknote/1.jpg" alt="MookNote Screenshot 1" class="carousel-image" onclick="openMooknoteLightbox(1)">
|
||
<img src="./static/img/my_work/mooknote/2.jpg" alt="MookNote Screenshot 2" class="carousel-image" onclick="openMooknoteLightbox(2)">
|
||
<img src="./static/img/my_work/mooknote/3.jpg" alt="MookNote Screenshot 3" class="carousel-image" onclick="openMooknoteLightbox(3)">
|
||
<img src="./static/img/my_work/mooknote/4.jpg" alt="MookNote Screenshot 4" class="carousel-image" onclick="openMooknoteLightbox(4)">
|
||
<img src="./static/img/my_work/mooknote/5.jpg" alt="MookNote Screenshot 5" class="carousel-image" onclick="openMooknoteLightbox(5)">
|
||
<img src="./static/img/my_work/mooknote/6.jpg" alt="MookNote Screenshot 6" class="carousel-image" onclick="openMooknoteLightbox(6)">
|
||
</div>
|
||
<button class="carousel-btn carousel-prev" onclick="prevMooknoteImage()">❮</button>
|
||
<button class="carousel-btn carousel-next" onclick="nextMooknoteImage()">❯</button>
|
||
<div class="carousel-indicators"></div>
|
||
</div>
|
||
<div class="mooknote-content">
|
||
<p class="mooknote-intro">一款专注于个人记录的极简工具，让每一份感动与思考都有迹可循。</p>
|
||
<p>在这个信息爆炸的时代，我们每天都在消费大量的内容——看一部电影、读一本书、产生一个灵感。然而，这些内容往往如流水般逝去，留下的只有模糊的记忆。</p>
|
||
<p><strong>MookNote 诞生于对简洁工具的追求。</strong></p>
|
||
<p>我相信，好的工具应该像纸笔一样自然，不打扰思考，只记录生活。它不应该有繁琐的注册流程，不应该将你的数据存储在陌生的服务器上，更不应该用花哨的功能分散你的注意力。</p>
|
||
<p>我厌烦了一款软件让用户不断地注册来注册去，使用手机号验证来验证去，数据不于自己，甚至自己写的笔记也不属于自己，我不喜欢这样，我想一款优秀的软件应该抛去繁杂的设计，就像太极一般的黑白两色。就像专业的人做专业的事情一样，MookNote主打记录生活一切有迹可循的影视娱乐，想法笔记。</p>
|
||
<p>MookNote名字的由来也是让我冥思苦想，Mo取自Movie的前两个字母ok取自book的后两个字母，Note则名为笔记，名字就这么来了。影视，书籍，笔记的三项生活记录，因为热爱，所以记录，因为想法，所以书写。</p>
|
||
<p>目前笔记还处于基础功能的版本，希望各位能多给我提提建议，我也会在其中做一些取舍，能与不能我都会一一记录下来的。在此，希望大家能多多帮助我这一个不知名的小开发者。</p>
|
||
<p class="mooknote-thanks">最后的最后，感谢阿里千问的通义灵码，让我一个小小的java开发者接触到Android开发，帮了我的大忙，帮了我最纯真的梦想。</p>
|
||
<div class="mooknote-download">
|
||
<a href="https://mooknote.iletter.top/" target="_blank" class="download-btn" onclick="return confirmLink(this.href)">前往下载 / 了解更多</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MookNote 全屏图片预览 -->
|
||
<div id="mooknote-lightbox" class="photo-lightbox mooknote-lightbox">
|
||
<button class="lightbox-close" onclick="closeMooknoteLightbox()">×</button>
|
||
<button class="lightbox-nav lightbox-prev" onclick="prevLightboxImage()">❮</button>
|
||
<button class="lightbox-nav lightbox-next" onclick="nextLightboxImage()">❯</button>
|
||
<div class="lightbox-counter"></div>
|
||
<img src="" alt="MookNote Fullscreen" class="lightbox-img">
|
||
</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" onclick="return confirmLink(this.href)">冀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>
|
||
// 链接跳转确认函数
|
||
function confirmLink(url) {
|
||
showCustomConfirm(`确定要打开网站吗？\n${url}`, () => {
|
||
window.open(url, '_blank');
|
||
});
|
||
return false; // 阻止默认跳转行为
|
||
}
|
||
|
||
// 自定义确认弹窗
|
||
let confirmCallback = null;
|
||
const customConfirmModal = document.getElementById('custom-confirm-modal');
|
||
const confirmMessage = customConfirmModal.querySelector('.custom-confirm-message');
|
||
const confirmBtnOk = customConfirmModal.querySelector('.confirm-btn-ok');
|
||
const confirmBtnCancel = customConfirmModal.querySelector('.confirm-btn-cancel');
|
||
|
||
function showCustomConfirm(message, onConfirm) {
|
||
confirmMessage.textContent = message;
|
||
confirmCallback = onConfirm;
|
||
customConfirmModal.classList.add('active');
|
||
}
|
||
|
||
function hideCustomConfirm() {
|
||
customConfirmModal.classList.remove('active');
|
||
confirmCallback = null;
|
||
}
|
||
|
||
confirmBtnOk.addEventListener('click', () => {
|
||
if (confirmCallback) {
|
||
confirmCallback();
|
||
}
|
||
hideCustomConfirm();
|
||
});
|
||
|
||
confirmBtnCancel.addEventListener('click', hideCustomConfirm);
|
||
|
||
// 点击背景关闭
|
||
customConfirmModal.addEventListener('click', (e) => {
|
||
if (e.target === customConfirmModal) {
|
||
hideCustomConfirm();
|
||
}
|
||
});
|
||
</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/galaxy.js"></script>
|
||
<script src="./static/js/tabchange.js"></script>
|
||
</body>
|
||
|
||
</html> |