Misure E E Dashboard - Copy this Html, Bootstrap Component to your project
Give me another HTML page named LettureGAS with tha same desing for this code: <!DOCTYPE html> <html lang="it"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Letture GAS</title> <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css"> <style> body { font-family: Arial, sans-serif; background-color: #fffefb; color: #333; padding: 10px; } .container { background-color: #e0f7ff; border: 1px solid #33b5e5; padding: 10px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); overflow-x: auto; } table { width: 100%; border-collapse: collapse; table-layout: auto; } th, td { padding: 5px; border: 1px solid #ddd; white-space: nowrap; } input[type="text"], input[type="date"], select { padding: 8px; margin: 5px 0; display: inline-block; border: 1px solid #33b5e5; border-radius: 4px; box-sizing: border-box; width: 200px; height: 30px; } .button { background-color: #33b5e5; color: black; border: none; padding: 8px 15px; margin: 5px; text-align: center; cursor: pointer; border-radius: 4px; } .button:hover { background-color: #0099cc; } .btn-home { background-color: #33b5e5; color: black; padding: 8px 15px; border: none; text-decoration: none; border-radius: 4px; margin-bottom: 10px; display: inline-block; } .btn-home:hover { background-color: #0099cc; } .dataTables_length label { display: flex; gap: 20px; align-items: center; } </style> </head> <body> <div class="container"> <a href="/" class="btn-home">🏠 Home</a> <h1>Letture GAS</h1> <form method="get" id="filterForm"> <div style="display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;"> <!-- Riga 1 --> <div> <label for="cod_pdr">cod_pdr</label><br> <input type="text" name="cod_pdr" placeholder="cod_pdr" value="{{ filtro.cod_pdr }}"> </div> <div style="flex-grow: 3;"> <label for="Flusso">Flusso</label><br> <input type="text" name="Flusso" placeholder="Flusso" value="{{ filtro.Flusso }}" style="width: 100%;"> </div> <!-- Riga 2 --> <div> <label for="cod_flusso">cod_flusso</label><br> <input type="text" name="cod_flusso" placeholder="cod_flusso" value="{{ filtro.cod_flusso }}"> </div> <div> <label for="piva_distr">piva_distr</label><br> <input type="text" name="piva_distr" placeholder="piva_distr" value="{{ filtro.piva_distr }}"> </div> <div> <label for="tipo_lettura">tipo_lettura</label><br> <input type="text" name="tipo_lettura" placeholder="tipo_lettura" value="{{ filtro.tipo_lettura }}"> </div> <div> <label for="matr_mis">matr_mis</label><br> <input type="text" name="matr_mis" placeholder="matr_mis" value="{{ filtro.matr_mis }}"> </div> <div> <label for="matr_conv">matr_conv</label><br> <input type="text" name="matr_conv" placeholder="matr_conv" value="{{ filtro.matr_conv }}"> </div> <!-- Riga 3 --> <div> <label for="DataLettura_da">Data Lettura da</label><br> <input type="date" name="DataLettura_da" value="{{ filtro.DataLettura_da }}"> </div> <div> <label for="DataLettura_a">a</label><br> <input type="date" name="DataLettura_a" value="{{ filtro.DataLettura_a }}"> </div> <div> <label for="DataFlusso_da">Data Flusso da</label><br> <input type="date" name="DataFlusso_da" value="{{ filtro.DataFlusso_da }}"> </div> <div> <label for="DataFlusso_a">a</label><br> <input type="date" name="DataFlusso_a" value="{{ filtro.DataFlusso_a }}"> </div> <!-- Limite risultati --> <div> <label for="limite">Limite risultati</label><br> <select name="limite"> <option value="1000" {% if request.GET.limite == '1000' %}selected{% endif %}>1.000</option> <option value="5000" {% if request.GET.limite == '5000' or not request.GET.limite %}selected{% endif %}>5.000</option> <option value="10000" {% if request.GET.limite == '10000' %}selected{% endif %}>10.000</option> <option value="25000" {% if request.GET.limite == '25000' %}selected{% endif %}>25.000</option> <option value="50000" {% if request.GET.limite == '50000' %}selected{% endif %}>50.000</option> <option value="100000" {% if request.GET.limite == '100000' %}selected{% endif %}>100.000</option> <option value="1000000" {% if request.GET.limite == '1000000' %}selected{% endif %}>1.000.000</option> </select> </div> <!-- Pulsanti --> <div> <button type="submit" class="button">Filtra</button> <button type="button" class="button" id="resetFilters">Reset filtri</button> {% if risultati %} <a href="{% url 'esporta_csv' %}" class="button">📄 Scarica CSV</a> {% endif %} </div> </div> </form> {% if risultati %} <p><strong>{{ risultati|length }} risultati trovati.</strong></p> <div style="overflow-x:auto;"> <table id="lettureTable" class="display"> <thead> <tr> <th>cod_pdr</th> <th>cod_flusso</th> <th>DataLettura</th> <th>let_tot_prel</th> <th>let_tot_conv</th> <th>tipo_lettura</th> <th>esito_val</th> <th>coeff_corr</th> <th>matr_mis</th> <th>matr_conv</th> <th>CodPrat_SII</th> <th>tipo_rettifica</th> <th>vol_ric</th> <th>piva_distr</th> <th>Flusso</th> <th>DataFlusso</th> <th>DataCaricamento</th> </tr> </thead> <tbody> {% for riga in risultati %} <tr> <td>{{ riga.cod_pdr }}</td> <td>{{ riga.cod_flusso }}</td> <td>{{ riga.DataLettura }}</td> <td>{{ riga.let_tot_prel }}</td> <td>{{ riga.let_tot_conv }}</td> <td>{{ riga.tipo_lettura }}</td> <td>{{ riga.esito_val }}</td> <td>{{ riga.coeff_corr }}</td> <td>{{ riga.matr_mis }}</td> <td>{{ riga.matr_conv }}</td> <td>{{ riga.CodPrat_SII }}</td> <td>{{ riga.tipo_rettifica }}</td> <td>{{ riga.vol_ric }}</td> <td>{{ riga.piva_distr }}</td> <td>{{ riga.Flusso }}</td> <td>{{ riga.DataFlusso }}</td> <td>{{ riga.DataCaricamento }}</td> </tr> {% endfor %} </tbody> </table> </div> {% else %} <p>Nessun risultato trovato.</p> {% endif %} </div> <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script> <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function () { new DataTable('#lettureTable', { pageLength: 50, lengthMenu: [ [25, 50, 100, -1], [25, 50, 100, "Tutti"] ] }); document.getElementById('resetFilters').addEventListener('click', function () { const form = document.getElementById('filterForm'); Array.from(form.elements).forEach(el => { if (el.tagName === 'INPUT' || el.tagName === 'SELECT') { if (el.type === 'text' || el.type === 'date') { el.value = ''; } if (el.name === 'limite') { el.value = '5000'; } } }); window.location.href = window.location.pathname; }); }); </script> </body> </html>