NTUST-Foodlist/index.html at main · COSCUP/NTUST-Foodlist · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<!doctype html>
<html lang="zh-Hant">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="COSCUP 2026 台科大第一學生餐廳雙語菜單、價格、營業時間與開放資料。">
    <meta name="theme-color" content="#20c779">
    <meta property="og:title" content="COSCUP 2026 台科大餐飲指南">
    <meta property="og:description" content="Bilingual menus, opening hours, prices, and open data for the NTUST First Student Cafeteria.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://coscup.org/NTUST-Foodlist/">
    <title>COSCUP 2026 台科大餐飲指南 · NTUST Dining Guide</title>
    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='29' fill='%23ffc91a' stroke='%2310191f' stroke-width='6'/%3E%3Ctext x='32' y='43' text-anchor='middle' font-family='Arial,sans-serif' font-size='34' font-weight='900' fill='%2310191f'%3EC%3C/text%3E%3C/svg%3E">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;700;900&family=Noto+Sans+TC:wght@400;600;700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <script src="app.js" defer></script>
  </head>
  <body data-language="both">
    <a class="skip-link" href="#main">跳至主要內容 / Skip to content</a>
    <header class="site-header">
      <a class="wordmark" href="https://coscup.org/2026/" aria-label="回 COSCUP 2026 首頁 Back to COSCUP 2026">
        <img class="site-logo" src="https://coscup.org/2026/_ipx/w_3072&amp;f_png/coscup_logo_white.png" alt="COSCUP × UbuCon Asia">
        <span class="wordmark-kicker">MENU</span>
      </a>
      <div class="header-actions">
        <nav class="site-nav" aria-label="主要導覽 Main navigation">
          <a href="#top"><span class="zh">本頁頂端</span><span class="en">Top</span></a>
          <a href="#stores"><span class="zh">店家</span><span class="en">Stores</span></a>
          <a href="#menu"><span class="zh">找餐點</span><span class="en">Menu</span></a>
          <a href="#open-data"><span class="zh">開放資料</span><span class="en">Open data</span></a>
          <a href="#thanks"><span class="zh">特別感謝</span><span class="en">Thanks</span></a>
        </nav>
        <label class="language-switcher language-switcher--desktop">
          <span>Language</span>
          <select class="language-select" aria-label="語言顯示 Language display">
            <option value="both">中 / EN</option>
            <option value="zh">中文</option>
            <option value="en">English</option>
          </select>
        </label>
        <details class="mobile-menu">
          <summary role="button" aria-label="開啟導覽選單 Open navigation menu">
            <span class="mobile-menu__icon" aria-hidden="true"><i></i><i></i><i></i></span>
          </summary>
          <div class="mobile-menu__panel">
            <nav aria-label="手機導覽 Mobile navigation">
              <a href="#top"><span class="zh">本頁頂端</span><span class="en">Top</span></a>
              <a href="#stores"><span class="zh">店家</span><span class="en">Stores</span></a>
              <a href="#menu"><span class="zh">找餐點</span><span class="en">Menu</span></a>
              <a href="#open-data"><span class="zh">開放資料</span><span class="en">Open data</span></a>
              <a href="#thanks"><span class="zh">特別感謝</span><span class="en">Thanks</span></a>
            </nav>
            <label class="language-switcher">
              <span>Language</span>
              <select class="language-select" aria-label="手機語言顯示 Mobile language display">
                <option value="both">中 / EN</option>
                <option value="zh">中文</option>
                <option value="en">English</option>
              </select>
            </label>
          </div>
        </details>
      </div>
    </header>

    <main id="main">
      <section class="hero" id="top">
        <div class="hero-copy">
          <p class="eyebrow">TAIWAN TECH · FIRST STUDENT CAFETERIA</p>
          <h1><span class="zh">今天吃什麼？</span><span class="en">What should we eat?</span></h1>
          <p class="hero-lead">
            <span class="zh">COSCUP 2026 台科大第一學生餐廳雙語指南</span>
            <span class="en">A bilingual guide to the NTUST First Student Cafeteria</span>
          </p>
          <div class="hero-actions">
            <a class="button button-primary" href="#menu"><span class="zh">開始找餐點</span><span class="en">Find a meal</span></a>
            <a class="button button-secondary" href="data/menu.csv" download><span class="zh">下載 CSV</span><span class="en">Download CSV</span></a>
          </div>
        </div>
        <div class="hero-board" aria-label="活動資訊 Event information">
          <div class="date-card">
            <span class="date-number">8</span>
            <span><b>08–09</b><br><span class="zh">週六、週日</span><span class="en">Sat.–Sun.</span></span>
          </div>
          <div class="hero-stats">
            <div><b id="store-count">9</b><span class="zh">營業店家</span><span class="en">open stores</span></div>
            <div><b id="item-count">—</b><span class="zh">菜單品項</span><span class="en">menu items</span></div>
          </div>
          <div class="tag-strip">
            <span>🥬 <span class="zh">素食餐點</span><span class="en">Vegetarian items</span></span>
            <span>☾ <span class="zh">清真友善餐點</span><span class="en">Muslim-friendly items</span></span>
          </div>
        </div>
      </section>

      <section class="section section-sand" id="stores">
        <div class="section-heading">
          <div>
            <p class="kicker"><span class="zh">先看營業時間</span><span class="en">Check the hours first</span></p>
            <h2><span class="zh">營業店家</span><span class="en">Open stores</span></h2>
          </div>
          <p>
            <span class="zh">部分店家為 COSCUP 期間特別加開。訂餐前請再次確認現場公告。</span>
            <span class="en">Some stores are opening specially for COSCUP. Check onsite notices before ordering.</span>
          </p>
        </div>
        <div class="store-grid" id="store-grid" aria-live="polite"></div>
      </section>

      <section class="section menu-section" id="menu">
        <div class="section-heading">
          <div>
            <p class="kicker"><span class="zh">用預算與飲食需求篩選</span><span class="en">Filter by budget and dietary needs</span></p>
            <h2><span class="zh">找一份想吃的</span><span class="en">Find your next meal</span></h2>
          </div>
          <p>
            <span class="zh">黃色框優先顯示一般售價；NTUST 學生職員價另以灰字標示。幣別皆為新台幣。</span>
            <span class="en">The yellow box highlights the regular price; NTUST student &amp; staff pricing appears below in smaller gray text. All prices are in TWD.</span>
          </p>
        </div>

        <form class="filter-panel" id="filters" role="search">
          <label class="field field-wide">
            <span><span class="zh">搜尋店家或菜名</span><span class="en">Search stores or dishes</span></span>
            <input id="search" type="search" placeholder="例如：雞肉、noodles" autocomplete="off">
          </label>
          <label class="field">
            <span><span class="zh">店家</span><span class="en">Store</span></span>
            <select id="store-filter"><option value=""><span>全部店家 / All stores</span></option></select>
          </label>
          <label class="field">
            <span><span class="zh">一般價最高預算</span><span class="en">Max regular price</span></span>
            <span class="range-value">NTD <output id="budget-output">160</output></span>
            <input id="budget" type="range" min="20" max="160" step="5" value="160">
          </label>
          <fieldset class="dietary-field">
            <legend><span class="zh">飲食標示</span><span class="en">Dietary labels</span></legend>
            <label><input id="vegetarian-filter" type="checkbox"> 🥬 <span class="zh">素食餐點</span><span class="en">Vegetarian item</span></label>
            <label><input id="muslim-filter" type="checkbox"> ☾ <span class="zh">清真友善餐點</span><span class="en">Muslim-friendly item</span></label>
          </fieldset>
        </form>

        <div class="result-bar">
          <p id="result-count" aria-live="polite"></p>
          <button class="text-button" type="button" id="reset-filters"><span class="zh">清除篩選</span><span class="en">Reset filters</span></button>
        </div>
        <div class="menu-grid" id="menu-grid" aria-live="polite"></div>
        <button class="button show-more" type="button" id="show-more" hidden><span class="zh">顯示更多</span><span class="en">Show more</span></button>

        <aside class="notice" aria-label="飲食標示說明 Dietary-label notice">
          <span class="notice-icon">!</span>
          <p>
            <strong><span class="zh">飲食標示提醒</span><span class="en">Dietary-label notice</span></strong>
            <span class="zh">所有飲食標示均以餐點為單位。素食只標記菜單明確寫出「素／蔬食／可素」的品項；歐趴雞肉中原始英文菜單明確標為 Pork 的餐點不加清真友善標示，其餘品項依店家提供的清真友善餐飲資訊標示。清真友善不等同清真認證，請向店家現場確認食材、過敏原、交叉接觸與認證狀態。</span>
            <span class="en">All dietary labels are assigned per dish. Vegetarian labels cover only explicitly marked dishes; O-Pass Chicken items explicitly marked “Pork” in the original English menu are not labeled Muslim-friendly, while other items are labeled based on the store's Muslim-friendly dining information. “Muslim-friendly” does not mean halal-certified. Confirm ingredients, allergens, cross-contact, and certification status onsite.</span>
          </p>
        </aside>
      </section>

      <section class="section open-data-section" id="open-data">
        <div class="section-heading">
          <div>
            <p class="kicker"><span class="zh">可以下載、重用、再分析</span><span class="en">Download, reuse, and remix</span></p>
            <h2><span class="zh">原始開放資料</span><span class="en">Open data</span></h2>
          </div>
          <p>
            <span class="zh">每一項餐點都有中英文店名、菜名、營業時間、校內／校外價格與飲食標示。</span>
            <span class="en">Every row includes bilingual store and dish names, opening hours, two price tiers, and dietary labels.</span>
          </p>
        </div>
        <div class="data-grid">
          <a class="data-card coral" href="data/menu.csv" download>
            <span class="file-type">CSV</span>
            <h3><span class="zh">完整菜單表格</span><span class="en">Flat menu table</span></h3>
            <p><span class="zh">適合 Excel、試算表與資料分析</span><span class="en">For Excel, spreadsheets, and analysis</span></p>
            <span class="download-label"><span class="zh">下載檔案 ↓</span><span class="en">Download ↓</span></span>
          </a>
          <a class="data-card sea" href="data/menu.json" download>
            <span class="file-type">JSON</span>
            <h3><span class="zh">完整菜單資料</span><span class="en">Complete menu data</span></h3>
            <p><span class="zh">含 metadata 與完整餐點陣列</span><span class="en">Metadata plus the full menu array</span></p>
            <span class="download-label"><span class="zh">下載檔案 ↓</span><span class="en">Download ↓</span></span>
          </a>
          <a class="data-card yellow" href="data/stores.json" download>
            <span class="file-type">JSON</span>
            <h3><span class="zh">營業店家資料</span><span class="en">Store directory</span></h3>
            <p><span class="zh">營業時間、電話與線上訂餐資訊</span><span class="en">Hours, phones, and online ordering</span></p>
            <span class="download-label"><span class="zh">下載檔案 ↓</span><span class="en">Download ↓</span></span>
          </a>
          <a class="data-card green" href="data/README.md">
            <span class="file-type">README</span>
            <h3><span class="zh">資料字典與授權</span><span class="en">Dictionary and license</span></h3>
            <p><span class="zh">欄位定義、標示原則與 CC BY 4.0</span><span class="en">Fields, labeling rules, and CC BY 4.0</span></p>
            <span class="download-label"><span class="zh">閱讀說明 →</span><span class="en">Read notes →</span></span>
          </a>
        </div>
        <p class="data-meta"><span class="zh">最後更新：2026-08-05 · 資料來源：麗陽商場協助協調彙整</span><span class="en">Last updated: 2026-08-05 · Source: coordinated with assistance from Liyang Marketplace</span></p>
      </section>

      <section class="section thanks-section" id="thanks">
        <div class="thanks-title">
          <p class="kicker"><span class="zh">讓會眾吃得更方便</span><span class="en">Helping attendees dine with ease</span></p>
          <h2><span class="zh">特別感謝</span><span class="en">Special thanks</span></h2>
          <a href="https://coscup.org/2026/sponsor/" target="_blank" rel="noopener"><span class="zh">查看 COSCUP 2026 贊助夥伴 ↗</span><span class="en">See COSCUP 2026 sponsors ↗</span></a>
        </div>
        <article class="sponsor-card">
          <header>
            <span class="sponsor-badge">SPECIAL THANKS</span>
            <h3>麗陽商場<br><span>【台灣科技大學活動中心第一餐廳】</span></h3>
            <p>Live Young — First Cafeteria of the Student Center at Taiwan Tech</p>
          </header>
          <div class="sponsor-copy">
            <div class="zh">
              <p>麗陽自民國 75 年起即經營百貨商場及美食街、觀光市集、不動產租賃及停車場等事業，擁有 30 多年與政府機關配合的豐富經驗，與麥當勞、漢堡王、王品集團、7-11、全家便利商店⋯等多達 900 家以上國內外知名品牌合作，企業信譽深受業界口碑肯定。</p>
              <p>台灣科技大學活動中心第一餐廳自 112 年 7 月營運，麗陽全新引進具知名度及受學生喜愛之 7-11、摩斯漢堡、清心福全、小木屋鬆餅、包子商行⋯等 17 個專櫃品牌，另外因應學校國際交換學生及信仰伊斯蘭教的學生眾多，特別規劃歐趴雞肉提供清真友善餐飲，讓臺科大師生享受便捷且高品質的用餐環境。</p>
            </div>
            <div class="en">
              <p>Since 1986, the Live Young management team has operated shopping malls and food courts, tourist markets, real estate leasing services, and parking facilities. With more than 30 years of extensive experience working with government agencies, Live Young has partnered with over 900 well-known domestic and international brands, including McDonald’s, Burger King, Wowprime Corporation, 7-ELEVEN, and FamilyMart. Its strong corporate reputation has earned widespread recognition throughout the industry.</p>
              <p>Live Young began operating the First Cafeteria of the Student Center at Taiwan Tech in July 2023. The newly renovated dining area features 17 popular brands and food stalls, including 7-ELEVEN, MOS BURGER, Ching Shin Fu Chuan, SHINE MOOD WAFFLE, and BAO SO HARD.</p>
              <p>To meet the dining needs of Taiwan Tech’s large international and Muslim student communities, Live Young has also introduced O-Pass Chicken（歐趴雞肉）, which provides Muslim-friendly meals. Together, these dining options offer Taiwan Tech students, faculty, and staff a convenient and high-quality dining environment.</p>
            </div>
          </div>
          <a class="sponsor-link" href="https://liveyoung.com.tw/map14/" target="_blank" rel="noopener"><span class="zh">前往麗陽第一學生餐廳介紹</span><span class="en">Visit the cafeteria page</span> ↗</a>
        </article>
      </section>
    </main>

    <footer>
      <p><strong>COSCUP × UbuCon Asia 2026</strong><br><span class="zh">台科大第一學生餐廳餐飲資訊</span><span class="en">NTUST First Student Cafeteria dining information</span></p>
      <nav aria-label="頁尾連結 Footer links">
        <a href="https://coscup.org/2026/" target="_blank" rel="noopener">COSCUP 2026 ↗</a>
        <a href="README.md">README</a>
        <a href="README-2025.md"><span class="zh">2025 歷史資料</span><span class="en">2025 archive</span></a>
        <a href="#top"><span class="zh">回到頂端 ↑</span><span class="en">Back to top ↑</span></a>
      </nav>
    </footer>
  </body>
</html>