Elegant Layout Copy this Bootstrap Gas Reading Dashboardto Your Project
give me an HTML page with a Modern Elegant Layout style for this HTML process I have: <!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> <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>
