From 0990114190cede3cbf172ee050f48773843b0304 Mon Sep 17 00:00:00 2001 From: jinze Date: Sun, 26 Jul 2026 17:14:33 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=96=87=E4=BB=B6=E8=87=B3?= =?UTF-8?q?=E3=80=8C/=E3=80=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app.js | 177 +++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 102 ++++++++++++++++++++++++++++++ styles.css | 120 ++++++++++++++++++++++++++++++++++++ 3 files changed, 399 insertions(+) create mode 100644 app.js create mode 100644 index.html create mode 100644 styles.css diff --git a/app.js b/app.js new file mode 100644 index 0000000..2cf1c11 --- /dev/null +++ b/app.js @@ -0,0 +1,177 @@ +const meals = [ + { name: "番茄牛腩饭", icon: "🍅", flavor: "rich", budget: "mid", group: true, note: "酸甜开胃 · 热乎下饭" }, + { name: "麻辣香锅", icon: "🌶️", flavor: "spicy", budget: "mid", group: true, note: "自由搭配 · 快乐翻倍" }, + { name: "鸡丝凉面", icon: "🍜", flavor: "fresh", budget: "low", group: false, note: "清爽不腻 · 午后轻盈" }, + { name: "海南鸡饭", icon: "🍗", flavor: "light", budget: "mid", group: false, note: "鲜嫩咸香 · 稳稳满足" }, + { name: "寿喜烧", icon: "🍲", flavor: "rich", budget: "high", group: true, note: "甜咸浓郁 · 犒劳一下" }, + { name: "酸菜鱼", icon: "🐟", flavor: "spicy", budget: "high", group: true, note: "酸辣鲜香 · 超级下饭" }, + { name: "牛肉粉", icon: "🥣", flavor: "spicy", budget: "low", group: false, note: "暖胃满足 · 快速回血" }, + { name: "轻食沙拉", icon: "🥗", flavor: "light", budget: "mid", group: false, note: "清新脆爽 · 没有负担" }, + { name: "咖喱猪排饭", icon: "🍛", flavor: "rich", budget: "mid", group: false, note: "酥脆浓香 · 能量满格" }, + { name: "小笼包", icon: "🥟", flavor: "light", budget: "low", group: true, note: "一口爆汁 · 简单满足" }, + { name: "韩式烤肉", icon: "🥩", flavor: "rich", budget: "high", group: true, note: "焦香多汁 · 适合聚餐" }, + { name: "重庆小面", icon: "🍜", flavor: "spicy", budget: "low", group: false, note: "麻辣带劲 · 唤醒味蕾" }, + { name: "日式拉面", icon: "🍥", flavor: "rich", budget: "mid", group: false, note: "汤浓面弹 · 暖心满足" }, + { name: "广式烧腊饭", icon: "🍖", flavor: "rich", budget: "mid", group: false, note: "蜜香油润 · 经典不出错" }, + { name: "云南米线", icon: "🍜", flavor: "fresh", budget: "low", group: false, note: "鲜香顺滑 · 嗦粉快乐" }, + { name: "泰式冬阴功", icon: "🦐", flavor: "spicy", budget: "high", group: true, note: "酸辣醒胃 · 南洋风味" }, + { name: "椰子鸡火锅", icon: "🥥", flavor: "light", budget: "high", group: true, note: "清甜鲜嫩 · 聚餐友好" }, + { name: "东北铁锅炖", icon: "🍲", flavor: "rich", budget: "high", group: true, note: "热气腾腾 · 越吃越香" }, + { name: "披萨拼盘", icon: "🍕", flavor: "rich", budget: "mid", group: true, note: "口味任选 · 分享方便" }, + { name: "潮汕牛肉火锅", icon: "🥩", flavor: "fresh", budget: "high", group: true, note: "鲜切现涮 · 团队人气王" }, + { name: "越南牛肉河粉", icon: "🌿", flavor: "fresh", budget: "mid", group: false, note: "清鲜有层次 · 舒服耐吃" }, + { name: "菌菇焖饭", icon: "🍄", flavor: "light", budget: "low", group: false, note: "菌香温润 · 素食也满足" }, + { name: "新疆大盘鸡", icon: "🍗", flavor: "spicy", budget: "high", group: true, note: "香辣量足 · 多人更合适" }, + { name: "粤式点心", icon: "🫖", flavor: "light", budget: "mid", group: true, note: "多款分享 · 慢慢吃聊" } +]; + +const KEYS = { + favorites: "whats2eat-favorites", + history: "whats2eat-history" +}; + +const state = { flavor: "all", budget: "all", mode: "solo", current: null, activeList: "favorites" }; +const $ = (selector) => document.querySelector(selector); +const $$ = (selector) => document.querySelectorAll(selector); +const readStore = (key) => JSON.parse(localStorage.getItem(key) || "[]"); +const writeStore = (key, value) => localStorage.setItem(key, JSON.stringify(value)); +const mealByName = (name) => meals.find((meal) => meal.name === name); + +function bindExclusiveButtons(selector, stateKey, onChange) { + $$(selector).forEach((button) => { + button.addEventListener("click", () => { + $$(selector).forEach((item) => { + item.classList.remove("active"); + item.setAttribute("aria-pressed", "false"); + }); + button.classList.add("active"); + button.setAttribute("aria-pressed", "true"); + state[stateKey] = button.dataset.value || button.dataset.mode; + if (onChange) onChange(); + }); + }); +} + +function setModeCopy() { + const isTeam = state.mode === "team"; + $("#heroSubtitle").textContent = isTeam + ? "少数服从运气，找一个大家都愿意去的答案。" + : "一个人的午饭，也值得认真决定。"; + $("#modeBadge").textContent = isTeam ? "同事聚餐推荐" : "一人食推荐"; + $("#status").textContent = isTeam ? "聚餐模式会优先推荐适合分享的选择。" : "一人食模式会优先推荐方便又满足的选择。"; +} + +function filteredMeals() { + let pool = meals.filter((meal) => + (state.flavor === "all" || meal.flavor === state.flavor) && + (state.budget === "all" || meal.budget === state.budget) && + (state.mode !== "team" || meal.group) + ); + if (pool.length > 1 && state.current) pool = pool.filter((meal) => meal.name !== state.current.name); + return pool; +} + +function pickMeal() { + const pool = filteredMeals(); + if (!pool.length) { + $("#status").textContent = "这个组合暂时没有合适选项，试试放宽一个条件吧。"; + return; + } + const meal = pool[Math.floor(Math.random() * pool.length)]; + const card = $("#resultCard"); + card.classList.remove("shuffling"); + void card.offsetWidth; + card.classList.add("shuffling"); + setTimeout(() => showResult(meal, true), 260); +} + +function showResult(meal, addToHistory) { + state.current = meal; + $("#resultIcon").textContent = meal.icon; + $("#resultKicker").textContent = state.mode === "team" ? "大家今天就吃" : "今天就吃"; + $("#resultName").textContent = meal.name; + $("#resultMeta").textContent = meal.note; + $("#status").textContent = `答案是「${meal.name}」，不要再纠结啦！`; + updateSaveButton(readStore(KEYS.favorites).includes(meal.name)); + if (addToHistory) { + const history = readStore(KEYS.history).filter((name) => name !== meal.name); + history.unshift(meal.name); + writeStore(KEYS.history, history.slice(0, 12)); + if (state.activeList === "history") renderList(); + } +} + +function updateSaveButton(saved) { + $("#saveBtn").classList.toggle("saved", saved); + $("#saveBtn").setAttribute("aria-pressed", String(saved)); + $("#saveBtn").textContent = saved ? "♥ 已收藏" : "♡ 收藏"; +} + +function toggleFavorite() { + if (!state.current) { + $("#status").textContent = "先抽一个午饭答案，再收藏它吧。"; + return; + } + const favorites = readStore(KEYS.favorites); + const index = favorites.indexOf(state.current.name); + if (index >= 0) favorites.splice(index, 1); + else favorites.unshift(state.current.name); + writeStore(KEYS.favorites, favorites); + updateSaveButton(index < 0); + renderList(); +} + +function renderList() { + const names = readStore(KEYS[state.activeList]); + $("#favoriteCount").textContent = readStore(KEYS.favorites).length; + $("#clearHistory").hidden = state.activeList !== "history" || names.length === 0; + $("#mealList").innerHTML = names.length + ? names.map((name) => { + const meal = mealByName(name); + if (!meal) return ""; + const action = state.activeList === "favorites" + ? `` + : ""; + return `
+ + ${meal.name}${meal.note} + ${action} +
`; + }).join("") + : `
${state.activeList === "favorites" ? "还没有收藏，遇到心动午饭就点一下 ♡" : "还没有抽取记录，今天的第一顿会是什么？"}
`; + + $$("[data-remove]").forEach((button) => { + button.addEventListener("click", () => { + writeStore(KEYS.favorites, readStore(KEYS.favorites).filter((name) => name !== button.dataset.remove)); + if (state.current?.name === button.dataset.remove) updateSaveButton(false); + renderList(); + }); + }); +} + +function switchList(listName, shouldScroll = false) { + state.activeList = listName; + $$(".tab").forEach((tab) => { + const active = tab.dataset.list === listName; + tab.classList.toggle("active", active); + tab.setAttribute("aria-selected", String(active)); + }); + renderList(); + if (shouldScroll) $(".collection").scrollIntoView({ behavior: "smooth", block: "start" }); +} + +bindExclusiveButtons("#flavorChips .chip", "flavor", () => $("#status").textContent = "口味收到，随时可以开奖。"); +bindExclusiveButtons("#budgetChips .chip", "budget", () => $("#status").textContent = "预算收到，随时可以开奖。"); +bindExclusiveButtons(".mode", "mode", setModeCopy); +$("#decideBtn").addEventListener("click", pickMeal); +$("#againBtn").addEventListener("click", pickMeal); +$("#saveBtn").addEventListener("click", toggleFavorite); +$$(".tab").forEach((tab) => tab.addEventListener("click", () => switchList(tab.dataset.list))); +$$("[data-open-list]").forEach((button) => button.addEventListener("click", () => switchList(button.dataset.openList, true))); +$("#clearHistory").addEventListener("click", () => { + writeStore(KEYS.history, []); + renderList(); +}); + +setModeCopy(); +renderList(); diff --git a/index.html b/index.html new file mode 100644 index 0000000..08df921 --- /dev/null +++ b/index.html @@ -0,0 +1,102 @@ + + + + + + + whats2eat — 今天中午吃什么？ + + + + +
+
+ + +
+ +
+
+ 今天也要好好吃饭 +

中午
吃什么？

+

一个人的午饭，也值得认真决定。

+ +
+ + +
+ + +

选好偏好，点一下就有答案。

+ +
+ + +
+ +
+
+
+

MY LUNCH LOG

+

我的午饭口袋

+
+
+ + +
+
+
+ +
+ +
whats2eat © 2026认真吃饭，是每天最小的幸福。
+
+ + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..649e4ad --- /dev/null +++ b/styles.css @@ -0,0 +1,120 @@ +:root { + --ink: #202020; + --muted: #6d6a62; + --paper: #fffdf6; + --yellow: #ffd84d; + --green: #bce8b2; + --pink: #ffc4d5; + --blue: #bfe2ff; + --line: #202020; + --shadow: 5px 5px 0 var(--line); +} + +* { box-sizing: border-box; } +html { scroll-behavior: smooth; } +body { + margin: 0; + min-height: 100vh; + color: var(--ink); + background: + radial-gradient(circle at 10% 8%, rgba(255,216,77,.42) 0 7%, transparent 7.2%), + radial-gradient(circle at 90% 70%, rgba(188,232,178,.42) 0 8%, transparent 8.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, a:focus-visible { outline: 3px solid #5c56ff; outline-offset: 3px; } +.page { width: min(1100px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 34px; } + +header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; } +.logo { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; 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); } +.header-actions { display: flex; gap: 10px; } +.text-button { padding: 8px 11px; border: 0; background: transparent; font-weight: 750; cursor: pointer; } +.text-button:hover { text-decoration: underline; text-underline-offset: 4px; } + +main { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 28px; align-items: stretch; } +.hero { position: relative; min-height: 640px; padding: clamp(28px, 5vw, 58px); 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: 23px 0 12px; font-size: clamp(48px, 8vw, 88px); line-height: .94; letter-spacing: -.07em; } +.subtitle { max-width: 460px; margin: 0 0 24px; font-size: clamp(16px, 2vw, 19px); line-height: 1.65; } + +.mode-switch { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 470px; margin-bottom: 24px; } +.mode { display: flex; align-items: center; gap: 10px; padding: 12px; border: 2px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.7); text-align: left; cursor: pointer; transition: transform .15s, background .15s; } +.mode:hover { transform: translateY(-2px); } +.mode.active { background: #fff; box-shadow: 3px 3px 0 var(--line); } +.mode > span:first-child { font-size: 25px; } +.mode strong, .mode small { display: block; } +.mode small { margin-top: 2px; color: var(--muted); font-size: 11px; } + +.decide { position: relative; z-index: 2; min-width: 190px; padding: 16px 24px; border: 2px solid var(--line); border-radius: 16px; background: var(--ink); color: #fff; box-shadow: 4px 4px 0 rgba(255,255,255,.78); 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); } +.status { position: relative; z-index: 2; min-height: 20px; margin: 16px 0 0; font-size: 13px; font-weight: 700; } +.doodle { position: absolute; right: 25px; bottom: 22px; width: clamp(125px, 27%, 190px); aspect-ratio: 1; border: 3px solid var(--line); border-radius: 50%; background: #fff9e3; box-shadow: inset 0 0 0 14px #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; } +.filters { display: grid; gap: 21px; } +.filter-block + .filter-block { padding-top: 20px; border-top: 1.5px dashed #aaa59a; } +.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 { position: relative; flex: 1; display: grid; align-content: center; min-height: 300px; background: #fff6f9; text-align: center; } +.mode-badge { position: absolute; top: 16px; right: 16px; padding: 6px 9px; border-radius: 999px; background: var(--blue); font-size: 11px; font-weight: 800; } +.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 !important; font-size: clamp(30px, 5vw, 44px) !important; 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; } } + +.collection { margin-top: 30px; } +.collection-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; } +.section-kicker { margin: 0 0 5px; color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .12em; } +.collection-head h2 { margin: 0; font-size: 27px; } +.tabs { display: flex; padding: 4px; border: 1.5px solid var(--line); border-radius: 13px; background: #f5f1e8; } +.tab { padding: 8px 12px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; font-weight: 750; } +.tab.active { background: #fff; box-shadow: 1px 1px 0 var(--line); } +.meal-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 22px; } +.meal-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; min-width: 0; padding: 13px; border: 1.5px solid var(--line); border-radius: 15px; background: var(--paper); } +.meal-item-icon { font-size: 25px; } +.meal-item strong, .meal-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.meal-item small { margin-top: 3px; color: var(--muted); font-size: 11px; } +.remove-item { width: 25px; height: 25px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; } +.remove-item:hover { background: var(--pink); } +.empty { grid-column: 1 / -1; padding: 28px; border: 1.5px dashed #aaa59a; border-radius: 15px; color: var(--muted); text-align: center; } +.clear-button { margin-top: 14px; padding: 6px 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } +footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 28px; color: var(--muted); font-size: 13px; } + +@media (max-width: 850px) { + main { grid-template-columns: 1fr; } + .hero { min-height: 580px; } + .meal-list { grid-template-columns: repeat(2, 1fr); } +} +@media (max-width: 560px) { + .page { width: min(100% - 22px, 620px); padding-top: 14px; } + header { margin-bottom: 18px; } + .text-button { padding-inline: 5px; font-size: 13px; } + .hero { min-height: 610px; padding: 28px 22px; border-radius: 26px; } + .mode-switch { grid-template-columns: 1fr; } + .doodle { right: 20px; bottom: 18px; width: 130px; } + .card { padding: 20px; border-radius: 20px; } + .collection-head { align-items: stretch; flex-direction: column; } + .tabs { align-self: flex-start; } + .meal-list { grid-template-columns: 1fr; } + footer { flex-direction: column; gap: 4px; } +} +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } +}