66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
|
import './App.css'
|
|||
|
|
|
|||
|
|
function App() {
|
|||
|
|
return (
|
|||
|
|
<main className="app-shell">
|
|||
|
|
<section className="hero-panel">
|
|||
|
|
<div className="hero-copy">
|
|||
|
|
<span className="eyebrow">Vite + React + TypeScript</span>
|
|||
|
|
<h1>羽毛球記分板</h1>
|
|||
|
|
<p className="hero-text">
|
|||
|
|
專案已完成初始化，接下來可以往單打、雙打、發球權切換、局數統計與賽事模式繼續擴充。
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="status-strip" aria-label="專案狀態">
|
|||
|
|
<span>即時比分</span>
|
|||
|
|
<span>局數追蹤</span>
|
|||
|
|
<span>Docker Ready</span>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section className="scoreboard-card" aria-label="比賽記分板預覽">
|
|||
|
|
<div className="board-header">
|
|||
|
|
<div>
|
|||
|
|
<p className="label">友誼賽</p>
|
|||
|
|
<h2>中央球場</h2>
|
|||
|
|
</div>
|
|||
|
|
<div className="match-meta">
|
|||
|
|
<span>第 2 局</span>
|
|||
|
|
<span>21 分制</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="score-grid">
|
|||
|
|
<article className="team-card">
|
|||
|
|
<p className="team-tag">A 隊</p>
|
|||
|
|
<h3>林 / 陳</h3>
|
|||
|
|
<strong>18</strong>
|
|||
|
|
<p>上一局 21 : 16</p>
|
|||
|
|
</article>
|
|||
|
|
|
|||
|
|
<article className="team-card team-card-active">
|
|||
|
|
<p className="team-tag">B 隊</p>
|
|||
|
|
<h3>王 / 黃</h3>
|
|||
|
|
<strong>21</strong>
|
|||
|
|
<p>目前發球權</p>
|
|||
|
|
</article>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="detail-grid">
|
|||
|
|
<div>
|
|||
|
|
<span className="label">本局節奏</span>
|
|||
|
|
<p>多拍相持偏多，比分進入收尾階段。</p>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<span className="label">下一步</span>
|
|||
|
|
<p>把計分控制、局數規則與賽事資料模型串起來。</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</main>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default App
|