diff --git a/css/body.css b/css/body.css index 285f7e7..87b234e 100644 --- a/css/body.css +++ b/css/body.css @@ -1,49 +1,479 @@ +:root { + --main_text_color: #000000; + --main_bg_color: linear-gradient(50deg, #a2d0ff, #ffffff); + --gradient: linear-gradient(120deg, rgb(133, 62, 255), #f76cc6 30%, rgb(255, 255, 255) 60%); + --purple_text_color: #747bff; + --text_bg_color: rgb(26, 4, 48); + --item_bg_color: rgba(255, 255, 255, 0.35); + --item_hover_color: rgba(255, 255, 255, 0.45); + --card_filter: 20px; + --back_filter: 15px; + --back_filter_color: rgba(255, 255, 255, 0.1); + --fill: #000000; +} + +html[data-theme="Dark"] { + --main_text_color: #fff; + --main_bg_color: linear-gradient(50deg, #1a1a2e, #16213e); + --gradient: linear-gradient(120deg, rgb(133, 62, 255), #f76cc6 30%, rgb(255, 255, 255) 60%); + --purple_text_color: #747bff; + --text_bg_color: rgb(26, 4, 48); + --item_bg_color: rgba(255, 255, 255, 0.18); + --item_hover_color: rgba(255, 255, 255, 0.25); + --card_filter: 20px; + --back_filter: 15px; + --back_filter_color: rgba(0, 0, 0, 0.2); + --fill: #ffffff; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + user-select: none; + transition: background-color 0.2s ease, color 0.2s ease; +} + body { margin: 0; - font-family: "Arial", sans-serif; - - /* 背景图 */ - background-image: url("../blackboard/.jpg"); /* 图片地址 */ - background-size: cover; /* 自动缩放并裁剪 */ - background-position: center center; /* 居中裁剪 */ - background-repeat: no-repeat; /* 不重复平铺 */ - - /* 铺满整个屏幕 */ + font-family: 'Arial', sans-serif; + background: var(--main_bg_color); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + background-attachment: fixed; width: 100vw; - height: 100vh; - overflow: hidden; + min-height: 100vh; + overflow-x: hidden; + color: var(--main_text_color); } .main-layout { display: flex; flex-direction: row; - height: calc(100vh - 100px); - padding-bottom: 100px; + /* 避免 fixed 页脚/聊天区遮挡：用 footer 高度 + 预留区间替代魔法数 */ + height: calc(100vh - (var(--footer-height, 32px) + 68px)); + padding: 60px 20px 20px; + max-width: 1150px; + margin: 0 auto; + width: 100%; + align-items: stretch; + gap: 14px; + /* 允许左右溢出显示，避免 logo 两端被父容器裁切 */ + overflow-x: visible; + overflow-y: hidden; } -.left-panel, .right-panel { - width: 50%; +.left-panel { + flex: 0 0 30%; + width: 30%; display: flex; - justify-content: center; /* 水平居中 */ - align-items: center; /* 垂直居中 */ - flex-direction: column; /* 内容垂直排列 */ - padding: 20px; + justify-content: flex-start; + align-items: center; + flex-direction: column; + padding: 16px 20px; box-sizing: border-box; height: 100%; + overflow-y: auto; + overflow-x: visible; } -.logo { - margin-top: 40px; - font-size: 50px; +.right-panel { + flex: 1; + width: auto; + display: flex; + justify-content: flex-start; + align-items: stretch; + flex-direction: column; + padding: 20px 10px 20px 0; + box-sizing: border-box; + height: 100%; + overflow-y: auto; + padding-bottom: calc(var(--footer-height, 32px) + 120px); } -.intro a { - display: block; - margin: 5px 0; +.left-panel::-webkit-scrollbar, +.right-panel::-webkit-scrollbar { + width: 0px; + height: 0px; } .logo { font-family: 'Pacifico', cursive; + font-size: 52px; + font-weight: 800; + margin: 12px 0; + line-height: 1.3; + white-space: nowrap; + max-width: 100%; + overflow: visible; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-size: 200%; + background-position: 0%; + animation: backgroundSizeAnimation 10s ease-in-out infinite; + background-image: var(--gradient); + padding: 10px 6px; +} + +.left-avatar { + width: 100px; + height: 100px; + border-radius: 12px; + object-fit: cover; + margin-top: 6px; + margin-bottom: 14px; + box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.35); +} + +.daily-quote { + width: 100%; + padding: 16px; + margin-bottom: 18px; + text-align: center; + height: 100px; +} + +.quote-content { + font-size: 14px; + line-height: 1.5; + color: var(--main_text_color); + margin-bottom: 8px; + font-style: italic; +} + +.quote-author { + font-size: 12px; + color: var(--main_text_color); + opacity: 0.7; + text-align: right; +} + +.quote-author:not(:empty)::before { + content: "——"; +} + +.left-design { + margin-top: auto; + padding-top: 14px; + font-size: 12px; + font-family: 'Pacifico', cursive; + font-style: italic; + color: var(--main_text_color); + opacity: 0.65; + white-space: nowrap; +} + +.design-name { + position: relative; + display: inline-block; + cursor: pointer; +} + +.design-name::after { + content: ''; + position: absolute; + bottom: -2px; + left: 0; + width: 0; + height: 1px; + background-color: var(--main_text_color); + transition: width 0.3s ease; +} + +.design-name:hover::after { + width: 100%; +} + +.intro { + backdrop-filter: blur(var(--card_filter)); + -webkit-backdrop-filter: blur(var(--card_filter)); + background: var(--item_bg_color); + border-radius: 13px; + padding: 25px; + width: 100%; + max-width: 400px; + transition: transform 0.3s ease, background-color 0.3s ease; +} + +.intro:hover { + transform: translateY(-5px); + background: var(--item_hover_color); +} + +.intro h3 { + font-size: 20px; + margin-bottom: 15px; + color: var(--main_text_color); +} + +.intro ul { + list-style: none; + padding: 0; + margin-bottom: 20px; +} + +.intro li { + margin: 8px 0; + font-size: 16px; + color: var(--main_text_color); +} + +.intro a { + display: block; + margin: 8px 0; + padding: 10px 15px; + background: var(--item_bg_color); + border-radius: 8px; + text-decoration: none; + color: var(--main_text_color); + text-align: center; + transition: all 0.3s ease; + backdrop-filter: blur(var(--card_filter)); +} + +.intro a:hover { + background: var(--item_hover_color); + transform: translateY(-2px); + box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.1); +} + +@keyframes backgroundSizeAnimation { + 0% { + background-position: 100%; + } + 25% { + background-position: 50%; + } + 50% { + background-position: 0%; + } + 75% { + background-position: 50%; + } + 100% { + background-position: 100%; + } +} + +.left-tags { + width: 100%; + display: flex; + flex-wrap: wrap; + gap: 10px; + justify-content: center; + margin-top: 18px; +} + +.tag-item { + display: inline-flex; + align-items: center; + justify-content: center; + height: 28px; + padding: 0 12px; + border-radius: 999px; + font-size: 13px; + background: var(--item_bg_color); + backdrop-filter: blur(var(--card_filter)); + -webkit-backdrop-filter: blur(var(--card_filter)); + border: 1px solid rgba(255, 255, 255, 0.15); + transition: transform 0.2s ease; + white-space: nowrap; +} + +.tag-item:hover { + transform: translateY(-2px); +} + +.gradientText { + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-size: 200%; + background-position: 0%; + font-family: 'Pacifico', cursive; + animation: backgroundSizeAnimation 10s ease-in-out infinite; + background-image: var(--gradient); +} + +.purpleText { + color: var(--purple_text_color); + font-weight: 800; +} + +.right-intro { + width: 100%; + background: var(--item_bg_color); + border-radius: 13px; + padding: 12px 18px; + text-align: center; + backdrop-filter: blur(var(--card_filter)); + -webkit-backdrop-filter: blur(var(--card_filter)); + height: 120px; +} + +.music-player { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + min-height: 80px; +} + +.music-info { + width: 100%; + height: 40px; + display: flex; + flex-direction: column; + justify-content: center; +} + +.music-title { + font-size: 18px; + font-weight: 700; + color: var(--main_text_color); + margin-bottom: 4px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + height: 24px; + line-height: 24px; +} + +.music-artist { + font-size: 14px; + color: var(--main_text_color); + opacity: 0.7; + height: 16px; + line-height: 16px; +} + +.music-controls { + display: flex; + gap: 24px; + align-items: center; +} + +.control-btn { + background: var(--item_bg_color); + border: none; + border-radius: 50%; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + font-size: 14px; + color: var(--main_text_color); + transition: all 0.3s ease; + backdrop-filter: blur(var(--card_filter)); + -webkit-backdrop-filter: blur(var(--card_filter)); +} + +.control-btn:hover { + transform: scale(1.1); + background: var(--item_hover_color); +} + +.play-btn { + width: 36px; + height: 36px; + font-size: 16px; +} + +.future-content { + width: 100%; + display: flex; + justify-content: center; + margin: 6px 0 12px; +} + +.section-title { + display: flex; + align-items: center; + gap: 10px; + font-size: 26px; + font-weight: 800; + margin: 22px 0 14px; +} + +.section-title-icon { + width: 22px; + height: 22px; + border-radius: 8px; + object-fit: cover; + flex-shrink: 0; +} + +.right-section { + width: 100%; +} + +.projectList { + display: flex; + flex-wrap: wrap; + gap: 12px; +} + +.projectItem { + display: flex; + text-decoration: none; + color: inherit; + background-color: var(--item_bg_color); + border-radius: 12px; + padding: 15px; + height: 110px; + width: calc(50% - 6px); + backdrop-filter: blur(var(--card_filter)); + -webkit-backdrop-filter: blur(var(--card_filter)); + transition: opacity 0.3s ease, background-color 0.2s ease, transform 0.3s ease; + align-items: center; +} + +.projectItem:hover { + background: var(--item_hover_color); + transform: translateY(-2px); + box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.1); +} + +.projectItemLeft { + width: 80%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; +} + +.projectItemLeft h1 { + font-size: 16px; + font-weight: 700; + margin: 0; +} + +.projectItemLeft p { + margin-top: 10px; + font-size: 13px; + opacity: 0.85; + line-height: 1.35; +} + +.projectItemRight { + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + width: 20%; + height: 100%; +} + +.projectItemRight img { + width: 40px; + height: 40px; + border-radius: 10px; + object-fit: cover; } /* 默认隐藏 */ @@ -53,6 +483,8 @@ body { text-align: center; } + + /* 全屏按钮样式（仅大屏幕显示） */ #fullscreen-button { position: absolute; @@ -68,5 +500,5 @@ body { } #fullscreen-button:hover { - transform: scale(1.20); /* 悬停时上下左右均匀放大 20% */ + transform: scale(1.10); /* 悬停时上下左右均匀放大 10% */ } \ No newline at end of file diff --git a/css/chat.css b/css/chat.css index 92aae91..c8bb959 100644 --- a/css/chat.css +++ b/css/chat.css @@ -1,13 +1,13 @@ .chat-container { position: fixed; - bottom: 50px; + bottom: calc(var(--footer-height, 32px) + 18px); left: 0; width: 100%; - background: rgba(255, 255, 255, 0); /* 几乎全透明 */ + background: transparent; display: flex; flex-direction: column; align-items: center; - z-index: 5; + z-index: 1000; } .chat-box { @@ -15,15 +15,18 @@ 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 兼容 */ - margin-bottom: 10px; - padding: 10px; - border-radius: 8px; + backdrop-filter: blur(var(--card_filter)); + -webkit-backdrop-filter: blur(var(--card_filter)); + background: var(--item_bg_color); + border: 1px solid rgba(255, 255, 255, 0.12); + background-clip: padding-box; + margin-bottom: 15px; + padding: 20px; + border-radius: 13px; position: relative; z-index: 10; display: none; + box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.1); } .chat-box.show { @@ -35,27 +38,58 @@ } .message { - margin: 5px 0; - padding: 10px 15px; - max-width: fit-content; - border-radius: 12px; + margin: 8px 0; + padding: 12px 18px; + max-width: 80%; + width: fit-content; /* 让气泡宽度随文字内容自适应 */ + min-width: 10px; + display: block; + border-radius: 16px; word-break: break-word; + transition: all 0.3s ease; + backdrop-filter: blur(var(--card_filter)); + -webkit-backdrop-filter: blur(var(--card_filter)); + user-select: text; + position: relative; +} + +.copy-button { + position: absolute; + top: 8px; + right: 8px; + background: rgba(0, 0, 0, 0.3); + color: white; + border: none; + border-radius: 4px; + padding: 4px 8px; + font-size: 12px; + cursor: pointer; + opacity: 0; + transition: opacity 0.3s ease; +} + +.message:hover .copy-button { + opacity: 1; } .message.user { - background-color: #daf1fc; + background: rgba(255, 255, 255, 0.25); + border: 1px solid rgba(255, 255, 255, 0.15); align-self: flex-end; text-align: left; margin-left: auto; + color: var(--main_text_color); } .message.bot { - background-color: #eee; + background: rgba(255, 255, 255, 0.15); + border: 1px solid rgba(255, 255, 255, 0.10); align-self: flex-start; text-align: left; margin-right: auto; font-size: 14px; - line-height: 1.5; + line-height: 1.6; + color: var(--main_text_color); } /* 清除常见 markdown 元素的默认 margin */ @@ -91,33 +125,69 @@ display: flex; justify-content: center; width: 90%; - gap: 10px; + gap: 12px; } #userInput { flex: 1; - padding: 10px; + padding: 12px 16px; font-size: 16px; - border: 1px solid #ccc; - border-radius: 6px; + border: none; + border-radius: 13px; + backdrop-filter: blur(var(--card_filter)); + -webkit-backdrop-filter: blur(var(--card_filter)); + background: var(--item_bg_color); + border: 1px solid rgba(255, 255, 255, 0.12); + background-clip: padding-box; + color: var(--main_text_color); + transition: all 0.3s ease; +} + +#userInput:focus { + outline: none; + background: var(--item_hover_color); + transform: translateY(-2px); +} + +html[data-theme="Dark"] .chat-box { + border: 1px solid rgba(255, 255, 255, 0.08); +} + +html[data-theme="Dark"] .message.user { + background: rgba(255, 255, 255, 0.20); + border: 1px solid rgba(255, 255, 255, 0.10); +} + +html[data-theme="Dark"] .message.bot { + background: rgba(255, 255, 255, 0.10); + border: 1px solid rgba(255, 255, 255, 0.05); +} + +html[data-theme="Dark"] #userInput { + border: 1px solid rgba(255, 255, 255, 0.08); } button { - padding: 10px 16px; + padding: 12px 20px; font-size: 16px; border: none; - background-color: #007BFF; - color: white; - border-radius: 6px; + border-radius: 13px; + backdrop-filter: blur(var(--card_filter)); + -webkit-backdrop-filter: blur(var(--card_filter)); + background: var(--item_bg_color); + color: var(--main_text_color); cursor: pointer; + transition: all 0.3s ease; } button:hover { - background-color: #0056b3; + background: var(--item_hover_color); + transform: translateY(-2px); + box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.1); } .typing { - color: #aaa; + color: var(--purple_text_color); font-style: italic; animation: blink 1.8s infinite; } diff --git a/css/footer.css b/css/footer.css index 2b50ae2..327ca22 100644 --- a/css/footer.css +++ b/css/footer.css @@ -1,3 +1,8 @@ +:root { + /* 供布局计算：footer 由于使用 fixed + max-height，实际高度通常不会超过该值 */ + --footer-height: 40px; +} + /* 页脚样式 */ footer { background-color: rgba(51, 51, 51, 0.5); /* 半透明背景 */ @@ -12,11 +17,11 @@ footer { right: 0; bottom: 0; font-size: 14px; - min-height: 20px; /* 保证最低高度 */ - max-height: 32px; /* 移除高度上限，允许内容扩展 */ + min-height: 40px; /* 保证最低高度 */ + max-height: 40px; /* 移除高度上限，允许内容扩展 */ z-index: 2000; text-align: center; - line-height: 1.4; /* 行高适配多行文字 */ + line-height: 1.2; /* 行高适配多行文字 */ } .footer-content { @@ -35,7 +40,7 @@ footer { } .line-1 { - margin-bottom: -12px; + margin-bottom: -8px; } } diff --git a/css/max_width.css b/css/max_width.css index 1a17bd6..b33a21d 100644 --- a/css/max_width.css +++ b/css/max_width.css @@ -1,46 +1,160 @@ -@media screen and (max-width: 768px) { +@media screen and (max-width: 800px) { .main-layout { flex-direction: column; - } - - #fullscreen-button { - padding-right: 10px; - padding-top: 10px; + height: calc(100vh - (var(--footer-height, 32px) + 68px)); + min-height: 0; + padding: 10px; + overflow: hidden; } .left-panel { + display: none; /* 移动端默认只展示右侧，配合 Switch 按钮切换 */ width: 100%; - display: flex; - justify-content: center; - align-items: center; + height: 100%; + flex: 0 0 auto; + padding: 15px; } .right-panel { width: 100%; - display: none; - justify-content: center; + height: 100%; + flex: 1; + padding: 15px; + padding-bottom: calc(var(--footer-height, 32px) + 120px); + } + + .logo { + font-size: 8.7vw; + margin: 10px 0; + } + + /* 移动端同样避免横向裁切 */ + .logo { + white-space: nowrap; + overflow: visible; + max-width: 100%; + } + + .intro { + padding: 20px; + margin-bottom: 20px; + } + + .left-avatar { + width: 70px; + height: 70px; + margin-bottom: 10px; + } + + .intro h3 { + font-size: 5vw; + } + + .intro li { + font-size: 4vw; + } + + .intro a { + font-size: 4vw; + padding: 8px 12px; + } + + .datetime { + text-align: center; + margin-bottom: 20px; + } + + .time { + font-size: 15vw; + } + + .date { + font-size: 5vw; + } + + .future-content { + width: 100%; + height: 120px; + display: flex; align-items: center; + justify-content: center; } - .switch_button { - position: fixed; - left: 50%; - right: auto; - transform: translateX(-50%); - bottom: 120px; - z-index: 1; + #tanChiShe { + width: 100%; + height: 100%; + object-fit: contain; } - .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; + .left-panel { + display: none; + width: 100%; + height: 100%; + flex: 0 0 auto; + padding: 140px 15px 15px; + transition: transform 0.3s ease; + overflow-y: auto; + overflow-x: hidden; } - - .swbutton:hover { - background-color: rgba(200, 200, 200, 0.3); - transform: scale(1.02); /* 可选的小缩放效果 */ + + .right-panel { + width: 100%; + height: 100%; + flex: 1; + padding: 140px 15px calc(var(--footer-height, 32px) + 120px) 15px; + transition: transform 0.3s ease; + overflow-y: auto; + overflow-x: hidden; + } + + .chat-container { + bottom: calc(var(--footer-height, 32px) + 16px); + } + + .chat-box { + width: 95%; + padding: 15px; + } + + .input-row { + width: 95%; + gap: 10px; + } + + #userInput { + padding: 10px 14px; + font-size: 14px; + } + + button { + padding: 10px 16px; + font-size: 14px; + } + + .message { + padding: 10px 14px; + max-width: 90%; + } + + .projectItem { + width: 100%; + } + + .section-title { + font-size: 22px; + } + + /* 隐藏移动端滚动条 */ + .left-panel::-webkit-scrollbar, + .right-panel::-webkit-scrollbar { + display: none; + width: 0; + height: 0; + } + + .left-panel, + .right-panel { + -ms-overflow-style: none; + scrollbar-width: none; } } \ No newline at end of file diff --git a/css/svg.css b/css/svg.css index c30869c..dff71a0 100644 --- a/css/svg.css +++ b/css/svg.css @@ -1,6 +1,7 @@ /* PC端设置 */ #tanChiShe { - width: clamp(100px, 40vw, 600px); + /* 尽量贴近下方卡片的视觉高度/宽度量级 */ + width: clamp(140px, 42vw, 660px); height: auto; display: block; margin: 0 auto; @@ -9,6 +10,6 @@ /* 移动端适配 */ @media (max-width: 768px) { #tanChiShe { - width: clamp(100px, 80vw, 600px); + width: clamp(140px, 78vw, 660px); } } \ No newline at end of file diff --git a/icon/last.png b/icon/last.png new file mode 100644 index 0000000..71cf441 Binary files /dev/null and b/icon/last.png differ diff --git a/icon/next.png b/icon/next.png new file mode 100644 index 0000000..a58fa28 Binary files /dev/null and b/icon/next.png differ diff --git a/icon/pause.png b/icon/pause.png new file mode 100644 index 0000000..346706e Binary files /dev/null and b/icon/pause.png differ diff --git a/icon/play.png b/icon/play.png new file mode 100644 index 0000000..1a2dddf Binary files /dev/null and b/icon/play.png differ diff --git a/icon/site.png b/icon/site.png new file mode 100644 index 0000000..1b46764 Binary files /dev/null and b/icon/site.png differ diff --git a/image/avator.jpg b/image/avator.jpg new file mode 100644 index 0000000..123e902 Binary files /dev/null and b/image/avator.jpg differ diff --git a/index.html b/index.html index 0917632..39be71b 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,11 @@ DreamLife|HomePage + + @@ -15,24 +17,31 @@

DreamLife

-
-

这是我的网站首页，主页代码正在完善中

-
    -
  • 此网站将用于个人经历展示，个人技术分析
    • -
  • 集成DeepSeek V3-0324-685B模型
    • -
  • 工具箱网站dreamlife.top/toolbox
    • -
- ToolBox - 博客|WordPress - Gitea + + avatar + +
+
加载中...
+
+ +
+ DreamLife + Git + 嘉立创EDA + Linux + 网络服务 + OpenClaw +
+ +
Design by 张梦南
@@ -41,15 +50,78 @@
--:--:--
加载中...
+ +
-
- - -
- +
+
+
+
加载中...
+
--
+
+
+ + + +
+
+
+ +
+
+ site + site +
+
+ + +
+

博客

+

记录摆烂日常与技术笔记

+
+
+ +
+ + +
+

Gitea

+

自建代码托管与开源协作

+
+
+ +
+ + +
+

ToolBox

+

常用工具集合与快捷入口

+
+
+ +
+ + +
+

简历

+

个人求职简历

+
+
+ +
+ +
+
+
@@ -66,7 +138,7 @@