Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Palm DSS Quickview Dashboard</title> | |
| <link | |
| rel="stylesheet" | |
| href="leaflet.css" | |
| /> | |
| <link | |
| rel="stylesheet" | |
| href="css2.css" | |
| /> | |
| <link rel="stylesheet" href="styles.css" /> | |
| </head> | |
| <body> | |
| <div id="loadingOverlay" class="loading-overlay" role="status" aria-live="polite"> | |
| <div class="loading-card"> | |
| <div class="loading-spinner" aria-hidden="true"></div> | |
| <p>กำลังโหลดข้อมูล...</p> | |
| </div> | |
| </div> | |
| <main class="dashboard"> | |
| <section class="top-bar"> | |
| <div class="filters"> | |
| <label> | |
| <span>กรองจังหวัด</span> | |
| <select id="adm1Select"> | |
| <option value="">ทั้งหมด</option> | |
| </select> | |
| </label> | |
| <label> | |
| <span>กรองอำเภอ</span> | |
| <select id="adm2Select" disabled> | |
| <option value="">ทั้งหมด</option> | |
| </select> | |
| </label> | |
| <label> | |
| <span>กรองตำบล</span> | |
| <select id="adm3Select" disabled> | |
| <option value="">ทั้งหมด</option> | |
| </select> | |
| </label> | |
| <button id="clearFilters" type="button" class="clear-btn"> | |
| รีเซ็ตตัวกรอง | |
| </button> | |
| </div> | |
| <div class="summary"> | |
| <div class="card"> | |
| <span class="card-label">พื้นที่รวม (ไร่)</span> | |
| <span class="card-value" id="totalAreaRai">0</span> | |
| </div> | |
| <div class="card"> | |
| <span class="card-label">จำนวนแปลงรวม</span> | |
| <span class="card-value" id="itemCount">0</span> | |
| </div> | |
| <div class="card"> | |
| <span class="card-label">พื้นที่เฉลี่ยต่อแปลง (ไร่)</span> | |
| <span class="card-value" id="averageAreaRai">0</span> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="content"> | |
| <div id="map"></div> | |
| <div class="data-panel"> | |
| <div class="table-wrapper"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>หมายเลข</th> | |
| <th>จังหวัด</th> | |
| <th>อำเภอ</th> | |
| <th>ตำบล</th> | |
| <th>พื้นที่ (ตร.ม.)</th> | |
| <th>พื้นที่ (ไร่)</th> | |
| </tr> | |
| </thead> | |
| <tbody id="featureTable"></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <script | |
| src="leaflet.js" | |
| ></script> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> | |