diff --git a/README.md b/README.md index 869b773..7898192 100644 --- a/README.md +++ b/README.md @@ -1,2 +1 @@ -sasoh -=============== +a diff --git a/favorites.html b/favorites.html new file mode 100644 index 0000000..74231f7 --- /dev/null +++ b/favorites.html @@ -0,0 +1,23 @@ + + + + + + + 行きたいお店リスト + + + + + + +
+ + マップに戻る + +
+ + + + + diff --git a/favorites.js b/favorites.js new file mode 100644 index 0000000..5f8db09 --- /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/fes.csv b/fes.csv new file mode 100644 index 0000000..cb8853c --- /dev/null +++ b/fes.csv @@ -0,0 +1,2 @@ +name,latitude,longitude,description1,description2,description3,img1,img2,icon +お化け屋敷,38.855288,139.9097143,最大参加人数 8人,開催時間 8:00~15:00,対象年齢 12歳以上,,,images/ghost.png diff --git a/shonaifes.html b/shonaifes.html new file mode 100644 index 0000000..0f8a0d8 --- /dev/null +++ b/shonaifes.html @@ -0,0 +1,35 @@ + + + + + + + @@@ここにタイトルを入力します。@@@ + + + + + + + +

    + + スナパラ + +

    +
    + + スナパラ + +
    +

    マップの上側に表示する文字（例：👇=現在地）

    + +
    + + + + + diff --git a/shonaifes.js b/shonaifes.js new file mode 100644 index 0000000..bbe9a9c --- /dev/null +++ b/shonaifes.js @@ -0,0 +1,139 @@ +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); + + // 現在地表示 + if (navigator.geolocation) { + navigator.geolocation.getCurrentPosition(position => { + const lat = position.coords.latitude; + const lng = position.coords.longitude; + L.marker([lat, lng], { + icon: L.icon({ + iconUrl: 'images/favicon-32x32-now.png', + iconSize: [24, 24], + iconAnchor: [12, 12] + }) + }).addTo(map).bindPopup('現在地'); + }); + } + +// カスタムアイコンを定義 + const customIcon = L.icon({ + iconUrl: 'images/.png', // カスタムマーカー画像のパス + iconSize: [32, 32], // マーカーのサイズ + iconAnchor: [16, 32], // アイコンの「足」の位置 + popupAnchor: [0, -32] // ポップアップの表示位置 + }); + + fetch('fes.csv') + .then(response => response.text()) + .then(text => { + const rows = text.split('\n').filter(row => row.trim()); + const headers = rows[0].split(',').map(h => h.trim()); + + for (let i = 1; i < rows.length; i++) { + const values = rows[i].split(',').map(v => v.replace(/^"|"$/g, '').trim()); + const data = {}; + headers.forEach((key, index) => data[key] = values[index] || ''); + + const lat = parseFloat(data.latitude); + const lng = parseFloat(data.longitude); + if (isNaN(lat) || isNaN(lng)) continue; + + const isOpen = !isClosedToday(data.description1) && isOpenNow(data.description2); + const iconPath = isOpen ? (data.icon || 'images/.png') : 'images/.png'; + + const customIcon = L.icon({ + iconUrl: iconPath, + iconSize: [32, 32], + iconAnchor: [16, 32], + popupAnchor: [0, -32] + }); + + const description = [data.description1, data.description2, data.description3, data.mama] + .filter(Boolean) + .map(d => d.trim()) + .join('
    '); + + const image1 = data.img1 && data.img1.trim() !== '' ? data.img1 : 'images/.png'; + const image2 = data.img2 && data.img2.trim() !== '' ? data.img2 : 'images/.png'; + + const popupContent = ` +
    +

    ${data.name.replace(/"$/, '')}

    +

    ${description}

    + + + +
    `; + + const marker = L.marker([lat, lng], { icon: customIcon }).addTo(map).bindPopup(popupContent); + marker.isOpen = isOpen; + markers.push(marker); + } + }) + .catch(error => { + console.error('CSV読み込みエラー:', error); + }); + +let markers = []; + + // マーカーを追加し、ポップアップを設定 + snacks.forEach(snack => { + const markerIcon = L.icon({ + iconUrl: snack.icon || 'images/.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.description1 || ''}

    +

    ${snack.description2 || ''}

    +

    ${snack.description3 || ''}

    +

    ${snack.mama || ''}

    + + + +
    +`; + + marker.bindPopup(popupContent); + markers.push({ marker, name: snack.name }); + }); + +// リスト追加機能 +window.addToFavorites = function(name){ + const favorites = JSON.parse(localStorage.getItem('favorites') || '[]'); + favorites.push({ name, addedAt: new Date().toISOString() }); + localStorage.setItem('favorites', JSON.stringify(favorites)); + alert(`${name}を行きたいお店リストに追加しました！`); + }; + +// モーダルの開閉操作 +window.openModal = function (imageSrc) { + const modal = document.getElementById('image-modal'); + const modalImage = document.getElementById('modal-image'); + modalImage.src = imageSrc; // クリックした画像のソースを設定 + modal.style.display = 'block'; // モーダルを表示 + }; + +window.closeModal = function () { + const modal = document.getElementById('image-modal'); + modal.style.display = 'none'; // モーダルを非表示 + }; + + // モーダル外をクリックして閉じる +window.onclick = function (event) { + const modal = document.getElementById('image-modal'); + if (event.target === modal) { + modal.style.display = 'none'; + } +　}; +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..d26e992 --- /dev/null +++ b/styles.css @@ -0,0 +1,241 @@ +/* 全体のスタイル */ +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; /* 深い紫のアクセント */ +} + +a{ + color: #ff5757; +} + +.modal { + display: none; + position: fixed; + z-index: 1000; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.8); +} + +.modal-content { + margin: auto; + display: block; + max-width: 90%; + max-height: 90%; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + animation: fadeIn 0.3s; +} + +.close { + position: absolute; + top: 10px; + right: 25px; + color: white; + font-size: 35px; + font-weight: bold; + cursor: pointer; +} + +.close:hover, +.close:focus { + color: #ccc; + text-decoration: none; +} + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +/* ポップアップのカスタムスタイル */ +.popup-content { + width: 250px; /* 幅を広く設定 */ + height: auto; + padding: 15px; + font-size: 18px; /* フォントサイズを大きく */ + 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: 20px; + background-color: #6a0dad; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +.popup-content button:hover { + background-color: #4b0082; +} + +/* ポップアップの全体サイズを大きく */ +.leaflet-popup-content-wrapper { + width: auto !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; + } +}