-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
409 lines (356 loc) · 18.4 KB
/
index.html
File metadata and controls
409 lines (356 loc) · 18.4 KB
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
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<!-- 思源宋體 -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+TC&display=swap" rel="stylesheet">
<!-- 辰宇落雁體（本地字型） -->
<style>
@font-face {
font-family: "辰宇落雁體";
src: url("fonts/ChenYuluoyan.ttf") format("truetype");
}
</style>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>西風 Fine Dining</title>
<link rel="icon" href="logo_main.png">
<link rel="stylesheet" href="index.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
</head>
<body>
<button class="menu-toggle" onclick="toggleMenu()">
<i class="fas fa-bars"></i>
</button>
<aside id="sideMenu" class="menu-open">
<nav>
<ul>
<li class="menu-toggle-item">
<button class="menu-toggle" onclick="toggleMenu()">
<i class="fas fa-bars"></i>
</button>
</li>
<li>
<a href="index.html">
<img src="./images/icon/index.svg" class="menu-icon">
<span class="menu-text">首頁</span>
</a>
</li>
<li>
<a href="salads.html">
<img src="./images/icon/salads.svg" class="menu-icon">
<span class="menu-text">沙拉</span>
</a>
</li>
<li>
<a href="appetizers.html">
<img src="./images/icon/appetizers.svg" class="menu-icon">
<span class="menu-text">前菜</span>
</a>
</li>
<li>
<a href="soup.html">
<img src="./images/icon/soup.svg" class="menu-icon">
<span class="menu-text">湯品</span>
</a>
</li>
<li>
<a href="side dishes.html">
<img src="./images/icon/side_dishes.svg" class="menu-icon">
<span class="menu-text">配菜</span>
</a>
</li>
<li>
<a href="main courses.html">
<img src="./images/icon/main_courses.svg" class="menu-icon">
<span class="menu-text">主菜</span>
</a>
</li>
<li>
<a href="add.html">
<img src="./images/icon/add.svg" class="menu-icon">
<span class="menu-text">主菜加價</span>
</a>
</li>
<li>
<a href="drinks.html">
<img src="./images/icon/drinks.svg" class="menu-icon">
<span class="menu-text">飲品</span>
</a>
</li>
<li>
<a href="desserts.html">
<img src="./images/icon/desserts.svg" class="menu-icon">
<span class="menu-text">甜品</span>
</a>
</li>
<li>
<a href="set.html">
<img src="./images/icon/set.svg" class="menu-icon">
<span class="menu-text">套餐</span>
</a>
</li>
<li>
<a href="child.html">
<img src="./images/icon/child.svg" class="menu-icon">
<span class="menu-text">兒童專區</span>
</a>
</li>
</ul>
</nav>
</aside>
<header class="page-header">
<img src="images/banner.jpg" alt="頁面底圖" class="header-banner">
<nav class="top-nav">
<div class="nav-left">
<button id="menuHint" onclick="toggleMenu()">
← 閱讀我們的菜單
</button>
<a href="begin.html">
<img src="./images/icon/begin.svg" class="top-nav1">
<span class="menu-text">公司起源</span>
</a>
<a href="trace.html">
<img src="./images/icon/trace.svg" class="top-nav1">
<span class="menu-text">生產溯源</span>
</a>
<a href="contactus.html">
<img src="./images/icon/contactus.svg" class="top-nav1">
<span class="menu-text">聯絡我們</span>
</a>
</div>
<a href="index.html" class="logo-link">
<div class="logo-center">
<img src="./images/logo_main.png" alt="West Wind">
</div>
</a>
<div class="nav-right">
<div class="language-switch">
<button id="langBtn">繁體中文 ▾</button>
<ul id="langMenu">
<li data-lang="zh">繁體中文</li>
<li data-lang="en">English</li>
<li data-lang="jp">日本語</li>
</ul>
</div>
<div class="music-player">
<audio controls>
<source src="media/webmusic.mp3" type="audio/mpeg">
</audio>
</div>
</div>
</nav>
</header>
<div class="container">
<main>
<article>
<h1 class="article-h1"data-zh>西風的慢活哲學</h1>
<h1 class="article-h1" data-en hidden>The Slow-Life Philosophy of West Wind</h1>
<h1 class="article-h1" data-jp hidden>ウェストウィンドのスローライフ哲学</h1>
<div class="content">
<p class="article-subtitle" data-zh>
「願您在【西風】的時光，成為旅程中最美好、最溫柔的回憶。」
現在，請放慢您的呼吸，享受這趟屬於您的慢活美食之旅吧。我們已備妥佳餚，等候您的光臨。
</p>
<p class="article-subtitle" data-en hidden>
"May your time at West Wind become the most beautiful and gentle memory of your journey." Now, take a deep breath, slow down, and savor this leisurely culinary journey crafted just for you. Our finest dishes are ready and waiting for your arrival.
</p>
<p class="article-subtitle" data-jp hidden>
「ウェストウィンドでの時間が、旅の中で最も美しく、優しい思い出になりますように。」
さあ、深呼吸をして、ゆっくりと自分だけのスローフードの旅をお楽しみください。私たちは最高の料理をご用意して、皆さまのお越しをお待ちしています。
</p>
</div>
<div class="section1-list">
<section class="section1">
<h2 class="product-name" data-zh>歡迎每個來到這裡的旅人：西風的慢活哲學</h2>
<h2 class="product-name" data-en hidden>We welcome every traveler who comes here: The Slow-Life Philosophy of West Wind</h2>
<h2 class="product-name" data-jp hidden>ここに訪れるすべての旅人へ：ウェストウィンドのスローライフ哲学</h2>
<div class="product-info-wrapper">
<img src="images/welcome.jpg" alt="歡迎來到西風" class="section1-img">
<hr class="dashed-line">
<span class="price-placeholder" ><p data-zh>停駐在輔大的片刻寧靜</p>
<p data-en hidden>A moment of tranquility in the heart of Fu Jen University</p>
<p data-jp hidden>輔仁大学でのひとときの静けさを</p></span>
<div class="description">
<p data-zh>
親愛的旅人，不論您是剛下課的輔大師生、在這座城市尋覓美味的過客，抑或是短暫放下忙碌、渴望喘息的當地居民，【西風】誠摯地歡迎您。
</p>
<p data-zh>
我們知道，生活就像一趟不斷前行的旅程。而我們，正是您在旅途中發現的一處溫暖港灣，一個能讓您卸下行囊、放慢腳步的心靈補給站。
</p>
<p data-en hidden>
Dear travelers, whether you are students or staff just finishing classes, visitors exploring the city in search of delightful flavors, or local residents taking a brief pause from a busy day, West Wind sincerely welcomes you.
</p>
<p data-en hidden>
We understand that life is a journey that never stops moving. And we aspire to be a warm harbor along your path—a place where you can set down your bag, slow your pace, and nourish your soul.
</p>
<p data-jp hidden>
親愛なる旅人の皆さま、授業を終えたばかりの学生や教職員、街で美味しい食を探す訪問者、あるいは忙しい日常を一瞬だけ忘れたい地元の方々、ウェストウィンドは心より歓迎いたします。
</p>
<p data-jp hidden>
私たちは、人生が絶え間なく進む旅であることを理解しています。そして、旅の途中で出会う、温かい港のような存在でありたいのです。荷物を下ろし、足を止め、心を休めることができる、そんな心のオアシスです。
</p>
</div>
</div>
</section>
<section class="section1">
<h2 class="product-name" data-zh>什麼是「西風」(West Wind)?</h2>
<h2 class="product-name" data-en hidden>What is “West Wind”?</h2>
<h2 class="product-name" data-jp hidden>「ウェストウィンド」とは？</h2>
<div class="product-info-wrapper">
<img src="images/westwind.jpg" alt="西風的意象" class="section1-img">
<hr class="dashed-line">
<span class="price-placeholder" ><p data-zh>在希臘神話中，代表著溫柔、輕盈且和煦的微風。</p>
<p data-en hidden>In Greek mythology, it represents a gentle, light, and warm breeze.</p>
<p data-jp hidden>ギリシャ神話では、優しく、軽やかで、穏やかなそよ風を象徴します。</p></span>
<div class="description">
<p data-zh>這正是我們想帶給您的感受:</p>
<p data-en hidden>This is exactly the feeling we wish to bring to you:</p>
<p data-jp hidden>これは、私たちが皆さまに届けたい感覚です：</p>
<ul>
<p data-zh>輕柔的氛圍: 讓緊繃的心情得以放鬆。</p>
<p data-zh>和煦的款待: 讓您感受到無微不至的服務。</p>
<p data-en hidden>Gentle atmosphere: Relax your tense mind.</p>
<p data-en hidden>Warm hospitality: Experience attentive and caring service.</p>
<p data-jp hidden>優しい雰囲気：緊張した心をリラックスさせます。</p>
<p data-jp hidden>温かいおもてなし：細やかなサービスを感じていただけます。</p>
</ul>
<p data-zh>在這裡，沒有喧囂和倉促，只有精心準備的佳餚、令人舒緩的爵士樂，以及窗外灑落的溫暖光影。</p>
<p data-en hidden>Here, there is no noise or rush—only carefully prepared dishes, soothing jazz music, and the warm sunlight spilling through the windows.</p>
<p data-jp hidden>ここには、騒がしさや慌ただしさはありません。用意された料理、心を和ませるジャズ、そして窓から差し込む温かな光だけが広がっています。</p>
</div>
</div>
</section>
<section class="section1">
<h2 class="product-name" data-zh>我們的承諾:用料理療癒旅途的疲憊</h2>
<h2 class="product-name" data-en hidden>Our Promise: Healing the Fatigue of Your Journey with Cuisine</h2>
<h2 class="product-name" data-jp hidden>私たちの約束：料理で旅の疲れを癒す</h2>
<div class="product-info-wrapper">
<img src="images/promise.jpg" alt="料理的承諾" class="section1-img">
<hr class="dashed-line">
<span class="price-placeholder">
<p data-zh>經典歐式美味與您的專屬角落</p>
<p data-en hidden>Classic European flavors in your own special corner</p>
<p data-jp hidden>クラシックなヨーロッパ料理と、あなた専用の特別な空間</p>
</span>
<div class="description">
<h3 data-zh>經典歐式美味:</h3>
<h3 data-en hidden>Classic European Cuisine:</h3>
<h3 data-jp hidden>クラシックなヨーロッパ料理:</h3>
<p data-zh>我們的主廚堅持使用來自臺灣的優質豬肉和澳洲嚴選的頂級牛肉，結合經典法式和義式烹飪技法，為您呈現既道地又富有層次的西餐體驗。</p>
<p data-en hidden>Our chefs insist on using premium Taiwanese pork and carefully selected top-grade Australian beef, combining classic French and Italian cooking techniques to offer you an authentic and layered Western dining experience.</p>
<p data-jp hidden>シェフは台湾産の上質な豚肉と厳選されたオーストラリア産の最高級牛肉を使用し、フランスやイタリアの伝統的な調理技法を組み合わせて、本格的で深みのある西洋料理体験をご提供します。</p>
<ul>
<p data-zh>一杯專屬飲品: 無論您需要一杯濃郁的義式咖啡振奮精神，還是一杯精選的佐餐紅酒來配襯美味，【西風】都能滿足您。 </p>
<p data-zh>專屬您的角落: 我們的環境優雅而舒適，無論您是想享受一個人的寧靜獨處，還是與重要的人共享美好時光，都能找到最適合您的位置。</p>
<p data-en hidden>A Drink Just for You:
Whether you need a rich Italian coffee to energize your spirit or a selected wine to complement your meal, West Wind can provide the perfect pairing. </p>
<p data-en hidden>Your Own Private Corner:
Our elegant and comfortable environment allows you to enjoy peaceful solitude or share wonderful moments with someone special—always finding the spot that suits you best.</p>
<p data-jp hidden>あなただけのドリンク:
濃厚なイタリアンコーヒーで気分をリフレッシュしたい時も、食事に合う厳選ワインを楽しみたい時も、ウェストウィンドがぴったりの一杯をご用意します。 </p>
<p data-jp hidden>あなただけの特別な空間:
優雅で快適な空間で、一人で静かに過ごしたい時も、大切な人と素敵な時間を共有したい時も、最適な席を見つけていただけます。</p>
</ul>
</div>
</div>
</section>
</div>
</article>
</main>
</div>
<footer class="site-footer">
<div class="footer-inner">
<div class="copyright">
<p>© 2025 版權宣告. All Rights Reserved.</p>
<p>為學校教學使用非營利性質之網站.This website is for educational and non-profit use only.</p>
</div>
<div class="social-media">
<a href="https://facebook.com" target="_blank" title="Facebook"><i class="fa-brands fa-facebook"></i></a>
<a href="https://instagram.com" target="_blank" title="Instagram"><i class="fa-brands fa-instagram"></i></a>
<a href="https://line.me" target="_blank" title="Line"><i class="fa-brands fa-line"></i></a>
</div>
</div>
</footer>
<script>
const topNav = document.querySelector('.top-nav');
window.addEventListener('scroll', () => {
if (window.scrollY <= 2) {
topNav.classList.add('show');
} else {
topNav.classList.remove('show');
}
});
const btn = document.getElementById('langBtn');
const menu = document.getElementById('langMenu');
/* 開關語言選單 */
btn.onclick = () => {
menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
};
/* 點語言時 */
menu.querySelectorAll('li').forEach(item => {
item.onclick = () => {
const lang = item.dataset.lang; // zh / en / jp
/* 🔤 切換語言顯示 */
document.querySelectorAll('[data-zh]').forEach(el => {
el.hidden = lang !== 'zh';
});
document.querySelectorAll('[data-en]').forEach(el => {
el.hidden = lang !== 'en';
});
document.querySelectorAll('[data-jp]').forEach(el => {
el.hidden = lang !== 'jp';
});
menu.style.display = 'none';
/* 改按鈕文字 */
btn.textContent = item.textContent + ' ▾';
/* 關閉選單 */
menu.style.display = 'none';
// 🔤 桌機文字
document.querySelector('.lang-full').textContent = item.textContent;
// 📱 手機縮寫
const shortMap = {
zh: '[中]',
en: '[EN]',
jp: '[日]'
};
document.querySelector('.lang-short').textContent = shortMap[lang];
if (lang === 'zh') {
full.textContent = '繁體中文';
short.textContent = '[中]';
}
if (lang === 'en') {
full.textContent = 'English';
short.textContent = '[EN]';
}
if (lang === 'jp') {
full.textContent = '日本語';
short.textContent = '[日]';
}
menu.style.display = 'none';
};
});
function toggleMenu() {
const sideMenu = document.getElementById('sideMenu');
const hint = document.getElementById('menuHint');
sideMenu.classList.toggle('collapsed');
if (sideMenu.classList.contains('collapsed')) {
hint.style.display = 'block'; // 收合 → 顯示 ← 菜單
} else {
hint.style.display = 'none'; // 展開 → 隱藏
}
}
document.addEventListener('DOMContentLoaded', () => {
const sideMenu = document.getElementById('sideMenu');
const hint = document.getElementById('menuHint');
if (window.innerWidth <= 768 && sideMenu) {
sideMenu.classList.add('collapsed');
if (hint) hint.style.display = 'block';
}
if (hint) {
hint.style.display = 'block';
hint.textContent = '← 閱讀菜單'; // ⭐ 重點在這行
}
});
</script>
</body>
</html>