/ app.py
app.py
1 import dash 2 from dash import html, dcc, Output, Input 3 from layouts import create_layout 4 from callbacks import register_callbacks 5 from data_loader import load_plot 6 import logging 7 8 # Set up logging 9 logging.basicConfig(level=logging.INFO) 10 logger = logging.getLogger(__name__) 11 12 # Initialize the app with a modern theme 13 app = dash.Dash( 14 __name__, 15 external_stylesheets=[ 16 "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" 17 ] 18 ) 19 server = app.server 20 21 # Configure layout 22 app.layout = create_layout() 23 24 # Register callbacks 25 register_callbacks(app) 26 27 # Add custom CSS styles 28 app.index_string = ''' 29 <!DOCTYPE html> 30 <html> 31 <head> 32 <title>Fäbu's App</title> 33 <meta charset="UTF-8"> 34 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 35 <style> 36 :root { 37 --primary-color: #4361ee; 38 --secondary-color: #3a0ca0; 39 --accent-color: #f72585; 40 --light-color: #f8f9fa; 41 --dark-color: #212529; 42 --success-color: #4cc9f0; 43 --warning-color: #f7931e; 44 --danger-color: #e63946; 45 --border-radius: 8px; 46 --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 47 --transition: all 0.3s ease; 48 } 49 50 * { 51 margin: 0; 52 padding: 0; 53 box-sizing: border-box; 54 } 55 56 body { 57 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 58 background-color: #f5f7fb; 59 color: #333; 60 line-height: 1.6; 61 } 62 63 .app-header { 64 background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); 65 color: white; 66 padding: 1.5rem 2rem; 67 border-radius: 0 0 var(--border-radius) var(--border-radius); 68 box-shadow: var(--box-shadow); 69 margin-bottom: 1.5rem; 70 text-align: center; 71 } 72 73 .app-header h1 { 74 font-weight: 700; 75 font-size: 2.2rem; 76 letter-spacing: -0.5px; 77 } 78 79 .measurement-card { 80 background: white; 81 border-radius: var(--border-radius); 82 box-shadow: var(--box-shadow); 83 padding: 1.5rem; 84 margin-bottom: 1.5rem; 85 transition: var(--transition); 86 border: 1px solid rgba(0, 0, 0, 0.05); 87 } 88 89 .measurement-card:hover { 90 transform: translateY(-3px); 91 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); 92 } 93 94 .river-header { 95 color: var(--primary-color); 96 margin-bottom: 1.2rem; 97 font-weight: 600; 98 font-size: 1.4rem; 99 text-align: center; 100 } 101 102 .measurement-grid { 103 display: flex; 104 gap: 1.5rem; 105 flex-wrap: wrap; 106 margin-bottom: 1.5rem; 107 } 108 109 .measurement-item { 110 display: flex; 111 align-items: center; 112 padding: 0.7rem 0; 113 border-bottom: 1px solid rgba(0, 0, 0, 0.05); 114 } 115 116 .measurement-item:last-child { 117 border-bottom: none; 118 } 119 120 .measurement-label { 121 font-weight: 600; 122 color: var(--dark-color); 123 width: 130px; 124 margin-right: 1rem; 125 } 126 127 .measurement-value { 128 font-weight: 700; 129 font-size: 1.1rem; 130 color: var(--primary-color); 131 } 132 133 .river-section { 134 background: white; 135 border-radius: var(--border-radius); 136 box-shadow: var(--box-shadow); 137 padding: 1.5rem; 138 margin-bottom: 1.5rem; 139 border: 1px solid rgba(0, 0, 0, 0.05); 140 } 141 142 .river-title { 143 color: var(--secondary-color); 144 margin-bottom: 1.2rem; 145 font-weight: 600; 146 font-size: 1.6rem; 147 text-align: center; 148 } 149 150 .graph-container { 151 margin-bottom: 1.5rem; 152 border-radius: var(--border-radius); 153 overflow: hidden; 154 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); 155 } 156 157 .graph-container:last-child { 158 margin-bottom: 0; 159 } 160 161 .last-updated { 162 text-align: right; 163 font-size: 0.9rem; 164 color: #666; 165 font-style: italic; 166 padding-top: 0.5rem; 167 border-top: 1px solid rgba(0, 0, 0, 0.05); 168 } 169 170 .dashboard-title { 171 color: var(--secondary-color); 172 margin-bottom: 1rem; 173 font-weight: 600; 174 font-size: 1.5rem; 175 text-align: center; 176 } 177 178 .refresh-interval { 179 display: none; 180 } 181 182 /* Responsive adjustments */ 183 @media (max-width: 768px) { 184 .app-header h1 { 185 font-size: 1.8rem; 186 } 187 188 .measurement-grid { 189 flex-direction: column; 190 } 191 192 .measurement-item { 193 flex-direction: column; 194 align-items: flex-start; 195 } 196 197 .measurement-label { 198 width: 100%; 199 margin-bottom: 0.3rem; 200 } 201 202 .measurement-value { 203 font-size: 1.2rem; 204 } 205 } 206 </style> 207 </head> 208 <body> 209 {%app_entry%} 210 <footer> 211 {%config%} 212 {%scripts%} 213 {%renderer%} 214 </footer> 215 </body> 216 </html> 217 ''' 218 219 if __name__ == "__main__": 220 app.run(debug=True)