<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width; initial-scale=1"> <meta charset="utf-8"> <style> body { font-family: sans-serif; } th, td { text-align: left; vertical-align: baseline; } main { display: flex; flex-wrap: wrap; gap: 2rem; align-items: end; } .widget { border: 1px solid #CCC; } .value { font-size: 3rem; } .unit { display: block; font-size: 1.5rem; } .gauge { display: flex; gap: 1rem; align-items: end; border: 1px solid #CCC; padding: 0.5rem; } .gauge-container { width: 20px; border-radius: 4px; background-color: #CCC; position: relative; } .gauge-indicator { width: 20px; border-radius: 4px; position: absolute; bottom: 0; } .timeseries { display: flex; gap: 1rem; align-items: end; border: 1px solid #CCC; padding: 0.5rem; } .extra { font-style: italic; } </style> </head> <body> <h1>{{ dashboard.title }}</h1> <p class="description"> {{ dashboard.description }} </p> <main> {% for widget in dashboard.widgets %} {{ widget.as_html() }} {% endfor %} </main> </body> </html>