372 lines
14 KiB
HTML
372 lines
14 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="theme-color" content="#ffd84d">
|
|
<title>whats2eat — 今天中午吃什么？</title>
|
|
<meta name="description" content="不纠结，三秒决定今天中午吃什么。">
|
|
<style>
|
|
:root {
|
|
--ink: #202020;
|
|
--muted: #6d6a62;
|
|
--paper: #fffdf6;
|
|
--yellow: #ffd84d;
|
|
--yellow-deep: #f5c925;
|
|
--green: #bce8b2;
|
|
--pink: #ffc4d5;
|
|
--line: #202020;
|
|
--shadow: 5px 5px 0 var(--line);
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
color: var(--ink);
|
|
background:
|
|
radial-gradient(circle at 10% 8%, rgba(255,216,77,.45) 0 8%, transparent 8.2%),
|
|
radial-gradient(circle at 90% 86%, rgba(188,232,178,.48) 0 9%, transparent 9.2%),
|
|
var(--paper);
|
|
font-family: ui-rounded, "SF Pro Rounded", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
|
|
}
|
|
|
|
button { font: inherit; color: inherit; }
|
|
button:focus-visible { outline: 3px solid #5c56ff; outline-offset: 3px; }
|
|
|
|
.page {
|
|
width: min(1080px, calc(100% - 32px));
|
|
margin: 0 auto;
|
|
padding: 24px 0 34px;
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
margin-bottom: 34px;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 22px;
|
|
font-weight: 900;
|
|
letter-spacing: -.04em;
|
|
}
|
|
|
|
.logo-mark {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 39px;
|
|
height: 39px;
|
|
border: 2px solid var(--line);
|
|
border-radius: 50% 50% 46% 54%;
|
|
background: var(--yellow);
|
|
transform: rotate(-6deg);
|
|
box-shadow: 2px 2px 0 var(--line);
|
|
}
|
|
|
|
.tiny-note { color: var(--muted); font-size: 13px; }
|
|
|
|
main {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.2fr) minmax(290px, .8fr);
|
|
gap: 28px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.hero {
|
|
position: relative;
|
|
min-height: 560px;
|
|
padding: clamp(28px, 5vw, 62px);
|
|
overflow: hidden;
|
|
border: 2px solid var(--line);
|
|
border-radius: 34px;
|
|
background: var(--yellow);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.eyebrow {
|
|
display: inline-block;
|
|
padding: 7px 12px;
|
|
border: 2px solid var(--line);
|
|
border-radius: 999px;
|
|
background: #fff;
|
|
font-weight: 800;
|
|
font-size: 13px;
|
|
transform: rotate(-2deg);
|
|
}
|
|
|
|
h1 {
|
|
max-width: 580px;
|
|
margin: 24px 0 12px;
|
|
font-size: clamp(48px, 8vw, 90px);
|
|
line-height: .94;
|
|
letter-spacing: -.07em;
|
|
}
|
|
|
|
.subtitle {
|
|
max-width: 460px;
|
|
margin: 0 0 34px;
|
|
font-size: clamp(16px, 2vw, 20px);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.decide {
|
|
position: relative;
|
|
z-index: 2;
|
|
min-width: 190px;
|
|
padding: 17px 24px;
|
|
border: 2px solid var(--line);
|
|
border-radius: 16px;
|
|
background: var(--ink);
|
|
color: #fff;
|
|
box-shadow: 4px 4px 0 rgba(255,255,255,.75);
|
|
font-size: 18px;
|
|
font-weight: 900;
|
|
cursor: pointer;
|
|
transition: transform .15s, box-shadow .15s;
|
|
}
|
|
|
|
.decide:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 rgba(255,255,255,.8); }
|
|
.decide:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 rgba(255,255,255,.8); }
|
|
|
|
.doodle {
|
|
position: absolute;
|
|
right: 36px;
|
|
bottom: 30px;
|
|
width: clamp(150px, 30%, 220px);
|
|
aspect-ratio: 1;
|
|
border: 3px solid var(--line);
|
|
border-radius: 50%;
|
|
background: #fff9e3;
|
|
box-shadow: inset 0 0 0 16px #fff;
|
|
transform: rotate(8deg);
|
|
}
|
|
.doodle::before, .doodle::after {
|
|
content: "";
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
background: var(--pink);
|
|
}
|
|
.doodle::before { width: 44%; height: 27%; left: 20%; top: 30%; transform: rotate(-14deg); }
|
|
.doodle::after { width: 23%; height: 20%; right: 14%; bottom: 21%; background: var(--green); }
|
|
|
|
.panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
}
|
|
|
|
.card {
|
|
padding: 24px;
|
|
border: 2px solid var(--line);
|
|
border-radius: 24px;
|
|
background: #fff;
|
|
box-shadow: 4px 4px 0 var(--line);
|
|
}
|
|
|
|
.card h2 { margin: 0 0 16px; font-size: 17px; }
|
|
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
|
|
.chip {
|
|
padding: 9px 13px;
|
|
border: 1.5px solid var(--line);
|
|
border-radius: 999px;
|
|
background: #fff;
|
|
cursor: pointer;
|
|
transition: background .15s, transform .15s;
|
|
}
|
|
.chip:hover { transform: translateY(-2px); }
|
|
.chip.active { background: var(--green); font-weight: 800; box-shadow: 2px 2px 0 var(--line); }
|
|
|
|
.result {
|
|
flex: 1;
|
|
display: grid;
|
|
align-content: center;
|
|
min-height: 250px;
|
|
background: #fff6f9;
|
|
text-align: center;
|
|
}
|
|
.result-icon { font-size: 58px; line-height: 1; }
|
|
.result-kicker { margin: 14px 0 5px; color: var(--muted); font-size: 13px; font-weight: 700; }
|
|
.result-name { margin: 0; font-size: clamp(30px, 5vw, 44px); letter-spacing: -.05em; }
|
|
.result-meta { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
|
|
.result-actions { display: flex; justify-content: center; gap: 9px; margin-top: 18px; }
|
|
.small-btn { padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 11px; background: #fff; cursor: pointer; font-weight: 700; }
|
|
.small-btn.saved { background: var(--pink); }
|
|
|
|
.shuffling { animation: shuffle .55s ease both; }
|
|
@keyframes shuffle {
|
|
0% { transform: rotate(0) scale(1); opacity: 1; }
|
|
35% { transform: rotate(-4deg) scale(.88); opacity: .25; }
|
|
70% { transform: rotate(3deg) scale(1.04); }
|
|
100% { transform: rotate(0) scale(1); opacity: 1; }
|
|
}
|
|
|
|
.status { min-height: 20px; margin: 18px 0 0; font-size: 13px; font-weight: 700; }
|
|
|
|
footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 28px; color: var(--muted); font-size: 13px; }
|
|
|
|
@media (max-width: 780px) {
|
|
.page { width: min(100% - 22px, 620px); padding-top: 14px; }
|
|
header { margin-bottom: 18px; }
|
|
.tiny-note { display: none; }
|
|
main { grid-template-columns: 1fr; }
|
|
.hero { min-height: 510px; border-radius: 26px; }
|
|
.doodle { right: 24px; bottom: 20px; }
|
|
.card { border-radius: 20px; }
|
|
footer { flex-direction: column; gap: 4px; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
<header>
|
|
<div class="logo"><span class="logo-mark" aria-hidden="true">🍳</span> whats2eat</div>
|
|
<div class="tiny-note">你的午饭决定器 · 拒绝选择困难</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="hero" aria-labelledby="hero-title">
|
|
<span class="eyebrow">今天也要好好吃饭</span>
|
|
<h1 id="hero-title">中午<br>吃什么？</h1>
|
|
<p class="subtitle">别让宝贵的午休耗在纠结上。选选口味和预算，剩下的交给一点点运气。</p>
|
|
<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">
|
|
<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>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<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>
|
|
</section>
|
|
|
|
<section class="card result" id="resultCard" aria-live="polite">
|
|
<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>
|
|
|
|
<footer><span>whats2eat © 2026</span><span>认真吃饭，是每天最小的幸福。</span></footer>
|
|
</div>
|
|
|
|
<script>
|
|
const meals = [
|
|
{ name: '番茄牛腩饭', icon: '🍅', flavor: 'rich', budget: 'mid', note: '酸甜开胃 · 热乎下饭' },
|
|
{ name: '麻辣香锅', icon: '🌶️', flavor: 'spicy', budget: 'mid', note: '自由搭配 · 快乐翻倍' },
|
|
{ name: '鸡丝凉面', icon: '🍜', flavor: 'light', budget: 'low', note: '清爽不腻 · 午后轻盈' },
|
|
{ name: '海南鸡饭', icon: '🍗', flavor: 'light', budget: 'mid', note: '鲜嫩咸香 · 稳稳满足' },
|
|
{ name: '寿喜烧', icon: '🍲', flavor: 'rich', budget: 'high', note: '甜咸浓郁 · 犒劳一下' },
|
|
{ name: '酸菜鱼', icon: '🐟', flavor: 'spicy', budget: 'high', note: '酸辣鲜香 · 超级下饭' },
|
|
{ name: '牛肉粉', icon: '🥣', flavor: 'spicy', budget: 'low', note: '暖胃满足 · 快速回血' },
|
|
{ name: '轻食沙拉', icon: '🥗', flavor: 'light', budget: 'mid', note: '清新脆爽 · 没有负担' },
|
|
{ name: '咖喱猪排饭', icon: '🍛', flavor: 'rich', budget: 'mid', note: '酥脆浓香 · 能量满格' },
|
|
{ name: '小笼包', icon: '🥟', flavor: 'light', budget: 'low', note: '一口爆汁 · 简单满足' },
|
|
{ name: '韩式烤肉', icon: '🥩', flavor: 'rich', budget: 'high', note: '焦香多汁 · 适合聚餐' },
|
|
{ name: '重庆小面', icon: '🍜', flavor: 'spicy', budget: 'low', note: '麻辣带劲 · 唤醒味蕾' }
|
|
];
|
|
|
|
const state = { flavor: 'all', budget: 'all', current: null };
|
|
const resultCard = document.querySelector('#resultCard');
|
|
const nameEl = document.querySelector('#resultName');
|
|
const iconEl = document.querySelector('#resultIcon');
|
|
const metaEl = document.querySelector('#resultMeta');
|
|
const kickerEl = document.querySelector('#resultKicker');
|
|
const statusEl = document.querySelector('#status');
|
|
const saveBtn = document.querySelector('#saveBtn');
|
|
|
|
function bindChips(groupId, key) {
|
|
document.querySelectorAll(`#${groupId} .chip`).forEach(chip => {
|
|
chip.addEventListener('click', () => {
|
|
document.querySelectorAll(`#${groupId} .chip`).forEach(item => {
|
|
item.classList.remove('active');
|
|
item.setAttribute('aria-pressed', 'false');
|
|
});
|
|
chip.classList.add('active');
|
|
chip.setAttribute('aria-pressed', 'true');
|
|
state[key] = chip.dataset.value;
|
|
statusEl.textContent = '偏好收到，随时可以开奖。';
|
|
});
|
|
});
|
|
}
|
|
|
|
function pickMeal() {
|
|
let pool = meals.filter(meal =>
|
|
(state.flavor === 'all' || meal.flavor === state.flavor) &&
|
|
(state.budget === 'all' || meal.budget === state.budget)
|
|
);
|
|
if (pool.length > 1 && state.current) pool = pool.filter(meal => meal.name !== state.current.name);
|
|
if (!pool.length) {
|
|
statusEl.textContent = '这个组合有点难！试试放宽一个条件吧。';
|
|
return;
|
|
}
|
|
const meal = pool[Math.floor(Math.random() * pool.length)];
|
|
resultCard.classList.remove('shuffling');
|
|
void resultCard.offsetWidth;
|
|
resultCard.classList.add('shuffling');
|
|
setTimeout(() => {
|
|
state.current = meal;
|
|
iconEl.textContent = meal.icon;
|
|
kickerEl.textContent = '今天就吃';
|
|
nameEl.textContent = meal.name;
|
|
metaEl.textContent = meal.note;
|
|
statusEl.textContent = `答案是「${meal.name}」，不要再纠结啦！`;
|
|
const saved = JSON.parse(localStorage.getItem('whats2eat-favorites') || '[]').includes(meal.name);
|
|
updateSaveButton(saved);
|
|
}, 260);
|
|
}
|
|
|
|
function updateSaveButton(saved) {
|
|
saveBtn.classList.toggle('saved', saved);
|
|
saveBtn.setAttribute('aria-pressed', String(saved));
|
|
saveBtn.textContent = saved ? '♥ 已收藏' : '♡ 收藏';
|
|
}
|
|
|
|
saveBtn.addEventListener('click', () => {
|
|
if (!state.current) return;
|
|
const favorites = JSON.parse(localStorage.getItem('whats2eat-favorites') || '[]');
|
|
const index = favorites.indexOf(state.current.name);
|
|
if (index >= 0) favorites.splice(index, 1); else favorites.push(state.current.name);
|
|
localStorage.setItem('whats2eat-favorites', JSON.stringify(favorites));
|
|
updateSaveButton(index < 0);
|
|
});
|
|
|
|
bindChips('flavorChips', 'flavor');
|
|
bindChips('budgetChips', 'budget');
|
|
document.querySelector('#decideBtn').addEventListener('click', pickMeal);
|
|
document.querySelector('#againBtn').addEventListener('click', pickMeal);
|
|
</script>
|
|
</body>
|
|
</html>
|