commit 60ebebf2261b04de6ba4001a431a45b76192131f Author: lwt <215586800@qq.com> Date: Fri May 8 22:40:53 2026 +0800 初始化 diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..bc9f8c8 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,15 @@ +* text=auto + +.gitattributes text eol=lf +*.html text eol=lf +*.css text eol=lf +*.js text eol=lf +*.json text eol=lf +*.md text eol=lf + +*.png binary +*.jpg binary +*.jpeg binary +*.gif binary +*.webp binary +*.ico binary diff --git a/assets/sumi-hero.png b/assets/sumi-hero.png new file mode 100644 index 0000000..4fbc4a7 Binary files /dev/null and b/assets/sumi-hero.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..2c755be --- /dev/null +++ b/index.html @@ -0,0 +1,69 @@ + + + + + + + + sumi.work - 服务入口 + + + +
+
+
+ +
+

Private Service Gateway

+

sumi.work

+
+
+ +

服务入口 · HTTPS 已启用

+ +
+ + 安全连接 + 在线 +
+ +

+ 一个简洁的内部服务导航页。常用入口集中展示，减少记忆路径，打开即用。 +

+
+ +
+ + 🚀 + FRP 面板 + 内网穿透管理 + + + + 🧑‍💻 + Git 服务 + 代码仓库 + + + + 📁 + SVN 服务 + 版本控制 + + + + 🔄 + Syncthing + 文件同步 + +
+
+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..a1cb675 --- /dev/null +++ b/script.js @@ -0,0 +1,5 @@ +const year = document.querySelector("#year"); + +if (year) { + year.textContent = new Date().getFullYear(); +} diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..31e6be0 --- /dev/null +++ b/styles.css @@ -0,0 +1,366 @@ +:root { + color-scheme: dark; + --bg-1: #6679e2; + --bg-2: #7856b8; + --card: rgba(255, 255, 255, 0.16); + --card-strong: rgba(255, 255, 255, 0.22); + --card-line: rgba(255, 255, 255, 0.24); + --text: #ffffff; + --muted: rgba(255, 255, 255, 0.74); + --soft: rgba(255, 255, 255, 0.1); + --green: #35d69d; + --blue: #76c8ff; + --coral: #ff9b83; + --gold: #ffd35d; + --mint: #7ff0cf; + --shadow: 0 32px 90px rgba(32, 27, 81, 0.34); + font-family: + Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + "PingFang SC", "Microsoft YaHei", sans-serif; +} + +* { + box-sizing: border-box; +} + +html { + min-height: 100%; +} + +body { + min-width: 320px; + min-height: 100svh; + margin: 0; + color: var(--text); + background: + radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.2), transparent 28rem), + radial-gradient(circle at 80% 20%, rgba(87, 224, 207, 0.14), transparent 24rem), + linear-gradient(135deg, var(--bg-1), var(--bg-2)); + overflow-x: hidden; +} + +body::before, +body::after { + position: fixed; + z-index: -1; + pointer-events: none; + content: ""; +} + +body::before { + inset: 0; + background-image: + linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px); + background-size: 58px 58px; + mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent 72%); +} + +body::after { + width: 42rem; + height: 42rem; + right: -14rem; + bottom: -18rem; + background: radial-gradient(circle, rgba(255, 210, 105, 0.18), transparent 68%); +} + +a { + color: inherit; + text-decoration: none; +} + +.shell { + display: grid; + grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr); + gap: clamp(22px, 4vw, 42px); + align-items: stretch; + width: min(980px, calc(100% - 40px)); + min-height: 100svh; + margin: 0 auto; + padding: clamp(34px, 8vh, 110px) 0 92px; +} + +.hero-panel, +.services { + position: relative; + border: 1px solid var(--card-line); + background: + linear-gradient(145deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0.1)), + var(--card); + box-shadow: var(--shadow); + backdrop-filter: blur(22px); +} + +.hero-panel { + display: flex; + min-height: 470px; + flex-direction: column; + justify-content: center; + padding: clamp(32px, 5vw, 54px); + border-radius: 28px; + overflow: hidden; +} + +.hero-panel::after { + position: absolute; + right: -80px; + bottom: -100px; + width: 260px; + height: 260px; + border: 1px solid rgba(255, 255, 255, 0.22); + border-radius: 999px; + content: ""; +} + +.brand-area { + display: flex; + gap: 18px; + align-items: center; + margin-bottom: 26px; +} + +.brand-mark { + display: grid; + width: 68px; + height: 68px; + place-items: center; + flex: 0 0 auto; + color: #573e91; + font-size: 2.2rem; + background: linear-gradient(135deg, #ffe26b, #ffc23f); + border-radius: 20px; + box-shadow: 0 18px 38px rgba(255, 198, 63, 0.3); +} + +.eyebrow { + margin: 0 0 8px; + color: rgba(255, 255, 255, 0.68); + font-size: 0.76rem; + font-weight: 800; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +h1 { + margin: 0; + font-size: clamp(3.4rem, 8vw, 6rem); + line-height: 0.95; + letter-spacing: 0; +} + +.subtitle { + margin: 0 0 28px; + color: rgba(255, 255, 255, 0.84); + font-size: clamp(1.08rem, 2.2vw, 1.35rem); + font-weight: 700; +} + +.status-row { + display: inline-flex; + width: fit-content; + align-items: center; + gap: 9px; + margin-bottom: 28px; + padding: 12px 16px; + color: #fff; + background: rgba(17, 28, 52, 0.22); + border: 1px solid rgba(53, 214, 157, 0.72); + border-radius: 999px; +} + +.status-row strong { + font-weight: 850; +} + +.status-row span:last-child { + color: rgba(255, 255, 255, 0.68); +} + +.status-dot { + width: 10px; + height: 10px; + background: var(--green); + border-radius: 999px; + box-shadow: 0 0 0 7px rgba(53, 214, 157, 0.14); +} + +.intro { + max-width: 34rem; + margin: 0; + color: var(--muted); + font-size: 1rem; + line-height: 1.8; +} + +.services { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 16px; + align-content: center; + padding: clamp(22px, 3vw, 30px); + border-radius: 28px; +} + +.service-card { + position: relative; + display: flex; + min-height: 168px; + flex-direction: column; + justify-content: flex-end; + padding: 22px; + overflow: hidden; + background: rgba(255, 255, 255, 0.15); + border: 1px solid rgba(255, 255, 255, 0.16); + border-radius: 22px; + transition: + transform 180ms ease, + background 180ms ease, + border-color 180ms ease, + box-shadow 180ms ease; +} + +.service-card::before { + position: absolute; + inset: 0; + opacity: 0; + content: ""; + transition: opacity 180ms ease; +} + +.service-card:hover, +.service-card:focus-visible { + transform: translateY(-5px); + background: var(--card-strong); + border-color: rgba(255, 255, 255, 0.36); + box-shadow: 0 20px 44px rgba(32, 27, 81, 0.2); + outline: none; +} + +.service-card:hover::before, +.service-card:focus-visible::before { + opacity: 1; +} + +.accent-blue::before { + background: linear-gradient(135deg, rgba(118, 200, 255, 0.22), transparent 62%); +} + +.accent-coral::before { + background: linear-gradient(135deg, rgba(255, 155, 131, 0.24), transparent 62%); +} + +.accent-gold::before { + background: linear-gradient(135deg, rgba(255, 211, 93, 0.24), transparent 62%); +} + +.accent-mint::before { + background: linear-gradient(135deg, rgba(127, 240, 207, 0.24), transparent 62%); +} + +.service-icon, +.service-title, +.service-desc { + position: relative; +} + +.service-icon { + display: grid; + width: 48px; + height: 48px; + place-items: center; + margin-bottom: auto; + font-size: 1.62rem; + background: rgba(255, 255, 255, 0.13); + border: 1px solid rgba(255, 255, 255, 0.15); + border-radius: 15px; +} + +.service-title { + margin-top: 26px; + font-size: 1.16rem; + font-weight: 900; +} + +.service-desc { + margin-top: 7px; + color: rgba(255, 255, 255, 0.72); + font-size: 0.92rem; + font-weight: 650; +} + +.record { + position: fixed; + right: 28px; + bottom: 22px; + left: 28px; + display: flex; + align-items: center; + justify-content: center; + gap: 16px; + color: rgba(255, 255, 255, 0.58); + font-size: 0.86rem; +} + +.record a { + transition: color 160ms ease; +} + +.record a:hover, +.record a:focus-visible { + color: rgba(255, 255, 255, 0.92); +} + +@media (max-width: 820px) { + .shell { + grid-template-columns: 1fr; + width: min(620px, calc(100% - 28px)); + padding-top: 26px; + } + + .hero-panel { + min-height: auto; + } +} + +@media (max-width: 520px) { + .shell { + padding-bottom: 110px; + } + + .brand-area { + align-items: flex-start; + flex-direction: column; + } + + .brand-mark { + width: 58px; + height: 58px; + border-radius: 17px; + } + + h1 { + font-size: clamp(3rem, 16vw, 4.1rem); + } + + .services { + grid-template-columns: 1fr; + } + + .service-card { + min-height: 132px; + } + + .record { + flex-direction: column; + gap: 6px; + text-align: center; + } +} + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + transition-duration: 0.01ms !important; + } +}