103 lines
4.7 KiB
HTML
103 lines
4.7 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="theme-color" content="#ffd84d">
|
|
<title>whats2eat — 今天中午吃什么？</title>
|
|
<meta name="description" content="一个人或和同事，三秒决定今天中午吃什么。">
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
<header>
|
|
<a class="logo" href="#" aria-label="whats2eat 首页">
|
|
<span class="logo-mark" aria-hidden="true">🍳</span>
|
|
<span>whats2eat</span>
|
|
</a>
|
|
<nav class="header-actions" aria-label="个人菜单">
|
|
<button class="text-button" data-open-list="favorites">♡ 收藏 <span id="favoriteCount">0</span></button>
|
|
<button class="text-button" data-open-list="history">↺ 历史</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="hero" aria-labelledby="hero-title">
|
|
<span class="eyebrow">今天也要好好吃饭</span>
|
|
<h1 id="hero-title">中午<br>吃什么？</h1>
|
|
<p class="subtitle" id="heroSubtitle">一个人的午饭，也值得认真决定。</p>
|
|
|
|
<div class="mode-switch" role="group" aria-label="用餐模式">
|
|
<button class="mode active" data-mode="solo" aria-pressed="true">
|
|
<span aria-hidden="true">🙋</span>
|
|
<span><strong>一个人吃</strong><small>简单、快速、不踩雷</small></span>
|
|
</button>
|
|
<button class="mode" data-mode="team" aria-pressed="false">
|
|
<span aria-hidden="true">👥</span>
|
|
<span><strong>和同事吃</strong><small>适合分享、大家都开心</small></span>
|
|
</button>
|
|
</div>
|
|
|
|
<button class="decide" id="decideBtn">帮我决定 ↗</button>
|
|
<p class="status" id="status" aria-live="polite">选好偏好，点一下就有答案。</p>
|
|
<div class="doodle" aria-hidden="true"></div>
|
|
</section>
|
|
|
|
<aside class="panel" aria-label="午餐偏好与推荐结果">
|
|
<section class="card filters">
|
|
<div class="filter-block">
|
|
<h2>① 今天想吃什么味？</h2>
|
|
<div class="chips" id="flavorChips">
|
|
<button class="chip active" data-value="all" aria-pressed="true">都可以</button>
|
|
<button class="chip" data-value="light" aria-pressed="false">清淡</button>
|
|
<button class="chip" data-value="spicy" aria-pressed="false">香辣</button>
|
|
<button class="chip" data-value="rich" aria-pressed="false">浓郁</button>
|
|
<button class="chip" data-value="fresh" aria-pressed="false">鲜爽</button>
|
|
</div>
|
|
</div>
|
|
<div class="filter-block">
|
|
<h2>② 今天准备花多少？</h2>
|
|
<div class="chips" id="budgetChips">
|
|
<button class="chip active" data-value="all" aria-pressed="true">随缘</button>
|
|
<button class="chip" data-value="low" aria-pressed="false">¥ 省点</button>
|
|
<button class="chip" data-value="mid" aria-pressed="false">¥¥ 日常</button>
|
|
<button class="chip" data-value="high" aria-pressed="false">¥¥¥ 犒劳</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card result" id="resultCard" aria-live="polite">
|
|
<span class="mode-badge" id="modeBadge">一人食推荐</span>
|
|
<div class="result-icon" id="resultIcon">🥢</div>
|
|
<p class="result-kicker" id="resultKicker">今日候选</p>
|
|
<h2 class="result-name" id="resultName">等待开奖</h2>
|
|
<p class="result-meta" id="resultMeta">选好偏好，然后交给我</p>
|
|
<div class="result-actions">
|
|
<button class="small-btn" id="againBtn">↻ 再来一次</button>
|
|
<button class="small-btn" id="saveBtn" aria-pressed="false">♡ 收藏</button>
|
|
</div>
|
|
</section>
|
|
</aside>
|
|
</main>
|
|
|
|
<section class="collection card" aria-labelledby="collectionTitle">
|
|
<div class="collection-head">
|
|
<div>
|
|
<p class="section-kicker">MY LUNCH LOG</p>
|
|
<h2 id="collectionTitle">我的午饭口袋</h2>
|
|
</div>
|
|
<div class="tabs" role="tablist">
|
|
<button class="tab active" role="tab" data-list="favorites" aria-selected="true">我的收藏</button>
|
|
<button class="tab" role="tab" data-list="history" aria-selected="false">最近历史</button>
|
|
</div>
|
|
</div>
|
|
<div class="meal-list" id="mealList"></div>
|
|
<button class="clear-button" id="clearHistory" hidden>清空历史</button>
|
|
</section>
|
|
|
|
<footer><span>whats2eat © 2026</span><span>认真吃饭，是每天最小的幸福。</span></footer>
|
|
</div>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|