feat: 添加瞬间页面模拟器功能

- 在 PC 端点击瞬间链接时,弹出模拟 iPhone 16 的窗口展示内容- 添加相应的 HTML、CSS 和 JavaScript 代码实现该功能
-优化了用户体验,特别是在大屏幕上查看瞬间内容时
This commit is contained in:
hehh
2025-07-16 15:06:18 +08:00
parent c0aad01d0b
commit 329e731f32
3 changed files with 114 additions and 3 deletions

View File

@@ -147,7 +147,7 @@
</a>
</li>
<li class="navigation__item">
<a href="https://moments.hehouhui.cn/"
<a href="https://moments.hehouhui.cn/" class="moments-link"
title="瞬间" target="_blank">
<j class="fa-solid fa-camera"></j>
<span class="label">瞬间</span>
@@ -198,9 +198,19 @@
</p>
</div>
</header>
<!--黑暗主题-->
<!-- 模拟iPhone 16容器 -->
<div class="iphone-simulator">
<div class="browser-view">
<div class="close-btn"></div>
<iframe id="moment-frame" width="100%" height="100%" frameborder="0"></iframe>
</div>
</div>
<!-- 遮罩层 -->
<div class="overlay"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/listener-He/Home/js/jquery.min.js"></script>
<!--黑暗主题-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/listener-He/Home/js/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/listener-He/Home/js/fetch.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/listener-He/Home/js/main.js?version=1"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/listener-He/Home/js/bj.js"></script>