From fb5b4b4c95bbc97f7a39673539a5552f43f319c4 Mon Sep 17 00:00:00 2001
From: pongpon pitisuk <pongponpitisuk@MacBook-Air-khxng-pongpon.local>
Date: Sat, 12 Sep 2026 15:59:22 +0700
Subject: [PATCH] Enhance UX/UI proportions and unified design system across
 all devices

---
 admin.html    |   6 +--
 css/style.css | 115 +++++++++++++++++++++++++++++++++++++++++++++++++-
 edit.html     |   6 +--
 index.html    |   2 +-
 js/admin.js   |  38 ++++++++---------
 js/teacher.js |  26 ++++++------
 respond.php   |   6 +--
 teacher.html  |   6 +--
 8 files changed, 159 insertions(+), 46 deletions(-)

diff --git a/admin.html b/admin.html
index 2418b87..5e12003 100644
--- a/admin.html
+++ b/admin.html
@@ -28,7 +28,7 @@
             }
         }
     </script>
-    <link rel="stylesheet" href="css/style.css?v=8">
+    <link rel="stylesheet" href="css/style.css?v=9">
 </head>
 
 <body class="font-thai">
@@ -358,8 +358,8 @@
     </div>
 
     <script src="js/qrcode.min.js"></script>
-    <script src="js/app.js?v=5"></script>
-    <script src="js/admin.js?v=5"></script>
+    <script src="js/app.js?v=9"></script>
+    <script src="js/admin.js?v=9"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 17ad6a2..052b087 100644
--- a/css/style.css
+++ b/css/style.css
@@ -2583,7 +2583,119 @@ table {
     border-collapse: collapse !important;
 }
 
-/* 9. Standalone Editor Auto-Fit & Clean Scroll */
+/* ============================================================
+   Action Buttons & Card Proportions (Tapee University Design System)
+   ============================================================ */
+.card-tapi {
+    background: #ffffff;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+}
+
+.card-tapi:hover {
+    border-color: #cbd5e1;
+    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.08);
+    transform: translateY(-1px);
+}
+
+.btn-action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    padding: 6px 10px;
+    font-size: 11.5px;
+    font-weight: 700;
+    border-radius: 8px;
+    border: 1px solid transparent;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: all 0.18s ease;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.btn-action:active {
+    transform: scale(0.96);
+}
+
+.btn-action-edit {
+    background: #fbbf24;
+    color: #78350f;
+    border-color: #f59e0b;
+}
+.btn-action-edit:hover {
+    background: #f59e0b;
+    color: #ffffff;
+}
+
+.btn-action-copy {
+    background: #3b82f6;
+    color: #ffffff;
+    border-color: #2563eb;
+}
+.btn-action-copy:hover {
+    background: #1d4ed8;
+}
+
+.btn-action-link {
+    background: #1e3a8a;
+    color: #ffffff;
+    border-color: #172554;
+}
+.btn-action-link:hover {
+    background: #1e40af;
+}
+
+.btn-action-import {
+    background: #10b981;
+    color: #ffffff;
+    border-color: #059669;
+}
+.btn-action-import:hover {
+    background: #047857;
+}
+
+.btn-action-stats {
+    background: #6366f1;
+    color: #ffffff;
+    border-color: #4f46e5;
+}
+.btn-action-stats:hover {
+    background: #4338ca;
+}
+
+.btn-action-delete {
+    background: #f43f5e;
+    color: #ffffff;
+    border-color: #e11d48;
+}
+.btn-action-delete:hover {
+    background: #be123c;
+}
+
+.btn-status-select {
+    background: #f8fafc;
+    border: 1px solid #cbd5e1;
+    color: #334155;
+    padding: 5px 8px;
+    font-size: 11.5px;
+    font-weight: 700;
+    border-radius: 8px;
+    cursor: pointer;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
+}
+.btn-status-select:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
+}
+
+/* Standalone Editor Auto-Fit & Clean Scroll */
 .editor-container {
     max-width: 960px;
     width: 100%;
@@ -2633,3 +2745,4 @@ table {
     }
 }
 
+
diff --git a/edit.html b/edit.html
index 2237aee..7f3fda0 100644
--- a/edit.html
+++ b/edit.html
@@ -24,7 +24,7 @@
             }
         }
     </script>
-    <link rel="stylesheet" href="css/style.css?v=8">
+    <link rel="stylesheet" href="css/style.css?v=9">
     <style>
         * { box-sizing: border-box; }
         body { 
@@ -179,7 +179,7 @@
         </div>
     </div>
 
-    <script src="js/app.js?v=6"></script>
-    <script src="js/editor.js?v=6"></script>
+    <script src="js/app.js?v=9"></script>
+    <script src="js/editor.js?v=9"></script>
 </body>
 </html>
diff --git a/index.html b/index.html
index 80d6e08..9a898af 100644
--- a/index.html
+++ b/index.html
@@ -27,7 +27,7 @@
             }
         }
     </script>
-    <link rel="stylesheet" href="css/style.css?v=8">
+    <link rel="stylesheet" href="css/style.css?v=9">
 </head>
 
 <body class="font-thai">
diff --git a/js/admin.js b/js/admin.js
index a2fdcda..836a6c0 100644
--- a/js/admin.js
+++ b/js/admin.js
@@ -226,14 +226,14 @@ function renderUserCards(filteredList) {
                     </div>
                 </div>
                 <div class="flex items-center gap-1.5 flex-shrink-0 self-end sm:self-auto">
-                    <button onclick="editUser(${u.id})" class="bg-amber-400 hover:bg-amber-500 text-gray-900 border border-slate-800 px-3 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="แก้ไขข้อมูลผู้ใช้">
-                        ✏️ แก้ไข
+                    <button onclick="editUser(${u.id})" class="btn-action btn-action-edit" title="แก้ไขข้อมูลผู้ใช้">
+                        <i class="fas fa-edit"></i> แก้ไข
                     </button>
                     ${!isCurrentUser ? `
-                    <button onclick="deleteUser(${u.id}, '${escapeHtml(u.full_name)}')" class="bg-rose-600 hover:bg-rose-700 text-white border border-slate-800 px-3 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="ลบผู้ใช้">
-                        🗑️ ลบ
+                    <button onclick="deleteUser(${u.id}, '${escapeHtml(u.full_name)}')" class="btn-action btn-action-delete" title="ลบผู้ใช้">
+                        <i class="fas fa-trash-alt"></i> ลบ
                     </button>
-                    ` : '<span class="text-xs text-slate-400 font-semibold px-2 py-1 bg-slate-100 rounded">บัญชีคุณ</span>'}
+                    ` : '<span class="text-xs text-slate-400 font-semibold px-2.5 py-1 bg-slate-100 rounded-md">บัญชีคุณ</span>'}
                 </div>
             </div>
         `;
@@ -485,29 +485,29 @@ function renderSurveyCards() {
                         </div>
                     </div>
                 </div>
-                <div class="flex flex-wrap lg:flex-nowrap gap-1 items-center flex-shrink-0 w-full lg:w-auto overflow-x-auto pb-1 lg:pb-0">
-                    <select class="bg-slate-50 border border-slate-300 text-slate-800 px-1.5 py-1 rounded text-xs font-bold shadow-sm transition-all focus:outline-none" onchange="changeStatus(${s.id}, this.value)" title="เปลี่ยนสถานะ">
+                <div class="flex flex-wrap lg:flex-nowrap gap-1.5 items-center flex-shrink-0 w-full lg:w-auto overflow-x-auto pb-1 lg:pb-0">
+                    <select class="btn-status-select" onchange="changeStatus(${s.id}, this.value)" title="เปลี่ยนสถานะ">
                         <option value="draft" ${s.status==='draft'?'selected':''}>📝 ร่าง</option>
                         <option value="active" ${s.status==='active'?'selected':''}>🟢 เปิดใช้งาน</option>
                         <option value="closed" ${s.status==='closed'?'selected':''}>🔴 ปิดแล้ว</option>
                     </select>
-                    <button onclick="editSurvey(${s.id})" class="bg-amber-400 hover:bg-amber-500 text-gray-900 border border-slate-800 px-2 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="แก้ไขแบบสอบถาม">
-                        ✏️ แก้ไข
+                    <button onclick="editSurvey(${s.id})" class="btn-action btn-action-edit" title="แก้ไขแบบสอบถาม">
+                        <i class="fas fa-edit"></i> แก้ไข
                     </button>
-                    <button onclick="duplicateSurvey(${s.id})" class="bg-blue-600 hover:bg-blue-700 text-white border border-slate-800 px-2 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="คัดลอกแบบสอบถาม">
-                        📑 คัดลอก
+                    <button onclick="duplicateSurvey(${s.id})" class="btn-action btn-action-copy" title="คัดลอกแบบสอบถาม">
+                        <i class="fas fa-copy"></i> คัดลอก
                     </button>
-                    <button onclick="generateLink(${s.id})" class="bg-blue-900 hover:bg-blue-950 text-white border border-slate-800 px-2 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="ลิงก์และ QR Code">
-                        🔗 ลิงก์
+                    <button onclick="generateLink(${s.id})" class="btn-action btn-action-link" title="ลิงก์และ QR Code">
+                        <i class="fas fa-link"></i> ลิงก์
                     </button>
-                    <button onclick="showImportResponsesModal(${s.id}, '${escapeHtml(s.title)}')" class="bg-emerald-600 hover:bg-emerald-700 text-white border border-slate-800 px-2 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="นำเข้าคำตอบจาก CSV">
-                        📥 นำเข้าคำตอบ
+                    <button onclick="showImportResponsesModal(${s.id}, '${escapeHtml(s.title)}')" class="btn-action btn-action-import" title="นำเข้าคำตอบจาก CSV">
+                        <i class="fas fa-file-import"></i> นำเข้า
                     </button>
-                    <button onclick="viewStats(${s.id})" class="bg-indigo-600 hover:bg-indigo-700 text-white border border-slate-800 px-2 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="ผลสถิติ">
-                        📊 สถิติ
+                    <button onclick="viewStats(${s.id})" class="btn-action btn-action-stats" title="ผลสถิติ">
+                        <i class="fas fa-chart-pie"></i> สถิติ
                     </button>
-                    <button onclick="deleteSurvey(${s.id}, '${escapeHtml(s.title)}')" class="bg-rose-600 hover:bg-rose-700 text-white border border-slate-800 px-2 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="ลบแบบสอบถาม">
-                        🗑️ ลบ
+                    <button onclick="deleteSurvey(${s.id}, '${escapeHtml(s.title)}')" class="btn-action btn-action-delete" title="ลบแบบสอบถาม">
+                        <i class="fas fa-trash-alt"></i> ลบ
                     </button>
                 </div>
             </div>
diff --git a/js/teacher.js b/js/teacher.js
index f2c6dcb..fc16d1b 100644
--- a/js/teacher.js
+++ b/js/teacher.js
@@ -88,24 +88,24 @@ function renderTeacherSurveys() {
                         </div>
                     </div>
                 </div>
-                <div class="flex flex-wrap lg:flex-nowrap gap-1 items-center flex-shrink-0 w-full lg:w-auto overflow-x-auto pb-1 lg:pb-0">
-                    <button onclick="teacherEditSurvey(${s.id})" class="bg-amber-400 hover:bg-amber-500 text-gray-900 border border-slate-800 px-2 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="แก้ไขแบบสอบถาม">
-                        ✏️ แก้ไข
+                <div class="flex flex-wrap lg:flex-nowrap gap-1.5 items-center flex-shrink-0 w-full lg:w-auto overflow-x-auto pb-1 lg:pb-0">
+                    <button onclick="teacherEditSurvey(${s.id})" class="btn-action btn-action-edit" title="แก้ไขแบบสอบถาม">
+                        <i class="fas fa-edit"></i> แก้ไข
                     </button>
-                    <button onclick="teacherDuplicateSurvey(${s.id})" class="bg-blue-600 hover:bg-blue-700 text-white border border-slate-800 px-2 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="คัดลอกแบบสอบถาม">
-                        📑 คัดลอก
+                    <button onclick="teacherDuplicateSurvey(${s.id})" class="btn-action btn-action-copy" title="คัดลอกแบบสอบถาม">
+                        <i class="fas fa-copy"></i> คัดลอก
                     </button>
-                    <button onclick="teacherGenerateLink(${s.id})" class="bg-blue-900 hover:bg-blue-950 text-white border border-slate-800 px-2 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="ลิงก์และ QR Code">
-                        🔗 ลิงก์
+                    <button onclick="teacherGenerateLink(${s.id})" class="btn-action btn-action-link" title="ลิงก์และ QR Code">
+                        <i class="fas fa-link"></i> ลิงก์
                     </button>
-                    <button onclick="showImportResponsesModal(${s.id}, '${escapeHtml(s.title)}')" class="bg-emerald-600 hover:bg-emerald-700 text-white border border-slate-800 px-2 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="นำเข้าคำตอบจาก CSV">
-                        📥 นำเข้าคำตอบ
+                    <button onclick="showImportResponsesModal(${s.id}, '${escapeHtml(s.title)}')" class="btn-action btn-action-import" title="นำเข้าคำตอบจาก CSV">
+                        <i class="fas fa-file-import"></i> นำเข้า
                     </button>
-                    <button onclick="teacherViewStats(${s.id})" class="bg-indigo-600 hover:bg-indigo-700 text-white border border-slate-800 px-2 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="ผลสถิติ">
-                        📊 สถิติ
+                    <button onclick="teacherViewStats(${s.id})" class="btn-action btn-action-stats" title="ผลสถิติ">
+                        <i class="fas fa-chart-pie"></i> สถิติ
                     </button>
-                    <button onclick="teacherDeleteSurvey(${s.id}, '${escapeHtml(s.title)}')" class="bg-rose-600 hover:bg-rose-700 text-white border border-slate-800 px-2 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="ลบแบบสอบถาม">
-                        🗑️ ลบ
+                    <button onclick="teacherDeleteSurvey(${s.id}, '${escapeHtml(s.title)}')" class="btn-action btn-action-delete" title="ลบแบบสอบถาม">
+                        <i class="fas fa-trash-alt"></i> ลบ
                     </button>
                 </div>
             </div>
diff --git a/respond.php b/respond.php
index 85bf3bf..7f7b778 100644
--- a/respond.php
+++ b/respond.php
@@ -31,7 +31,7 @@
             }
         }
     </script>
-    <link rel="stylesheet" href="css/style.css?v=8">
+    <link rel="stylesheet" href="css/style.css?v=9">
 </head>
 <body class="font-thai">
     <div class="survey-page">
@@ -43,7 +43,7 @@
         </div>
     </div>
 
-    <script src="js/app.js?v=7"></script>
-    <script src="js/survey.js?v=7"></script>
+    <script src="js/app.js?v=9"></script>
+    <script src="js/survey.js?v=9"></script>
 </body>
 </html>
diff --git a/teacher.html b/teacher.html
index 7c10d3f..0bab6b5 100644
--- a/teacher.html
+++ b/teacher.html
@@ -28,7 +28,7 @@
             }
         }
     </script>
-    <link rel="stylesheet" href="css/style.css?v=8">
+    <link rel="stylesheet" href="css/style.css?v=9">
 </head>
 
 <body class="font-thai">
@@ -204,8 +204,8 @@
     </div>
 
     <script src="js/qrcode.min.js"></script>
-    <script src="js/app.js?v=5"></script>
-    <script src="js/teacher.js?v=5"></script>
+    <script src="js/app.js?v=9"></script>
+    <script src="js/teacher.js?v=9"></script>
 </body>
 
 </html>
\ No newline at end of file