poprawki i optymalizacje kodu

templates/index.html

@@ -42,11 +42,38 @@
             {{ key }}
         </button>
         {% endfor %}
+        <button class="btn btn-sm btn-outline-primary time-btn" 
+                id="customRangeBtn" onclick="openCustomRangePicker()">
+            Własny zakres
+        </button>
+    </div>
+</div>
+
+<!-- Modal dla własnego zakresu -->
+<div id="customRangeModal">
+    <div class="modal-content">
+        <h3>Wybierz własny zakres</h3>
+        
+        <div class="modal-form-group">
+            <label class="modal-label">Data i czas od:</label>
+            <input type="datetime-local" id="customStartDate" class="modal-input">
+        </div>
+        
+        <div class="modal-form-group">
+            <label class="modal-label">Data i czas do:</label>
+            <input type="datetime-local" id="customEndDate" class="modal-input">
+        </div>
+        
+        <div class="modal-buttons">
+            <button onclick="closeCustomRangePicker()" class="modal-btn modal-btn-cancel">Anuluj</button>
+            <button onclick="applyCustomRange()" class="modal-btn modal-btn-apply">Zastosuj</button>
+        </div>
     </div>
 </div>
 
 <!-- Main Chart -->
-<div class="main-chart-card mb-3">
+<div class="main-chart-card" style="position: relative;">
+    <span id="chartRangeDisplay" class="chart-range-badge"></span>
     <canvas id="voltageChart"></canvas>
 </div>
 
@@ -62,8 +89,9 @@
 {% endblock %}
 
 {% block scripts %}
+<script src="{{ static_v('js/gauge.js') }}"></script>
 <script src="{{ static_v('js/monitor.js') }}"></script>
-
+<script src="{{ static_v('js/modal.js') }}"></script>
 
 <script>
     document.addEventListener('DOMContentLoaded', () => {