GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Weather - Current Conditions</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", "Segoe UI", Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #4E7BC7;15 color: #EAF2FF;16 }17 18 /* Status bar simulation */19 .statusbar {20 height: 120px;21 padding: 0 40px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #FFFFFF;26 font-weight: 600;27 }28 .status-left { display: flex; align-items: center; gap: 24px; }29 .status-icons { display: flex; align-items: center; gap: 22px; }30 .dot {31 width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.8);32 }33 .icon {34 width: 36px; height: 36px; fill: none; stroke: #FFFFFF; stroke-width: 2.5;35 }36 .icon-fill { fill: #FFFFFF; stroke: none; }37 38 /* Toolbar */39 .toolbar {40 height: 120px;41 display: flex;42 align-items: center;43 position: relative;44 padding: 0 28px;45 }46 .back-btn {47 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;48 }49 .title {50 position: absolute;51 left: 0; right: 0;52 text-align: center;53 color: #FFFFFF;54 font-size: 56px;55 font-weight: 700;56 letter-spacing: 0.5px;57 }58 .divider {59 height: 2px; background: rgba(255,255,255,0.25);60 margin: 10px 0 0 0;61 }62 63 /* Rows */64 .list {65 margin-top: 8px;66 }67 .row {68 display: flex;69 align-items: center;70 justify-content: space-between;71 padding: 32px 54px;72 border-bottom: 2px solid rgba(255,255,255,0.22);73 font-size: 44px;74 letter-spacing: 0.2px;75 }76 .row .label { color: #E0EDFF; }77 .row .value { color: #FFFFFF; font-weight: 700; font-size: 56px; }78 79 /* History section */80 .history {81 margin-top: 80px;82 }83 .history-title {84 text-align: center;85 font-size: 64px;86 font-weight: 700;87 color: #FFFFFF;88 margin: 140px 0 40px 0;89 }90 .history-head {91 display: flex;92 justify-content: flex-end;93 padding: 0 54px;94 gap: 140px;95 color: #CFE0FF;96 font-size: 34px;97 letter-spacing: 1px;98 }99 .hrow {100 display: grid;101 grid-template-columns: 1fr 160px 160px;102 align-items: center;103 padding: 28px 54px;104 border-bottom: 2px solid rgba(255,255,255,0.22);105 font-size: 44px;106 }107 .hrow .hi, .hrow .lo {108 text-align: right;109 color: #FFFFFF;110 font-weight: 700;111 font-size: 56px;112 }113 .hrow .label { color: #E0EDFF; }114 115 /* Bottom navigation area */116 .bottom-area {117 position: absolute;118 bottom: 0;119 left: 0; right: 0;120 height: 180px;121 background: #000000;122 display: flex;123 align-items: center;124 justify-content: center;125 }126 .home-pill {127 width: 240px; height: 16px; border-radius: 12px; background: #EAEAEA;128 }129</style>130</head>131<body>132<div id="render-target">133 134 <!-- Simulated Status Bar -->135 <div class="statusbar">136 <div class="status-left">137 <div style="font-size:48px;">10:44</div>138 <div class="status-icons">139 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><text x="12" y="16" font-size="10" text-anchor="middle" fill="#FFFFFF">i</text></svg>140 <svg class="icon" viewBox="0 0 24 24"><path d="M5 12l7-7 7 7M5 12l7 7 7-7" stroke-linecap="round" stroke-linejoin="round"></path></svg>141 <svg class="icon-fill" viewBox="0 0 24 24"><rect x="5" y="4" width="14" height="16" rx="3"></rect><rect x="9" y="8" width="6" height="8" fill="#4E7BC7"></rect></svg>142 <div class="dot"></div>143 </div>144 </div>145 <div class="status-icons">146 <svg class="icon" viewBox="0 0 24 24"><path d="M2 18c3-3 6-4 10-4s7 1 10 4" stroke-linecap="round"></path><circle cx="12" cy="10" r="3"></circle></svg>147 <svg class="icon" viewBox="0 0 24 24"><path d="M3 18h18M6 14h12M9 10h6M12 6h0" stroke-linecap="round"></path></svg>148 <svg class="icon" viewBox="0 0 24 24"><rect x="2" y="6" width="20" height="12" rx="3"></rect><rect x="19" y="9" width="2" height="6"></rect></svg>149 </div>150 </div>151 152 <!-- Toolbar -->153 <div class="toolbar">154 <div class="back-btn">155 <svg width="44" height="44" viewBox="0 0 24 24">156 <path d="M15 6l-6 6 6 6" fill="none" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>157 </svg>158 </div>159 <div class="title">Current Conditions</div>160 </div>161 <div class="divider"></div>162 163 <!-- Current Conditions List -->164 <div class="list">165 <div class="row">166 <div class="label">Max Wind Gusts</div>167 <div class="value">32 mph</div>168 </div>169 <div class="row">170 <div class="label">Humidity</div>171 <div class="value">79%</div>172 </div>173 <div class="row">174 <div class="label">Indoor Humidity</div>175 <div class="value">60% (Ideal Humidity)</div>176 </div>177 <div class="row">178 <div class="label">Dew Point</div>179 <div class="value">54°</div>180 </div>181 <div class="row">182 <div class="label">Pressure</div>183 <div class="value">29.97"</div>184 </div>185 <div class="row">186 <div class="label">Cloud Cover</div>187 <div class="value">76%</div>188 </div>189 <div class="row">190 <div class="label">Visibility</div>191 <div class="value">15 mi</div>192 </div>193 <div class="row">194 <div class="label">Cloud Ceiling</div>195 <div class="value">20,000 ft</div>196 </div>197 </div>198 199 <!-- History Section -->200 <div class="history">201 <div class="history-title">History</div>202 <div class="history-head">203 <span>HIGH</span>204 <span>LOW</span>205 </div>206 <div class="hrow">207 <div class="label">Today's Forecast</div>208 <div class="hi">64°</div>209 <div class="lo">51°</div>210 </div>211 <div class="hrow">212 <div class="label">Historical Average</div>213 <div class="hi">61°</div>214 <div class="lo">49°</div>215 </div>216 <div class="hrow">217 <div class="label">Last Year on this Date</div>218 <div class="hi">60°</div>219 <div class="lo">53°</div>220 </div>221 </div>222 223 <!-- Bottom navigation placeholder -->224 <div class="bottom-area">225 <div class="home-pill"></div>226 </div>227 228</div>229</body>230</html>