GD-ML/AndroidCode

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; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #1886F6;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #FFFFFF;17  }18 19  /* Status bar */20  .status-bar {21    height: 120px;22    padding: 0 40px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #EAF3FF;27    font-weight: 600;28  }29  .status-left {30    display: flex;31    align-items: center;32    gap: 20px;33    font-size: 42px;34    letter-spacing: 0.5px;35  }36  .status-right {37    display: flex;38    align-items: center;39    gap: 26px;40  }41  .icon {42    display: inline-block;43  }44  .icon svg { width: 44px; height: 44px; }45  .icon-small svg { width: 40px; height: 40px; }46 47  /* Header */48  .header {49    position: relative;50    height: 120px;51    display: flex;52    align-items: center;53  }54  .back-btn {55    position: absolute;56    left: 32px;57    width: 60px;58    height: 60px;59    display: flex;60    align-items: center;61    justify-content: center;62  }63  .title {64    width: 100%;65    text-align: center;66    font-size: 48px;67    font-weight: 700;68    color: #FFFFFF;69  }70 71  .divider {72    height: 2px;73    background: rgba(255,255,255,0.35);74    margin: 0 0 10px 0;75  }76 77  /* List rows */78  .list {79    padding: 0 36px;80  }81  .row {82    display: flex;83    align-items: center;84    justify-content: space-between;85    padding: 26px 10px;86    border-bottom: 2px solid rgba(255,255,255,0.25);87  }88  .label {89    font-size: 36px;90    font-weight: 500;91    color: #EAF3FF;92  }93  .value {94    font-size: 42px;95    font-weight: 700;96    color: #FFFFFF;97  }98 99  /* Larger gap before History */100  .gap {101    height: 140px;102    border-top: 2px solid rgba(255,255,255,0.25);103    margin-top: 10px;104  }105 106  /* History section */107  .section-title {108    text-align: center;109    font-size: 48px;110    font-weight: 700;111    margin: 80px 0 40px 0;112  }113  .history-head {114    position: relative;115    padding: 0 36px;116    height: 40px;117    margin-bottom: 10px;118  }119  .col-label {120    position: absolute;121    right: 36px;122    top: 0;123    display: flex;124    gap: 140px;125    font-size: 26px;126    letter-spacing: 1px;127    color: #EAF3FF;128    font-weight: 700;129  }130  .history-row {131    padding: 26px 46px 26px 46px;132    display: grid;133    grid-template-columns: 1fr 150px 150px;134    align-items: center;135    border-bottom: 2px solid rgba(255,255,255,0.25);136  }137  .history-row .h-label {138    font-size: 36px;139    font-weight: 500;140    color: #EAF3FF;141  }142  .history-row .h-val {143    font-size: 42px;144    font-weight: 700;145    text-align: right;146    color: #FFFFFF;147  }148 149  /* Bottom system bar */150  .system-bar {151    position: absolute;152    left: 0;153    bottom: 0;154    width: 100%;155    height: 150px;156    background: #000000;157  }158  .home-pill {159    position: absolute;160    left: 50%;161    bottom: 42px;162    transform: translateX(-50%);163    width: 360px;164    height: 14px;165    background: #E5E5E5;166    border-radius: 8px;167  }168</style>169</head>170<body>171<div id="render-target">172 173  <!-- Status bar -->174  <div class="status-bar">175    <div class="status-left">176      <div>9:54</div>177      <span class="icon">178        <svg viewBox="0 0 24 24">179          <circle cx="12" cy="12" r="4.5" fill="none" stroke="#FFFFFF" stroke-width="2"></circle>180          <line x1="12" y1="1" x2="12" y2="5" stroke="#FFFFFF" stroke-width="2"></line>181          <line x1="12" y1="19" x2="12" y2="23" stroke="#FFFFFF" stroke-width="2"></line>182          <line x1="1" y1="12" x2="5" y2="12" stroke="#FFFFFF" stroke-width="2"></line>183          <line x1="19" y1="12" x2="23" y2="12" stroke="#FFFFFF" stroke-width="2"></line>184          <line x1="4" y1="4" x2="7" y2="7" stroke="#FFFFFF" stroke-width="2"></line>185          <line x1="17" y1="17" x2="20" y2="20" stroke="#FFFFFF" stroke-width="2"></line>186          <line x1="17" y1="7" x2="20" y2="4" stroke="#FFFFFF" stroke-width="2"></line>187          <line x1="4" y1="20" x2="7" y2="17" stroke="#FFFFFF" stroke-width="2"></line>188        </svg>189      </span>190    </div>191    <div class="status-right">192      <span class="icon-small">193        <!-- Simple Wi-Fi icon -->194        <svg viewBox="0 0 24 24">195          <path d="M2 8c5-4 15-4 20 0" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>196          <path d="M5 12c4-3 10-3 14 0" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>197          <path d="M8 16c2-2 6-2 8 0" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>198          <circle cx="12" cy="19" r="1.5" fill="#FFFFFF"></circle>199        </svg>200      </span>201      <span class="icon-small">202        <!-- Battery icon -->203        <svg viewBox="0 0 28 24">204          <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="none" stroke="#FFFFFF" stroke-width="2"></rect>205          <rect x="4" y="8" width="12" height="8" fill="#FFFFFF"></rect>206          <rect x="22" y="10" width="4" height="4" rx="1" fill="#FFFFFF"></rect>207        </svg>208      </span>209    </div>210  </div>211 212  <!-- Header -->213  <div class="header">214    <div class="back-btn">215      <svg viewBox="0 0 24 24">216        <path d="M15 4 L7 12 L15 20" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>217      </svg>218    </div>219    <div class="title">Current Conditions</div>220  </div>221 222  <div class="divider"></div>223 224  <!-- Current conditions list -->225  <div class="list">226    <div class="row">227      <div class="label">Max Wind Gusts</div>228      <div class="value">14 mph</div>229    </div>230    <div class="row">231      <div class="label">Humidity</div>232      <div class="value">64%</div>233    </div>234    <div class="row">235      <div class="label">Indoor Humidity</div>236      <div class="value">64% (Slightly Humid)</div>237    </div>238    <div class="row">239      <div class="label">Dew Point</div>240      <div class="value">57°</div>241    </div>242    <div class="row">243      <div class="label">Pressure</div>244      <div class="value">30.09"</div>245    </div>246    <div class="row">247      <div class="label">Cloud Cover</div>248      <div class="value">31%</div>249    </div>250    <div class="row">251      <div class="label">Visibility</div>252      <div class="value">15 mi</div>253    </div>254    <div class="row">255      <div class="label">Cloud Ceiling</div>256      <div class="value">None</div>257    </div>258  </div>259 260  <div class="gap"></div>261 262  <!-- History section -->263  <div class="section-title">History</div>264  <div class="history-head">265    <div class="col-label">266      <div>HIGH</div>267      <div>LOW</div>268    </div>269  </div>270 271  <div class="history-row">272    <div class="h-label">Today's Forecast</div>273    <div class="h-val">71°</div>274    <div class="h-val">53°</div>275  </div>276  <div class="history-row">277    <div class="h-label">Historical Average</div>278    <div class="h-val">65°</div>279    <div class="h-val">48°</div>280  </div>281  <div class="history-row">282    <div class="h-label">Last Year on this Date</div>283    <div class="h-val">54°</div>284    <div class="h-val">49°</div>285  </div>286 287  <!-- Bottom system bar -->288  <div class="system-bar">289    <div class="home-pill"></div>290  </div>291</div>292</body>293</html>