<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>「道の駅」GPSスタンプラリー</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #fef6e4;
            text-align: center;
            color: #333;
        }
        h1 {
            font-size: 28px;
            margin: 20px 0;
            color: #ff6f61;
        }
        #station-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        .station-card {
            background: #ffffff;
            border: 2px solid #ff6f61;
            border-radius: 10px;
            padding: 15px;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .station-card:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
        }
        .station-card.stamped {
            background: #c8e6c9;
            border-color: #2e7d32;
            color: #2e7d32;
        }
        .station-card a {
            text-decoration: none;
            color: #007BFF;
        }
        #stamped-list {
            margin: 20px auto;
            max-width: 800px;
            list-style: none;
            padding: 0;
        }
        #stamped-list li {
            background: #fff;
            border: 1px solid #ddd;
            padding: 10px;
            margin: 5px 0;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1>かごしま「道の駅」GPSスタンプラリー</h1>
    <p>道の駅を訪問してスタンプを集めよう！近くに行くと自動でスタンプが押されます。</p>
    <div id="station-list"></div>
    <div id="stamps">
        <h2>スタンプが押された道の駅</h2>
        <ul id="stamped-list"></ul>
    </div>
    <script>
       
          
   const stationData = [
    { name: "道の駅 喜入", lat: 31.3904, lng: 130.5641, address: "鹿児島市喜入町6094-1" },
    { name: "道の駅 霧島", lat: 31.7101, lng: 130.7632, address: "霧島市霧島田口2583-22" },
    { name: "道の駅 樋脇", lat: 31.9233, lng: 130.4187, address: "薩摩川内市樋脇町市比野156" },
    { name: "道の駅 松山", lat: 31.4679, lng: 131.0082, address: "志布志市松山町新橋1526-1" },
    { name: "道の駅 阿久根", lat: 32.3172, lng: 130.1997, address: "阿久根市大川4816-6" },
    { name: "道の駅 長島", lat: 32.2036, lng: 130.0898, address: "出水郡長島町指江1576-1" },
    { name: "道の駅 くにの松原おおさき", lat: 31.4984, lng: 131.0589, address: "曽於郡大崎町神領2419" },
    { name: "道の駅 根占", lat: 31.1947, lng: 130.8576, address: "肝属郡南大隅町根占山本6868" },
    { name: "道の駅 川辺やすらぎの郷", lat: 31.3702, lng: 130.4411, address: "南九州市川辺町清水6910" },
    { name: "道の駅 奄美大島住用", lat: 28.2964, lng: 129.4311, address: "奄美市住用町石原478" },
    { name: "道の駅 桜島", lat: 31.5932, lng: 130.6349, address: "鹿児島市桜島横山町1722-48" },
    { name: "道の駅 きんぽう木花館", lat: 31.3846, lng: 130.3273, address: "南さつま市金峰町池辺1383" },
    { name: "道の駅 おおすみ弥五郎伝説の里", lat: 31.5718, lng: 130.9562, address: "曽於市大隅町岩川6134-1" },
    { name: "道の駅 たからべ", lat: 31.5618, lng: 130.9308, address: "曽於市財部町南俣17-1" },
    { name: "道の駅 いぶすき彩花菜館", lat: 31.2454, lng: 130.6277, address: "指宿市小牧52-4" },
    { name: "道の駅 たるみず湯っ足り館", lat: 31.4917, lng: 130.6755, address: "垂水市牛根麓1038-1" },
    { name: "道の駅 すえよし", lat: 31.6974, lng: 130.9486, address: "曽於市末吉町深川11051-1" },
    { name: "道の駅 黒之瀬戸だんだん市場", lat: 32.2076, lng: 130.0793, address: "出水郡長島町山門野4093" },
    { name: "道の駅 山川港活お海道", lat: 31.2035, lng: 130.6359, address: "指宿市山川金生町1-10" },
    { name: "道の駅 錦江にしきの里", lat: 31.2475, lng: 130.8753, address: "肝属郡錦江町神川3306-18" },
    { name: "道の駅 野方あらさの", lat: 31.5551, lng: 130.9602, address: "曽於郡大崎町野方2810" },
    { name: "道の駅 たるみずはまびら", lat: 31.4917, lng: 130.6837, address: "垂水市浜平字浜平2614-1" }
    


        ];

        document.addEventListener("DOMContentLoaded", () => {
            const stationListElement = document.getElementById("station-list");
            const stampedListElement = document.getElementById("stamped-list");

            // 道の駅リストを生成
            stationData.forEach((station) => {
                const card = document.createElement("div");
                card.classList.add("station-card");
                card.dataset.lat = station.lat;
                card.dataset.lng = station.lng;

                const title = document.createElement("h3");
                title.textContent = station.name;

                const addressLink = document.createElement("a");
                addressLink.href = `https://www.google.com/maps/dir/?api=1&destination=${station.lat},${station.lng}`;
                addressLink.target = "_blank";
                addressLink.textContent = station.address;

                card.appendChild(title);
                card.appendChild(addressLink);
                stationListElement.appendChild(card);
            });

            // テスト用の位置データ
            const testUserLat = 31.7100;
            const testUserLng = 130.7630;

            // GPS情報のシミュレーション
            simulateGPS(testUserLat, testUserLng);

            function simulateGPS(userLat, userLng) {
                document.querySelectorAll(".station-card").forEach((station) => {
                    const stationLat = parseFloat(station.dataset.lat);
                    const stationLng = parseFloat(station.dataset.lng);

                    const distance = calculateDistance(userLat, userLng, stationLat, stationLng);
                    if (distance < 0.5 && !station.classList.contains("stamped")) {
                        // スタンプ処理
                        station.classList.add("stamped");
                        const stampedItem = document.createElement("li");
                        stampedItem.textContent = `${station.querySelector("h3").textContent} (スタンプ獲得！)`;
                        stampedListElement.appendChild(stampedItem);

                        alert(`${station.querySelector("h3").textContent}のスタンプを獲得しました！`);
                    }
                });
            }

            // 距離計算関数
            function calculateDistance(lat1, lng1, lat2, lng2) {
                const R = 6371; // 地球の半径 (km)
                const dLat = ((lat2 - lat1) * Math.PI) / 180;
                const dLng = ((lng2 - lng1) * Math.PI) / 180;
                const a =
                    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                    Math.cos((lat1 * Math.PI) / 180) *
                        Math.cos((lat2 * Math.PI) / 180) *
                        Math.sin(dLng / 2) *
                        Math.sin(dLng / 2);
                const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
                return R * c; // 距離 (km)
            }
        });
    </script>
</body>
</html>

<script>
document.addEventListener("contextmenu", function (e) {
    e.preventDefault();
});
document.onkeydown = function (e) {
    if (e.key === "F12" || (e.ctrlKey && e.shiftKey && e.key === "I")) {
        alert("開発者ツールは禁止されています。");
        return false;
    }
};
</script>
