pongpon pitisuk
100 lines
3.7 KiB
HTML
100 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="th">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ผลสถิติแบบสอบถาม - TPU Survey</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
'thai': ['"Noto Sans Thai"', 'sans-serif']
|
|
},
|
|
colors: {
|
|
'primary': { 50:'#eff6ff',100:'#dbeafe',200:'#bfdbfe',300:'#93c5fd',400:'#60a5fa',500:'#3b82f6',600:'#2563eb',700:'#1d4ed8',800:'#1e40af',900:'#1e3a8a' },
|
|
'accent': { 50:'#fffbeb',100:'#fef3c7',200:'#fde68a',300:'#fcd34d',400:'#fbbf24',500:'#f59e0b',600:'#d97706',700:'#b45309',800:'#92400e',900:'#78350f' }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<link rel="stylesheet" href="css/style.css?v=9">
|
|
<style>
|
|
body { background-color: var(--bg-color); font-family: 'Noto Sans Thai', sans-serif; }
|
|
.stats-view-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 90px 16px 60px;
|
|
}
|
|
.stats-header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
min-height: var(--header-height);
|
|
background: rgba(255, 255, 255, 0.96);
|
|
backdrop-filter: blur(12px);
|
|
border-bottom: 3px solid #fbbf24;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 10px 24px;
|
|
z-index: 1000;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.stats-title {
|
|
font-size: 1.15rem;
|
|
font-weight: 800;
|
|
color: #1e3a8a;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 600px;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.stats-header {
|
|
padding: 10px 12px;
|
|
}
|
|
.stats-title {
|
|
max-width: 220px;
|
|
font-size: 1rem;
|
|
}
|
|
.stats-view-container {
|
|
padding: 120px 10px 40px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="font-thai">
|
|
<header class="stats-header">
|
|
<div class="d-flex items-center gap-12 overflow-hidden">
|
|
<button class="btn btn-ghost btn-sm" onclick="window.close()">✕ <span class="hidden sm:inline">ปิด</span></button>
|
|
<div class="stats-title" id="statsSurveyTitle">กำลังโหลดผลสถิติ...</div>
|
|
</div>
|
|
<div id="statsActions" class="d-flex gap-8 flex-wrap">
|
|
<!-- Buttons will be rendered here -->
|
|
</div>
|
|
</header>
|
|
|
|
<main class="stats-view-container">
|
|
<div id="statsMainContent">
|
|
<div class="loading" style="padding: 100px 0;">
|
|
<div class="spinner"></div>
|
|
<p>กำลังรวบรวมข้อมูลสถิติ...</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="js/app.js?v=9"></script>
|
|
<script src="js/stats.js?v=9"></script>
|
|
</body>
|
|
</html>
|