diff --git a/.env b/.env deleted file mode 100644 index 83c205b..0000000 --- a/.env +++ /dev/null @@ -1,8 +0,0 @@ -VITE_OJ=https://oj.xuyue.cc -VITE_CODE=https://code.xuyue.cc -VITE_WEB=https://web.xuyue.cc -VITE_PLAY=https://play.xuyue.cc -VITE_BOOK=https://book.xuyue.cc -VITE_HUABU=https://huabu.xuyue.cc -VITE_PPT=https://ppt.xuyue.cc/py -VITE_PY=https://python.xuyue.cc \ No newline at end of file diff --git a/.env.staging b/.env.staging index ed44c17..a037d25 100644 --- a/.env.staging +++ b/.env.staging @@ -1,5 +1,6 @@ VITE_OJ=http://10.13.114.114:81 VITE_CODE=http://10.13.114.114:82 +VITE_WEB=http://10.13.114.114:91 # VITE_PLAY=http://10.13.114.114:83 VITE_BOOK=http://10.13.114.114:84 VITE_HUABU=http://10.13.114.114:85 diff --git a/index.html b/index.html index dc50163..5a758ba 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,99 @@ - + - 徐越的在线学习平台 + 物联网专业の在线学习平台 +
+
+
+

+ 火 + 未满十八禁游♥戏♥推♥荐 + 火 +

+

+ 爸♥妈♥不♥在♥家 +

+

+ 一♥个♥人♥寂♥寞♥？ +

+
+
+
+
+ P♥Y♥T♥H♥O♥N +
+
+ W♥E♥B +
+
+ C♥语♥言 +
+
+
+ 劲♥爽♥游♥戏♥体♥验 +
+
+ 广♥告♥位♥出♥租 +
+
+
+
+
+
-

徐越的在线学习平台

+

+ ♥️ 物联网专业の在线学习平台 ♥️ +

@@ -31,6 +113,83 @@
+ +
+
+

+ 游戏 + 游♥戏♥时♥间♥到 + 游戏 +

+

+ 爸♥妈♥不♥在♥家 +

+

+ 一♥个♥人♥寂♥寞♥？ +

+
+
+
+
+ P♥Y♥T♥H♥O♥N +
+
+ W♥E♥B +
+
+ C♥语♥言 +
+
+
+ 劲♥爽♥游♥戏♥体♥验 +
+
+ 广♥告♥位♥出♥租 +
+
+
+
+
diff --git a/main.js b/main.js index 3d89dc5..095b3a2 100644 --- a/main.js +++ b/main.js @@ -1,5 +1,3 @@ -import "./style.css" - const pins = [ // { // url: "https://code.xuyue.cc?query=30", @@ -34,7 +32,7 @@ const sites = [ }, { url: import.meta.env.VITE_WEB, - title: "前端蜂", + title: "哈基米", description: "Web 前端开发", icon: "noto--honeybee.svg", }, @@ -42,7 +40,7 @@ const sites = [ url: import.meta.env.VITE_SHUATI, title: "刷题鸭", description: "梁老师的刷题网站", - icon: "", + icon: "noto--paintbrush.svg", }, { url: import.meta.env.VITE_PLAY, diff --git a/package.json b/package.json index 70d7daa..6feea55 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "version": "1.0.0", "type": "module", "scripts": { - "start": "vite", + "start": "vite --mode=production", "build": "vite build", "build:staging": "vite build --mode=staging", "fmt": "prettier --write *.js style.css index.html" diff --git a/public/icons/noto--fire.svg b/public/icons/noto--fire.svg new file mode 100644 index 0000000..ad55581 --- /dev/null +++ b/public/icons/noto--fire.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/noto--no-one-under-eighteen.svg b/public/icons/noto--no-one-under-eighteen.svg new file mode 100644 index 0000000..f5299cf --- /dev/null +++ b/public/icons/noto--no-one-under-eighteen.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/noto--paintbrush.svg b/public/icons/noto--paintbrush.svg new file mode 100644 index 0000000..abf5556 --- /dev/null +++ b/public/icons/noto--paintbrush.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/noto--video-game.svg b/public/icons/noto--video-game.svg new file mode 100644 index 0000000..0314b38 --- /dev/null +++ b/public/icons/noto--video-game.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/1.jpg b/public/images/1.jpg new file mode 100644 index 0000000..9afa328 Binary files /dev/null and b/public/images/1.jpg differ diff --git a/public/images/2.jpg b/public/images/2.jpg new file mode 100644 index 0000000..f82d222 Binary files /dev/null and b/public/images/2.jpg differ diff --git a/public/images/3.jpg b/public/images/3.jpg new file mode 100644 index 0000000..73108e0 Binary files /dev/null and b/public/images/3.jpg differ diff --git a/public/images/4.jpg b/public/images/4.jpg new file mode 100644 index 0000000..aeacd98 Binary files /dev/null and b/public/images/4.jpg differ diff --git a/public/images/5.jpg b/public/images/5.jpg new file mode 100644 index 0000000..e1c1c22 Binary files /dev/null and b/public/images/5.jpg differ diff --git a/style.css b/style.css index e8e4f27..f2cc028 100644 --- a/style.css +++ b/style.css @@ -2,35 +2,502 @@ html, body { padding: 0; margin: 0; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + background: + radial-gradient( + circle at 20% 80%, + rgba(255, 182, 193, 0.3) 0%, + transparent 50% + ), + radial-gradient( + circle at 80% 20%, + rgba(221, 160, 221, 0.3) 0%, + transparent 50% + ), + radial-gradient( + circle at 40% 40%, + rgba(173, 216, 230, 0.2) 0%, + transparent 50% + ), + linear-gradient( + 135deg, + #ffeef8 0%, + #f0e6ff 25%, + #e6f3ff 50%, + #fff0f5 75%, + #f8f0ff 100% + ); + color: #4a4a4a; + min-height: 100vh; + letter-spacing: 0.01em; + position: relative; + overflow-x: hidden; } +#app { + display: flex; + min-height: 100vh; + position: relative; +} + +/* 添加可爱的装饰星星 */ +body::before { + content: ""; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: + radial-gradient(2px 2px at 20px 30px, #ff69b4, transparent), + radial-gradient(2px 2px at 40px 70px, #ffb6c1, transparent), + radial-gradient(1px 1px at 90px 40px, #dda0dd, transparent), + radial-gradient(1px 1px at 130px 80px, #87ceeb, transparent), + radial-gradient(2px 2px at 160px 30px, #ffc0cb, transparent); + background-repeat: repeat; + background-size: 200px 100px; + animation: twinkle 3s ease-in-out infinite alternate; + pointer-events: none; + z-index: 1; +} + +@keyframes twinkle { + 0% { + opacity: 0.3; + } + 100% { + opacity: 0.8; + } +} + +/* 动漫风格链接 */ a { - color: inherit; - text-decoration: none; + color: #ff69b4; + text-shadow: 0 1px 2px rgba(255, 105, 180, 0.3); + transition: all 0.3s ease; + position: relative; +} +a:hover { + color: #ff1493; + text-shadow: 0 2px 4px rgba(255, 20, 147, 0.4); + transform: translateY(-1px); } * { box-sizing: border-box; } -.container { - padding: 0 2rem; +.promo-left, +.promo-right { + width: 350px; + min-height: 100vh; + position: fixed; + top: 0; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; } -.main { - padding: 2rem 0; - flex: 1; +.promo-left { + left: 0; +} + +.promo-right { + right: 0; +} + +.promo-content { + background: rgba(255, 255, 255, 0.9); + border: 2px solid rgba(255, 182, 193, 0.3); + border-radius: 15px; + padding: 1rem; + text-align: center; + box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2); + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); + animation: + adFloat 3s ease-in-out infinite, + adShake 2s ease-in-out infinite, + adFlash 1.5s ease-in-out infinite; +} + +.promo-content h3 { + color: #ff69b4; + font-size: 1.6rem; + margin: 0 0 0.5rem 0; + text-shadow: 1px 1px 2px rgba(255, 105, 180, 0.3); +} + +.promo-content p { + color: #9370db; + font-size: 1.2rem; + margin: 0.3rem 0; + text-shadow: 1px 1px 2px rgba(147, 112, 219, 0.3); +} + +.promo-placeholder { + width: 300px; + height: 300px; + background: linear-gradient( + 135deg, + rgba(255, 182, 193, 0.3) 0%, + rgba(221, 160, 221, 0.3) 100% + ); + border: 2px solid rgba(255, 105, 180, 0.5); + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + color: #ff69b4; + font-weight: bold; + font-size: 0.8rem; + animation: adPulse 2s ease-in-out infinite; + position: relative; + overflow: hidden; +} + +.game-promo { + text-align: center; + padding: 1rem; + height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } +.game-title { + font-size: 2.2rem; + font-weight: bold; + color: #ff1493; + text-shadow: 2px 2px 4px rgba(255, 20, 147, 0.3); + margin-bottom: 0.5rem; + animation: gameTitleGlow 2s ease-in-out infinite; +} + +.game-subtitle { + font-size: 1.2rem; + color: #9370db; + margin-bottom: 0.5rem; + text-shadow: 1px 1px 2px rgba(147, 112, 219, 0.3); +} + +.promo-rental { + font-size: 1rem; + color: #ff69b4; + margin-top: 0.5rem; + text-shadow: 1px 1px 2px rgba(255, 105, 180, 0.3); + font-weight: bold; +} + +.language-list { + display: flex; + flex-direction: column; + gap: 0.1rem; + margin-top: 0.5rem; + justify-content: center; + align-items: center; +} + +.play-button { + background: linear-gradient(45deg, #ff69b4, #ff1493); + color: white; + padding: 0.6rem 1.2rem; + border-radius: 20px; + font-size: 1rem; + font-weight: bold; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 4px 8px rgba(255, 20, 147, 0.3); + animation: buttonPulse 1.5s ease-in-out infinite; +} + +.play-button:hover { + transform: scale(1.1); + box-shadow: 0 6px 12px rgba(255, 20, 147, 0.5); +} + +@keyframes gameTitleGlow { + 0%, + 100% { + text-shadow: 2px 2px 4px rgba(255, 20, 147, 0.3); + } + 50% { + text-shadow: + 2px 2px 8px rgba(255, 20, 147, 0.6), + 0 0 12px rgba(255, 20, 147, 0.4); + } +} + +@keyframes buttonPulse { + 0%, + 100% { + transform: scale(1); + -webkit-transform: scale(1); + } + 50% { + transform: scale(1.05); + -webkit-transform: scale(1.05); + } +} + +/* 爱心抖动效果 */ +.heart-shake { + display: inline-block; + color: #ff1493; + animation: heartShake 0.5s ease-in-out infinite; + text-shadow: 0 0 3px rgba(255, 20, 147, 0.6); + font-size: 0.8em; + margin: 0 0.1em; +} + +.promo-title-shake, +.promo-text-shake, +.game-title-shake, +.game-subtitle-shake, +.play-button-shake { + animation: textShake 2s ease-in-out infinite; +} + +@keyframes heartShake { + 0%, + 100% { + transform: translateX(0) translateY(0) rotate(0deg) scale(1); + -webkit-transform: translateX(0) translateY(0) rotate(0deg) scale(1); + } + 25% { + transform: translateX(-1px) translateY(-1px) rotate(-2deg) scale(1.1); + -webkit-transform: translateX(-1px) translateY(-1px) rotate(-2deg) + scale(1.1); + } + 50% { + transform: translateX(1px) translateY(1px) rotate(2deg) scale(1.2); + -webkit-transform: translateX(1px) translateY(1px) rotate(2deg) scale(1.2); + } + 75% { + transform: translateX(-1px) translateY(1px) rotate(-1deg) scale(1.1); + -webkit-transform: translateX(-1px) translateY(1px) rotate(-1deg) scale(1.1); + } +} + +@keyframes textShake { + 0%, + 100% { + transform: translateX(0) translateY(0); + -webkit-transform: translateX(0) translateY(0); + } + 10% { + transform: translateX(-0.5px) translateY(-0.5px); + -webkit-transform: translateX(-0.5px) translateY(-0.5px); + } + 20% { + transform: translateX(0.5px) translateY(0.5px); + -webkit-transform: translateX(0.5px) translateY(0.5px); + } + 30% { + transform: translateX(-0.3px) translateY(0.3px); + -webkit-transform: translateX(-0.3px) translateY(0.3px); + } + 40% { + transform: translateX(0.3px) translateY(-0.3px); + -webkit-transform: translateX(0.3px) translateY(-0.3px); + } + 50% { + transform: translateX(-0.2px) translateY(0.2px); + -webkit-transform: translateX(-0.2px) translateY(0.2px); + } + 60% { + transform: translateX(0.2px) translateY(-0.2px); + -webkit-transform: translateX(0.2px) translateY(-0.2px); + } + 70% { + transform: translateX(-0.1px) translateY(0.1px); + -webkit-transform: translateX(-0.1px) translateY(0.1px); + } + 80% { + transform: translateX(0.1px) translateY(-0.1px); + -webkit-transform: translateX(0.1px) translateY(-0.1px); + } + 90% { + transform: translateX(0) translateY(0); + -webkit-transform: translateX(0) translateY(0); + } +} + +@keyframes adFloat { + 0%, + 100% { + transform: translateY(0px); + -webkit-transform: translateY(0px); + } + 50% { + transform: translateY(-5px); + -webkit-transform: translateY(-5px); + } +} + +@keyframes adShake { + 0%, + 100% { + transform: translateX(0) translateY(0) rotate(0deg); + -webkit-transform: translateX(0) translateY(0) rotate(0deg); + } + 10% { + transform: translateX(-3px) translateY(-3px) rotate(-2deg); + -webkit-transform: translateX(-3px) translateY(-3px) rotate(-2deg); + } + 20% { + transform: translateX(3px) translateY(3px) rotate(2deg); + -webkit-transform: translateX(3px) translateY(3px) rotate(2deg); + } + 30% { + transform: translateX(-2px) translateY(2px) rotate(-1.5deg); + -webkit-transform: translateX(-2px) translateY(2px) rotate(-1.5deg); + } + 40% { + transform: translateX(2px) translateY(-2px) rotate(1.5deg); + -webkit-transform: translateX(2px) translateY(-2px) rotate(1.5deg); + } + 50% { + transform: translateX(-1.5px) translateY(1.5px) rotate(-1deg); + -webkit-transform: translateX(-1.5px) translateY(1.5px) rotate(-1deg); + } + 60% { + transform: translateX(1.5px) translateY(-1.5px) rotate(1deg); + -webkit-transform: translateX(1.5px) translateY(-1.5px) rotate(1deg); + } + 70% { + transform: translateX(-1px) translateY(1px) rotate(-0.5deg); + -webkit-transform: translateX(-1px) translateY(1px) rotate(-0.5deg); + } + 80% { + transform: translateX(1px) translateY(-1px) rotate(0.5deg); + -webkit-transform: translateX(1px) translateY(-1px) rotate(0.5deg); + } + 90% { + transform: translateX(0) translateY(0) rotate(0deg); + -webkit-transform: translateX(0) translateY(0) rotate(0deg); + } +} + +@keyframes adFlash { + 0%, + 100% { + opacity: 1; + box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2); + } + 25% { + opacity: 0.8; + box-shadow: 0 4px 20px rgba(255, 182, 193, 0.4); + } + 50% { + opacity: 1; + box-shadow: 0 4px 25px rgba(255, 182, 193, 0.6); + } + 75% { + opacity: 0.9; + box-shadow: 0 4px 30px rgba(255, 182, 193, 0.8); + } +} + +@keyframes adPulse { + 0%, + 100% { + opacity: 0.7; + } + 50% { + opacity: 1; + } +} + +.container { + padding: 0 2rem; + position: relative; + z-index: 2; + flex: 1; + margin: 0 370px; +} +.main { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 2rem 0; + min-height: 100vh; + background: rgba(255, 255, 255, 0.1); + border-radius: 20px; + box-shadow: 0 8px 32px rgba(255, 182, 193, 0.2); + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.2); + animation: float 6s ease-in-out infinite; +} + +@keyframes float { + 0%, + 100% { + transform: translateY(0px); + } + 50% { + transform: translateY(-10px); + } +} + .title { - line-height: 1.15; - font-size: 2rem; + line-height: 1.2; + font-size: 2.5rem; + font-weight: bold; + text-align: center; + margin-bottom: 1rem; +} + +.title { + font-family: "Orbitron", sans-serif; + color: #ff69b4; + text-shadow: 2px 2px 4px rgba(255, 105, 180, 0.3); + letter-spacing: 0.02em; + transform-origin: center; +} + +/* 动漫风格渐变文字 */ +.title.gradient { + background: linear-gradient( + 45deg, + #ff69b4 0%, + #ff1493 25%, + #da70d6 50%, + #9370db 75%, + #8a2be2 100% + ); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + color: transparent; + text-shadow: none; + animation: + rainbow 3s ease-in-out infinite; +} + +@keyframes centerRotate { + 0% { + transform: rotate(0deg); + -webkit-transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + -webkit-transform: rotate(360deg); + } +} + +@keyframes rainbow { + 0% { + -webkit-filter: hue-rotate(0deg); + filter: hue-rotate(0deg); + } + 100% { + -webkit-filter: hue-rotate(360deg); + filter: hue-rotate(360deg); + } } .title, @@ -39,9 +506,34 @@ a { } .description { - margin: 4rem 0; - line-height: 1.5; - font-size: 1.5rem; + margin: 2rem 0; + line-height: 1.6; + font-size: 1.2rem; + color: #9370db; + text-shadow: 1px 1px 2px rgba(147, 112, 219, 0.3); + animation: pulse 2s ease-in-out infinite; +} + +@keyframes pulse { + 0%, + 100% { + opacity: 0.8; + } + 50% { + opacity: 1; + } +} + +@keyframes float { + 0%, + 100% { + transform: translateY(0px); + -webkit-transform: translateY(0px); + } + 50% { + transform: translateY(-10px); + -webkit-transform: translateY(-10px); + } } .grid { @@ -49,42 +541,164 @@ a { align-items: center; justify-content: center; flex-wrap: wrap; - max-width: 800px; + gap: 1.5rem; + max-width: 1000px; + margin-top: 2rem; } .card { width: 100%; - margin: 1rem; + margin: 0; padding: 1.5rem; text-align: left; color: inherit; text-decoration: none; - border: 1px solid #eaeaea; - border-radius: 10px; - transition: color 0.15s ease, border-color 0.15s ease; + border: 2px solid rgba(255, 182, 193, 0.3); + border-radius: 20px; + transition: all 0.3s ease; max-width: 300px; + position: relative; + overflow: hidden; +} + +/* 动漫风格卡片 */ +.card { + color: #4a4a4a; + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.9) 0%, + rgba(255, 240, 245, 0.8) 100% + ); + box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2); + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); + animation: + cardFloat 4s ease-in-out infinite, + cardRotate 8s linear infinite; + transform-origin: center; +} + +.card::before { + content: ""; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: linear-gradient( + 45deg, + transparent, + rgba(255, 182, 193, 0.1), + transparent + ); + transform: rotate(45deg); + transition: all 0.6s ease; + opacity: 0; +} + +.card:hover::before { + animation: shine 0.6s ease-in-out; +} + +@keyframes shine { + 0% { + transform: translateX(-100%) translateY(-100%) rotate(45deg); + -webkit-transform: translateX(-100%) translateY(-100%) rotate(45deg); + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + transform: translateX(100%) translateY(100%) rotate(45deg); + -webkit-transform: translateX(100%) translateY(100%) rotate(45deg); + opacity: 0; + } +} + +@keyframes cardFloat { + 0%, + 100% { + transform: translateY(0px); + -webkit-transform: translateY(0px); + } + 50% { + transform: translateY(-5px); + -webkit-transform: translateY(-5px); + } +} + +@keyframes cardRotate { + 0% { + transform: rotate(0deg); + -webkit-transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + -webkit-transform: rotate(360deg); + } } .card.pin { - background-color: whitesmoke; + background: linear-gradient( + 135deg, + rgba(255, 192, 203, 0.9) 0%, + rgba(255, 182, 193, 0.8) 100% + ); + border-color: rgba(255, 105, 180, 0.6); + animation: + pinPulse 2s ease-in-out infinite, + cardRotate 8s linear infinite; + transform-origin: center; +} + +@keyframes pinPulse { + 0%, + 100% { + transform: scale(1); + -webkit-transform: scale(1); + } + 50% { + transform: scale(1.05); + -webkit-transform: scale(1.05); + } } .card:hover, .card:focus, .card:active { - color: #0070f3; - border-color: #0070f3; + color: #ff1493; + border-color: rgba(255, 20, 147, 0.8); + transform: translateY(-8px) scale(1.02); + -webkit-transform: translateY(-8px) scale(1.02); + box-shadow: 0 8px 25px rgba(255, 20, 147, 0.3); + animation-play-state: paused; } .card h2 { - margin: 0; - font-size: 1.5rem; + margin: 0 0 0.5rem 0; + font-size: 1.4rem; + font-weight: bold; + color: #ff69b4; + text-shadow: 1px 1px 2px rgba(255, 105, 180, 0.3); + transition: all 0.3s ease; +} + +.card:hover h2 { + color: #ff1493; + transform: scale(1.05); } .card p { - margin: 0; - font-size: 1.25rem; - line-height: 1.5; + margin: 0.5rem 0; + font-size: 1rem; + line-height: 1.4; + color: #666; + transition: all 0.3s ease; +} + +.card:hover p { + color: #ff1493; } .card .single { @@ -98,52 +712,193 @@ a { display: flex; align-items: center; margin-bottom: 1rem; + transition: all 0.3s ease; } .title-icon .icon { - width: 32px; - height: 32px; + width: 36px; + height: 36px; margin-right: 12px; + transition: all 0.3s ease; + filter: drop-shadow(0 2px 4px rgba(255, 105, 180, 0.3)); +} + +.card:hover .title-icon .icon { + transform: scale(1.1) rotate(5deg); + filter: drop-shadow(0 4px 8px rgba(255, 20, 147, 0.4)); } .beian { + margin-top: 2rem; margin-bottom: 20px; text-align: center; + padding: 1rem; + background: rgba(255, 255, 255, 0.1); + border-radius: 15px; + -webkit-backdrop-filter: blur(5px); + backdrop-filter: blur(5px); + border: 1px solid rgba(255, 182, 193, 0.2); } .beian img { - width: 14px; - height: 14px; + width: 16px; + height: 16px; margin: 0 4px; + transition: all 0.3s ease; +} + +.beian img:hover { + transform: scale(1.2) rotate(10deg); } .beian a { text-decoration: none; font-size: 14px; + color: #9370db; + transition: all 0.3s ease; + text-shadow: 1px 1px 2px rgba(147, 112, 219, 0.3); +} + +.beian a:hover { + color: #ff69b4; + transform: translateY(-2px); +} + +.beian { + color: #9370db; + text-shadow: 1px 1px 2px rgba(147, 112, 219, 0.3); } @media (max-width: 600px) { + .promo-left, + .promo-right { + display: none; + } + + .container { + margin: 0; + padding: 0 1rem; + } + .grid { width: 100%; flex-direction: column; - } -} - -@media (prefers-color-scheme: dark) { - html { - color-scheme: dark; + gap: 1rem; } - body { - color: white; - background: black; + .main { + padding: 1.5rem; + border-radius: 15px; + margin: 1rem; } .card { - border-color: #222; + max-width: 100%; + margin: 0; } - .pin.card { - background-color: #222; + .title { + font-size: 2rem; + } +} + +@media (max-width: 1600px) { + .promo-left, + .promo-right { + width: 300px; + } + + .container { + margin: 0 320px; + } + + .promo-placeholder { + width: 250px; + height: 400px; + } +} + +@media (max-width: 1400px) { + .promo-left, + .promo-right { + width: 250px; + } + + .container { + margin: 0 270px; + } + + .promo-placeholder { + width: 200px; + height: 350px; + } +} + +@media (max-width: 1200px) { + .promo-left, + .promo-right { + width: 200px; + } + + .container { + margin: 0 220px; + } + + .promo-placeholder { + width: 160px; + height: 300px; + } +} + +/* 添加更多动漫风格装饰 */ +.main::after { + content: "✨"; + position: absolute; + top: 20px; + right: 20px; + font-size: 2rem; + animation: sparkle 2s ease-in-out infinite; + z-index: 1; +} + +/* 雨滴图片动画样式 */ + +.rain-icon { + position: fixed; + top: -64px; + pointer-events: none; + opacity: 0; + z-index: 9999; + animation: rainFall linear forwards; + animation-fill-mode: both; +} + +@keyframes rainFall { + 0% { + transform: translateY(0) scale(1) rotate(0deg); + opacity: 0; + } + 10% { + opacity: 0.85; + } + 80% { + opacity: 0.85; + } + 100% { + transform: translateY(100vh) scale(0.8) rotate(360deg); + opacity: 0.1; + } +} +@keyframes sparkle { + 0%, + 100% { + transform: scale(1) rotate(0deg); + -webkit-transform: scale(1) rotate(0deg); + opacity: 0.7; + } + 50% { + transform: scale(1.2) rotate(180deg); + -webkit-transform: scale(1.2) rotate(180deg); + opacity: 1; } }