Hugging Face's logo

Spaces:
MRKW
/
20250412fesrouteplanner
Running

App Files Community
MRKW commited on
Commit
8806957
·
verified ·
1 Parent(s): 85c59a4

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +808 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
  title: 20250412fesrouteplanner
3
- emoji: 👁
4
- colorFrom: red
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
  title: 20250412fesrouteplanner
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,808 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ja">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>フェスルートプランナー - 音楽フェス最適ルート提案アプリ</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6b21a8 0%, #1e40af 100%);
12
+ }
13
+ .schedule-item {
14
+ position: relative;
15
+ padding-left: 2.5rem;
16
+ }
17
+ .schedule-item:before {
18
+ content: "";
19
+ position: absolute;
20
+ left: 0.75rem;
21
+ top: 0;
22
+ height: 100%;
23
+ width: 2px;
24
+ background-color: #e5e7eb;
25
+ }
26
+ .schedule-dot {
27
+ position: absolute;
28
+ left: 0.5rem;
29
+ top: 0.5rem;
30
+ width: 1rem;
31
+ height: 1rem;
32
+ border-radius: 9999px;
33
+ border: 3px solid #4f46e5;
34
+ background-color: white;
35
+ }
36
+ .artist-card:hover {
37
+ transform: translateY(-4px);
38
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
39
+ }
40
+ .food-card:hover {
41
+ transform: translateY(-4px);
42
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
43
+ }
44
+ .fade-in {
45
+ animation: fadeIn 0.5s ease-in-out;
46
+ }
47
+ @keyframes fadeIn {
48
+ from { opacity: 0; transform: translateY(10px); }
49
+ to { opacity: 1; transform: translateY(0); }
50
+ }
51
+ </style>
52
+ </head>
53
+ <body class="bg-gray-50 min-h-screen">
54
+ <!-- ヘッダー -->
55
+ <header class="gradient-bg text-white shadow-lg">
56
+ <div class="container mx-auto px-4 py-6">
57
+ <div class="flex justify-between items-center">
58
+ <div class="flex items-center space-x-2">
59
+ <i class="fas fa-music text-2xl"></i>
60
+ <h1 class="text-2xl font-bold">フェスルートプランナー</h1>
61
+ </div>
62
+ <button class="bg-white text-purple-800 px-4 py-2 rounded-full font-semibold hover:bg-purple-100 transition">
63
+ ログイン
64
+ </button>
65
+ </div>
66
+ <p class="mt-2 text-purple-200">音楽フェスを最大限楽しむための最適ルートを提案</p>
67
+ </div>
68
+ </header>
69
+
70
+ <!-- メインコンテンツ -->
71
+ <main class="container mx-auto px-4 py-8">
72
+ <!-- ステップ表示 -->
73
+ <div class="flex justify-center mb-8">
74
+ <div class="flex items-center">
75
+ <div class="flex flex-col items-center">
76
+ <div class="w-10 h-10 rounded-full bg-purple-600 text-white flex items-center justify-center font-bold">1</div>
77
+ <span class="mt-2 text-sm font-medium text-purple-600">基本情報</span>
78
+ </div>
79
+ <div class="w-16 h-1 bg-gray-300 mx-2"></div>
80
+ <div class="flex flex-col items-center">
81
+ <div class="w-10 h-10 rounded-full bg-gray-300 text-white flex items-center justify-center font-bold">2</div>
82
+ <span class="mt-2 text-sm font-medium text-gray-500">アーティスト選択</span>
83
+ </div>
84
+ <div class="w-16 h-1 bg-gray-300 mx-2"></div>
85
+ <div class="flex flex-col items-center">
86
+ <div class="w-10 h-10 rounded-full bg-gray-300 text-white flex items-center justify-center font-bold">3</div>
87
+ <span class="mt-2 text-sm font-medium text-gray-500">飲食店選択</span>
88
+ </div>
89
+ <div class="w-16 h-1 bg-gray-300 mx-2"></div>
90
+ <div class="flex flex-col items-center">
91
+ <div class="w-10 h-10 rounded-full bg-gray-300 text-white flex items-center justify-center font-bold">4</div>
92
+ <span class="mt-2 text-sm font-medium text-gray-500">確認</span>
93
+ </div>
94
+ </div>
95
+ </div>
96
+
97
+ <!-- 基本情報フォーム -->
98
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8 fade-in">
99
+ <h2 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
100
+ <i class="fas fa-user-circle text-purple-600 mr-2"></i>基本情報
101
+ </h2>
102
+
103
+ <div class="grid md:grid-cols-2 gap-6">
104
+ <!-- 名前 -->
105
+ <div>
106
+ <label class="block text-gray-700 font-medium mb-2" for="name">お名前</label>
107
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
108
+ </div>
109
+
110
+ <!-- 参加日 -->
111
+ <div>
112
+ <label class="block text-gray-700 font-medium mb-2" for="date">参加日</label>
113
+ <select id="date" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
114
+ <option value="">選択してください</option>
115
+ <option value="day1">1日目 (7月28日)</option>
116
+ <option value="day2">2日目 (7月29日)</option>
117
+ <option value="day3">3日目 (7月30日)</option>
118
+ <option value="all">全日程参加</option>
119
+ </select>
120
+ </div>
121
+
122
+ <!-- 好きな音楽ジャンル -->
123
+ <div class="md:col-span-2">
124
+ <label class="block text-gray-700 font-medium mb-2">好きな音楽ジャンル (複数選択可)</label>
125
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-2">
126
+ <label class="flex items-center space-x-2">
127
+ <input type="checkbox" class="rounded text-purple-600 focus:ring-purple-500">
128
+ <span>ロック</span>
129
+ </label>
130
+ <label class="flex items-center space-x-2">
131
+ <input type="checkbox" class="rounded text-purple-600 focus:ring-purple-500">
132
+ <span>エレクトロニック</span>
133
+ </label>
134
+ <label class="flex items-center space-x-2">
135
+ <input type="checkbox" class="rounded text-purple-600 focus:ring-purple-500">
136
+ <span>ヒップホップ</span>
137
+ </label>
138
+ <label class="flex items-center space-x-2">
139
+ <input type="checkbox" class="rounded text-purple-600 focus:ring-purple-500">
140
+ <span>ジャズ</span>
141
+ </label>
142
+ <label class="flex items-center space-x-2">
143
+ <input type="checkbox" class="rounded text-purple-600 focus:ring-purple-500">
144
+ <span>ポップス</span>
145
+ </label>
146
+ <label class="flex items-center space-x-2">
147
+ <input type="checkbox" class="rounded text-purple-600 focus:ring-purple-500">
148
+ <span>R&B / ソウル</span>
149
+ </label>
150
+ <label class="flex items-center space-x-2">
151
+ <input type="checkbox" class="rounded text-purple-600 focus:ring-purple-500">
152
+ <span>フォーク</span>
153
+ </label>
154
+ <label class="flex items-center space-x-2">
155
+ <input type="checkbox" class="rounded text-purple-600 focus:ring-purple-500">
156
+ <span>レゲエ / スカ</span>
157
+ </label>
158
+ <label class="flex items-center space-x-2">
159
+ <input type="checkbox" class="rounded text-purple-600 focus:ring-purple-500">
160
+ <span>ワールドミュージック</span>
161
+ </label>
162
+ <label class="flex items-center space-x-2">
163
+ <input type="checkbox" class="rounded text-purple-600 focus:ring-purple-500">
164
+ <span>その他</span>
165
+ </label>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- 参加スタンス -->
170
+ <div class="md:col-span-2">
171
+ <label class="block text-gray-700 font-medium mb-2" for="stance">参加スタンス</label>
172
+ <select id="stance" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
173
+ <option value="">選択してください</option>
174
+ <option value="active">がっつり回りたい（休憩時間は最小限）</option>
175
+ <option value="moderate">ゆったり回りたい（無理なく適度に休憩）</option>
176
+ <option value="family">子連れ向け（朝～夕方メインの活動時間���キッズランドを優先）</option>
177
+ <option value="none">特に無し</option>
178
+ </select>
179
+ </div>
180
+ </div>
181
+
182
+ <div class="mt-6 flex justify-end">
183
+ <button id="nextStep1" class="bg-purple-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-purple-700 transition flex items-center">
184
+ 次へ <i class="fas fa-arrow-right ml-2"></i>
185
+ </button>
186
+ </div>
187
+ </div>
188
+
189
+ <!-- アーティスト選択セクション (初期状態では非表示) -->
190
+ <div id="artistSection" class="bg-white rounded-xl shadow-md p-6 mb-8 hidden fade-in">
191
+ <h2 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
192
+ <i class="fas fa-guitar text-purple-600 mr-2"></i>観たいアーティストを選択
193
+ </h2>
194
+
195
+ <div class="mb-4">
196
+ <input type="text" placeholder="アーティスト名で検索..." class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
197
+ </div>
198
+
199
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
200
+ <!-- アーティストカード (サンプル) -->
201
+ <div class="artist-card bg-white border border-gray-200 rounded-lg p-4 transition duration-300 cursor-pointer">
202
+ <div class="flex items-start">
203
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 mr-3">
204
+ <i class="fas fa-music text-2xl"></i>
205
+ </div>
206
+ <div>
207
+ <h3 class="font-bold text-gray-800">アーティスト名1</h3>
208
+ <p class="text-sm text-gray-600">12:00 - 13:00 @ GREEN STAGE</p>
209
+ <p class="text-xs text-purple-600 mt-1">ロック / オルタナティブ</p>
210
+ </div>
211
+ </div>
212
+ <div class="mt-3">
213
+ <label class="block text-sm font-medium text-gray-700 mb-1">観たい度</label>
214
+ <select class="w-full px-2 py-1 border border-gray-300 rounded text-sm focus:ring-purple-500 focus:border-purple-500">
215
+ <option value="">選択してください</option>
216
+ <option value="must">最初から最後まで観たい</option>
217
+ <option value="want">ほんの一部でもいいから観たい</option>
218
+ <option value="maybe">タイミング合えば観たい</option>
219
+ <option value="none">特に無し</option>
220
+ </select>
221
+ </div>
222
+ </div>
223
+
224
+ <!-- 他のアーティストカードも同様に追加 -->
225
+ <div class="artist-card bg-white border border-gray-200 rounded-lg p-4 transition duration-300 cursor-pointer">
226
+ <div class="flex items-start">
227
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-3">
228
+ <i class="fas fa-headphones text-2xl"></i>
229
+ </div>
230
+ <div>
231
+ <h3 class="font-bold text-gray-800">アーティスト名2</h3>
232
+ <p class="text-sm text-gray-600">14:30 - 15:30 @ RED STAGE</p>
233
+ <p class="text-xs text-blue-600 mt-1">エレクトロニック / テクノ</p>
234
+ </div>
235
+ </div>
236
+ <div class="mt-3">
237
+ <label class="block text-sm font-medium text-gray-700 mb-1">観たい度</label>
238
+ <select class="w-full px-2 py-1 border border-gray-300 rounded text-sm focus:ring-purple-500 focus:border-purple-500">
239
+ <option value="">選択してください</option>
240
+ <option value="must">最初から最後まで観たい</option>
241
+ <option value="want">ほんの一部でもいいから観たい</option>
242
+ <option value="maybe">タイミング合えば観たい</option>
243
+ <option value="none">特に無し</option>
244
+ </select>
245
+ </div>
246
+ </div>
247
+
248
+ <div class="artist-card bg-white border border-gray-200 rounded-lg p-4 transition duration-300 cursor-pointer">
249
+ <div class="flex items-start">
250
+ <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center text-green-600 mr-3">
251
+ <i class="fas fa-drum text-2xl"></i>
252
+ </div>
253
+ <div>
254
+ <h3 class="font-bold text-gray-800">アーティスト名3</h3>
255
+ <p class="text-sm text-gray-600">16:00 - 17:00 @ BLUE STAGE</p>
256
+ <p class="text-xs text-green-600 mt-1">ヒップホップ / R&B</p>
257
+ </div>
258
+ </div>
259
+ <div class="mt-3">
260
+ <label class="block text-sm font-medium text-gray-700 mb-1">観たい度</label>
261
+ <select class="w-full px-2 py-1 border border-gray-300 rounded text-sm focus:ring-purple-500 focus:border-purple-500">
262
+ <option value="">選択してください</option>
263
+ <option value="must">最初から最後まで観たい</option>
264
+ <option value="want">ほんの一部でもいいから観たい</option>
265
+ <option value="maybe">タイミング合えば観たい</option>
266
+ <option value="none">特に無し</option>
267
+ </select>
268
+ </div>
269
+ </div>
270
+ </div>
271
+
272
+ <div class="mt-6 flex justify-between">
273
+ <button id="backStep1" class="bg-gray-300 text-gray-800 px-6 py-2 rounded-lg font-medium hover:bg-gray-400 transition flex items-center">
274
+ <i class="fas fa-arrow-left mr-2"></i> 戻る
275
+ </button>
276
+ <button id="nextStep2" class="bg-purple-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-purple-700 transition flex items-center">
277
+ 次へ <i class="fas fa-arrow-right ml-2"></i>
278
+ </button>
279
+ </div>
280
+ </div>
281
+
282
+ <!-- 飲食店選択セクション (初期状態では非表示) -->
283
+ <div id="foodSection" class="bg-white rounded-xl shadow-md p-6 mb-8 hidden fade-in">
284
+ <h2 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
285
+ <i class="fas fa-utensils text-purple-600 mr-2"></i>立ち寄りたい飲食店を選択
286
+ </h2>
287
+
288
+ <div class="mb-4">
289
+ <input type="text" placeholder="飲食店名または料理ジャンルで検索..." class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
290
+ </div>
291
+
292
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
293
+ <!-- 飲食店カード (サンプル) -->
294
+ <div class="food-card bg-white border border-gray-200 rounded-lg p-4 transition duration-300 cursor-pointer">
295
+ <div class="flex items-start">
296
+ <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center text-red-600 mr-3">
297
+ <i class="fas fa-hamburger text-2xl"></i>
298
+ </div>
299
+ <div>
300
+ <h3 class="font-bold text-gray-800">グルメバーガー</h3>
301
+ <p class="text-sm text-gray-600">FOOD COURT A</p>
302
+ <p class="text-xs text-red-600 mt-1">アメリカン / ハンバーガー</p>
303
+ </div>
304
+ </div>
305
+ <div class="mt-3">
306
+ <label class="block text-sm font-medium text-gray-700 mb-1">食べたい/飲みたい度</label>
307
+ <select class="w-full px-2 py-1 border border-gray-300 rounded text-sm focus:ring-purple-500 focus:border-purple-500">
308
+ <option value="">選択してください</option>
309
+ <option value="must">絶対食べたい/飲みたい</option>
310
+ <option value="want">できれば食べたい/飲みたい</option>
311
+ <option value="maybe">少し興味はある</option>
312
+ <option value="none">特に無し</option>
313
+ </select>
314
+ </div>
315
+ </div>
316
+
317
+ <!-- 他の飲食店カードも同様に追加 -->
318
+ <div class="food-card bg-white border border-gray-200 rounded-lg p-4 transition duration-300 cursor-pointer">
319
+ <div class="flex items-start">
320
+ <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-600 mr-3">
321
+ <i class="fas fa-beer text-2xl"></i>
322
+ </div>
323
+ <div>
324
+ <h3 class="font-bold text-gray-800">クラフトビアガーデン</h3>
325
+ <p class="text-sm text-gray-600">DRINK AREA B</p>
326
+ <p class="text-xs text-yellow-600 mt-1">ビール / クラフトビール</p>
327
+ </div>
328
+ </div>
329
+ <div class="mt-3">
330
+ <label class="block text-sm font-medium text-gray-700 mb-1">食べたい/飲みたい度</label>
331
+ <select class="w-full px-2 py-1 border border-gray-300 rounded text-sm focus:ring-purple-500 focus:border-purple-500">
332
+ <option value="">選択してください</option>
333
+ <option value="must">絶対食べたい/飲みたい</option>
334
+ <option value="want">できれば食べたい/飲みたい</option>
335
+ <option value="maybe">少し興味はある</option>
336
+ <option value="none">特に無し</option>
337
+ </select>
338
+ </div>
339
+ </div>
340
+
341
+ <div class="food-card bg-white border border-gray-200 rounded-lg p-4 transition duration-300 cursor-pointer">
342
+ <div class="flex items-start">
343
+ <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center text-green-600 mr-3">
344
+ <i class="fas fa-ice-cream text-2xl"></i>
345
+ </div>
346
+ <div>
347
+ <h3 class="font-bold text-gray-800">スイーツパラダイス</h3>
348
+ <p class="text-sm text-gray-600">SWEET AREA C</p>
349
+ <p class="text-xs text-green-600 mt-1">スイーツ / アイスクリーム</p>
350
+ </div>
351
+ </div>
352
+ <div class="mt-3">
353
+ <label class="block text-sm font-medium text-gray-700 mb-1">食べたい/飲みたい度</label>
354
+ <select class="w-full px-2 py-1 border border-gray-300 rounded text-sm focus:ring-purple-500 focus:border-purple-500">
355
+ <option value="">選択してください</option>
356
+ <option value="must">絶対食べたい/飲みたい</option>
357
+ <option value="want">できれば食べたい/飲みたい</option>
358
+ <option value="maybe">少し興味はある</option>
359
+ <option value="none">特に無し</option>
360
+ </select>
361
+ </div>
362
+ </div>
363
+ </div>
364
+
365
+ <div class="mt-6 flex justify-between">
366
+ <button id="backStep2" class="bg-gray-300 text-gray-800 px-6 py-2 rounded-lg font-medium hover:bg-gray-400 transition flex items-center">
367
+ <i class="fas fa-arrow-left mr-2"></i> 戻る
368
+ </button>
369
+ <button id="nextStep3" class="bg-purple-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-purple-700 transition flex items-center">
370
+ 次へ <i class="fas fa-arrow-right ml-2"></i>
371
+ </button>
372
+ </div>
373
+ </div>
374
+
375
+ <!-- 確認セクション (初期状態では非表示) -->
376
+ <div id="confirmSection" class="bg-white rounded-xl shadow-md p-6 mb-8 hidden fade-in">
377
+ <h2 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
378
+ <i class="fas fa-check-circle text-purple-600 mr-2"></i>入力内容の確認
379
+ </h2>
380
+
381
+ <div class="bg-gray-50 p-4 rounded-lg mb-6">
382
+ <h3 class="font-semibold text-gray-700 mb-2 flex items-center">
383
+ <i class="fas fa-user text-purple-500 mr-2"></i>基本情報
384
+ </h3>
385
+ <div class="grid md:grid-cols-2 gap-4">
386
+ <div>
387
+ <p class="text-sm text-gray-600">お名前</p>
388
+ <p class="font-medium" id="confirmName">山田太郎</p>
389
+ </div>
390
+ <div>
391
+ <p class="text-sm text-gray-600">参加日</p>
392
+ <p class="font-medium" id="confirmDate">1日目 (7月28日)</p>
393
+ </div>
394
+ <div>
395
+ <p class="text-sm text-gray-600">好きな音楽ジャンル</p>
396
+ <p class="font-medium" id="confirmGenre">ロック, エレクトロニック, ヒップホップ</p>
397
+ </div>
398
+ <div>
399
+ <p class="text-sm text-gray-600">参加スタンス</p>
400
+ <p class="font-medium" id="confirmStance">がっつり回りたい（休憩時間は最小限）</p>
401
+ </div>
402
+ </div>
403
+ </div>
404
+
405
+ <div class="bg-gray-50 p-4 rounded-lg mb-6">
406
+ <h3 class="font-semibold text-gray-700 mb-2 flex items-center">
407
+ <i class="fas fa-guitar text-purple-500 mr-2"></i>観たいアーティスト
408
+ </h3>
409
+ <div class="space-y-3">
410
+ <div class="flex justify-between items-center border-b border-gray-200 pb-2">
411
+ <div>
412
+ <p class="font-medium">アーティスト名1</p>
413
+ <p class="text-sm text-gray-600">12:00 - 13:00 @ GREEN STAGE</p>
414
+ </div>
415
+ <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs font-medium">必須</span>
416
+ </div>
417
+ <div class="flex justify-between items-center border-b border-gray-200 pb-2">
418
+ <div>
419
+ <p class="font-medium">アーティスト名2</p>
420
+ <p class="text-sm text-gray-600">14:30 - 15:30 @ RED STAGE</p>
421
+ </div>
422
+ <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs font-medium">希望</span>
423
+ </div>
424
+ </div>
425
+ </div>
426
+
427
+ <div class="bg-gray-50 p-4 rounded-lg mb-6">
428
+ <h3 class="font-semibold text-gray-700 mb-2 flex items-center">
429
+ <i class="fas fa-utensils text-purple-500 mr-2"></i>立ち寄りたい飲食店
430
+ </h3>
431
+ <div class="space-y-3">
432
+ <div class="flex justify-between items-center border-b border-gray-200 pb-2">
433
+ <div>
434
+ <p class="font-medium">グルメバーガー</p>
435
+ <p class="text-sm text-gray-600">FOOD COURT A</p>
436
+ </div>
437
+ <span class="bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs font-medium">必須</span>
438
+ </div>
439
+ <div class="flex justify-between items-center border-b border-gray-200 pb-2">
440
+ <div>
441
+ <p class="font-medium">クラフトビアガーデン</p>
442
+ <p class="text-sm text-gray-600">DRINK AREA B</p>
443
+ </div>
444
+ <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs font-medium">興味あり</span>
445
+ </div>
446
+ </div>
447
+ </div>
448
+
449
+ <div class="mt-6 flex justify-between">
450
+ <button id="backStep3" class="bg-gray-300 text-gray-800 px-6 py-2 rounded-lg font-medium hover:bg-gray-400 transition flex items-center">
451
+ <i class="fas fa-arrow-left mr-2"></i> 戻る
452
+ </button>
453
+ <button id="generateRoute" class="bg-purple-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-purple-700 transition flex items-center">
454
+ 最適ルートを生成 <i class="fas fa-magic ml-2"></i>
455
+ </button>
456
+ </div>
457
+ </div>
458
+
459
+ <!-- 結果表示セクション (初期状態では非表示) -->
460
+ <div id="resultSection" class="bg-white rounded-xl shadow-md p-6 mb-8 hidden fade-in">
461
+ <div class="flex justify-between items-center mb-6">
462
+ <h2 class="text-xl font-bold text-gray-800 flex items-center">
463
+ <i class="fas fa-route text-purple-600 mr-2"></i>あなたに最適なフェスルート
464
+ </h2>
465
+ <button class="text-purple-600 hover:text-purple-800 flex items-center">
466
+ <i class="fas fa-download mr-1"></i> PDFで保存
467
+ </button>
468
+ </div>
469
+
470
+ <div class="bg-purple-50 border-l-4 border-purple-600 p-4 rounded-r-lg mb-6">
471
+ <div class="flex">
472
+ <div class="flex-shrink-0">
473
+ <i class="fas fa-info-circle text-purple-600"></i>
474
+ </div>
475
+ <div class="ml-3">
476
+ <p class="text-sm text-purple-700">
477
+ このルートは、あなたが選択したアーティストや飲食店、移動時間を考慮して最適化されています。休憩ポイントやおすすめスポットも提案しています。
478
+ </p>
479
+ </div>
480
+ </div>
481
+ </div>
482
+
483
+ <!-- スケジュール表 -->
484
+ <div class="space-y-6">
485
+ <div class="schedule-item">
486
+ <div class="schedule-dot"></div>
487
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
488
+ <div class="flex justify-between items-start">
489
+ <div>
490
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
491
+ 10:00 - 10:30
492
+ </span>
493
+ <h3 class="mt-1 font-bold text-gray-800">会場到着</h3>
494
+ </div>
495
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
496
+ <i class="fas fa-map-marker-alt mr-1"></i> メインゲート
497
+ </span>
498
+ </div>
499
+ <p class="mt-2 text-sm text-gray-600">会場に到着しました。まずは会場マップを確認しましょう。</p>
500
+ </div>
501
+ </div>
502
+
503
+ <div class="schedule-item">
504
+ <div class="schedule-dot"></div>
505
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
506
+ <div class="flex justify-between items-start">
507
+ <div>
508
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
509
+ 10:30 - 11:30
510
+ </span>
511
+ <h3 class="mt-1 font-bold text-gray-800">グルメバーガーでランチ</h3>
512
+ </div>
513
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
514
+ <i class="fas fa-utensils mr-1"></i> FOOD COURT A
515
+ </span>
516
+ </div>
517
+ <p class="mt-2 text-sm text-gray-600">人気店なので早めのランチがおすすめです。移動時間も考慮しています。</p>
518
+ <div class="mt-2 flex items-center text-sm text-purple-600">
519
+ <i class="fas fa-walking mr-1"></i> 次の目的地まで約10分
520
+ </div>
521
+ </div>
522
+ </div>
523
+
524
+ <div class="schedule-item">
525
+ <div class="schedule-dot"></div>
526
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
527
+ <div class="flex justify-between items-start">
528
+ <div>
529
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
530
+ 12:00 - 13:00
531
+ </span>
532
+ <h3 class="mt-1 font-bold text-gray-800">アーティスト名1 ライブ</h3>
533
+ </div>
534
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
535
+ <i class="fas fa-music mr-1"></i> GREEN STAGE
536
+ </span>
537
+ </div>
538
+ <p class="mt-2 text-sm text-gray-600">あなたが「必須」と指定したアーティストです。前から3列目がおすすめスポット。</p>
539
+ <div class="mt-3">
540
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
541
+ <i class="fas fa-lightbulb mr-1"></i> おすすめ: 終了後すぐに移動するとRED STAGEまで5分で到着
542
+ </span>
543
+ </div>
544
+ </div>
545
+ </div>
546
+
547
+ <div class="schedule-item">
548
+ <div class="schedule-dot"></div>
549
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
550
+ <div class="flex justify-between items-start">
551
+ <div>
552
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
553
+ 13:05 - 13:30
554
+ </span>
555
+ <h3 class="mt-1 font-bold text-gray-800">休憩 & 移動</h3>
556
+ </div>
557
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
558
+ <i class="fas fa-coffee mr-1"></i> 休憩エリア
559
+ </span>
560
+ </div>
561
+ <p class="mt-2 text-sm text-gray-600">近くの休憩エリアで水分補給。トイレも利用できます。</p>
562
+ </div>
563
+ </div>
564
+
565
+ <div class="schedule-item">
566
+ <div class="schedule-dot"></div>
567
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
568
+ <div class="flex justify-between items-start">
569
+ <div>
570
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
571
+ 14:30 - 15:30
572
+ </span>
573
+ <h3 class="mt-1 font-bold text-gray-800">アーティスト名2 ライブ</h3>
574
+ </div>
575
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
576
+ <i class="fas fa-music mr-1"></i> RED STAGE
577
+ </span>
578
+ </div>
579
+ <p class="mt-2 text-sm text-gray-600">あなたが「希望」と指定したアーティストです。好きなジャンル「エレクトロニック」にマッチ。</p>
580
+ <div class="mt-3">
581
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">
582
+ <i class="fas fa-info-circle mr-1"></i> この後、クラフトビアガーデンまで約8分
583
+ </span>
584
+ </div>
585
+ </div>
586
+ </div>
587
+
588
+ <div class="schedule-item">
589
+ <div class="schedule-dot"></div>
590
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
591
+ <div class="flex justify-between items-start">
592
+ <div>
593
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
594
+ 15:40 - 16:20
595
+ </span>
596
+ <h3 class="mt-1 font-bold text-gray-800">クラフトビアガーデン</h3>
597
+ </div>
598
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
599
+ <i class="fas fa-beer mr-1"></i> DRINK AREA B
600
+ </span>
601
+ </div>
602
+ <p class="mt-2 text-sm text-gray-600">地元のクラフトビールが楽しめます。軽食も用意されています。</p>
603
+ <div class="mt-3">
604
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">
605
+ <i class="fas fa-clock mr-1"></i> 16:30からのライブに間に合うように調整
606
+ </span>
607
+ </div>
608
+ </div>
609
+ </div>
610
+
611
+ <div class="schedule-item">
612
+ <div class="schedule-dot"></div>
613
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
614
+ <div class="flex justify-between items-start">
615
+ <div>
616
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
617
+ 16:30 - 17:30
618
+ </span>
619
+ <h3 class="mt-1 font-bold text-gray-800">おすすめアーティスト ライブ</h3>
620
+ </div>
621
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
622
+ <i class="fas fa-music mr-1"></i> BLUE STAGE
623
+ </span>
624
+ </div>
625
+ <p class="mt-2 text-sm text-gray-600">あなたの好きなジャンル「ヒップホップ」に合うアーティストです。新しい発見があるかも！</p>
626
+ <div class="mt-2 flex items-center text-sm text-purple-600">
627
+ <i class="fas fa-star mr-1"></i> システムおすすめ
628
+ </div>
629
+ </div>
630
+ </div>
631
+
632
+ <div class="schedule-item">
633
+ <div class="schedule-dot"></div>
634
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
635
+ <div class="flex justify-between items-start">
636
+ <div>
637
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
638
+ 17:40 - 18:30
639
+ </span>
640
+ <h3 class="mt-1 font-bold text-gray-800">自由時間</h3>
641
+ </div>
642
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
643
+ <i class="fas fa-map-marked-alt mr-1"></i> 会場内自由移動
644
+ </span>
645
+ </div>
646
+ <p class="mt-2 text-sm text-gray-600">グッズ購入や写真撮影、休憩などに使える自由時間です。</p>
647
+ <div class="mt-3">
648
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800">
649
+ <i class="fas fa-utensils mr-1"></i> おすすめ: 夕食はFOOD COURT Cの和食が人気
650
+ </span>
651
+ </div>
652
+ </div>
653
+ </div>
654
+ </div>
655
+
656
+ <div class="mt-8 bg-gray-50 p-4 rounded-lg">
657
+ <h3 class="font-semibold text-gray-700 mb-3 flex items-center">
658
+ <i class="fas fa-lightbulb text-yellow-500 mr-2"></i>追加のおすすめ
659
+ </h3>
660
+ <div class="grid md:grid-cols-2 gap-4">
661
+ <div class="bg-white p-3 rounded-lg border border-gray-200">
662
+ <h4 class="font-medium text-gray-800 flex items-center">
663
+ <i class="fas fa-music text-purple-500 mr-2"></i> おすすめアーティスト
664
+ </h4>
665
+ <p class="text-sm text-gray-600 mt-1">19:00 - 20:00 @ WHITE STAGE の「アーティスト名4」があなたの好みに合いそうです。</p>
666
+ </div>
667
+ <div class="bg-white p-3 rounded-lg border border-gray-200">
668
+ <h4 class="font-medium text-gray-800 flex items-center">
669
+ <i class="fas fa-ice-cream text-purple-500 mr-2"></i> おすすめ飲食店
670
+ </h4>
671
+ <p class="text-sm text-gray-600 mt-1">「スイーツパラダイス」の限定メニュー「ベリーアイス」がこの時間帯なら空いています。</p>
672
+ </div>
673
+ </div>
674
+ </div>
675
+
676
+ <div class="mt-6 flex justify-between">
677
+ <button id="backToForm" class="bg-gray-300 text-gray-800 px-6 py-2 rounded-lg font-medium hover:bg-gray-400 transition flex items-center">
678
+ <i class="fas fa-edit mr-2"></i> 入力内容を修正
679
+ </button>
680
+ <button class="bg-purple-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-purple-700 transition flex items-center">
681
+ <i class="fas fa-share-alt mr-2"></i> 友達と共有
682
+ </button>
683
+ </div>
684
+ </div>
685
+ </main>
686
+
687
+ <!-- フッター -->
688
+ <footer class="bg-gray-800 text-white py-8">
689
+ <div class="container mx-auto px-4">
690
+ <div class="grid md:grid-cols-3 gap-8">
691
+ <div>
692
+ <h3 class="text-lg font-semibold mb-4 flex items-center">
693
+ <i class="fas fa-music mr-2"></i> フェスルートプランナー
694
+ </h3>
695
+ <p class="text-gray-400">音楽フェスを最大限楽しむための最適ルートを提案するサービスです。</p>
696
+ </div>
697
+ <div>
698
+ <h3 class="text-lg font-semibold mb-4">リンク</h3>
699
+ <ul class="space-y-2">
700
+ <li><a href="#" class="text-gray-400 hover:text-white transition">利用規約</a></li>
701
+ <li><a href="#" class="text-gray-400 hover:text-white transition">プライバシーポリシー</a></li>
702
+ <li><a href="#" class="text-gray-400 hover:text-white transition">お問い合わせ</a></li>
703
+ </ul>
704
+ </div>
705
+ <div>
706
+ <h3 class="text-lg font-semibold mb-4">SNSでフォロー</h3>
707
+ <div class="flex space-x-4">
708
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a>
709
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram text-xl"></i></a>
710
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook text-xl"></i></a>
711
+ </div>
712
+ </div>
713
+ </div>
714
+ <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
715
+ <p>&copy; 2023 フェスルートプランナー All rights reserved.</p>
716
+ </div>
717
+ </div>
718
+ </footer>
719
+
720
+ <script>
721
+ // ステップ遷移の制御
722
+ document.getElementById('nextStep1').addEventListener('click', function() {
723
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(1) div').classList.remove('bg-purple-600');
724
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(1) div').classList.add('bg-green-500');
725
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(3) div').classList.remove('bg-gray-300');
726
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(3) div').classList.add('bg-purple-600');
727
+
728
+ document.getElementById('artistSection').classList.remove('hidden');
729
+ document.querySelector('.bg-white.rounded-xl.shadow-md.p-6.mb-8').classList.add('hidden');
730
+ });
731
+
732
+ document.getElementById('backStep1').addEventListener('click', function() {
733
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(1) div').classList.add('bg-purple-600');
734
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(1) div').classList.remove('bg-green-500');
735
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(3) div').classList.add('bg-gray-300');
736
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(3) div').classList.remove('bg-purple-600');
737
+
738
+ document.getElementById('artistSection').classList.add('hidden');
739
+ document.querySelector('.bg-white.rounded-xl.shadow-md.p-6.mb-8').classList.remove('hidden');
740
+ });
741
+
742
+ document.getElementById('nextStep2').addEventListener('click', function() {
743
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(3) div').classList.remove('bg-purple-600');
744
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(3) div').classList.add('bg-green-500');
745
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(5) div').classList.remove('bg-gray-300');
746
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(5) div').classList.add('bg-purple-600');
747
+
748
+ document.getElementById('foodSection').classList.remove('hidden');
749
+ document.getElementById('artistSection').classList.add('hidden');
750
+ });
751
+
752
+ document.getElementById('backStep2').addEventListener('click', function() {
753
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(3) div').classList.add('bg-purple-600');
754
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(3) div').classList.remove('bg-green-500');
755
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(5) div').classList.add('bg-gray-300');
756
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(5) div').classList.remove('bg-purple-600');
757
+
758
+ document.getElementById('foodSection').classList.add('hidden');
759
+ document.getElementById('artistSection').classList.remove('hidden');
760
+ });
761
+
762
+ document.getElementById('nextStep3').addEventListener('click', function() {
763
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(5) div').classList.remove('bg-purple-600');
764
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(5) div').classList.add('bg-green-500');
765
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(7) div').classList.remove('bg-gray-300');
766
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(7) div').classList.add('bg-purple-600');
767
+
768
+ document.getElementById('confirmSection').classList.remove('hidden');
769
+ document.getElementById('foodSection').classList.add('hidden');
770
+ });
771
+
772
+ document.getElementById('backStep3').addEventListener('click', function() {
773
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(5) div').classList.add('bg-purple-600');
774
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(5) div').classList.remove('bg-green-500');
775
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(7) div').classList.add('bg-gray-300');
776
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(7) div').classList.remove('bg-purple-600');
777
+
778
+ document.getElementById('confirmSection').classList.add('hidden');
779
+ document.getElementById('foodSection').classList.remove('hidden');
780
+ });
781
+
782
+ document.getElementById('generateRoute').addEventListener('click', function() {
783
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(7) div').classList.remove('bg-purple-600');
784
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(7) div').classList.add('bg-green-500');
785
+
786
+ document.getElementById('resultSection').classList.remove('hidden');
787
+ document.getElementById('confirmSection').classList.add('hidden');
788
+
789
+ // スクロールをトップに移動
790
+ window.scrollTo(0, 0);
791
+ });
792
+
793
+ document.getElementById('backToForm').addEventListener('click', function() {
794
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(7) div').classList.add('bg-purple-600');
795
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(7) div').classList.remove('bg-green-500');
796
+
797
+ document.getElementById('resultSection').classList.add('hidden');
798
+ document.querySelector('.bg-white.rounded-xl.shadow-md.p-6.mb-8').classList.remove('hidden');
799
+
800
+ // ステップをリセット
801
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(1) div').classList.add('bg-purple-600');
802
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(1) div').classList.remove('bg-green-500');
803
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(3) div').classList.add('bg-gray-300');
804
+ document.querySelector('.flex.justify-center.mb-8 div div:nth-child(5) div').classList.add('bg-gray-300');
805
+ });
806
+ </script>
807
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MRKW/20250412fesrouteplanner" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
808
+ </html>