poprawki i optymalizacje kodu

templates/base.html

@@ -16,10 +16,15 @@
             </small>
         </footer>
     </div>
+    <!-- Chart.js -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/date-fns@2.29.3/locale/pl/index.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom"></script>
+
+    <!-- Socket.IO -->
     <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/dist/chartjs-plugin-zoom.min.js"></script>
+
     {% block scripts %}{% endblock %}
 </body>
 </html>

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', () => {