Files
HAMeter/hameter/web/templates/base.html
2026-03-06 12:25:27 -05:00

61 lines
3.1 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}HAMeter{% endblock %}</title>
<link rel="stylesheet" href="{{ url_for('main.static', filename='style.css') }}">
<link rel="icon" type="image/svg+xml" href="{{ url_for('main.static', filename='favicon.svg') }}">
</head>
<body>
<div class="app-layout">
<nav class="sidebar" id="sidebar">
<div class="sidebar-header">
<h1 class="logo">HAMeter</h1>
<div class="status-indicator" id="pipeline-status">
<span class="status-dot"></span>
<span class="status-text">Loading...</span>
</div>
</div>
<ul class="nav-links">
<li><a href="/dashboard" class="nav-link {% if request.path == '/dashboard' %}active{% endif %}"><span class="nav-icon">&#9671;</span> Dashboard</a></li>
<li><a href="/discovery" class="nav-link {% if request.path == '/discovery' %}active{% endif %}"><span class="nav-icon">&#9678;</span> Discovery</a></li>
<li><a href="/calibration" class="nav-link {% if request.path == '/calibration' %}active{% endif %}"><span class="nav-icon">&#9878;</span> Calibration</a></li>
<li class="nav-separator">Configuration</li>
<li><a href="/config/mqtt" class="nav-link {% if '/config/mqtt' in request.path %}active{% endif %}"><span class="nav-icon">&#8644;</span> MQTT</a></li>
<li><a href="/config/meters" class="nav-link {% if '/config/meters' in request.path %}active{% endif %}"><span class="nav-icon">&#9681;</span> Meters</a></li>
<li><a href="/config/general" class="nav-link {% if '/config/general' in request.path %}active{% endif %}"><span class="nav-icon">&#9881;</span> General</a></li>
<li class="nav-separator">System</li>
<li><a href="/logs" class="nav-link {% if request.path == '/logs' %}active{% endif %}"><span class="nav-icon">&#9776;</span> Logs</a></li>
</ul>
</nav>
<main class="main-content">
<header class="top-bar">
<button class="hamburger" id="hamburger" onclick="toggleSidebar()">&#9776;</button>
<h2 class="page-title">{% block page_title %}{% endblock %}</h2>
<div class="top-bar-actions">
{% block top_actions %}{% endblock %}
</div>
</header>
<div class="content-area">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="flash flash-{{ category }}">{{ message }}</div>
{% endfor %}
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
</div>
</main>
</div>
<div class="toast-container" id="toast-container"></div>
<script src="{{ url_for('main.static', filename='app.js') }}"></script>
</body>
</html>