push

templates/index.html

@@ -0,0 +1,52 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<header class="text-center mb-3">
+    <h5 class="mb-0">⚡ Sieć Trójfazowa</h5>
+    <span class="badge bg-dark border border-secondary text-muted" id="lastUpdate" style="font-size: 0.7rem;">Ładowanie...</span>
+</header>
+
+<!-- Gauge Section -->
+<div class="gauge-grid mb-1">
+    {% for id, phase in phases.items() %}
+    <div class="gauge-card">
+        <div class="gauge-canvas-container">
+            <canvas id="gauge{{ id }}"></canvas>
+        </div>
+        <div class="gauge-label">{{ phase.label }}</div>
+        <div class="voltage-value" id="value{{ id }}">---</div>
+    </div>
+    {% endfor %}
+</div>
+
+<!-- Informacja o normie napięcia -->
+<div class="text-center mb-3">
+    <span class="badge bg-dark border border-secondary text-muted" style="font-size: 0.65rem; font-weight: 400; opacity: 0.8;">
+        Norma PN-EN 50160: <span class="text-success">230V ±10% (207V - 253V)</span>
+    </span>
+</div>
+
+<!-- Time Selector -->
+<div class="time-btn-container mb-3">
+    {% for key, r in time_ranges.items() %}
+    <button class="btn btn-sm btn-outline-primary time-btn {% if key == default_range %}active{% endif %}" 
+            data-range="{{ key }}" onclick="changeTimeRange('{{ key }}')">
+        {{ key }}
+    </button>
+    {% endfor %}
+</div>
+
+<!-- Main Chart -->
+<div class="main-chart-card mb-3">
+    <canvas id="voltageChart"></canvas>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static', filename='js/monitor.js') }}"></script>
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        initMonitor({{ phases|tojson }}, '{{ default_range }}');
+    });
+</script>
+{% endblock %}