byp4a55 professor6T9

Linux SamCT211 4.4.302+ #86009 SMP Wed Nov 26 18:19:20 CST 2025 x86_64
nginx/1.23.1
192.168.4.211

File Name : answer v2.html

<!DOCTYPE html>
<html lang="zh-HK">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>餐廳介紹網站（範例答案）</title>
    <style>
      /* ===== 全域 ===== */
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
        background-color: #f9f9f9;
        color: #111;
        display: flex;
        flex-direction: column; /* 讓 footer 黏底 */
        min-height: 100vh;
      }
      a {
        color: inherit;
      }

/* ===== Header / Nav ===== */
      header {
        background-color: #333;
        color: #fff;
        text-align: center;
        padding: 18px 12px;
      }
      nav {
        background-color: #444;
        padding: 10px 12px;
        display: flex;
        flex-wrap: wrap; /* 手機可換行 */
        gap: 8px;
        justify-content: center;
      }
      nav a {
        color: #fff;
        text-decoration: none;
        padding: 8px 10px;
        background-color: #1f2937;
        border-radius: 6px;
      }
      nav a:hover {
        text-decoration: underline;
      }

/* ===== 版心容器 ===== */
      main {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 16px;
        flex: 1; /* 撐開中間內容，令 footer 黏底 */
      }

/* ===== Hero ===== */
      .hero {
        background: linear-gradient(135deg, #ffe9cc, #ffeef5);
        border: 1px solid #e6e6e6;
        border-radius: 12px;
        padding: 28px 16px;
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        justify-content: center;
        min-height: 36vh;
      }
      .hero h1 {
        margin: 0;
        font-size: 28px;
      }
      .hero p {
        margin: 0;
        color: #555;
      }
      .hero .cta {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
      }
      .btn-primary,
      .btn-secondary {
        display: inline-block;
        padding: 10px 14px;
        border-radius: 8px;
        color: #fff;
        text-decoration: none;
      }
      .btn-primary {
        background-color: #0a66c2;
      }
      .btn-secondary {
        background-color: #111;
      }

/* ===== 菜單卡片 ===== */
      .section {
        margin-top: 16px;
      }
      .section h2 {
        margin: 0 0 12px;
        font-size: 22px;
        text-align: center;
      }

.grid {
        display: flex;
        flex-wrap: wrap; /* 自動換行 */
        gap: 12px;
      }
      .card {
        flex: 1 1 280px; /* 最小 280px，空間足夠時平均分配 */
        background-color: #fff;
        border: 1px solid #e6e6e6;
        border-radius: 10px;
        padding: 14px;
        display: flex; /* 讓內部元素可上下分佈 */
        flex-direction: column;
        gap: 8px;
        min-height: 220px; /* 輕度等高（仍以內容為主） */
      }
      .thumb {
        height: 120px;
        border-radius: 8px;
        background: repeating-linear-gradient(
          45deg,
          #fde68a 0 12px,
          #fca5a5 12px 24px
        );
      }
      .title {
        font-weight: bold;
      }
      .meta {
        color: #666;
        font-size: 14px;
      }
      .spacer {
        flex: 1;
      } /* 推動 CTA 到底部，產生等高視覺 */
      .price-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .price {
        font-weight: 800;
        color: #e11d48;
      }
      .mini-btn {
        background-color: #111;
        color: #fff;
        padding: 8px 10px;
        border-radius: 6px;
        text-decoration: none;
      }

/* ===== 餐廳資訊 ===== */
      .info {
        background-color: #fff;
        border: 1px solid #e6e6e6;
        border-radius: 10px;
        padding: 14px;
        display: flex;
        flex-direction: column; /* 手機先上下堆疊 */
        gap: 12px;
        margin-top: 16px;
      }
      .map {
        height: 220px;
        background: conic-gradient(
          from 90deg at 50% 50%,
          #dbeafe,
          #bfdbfe,
          #93c5fd,
          #dbeafe
        );
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #1e3a8a;
        font-weight: bold;
      }
      .info-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .muted {
        color: #666;
      }

/* ===== Footer ===== */
      footer {
        background-color: #111;
        color: #fff;
        text-align: center;
        padding: 16px 12px;
        margin-top: 16px;
      }

/* ===== 斷點：平板（≥768px） ===== */
      @media (min-width: 768px) {
        .hero {
          padding: 36px 24px;
        }
        .grid {
          gap: 14px;
        }
        .info {
          flex-direction: row; /* 左右並排 */
          gap: 14px;
        }
        .map {
          flex: 1 1 420px;
        }
        .info-list {
          flex: 1 1 320px;
        }
      }

/* ===== 斷點：桌機（≥1200px） ===== */
      @media (min-width: 1200px) {
        .grid {
          gap: 16px;
        }
        .card {
          padding: 16px;
        }
        .hero h1 {
          font-size: 32px;
        }
      }
    </style>
  </head>
  <body>
    
    <header>
      <h1>陳記餐廳</h1>
      <p>每日新鮮食材 · 港式風味</p>
    </header>

<nav>
      <a href="#menu">菜單</a>
      <a href="#info">資訊</a>
      <a href="#contact">聯絡</a>
    </nav>

<main>
      
      <section class="hero" id="home">
        <h1 id="hero-title">美味從這裡開始</h1>
        <p>堂食外帶皆可 · 歡迎來電訂座</p>
        <div class="cta">
          <a href="#menu" class="btn-primary">立即點餐</a>
          <a href="#info" class="btn-secondary">查看資訊</a>
        </div>
      </section>

<section class="section" id="menu">
        <h2 id="menu-title">人氣菜單</h2>
        <div class="grid">
          
          <article class="card">
            <div class="thumb"></div>
            <div class="title">菠蘿油</div>
            <div class="meta">外脆內軟，熱騰騰夾牛油</div>
            <div class="spacer"></div>
            <div class="price-row">
              <div class="price">$38</div>
              <a class="mini-btn" href="#">加入</a>
            </div>
          </article>
          <article class="card">
            <div class="thumb"></div>
            <div class="title">凍檸茶</div>
            <div class="meta">清爽解渴，茶香餘韻</div>
            <div class="spacer"></div>
            <div class="price-row">
              <div class="price">$28</div>
              <a class="mini-btn" href="#">加入</a>
            </div>
          </article>
          <article class="card">
            <div class="thumb"></div>
            <div class="title">叉燒飯</div>
            <div class="meta">蜜汁叉燒配青菜與白飯</div>
            <div class="spacer"></div>
            <div class="price-row">
              <div class="price">$62</div>
              <a class="mini-btn" href="#">加入</a>
            </div>
          </article>
          <article class="card">
            <div class="thumb"></div>
            <div class="title">西多士</div>
            <div class="meta">花生醬／煉奶，自選口味</div>
            <div class="spacer"></div>
            <div class="price-row">
              <div class="price">$36</div>
              <a class="mini-btn" href="#">加入</a>
            </div>
          </article>
          <article class="card">
            <div class="thumb"></div>
            <div class="title">揚州炒飯</div>
            <div class="meta">粒粒分明，鑊氣十足（可加辣）</div>
            <div class="spacer"></div>
            <div class="price-row">
              <div class="price">$58</div>
              <a class="mini-btn" href="#">加入</a>
            </div>
          </article>
          <article class="card">
            <div class="thumb"></div>
            <div class="title">絲襪奶茶</div>
            <div class="meta">香濃順口，餘韻回甘</div>
            <div class="spacer"></div>
            <div class="price-row">
              <div class="price">$26</div>
              <a class="mini-btn" href="#">加入</a>
            </div>
          </article>
        </div>
      </section>

<section class="section" id="info">
        <h2 id="info-title">餐廳資訊</h2>
        <div class="info">
          <div class="map">地圖佔位</div>
          <div class="info-list">
            <div><strong>地址：</strong>旺角某某街 88 號 1 樓</div>
            <div><strong>電話：</strong>(852) 1234-5678</div>
            <div><strong>營業時間：</strong>每日 11:00 – 21:30</div>
            <div class="muted" id="contact">如需訂位，歡迎來電或現場取號。</div>
          </div>
        </div>
      </section>
    </main>

Name	Type	Size	Owner/Group	Permission	Last Modified	Actions
.	dir	-	1258/100	0777	2025-10-13 03:49:48
..	dir	-	1258/100	0777	2026-02-28 02:05:28
images	dir	-	1258/100	0777	2025-10-13 03:50:10
answer v2.html	text/html	9.31 KB	1258/100	0666	2025-08-27 08:29:08
footer.html	text/html	288 B	1258/100	0666	2025-08-22 05:52:10
header.html	text/html	330 B	1258/100	0666	2025-08-22 05:33:34
index.html	text/html	1.79 KB	1258/100	0666	2025-08-25 10:01:10
menu.html	text/html	3.2 KB	1258/100	0666	2025-08-22 05:50:24
nav.html	text/html	499 B	1258/100	0666	2025-08-22 05:33:04
reservation.html	text/html	1.67 KB	1258/100	0666	2025-08-22 05:51:26
script.js	text/plain	160 B	1258/100	0666	2025-08-22 07:17:30
style.css	text/plain	3.04 KB	1258/100	0666	2025-08-22 05:07:38
餐廳介紹網站.docx	application/vnd.openxmlformats-officedocument.wordprocessingml.document	17.22 KB	1258/100	0666	2025-08-22 02:25:46

Team Anon Force

https://t.me/Professor6T9x