Spaces:
Running
Running
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>フェスルートプランナー - 音楽フェス最適ルート提案アプリ</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6b21a8 0%, #1e40af 100%); | |
| } | |
| .schedule-item { | |
| position: relative; | |
| padding-left: 2.5rem; | |
| } | |
| .schedule-item:before { | |
| content: ""; | |
| position: absolute; | |
| left: 0.75rem; | |
| top: 0; | |
| height: 100%; | |
| width: 2px; | |
| background-color: #e5e7eb; | |
| } | |
| .schedule-dot { | |
| position: absolute; | |
| left: 0.5rem; | |
| top: 0.5rem; | |
| width: 1rem; | |
| height: 1rem; | |
| border-radius: 9999px; | |
| border: 3px solid #4f46e5; | |
| background-color: white; | |
| } | |
| .artist-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .food-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <!-- ヘッダー --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-music text-2xl"></i> | |
| <h1 class="text-2xl font-bold">フェスルートプランナー</h1> | |
| </div> | |
| <button class="bg-white text-purple-800 px-4 py-2 rounded-full font-semibold hover:bg-purple-100 transition"> | |
| ログイン | |
| </button> | |
| </div> | |
| <p class="mt-2 text-purple-200">音楽フェスを最大限楽しむための最適ルートを提案</p> | |
| </div> | |
| </header> | |
| <!-- メインコンテンツ --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- ステップ表示 --> | |
| <div class="flex justify-center mb-8"> | |
| <div class="flex items-center"> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-10 h-10 rounded-full bg-purple-600 text-white flex items-center justify-center font-bold">1</div> | |
| <span class="mt-2 text-sm font-medium text-purple-600">基本情報</span> | |
| </div> | |
| <div class="w-16 h-1 bg-gray-300 mx-2"></div> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gray-300 text-white flex items-center justify-center font-bold">2</div> | |
| <span class="mt-2 text-sm font-medium text-gray-500">アーティスト選択</span> | |
| </div> | |
| <div class="w-16 h-1 bg-gray-300 mx-2"></div> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gray-300 text-white flex items-center justify-center font-bold">3</div> | |
| <span class="mt-2 text-sm font-medium text-gray-500">飲食店選択</span> | |
| </div> | |
| <div class="w-16 h-1 bg-gray-300 mx-2"></div> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gray-300 text-white flex items-center justify-center font-bold">4</div> | |
| <span class="mt-2 text-sm font-medium text-gray-500">確認</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 基本情報フォーム --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8 fade-in"> | |
| <h2 class="text-xl font-bold mb-4 text-gray-800 flex items-center"> | |
| <i class="fas fa-user-circle text-purple-600 mr-2"></i>基本情報 | |
| </h2> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <!-- 名前 --> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2" for="name">お名前</label> | |
| <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"> | |
| </div> | |
| <!-- 参加日 --> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2" for="date">参加日</label> | |
| <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"> | |
| <option value="">選択してください</option> | |
| <option value="day1">1日目 (7月28日)</option> | |
| <option value="day2">2日目 (7月29日)</option> | |
| <option value="day3">3日目 (7月30日)</option> | |
| <option value="all">全日程参加</option> | |
| </select> | |
| </div> | |
| <!-- 好きな音楽ジャンル --> | |
| <div class="md:col-span-2"> | |
| <label class="block text-gray-700 font-medium mb-2">好きな音楽ジャンル (複数選択可)</label> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-2"> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded text-purple-600 focus:ring-purple-500"> | |
| <span>ロック</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded text-purple-600 focus:ring-purple-500"> | |
| <span>エレクトロニック</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded text-purple-600 focus:ring-purple-500"> | |
| <span>ヒップホップ</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded text-purple-600 focus:ring-purple-500"> | |
| <span>ジャズ</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded text-purple-600 focus:ring-purple-500"> | |
| <span>ポップス</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded text-purple-600 focus:ring-purple-500"> | |
| <span>R&B / ソウル</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded text-purple-600 focus:ring-purple-500"> | |
| <span>フォーク</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded text-purple-600 focus:ring-purple-500"> | |
| <span>レゲエ / スカ</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded text-purple-600 focus:ring-purple-500"> | |
| <span>ワールドミュージック</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded text-purple-600 focus:ring-purple-500"> | |
| <span>その他</span> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- 参加スタンス --> | |
| <div class="md:col-span-2"> | |
| <label class="block text-gray-700 font-medium mb-2" for="stance">参加スタンス</label> | |
| <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"> | |
| <option value="">選択してください</option> | |
| <option value="active">がっつり回りたい（休憩時間は最小限）</option> | |
| <option value="moderate">ゆったり回りたい（無理なく適度に休憩）</option> | |
| <option value="family">子連れ向け（朝～夕方メインの活動時間、キッズランドを優先）</option> | |
| <option value="none">特に無し</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-end"> | |
| <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"> | |
| 次へ <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- アーティスト選択セクション (初期状態では非表示) --> | |
| <div id="artistSection" class="bg-white rounded-xl shadow-md p-6 mb-8 hidden fade-in"> | |
| <h2 class="text-xl font-bold mb-4 text-gray-800 flex items-center"> | |
| <i class="fas fa-guitar text-purple-600 mr-2"></i>観たいアーティストを選択 | |
| </h2> | |
| <div class="mb-4"> | |
| <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"> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <!-- アーティストカード (サンプル) --> | |
| <div class="artist-card bg-white border border-gray-200 rounded-lg p-4 transition duration-300 cursor-pointer"> | |
| <div class="flex items-start"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 mr-3"> | |
| <i class="fas fa-music text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-gray-800">アーティスト名1</h3> | |
| <p class="text-sm text-gray-600">12:00 - 13:00 @ GREEN STAGE</p> | |
| <p class="text-xs text-purple-600 mt-1">ロック / オルタナティブ</p> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">観たい度</label> | |
| <select class="w-full px-2 py-1 border border-gray-300 rounded text-sm focus:ring-purple-500 focus:border-purple-500"> | |
| <option value="">選択してください</option> | |
| <option value="must">最初から最後まで観たい</option> | |
| <option value="want">ほんの一部でもいいから観たい</option> | |
| <option value="maybe">タイミング合えば観たい</option> | |
| <option value="none">特に無し</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-- 他のアーティストカードも同様に追加 --> | |
| <div class="artist-card bg-white border border-gray-200 rounded-lg p-4 transition duration-300 cursor-pointer"> | |
| <div class="flex items-start"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-3"> | |
| <i class="fas fa-headphones text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-gray-800">アーティスト名2</h3> | |
| <p class="text-sm text-gray-600">14:30 - 15:30 @ RED STAGE</p> | |
| <p class="text-xs text-blue-600 mt-1">エレクトロニック / テクノ</p> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">観たい度</label> | |
| <select class="w-full px-2 py-1 border border-gray-300 rounded text-sm focus:ring-purple-500 focus:border-purple-500"> | |
| <option value="">選択してください</option> | |
| <option value="must">最初から最後まで観たい</option> | |
| <option value="want">ほんの一部でもいいから観たい</option> | |
| <option value="maybe">タイミング合えば観たい</option> | |
| <option value="none">特に無し</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="artist-card bg-white border border-gray-200 rounded-lg p-4 transition duration-300 cursor-pointer"> | |
| <div class="flex items-start"> | |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center text-green-600 mr-3"> | |
| <i class="fas fa-drum text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-gray-800">アーティスト名3</h3> | |
| <p class="text-sm text-gray-600">16:00 - 17:00 @ BLUE STAGE</p> | |
| <p class="text-xs text-green-600 mt-1">ヒップホップ / R&B</p> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">観たい度</label> | |
| <select class="w-full px-2 py-1 border border-gray-300 rounded text-sm focus:ring-purple-500 focus:border-purple-500"> | |
| <option value="">選択してください</option> | |
| <option value="must">最初から最後まで観たい</option> | |
| <option value="want">ほんの一部でもいいから観たい</option> | |
| <option value="maybe">タイミング合えば観たい</option> | |
| <option value="none">特に無し</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between"> | |
| <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"> | |
| <i class="fas fa-arrow-left mr-2"></i> 戻る | |
| </button> | |
| <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"> | |
| 次へ <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- 飲食店選択セクション (初期状態では非表示) --> | |
| <div id="foodSection" class="bg-white rounded-xl shadow-md p-6 mb-8 hidden fade-in"> | |
| <h2 class="text-xl font-bold mb-4 text-gray-800 flex items-center"> | |
| <i class="fas fa-utensils text-purple-600 mr-2"></i>立ち寄りたい飲食店を選択 | |
| </h2> | |
| <div class="mb-4"> | |
| <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"> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <!-- 飲食店カード (サンプル) --> | |
| <div class="food-card bg-white border border-gray-200 rounded-lg p-4 transition duration-300 cursor-pointer"> | |
| <div class="flex items-start"> | |
| <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center text-red-600 mr-3"> | |
| <i class="fas fa-hamburger text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-gray-800">グルメバーガー</h3> | |
| <p class="text-sm text-gray-600">FOOD COURT A</p> | |
| <p class="text-xs text-red-600 mt-1">アメリカン / ハンバーガー</p> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">食べたい/飲みたい度</label> | |
| <select class="w-full px-2 py-1 border border-gray-300 rounded text-sm focus:ring-purple-500 focus:border-purple-500"> | |
| <option value="">選択してください</option> | |
| <option value="must">絶対食べたい/飲みたい</option> | |
| <option value="want">できれば食べたい/飲みたい</option> | |
| <option value="maybe">少し興味はある</option> | |
| <option value="none">特に無し</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-- 他の飲食店カードも同様に追加 --> | |
| <div class="food-card bg-white border border-gray-200 rounded-lg p-4 transition duration-300 cursor-pointer"> | |
| <div class="flex items-start"> | |
| <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-600 mr-3"> | |
| <i class="fas fa-beer text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-gray-800">クラフトビアガーデン</h3> | |
| <p class="text-sm text-gray-600">DRINK AREA B</p> | |
| <p class="text-xs text-yellow-600 mt-1">ビール / クラフトビール</p> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">食べたい/飲みたい度</label> | |
| <select class="w-full px-2 py-1 border border-gray-300 rounded text-sm focus:ring-purple-500 focus:border-purple-500"> | |
| <option value="">選択してください</option> | |
| <option value="must">絶対食べたい/飲みたい</option> | |
| <option value="want">できれば食べたい/飲みたい</option> | |
| <option value="maybe">少し興味はある</option> | |
| <option value="none">特に無し</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="food-card bg-white border border-gray-200 rounded-lg p-4 transition duration-300 cursor-pointer"> | |
| <div class="flex items-start"> | |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center text-green-600 mr-3"> | |
| <i class="fas fa-ice-cream text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-gray-800">スイーツパラダイス</h3> | |
| <p class="text-sm text-gray-600">SWEET AREA C</p> | |
| <p class="text-xs text-green-600 mt-1">スイーツ / アイスクリーム</p> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">食べたい/飲みたい度</label> | |
| <select class="w-full px-2 py-1 border border-gray-300 rounded text-sm focus:ring-purple-500 focus:border-purple-500"> | |
| <option value="">選択してください</option> | |
| <option value="must">絶対食べたい/飲みたい</option> | |
| <option value="want">できれば食べたい/飲みたい</option> | |
| <option value="maybe">少し興味はある</option> | |
| <option value="none">特に無し</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between"> | |
| <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"> | |
| <i class="fas fa-arrow-left mr-2"></i> 戻る | |
| </button> | |
| <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"> | |
| 次へ <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- 確認セクション (初期状態では非表示) --> | |
| <div id="confirmSection" class="bg-white rounded-xl shadow-md p-6 mb-8 hidden fade-in"> | |
| <h2 class="text-xl font-bold mb-4 text-gray-800 flex items-center"> | |
| <i class="fas fa-check-circle text-purple-600 mr-2"></i>入力内容の確認 | |
| </h2> | |
| <div class="bg-gray-50 p-4 rounded-lg mb-6"> | |
| <h3 class="font-semibold text-gray-700 mb-2 flex items-center"> | |
| <i class="fas fa-user text-purple-500 mr-2"></i>基本情報 | |
| </h3> | |
| <div class="grid md:grid-cols-2 gap-4"> | |
| <div> | |
| <p class="text-sm text-gray-600">お名前</p> | |
| <p class="font-medium" id="confirmName">山田太郎</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-600">参加日</p> | |
| <p class="font-medium" id="confirmDate">1日目 (7月28日)</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-600">好きな音楽ジャンル</p> | |
| <p class="font-medium" id="confirmGenre">ロック, エレクトロニック, ヒップホップ</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-600">参加スタンス</p> | |
| <p class="font-medium" id="confirmStance">がっつり回りたい（休憩時間は最小限）</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg mb-6"> | |
| <h3 class="font-semibold text-gray-700 mb-2 flex items-center"> | |
| <i class="fas fa-guitar text-purple-500 mr-2"></i>観たいアーティスト | |
| </h3> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center border-b border-gray-200 pb-2"> | |
| <div> | |
| <p class="font-medium">アーティスト名1</p> | |
| <p class="text-sm text-gray-600">12:00 - 13:00 @ GREEN STAGE</p> | |
| </div> | |
| <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs font-medium">必須</span> | |
| </div> | |
| <div class="flex justify-between items-center border-b border-gray-200 pb-2"> | |
| <div> | |
| <p class="font-medium">アーティスト名2</p> | |
| <p class="text-sm text-gray-600">14:30 - 15:30 @ RED STAGE</p> | |
| </div> | |
| <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs font-medium">希望</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg mb-6"> | |
| <h3 class="font-semibold text-gray-700 mb-2 flex items-center"> | |
| <i class="fas fa-utensils text-purple-500 mr-2"></i>立ち寄りたい飲食店 | |
| </h3> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center border-b border-gray-200 pb-2"> | |
| <div> | |
| <p class="font-medium">グルメバーガー</p> | |
| <p class="text-sm text-gray-600">FOOD COURT A</p> | |
| </div> | |
| <span class="bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs font-medium">必須</span> | |
| </div> | |
| <div class="flex justify-between items-center border-b border-gray-200 pb-2"> | |
| <div> | |
| <p class="font-medium">クラフトビアガーデン</p> | |
| <p class="text-sm text-gray-600">DRINK AREA B</p> | |
| </div> | |
| <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs font-medium">興味あり</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between"> | |
| <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"> | |
| <i class="fas fa-arrow-left mr-2"></i> 戻る | |
| </button> | |
| <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"> | |
| 最適ルートを生成 <i class="fas fa-magic ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- 結果表示セクション (初期状態では非表示) --> | |
| <div id="resultSection" class="bg-white rounded-xl shadow-md p-6 mb-8 hidden fade-in"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold text-gray-800 flex items-center"> | |
| <i class="fas fa-route text-purple-600 mr-2"></i>あなたに最適なフェスルート | |
| </h2> | |
| <button class="text-purple-600 hover:text-purple-800 flex items-center"> | |
| <i class="fas fa-download mr-1"></i> PDFで保存 | |
| </button> | |
| </div> | |
| <div class="bg-purple-50 border-l-4 border-purple-600 p-4 rounded-r-lg mb-6"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-info-circle text-purple-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-purple-700"> | |
| このルートは、あなたが選択したアーティストや飲食店、移動時間を考慮して最適化されています。休憩ポイントやおすすめスポットも提案しています。 | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- スケジュール表 --> | |
| <div class="space-y-6"> | |
| <div class="schedule-item"> | |
| <div class="schedule-dot"></div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800"> | |
| 10:00 - 10:30 | |
| </span> | |
| <h3 class="mt-1 font-bold text-gray-800">会場到着</h3> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"> | |
| <i class="fas fa-map-marker-alt mr-1"></i> メインゲート | |
| </span> | |
| </div> | |
| <p class="mt-2 text-sm text-gray-600">会場に到着しました。まずは会場マップを確認しましょう。</p> | |
| </div> | |
| </div> | |
| <div class="schedule-item"> | |
| <div class="schedule-dot"></div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800"> | |
| 10:30 - 11:30 | |
| </span> | |
| <h3 class="mt-1 font-bold text-gray-800">グルメバーガーでランチ</h3> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"> | |
| <i class="fas fa-utensils mr-1"></i> FOOD COURT A | |
| </span> | |
| </div> | |
| <p class="mt-2 text-sm text-gray-600">人気店なので早めのランチがおすすめです。移動時間も考慮しています。</p> | |
| <div class="mt-2 flex items-center text-sm text-purple-600"> | |
| <i class="fas fa-walking mr-1"></i> 次の目的地まで約10分 | |
| </div> | |
| </div> | |
| </div> | |
| <div class="schedule-item"> | |
| <div class="schedule-dot"></div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800"> | |
| 12:00 - 13:00 | |
| </span> | |
| <h3 class="mt-1 font-bold text-gray-800">アーティスト名1 ライブ</h3> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"> | |
| <i class="fas fa-music mr-1"></i> GREEN STAGE | |
| </span> | |
| </div> | |
| <p class="mt-2 text-sm text-gray-600">あなたが「必須」と指定したアーティストです。前から3列目がおすすめスポット。</p> | |
| <div class="mt-3"> | |
| <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800"> | |
| <i class="fas fa-lightbulb mr-1"></i> おすすめ: 終了後すぐに移動するとRED STAGEまで5分で到着 | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="schedule-item"> | |
| <div class="schedule-dot"></div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800"> | |
| 13:05 - 13:30 | |
| </span> | |
| <h3 class="mt-1 font-bold text-gray-800">休憩 & 移動</h3> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"> | |
| <i class="fas fa-coffee mr-1"></i> 休憩エリア | |
| </span> | |
| </div> | |
| <p class="mt-2 text-sm text-gray-600">近くの休憩エリアで水分補給。トイレも利用できます。</p> | |
| </div> | |
| </div> | |
| <div class="schedule-item"> | |
| <div class="schedule-dot"></div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800"> | |
| 14:30 - 15:30 | |
| </span> | |
| <h3 class="mt-1 font-bold text-gray-800">アーティスト名2 ライブ</h3> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"> | |
| <i class="fas fa-music mr-1"></i> RED STAGE | |
| </span> | |
| </div> | |
| <p class="mt-2 text-sm text-gray-600">あなたが「希望」と指定したアーティストです。好きなジャンル「エレクトロニック」にマッチ。</p> | |
| <div class="mt-3"> | |
| <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800"> | |
| <i class="fas fa-info-circle mr-1"></i> この後、クラフトビアガーデンまで約8分 | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="schedule-item"> | |
| <div class="schedule-dot"></div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800"> | |
| 15:40 - 16:20 | |
| </span> | |
| <h3 class="mt-1 font-bold text-gray-800">クラフトビアガーデン</h3> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"> | |
| <i class="fas fa-beer mr-1"></i> DRINK AREA B | |
| </span> | |
| </div> | |
| <p class="mt-2 text-sm text-gray-600">地元のクラフトビールが楽しめます。軽食も用意されています。</p> | |
| <div class="mt-3"> | |
| <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800"> | |
| <i class="fas fa-clock mr-1"></i> 16:30からのライブに間に合うように調整 | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="schedule-item"> | |
| <div class="schedule-dot"></div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800"> | |
| 16:30 - 17:30 | |
| </span> | |
| <h3 class="mt-1 font-bold text-gray-800">おすすめアーティスト ライブ</h3> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"> | |
| <i class="fas fa-music mr-1"></i> BLUE STAGE | |
| </span> | |
| </div> | |
| <p class="mt-2 text-sm text-gray-600">あなたの好きなジャンル「ヒップホップ」に合うアーティストです。新しい発見があるかも！</p> | |
| <div class="mt-2 flex items-center text-sm text-purple-600"> | |
| <i class="fas fa-star mr-1"></i> システムおすすめ | |
| </div> | |
| </div> | |
| </div> | |
| <div class="schedule-item"> | |
| <div class="schedule-dot"></div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800"> | |
| 17:40 - 18:30 | |
| </span> | |
| <h3 class="mt-1 font-bold text-gray-800">自由時間</h3> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"> | |
| <i class="fas fa-map-marked-alt mr-1"></i> 会場内自由移動 | |
| </span> | |
| </div> | |
| <p class="mt-2 text-sm text-gray-600">グッズ購入や写真撮影、休憩などに使える自由時間です。</p> | |
| <div class="mt-3"> | |
| <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800"> | |
| <i class="fas fa-utensils mr-1"></i> おすすめ: 夕食はFOOD COURT Cの和食が人気 | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="font-semibold text-gray-700 mb-3 flex items-center"> | |
| <i class="fas fa-lightbulb text-yellow-500 mr-2"></i>追加のおすすめ | |
| </h3> | |
| <div class="grid md:grid-cols-2 gap-4"> | |
| <div class="bg-white p-3 rounded-lg border border-gray-200"> | |
| <h4 class="font-medium text-gray-800 flex items-center"> | |
| <i class="fas fa-music text-purple-500 mr-2"></i> おすすめアーティスト | |
| </h4> | |
| <p class="text-sm text-gray-600 mt-1">19:00 - 20:00 @ WHITE STAGE の「アーティスト名4」があなたの好みに合いそうです。</p> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg border border-gray-200"> | |
| <h4 class="font-medium text-gray-800 flex items-center"> | |
| <i class="fas fa-ice-cream text-purple-500 mr-2"></i> おすすめ飲食店 | |
| </h4> | |
| <p class="text-sm text-gray-600 mt-1">「スイーツパラダイス」の限定メニュー「ベリーアイス」がこの時間帯なら空いています。</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between"> | |
| <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"> | |
| <i class="fas fa-edit mr-2"></i> 入力内容を修正 | |
| </button> | |
| <button class="bg-purple-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-purple-700 transition flex items-center"> | |
| <i class="fas fa-share-alt mr-2"></i> 友達と共有 | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- フッター --> | |
| <footer class="bg-gray-800 text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-music mr-2"></i> フェスルートプランナー | |
| </h3> | |
| <p class="text-gray-400">音楽フェスを最大限楽しむための最適ルートを提案するサービスです。</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">リンク</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">利用規約</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">プライバシーポリシー</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">お問い合わせ</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">SNSでフォロー</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook text-xl"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400"> | |
| <p>© 2023 フェスルートプランナー All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // ステップ遷移の制御 | |
| document.getElementById('nextStep1').addEventListener('click', function() { | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(1) div').classList.remove('bg-purple-600'); | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(1) div').classList.add('bg-green-500'); | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(3) div').classList.remove('bg-gray-300'); | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(3) div').classList.add('bg-purple-600'); | |
| document.getElementById('artistSection').classList.remove('hidden'); | |
| document.querySelector('.bg-white.rounded-xl.shadow-md.p-6.mb-8').classList.add('hidden'); | |
| }); | |
| document.getElementById('backStep1').addEventListener('click', function() { | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(1) div').classList.add('bg-purple-600'); | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(1) div').classList.remove('bg-green-500'); | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(3) div').classList.add('bg-gray-300'); | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(3) div').classList.remove('bg-purple-600'); | |
| document.getElementById('artistSection').classList.add('hidden'); | |
| document.querySelector('.bg-white.rounded-xl.shadow-md.p-6.mb-8').classList.remove('hidden'); | |
| }); | |
| document.getElementById('nextStep2').addEventListener('click', function() { | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(3) div').classList.remove('bg-purple-600'); | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(3) div').classList.add('bg-green-500'); | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(5) div').classList.remove('bg-gray-300'); | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(5) div').classList.add('bg-purple-600'); | |
| document.getElementById('foodSection').classList.remove('hidden'); | |
| document.getElementById('artistSection').classList.add('hidden'); | |
| }); | |
| document.getElementById('backStep2').addEventListener('click', function() { | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(3) div').classList.add('bg-purple-600'); | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(3) div').classList.remove('bg-green-500'); | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(5) div').classList.add('bg-gray-300'); | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(5) div').classList.remove('bg-purple-600'); | |
| document.getElementById('foodSection').classList.add('hidden'); | |
| document.getElementById('artistSection').classList.remove('hidden'); | |
| }); | |
| document.getElementById('nextStep3').addEventListener('click', function() { | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(5) div').classList.remove('bg-purple-600'); | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(5) div').classList.add('bg-green-500'); | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(7) div').classList.remove('bg-gray-300'); | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(7) div').classList.add('bg-purple-600'); | |
| document.getElementById('confirmSection').classList.remove('hidden'); | |
| document.getElementById('foodSection').classList.add('hidden'); | |
| }); | |
| document.getElementById('backStep3').addEventListener('click', function() { | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(5) div').classList.add('bg-purple-600'); | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(5) div').classList.remove('bg-green-500'); | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(7) div').classList.add('bg-gray-300'); | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(7) div').classList.remove('bg-purple-600'); | |
| document.getElementById('confirmSection').classList.add('hidden'); | |
| document.getElementById('foodSection').classList.remove('hidden'); | |
| }); | |
| document.getElementById('generateRoute').addEventListener('click', function() { | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(7) div').classList.remove('bg-purple-600'); | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(7) div').classList.add('bg-green-500'); | |
| document.getElementById('resultSection').classList.remove('hidden'); | |
| document.getElementById('confirmSection').classList.add('hidden'); | |
| // スクロールをトップに移動 | |
| window.scrollTo(0, 0); | |
| }); | |
| document.getElementById('backToForm').addEventListener('click', function() { | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(7) div').classList.add('bg-purple-600'); | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(7) div').classList.remove('bg-green-500'); | |
| document.getElementById('resultSection').classList.add('hidden'); | |
| document.querySelector('.bg-white.rounded-xl.shadow-md.p-6.mb-8').classList.remove('hidden'); | |
| // ステップをリセット | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(1) div').classList.add('bg-purple-600'); | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(1) div').classList.remove('bg-green-500'); | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(3) div').classList.add('bg-gray-300'); | |
| document.querySelector('.flex.justify-center.mb-8 div div:nth-child(5) div').classList.add('bg-gray-300'); | |
| }); | |
| </script> | |
| <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> | |
| </html> |