254 lines
8.4 KiB
HTML
254 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="th">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>โปรแกรมจำแนกงบประมาณ</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root{
|
|
--bg:#f4f7fb;
|
|
--card:#ffffff;
|
|
--primary:#2563eb;
|
|
--muted:#6b7280;
|
|
--accent:#10b981;
|
|
--danger:#ef4444;
|
|
--shadow: 0 6px 18px rgba(31,41,55,0.06);
|
|
--radius:12px;
|
|
}
|
|
*{box-sizing:border-box}
|
|
body{
|
|
font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
|
|
background: linear-gradient(180deg,#f7fbff 0%,var(--bg) 60%);
|
|
margin:0;
|
|
min-height:100vh;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
padding:28px;
|
|
color:#0f172a;
|
|
}
|
|
.container{
|
|
width:100%;
|
|
max-width:920px;
|
|
background:var(--card);
|
|
border-radius:var(--radius);
|
|
box-shadow:var(--shadow);
|
|
padding:28px;
|
|
display:grid;
|
|
grid-template-columns: 1fr 360px;
|
|
gap:20px;
|
|
align-items:start;
|
|
}
|
|
header{
|
|
grid-column:1 / -1;
|
|
display:flex;
|
|
gap:16px;
|
|
align-items:center;
|
|
}
|
|
.logo{
|
|
width:56px;
|
|
height:56px;
|
|
border-radius:12px;
|
|
background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%);
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
color:#111827;
|
|
font-weight:700;
|
|
font-size:20px;
|
|
box-shadow: 0 6px 18px rgba(15,23,42,0.06);
|
|
border: 1px solid rgba(15,23,42,0.04);
|
|
}
|
|
h1{
|
|
margin:0;
|
|
font-size:18px;
|
|
letter-spacing:-0.2px;
|
|
}
|
|
p.lead{
|
|
margin:4px 0 0 0;
|
|
font-size:13px;
|
|
color:var(--muted);
|
|
}
|
|
|
|
.main{
|
|
padding-top:6px;
|
|
}
|
|
.step{
|
|
background:linear-gradient(180deg, #fff, #fbfdff);
|
|
border-radius:10px;
|
|
padding:14px;
|
|
margin-bottom:12px;
|
|
border:1px solid rgba(15,23,42,0.04);
|
|
}
|
|
.step h3{
|
|
margin:0 0 6px 0;
|
|
font-size:14px;
|
|
display:flex;
|
|
align-items:center;
|
|
gap:8px;
|
|
}
|
|
.file-row{
|
|
display:flex;
|
|
gap:10px;
|
|
align-items:center;
|
|
}
|
|
input[type="text"]{
|
|
flex:1;
|
|
padding:10px 12px;
|
|
border-radius:8px;
|
|
border:1px solid rgba(15,23,42,0.06);
|
|
background:#fbfdff;
|
|
color:#0f172a;
|
|
font-size:14px;
|
|
}
|
|
button, select{
|
|
border:0;
|
|
background:var(--primary);
|
|
color:#fff;
|
|
padding:10px 14px;
|
|
border-radius:8px;
|
|
cursor:pointer;
|
|
font-weight:600;
|
|
font-size:14px;
|
|
transition:transform .08s ease, box-shadow .08s ease;
|
|
box-shadow: 0 6px 14px rgba(37,99,235,0.12);
|
|
}
|
|
button.secondary{
|
|
background:#fff;
|
|
color:#0f172a;
|
|
border:1px solid rgba(15,23,42,0.06);
|
|
box-shadow:none;
|
|
}
|
|
button:active{ transform:translateY(1px) }
|
|
select{
|
|
width:100%;
|
|
background:linear-gradient(180deg,#ffffff,#fbfdff);
|
|
color:#0f172a;
|
|
text-align:left;
|
|
appearance:none;
|
|
}
|
|
.side{
|
|
padding:12px;
|
|
border-radius:10px;
|
|
background:linear-gradient(180deg,#fff,#fbfdff);
|
|
border:1px solid rgba(15,23,42,0.04);
|
|
height:100%;
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:12px;
|
|
}
|
|
.export-btn{
|
|
display:flex;
|
|
gap:8px;
|
|
align-items:center;
|
|
justify-content:center;
|
|
padding:12px;
|
|
font-size:16px;
|
|
border-radius:10px;
|
|
background:linear-gradient(90deg,var(--accent),#059669);
|
|
box-shadow:0 10px 30px rgba(16,185,129,0.12);
|
|
border:0;
|
|
}
|
|
.status{
|
|
font-size:13px;
|
|
color:var(--muted);
|
|
min-height:36px;
|
|
}
|
|
.small{
|
|
font-size:12px;
|
|
color:var(--muted);
|
|
}
|
|
.hint{
|
|
display:flex;
|
|
gap:10px;
|
|
align-items:center;
|
|
font-size:13px;
|
|
color:var(--muted);
|
|
}
|
|
footer{
|
|
grid-column:1 / -1;
|
|
margin-top:8px;
|
|
text-align:right;
|
|
font-size:12px;
|
|
color:var(--muted);
|
|
}
|
|
@media (max-width:880px){
|
|
.container{ grid-template-columns: 1fr; padding:18px; }
|
|
.logo{ width:48px;height:48px }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container" role="application" aria-label="โปรแกรมจำแนกงบประมาณ">
|
|
<header>
|
|
<div class="logo" style="overflow:hidden;">
|
|
<img src="./logo.ico" alt="BC" style="width:100%;height:100%;object-fit:contain;display:block;border-radius:inherit;">
|
|
</div>
|
|
<div>
|
|
<h1>📊 โปรแกรมจำแนกงบประมาณ — รุ่นทดสอบ</h1>
|
|
<p class="lead">อัปโหลดไฟล์ Excel แล้วเลือกวิธีการจำแนก จากนั้นกด Export เพื่อสร้างไฟล์ผลลัพธ์</p>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="main">
|
|
<section class="step" aria-labelledby="step1">
|
|
<h3 id="step1">1. เลือกไฟล์ Excel</h3>
|
|
<div class="file-row">
|
|
<input type="text" id="filePath" readonly placeholder="ยังไม่ได้เลือกไฟล์">
|
|
<button id="btnSelect" class="secondary" title="เลือกไฟล์">เลือกไฟล์</button>
|
|
</div>
|
|
<p class="small" style="margin-top:8px">รองรับ .xlsx, .xls — สามารถลากไฟล์มาวางได้ (ถ้า renderer รองรับ)</p>
|
|
</section>
|
|
|
|
<section class="step" aria-labelledby="step2">
|
|
<h3 id="step2">2. เลือกรูปแบบการจำแนก</h3>
|
|
<div style="display:grid;grid-template-columns:1fr;gap:8px;">
|
|
<select id="mode" aria-label="เลือกรูปแบบการจำแนก">
|
|
<option value="bywork.js">ตามงาน</option>
|
|
<option value="bydep.js">ตามแผนกวิชา</option>
|
|
<option value="bypivot.js">ตามแผนงานในการขอซื้อของจ้าง</option>
|
|
</select>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="step" aria-labelledby="step3">
|
|
<h3 id="step3">3. สร้างไฟล์ผลลัพธ์</h3>
|
|
<p class="small">หลังจากกด Export ระบบจะประมวลผลและดาวน์โหลดไฟล์ Excel ที่แบ่งหมวดงบประมาณแล้ว</p>
|
|
</section>
|
|
</main>
|
|
|
|
<aside class="side" aria-labelledby="actions">
|
|
<div id="actions">
|
|
<button id="btnRun" class="export-btn" title="Export Excel">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" style="margin-right:6px" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
<path d="M12 3v12" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M8.5 7.5L12 3l3.5 4.5" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<rect x="4" y="17" width="16" height="3" rx="1.2" fill="white"/>
|
|
</svg>
|
|
Export Excel
|
|
</button>
|
|
</div>
|
|
|
|
<div class="status" id="status">สถานะ: พร้อมใช้งาน</div>
|
|
|
|
<div class="hint">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
|
<path d="M12 2a10 10 0 100 20 10 10 0 000-20z" stroke="#9CA3AF" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M11 10h1v5h1" stroke="#9CA3AF" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M12 7h.01" stroke="#9CA3AF" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
<div>
|
|
<div style="font-weight:600">คำแนะนำ</div>
|
|
<div style="color:var(--muted);margin-top:4px">ตรวจสอบความถูกต้องของคอลัมน์ในไฟล์ก่อน Export เพื่อผลลัพธ์ที่แม่นยำ</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<footer>เวอร์ชันทดสอบ • เก็บไฟล์ต้นฉบับไว้ก่อนการใช้งาน</footer>
|
|
</div>
|
|
|
|
<script src="renderer.js"></script>
|
|
</body>
|
|
</html>
|