Compare commits
No commits in common. "main" and "test" have entirely different histories.
Binary file not shown.
|
Before Width: | Height: | Size: 373 KiB |
31
css/body.css
31
css/body.css
@ -1,17 +1,6 @@
|
||||
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 {
|
||||
@ -34,7 +23,7 @@ body {
|
||||
|
||||
.logo {
|
||||
margin-top: 40px;
|
||||
font-size: 50px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.intro a {
|
||||
@ -52,21 +41,3 @@ 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% */
|
||||
}
|
||||
10
css/chat.css
10
css/chat.css
@ -3,11 +3,11 @@
|
||||
bottom: 50px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0); /* 几乎全透明 */
|
||||
background: #fff;
|
||||
box-shadow: 0 -2px 5px #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
@ -15,9 +15,7 @@
|
||||
min-height: 20px;
|
||||
max-height: 50vh;
|
||||
overflow-y: auto;
|
||||
background: rgba(200, 200, 200, 0.1); /* 淡灰半透明 */
|
||||
backdrop-filter: blur(8px); /* 背景模糊 */
|
||||
-webkit-backdrop-filter: blur(8px); /* Safari 兼容 */
|
||||
background: #f5f5f5;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
@ -119,7 +117,7 @@ button:hover {
|
||||
.typing {
|
||||
color: #aaa;
|
||||
font-style: italic;
|
||||
animation: blink 1.8s infinite;
|
||||
animation: blink 1s steps(1) infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
|
||||
@ -1,47 +1,16 @@
|
||||
/* 页脚样式 */
|
||||
/* 页脚样式 - 默认 (电脑设备) */
|
||||
footer {
|
||||
background-color: rgba(51, 51, 51, 0.5); /* 半透明背景 */
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap; /* 允许多行时自动换行 */
|
||||
padding: 6px 0; /* 增加一定内边距，使高度随内容变化 */
|
||||
padding: 0px;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
font-size: 14px;
|
||||
min-height: 20px; /* 保证最低高度 */
|
||||
max-height: 32px; /* 移除高度上限，允许内容扩展 */
|
||||
max-height: 30px;
|
||||
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 间距 */
|
||||
}
|
||||
|
||||
@ -3,44 +3,35 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#fullscreen-button {
|
||||
padding-right: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
.left-panel, .right-panel {
|
||||
width: 100%;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.switch_button {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
right: auto;
|
||||
transform: translateX(-50%);
|
||||
bottom: 120px;
|
||||
z-index: 1;
|
||||
.chat-container {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
footer {
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.swbutton:hover {
|
||||
background-color: rgba(200, 200, 200, 0.3);
|
||||
transform: scale(1.02); /* 可选的小缩放效果 */
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
14
css/svg.css
14
css/svg.css
@ -1,14 +0,0 @@
|
||||
/* PC端设置 */
|
||||
#tanChiShe {
|
||||
width: clamp(100px, 40vw, 600px);
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 移动端适配 */
|
||||
@media (max-width: 768px) {
|
||||
#tanChiShe {
|
||||
width: clamp(100px, 80vw, 600px);
|
||||
}
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
/* 工具卡片 */
|
||||
.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);
|
||||
}
|
||||
BIN
icon/beian.png
BIN
icon/beian.png
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
BIN
icon/favicon.ico
BIN
icon/favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
BIN
icon/full.png
BIN
icon/full.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
BIN
icon/off.png
BIN
icon/off.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
37
index.html
37
index.html
@ -10,46 +10,42 @@
|
||||
<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" id="leftPanel">
|
||||
<div class="left-panel">
|
||||
<h1 class="logo">DreamLife</h1>
|
||||
<div class="intro">
|
||||
<h3>这是我的网站首页，主页代码正在完善中</h3>
|
||||
<ul>
|
||||
<li>此网站将用于个人经历展示，个人技术分析</li>
|
||||
<li>集成DeepSeek V3-0324-685B模型</li>
|
||||
<li>目前网站工具箱以基本完善</li>
|
||||
<li>工具箱网站dreamlife.top/toolbox</li>
|
||||
</ul>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧内容 -->
|
||||
<div class="right-panel" id="rightPanel">
|
||||
<div class="right-panel">
|
||||
<div class="datetime">
|
||||
<div id="timeDisplay" class="time">--:--:--</div>
|
||||
<div id="dateDisplay" class="date">加载中...</div>
|
||||
</div>
|
||||
<div class="future-content">
|
||||
<img id="tanChiShe" src="svg/snake-Light.svg" alt="">
|
||||
<p>此处预留未来内容</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 移动端切换按钮 -->
|
||||
<div class="switch_button">
|
||||
<button onclick="switchPanel()" class="swbutton">Switch</button>
|
||||
<div class="mobile-toggle">
|
||||
<button onclick="showLeft()">显示左侧</button>
|
||||
<button onclick="showRight()">显示右侧</button>
|
||||
</div>
|
||||
|
||||
<!-- DeepSeek 聊天输入 -->
|
||||
@ -64,16 +60,7 @@
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<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;">© 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>
|
||||
<p>© 2025 DreamLife 版权所有</p>
|
||||
</footer>
|
||||
|
||||
<script src="javascape/time.js"></script>
|
||||
@ -82,8 +69,6 @@
|
||||
<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>
|
||||
@ -1,8 +1,7 @@
|
||||
// Ai模型接口
|
||||
//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'
|
||||
//const API_KEY = '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';
|
||||
const API_KEY = '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';
|
||||
const API_URL = 'https://openrouter.ai/api/v1/chat/completions';
|
||||
let messages = [];
|
||||
|
||||
// 逐字输出 Markdown 并渲染
|
||||
@ -69,8 +68,8 @@ async function sendMessage() {
|
||||
chatContainer.scrollTop = chatContainer.scrollHeight;
|
||||
|
||||
const payload = {
|
||||
model: 'deepseek/deepseek-chat-v3.1:free',
|
||||
//model: 'tencent/Hunyuan-MT-7B',
|
||||
//model: 'deepseek/deepseek-r1:free',
|
||||
model: 'deepseek/deepseek-chat-v3-0324:free',
|
||||
messages: messages
|
||||
};
|
||||
|
||||
|
||||
@ -1,48 +0,0 @@
|
||||
// 获取两个全屏按钮
|
||||
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);
|
||||
@ -1,13 +0,0 @@
|
||||
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';
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 75 KiB |
Loading…
x
Reference in New Issue
Block a user