|
|
| 27行目: |
27行目: |
| == 検索条件 == | | == 検索条件 == |
| <!-- 検索ボックス --> | | <!-- 検索ボックス --> |
| | {{検索UI/飲食店}} |
| <html> | | <html> |
| <form method="get" action="" id="searchForm">
| |
| <div class="search-form-container">
| |
|
| |
| <!-- 検索ボタンエリア -->
| |
| <div class="form-actions">
| |
| <button type="button" class="clear-btn">クリア</button>
| |
| <button type="submit" class="search-btn">検索</button>
| |
| </div>
| |
|
| |
| <!-- 予約可トグル -->
| |
| <div class="form-row toggle-row">
| |
| <span class="toggle-label">予約できる店だけ</span>
| |
| <label class="toggle">
| |
| <input type="checkbox" name="reservable" value="1">
| |
| <span class="slider"></span>
| |
| </label>
| |
| </div>
| |
|
| |
| <!-- 店名検索 -->
| |
| <div class="form-row">
| |
| <input class="form-input" type="text" name="searchText" placeholder="店名で検索" id="searchText"/>
| |
| </div>
| |
|
| |
| <!-- ジャンル -->
| |
| <div class="form-row">
| |
| <select name="genre" id="genre" class="form-select">
| |
| <option value="">すべてのジャンル</option>
| |
| <option value="居酒屋">居酒屋</option>
| |
| <option value="ダイニングバー・バル">ダイニングバー・バル</option>
| |
| <option value="創作料理">創作料理</option>
| |
| <option value="和食">和食</option>
| |
| <option value="洋食">洋食</option>
| |
| <option value="イタリアン・フレンチ">イタリアン・フレンチ</option>
| |
| <option value="中華">中華</option>
| |
| <option value="焼肉・ホルモン">焼肉・ホルモン</option>
| |
| <option value="韓国料理">韓国料理</option>
| |
| <option value="アジア・エスニック料理">アジア・エスニック料理</option>
| |
| <option value="各国料理">各国料理</option>
| |
| <option value="カラオケ・パーティ">カラオケ・パーティ</option>
| |
| <option value="バー・カクテル">バー・カクテル</option>
| |
| <option value="ラーメン">ラーメン</option>
| |
| <option value="お好み焼き・もんじゃ">お好み焼き・もんじゃ</option>
| |
| <option value="カフェ・スイーツ">カフェ・スイーツ</option>
| |
| <option value="その他グルメ">その他グルメ</option>
| |
| </select>
| |
| </div>
| |
|
| |
| <!-- 最寄り駅 -->
| |
| <div class="form-row">
| |
| <select name="station" class="form-select" id="station">
| |
| <option value="">最寄り駅：指定なし</option>
| |
| <option value="川西能勢口駅">川西能勢口</option>
| |
| <option value="雲雀丘花屋敷駅">雲雀丘花屋敷</option>
| |
| <option value="川西池田駅">川西池田</option>
| |
| <option value="北伊丹駅">北伊丹</option>
| |
| <option value="絹延橋駅">絹延橋</option>
| |
| <option value="滝山駅">滝山</option>
| |
| <option value="鴬の森駅">鴬の森</option>
| |
| <option value="鼓滝駅">鼓滝</option>
| |
| <option value="多田駅">多田</option>
| |
| <option value="平野駅">平野</option>
| |
| <option value="一の鳥居駅">一の鳥居</option>
| |
| <option value="畦野駅">畦野</option>
| |
| <option value="山下駅">山下</option>
| |
| <option value="笹部駅">笹部</option>
| |
| <option value="日生中央駅">日生中央</option>
| |
| <option value="妙見口駅">妙見口</option>
| |
| </select>
| |
| </div>
| |
|
| |
| <!-- 予算 -->
| |
| <div class="budget-section">
| |
| <div class="budget-header">
| |
| <span class="budget-title">予算</span>
| |
| <div class="budget-type">
| |
| <label class="radio-label">
| |
| <input type="radio" name="lanch-dinner" value="lanch">
| |
| <span>昼</span>
| |
| </label>
| |
| <label class="radio-label">
| |
| <input type="radio" name="lanch-dinner" value="dinner">
| |
| <span>夜</span>
| |
| </label>
| |
| </div>
| |
| </div>
| |
| <div class="budget-range">
| |
| <select name="budget_min" id="budget_min" class="form-select-small">
| |
| <option value="">下限なし</option>
| |
| <option value="1000">1,000円</option>
| |
| <option value="2000">2,000円</option>
| |
| <option value="3000">3,000円</option>
| |
| </select>
| |
| <span class="budget-separator">〜</span>
| |
| <select name="budget_max" id="budget_max" class="form-select-small">
| |
| <option value="">上限なし</option>
| |
| <option value="2000">2,000円</option>
| |
| <option value="3000">3,000円</option>
| |
| <option value="5000">5,000円</option>
| |
| </select>
| |
| </div>
| |
| </div>
| |
|
| |
| </div>
| |
|
| |
| <!-- こだわり条件（アコーディオン） -->
| |
| <details class="accordion">
| |
| <summary>こだわり条件</summary>
| |
|
| |
| <div class="accordion-content">
| |
| <!-- 支払い方法 -->
| |
| <fieldset class="filter-group">
| |
| <legend>支払い方法</legend>
| |
| <div class="checkbox-grid">
| |
| <label class="checkbox-label">
| |
| <input type="checkbox" name="credit">
| |
| <span>カード</span>
| |
| </label>
| |
| <label class="checkbox-label">
| |
| <input type="checkbox" name="emoney">
| |
| <span>電子マネー</span>
| |
| </label>
| |
| <label class="checkbox-label">
| |
| <input type="checkbox" name="qr">
| |
| <span>QRコード決済</span>
| |
| </label>
| |
| </div>
| |
| </fieldset>
| |
|
| |
| <!-- 禁煙・喫煙 -->
| |
| <fieldset class="filter-group">
| |
| <legend>禁煙 / 喫煙</legend>
| |
| <div class="radio-grid">
| |
| <label class="radio-label">
| |
| <input type="radio" name="smoking" value="">
| |
| <span>指定なし</span>
| |
| </label>
| |
| <label class="radio-label">
| |
| <input type="radio" name="smoking" value="non">
| |
| <span>禁煙のみ</span>
| |
| </label>
| |
| <label class="radio-label">
| |
| <input type="radio" name="smoking" value="allow">
| |
| <span>喫煙可</span>
| |
| </label>
| |
| </div>
| |
| </fieldset>
| |
|
| |
| <!-- メニュー -->
| |
| <fieldset class="filter-group">
| |
| <legend>メニュー</legend>
| |
| <div class="checkbox-grid">
| |
| <label class="checkbox-label">
| |
| <input type="checkbox" name="tabehodai">
| |
| <span>食べ放題</span>
| |
| </label>
| |
| <label class="checkbox-label">
| |
| <input type="checkbox" name="nomihodai">
| |
| <span>飲み放題</span>
| |
| </label>
| |
| <label class="checkbox-label">
| |
| <input type="checkbox" name="takeout">
| |
| <span>テイクアウト</span>
| |
| </label>
| |
| </div>
| |
| </fieldset>
| |
|
| |
| <!-- 設備・サービス -->
| |
| <fieldset class="filter-group">
| |
| <legend>設備・サービス</legend>
| |
| <div class="checkbox-grid">
| |
| <label class="checkbox-label">
| |
| <input type="checkbox" name="parking">
| |
| <span>駐車場</span>
| |
| </label>
| |
| <label class="checkbox-label">
| |
| <input type="checkbox" name="privateroom">
| |
| <span>個室</span>
| |
| </label>
| |
| <label class="checkbox-label">
| |
| <input type="checkbox" name="wifi">
| |
| <span>Wi-Fi</span>
| |
| </label>
| |
| <label class="checkbox-label">
| |
| <input type="checkbox" name="barrierfree">
| |
| <span>バリアフリー</span>
| |
| </label>
| |
| <label class="checkbox-label">
| |
| <input type="checkbox" name="kids">
| |
| <span>お子様連れOK</span>
| |
| </label>
| |
| <label class="checkbox-label">
| |
| <input type="checkbox" name="reserve">
| |
| <span>貸切</span>
| |
| </label>
| |
| </div>
| |
| </fieldset>
| |
|
| |
| <!-- アコーディオン内の検索ボタン -->
| |
| <div class="form-actions">
| |
| <button type="button" class="clear-btn">クリア</button>
| |
| <button type="submit" class="search-btn">検索</button>
| |
| </div>
| |
| </div>
| |
| </details>
| |
| </form>
| |
|
| |
| <style>
| |
| /* ========================================
| |
| フォーム全体
| |
| ======================================== */
| |
| #searchForm {
| |
| max-width: 800px;
| |
| font-size: 14px;
| |
| }
| |
|
| |
| .search-form-container {
| |
| background: #fff;
| |
| border-radius: 12px;
| |
| padding: 20px;
| |
| box-shadow: 0 2px 8px rgba(0,0,0,0.08);
| |
| margin-bottom: 16px;
| |
| }
| |
|
| |
| /* ========================================
| |
| ボタンエリア
| |
| ======================================== */
| |
| .form-actions {
| |
| display: flex;
| |
| justify-content: flex-end;
| |
| gap: 10px;
| |
| margin-bottom: 16px;
| |
| }
| |
|
| |
| .clear-btn {
| |
| padding: 10px 20px;
| |
| background: #e0e0e0;
| |
| color: #333;
| |
| border: none;
| |
| border-radius: 8px;
| |
| cursor: pointer;
| |
| font-size: 14px;
| |
| font-weight: 600;
| |
| transition: all 0.2s;
| |
| }
| |
|
| |
| .clear-btn:hover {
| |
| background: #d0d0d0;
| |
| }
| |
|
| |
| .clear-btn:active {
| |
| transform: scale(0.98);
| |
| }
| |
|
| |
| .search-btn {
| |
| padding: 10px 24px;
| |
| background: #f59e0b;
| |
| color: #fff;
| |
| border: none;
| |
| border-radius: 8px;
| |
| cursor: pointer;
| |
| font-size: 14px;
| |
| font-weight: 600;
| |
| transition: all 0.2s;
| |
| }
| |
|
| |
| .search-btn:hover {
| |
| background: #d97706;
| |
| }
| |
|
| |
| .search-btn:active {
| |
| transform: scale(0.98);
| |
| }
| |
|
| |
| /* ========================================
| |
| フォーム行
| |
| ======================================== */
| |
| .form-row {
| |
| margin-bottom: 12px;
| |
| }
| |
|
| |
| .toggle-row {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: space-between;
| |
| padding: 12px 16px;
| |
| background: #f9fafb;
| |
| border-radius: 8px;
| |
| }
| |
|
| |
| .toggle-label {
| |
| font-weight: 500;
| |
| color: #333;
| |
| }
| |
|
| |
| /* ========================================
| |
| 入力フィールド
| |
| ======================================== */
| |
| .form-input,
| |
| .form-select {
| |
| width: 100%;
| |
| padding: 12px 16px;
| |
| border: 1px solid #d1d5db;
| |
| border-radius: 8px;
| |
| font-size: 14px;
| |
| transition: all 0.2s;
| |
| background: #fff;
| |
| }
| |
|
| |
| .form-input:focus,
| |
| .form-select:focus {
| |
| outline: none;
| |
| border-color: #f59e0b;
| |
| box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
| |
| }
| |
|
| |
| .form-input::placeholder {
| |
| color: #9ca3af;
| |
| }
| |
|
| |
| /* ========================================
| |
| 予算セクション
| |
| ======================================== */
| |
| .budget-section {
| |
| background: #f9fafb;
| |
| padding: 16px;
| |
| border-radius: 8px;
| |
| margin-bottom: 12px;
| |
| }
| |
|
| |
| .budget-header {
| |
| display: flex;
| |
| justify-content: space-between;
| |
| align-items: center;
| |
| margin-bottom: 12px;
| |
| }
| |
|
| |
| .budget-title {
| |
| font-weight: 600;
| |
| color: #333;
| |
| }
| |
|
| |
| .budget-type {
| |
| display: flex;
| |
| gap: 16px;
| |
| }
| |
|
| |
| .budget-range {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 8px;
| |
| }
| |
|
| |
| .form-select-small {
| |
| flex: 1;
| |
| padding: 10px 12px;
| |
| border: 1px solid #d1d5db;
| |
| border-radius: 6px;
| |
| font-size: 13px;
| |
| background: #fff;
| |
| }
| |
|
| |
| .budget-separator {
| |
| color: #6b7280;
| |
| font-weight: 500;
| |
| }
| |
|
| |
| /* ========================================
| |
| トグルスイッチ
| |
| ======================================== */
| |
| .toggle {
| |
| position: relative;
| |
| width: 44px;
| |
| height: 24px;
| |
| display: inline-block;
| |
| }
| |
|
| |
| .toggle input {
| |
| display: none;
| |
| }
| |
|
| |
| .slider {
| |
| position: absolute;
| |
| cursor: pointer;
| |
| inset: 0;
| |
| background: #d1d5db;
| |
| border-radius: 24px;
| |
| transition: 0.3s;
| |
| }
| |
|
| |
| .slider::before {
| |
| content: "";
| |
| position: absolute;
| |
| height: 18px;
| |
| width: 18px;
| |
| left: 3px;
| |
| top: 3px;
| |
| background: white;
| |
| border-radius: 50%;
| |
| transition: 0.3s;
| |
| }
| |
|
| |
| .toggle input:checked + .slider {
| |
| background: #f59e0b;
| |
| }
| |
|
| |
| .toggle input:checked + .slider::before {
| |
| transform: translateX(20px);
| |
| }
| |
|
| |
| /* ========================================
| |
| ラジオボタン
| |
| ======================================== */
| |
| .radio-label {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| gap: 8px;
| |
| cursor: pointer;
| |
| user-select: none;
| |
| }
| |
|
| |
| .radio-label input[type="radio"] {
| |
| width: 18px;
| |
| height: 18px;
| |
| cursor: pointer;
| |
| }
| |
|
| |
| .radio-label span {
| |
| font-size: 14px;
| |
| color: #374151;
| |
| }
| |
|
| |
| .radio-grid {
| |
| display: flex;
| |
| gap: 16px;
| |
| flex-wrap: wrap;
| |
| }
| |
|
| |
| /* ========================================
| |
| チェックボックス
| |
| ======================================== */
| |
| .checkbox-label {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| gap: 8px;
| |
| cursor: pointer;
| |
| user-select: none;
| |
| }
| |
|
| |
| .checkbox-label input[type="checkbox"] {
| |
| width: 18px;
| |
| height: 18px;
| |
| cursor: pointer;
| |
| }
| |
|
| |
| .checkbox-label span {
| |
| font-size: 14px;
| |
| color: #374151;
| |
| }
| |
|
| |
| .checkbox-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
| |
| gap: 12px;
| |
| }
| |
|
| |
| /* ========================================
| |
| アコーディオン
| |
| ======================================== */
| |
| .accordion {
| |
| background: #fff;
| |
| border: 1px solid #e5e7eb;
| |
| border-radius: 12px;
| |
| padding: 0;
| |
| overflow: hidden;
| |
| box-shadow: 0 2px 8px rgba(0,0,0,0.08);
| |
| }
| |
|
| |
| .accordion summary {
| |
| padding: 16px 20px;
| |
| cursor: pointer;
| |
| font-weight: 600;
| |
| font-size: 15px;
| |
| color: #111827;
| |
| background: #f9fafb;
| |
| user-select: none;
| |
| list-style: none;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: space-between;
| |
| }
| |
|
| |
| .accordion summary::-webkit-details-marker {
| |
| display: none;
| |
| }
| |
|
| |
| .accordion summary::after {
| |
| content: "▼";
| |
| font-size: 12px;
| |
| color: #6b7280;
| |
| transition: transform 0.3s;
| |
| }
| |
|
| |
| .accordion[open] summary::after {
| |
| transform: rotate(180deg);
| |
| }
| |
|
| |
| .accordion-content {
| |
| padding: 20px;
| |
| }
| |
|
| |
| /* ========================================
| |
| フィルターグループ
| |
| ======================================== */
| |
| .filter-group {
| |
| border: none;
| |
| padding: 0;
| |
| margin-bottom: 20px;
| |
| }
| |
|
| |
| .filter-group:last-of-type {
| |
| margin-bottom: 0;
| |
| }
| |
|
| |
| .filter-group legend {
| |
| font-weight: 600;
| |
| font-size: 14px;
| |
| color: #111827;
| |
| margin-bottom: 12px;
| |
| }
| |
|
| |
| /* ========================================
| |
| ダークモード対応
| |
| ======================================== */
| |
| .skin-theme-clientpref-night .search-form-container,
| |
| .skin-theme-clientpref-night .accordion {
| |
| background: #1e1e1e;
| |
| border-color: #3a3a3a;
| |
| }
| |
|
| |
| .skin-theme-clientpref-night .form-input,
| |
| .skin-theme-clientpref-night .form-select,
| |
| .skin-theme-clientpref-night .form-select-small {
| |
| background: #2a2a2a;
| |
| border-color: #3a3a3a;
| |
| color: #e5e7eb;
| |
| }
| |
|
| |
| .skin-theme-clientpref-night .toggle-row,
| |
| .skin-theme-clientpref-night .budget-section,
| |
| .skin-theme-clientpref-night .accordion summary {
| |
| background: #2a2a2a;
| |
| }
| |
|
| |
| .skin-theme-clientpref-night .toggle-label,
| |
| .skin-theme-clientpref-night .budget-title,
| |
| .skin-theme-clientpref-night .filter-group legend,
| |
| .skin-theme-clientpref-night .accordion summary {
| |
| color: #e5e7eb;
| |
| }
| |
|
| |
| .skin-theme-clientpref-night .radio-label span,
| |
| .skin-theme-clientpref-night .checkbox-label span {
| |
| color: #d1d5db;
| |
| }
| |
|
| |
| .skin-theme-clientpref-night .clear-btn {
| |
| background: #3a3a3a;
| |
| color: #e5e7eb;
| |
| }
| |
|
| |
| .skin-theme-clientpref-night .clear-btn:hover {
| |
| background: #4a4a4a;
| |
| }
| |
|
| |
| /* 自動モード（ダーク時） */
| |
| @media (prefers-color-scheme: dark) {
| |
| .skin-theme-clientpref-os .search-form-container,
| |
| .skin-theme-clientpref-os .accordion {
| |
| background: #1e1e1e;
| |
| border-color: #3a3a3a;
| |
| }
| |
|
| |
| .skin-theme-clientpref-os .form-input,
| |
| .skin-theme-clientpref-os .form-select,
| |
| .skin-theme-clientpref-os .form-select-small {
| |
| background: #2a2a2a;
| |
| border-color: #3a3a3a;
| |
| color: #e5e7eb;
| |
| }
| |
|
| |
| .skin-theme-clientpref-os .toggle-row,
| |
| .skin-theme-clientpref-os .budget-section,
| |
| .skin-theme-clientpref-os .accordion summary {
| |
| background: #2a2a2a;
| |
| }
| |
|
| |
| .skin-theme-clientpref-os .toggle-label,
| |
| .skin-theme-clientpref-os .budget-title,
| |
| .skin-theme-clientpref-os .filter-group legend,
| |
| .skin-theme-clientpref-os .accordion summary {
| |
| color: #e5e7eb;
| |
| }
| |
|
| |
| .skin-theme-clientpref-os .radio-label span,
| |
| .skin-theme-clientpref-os .checkbox-label span {
| |
| color: #d1d5db;
| |
| }
| |
|
| |
| .skin-theme-clientpref-os .clear-btn {
| |
| background: #3a3a3a;
| |
| color: #e5e7eb;
| |
| }
| |
|
| |
| .skin-theme-clientpref-os .clear-btn:hover {
| |
| background: #4a4a4a;
| |
| }
| |
| }
| |
|
| |
| /* ========================================
| |
| レスポンシブ
| |
| ======================================== */
| |
| @media (max-width: 600px) {
| |
| .search-form-container {
| |
| padding: 16px;
| |
| }
| |
|
| |
| .budget-header {
| |
| flex-direction: column;
| |
| align-items: flex-start;
| |
| gap: 12px;
| |
| }
| |
|
| |
| .checkbox-grid {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| }
| |
| </style>
| |
| <script> | | <script> |
| document.getElementById('searchForm').addEventListener('submit', function (e) { | | document.getElementById('searchForm').addEventListener('submit', function (e) { |
