ThaiSim2026/results.html at master · bejranonda/ThaiSim2026 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="th">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ผลโหวต Sim-Thailand 2569</title>

    <!-- External Libraries -->
    <link
        href="https://fonts.googleapis.com/css2?family=Anuphan:wght@300;400;500;600;700&family=Press+Start+2P&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>

<body class="bg-slate-950 min-h-screen flex flex-col font-sans text-slate-200">

    <!-- HEADER -->
    <header class="fixed top-0 w-full z-40 bg-slate-900/95 backdrop-blur border-b border-slate-800 shadow-lg">
        <div class="max-w-7xl mx-auto px-4 py-5 flex justify-between items-center gap-4">
            <div class="flex items-center gap-3 cursor-pointer shrink-0" onclick="window.location.href='/'">
                <div
                    class="w-12 h-12 bg-gradient-to-br from-blue-600 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg">
                    <i class="fa-solid fa-city text-white text-lg"></i>
                </div>
                <div class="hidden sm:block">
                    <h1 class="font-bold text-base sm:text-lg text-white leading-tight">Sim-Thailand 2569</h1>
                    <p class="text-xs text-slate-400">Live Results</p>
                </div>
            </div>

            <div class="flex items-center gap-3">
                <a href="/"
                    class="group relative overflow-hidden inline-flex items-center gap-3 px-6 py-3 md:px-8 md:py-4 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-bold rounded-2xl shadow-lg shadow-blue-900/30 transition-all hover:scale-105 active:scale-95 ring-2 ring-blue-500/20 hover:ring-blue-400/50">
                    <span
                        class="absolute inset-0 rounded-2xl bg-white/20 animate-ping opacity-0 group-hover:opacity-20"></span>
                    <i class="fa-solid fa-play text-lg md:text-xl animate-pulse"></i>
                    <span class="text-sm md:text-lg">เล่นเกมเพื่อดูพรรคไหนเหมาะกับคุณ</span>
                </a>
            </div>
        </div>
    </header>

    <!-- MAIN CONTENT -->
    <main class="flex-grow flex flex-col items-center justify-start w-full max-w-4xl mx-auto px-4 pt-32 md:pt-40 pb-12">

        <div class="text-center mb-10">
            <h1 class="text-3xl md:text-5xl font-extrabold text-white mb-4 leading-tight">
                ผลโหวต <span
                    class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-emerald-400">มหาชน</span>
            </h1>
            <p class="text-slate-400 text-base md:text-lg max-w-2xl mx-auto">
                คะแนนเสียงจริงจากผู้เล่น Sim-Thailand 2569
            </p>
            <p class="text-slate-500 mt-4 text-sm italic">
                เนื่องจากมีผู้เล่นจำนวนมาก การโหลดผลแบบเรียลไทม์อาจใช้เวลาประมาณ 15–20 วินาที
            </p>
        </div>


        <div id="poll-results-container"
            class="w-full bg-slate-900/80 border border-slate-800 rounded-2xl p-6 md:p-8 shadow-2xl backdrop-blur-sm mb-8">
            <div class="text-center py-10">
                <i class="fa-solid fa-spinner fa-spin text-4xl text-blue-500 mb-4"></i>
                <p class="text-slate-500">กำลังโหลดคะแนนพรรคที่คุณโหวต...</p>
            </div>
        </div>

        <!-- Daily Trend Chart -->
        <div id="chart-container"
            class="w-full bg-slate-900/80 border border-slate-800 rounded-2xl p-6 md:p-8 shadow-2xl backdrop-blur-sm mb-8 hidden">
            <h3 class="text-xl font-bold text-white mb-6 flex items-center gap-2">
                <i class="fa-solid fa-chart-line text-amber-500"></i> สถิติการโหวตรายวัน (Daily Trends)
            </h3>
            <div class="w-full h-[300px] md:h-[400px]">
                <canvas id="voteTrendChart"></canvas>
            </div>
            <p class="text-xs text-slate-500 mt-4 text-center">
                *ข้อมูลนี้แสดงจำนวนการโหวตที่เกิดขึ้นในแต่ละวัน เพื่อความโปร่งใสและตรวจสอบความผิดปกติ
            </p>
        </div>

        <div id="sim-results-container"
            class="w-full bg-slate-900/80 border border-slate-800 rounded-2xl p-6 md:p-8 shadow-2xl backdrop-blur-sm">
            <div class="text-center py-10">
                <i class="fa-solid fa-spinner fa-spin text-4xl text-blue-500 mb-4"></i>
                <p class="text-slate-500">กำลังประมวลผลข้อมูลการจำลอง...</p>
            </div>
        </div>

        <div class="mt-12 flex flex-col sm:flex-row justify-center gap-4">
            <a href="https://thalay.eu/policy2569" target="_blank"
                class="inline-flex flex-col sm:flex-row items-center gap-3 px-6 py-4 bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white font-bold rounded-2xl shadow-xl transition-all hover:scale-105 active:scale-95 w-full sm:w-auto">
                <i class="fa-solid fa-book-open text-xl"></i>
                <span class="text-lg md:text-xl text-center">ดูนโยบายทุกพรรค</span>
            </a>
            <a href="/"
                class="inline-flex flex-col sm:flex-row items-center gap-4 px-8 py-5 bg-blue-600 hover:bg-blue-500 text-white font-bold rounded-2xl shadow-2xl transition-all hover:scale-105 active:scale-95 w-full sm:w-auto">
                <i class="fa-solid fa-play text-2xl"></i>
                <span class="text-lg md:text-xl text-center">เล่นเกมเพื่อดูพรรคไหนเหมาะกับคุณ</span>
            </a>
        </div>

        <!-- Visual Separator -->
        <div class="w-full max-w-[200px] mx-auto mt-12 mb-8 border-t border-slate-800/60"></div>

        <!-- Footer Info -->
        <div class="flex flex-col items-center gap-6 mb-8">
            <div class="text-xs text-slate-600 font-mono text-center">
                Update Real-time from Firebase Firestore
            </div>

            <!-- Developer Credit -->
            <div
                class="flex flex-col items-center gap-2 opacity-40 hover:opacity-100 transition-all duration-500 grayscale hover:grayscale-0">
                <span class="text-xs text-slate-400 font-medium">พัฒนาโดย</span>
                <a href="https://thalay.eu/" target="_blank" class="hover:scale-105 transition-transform duration-300">
                    <img src="https://thalay.eu/wp-content/uploads/2021/04/Thalay.eu3-Transparent150.png"
                        alt="สมาคม thalay.eu" class="h-8 w-auto">
                </a>
                <div class="flex gap-4 mt-2">
                    <a href="https://www.facebook.com/thalay.eu" target="_blank"
                        class="text-slate-400 hover:text-blue-500 transition-colors text-lg"><i
                            class="fa-brands fa-facebook"></i></a>
                </div>
            </div>
        </div>

    </main>


    <script type="module" src="/src/js/results.js"></script>
</body>

</html>