<!DOCTYPE html>

<html lang="zh-TW">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

    <link rel="apple-touch-icon" href="icon.png">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="default">

    <meta name="apple-mobile-web-app-title" content="SHUN & PEI">

    <title>SHUN & PEI in SEOUL 2025</title>

    

    <script src="https://cdn.tailwindcss.com"></script>

    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&family=Nunito:wght@600;800&display=swap" rel="stylesheet">

    

    <style>

        body { font-family: 'Noto Sans TC', sans-serif; background-color: #f1f5f9; margin: 0; padding: 0; }

        .glass-card { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.7); }

    </style>

</head>

<body>

    <div id="root">

        <div class="flex flex-col items-center justify-center min-h-screen p-6 text-center">

            <div class="glass-card p-8 rounded-3xl shadow-xl max-w-sm w-full">

                <h1 class="text-2xl font-bold text-slate-800 mb-2">🇰🇷 SHUN & PEI</h1>

                <p class="text-slate-500 mb-6">Seoul 2025 雲端連線測試</p>

                

                <div id="status-box" class="bg-blue-50 text-blue-700 py-3 px-4 rounded-xl mb-4 text-sm font-medium">

                    正在確認雲端狀態...

                </div>


                <button onclick="sendTest()" class="w-full bg-slate-800 text-white py-4 rounded-2xl font-bold active:scale-95 transition-transform">

                    發送同步測試

                </button>

                <p class="mt-4 text-xs text-slate-400">若按鈕有反應，代表 Firebase 已接通</p>

            </div>

        </div>

    </div>


    <script type="module">

        import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js";

        import { getFirestore, doc, setDoc, onSnapshot } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js";


        const firebaseConfig = {

            apiKey: "AIzaSyCzDpsg15Kve-AiWBCzpDoOhj-A-g2g1ug",

            authDomain: "seoul-272a6.firebaseapp.com",

            projectId: "seoul-272a6",

            storageBucket: "seoul-272a6.firebasestorage.app",

            messagingSenderId: "700621759318",

            appId: "1:700621759318:web:69738bef996d33587eacf7",

            measurementId: "G-Y3BYR8CX3B"

        };


        const app = initializeApp(firebaseConfig);

        const db = getFirestore(app);

        const docRef = doc(db, "travel", "plan");


        // 監聽雲端更新

        onSnapshot(docRef, (doc) => {

            const statusBox = document.getElementById('status-box');

            if (doc.exists()) {

                statusBox.innerText = "最後更新：" + new Date(doc.data().time).toLocaleTimeString();

                statusBox.className = "bg-green-50 text-green-700 py-3 px-4 rounded-xl mb-4 text-sm font-medium";

            }

        });


        // 點擊按鈕發送資料

        window.sendTest = async () => {

            try {

                await setDoc(docRef, { 

                    time: Date.now(),

                    user: "Shun/Pei" 

                }, { merge: true });

                alert("同步成功！Pei 的手機也會看到喔！");

            } catch (e) {

                alert("錯誤：" + e.message);

            }

        };

    </script>

</body>

</html>