Kiyan
/
HomeSecurity
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor HTML templates and CSS styles; implement event and settings controllers

This commit is contained in:
Kiyan 2026-01-12 00:48:40 +02:00
parent 171c14bfa8
commit d33f54e5af
10 changed files with 316 additions and 397 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/main/java/com/example/HomeSecurity/Controllers/Events.java Normal file
View File

@ -0,0 +1,14 @@
package com.example.HomeSecurity.Controllers;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class Events {
@GetMapping("/events")
public String eventsPage(){
return "events";
}
}

14
src/main/java/com/example/HomeSecurity/Controllers/Settings.java Normal file
View File

@ -0,0 +1,14 @@
package com.example.HomeSecurity.Controllers;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class Settings {
@GetMapping("/settings")
public String settingsPage(){
return "systemSettings";
}
}

28
src/main/resources/static/css/events.css Normal file
View File

@ -0,0 +1,28 @@
.table tbody td {
padding: 1rem;
border-bottom: 1px solid #f1f5f9;
}
/* Monospace font for logs/time */
.timestamp {
font-family: 'JetBrains Mono', monospace;
font-size: 0.8rem;
color: #94a3b8;
}
/* Severity color strips for table rows */
.severity-strip {
width: 4px;
padding: 0 !important;
}
/* Dark theme overrides for buttons */
.btn-primary {
background-color: #0f172a;
border-color: #0f172a;
}
.btn-primary:hover {
background-color: #334155;
border-color: #334155;
}

18
src/main/resources/static/css/home.css Normal file
View File

@ -0,0 +1,18 @@
/* Vertical strip on the left of sensor cards */
.sensor-card {
position: relative;
overflow: hidden;
}
.status-strip {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
}
/* Specific button variant for Panic/Arm */
.btn-outline-danger {
border-width: 2px;
}

72
src/main/resources/static/css/main.css Normal file
View File

@ -0,0 +1,72 @@
:root {
--bg-color: #f4f6f8;
--hover-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
--navbar-dark: #1e293b;
--transition-speed: 0.25s;
}
body {
background: var(--bg-color);
font-family: 'Segoe UI', Roboto, Arial, sans-serif;
color: #1e293b;
-webkit-font-smoothing: antialiased;
}
/* --- GLOBAL SHARP UI --- */
.card, .btn, .form-control, .form-select, .badge,
.input-group-text, .modal-content, .dropdown-menu {
border-radius: 0 !important;
}
/* --- SHARED CARD STYLE --- */
.card {
border: 1px solid rgba(0, 0, 0, .05);
box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
transition: all var(--transition-speed) ease;
background: #fff;
}
.card:hover {
transform: translateY(-2px);
box-shadow: var(--hover-shadow);
}
/* --- SHARED NAVBAR --- */
.navbar {
background: var(--navbar-dark) !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
}
/* --- SHARED TABLE HEADERS --- */
.table thead th {
font-size: .7rem;
text-transform: uppercase;
color: #64748b;
letter-spacing: 0.5px;
font-weight: 700;
}
/* --- SHARED LIVE STATUS DOT --- */
.live-dot {
width: 8px;
height: 8px;
background: #22c55e;
border-radius: 50% !important;
display: inline-block;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, .7); }
70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
/* --- SHARED BUTTON SIZING --- */
.btn-lg {
font-size: .8rem;
letter-spacing: 1px;
font-weight: 600;
text-transform: uppercase;
padding: 1rem 1.5rem;
}

32
src/main/resources/static/css/systemSettings.css Normal file
View File

@ -0,0 +1,32 @@
/* Label styling for forms */
.form-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 700;
color: #64748b;
margin-bottom: 0.5rem;
}
.input-group-text {
background-color: #f8fafc;
font-size: 0.75rem;
font-weight: 600;
color: #94a3b8;
}
.form-control:focus {
box-shadow: none;
border-color: #0dcaf0;
}
/* Sticky Action Bar at bottom */
.action-bar {
position: sticky;
bottom: 0;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(8px);
border-top: 1px solid rgba(0, 0, 0, .1);
z-index: 1000;
margin-top: 3rem;
}

142
src/main/resources/templates/events.html
View File

@ -8,122 +8,15 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://unpkg.com/htmx.org@1.9.10"></script> <link rel="stylesheet" th:href="@{/css/main.css}">
<link rel="stylesheet" th:href="@{/css/events.css}">
<style>
:root {
--bg-color: #f4f6f8;
--navbar-dark: #1e293b;
--transition-speed: 0.3s;
}
body {
background-color: var(--bg-color);
font-family: 'Inter', system-ui, -apple-system, sans-serif;
color: #1e293b;
}
/* --- GLOBAL SHARP UI --- */
.card, .btn, .form-control, .form-select, .badge, .dropdown-menu {
border-radius: 0 !important;
}
.card {
border: 1px solid rgba(0,0,0,0.05);
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
transition: all var(--transition-speed);
}
.navbar {
background-color: var(--navbar-dark) !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
/* --- LOG TABLE STYLING --- */
.table thead th {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
color: #64748b;
background-color: #fcfcfc;
border-bottom: 1px solid #e2e8f0;
padding: 1rem;
}
.table tbody td {
padding: 1rem;
border-bottom: 1px solid #f1f5f9;
}
.timestamp {
font-family: 'JetBrains Mono', monospace;
font-size: 0.8rem;
color: #94a3b8;
}
/* Severity Strip on the left of the row */
.severity-strip {
width: 4px;
padding: 0 !important;
}
/* Live Dot for Connection */
.live-dot {
height: 8px; width: 8px;
background-color: #22c55e;
border-radius: 50% !important; /* Keep icon round */
display: inline-block;
animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.btn-primary { background-color: #0f172a; border-color: #0f172a; }
.btn-primary:hover { background-color: #334155; border-color: #334155; }
</style>
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-lg navbar-dark mb-4"> <div th:replace="~{fragments/navbar :: navbar}"></div>
<div class="container">
<a class="navbar-brand fw-bold tracking-wide" href="#">
<i class="fas fa-shield-alt me-2 text-info"></i>SECURE<span class="fw-light">HOME</span>
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto ms-lg-4">
<li class="nav-item"><a class="nav-link" th:href="@{/dashboard}">Dashboard</a></li>
<li class="nav-item"><a class="nav-link" th:href="@{/monitoring}">Monitoring</a></li>
<li class="nav-item"><a class="nav-link active" th:href="@{/events}">Events</a></li>
<li class="nav-item"><a class="nav-link" th:href="@{/settings}">Settings</a></li>
</ul>
<div class="d-flex align-items-center text-light gap-4">
<div id="connection-status" hx-get="/api/system/connection-status" hx-trigger="every 30s" class="d-flex align-items-center small">
<span class="text-success d-flex align-items-center">
<span class="live-dot me-2"></span> System Online
</span>
</div>
<div class="dropdown">
<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="userMenu" data-bs-toggle="dropdown">
<div class="bg-secondary d-flex align-items-center justify-content-center me-2" style="width: 32px; height: 32px;">
<span class="small">A</span>
</div>
</a>
<ul class="dropdown-menu dropdown-menu-end shadow border-0 mt-2">
<li><a class="dropdown-item" href="#">Profile</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="container pb-5"> <div class="container pb-5">
@ -152,7 +45,8 @@
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label class="form-label small fw-bold text-muted text-uppercase">Search Description</label> <label class="form-label small fw-bold text-muted text-uppercase">Search Description</label>
<input type="text" class="form-control form-control-sm bg-light border-0" placeholder="e.g. Front Door"> <input type="text" class="form-control form-control-sm bg-light border-0"
placeholder="e.g. Front Door">
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<button type="submit" class="btn btn-primary btn-sm w-100 py-2 fw-bold">APPLY</button> <button type="submit" class="btn btn-primary btn-sm w-100 py-2 fw-bold">APPLY</button>
@ -165,8 +59,10 @@
<div class="card-header bg-white py-3 border-bottom d-flex justify-content-between align-items-center"> <div class="card-header bg-white py-3 border-bottom d-flex justify-content-between align-items-center">
<h6 class="m-0 fw-bold text-uppercase tracking-wider small">Activity Database</h6> <h6 class="m-0 fw-bold text-uppercase tracking-wider small">Activity Database</h6>
<div class="d-flex gap-2"> <div class="d-flex gap-2">
<button class="btn btn-sm btn-outline-secondary border-0"><i class="fas fa-download me-1"></i></button> <button class="btn btn-sm btn-outline-secondary border-0"><i
<button class="btn btn-sm btn-outline-secondary border-0" hx-get="/api/events/refresh" hx-target="#event-tbody"><i class="fas fa-sync-alt"></i></button> class="fas fa-download me-1"></i></button>
<button class="btn btn-sm btn-outline-secondary border-0" hx-get="/api/events/refresh"
hx-target="#event-tbody"><i class="fas fa-sync-alt"></i></button>
</div> </div>
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
@ -186,10 +82,12 @@
<td class="severity-strip bg-danger"></td> <td class="severity-strip bg-danger"></td>
<td class="ps-3 timestamp">2026-01-09 14:22:05</td> <td class="ps-3 timestamp">2026-01-09 14:22:05</td>
<td><span class="text-muted small fw-bold">SENSOR</span></td> <td><span class="text-muted small fw-bold">SENSOR</span></td>
<td class="fw-bold text-dark">Front Door <span class="fw-normal text-muted">— Triggered</span></td> <td class="fw-bold text-dark">Front Door <span class="fw-normal text-muted">—
Triggered</span></td>
<td class="text-muted small">Reed Switch #01</td> <td class="text-muted small">Reed Switch #01</td>
<td class="text-end pe-4"> <td class="text-end pe-4">
<span class="badge bg-danger-subtle text-danger border-0 px-2 py-1 fw-bold">CRITICAL</span> <span
class="badge bg-danger-subtle text-danger border-0 px-2 py-1 fw-bold">CRITICAL</span>
</td> </td>
</tr> </tr>
@ -208,10 +106,12 @@
<td class="severity-strip bg-warning"></td> <td class="severity-strip bg-warning"></td>
<td class="ps-3 timestamp">2026-01-09 13:58:30</td> <td class="ps-3 timestamp">2026-01-09 13:58:30</td>
<td><span class="text-muted small fw-bold">FAULT</span></td> <td><span class="text-muted small fw-bold">FAULT</span></td>
<td class="text-dark">Garage Door <span class="text-muted fw-normal">— Comm Timeout</span></td> <td class="text-dark">Garage Door <span class="text-muted fw-normal">— Comm Timeout</span>
</td>
<td class="text-muted small">Hub Controller</td> <td class="text-muted small">Hub Controller</td>
<td class="text-end pe-4"> <td class="text-end pe-4">
<span class="badge bg-warning-subtle text-warning border-0 px-2 py-1 fw-bold">WARNING</span> <span
class="badge bg-warning-subtle text-warning border-0 px-2 py-1 fw-bold">WARNING</span>
</td> </td>
</tr> </tr>
@ -222,19 +122,23 @@
<td class="text-dark">Self-Diagnostic: <span class="text-success">Passed</span></td> <td class="text-dark">Self-Diagnostic: <span class="text-success">Passed</span></td>
<td class="text-muted small">System Scheduler</td> <td class="text-muted small">System Scheduler</td>
<td class="text-end pe-4"> <td class="text-end pe-4">
<span class="badge bg-success-subtle text-success border-0 px-2 py-1 fw-bold">HEALTHY</span> <span
class="badge bg-success-subtle text-success border-0 px-2 py-1 fw-bold">HEALTHY</span>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="card-footer bg-white py-4 text-center border-top-0"> <div class="card-footer bg-white py-4 text-center border-top-0">
<button class="btn btn-light btn-sm px-4 fw-bold tracking-widest text-muted border">LOAD PREVIOUS 50 EVENTS</button> <button class="btn btn-light btn-sm px-4 fw-bold tracking-widest text-muted border">LOAD PREVIOUS 50
EVENTS</button>
</div> </div>
</div> </div>
</div> </div>
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body> </body>
</html> </html>

23
src/main/resources/templates/fragments/navbar.html Normal file
View File

@ -0,0 +1,23 @@
<nav th:fragment="navbar" class="navbar navbar-expand-lg navbar-dark mb-5">
<div class="container">
<a class="navbar-brand fw-bold tracking-wide" th:href="@{/dashboard}">
<i class="fas fa-shield-alt me-2 text-info"></i>SECURE<span class="fw-light">HOME</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-4">
<li class="nav-item"><a class="nav-link" th:href="@{/dashboard}">Dashboard</a></li>
<li class="nav-item"><a class="nav-link" th:href="@{/events}">Events</a></li>
<li class="nav-item"><a class="nav-link" th:href="@{/settings}">Settings</a></li>
</ul>
<div class="d-flex align-items-center text-light small">
<span class="live-dot me-2"></span>
</div>
</div>
</div>
</nav>

100
src/main/resources/templates/home.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" xmlns:th="http://www.thymeleaf.org">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
@ -9,106 +9,14 @@
<!-- CSS --> <!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/main.css}">
<style> <link rel="stylesheet" th:href="@{/css/home.css}">
:root {
--bg-color: #f4f6f8;
--hover-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
}
body {
background: var(--bg-color);
font-family: 'Segoe UI', Roboto, Arial, sans-serif;
}
.card,
.btn,
.modal-content {
border-radius: 0
}
.card {
border: 1px solid rgba(0, 0, 0, .05);
box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
transition: .25s ease;
}
.card:hover {
transform: translateY(-2px);
box-shadow: var(--hover-shadow);
}
.navbar {
background: #1e293b;
box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
}
.sensor-card {
position: relative;
overflow: hidden
}
.status-strip {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
}
.live-dot {
width: 8px;
height: 8px;
background: #22c55e;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, .7)
}
70% {
box-shadow: 0 0 0 6px rgba(34, 197, 94, 0)
}
100% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0)
}
}
.btn-lg {
font-size: .8rem;
letter-spacing: 1px;
font-weight: 600;
text-transform: uppercase;
padding: 1rem 1.5rem;
}
.table thead th {
font-size: .7rem;
text-transform: uppercase;
color: #64748b;
}
</style>
</head> </head>
<body> <body>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-dark mb-5">
<div class="container">
<span class="navbar-brand fw-bold">
<i class="fas fa-shield-alt me-2 text-info"></i>
SECURE<span class="fw-light">HOME</span>
</span>
<div class="d-flex align-items-center text-light small"> <div th:replace="~{fragments/navbar :: navbar}"></div>
<span class="live-dot me-2"></span>
</div>
</div>
</nav>
<div class="container pb-5"> <div class="container pb-5">

224
src/main/resources/templates/systemSettings.html
View File

@ -1,153 +1,50 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" xmlns:th="http://www.thymeleaf.org">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>SecureHome | System Configuration</title> <title>SecureHome | System Configuration</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono&display=swap" <link rel="stylesheet" th:href="@{/css/main.css}">
rel="stylesheet"> <link rel="stylesheet" th:href="@{/css/systemSettings.css}">
<style>
:root {
--bs-body-bg: #f4f6f8;
--bs-body-font-family: 'Inter', sans-serif;
--accent-dark: #1e293b;
--accent-info: #0dcaf0;
}
/* --- GLOBAL SHARP UI --- */
.card,
.btn,
.form-control,
.form-select,
.badge,
.input-group-text {
border-radius: 0 !important;
border-color: #e2e8f0;
}
.navbar {
background-color: var(--accent-dark) !important;
}
/* --- SECTION STYLING --- */
.settings-container {
max-width: 1000px;
margin: 0 auto;
}
.section-header {
background-color: var(--accent-dark);
color: white;
padding: 0.75rem 1.25rem;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: 700;
margin-bottom: 0;
}
.form-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 700;
color: #64748b;
}
.table thead th {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
color: #64748b;
background-color: #f8fafc;
border-bottom: 2px solid #e2e8f0;
}
/* --- INPUT HIGHLIGHTS --- */
.form-control:focus,
.form-select:focus {
box-shadow: none;
border-color: var(--accent-info);
background-color: #fff;
}
.input-group-text {
background-color: #f8fafc;
font-size: 0.8rem;
font-weight: 600;
color: #94a3b8;
}
/* --- TOGGLE STYLING --- */
.form-check-input:checked {
background-color: var(--accent-info);
border-color: var(--accent-info);
}
/* --- CUSTOM ACTION BAR --- */
.action-bar {
position: sticky;
bottom: 0;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(8px);
border-top: 2px solid var(--accent-dark);
z-index: 1000;
margin-top: 3rem;
}
</style>
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-lg navbar-dark shadow-sm"> <div th:replace="~{fragments/navbar :: navbar}"></div>
<div class="container">
<a class="navbar-brand d-flex align-items-center gap-2" href="#">
<i class="bi bi-shield-lock-fill text-info"></i>
<span class="fw-bold tracking-tight">SECURE<span class="fw-light">HOME</span></span>
</a>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav me-auto">
<li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="#">Cameras</a></li>
<li class="nav-item"><a class="nav-link active" href="#">Settings</a></li>
</ul>
</div>
</div>
</nav>
<div class="container py-5"> <div class="container pb-5">
<div class="settings-container"> <div style="max-width: 1000px; margin: 0 auto;">
<form id="systemSettingsForm"> <form id="systemSettingsForm">
<div class="card border-0 shadow-sm mb-5"> <div class="card border-0 mb-5">
<div class="section-header">General Configuration</div>
<div class="card-body p-4"> <div class="card-body p-4">
<h6 class="text-uppercase text-muted fw-bold mb-4">
<i class="fas fa-cog me-2"></i>General Configuration
</h6>
<div class="row g-4"> <div class="row g-4">
<div class="col-md-4"> <div class="col-md-4">
<label class="form-label">Entry Delay</label> <label class="form-label">Entry Delay</label>
<div class="input-group"> <div class="input-group">
<input type="number" class="form-control bg-light" value="30"> <input type="number" class="form-control" value="30">
<span class="input-group-text">SEC</span> <span class="input-group-text">SEC</span>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label class="form-label">Exit Delay</label> <label class="form-label">Exit Delay</label>
<div class="input-group"> <div class="input-group">
<input type="number" class="form-control bg-light" value="45"> <input type="number" class="form-control" value="45">
<span class="input-group-text">SEC</span> <span class="input-group-text">SEC</span>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label class="form-label">Siren Timeout</label> <label class="form-label">Siren Timeout</label>
<div class="input-group"> <div class="input-group">
<input type="number" class="form-control bg-light" value="180"> <input type="number" class="form-control" value="180">
<span class="input-group-text">SEC</span> <span class="input-group-text">SEC</span>
</div> </div>
</div> </div>
@ -155,59 +52,65 @@
</div> </div>
</div> </div>
<div class="card border-0 shadow-sm mb-5"> <div class="card border-0 mb-5">
<div class="section-header d-flex justify-content-between align-items-center"> <div class="card-body p-4">
<span>User Management</span> <div class="d-flex justify-content-between align-items-center mb-4">
<button type="button" class="btn btn-sm btn-info text-white fw-bold py-0" <h6 class="text-uppercase text-muted fw-bold m-0">
style="font-size: 0.65rem;">+ ADD USER</button> <i class="fas fa-users me-2"></i>User Management
</h6>
<button type="button" class="btn btn-sm btn-dark px-3" style="font-size: 0.7rem;">+ ADD
USER</button>
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover align-middle mb-0"> <table class="table table-hover align-middle mb-0">
<thead> <thead>
<tr> <tr>
<th class="ps-4">Identity</th> <th>Identity</th>
<th>Access Level</th> <th>Access Level</th>
<th class="text-end pe-4">Actions</th> <th class="text-end">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td class="ps-4"> <td>
<div class="d-flex align-items-center gap-3 py-1"> <div class="d-flex align-items-center gap-3">
<div class="bg-dark text-white d-flex align-items-center justify-content-center" <div class="bg-dark text-white d-flex align-items-center justify-content-center"
style="width:32px; height:32px; font-size: 0.8rem;">AD</div> style="width:32px; height:32px; font-size: 0.75rem;">AD</div>
<span class="fw-bold">Administrator</span> <span class="fw-bold text-dark">Administrator</span>
</div> </div>
</td> </td>
<td><span class="badge bg-dark-subtle text-dark px-3 py-2 border">FULL ACCESS</span> <td><span class="badge bg-light text-dark border">FULL ACCESS</span></td>
</td> <td class="text-end">
<td class="text-end pe-4"> <button class="btn btn-sm btn-outline-secondary border-0"><i
<button class="btn btn-sm btn-light border-0"><i class="fas fa-edit"></i></button>
class="bi bi-pencil-square"></i></button> <button class="btn btn-sm btn-outline-danger border-0"><i
<button class="btn btn-sm btn-light border-0 text-danger"><i class="fas fa-trash"></i></button>
class="bi bi-trash"></i></button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
<div class="card border-0 shadow-sm mb-5">
<div class="section-header d-flex justify-content-between align-items-center">
<span>Automation Schedules</span>
<button type="button" class="btn btn-sm btn-info text-white fw-bold py-0"
style="font-size: 0.65rem;">+ ADD SCHEDULE</button>
</div> </div>
<div class="card-body p-0">
<div class="card border-0 mb-5">
<div class="card-body p-4">
<div class="d-flex justify-content-between align-items-center mb-4">
<h6 class="text-uppercase text-muted fw-bold m-0">
<i class="far fa-clock me-2"></i>Automation Schedules
</h6>
<button type="button" class="btn btn-sm btn-dark px-3" style="font-size: 0.7rem;">+ ADD
SCHEDULE</button>
</div>
<div class="list-group list-group-flush"> <div class="list-group list-group-flush">
<div class="list-group-item p-4 d-flex justify-content-between align-items-center border-0"> <div
<div class="d-flex gap-4 align-items-center"> class="list-group-item px-0 py-3 d-flex justify-content-between align-items-center border-0">
<i class="bi bi-moon-stars text-info fs-4"></i> <div class="d-flex gap-3 align-items-center">
<i class="fas fa-moon text-info fs-5 opacity-75"></i>
<div> <div>
<h6 class="mb-0 fw-bold">Weekday Night Arm</h6> <h6 class="mb-0 fw-bold">Weekday Night Arm</h6>
<code class="text-muted" <small class="text-muted font-monospace" style="font-size: 0.7rem;">Type: AWAY |
style="font-size: 0.75rem;">Type: AWAY | Time: 22:00 | Repeat: MON-FRI</code> 22:00 | MON-FRI</small>
</div> </div>
</div> </div>
<div class="form-check form-switch"> <div class="form-check form-switch">
@ -218,34 +121,37 @@
</div> </div>
</div> </div>
<div class="card border-0 shadow-sm mb-5"> <div class="card border-0 mb-5">
<div class="section-header">Notification Triggers</div>
<div class="card-body p-4"> <div class="card-body p-4">
<div class="form-check form-switch mb-3"> <h6 class="text-uppercase text-muted fw-bold mb-4">
<i class="fas fa-bell me-2"></i>Notification Triggers
</h6>
<div class="d-flex flex-column gap-3">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" checked id="chan1"> <input class="form-check-input" type="checkbox" checked id="chan1">
<label class="small fw-medium ms-2" for="chan1">Push Notifications (Mobile)</label> <label class="small fw-bold text-dark ms-2" for="chan1">Push Notifications
(Mobile)</label>
</div> </div>
<div class="form-check form-switch mb-3"> <div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="chan2"> <input class="form-check-input" type="checkbox" id="chan2">
<label class="small fw-medium ms-2" for="chan2">Critical Email Alerts</label> <label class="small fw-bold text-dark ms-2" for="chan2">Critical Email Alerts</label>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="action-bar p-4"> <div class="action-bar p-4">
<div class="container d-flex justify-content-end gap-3 align-items-center"> <div class="d-flex justify-content-end gap-3 align-items-center">
<button type="button" class="btn btn-link text-decoration-none text-muted fw-bold small">DISCARD <button type="button" class="btn btn-link text-decoration-none text-muted fw-bold small">DISCARD
CHANGES</button> CHANGES</button>
<button type="submit" class="btn btn-dark px-5 py-2 fw-bold tracking-wider">SAVE ALL <button type="submit" class="btn btn-dark btn-lg px-5">SAVE ALL SETTINGS</button>
SETTINGS</button>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body> </body>
</html> </html>