From 329e731f326adc2a95783d364e0c440d9aa7f33b Mon Sep 17 00:00:00 2001
From: hehh <lingtinzhe@icloud.com>
Date: Wed, 16 Jul 2025 15:06:18 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E7=9E=AC=E9=97=B4?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=A8=A1=E6=8B=9F=E5=99=A8=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 PC 端点击瞬间链接时，弹出模拟 iPhone 16 的窗口展示内容- 添加相应的 HTML、CSS 和 JavaScript 代码实现该功能
-优化了用户体验，特别是在大屏幕上查看瞬间内容时
---
 css/style.css | 66 +++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html    | 16 ++++++++++---
 js/main.js    | 35 +++++++++++++++++++++++++++
 3 files changed, 114 insertions(+), 3 deletions(-)

diff --git a/css/style.css b/css/style.css
index 3a59645..db1c4ac 100644
--- a/css/style.css
+++ b/css/style.css
@@ -8058,6 +8058,72 @@ hr {
 .panel-main__content--fixed {
   width: 480px;
   transition: width 1s;
+/* 模拟iPhone 16容器样式 */
+.iphone-simulator {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(40%, -50%);
+  width: 414px; /* iPhone 16 Pro Max宽度 */
+  height: 896px; /* iPhone 16 Pro Max高度 */
+  padding: 40px 20px 20px 20px;
+  background: url('https://cdn.jsdelivr.net/gh/listener-He/images@default/iphone-frame.png') no-repeat center center;
+  background-size: contain;
+  z-index: 9999;
+  display: none;
+}
+
+/* 内部浏览器视图容器 */
+.browser-view {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  overflow: hidden;
+  position: relative;
+}
+
+/* MacBook风格的关闭按钮 */
+.close-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #ff5f56;
+  box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
+  cursor: pointer;
+  z-index: 10000;
+}
+
+/* 遮罩层 */
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: none;
+  z-index: 9998;
+}
+
+@media screen and (max-width: 768px) {
+  .iphone-simulator {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 769px) {
+  .iphone-simulator {
+    display: block;
+  }
+}
+
+.panel {
+  padding: 10px;
+  background: #f2f2f2;
+  border-radius: 5px;
   -webkit-transition: width 1s;
   /* Safari */
 }
diff --git a/index.html b/index.html
index 08b027d..8c352aa 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/js/main.js b/js/main.js
index d8de2f5..2f37856 100644
--- a/js/main.js
+++ b/js/main.js
@@ -88,3 +88,38 @@ $('.btn-mobile-menu__icon').click(function () {
 	}
 	$('.btn-mobile-menu__icon').toggleClass('social iconfont icon-list social iconfont icon-ngleup animated fadeIn');
 });
+
+// 处理瞬间链接点击事件
+$('.moments-link').on('click', function (e) {
+  e.preventDefault(); // 阻止默认跳转
+  
+  // 获取链接地址
+  var url = $(this).attr('href');
+  
+  // 判断是否是移动端
+  var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+  
+  if (isMobile) {
+    // 移动端：直接跳转
+    window.location.href = url;
+  } else {
+    // PC端：在模拟器中显示
+    $('#moment-frame').attr('src', url);
+    $('.iphone-simulator').show();
+    $('.overlay').show();
+  }
+});
+
+// 关闭按钮点击事件
+$('.close-btn').on('click', function () {
+  $('.iphone-simulator').hide();
+  $('.overlay').hide();
+  $('#moment-frame').attr('src', ''); // 清空iframe内容
+});
+
+// 遮罩层点击事件
+$('.overlay').on('click', function () {
+  $(this).hide();
+  $('.iphone-simulator').hide();
+  $('#moment-frame').attr('src', '');
+});