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 History Screen</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";13    color: #E8EEF2;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #1f2528;21  }22 23  /* Header */24  .status-gradient {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 120px;30    background: linear-gradient(#0d1120, rgba(13,17,32,0.0));31    z-index: 1;32  }33  .blue-header {34    position: absolute;35    top: 90px;36    left: 0;37    width: 1080px;38    height: 210px;39    background: #3f7df6;40    z-index: 2;41  }42  .header-row {43    display: flex;44    align-items: center;45    padding: 36px 44px;46    gap: 26px;47  }48  .menu-btn {49    width: 70px;50    height: 70px;51    border-radius: 12px;52    display: flex;53    align-items: center;54    justify-content: center;55  }56  .menu-btn svg path { stroke: #EAF0FF; opacity: 0.95; }57  .brand-wrap {58    display: flex;59    flex-direction: column;60    line-height: 1.1;61  }62  .brand {63    font-size: 34px;64    color: rgba(255,255,255,0.75);65    font-weight: 600;66    letter-spacing: 0.2px;67  }68  .location {69    margin-top: 8px;70    font-size: 56px;71    font-weight: 700;72    color: #ffffff;73  }74  .location small {75    font-size: 48px;76    opacity: 0.9;77  }78  .spacer { flex: 1; }79  .premium-btn {80    background: rgba(255,255,255,0.35);81    color: #243856;82    border: none;83    padding: 20px 36px;84    font-weight: 800;85    border-radius: 40px;86    font-size: 34px;87  }88 89  /* Card / Content Area */90  .card {91    position: absolute;92    top: 270px;93    left: 0;94    width: 1080px;95    height: 1930px;96    background: #2b3134;97    border-top-left-radius: 36px;98    border-top-right-radius: 36px;99    z-index: 3;100    box-shadow: 0 -6px 16px rgba(0,0,0,0.25) inset;101  }102  .grabber {103    width: 180px;104    height: 18px;105    background: #80868b;106    opacity: 0.45;107    border-radius: 16px;108    margin: 18px auto 10px auto;109  }110  .date-row {111    display: flex;112    align-items: center;113    padding: 20px 44px 8px 44px;114  }115  .date-title {116    flex: 1;117    text-align: center;118    font-size: 54px;119    font-weight: 800;120    color: #f4f6f8;121    letter-spacing: 0.3px;122  }123  .unit {124    position: absolute;125    right: 44px;126    top: 70px;127    font-size: 36px;128    color: rgba(255,255,255,0.6);129    letter-spacing: 2px;130  }131 132  .tabs {133    display: flex;134    gap: 90px;135    padding: 26px 44px 0 44px;136    align-items: flex-end;137    color: rgba(255,255,255,0.85);138  }139  .tab {140    font-size: 40px;141    padding-bottom: 22px;142    color: rgba(255,255,255,0.8);143  }144  .tab.active {145    color: #ffffff;146    border-bottom: 6px solid #f47b3a;147  }148  .divider {149    height: 2px;150    background: #3a4044;151    margin: 0 0 34px 0;152  }153  .labels {154    display: flex;155    justify-content: flex-end;156    gap: 120px;157    padding: 0 60px 0 60px;158    color: rgba(255,255,255,0.45);159    font-size: 30px;160    letter-spacing: 3px;161  }162 163  .rows {164    margin-top: 36px;165  }166  .row {167    display: grid;168    grid-template-columns: 1fr 220px 220px;169    align-items: center;170    padding: 34px 60px;171    border-bottom: 2px solid #3a4044;172    column-gap: 40px;173  }174  .row:last-child { border-bottom: none; }175  .row .label {176    font-size: 44px;177    color: rgba(255,255,255,0.9);178  }179  .val {180    text-align: right;181    font-size: 72px;182    font-weight: 800;183    color: #ffffff;184  }185  .val.dim { color: #dfe6ea; opacity: 0.9; }186 187  /* Bottom gesture / system bar */188  .bottom-bar {189    position: absolute;190    bottom: 0;191    left: 0;192    width: 1080px;193    height: 140px;194    background: #000000;195    display: flex;196    align-items: center;197    justify-content: center;198  }199  .home-indicator {200    width: 260px;201    height: 14px;202    border-radius: 10px;203    background: #e6e6e6;204    opacity: 0.9;205  }206</style>207</head>208<body>209<div id="render-target">210  <div class="status-gradient"></div>211 212  <div class="blue-header">213    <div class="header-row">214      <div class="menu-btn" aria-label="Menu">215        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">216          <path d="M3 6h18M3 12h18M3 18h18" stroke-width="2.4" stroke-linecap="round"/>217        </svg>218      </div>219      <div class="brand-wrap">220        <div class="brand">AccuWeather</div>221        <div class="location">Orléans, FR <small>▾</small></div>222      </div>223      <div class="spacer"></div>224      <button class="premium-btn">GET PREMIUM+</button>225    </div>226  </div>227 228  <div class="card">229    <div class="grabber"></div>230 231    <div class="date-row">232      <div class="date-title">Saturday, September 23</div>233      <div class="unit">°F</div>234    </div>235 236    <div class="tabs">237      <div class="tab">Day</div>238      <div class="tab">Night</div>239      <div class="tab active">History</div>240    </div>241    <div class="divider"></div>242 243    <div class="labels">244      <div>HIGH</div>245      <div>LOW</div>246    </div>247 248    <div class="rows">249      <div class="row">250        <div class="label">Today's Forecast</div>251        <div class="val">64°</div>252        <div class="val dim">41°</div>253      </div>254      <div class="row">255        <div class="label">Historical Average</div>256        <div class="val">68°</div>257        <div class="val dim">51°</div>258      </div>259      <div class="row">260        <div class="label">Last Year on this Date</div>261        <div class="val">72°</div>262        <div class="val dim">46°</div>263      </div>264    </div>265  </div>266 267  <div class="bottom-bar">268    <div class="home-indicator"></div>269  </div>270</div>271</body>272</html>