|
|
| 1行目: |
1行目: |
| == 検索条件 == | | == 検索条件 == |
| <!-- 検索ボックス --> | | <!-- 検索ボックス --> |
| | <html> |
| <form method="get" action="" id="searchForm"> | | <form method="get" action="" id="searchForm"> |
| <!-- 予約可 -->
| | <input type="text" name="検索" placeholder="店名・住所・ジャンルなど" style="width:300px;" id="searchText" /> |
| <div class="form-row">
| | <select name="ジャンル" style="margin-left:8px;" id="genre"> |
| <label class="toggle">
| | <option value="">すべてのジャンル</option> |
| <input type="checkbox" name="reservable" value="1">
| | <option value="居酒屋">居酒屋</option> |
| <span class="slider"></span>
| | <option value="ダイニングバー・バル">ダイニングバー・バル</option> |
| </label>
| | <option value="創作料理">創作料理</option> |
| <span>予約できる店だけ</span>
| | <option value="和食">和食</option> |
| <input type="submit" value="検索" class="search-btn" />
| | <option value="洋食">洋食</option> |
| </div>
| | <option value="イタリアン・フレンチ">イタリアン・フレンチ</option> |
| <!-- 店名 -->
| | <option value="中華">中華</option> |
| <input class="form-row" type="text" name="検索" placeholder="店名" style="width:300px;" id="searchText" />
| | <option value="焼肉・ホルモン">焼肉・ホルモン</option> |
| <!-- ジャンル -->
| | <option value="韓国料理">韓国料理</option> |
| <div class="form-row">
| | <option value="アジア・エスニック料理">アジア・エスニック料理</option> |
| <label>ジャンル</label>
| | <option value="各国料理">各国料理</option> |
| <select name="ジャンル" style="margin-left:8px;" id="genre">
| | <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> |
| <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">
| |
| <label>最寄り</label>
| |
| <select name="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>
| |
| <!-- 値は Cargo の station などに合わせる -->
| |
| </select>
| |
| </div>
| |
| <!-- 予算 -->
| |
| <div class="budget-box">
| |
| <label>予算</label>
| |
| <div class="tab-head">
| |
| <input type="radio" name="lanch-dinner"><label>昼</label>
| |
| <input type="radio" name="lanch-dinner"><label>夜</label>
| |
| </div>
| |
| <!-- 昼予算 -->
| |
| <div class="tab-body active" id="tab-lunch">
| |
| <label>下限</label>
| |
| <select name="lunch_min">
| |
| <option value="">指定なし</option>
| |
| <option value="1000">1,000円</option>
| |
| <option value="2000">2,000円</option>
| |
| <option value="3000">3,000円</option>
| |
| </select>
| |
|
| |
|
| <span>〜</span>
| | <input type="submit" value="検索" /> |
| | |
| <label>上限</label>
| |
| <select name="lunch_max">
| |
| <option value="">指定なし</option>
| |
| <option value="2000">2,000円</option>
| |
| <option value="3000">3,000円</option>
| |
| <option value="5000">5,000円</option>
| |
| </select>
| |
| </div>
| |
| </div>
| |
| | |
| <!-- こだわり(アコーディオン) -->
| |
| <details class="accordion">
| |
| <summary>こだわり条件</summary>
| |
| | |
| <!-- 支払い -->
| |
| <fieldset>
| |
| <legend>支払い方法</legend>
| |
| <label><input type="checkbox" name="payment[]" value="cash"> 現金</label>
| |
| <label><input type="checkbox" name="payment[]" value="credit"> カード</label>
| |
| <label><input type="checkbox" name="payment[]" value="emoney"> 電子マネー</label>
| |
| <label><input type="checkbox" name="payment[]" value="qr"> QR</label>
| |
| </fieldset>
| |
| | |
| <!-- 禁煙 / 喫煙 -->
| |
| <fieldset>
| |
| <legend>禁煙 / 喫煙</legend>
| |
| <label><input type="radio" name="smoking" value=""> 指定なし</label>
| |
| <label><input type="radio" name="smoking" value="non"> 禁煙のみ</label>
| |
| <label><input type="radio" name="smoking" value="allow"> 喫煙可</label>
| |
| </fieldset>
| |
| | |
| <!-- メニュー -->
| |
| <fieldset>
| |
| <legend>メニュー</legend>
| |
| <label><input type="checkbox" name="menu[]" value="tabehodai"> 食べ放題</label>
| |
| <label><input type="checkbox" name="menu[]" value="nomihodai"> 飲み放題</label>
| |
| <label><input type="checkbox" name="menu[]" value="takeout"> テイクアウト</label>
| |
| </fieldset>
| |
| | |
| <!-- 設備 -->
| |
| <fieldset>
| |
| <legend>設備・サービス</legend>
| |
| <label><input type="checkbox" name="equipment[]" value="parking"> 駐車場</label>
| |
| <label><input type="checkbox" name="equipment[]" value="private"> 個室</label>
| |
| <label><input type="checkbox" name="equipment[]" value="wifi"> Wi-Fi</label>
| |
| <label><input type="checkbox" name="equipment[]" value="barrierfree"> バリアフリー</label>
| |
| <label><input type="checkbox" name="equipment[]" value="kids"> お子様連れOK</label>
| |
| <label><input type="checkbox" name="equipment[]" value="reserve"> 貸切</label>
| |
| </fieldset>
| |
| </details>
| |
| </form> | | </form> |
|
| |
| <style> | | <style> |
| .search-form {
| |
| max-width: 700px;
| |
| margin: 1em auto;
| |
| font-size: 14px;
| |
| }
| |
|
| |
| .form-row {
| |
| display: flex;
| |
| align-items: center;
| |
| margin: 0.5em 0;
| |
| gap: 1em;
| |
| }
| |
|
| |
| /* トグルスイッチ */
| |
| .toggle {
| |
| position: relative;
| |
| width: 40px;
| |
| height: 22px;
| |
| display: inline-block;
| |
| }
| |
|
| |
| .toggle input {
| |
| display: none;
| |
| }
| |
|
| |
| .slider {
| |
| position: absolute;
| |
| cursor: pointer;
| |
| inset: 0;
| |
| background: #ccc;
| |
| border-radius: 22px;
| |
| }
| |
|
| |
| .slider::before {
| |
| content: "";
| |
| position: absolute;
| |
| height: 18px;
| |
| width: 18px;
| |
| left: 2px;
| |
| top: 2px;
| |
| background: white;
| |
| border-radius: 50%;
| |
| transition: .3s;
| |
| }
| |
|
| |
| .toggle input:checked+.slider {
| |
| background: #4caf50;
| |
| }
| |
|
| |
| .toggle input:checked+.slider::before {
| |
| transform: translateX(18px);
| |
| }
| |
|
| |
| /* アコーディオン */
| |
| details {
| |
| margin-top: 1em;
| |
| border: 1px solid #ccc;
| |
| padding: 1em;
| |
| border-radius: 6px;
| |
| }
| |
|
| |
| details summary {
| |
| cursor: pointer;
| |
| font-weight: bold;
| |
| }
| |
|
| |
| fieldset {
| |
| border: none;
| |
| margin: 1em 0;
| |
| }
| |
|
| |
| legend {
| |
| font-weight: bold;
| |
| }
| |
| .search-card { | | .search-card { |
| border: 1px solid #ddd; | | border: 1px solid #ddd; |