poprawki i eventy

templates/index.html

@@ -26,24 +26,39 @@
     </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 %}
+<!-- Time & Reset Selector -->
+<div class="d-flex justify-content-center align-items-center gap-2 mb-3 flex-wrap">
+    <div class="d-flex gap-1 align-items-center">
+        {% for key, r in time_ranges.items() %}
+        <button class="btn btn-sm btn-outline-primary time-btn {% if key == default_range %}active{% endif %}" 
+                style="min-width: 45px; height: 31px; display: flex; align-items: center; justify-content: center;"
+                data-range="{{ key }}" onclick="changeTimeRange('{{ key }}')">
+            {{ key }}
+        </button>
+        {% endfor %}
+    </div>
 </div>
 
 <!-- Main Chart -->
 <div class="main-chart-card mb-3">
     <canvas id="voltageChart"></canvas>
 </div>
+
+<div class="events-card mb-3">
+    <div class="d-flex justify-content-between align-items-center mb-2">
+        <h6 class="mb-0">Dziennik zdarzeń (zaniki faz)</h6>
+        <span id="eventRangeLabel" class="text-muted" style="font-size: 0.75rem;">Ładowanie...</span>
+    </div>
+    <div id="eventLogContainer">
+        <div class="no-events">Ładowanie zdarzeń...</div>
+    </div>
+</div>
 {% endblock %}
 
 {% block scripts %}
-<script src="{{ url_for('static', filename='js/monitor.js') }}"></script>
+<script src="{{ static_v('js/monitor.js') }}"></script>
+
+
 <script>
     document.addEventListener('DOMContentLoaded', () => {
         initMonitor({{ phases|tojson }}, '{{ default_range }}');