「飲食店検索」の版間の差分
提供: 川西図鑑
その他の操作
タグ: 取り消し |
編集の要約なし |
||
| 3行目: | 3行目: | ||
<html> | <html> | ||
<form method="get" action="" id="searchForm"> | <form method="get" action="" id="searchForm"> | ||
<!-- 予約可 --> | |||
<div class="form-row"> | |||
<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> | |||
<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> | |||
<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; | ||
2025年12月5日 (金) 18:10時点における版
検索条件
検索結果
エラー: テーブル飲食店情報が見つかりません。