diff --git a/favorites.html b/favorites.html new file mode 100644 index 0000000..7df51a0 --- /dev/null +++ b/favorites.html @@ -0,0 +1,20 @@ + + + + + + + 行きたいお店リスト + + + + + + +

行きたいお店リスト

+ + マップに戻る + + + + diff --git a/favorites.js b/favorites.js new file mode 100644 index 0000000..bffaa23 --- /dev/null +++ b/favorites.js @@ -0,0 +1,45 @@ +document.addEventListener('DOMContentLoaded', () => { + const favoritesList = document.getElementById('favorites-list'); + + // localStorage からデータを取得 + let favorites = JSON.parse(localStorage.getItem('favorites') || '[]'); + + // リストを描画する関数 + function renderList(items) { + favoritesList.innerHTML = ''; // リストをリセット + if (items.length === 0) { + favoritesList.innerHTML = '
  • 気になるお店はまだ登録されていません。
    • '; + } + items.forEach((item, index) => { + const li = document.createElement('li'); + li.className = 'favorite-item'; + + // 店舗名と追加日時を表示 + li.innerHTML = ` + ${item.name} + ${new Date(item.addedAt).toLocaleString()} + + `; + + favoritesList.appendChild(li); + }); + + // 削除ボタンにイベントリスナーを追加 + document.querySelectorAll('.delete-btn').forEach(button => { + button.addEventListener('click', (event) => { + const index = event.target.dataset.index; + deleteFavorite(index); + }); + }); + } + + // 削除する関数 + function deleteFavorite(index) { + favorites.splice(index, 1); // 該当のデータを削除 + localStorage.setItem('favorites', JSON.stringify(favorites)); // 更新されたデータを localStorage に保存 + renderList(favorites); // 再描画 + } + + // 初期表示（追加日時順） + renderList(favorites); +}); diff --git a/map.js b/map.js new file mode 100644 index 0000000..c87f56c --- /dev/null +++ b/map.js @@ -0,0 +1,70 @@ +document.addEventListener('DOMContentLoaded', () => { + const map = L.map('map').setView([38.9175, 139.8353], 16); + + L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + attribution: '© OpenStreetMap contributors' + }).addTo(map); + +// カスタムアイコンを定義 + const customIcon = L.icon({ + iconUrl: 'images/marker-icon.png', // カスタムマーカー画像のパス + iconSize: [32, 32], // マーカーのサイズ + iconAnchor: [16, 32], // アイコンの「足」の位置 + popupAnchor: [0, -32] // ポップアップの表示位置 + }); + +// 店舗データ +const snacks = [ + { name: "スナック緑", + lat: 38.91784466465069, + lng: 139.83580858552295, + description: "定休日:月曜日 営業時間 19:00〜0:00", + icon: 'images/snack-icon.png' // 個別アイコンのパス + }, + + { name: "スナックLink", + lat: 38.918328820566366, + lng: 139.83473570196918, + description: "定休日:なし 営業時間 20:00〜1:00", + icon: 'images/snack-icon.png' // 個別アイコンのパス + }, + + { name: "スナックCherir", + lat: 38.91731041980675, + lng: 139.8348859056667, + description: "定休日:日曜日 営業時間 20:00〜0:00", + icon: 'images/snack-icon.png' // 個別アイコンのパス + } +]; + +let markers = []; + + // マーカーを追加し、ポップアップを設定 + snacks.forEach(snack => { + const markerIcon = L.icon({ + iconUrl: snack.icon || 'images/marker-icon.png', // 個別アイコンまたはデフォルトアイコン + iconSize: [32, 32], + iconAnchor: [16, 32], + popupAnchor: [0, -32] + }); + + const marker = L.marker([snack.lat, snack.lng], { icon: markerIcon }).addTo(map); + const popupContent = ` +
    +

    ${snack.name}

    +

    ${snack.description}

    + +
    + `; + marker.bindPopup(popupContent); + markers.push({ marker, name: snack.name }); + }); + +// リスト追加機能 +function addToFavorites(name) { + const favorites = JSON.parse(localStorage.getItem('favorites') || '[]'); + favorites.push({ name, addedAt: new Date().toISOString() }); + localStorage.setItem('favorites', JSON.stringify(favorites)); + alert(`${name}を気になるお店リストに追加しました！`); + }; +}); diff --git a/snackmap.html b/snackmap.html new file mode 100644 index 0000000..716a2d9 --- /dev/null +++ b/snackmap.html @@ -0,0 +1,24 @@ + + + + + + + スナッキングパラダイス + + + + + + + +

    スナパラ

    +
    + 行きたいお店リストはこちら + +
    +
    + + + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..7daec63 --- /dev/null +++ b/styles.css @@ -0,0 +1,192 @@ +/* 全体のスタイル */ +body { + font-family: 'Arial', sans-serif; + margin: 0; + padding: 0; + box-sizing: border-box; + background-color: #f3e8ff; /* 淡い紫 */ + color: #3e004f; /* 濃い紫 */ +} + +h1 { + font-family: 'Playfair Display', serif; + font-size: 32px; + text-align: center; + margin: 0; + padding: 20px; + background-color: #6a0dad; /* 紫の背景 */ + color: white; + font-weight: 700; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + letter-spacing: 1px; + border-bottom: 4px solid #4b0082; /* 深い紫のアクセント */ +} + +/* ポップアップのカスタムスタイル */ +.popup-content { + width: 300px; /* 幅を広く設定 */ + height: auto; + padding: 15px; + font-size: 20px; /* フォントサイズを大きく */ + line-height: 1.5; +} + +.popup-content h3 { + font-size: 30px; + margin-bottom: 10px; + color: #6a0dad; +} + +.popup-content p { + margin: 15px 0; + color: #333; +} + +.popup-content button { + padding: 15px 25px; + font-size: 18px; + background-color: #6a0dad; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +.popup-content button:hover { + background-color: #4b0082; +} + +/* ポップアップの全体サイズを大きく */ +.leaflet-popup-content-wrapper { + width: 320px !important; /* ポップアップの幅 */ + height: auto !important; /* 高さは内容に合わせて自動 */ +} + +.leaflet-popup-tip { + display: none; /* ポップアップの三角形を非表示にする */ +} + +/* 検索欄 */ +.search-container { + display: flex; + justify-content: center; + margin: 20px 0; +} + +.search-container input[type="text"] { + width: 80%; + max-width: 600px; + padding: 15px; + font-size: 18px; + border: 2px solid #9b59b6; /* 紫色の枠線 */ + border-radius: 25px; + background-color: white; + color: #3e004f; /* 濃い紫 */ + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + transition: border-color 0.3s ease, box-shadow 0.3s ease; +} + +.search-container input[type="text"]:focus { + border-color: #6a0dad; /* フォーカス時の枠線 */ + box-shadow: 0 4px 8px rgba(106, 13, 173, 0.4); /* フォーカス時の影 */ + outline: none; +} + +/* マップエリア */ +#map { + height: 500px; + margin: 20px; + border-radius: 10px; + border: 2px solid #9b59b6; /* 紫色の枠線 */ + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); +} + +/* お気に入りリンク */ +.favorites-link, .back-link { + display: block; + text-align: center; + margin: 20px auto; + font-size: 25px; + color: #6a0dad; + text-decoration: none; + font-weight: bold; +} + +.favorites-link:hover, .back-link:hover { + text-decoration: underline; + color: #4b0082; /* ホバー時の濃い紫 */ +} + + +/* お気に入りリスト */ +#favorites-list { + margin: 20px auto; + font-size: 20px; + padding: 0; + list-style: none; + max-width: 600px; +} + +#favorites-list li { + background-color: #ffffff; /* 白背景 */ + color: #3e004f; /* 濃い紫 */ + border: 1px solid #9b59b6; /* 紫色の枠線 */ + border-radius: 10px; + padding: 10px 15px; + margin: 10px 0; + display: flex; + justify-content: space-between; + align-items: center; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +#favorites-list li button { + padding: 10px 10px; + font-size: 30px; + background-color: #6a0dad; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +#favorites-list li button:hover { + background-color: #4b0082; +} + +/* Leafletズームコントロールのカスタマイズ */ +.leaflet-control-zoom { + transform: scale(1.5); /* サイズを縮小 (デフォルトの80%) */ + right: 10px; /* 位置を少し右に調整 (必要に応じて変更) */ + bottom: -300px; /* 位置を少し上に調整 (必要に応じて変更) */ +} + +.leaflet-control-zoom a { + width: 30px; /* ボタンの幅を調整 */ + height: 30px; /* ボタンの高さを調整 */ + font-size: 18px; /* ボタン内の文字サイズを調整 */ + line-height: 30px; /* ボタン内のテキストの位置を中央に揃える */ + border-radius: 5px; /* ボタンに角丸を付ける */ + background-color: #0078d7; /* ボタンの背景色を変更 */ + color: white; /* テキストの色 */ + transition: background-color 0.3s ease; +} + +.leaflet-control-zoom a:hover { + background-color: #005a9e; /* ホバー時の背景色 */ +} + +/* レスポンシブ対応 */ +@media (max-width: 768px) { + #map { + height: 600px; + } + + .search-container input[type="text"] { + font-size: 16px; + padding: 12px; + } + + +}