sickprodigy/Auto-Garden
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

trying to fix up web page

Browse Source
This commit is contained in:
Aaron 2025-11-05 16:45:49 -05:00
parent 121bb31f6e
commit 8889831615
1 changed files with 100 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
Scripts/web_server.py
View File

@ -34,9 +34,9 @@ class TempWebServer:
response = self._get_status_page(sensors, ac_monitor, heater_monitor) response = self._get_status_page(sensors, ac_monitor, heater_monitor)
conn.send('HTTP/1.1 200 OK\r\n') conn.send('HTTP/1.1 200 OK\r\n')
conn.send('Content-Type: text/html\r\n') conn.send('Content-Type: text/html; charset=utf-8\r\n')
conn.send('Connection: close\r\n\r\n') conn.send('Connection: close\r\n\r\n')
conn.sendall(response) conn.sendall(response.encode('utf-8'))
conn.close() conn.close()
except OSError: except OSError:
pass # No connection, continue pass # No connection, continue
@ -64,102 +64,165 @@ class TempWebServer:
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Auto Garden Status</title> <title>🌱 Auto Garden</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="10"> <meta http-equiv="refresh" content="10">
<meta charset="utf-8">
<style> <style>
* {{
margin: 0;
padding: 0;
box-sizing: border-box;
}}
body {{ body {{
font-family: Arial, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 800px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 20px;
background-color: #f5f5f5; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}} }}
h1 {{ h1 {{
color: #2c3e50; color: white;
text-align: center; text-align: center;
font-size: 36px;
margin-bottom: 30px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}} }}
.card {{ .card {{
background: white; background: white;
border-radius: 8px; border-radius: 15px;
padding: 20px; padding: 25px;
margin: 10px 0; margin: 15px 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1); box-shadow: 0 8px 16px rgba(0,0,0,0.2);
transition: transform 0.2s;
}}
.card:hover {{
transform: translateY(-5px);
}}
.temp-card {{
position: relative;
overflow: hidden;
}}
.temp-icon {{
font-size: 64px;
text-align: center;
margin-bottom: 15px;
}} }}
.temp-display {{ .temp-display {{
font-size: 48px; font-size: 56px;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
margin: 20px 0; margin: 15px 0;
font-family: 'Courier New', monospace;
}}
.inside {{
color: #e74c3c;
text-shadow: 2px 2px 4px rgba(231, 76, 60, 0.3);
}}
.outside {{
color: #3498db;
text-shadow: 2px 2px 4px rgba(52, 152, 219, 0.3);
}} }}
.inside {{ color: #e74c3c; }}
.outside {{ color: #3498db; }}
.label {{ .label {{
font-size: 18px; font-size: 20px;
color: #7f8c8d; color: #34495e;
text-align: center; text-align: center;
margin-bottom: 10px; margin-bottom: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}} }}
.status {{ .status {{
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
margin-top: 20px; margin-top: 20px;
flex-wrap: wrap;
gap: 20px;
}} }}
.status-item {{ .status-item {{
text-align: center; text-align: center;
flex: 1;
min-width: 200px;
}}
.status-icon {{
font-size: 48px;
margin-bottom: 10px;
}} }}
.status-indicator {{ .status-indicator {{
font-size: 24px; font-size: 22px;
font-weight: bold; font-weight: bold;
padding: 10px 20px; padding: 15px 30px;
border-radius: 5px; border-radius: 25px;
display: inline-block; display: inline-block;
margin-top: 10px; margin-top: 10px;
text-transform: uppercase;
letter-spacing: 2px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
transition: all 0.3s;
}}
.status-indicator:hover {{
transform: scale(1.05);
}} }}
.on {{ .on {{
background-color: #2ecc71; background: linear-gradient(135deg, #2ecc71, #27ae60);
color: white; color: white;
animation: pulse 2s infinite;
}} }}
.off {{ .off {{
background-color: #95a5a6; background: linear-gradient(135deg, #95a5a6, #7f8c8d);
color: white; color: white;
}} }}
@keyframes pulse {{
0%, 100% {{ opacity: 1; }}
50% {{ opacity: 0.8; }}
}}
.footer {{ .footer {{
text-align: center; text-align: center;
color: #7f8c8d; color: white;
margin-top: 20px; margin-top: 30px;
font-size: 14px; font-size: 14px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}} }}
.targets {{ .targets {{
font-size: 14px; font-size: 15px;
color: #7f8c8d; color: #7f8c8d;
text-align: center; text-align: center;
margin-top: 10px; margin-top: 12px;
font-weight: 500;
}}
.degree {{
font-size: 0.6em;
vertical-align: super;
}} }}
</style> </style>
</head> </head>
<body> <body>
<h1>🌱 Auto Garden Status</h1> <h1>🌱 Auto Garden Dashboard</h1>
<div class="card"> <div class="card temp-card">
<div class="label">Inside Temperature</div> <div class="temp-icon">🏠</div>
<div class="temp-display inside">{inside_temp}°F</div> <div class="label">Indoor Climate</div>
<div class="temp-display inside">{inside_temp}<span class="degree">°F</span></div>
</div> </div>
<div class="card"> <div class="card temp-card">
<div class="label">Outside Temperature</div> <div class="temp-icon">🌤️</div>
<div class="temp-display outside">{outside_temp}°F</div> <div class="label">Outdoor Climate</div>
<div class="temp-display outside">{outside_temp}<span class="degree">°F</span></div>
</div> </div>
<div class="card"> <div class="card">
<div class="status"> <div class="status">
<div class="status-item"> <div class="status-item">
<div class="label">❄️ Air Conditioning</div> <div class="status-icon">❄️</div>
<div class="label">Air Conditioning</div>
<div class="status-indicator {ac_class}">{ac_status}</div> <div class="status-indicator {ac_class}">{ac_status}</div>
<div class="targets">Target: {ac_target}°F ± {ac_swing}°F</div> <div class="targets">Target: {ac_target}°F ± {ac_swing}°F</div>
</div> </div>
<div class="status-item"> <div class="status-item">
<div class="label">🔥 Heater</div> <div class="status-icon">🔥</div>
<div class="label">Heating System</div>
<div class="status-indicator {heater_class}">{heater_status}</div> <div class="status-indicator {heater_class}">{heater_status}</div>
<div class="targets">Target: {heater_target}°F ± {heater_swing}°F</div> <div class="targets">Target: {heater_target}°F ± {heater_swing}°F</div>
</div> </div>
@ -167,8 +230,8 @@ class TempWebServer:
</div> </div>
<div class="footer"> <div class="footer">
Last updated: {time}<br> ⏰ Last updated: {time}<br>
Auto-refresh every 10 seconds 🔄 Auto-refresh every 10 seconds
</div> </div>
</body> </body>
</html> </html>