Initial commit

This commit is contained in:
Porawit Dongwang
2026-09-16 23:20:08 +07:00
commit 0041668dbb
32577 changed files with 3687927 additions and 0 deletions
@@ -0,0 +1,163 @@
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Sarabun', sans-serif;
background-color: #f4f6f9;
margin: 0;
padding: 0;
color: #333;
display: flex;
min-height: 100vh;
}
/* Sidebar */
.sidebar {
width: 250px;
background: #343a40;
color: #c2c7d0;
display: flex;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
height: 100vh;
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
.sidebar-header {
padding: 20px;
text-align: center;
border-bottom: 1px solid #4f5962;
background: #23272b;
}
.sidebar-header h3 {
margin: 0;
color: #fff;
font-size: 20px;
font-weight: 600;
}
.sidebar-nav {
flex: 1;
padding-top: 20px;
}
.sidebar-nav a {
display: block;
padding: 12px 20px;
color: #c2c7d0;
text-decoration: none;
font-size: 16px;
transition: 0.2s;
}
.sidebar-nav a:hover, .sidebar-nav a.active {
background: #007bff;
color: #fff;
}
.sidebar-nav a i {
width: 25px;
text-align: center;
margin-right: 10px;
}
/* Main Content */
.main-content {
flex: 1;
margin-left: 250px;
display: flex;
flex-direction: column;
}
.top-navbar {
background: #fff;
padding: 15px 30px;
border-bottom: 1px solid #dee2e6;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 1px 5px rgba(0,0,0,0.05);
}
.top-navbar h4 {
margin: 0;
font-size: 18px;
color: #495057;
}
.content-wrapper {
padding: 30px;
flex: 1;
}
/* Cards */
.card {
background: #fff;
border-radius: 8px;
padding: 25px;
box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
margin-bottom: 20px;
}
.card h3 {
margin-top: 0;
color: #343a40;
border-bottom: 1px solid #eee;
padding-bottom: 15px;
margin-bottom: 20px;
}
/* Buttons */
.btn-primary {
background: #007bff;
color: #fff;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
text-decoration: none;
transition: 0.2s;
font-family: inherit;
font-size: 15px;
}
.btn-primary:hover { background: #0056b3; }
.btn-danger { background: #dc3545; color: #fff; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; text-decoration: none; font-size: 14px;}
.btn-warning { background: #ffc107; color: #212529; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; text-decoration: none; font-size: 14px;}
/* Inputs */
.form-control {
width: 100%;
padding: 10px;
border: 1px solid #ced4da;
border-radius: 4px;
font-family: inherit;
box-sizing: border-box;
}
/* 2FA 6-digit Inputs (Login & Setup) */
.otp-wrapper {
display: flex;
justify-content: center;
gap: 10px;
margin: 20px 0;
}
.otp-wrapper input {
width: 45px;
height: 55px;
text-align: center;
font-size: 24px;
font-weight: 700;
border: 2px solid #ddd;
border-radius: 8px;
background: #fdfdfd;
transition: 0.3s;
font-family: inherit;
}
.otp-wrapper input:focus {
border-color: #007bff;
box-shadow: 0 0 8px rgba(0,123,255,0.2);
outline: none;
}
@@ -0,0 +1,106 @@
/* Modern Enterprise DataTables Styling */
.card { box-shadow: 0 0 15px rgba(0,0,0,0.05); border: 1px solid #e9ecef; }
table.dataTable { font-family: inherit; border-collapse: collapse; margin-top: 15px !important; margin-bottom: 15px !important; }
table.dataTable thead th {
background-color: #f8f9fa;
border-bottom: 2px solid #dee2e6;
border-top: 1px solid #dee2e6;
padding: 12px 30px 12px 15px;
color: #495057;
font-size: 15px;
font-weight: 600;
position: relative;
}
table.dataTable tbody td { padding: 12px 15px; border-bottom: 1px solid #e9ecef; vertical-align: middle; font-size: 15px; color: #333; }
table.dataTable tbody tr { transition: background-color 0.2s; }
table.dataTable tbody tr:hover { background-color: #f1f7fd; }
/* Remove default DataTables sort images completely */
table.dataTable thead th,
table.dataTable thead td {
background-image: none !important;
}
/* Hide any possible ::before pseudo-elements from DataTables default */
table.dataTable thead th::before,
table.dataTable thead td::before {
display: none !important;
content: none !important;
}
/* Custom FontAwesome Sorting Icons */
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 15px;
}
table.dataTable thead th.sorting::after { content: "\f0dc" !important; color: blue !important; opacity: 0.3 !important; }
table.dataTable thead th.sorting_asc::after { content: "\f161" !important; color: blue !important; opacity: 0.7 !important; }
table.dataTable thead th.sorting_desc::after { content: "\f160" !important; color: blue !important; opacity: 0.7 !important; }
/* Excel Export Button Styling */
.dt-buttons { margin-left: 15px; }
.dt-buttons .dt-button.buttons-excel {
background: #fff !important;
color: #198754 !important;
border: 1px solid #198754 !important;
border-radius: 4px !important;
padding: 6px 14px !important;
font-size: 14px !important;
font-family: 'Sarabun', sans-serif !important;
font-weight: 600;
box-shadow: none !important;
transition: all 0.2s !important;
}
.dt-buttons .dt-button.buttons-excel:hover { background: #198754 !important; color: #fff !important; }
/* Controls Layout */
.dt-top-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-wrap: wrap; gap: 15px;}
.dt-top-left { display: flex; align-items: center; }
.dataTables_length select {
border: 1px solid #ced4da;
border-radius: 6px;
padding: 6px 30px 6px 12px;
font-family: 'Sarabun', sans-serif;
outline: none;
margin: 0 5px;
background-color: #fff;
transition: all 0.2s ease-in-out;
appearance: auto;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.dataTables_length select:focus {
border-color: #86b7fe;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.dataTables_filter input {
border: 1px solid #ced4da;
border-radius: 20px;
padding: 8px 18px;
outline: none;
transition: all 0.3s ease-in-out;
font-family: 'Sarabun', sans-serif;
width: 250px;
background-color: #f8f9fa;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.dataTables_filter input:focus {
border-color: #86b7fe;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
background-color: #fff;
width: 280px;
}
.dt-bottom-row { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; font-size: 14px; color: #6c757d;}
.dataTables_paginate .paginate_button { padding: 5px 10px !important; margin: 0 2px; border-radius: 4px; border: 1px solid #dee2e6 !important; background: #fff !important; color: #007bff !important; cursor: pointer; }
.dataTables_paginate .paginate_button:hover { background: #e9ecef !important; color: #0056b3 !important; }
.dataTables_paginate .paginate_button.current { background: #007bff !important; color: #fff !important; border-color: #007bff !important; font-weight: bold;}
@@ -0,0 +1,132 @@
/* Base Styles for LIFF & Magic UI Feel */
body {
font-family: 'Sarabun', 'Prompt', sans-serif;
background-color: #f4f7f6;
margin: 0;
padding: 0;
color: #333;
}
/* Shiny Effect for Logo */
.shiny-logo {
position: relative;
display: inline-block;
overflow: hidden;
border-radius: 12px; /* adjust based on logo shape */
}
.shiny-logo img {
display: block;
max-width: 100%;
height: auto;
}
.shiny-logo::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.6) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-25deg);
animation: shine 3s infinite;
}
@keyframes shine {
0% {
left: -100%;
}
20% {
left: 200%;
}
100% {
left: 200%;
}
}
/* Magic UI Style Buttons & Cards */
.card {
background: #fff;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
padding: 20px;
margin-bottom: 20px;
}
.btn-magic {
background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
color: white;
border: none;
border-radius: 8px;
padding: 10px 20px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
text-align: center;
display: inline-block;
text-decoration: none;
width: 100%;
box-sizing: border-box;
}
.btn-magic:hover {
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(0, 114, 255, 0.3);
}
.menu-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-top: 20px;
}
.menu-item {
background: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 12px;
padding: 20px 10px;
text-align: center;
text-decoration: none;
color: #333;
font-weight: 600;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.02);
transition: all 0.3s ease;
}
.menu-item:hover {
background: #f0f7ff;
border-color: #0072ff;
transform: translateY(-3px);
}
.menu-icon {
font-size: 32px;
margin-bottom: 10px;
color: #0072ff;
}
/* Header */
.header {
text-align: center;
padding: 30px 20px;
background: #fff;
border-bottom: 1px solid #eaeaea;
}
.header h1 {
font-size: 24px;
margin: 10px 0 0;
color: #0072ff;
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 85 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 KiB