forked from ttc/micro-frontend
first commit
This commit is contained in:
253
plan-app/index.html
Normal file
253
plan-app/index.html
Normal file
@@ -0,0 +1,253 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user