53 lines
2.3 KiB
HTML
53 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Announcement Manager</title>
|
|
<style>
|
|
* {{ box-sizing: border-box; margin: 0; padding: 0; }}
|
|
body {{ font-family: system-ui, sans-serif; background: #f5f5f5; padding: 2rem; color: #333; }}
|
|
h1 {{ margin-bottom: 1.5rem; }}
|
|
h2 {{ margin: 1.5rem 0 0.75rem; }}
|
|
form {{ background: #fff; padding: 1rem; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.1); }}
|
|
.form-row {{ display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: end; }}
|
|
label {{ display: flex; flex-direction: column; font-size: 0.85rem; gap: 0.25rem; }}
|
|
input, textarea {{ padding: 0.4rem 0.6rem; border: 1px solid #ccc; border-radius: 4px; font-size: 0.95rem; }}
|
|
textarea {{ min-width: 220px; resize: vertical; }}
|
|
button {{ padding: 0.4rem 1rem; background: #2563eb; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 0.95rem; }}
|
|
button:hover {{ background: #1d4ed8; }}
|
|
button.danger {{ background: #dc2626; }}
|
|
button.danger:hover {{ background: #b91c1c; }}
|
|
table {{ width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.1); }}
|
|
th, td {{ padding: 0.6rem 0.75rem; text-align: left; border-bottom: 1px solid #eee; }}
|
|
th {{ background: #f9fafb; font-weight: 600; }}
|
|
.empty {{ padding: 2rem; text-align: center; color: #888; }}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Announcement Manager</h1>
|
|
|
|
<h2>Create Announcement</h2>
|
|
<form action="/api/announcements" method="POST">
|
|
<div class="form-row">
|
|
<label>Author
|
|
<input name="author" placeholder="e.g. School office" required>
|
|
</label>
|
|
<label>Text
|
|
<textarea name="text_content" placeholder="Announcement text…" required></textarea>
|
|
</label>
|
|
<label>Start date
|
|
<input type="date" name="start_date" required>
|
|
</label>
|
|
<label>End date
|
|
<input type="date" name="end_date" required>
|
|
</label>
|
|
<button type="submit">Create</button>
|
|
</div>
|
|
</form>
|
|
|
|
<h2>Existing Announcements</h2>
|
|
{rows}
|
|
</body>
|
|
</html>
|