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

Enhance web interface layout by increasing max-width and implementing a responsive grid for temperature cards

Browse Source
This commit is contained in:
Aaron 2025-11-05 16:52:04 -05:00
parent 25e48407c2
commit a4329da607
1 changed files with 28 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
Scripts/web_server.py
View File

@ -76,7 +76,7 @@ class TempWebServer:
}} }}
body {{ body {{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 900px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
@ -89,17 +89,25 @@ class TempWebServer:
margin-bottom: 30px; margin-bottom: 30px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2); text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}} }}
.temp-grid {{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 20px;
}}
.card {{ .card {{
background: white; background: white;
border-radius: 15px; border-radius: 15px;
padding: 25px; padding: 25px;
margin: 15px 0;
box-shadow: 0 8px 16px rgba(0,0,0,0.2); box-shadow: 0 8px 16px rgba(0,0,0,0.2);
transition: transform 0.2s; transition: transform 0.2s;
}} }}
.card:hover {{ .card:hover {{
transform: translateY(-5px); transform: translateY(-5px);
}} }}
.card.full-width {{
margin: 15px 0;
}}
.temp-card {{ .temp-card {{
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -195,24 +203,31 @@ class TempWebServer:
font-size: 0.6em; font-size: 0.6em;
vertical-align: super; vertical-align: super;
}} }}
@media (max-width: 768px) {{
.temp-grid {{
grid-template-columns: 1fr;
}}
}}
</style> </style>
</head> </head>
<body> <body>
<h1>🌱 Auto Garden Dashboard</h1> <h1>🌱 Auto Garden Dashboard</h1>
<div class="card temp-card"> <div class="temp-grid">
<div class="temp-icon">🏠</div> <div class="card temp-card">
<div class="label">Indoor Climate</div> <div class="temp-icon">🏠</div>
<div class="temp-display inside">{inside_temp}<span class="degree">°F</span></div> <div class="label">Indoor Climate</div>
<div class="temp-display inside">{inside_temp}<span class="degree">°F</span></div>
</div>
<div class="card temp-card">
<div class="temp-icon">🌤️</div>
<div class="label">Outdoor Climate</div>
<div class="temp-display outside">{outside_temp}<span class="degree">°F</span></div>
</div>
</div> </div>
<div class="card temp-card"> <div class="card full-width">
<div class="temp-icon">🌤️</div>
<div class="label">Outdoor Climate</div>
<div class="temp-display outside">{outside_temp}<span class="degree">°F</span></div>
</div>
<div class="card">
<div class="status"> <div class="status">
<div class="status-item"> <div class="status-item">
<div class="status-icon">❄️</div> <div class="status-icon">❄️</div>