<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>System Admin Dashboard</title>
<link rel="stylesheet" href="styles.css">
<style>
:root {
--primary-color: #2c3e50;
--secondary-color: #34495e;
--accent-color: #3498db;
--text-color: #ecf0f1;
--card-bg: #fff;
--card-text: #2c3e50;
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f5f7fa;
color: var(--text-color);
line-height: 1.6;
}
.header {
background-color: var(--primary-color);
color: var(--text-color);
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: var(--shadow);
position: relative;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
}
.desktop-nav ul {
display: flex;
list-style: none;
}
.desktop-nav li {
position: relative;
margin-left: 1.5rem;
}
.desktop-nav a {
color: var(--text-color);
text-decoration: none;
padding: 0.5rem 1rem;
display: flex;
align-items: center;
transition: color 0.3s;
}
.desktop-nav a:hover {
color: var(--accent-color);
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background-color: var(--secondary-color);
min-width: 200px;
border-radius: 0 0 4px 4px;
box-shadow: var(--shadow);
opacity: 0;
visibility: hidden;
transition: all 0.3s;
z-index: 100;
}
.dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
}
.dropdown-menu li {
margin: 0;
}
.dropdown-menu a {
padding: 0.75rem 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-menu-btn {
display: none;
background: none;
border: none;
color: var(--text-color);
font-size: 1.5rem;
cursor: pointer;
}
.mobile-nav {
position: fixed;
top: 0;
left: -100%;
width: 80%;
max-width: 300px;
height: 100vh;
background-color: var(--primary-color);
padding: 2rem;
transition: left 0.3s;
z-index: 1000;
overflow-y: auto;
}
.mobile-nav.active {
left: 0;
}
.mobile-nav ul {
list-style: none;
}
.mobile-nav li {
margin-bottom: 1rem;
}
.mobile-nav a {
color: var(--text-color);
text-decoration: none;
display: block;
padding: 0.5rem 0;
}
.mobile-dropdown-menu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s;
padding-left: 1rem;
}
.mobile-dropdown-menu.active {
max-height: 500px;
}
.content {
padding: 2rem;
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
}
.card {
background-color: var(--card-bg);
border-radius: 8px;
box-shadow: var(--shadow);
overflow: hidden;
display: flex;
flex-direction: column;
color: var(--card-text);
}
.card-header {
background-color: var(--accent-color);
color: white;
padding: 1rem;
}
.card-header h3 {
margin: 0;
font-size: 1.2rem;
}
.card-content {
padding: 1rem;
flex-grow: 1;
overflow: auto;
}
.card-content p {
margin-bottom: 0.5rem;
}
@media (max-width: 992px) {
.desktop-nav {
display: none;
}
.mobile-menu-btn {
display: block;
}
}
@media (max-width: 768px) {
.card-grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
}
@media (max-width: 576px) {
.content {
padding: 1rem;
}
.card-grid {
grid-template-columns: 1fr;
}
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<header class="header">
<div class="logo">System Admin</div>
<nav class="desktop-nav">
<a href="{{ url_for('logout') }}" onclick="return confirm('Are you sure you want to logout?');">Logout</a>
</nav>
</header>
<main class="content">
<div class="card-grid">
<div class="card">
<div class="card-header">
<h3>System Status</h3>
</div>
<div class="card-content">
<div id="AccCreate" class="tab-content">
<div class="">
<h2>REGISTRATION OF DEPARTMENT ADMIN</h2>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<p class="{{ category }}">{{ message }}</p>
{% endfor %}
{% endif %}
{% endwith %}
<form method="post" action="{{ url_for('register_admin') }}">
<label for="school_id">School ID:</label>
<input type="text" id="school_id" name="school_id" required>
<label for="course">Department:</label>
<select id="course" name="course" required>
<option value="" disabled selected>Select your Department</option>
<option value="CCSICT">CCSICT</option>
<option value="CCJE">CCJE</option>
<option value="PS">PS</option>
<option value="CED">CED</option>
<option value="CBM">CBM</option>
<option value="SAS">SAS</option>
<option value="IAT">IAT</option>
</select>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<label for="first_name">First Name:</label>
<input type="text" id="first_name" name="first_name" required>
<label for="last_name">Last Name:</label>
<input type="text" id="last_name" name="last_name" required>
<button type="submit">Register Admin</button>
</form>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h3>Server Load</h3>
</div>
<div class="card-content">
<p>CPU: 24%</p>
<p>Memory: 56%</p>
<p>Disk: 32%</p>
</div>
</div>
<div class="card">
<div class="card-header">
<h3>Recent Alerts</h3>
</div>
<div class="card-content">
<p>No critical alerts</p>
<p>2 warnings</p>
<p>5 notifications</p>
</div>
</div>
<div class="card">
<div class="card-header">
<h3>User Activity</h3>
</div>
<div class="card-content">
<p>Active users: 42</p>
<p>Recent logins: 12</p>
<p>Failed attempts: 2</p>
</div>
</div>
<div class="card">
<div class="card-header">
<h3>Backup Status</h3>
</div>
<div class="card-content">
<p>Last backup: Today 02:00</p>
<p>Next backup: Tomorrow 02:00</p>
<p>Backup size: 45.2 GB</p>
</div>
</div>
<div class="card">
<div class="card-header">
<h3>Network Traffic</h3>
</div>
<div class="card-content">
<p>Inbound: 12.5 MB/s</p>
<p>Outbound: 8.2 MB/s</p>
<p>Total: 1.2 TB</p>
</div>
</div>
</div>
</main>
<script>
document.addEventListener('DOMContentLoaded', function () {
const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
const mobileNav = document.querySelector('.mobile-nav');
const mobileDropdowns = document.querySelectorAll('.mobile-dropdown');
mobileMenuBtn.addEventListener('click', function () {
mobileNav.classList.toggle('active');
});
mobileDropdowns.forEach(dropdown => {
const link = dropdown.querySelector('a');
const menu = dropdown.querySelector('.mobile-dropdown-menu');
link.addEventListener('click', function (e) {
e.preventDefault();
menu.classList.toggle('active');
// Close other dropdowns
mobileDropdowns.forEach(otherDropdown => {
if (otherDropdown !== dropdown) {
otherDropdown.querySelector('.mobile-dropdown-menu').classList.remove('active');
}
});
});
});
// Close mobile menu when clicking outside
document.addEventListener('click', function (e) {
if (!mobileNav.contains(e.target) && e.target !== mobileMenuBtn) {
mobileNav.classList.remove('active');
}
});
});
</script>
</body>
</html>