65 lines
1.8 KiB
HTML
65 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Easyattend</title>
|
||
<link rel="stylesheet" href="styles.css" />
|
||
</head>
|
||
<body>
|
||
<main class="page">
|
||
<section class="hero">
|
||
<div>
|
||
|
||
<h1>EasyAttend - Record and Manage Attendance hassle-free</h1>
|
||
<p class="subtitle">An attendance app for teachers to record student arrivals and remove incorrect entries.</p>
|
||
</div>
|
||
<div class="badge">Live classroom list</div>
|
||
</section>
|
||
|
||
<section class="card form-card">
|
||
<h2>Add arrival</h2>
|
||
<form id="attendance-form">
|
||
<label>
|
||
Student name
|
||
<input id="student-name" type="text" placeholder="Student's name here" required maxlength="80" />
|
||
</label>
|
||
<label>
|
||
Arrival time
|
||
<input id="arrival-time" type="time" required />
|
||
</label>
|
||
<button type="submit">Add student</button>
|
||
</form>
|
||
<p id="message" class="message"></p>
|
||
</section>
|
||
|
||
<section class="card list-card">
|
||
<div class="list-header">
|
||
<div>
|
||
<h2>Today’s attendance</h2>
|
||
<p>Saved in database.</p>
|
||
</div>
|
||
<button id="refresh-btn" class="secondary">Refresh</button>
|
||
</div>
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>#</th>
|
||
<th>Name</th>
|
||
<th>Arrival</th>
|
||
<th>Created</th>
|
||
<th>Action</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="attendance-body"></tbody>
|
||
</table>
|
||
</div>
|
||
<div id="empty-state" class="empty hidden">No students added yet.</div>
|
||
</section>
|
||
</main>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|