未載入 Skill2950 tokens · 58412 ms
Design Read:以「雨夜港燈」為視覺語彙,將今晚末三班放在首屏中央,時間最大、航向次之、營運狀態一眼可辨。
設計參數:① 深海藍+航標橙 ② 手機優先、首屏完整呈現 ③ 時刻字級 44–64px、資訊對比至少 4.5:1。
精簡方向:移除導覽、促銷與非必要操作,只保留品牌、天候/行駛狀態及三班時刻。
```html
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#071b2c">
<title>雨港夜航|今晚最後三班船</title>
<style>
:root {
--navy: #071b2c;
--navy-soft: #0d2a40;
--paper: #f3f0e8;
--ink: #102536;
--muted: #61717c;
--line: #cfd5d4;
--orange: #ff9d42;
--green: #85d7ad;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
min-height: 100svh;
margin: 0;
color: #fff;
background:
radial-gradient(circle at 84% 9%, #174562 0, transparent 26rem),
linear-gradient(145deg, var(--navy-soft), var(--navy) 55%);
font-family:
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
body::before {
position: fixed;
inset: 0;
z-index: -1;
content: "";
opacity: .1;
background: repeating-linear-gradient(
112deg,
transparent 0 22px,
rgba(255,255,255,.8) 23px,
transparent 24px 47px
);
pointer-events: none;
}
.page {
width: min(100% - 32px, 1080px);
min-height: 100svh;
margin: auto;
padding: 28px 0 24px;
display: grid;
align-content: center;
gap: 24px;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
}
.mark {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border: 1px solid rgba(255,255,255,.25);
border-radius: 50%;
color: var(--orange);
font-size: 21px;
background: rgba(255,255,255,.06);
}
.brand strong {
display: block;
font-size: 19px;
letter-spacing: .14em;
}
.brand small {
display: block;
margin-top: 2px;
color: #a9bbc7;
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
}
.status {
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.pill {
padding: 8px 11px;
border: 1px solid rgba(255,255,255,.18);
border-radius: 999px;
color: #dbe6ec;
background: rgba(3,17,28,.34);
font-size: 13px;
font-weight: 650;
}
.pill.running {
color: #d9f7e8;
border-color: rgba(133,215,173,.45);
}
.dot {
display: inline-block;
width: 7px;
height: 7px;
margin-right: 6px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 4px rgba(133,215,173,.12);
}
.intro {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
}
.eyebrow {
margin: 0 0 7px;
color: var(--orange);
font-size: 12px;
font-weight: 800;
letter-spacing: .2em;
}
h1 {
margin: 0;
font-size: clamp(32px, 5vw, 58px);
line-height: 1;
letter-spacing: -.04em;
}
.hint {
margin: 0 0 3px;
color: #a9bbc7;
font-size: 14px;
}
.schedule {
overflow: hidden;
color: var(--ink);
background: var(--paper);
border: 1px solid rgba(255,255,255,.28);
border-radius: 22px;
box-shadow: 0 24px 64px rgba(0,0,0,.28);
}
.trip {
min-height: 132px;
padding: 24px 30px;
display: grid;
grid-template-columns: minmax(150px, .7fr) 1.6fr auto;
align-items: center;
gap: 26px;
border-bottom: 1px solid var(--line);
}
.trip:last-child {
border-bottom: 0;
background: #fff7e9;
}
time {
font-size: clamp(44px, 6vw, 68px);
font-weight: 850;
line-height: .9;
letter-spacing: -.055em;
font-variant-numeric: tabular-nums;
}
.route {
display: flex;
align-items: center;
gap: 14px;
font-size: clamp(19px, 2.5vw, 28px);
font-weight: 760;
}
.arrow {
position: relative;
width: clamp(38px, 6vw, 68px);
height: 1px;
background: #98a4aa;
}
.arrow::after {
position: absolute;
top: -4px;
right: 0;
width: 8px;
height: 8px;
content: "";
border-top: 1px solid #98a4aa;
border-right: 1px solid #98a4aa;
transform: rotate(45deg);
}
.tag {
padding: 7px 10px;
border: 1px solid #d7a369;
border-radius: 999px;
color: #9a541b;
font-size: 12px;
font-weight: 800;
letter-spacing: .08em;
}
.trip:not(:last-child) .tag { visibility: hidden; }
footer {
display: flex;
justify-content: space-between;
color: #8fa5b3;
font-size: 12px;
letter-spacing: .05em;
}
@media (max-width: 650px) {
.page {
width: min(100% - 24px, 480px);
padding: 18px 0;
gap: 18px;
}
header, .intro {
align-items: flex-start;
flex-direction: column;
gap: 14px;
}
.status { align-self: stretch; }
.pill { flex: 1; text-align: center; }
.hint { display: none; }
.trip {
min-height: 116px;
padding: 20px;
grid-template-columns: 1fr auto;
gap: 12px 16px;
}
.route {
grid-column: 1 / -1;
grid-row: 2;
gap: 11px;
}
.tag { grid-column: 2; grid-row: 1; }
.arrow { flex: 1; }
footer span:last-child { display: none; }
}
</style>
</head>
<body>
<main class="page">
<header>
<div class="brand">
<div class="mark" aria-hidden="true">≈</div>
<div>
<strong>雨港夜航</strong>
<small>Keelung Night Ferry</small>
</div>
</div>
<div class="status" aria-label="目前營運狀態">
<span class="pill">小雨</span>
<span class="pill running"><span class="dot"></span>正常行駛</span>
</div>
</header>
<section class="intro" aria-labelledby="schedule-title">
<div>
<p class="eyebrow">TONIGHT · 今晚</p>
<h1 id="schedule-title">最後三班船</h1>
</div>
<p class="hint">認清時間與方向,即刻出發。</p>
</section>
<section class="schedule" aria-label="今晚最後三班渡輪時刻">
<article class="trip">
<time datetime="21:10">21:10</time>
<div class="route">
<span>正濱</span><span class="arrow" aria-hidden="true"></span><span>八斗子</span>
</div>
<span class="tag" aria-hidden="true">末班</span>
</article>
<article class="trip">
<time datetime="22:05">22:05</time>
<div class="route">
<span>八斗子</span><span class="arrow" aria-hidden="true"></span><span>正濱</span>
</div>
<span class="tag" aria-hidden="true">末班</span>
</article>
<article class="trip">
<time datetime="23:20">23:20</time>
<div class="route">
<span>正濱</span><span class="arrow" aria-hidden="true"></span><span>八斗子</span>
</div>
<span class="tag">今夜末班</span>
</article>
</section>
<footer>
<span>基隆夜間渡輪時刻服務</span>
<span>RAIN PORT · NIGHT SAILING</span>
</footer>
</main>
</body>
</html>
```
已載入 Skill +3945 tokens · 86076 ms
Design Read:Reading this as: 夜間渡輪服務首頁 for 臨時出發的通勤者, with a 高辨識、低干擾的港口資訊語言, leaning toward 原生 CSS 的公共運輸資訊系統。
設計參數:`DESIGN_VARIANCE: 5`、`MOTION_INTENSITY: 2`、`VISUAL_DENSITY: 5`
精簡方向:班次先於品牌,以超大時間、清楚方向與單一綠色狀態,讓今晚最後三班在首屏完成判讀。
```html
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#101c23">
<title>雨港夜航|今晚最後三班</title>
<meta name="description" content="基隆夜間渡輪今晚最後三班:小雨,正常行駛。">
<style>
:root {
color-scheme: dark;
--bg: #101c23;
--panel: #16262f;
--panel-2: #1b2e38;
--text: #f2f5f4;
--muted: #a9b7bc;
--line: #38505b;
--accent: #75d7a0;
--accent-ink: #0c2618;
--radius: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
min-height: 100dvh;
background:
radial-gradient(circle at 88% 10%, rgba(117,215,160,.08), transparent 25rem),
linear-gradient(145deg, #13242d 0%, var(--bg) 55%, #0d181e 100%);
color: var(--text);
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
-webkit-font-smoothing: antialiased;
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
opacity: .14;
background-image: repeating-linear-gradient(
112deg,
transparent 0 18px,
rgba(214,231,237,.22) 19px,
transparent 20px 43px
);
mask-image: linear-gradient(to bottom, #000, transparent 48%);
}
.shell {
width: min(1180px, calc(100% - 40px));
min-height: 100dvh;
margin: auto;
padding: 22px 0 28px;
display: flex;
flex-direction: column;
position: relative;
}
header {
min-height: 58px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
border-bottom: 1px solid var(--line);
}
.brand {
display: flex;
align-items: baseline;
gap: 12px;
white-space: nowrap;
}
.brand strong {
font-size: 1.12rem;
letter-spacing: .08em;
}
.brand span {
color: var(--muted);
font-size: .82rem;
}
.service {
display: flex;
align-items: center;
gap: 10px;
font-weight: 750;
white-space: nowrap;
}
.status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px rgba(117,215,160,.13);
}
main {
flex: 1;
display: grid;
grid-template-columns: minmax(0, 1.65fr) minmax(250px, .72fr);
gap: clamp(28px, 6vw, 82px);
align-items: center;
padding: clamp(34px, 6vh, 68px) 0;
}
.schedule h1 {
margin: 0 0 10px;
font-size: clamp(2rem, 5vw, 4.6rem);
line-height: .98;
letter-spacing: -.055em;
}
.schedule-intro {
margin: 0 0 clamp(26px, 4vh, 42px);
color: var(--muted);
font-size: clamp(.98rem, 1.4vw, 1.08rem);
}
.departures {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--line);
}
.departure {
display: grid;
grid-template-columns: clamp(110px, 18vw, 200px) 1fr auto;
align-items: center;
gap: clamp(16px, 3vw, 36px);
padding: clamp(18px, 3vh, 29px) 0;
border-bottom: 1px solid var(--line);
}
time {
font-size: clamp(2.35rem, 6vw, 5.7rem);
line-height: .82;
font-weight: 800;
letter-spacing: -.065em;
font-variant-numeric: tabular-nums;
}
.route {
display: flex;
align-items: center;
min-width: 0;
font-size: clamp(1.05rem, 2.2vw, 1.65rem);
font-weight: 720;
letter-spacing: -.02em;
}
.arrow {
flex: 0 1 64px;
min-width: 24px;
height: 1px;
margin: 0 clamp(10px, 2vw, 22px);
background: var(--muted);
position: relative;
}
.arrow::after {
content: "";
position: absolute;
right: 0;
top: -4px;
width: 8px;
height: 8px;
border-top: 1px solid var(--muted);
border-right: 1px solid var(--muted);
transform: rotate(45deg);
}
.order {
color: var(--muted);
font-size: .78rem;
font-weight: 700;
letter-spacing: .08em;
white-space: nowrap;
}
.departure:last-child time { color: var(--accent); }
.departure:last-child .order {
color: var(--accent-ink);
background: var(--accent);
border-radius: var(--radius);
padding: 7px 10px;
}
aside {
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 34px;
padding: clamp(22px, 3vw, 34px);
border-radius: var(--radius);
background: rgba(27,46,56,.78);
border: 1px solid var(--line);
}
.weather-label, .note-label {
margin: 0 0 10px;
color: var(--muted);
font-size: .78rem;
font-weight: 700;
letter-spacing: .1em;
}
.weather {
margin: 0;
font-size: clamp(2.3rem, 4vw, 4rem);
font-weight: 780;
letter-spacing: -.05em;
}
.weather-note {
margin: 10px 0 0;
color: var(--muted);
line-height: 1.65;
}
.operation {
padding-top: 22px;
border-top: 1px solid var(--line);
}
.operation strong {
display: block;
color: var(--accent);
font-size: 1.25rem;
}
.operation span {
display: block;
margin-top: 7px;
color: var(--muted);
font-size: .88rem;
line-height: 1.5;
}
footer {
display: flex;
justify-content: space-between;
gap: 24px;
color: var(--muted);
font-size: .78rem;
}
@media (max-width: 760px) {
.shell { width: min(100% - 28px, 620px); }
header { min-height: 68px; }
.brand span { display: none; }
main {
grid-template-columns: 1fr;
gap: 24px;
align-items: start;
padding: 32px 0 24px;
}
.departure {
grid-template-columns: 96px 1fr;
gap: 14px;
}
.route { font-size: 1rem; }
.order { grid-column: 2; }
.arrow { margin: 0 9px; }
aside {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: end;
gap: 18px;
}
.operation { padding: 0 0 0 18px; border-top: 0; border-left: 1px solid var(--line); }
footer { flex-direction: column; gap: 6px; }
}
@media (max-width: 390px) {
.service { font-size: .86rem; }
.departure { grid-template-columns: 82px 1fr; }
aside { grid-template-columns: 1fr; }
.operation { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (prefers-reduced-transparency: reduce) {
aside { background: var(--panel-2); }
}
</style>
</head>
<body>
<div class="shell">
<header>
<div class="brand">
<strong>雨港夜航</strong>
<span>基隆夜間渡輪</span>
</div>
<div class="service" aria-label="目前正常行駛">
<span class="status-dot" aria-hidden="true"></span>
正常行駛
</div>
</header>
<main>
<section class="schedule" aria-labelledby="schedule-title">
<h1 id="schedule-title">今晚最後三班</h1>
<p class="schedule-intro">依開航時間排序,請提早抵達碼頭。</p>
<ol class="departures">
<li class="departure">
<time datetime="21:10">21:10</time>
<div class="route"><span>正濱</span><i class="arrow"></i><span>八斗子</span></div>
<span class="order">倒數第三班</span>
</li>
<li class="departure">
<time datetime="22:05">22:05</time>
<div class="route"><span>八斗子</span><i class="arrow"></i><span>正濱</span></div>
<span class="order">倒數第二班</span>
</li>
<li class="departure">
<time datetime="23:20">23:20</time>
<div class="route"><span>正濱</span><i class="arrow"></i><span>八斗子</span></div>
<span class="order">末班船</span>
</li>
</ol>
</section>
<aside aria-label="今晚航行資訊">
<div>
<p class="weather-label">港區天候</p>
<p class="weather">小雨</p>
<p class="weather-note">候船時請留意濕滑地面。</p>
</div>
<div class="operation">
<p class="note-label">航行狀態</p>
<strong>正常行駛</strong>
<span>三班船皆按表定時間開航。</span>
</div>
</aside>
</main>
<footer>
<span>雨港夜航</span>
<span>正濱碼頭 ⇄ 八斗子碼頭</span>
</footer>
</div>
</body>
</html>
```