完善页脚

css/body.css

@@ -1,6 +1,17 @@
 body {
     margin: 0;
     font-family: "Arial", sans-serif;
+
+    /* 背景图 */
+    background-image: url("../blackboard/.jpg"); /* 图片地址 */
+    background-size: cover;                  /* 自动缩放并裁剪 */
+    background-position: center center;      /* 居中裁剪 */
+    background-repeat: no-repeat;            /* 不重复平铺 */
+
+    /* 铺满整个屏幕 */
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
 }
 
 .main-layout {
@@ -23,7 +34,7 @@ body {
 
 .logo {
     margin-top: 40px;
-    font-size: 32px;
+    font-size: 50px;
 }
 
 .intro a {
@@ -41,3 +52,21 @@ body {
     margin: 10px;
     text-align: center;
 }
+
+/* 全屏按钮样式（仅大屏幕显示） */
+#fullscreen-button {
+    position: absolute;
+    right: 12px;
+    top: 7px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    transition: top 0.3s ease,transform 0.3s ease-in-out, padding 0.3s ease-in-out; /* 平滑放大动画 */
+    transform-origin: center center; /* 确保放大时的中心不变 */
+}
+
+#fullscreen-button:hover {
+    transform: scale(1.20); /* 悬停时上下左右均匀放大 20% */
+}

css/chat.css

@@ -3,11 +3,11 @@
     bottom: 50px;
     left: 0;
     width: 100%;
-    background: #fff;
-    box-shadow: 0 -2px 5px #fff;
+    background: rgba(255, 255, 255, 0); /* 几乎全透明 */
     display: flex;
     flex-direction: column;
     align-items: center;
+    z-index: 5;
 }
 
 .chat-box {
@@ -15,7 +15,9 @@
     min-height: 20px;
     max-height: 50vh;
     overflow-y: auto;
-    background: #f5f5f5;
+    background: rgba(200, 200, 200, 0.1);   /* 淡灰半透明 */
+    backdrop-filter: blur(8px);            /* 背景模糊 */
+    -webkit-backdrop-filter: blur(8px);    /* Safari 兼容 */
     margin-bottom: 10px;
     padding: 10px;
     border-radius: 8px;
@@ -117,7 +119,7 @@ button:hover {
 .typing {
     color: #aaa;
     font-style: italic;
-    animation: blink 1s steps(1) infinite;
+    animation: blink 1.8s infinite;
 }
 
 @keyframes blink {

css/footer.css

@@ -1,16 +1,47 @@
-/* 页脚样式 - 默认 (电脑设备) */
+/* 页脚样式 */
 footer {
     background-color: rgba(51, 51, 51, 0.5); /* 半透明背景 */
     color: white;
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 0px;
+    flex-wrap: wrap; /* 允许多行时自动换行 */
+    padding: 6px 0; /* 增加一定内边距，使高度随内容变化 */
     position: fixed;
     left: 0;
     right: 0;
     bottom: 0;
     font-size: 14px;
-    max-height: 30px;
+    min-height: 20px; /* 保证最低高度 */
+    max-height: 32px; /* 移除高度上限，允许内容扩展 */
     z-index: 2000;
+    text-align: center;
+    line-height: 1.4; /* 行高适配多行文字 */
+}
+
+.footer-content {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: nowrap; /* 默认不换行（PC端） */
+    gap: 8px;
+}
+
+/* 移动端自动换行 */
+@media (max-width: 768px) {
+    .footer-content {
+        flex-direction: column; /* 移动端改为竖向排列 */
+    }
+
+    .line-1 {
+        margin-bottom: -12px;
+    }
+}
+
+.footer-line {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px; /* ✅ 每个元素之间留 4px 间距 */
 }

css/max_width.css

@@ -3,35 +3,44 @@
         flex-direction: column;
     }
 
-    .left-panel, .right-panel {
+    #fullscreen-button {
+        padding-right: 10px;
+        padding-top: 10px;
+    }
+
+    .left-panel {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .right-panel {
         width: 100%;
         display: none;
+        justify-content: center;
+        align-items: center;
     }
 
-    .chat-container {
-        bottom: 0;
+    .switch_button {
+        position: fixed;
+        left: 50%;
+        right: auto;
+        transform: translateX(-50%);
+        bottom: 120px;
+        z-index: 1;
     }
 
-    footer {
-        padding-bottom: 60px;
+    .swbutton {
+        color: black;
+        background-color: rgba(200, 200, 200, 0.2);
+        backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: blur(8px);
+        transition: background-color 1s ease, transform 0.5s ease;
     }
-
-    .mobile-toggle {
-        display: block;
-    }
-
-    .mobile-toggle button {
-        margin: 0 5px;
-        padding: 8px 16px;
-        font-size: 14px;
-        border: none;
-        background-color: #007BFF;
-        color: white;
-        border-radius: 4px;
-        cursor: pointer;
-    }
-
-    .mobile-toggle button:hover {
-        background-color: #0056b3;
+    
+    .swbutton:hover {
+        background-color: rgba(200, 200, 200, 0.3);
+        transform: scale(1.02);  /* 可选的小缩放效果 */
     }
 }

css/svg.css

@@ -0,0 +1,14 @@
+/* PC端设置 */
+#tanChiShe {
+    width: clamp(100px, 40vw, 600px); 
+    height: auto;
+    display: block;
+    margin: 0 auto;
+}
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+    #tanChiShe {
+        width: clamp(100px, 80vw, 600px);
+    }
+}

css/tool_card.css

@@ -0,0 +1,23 @@
+/* 工具卡片 */
+.tool-card {
+    display: flex;
+    border-radius: 12px;
+    background: rgba(200, 200, 200, 0.2);   /* 淡灰半透明 */
+    backdrop-filter: blur(8px);            /* 背景模糊 */
+    -webkit-backdrop-filter: blur(8px);    /* Safari 兼容 */
+    padding: 20px;
+    justify-content: center;
+    transition: transform 0.5s ease, box-shadow 0.5s ease;
+}
+
+/* 工具卡片动画完成状态 */
+.tool-card.animated {
+    opacity: 1;
+    transform: translateY(0); /* 恢复到正常位置 */
+}
+
+/* 工具卡片悬停效果 */
+.tool-card:hover {
+    transform: scale(1.03);
+    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
+}

index.html

@@ -10,42 +10,46 @@
     <link rel="stylesheet" href="css/font.css">
     <link rel="stylesheet" href="css/time.css">
     <link rel="stylesheet" href="css/max_width.css">
+    <link rel="stylesheet" href="css/svg.css">
 </head>
 
 <body>
+    <button id="fullscreen-button" class="fullscreen-btn">
+        <span class="icon"><img src="icon/full.png" width="30px"></span>
+    </button>
+
     <div class="main-layout">
         <!-- 左侧内容 -->
-        <div class="left-panel">
+        <div class="left-panel" id="leftPanel">
             <h1 class="logo">DreamLife</h1>
             <div class="intro">
                 <h3>这是我的网站首页，主页代码正在完善中</h3>
                 <ul>
                     <li>此网站将用于个人经历展示，个人技术分析</li>
-                    <li>目前网站工具箱以基本完善</li>
+                    <li>集成DeepSeek V3-0324-685B模型</li>
                     <li>工具箱网站dreamlife.top/toolbox</li>
                 </ul>
-                <a href="http://dreamlife.top/toolbox/">ToolBox</a>
-                <a href="http://dreamlife.top:8080/">博客|WordPress</a>
-                <a href="http://dreamlife.top:13000/explore/">Gitea</a>
+                <a href="https://dreamlife.top/toolbox/" target="_blank">ToolBox</a>
+                <a href="http://dreamlife.top:8080/" target="_blank">博客|WordPress</a>
+                <a href="https://gitea.dreamlife.top/explore/" target="_blank">Gitea</a>
             </div>
         </div>
 
         <!-- 右侧内容 -->
-        <div class="right-panel">
+        <div class="right-panel" id="rightPanel">
             <div class="datetime">
                 <div id="timeDisplay" class="time">--:--:--</div>
                 <div id="dateDisplay" class="date">加载中...</div>
             </div>
             <div class="future-content">
-                <p>此处预留未来内容</p>
+                <img id="tanChiShe" src="svg/snake-Light.svg" alt="">
             </div>
         </div>
     </div>
 
     <!-- 移动端切换按钮 -->
-    <div class="mobile-toggle">
-        <button onclick="showLeft()">显示左侧</button>
-        <button onclick="showRight()">显示右侧</button>
+    <div class="switch_button">
+        <button onclick="switchPanel()" class="swbutton">Switch</button>
     </div>
 
     <!-- DeepSeek 聊天输入 -->
@@ -60,7 +64,16 @@
       </div>
 
     <footer>
-        <p>&copy; 2025 DreamLife 版权所有</p>
+        <div class="footer-content">
+            <div class="footer-line line-1">
+                <a href="https://gitea.dreamlife.top/DreamLife" target="_blank" style="color: #fff; text-decoration: none;">&copy; 2025 DreamLife 版权所有</a>
+                <a href="https://beian.miit.gov.cn/" target="_blank" style="color: #fff; text-decoration: none;">津ICP备2025038798号</a>
+            </div>
+            <div class="footer-line line-2">
+                <img src="icon/beian.png" width="12" style="margin-right: -4px;">
+                <a href="https://beian.mps.gov.cn/#/query/webSearch?code=12011402001636" rel="noreferrer" target="_blank" style="color: #fff; text-decoration: none;">津公网安备12011402001636号</a>
+            </div>
+        </div>
     </footer>
 
     <script src="javascape/time.js"></script>
@@ -69,6 +82,8 @@
     <script src="javascape/max_width.js"></script>
     <script src="javascape/marked.min.js"></script>
     <script src="javascape/purify.min.js"></script>
+    <script src="javascape/full_button.js"></script>
+    <script src="javascape/switch_interface.js"></script>
 
 </body>
 </html>

javascape/ai_api.js

@@ -1,7 +1,8 @@
 // Ai模型接口
-//const API_KEY = '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';
-const API_KEY = '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';
-const API_URL = 'https://openrouter.ai/api/v1/chat/completions';
+//const API_KEY = 'sk-awyuwanhxstczmftcfcmafqsbfjubjskbquemmccrhxquqen';
+//const API_URL = 'https://api.siliconflow.cn/v1/chat/completions';
+const API_KEY = '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'
+const API_URL = 'https://openrouter.ai/api/v1/chat/completions'
 let messages = [];
 
 // 逐字输出 Markdown 并渲染
@@ -68,8 +69,8 @@ async function sendMessage() {
   chatContainer.scrollTop = chatContainer.scrollHeight;
 
   const payload = {
-    //model: 'deepseek/deepseek-r1:free',
-    model: 'deepseek/deepseek-chat-v3-0324:free',
+    model: 'deepseek/deepseek-chat-v3.1:free',
+    //model: 'tencent/Hunyuan-MT-7B',
     messages: messages
   };
 

javascape/full_button.js

@@ -0,0 +1,48 @@
+// 获取两个全屏按钮
+const fullscreenButton = document.getElementById('fullscreen-button');
+const sidebarFullscreenButton = document.getElementById('sidebar-fullscreen-button');
+
+// 绑定全屏切换事件
+function toggleFullscreen() {
+    if (!document.fullscreenElement) {
+        if (document.documentElement.requestFullscreen) {
+            document.documentElement.requestFullscreen();
+        } else if (document.documentElement.mozRequestFullScreen) {
+            document.documentElement.mozRequestFullScreen();
+        } else if (document.documentElement.webkitRequestFullscreen) {
+            document.documentElement.webkitRequestFullscreen();
+        } else if (document.documentElement.msRequestFullscreen) {
+            document.documentElement.msRequestFullscreen();
+        }
+        updateFullscreenButton(true);
+    } else {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+        } else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+        } else if (document.msExitFullscreen) {
+            document.msExitFullscreen();
+        }
+        updateFullscreenButton(false);
+    }
+}
+
+// 更新按钮文本和图标
+function updateFullscreenButton(isFullscreen) {
+    const buttons = [fullscreenButton, sidebarFullscreenButton];
+    buttons.forEach(button => {
+        if (isFullscreen) {
+            button.querySelector('span').textContent = '退出';
+            button.querySelector('.icon').innerHTML = '<img src="./icon/off.png" width="30px">'; // 退出全屏图标
+        } else {
+            button.querySelector('span').textContent = '全屏';
+            button.querySelector('.icon').innerHTML = '<img src="./icon/full.png" width="30px">'; // 全屏图标
+        }
+    });
+}
+
+// 绑定点击事件
+fullscreenButton.addEventListener('click', toggleFullscreen);
+sidebarFullscreenButton.addEventListener('click', toggleFullscreen);

javascape/switch_interface.js

@@ -0,0 +1,13 @@
+const Panel_left = document.getElementById('leftPanel');
+const Panel_right = document.getElementById('rightPanel');
+
+function switchPanel() {
+    if (Panel_right.style.display === 'none' || Panel_right.style.display === '') {
+        Panel_left.style.display = 'none';
+        Panel_right.style.display = 'flex';
+    }
+    else {
+        Panel_left.style.display = 'flex';
+        Panel_right.style.display = 'none';
+    }
+}