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 UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #4979d6;15  }16 17  /* Status bar */18  .status {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    color: #fff;25    display: flex;26    align-items: center;27    padding: 0 40px;28    box-sizing: border-box;29    font-weight: 600;30  }31  .status .time { font-size: 34px; letter-spacing: 1px; }32  .status .icons {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 28px;37  }38  /* simple icons */39  .icon-wifi, .icon-battery {40    width: 42px; height: 42px;41  }42 43  /* Header area (blue) */44  .header {45    position: absolute;46    top: 120px;47    left: 0;48    width: 100%;49    height: 260px;50    color: #e7efff;51    padding: 0 48px;52    box-sizing: border-box;53  }54  .hamburger {55    position: absolute;56    left: 32px;57    top: 40px;58    width: 72px;59    height: 72px;60    display: flex;61    align-items: center;62    justify-content: center;63  }64  .hamburger svg { width: 48px; height: 48px; opacity: 0.95; }65  .header-content {66    position: absolute;67    left: 118px;68    right: 340px;69    top: 40px;70  }71  .brand {72    display: flex; align-items: center; gap: 16px;73    color: rgba(255,255,255,0.8);74    font-size: 28px;75  }76  .location {77    margin-top: 12px;78    font-size: 50px;79    font-weight: 800;80    color: #ffffff;81    display: inline-flex;82    align-items: center;83    gap: 10px;84  }85  .premium-btn {86    position: absolute;87    right: 32px;88    top: 36px;89    background: rgba(217,226,245,0.6);90    color: #3a4e74;91    font-weight: 800;92    font-size: 28px;93    padding: 18px 28px;94    border-radius: 60px;95    border: 2px solid rgba(255,255,255,0.35);96  }97 98  /* Dark content card */99  .card {100    position: absolute;101    top: 320px;102    left: 0;103    width: 1080px;104    height: 1800px;105    background: #2c3033;106    border-top-left-radius: 42px;107    border-top-right-radius: 42px;108    color: #e8edf1;109    box-sizing: border-box;110  }111  .notch {112    position: absolute;113    top: 16px;114    left: 50%;115    transform: translateX(-50%);116    width: 180px; height: 16px;117    background: #6b7076;118    border-radius: 10px;119    opacity: 0.8;120  }121  .card-header {122    padding-top: 96px;123    text-align: center;124    font-size: 44px;125    font-weight: 800;126    letter-spacing: 0.5px;127  }128  .unit {129    position: absolute;130    right: 36px;131    top: 118px;132    color: #9aa0a6;133    font-size: 32px;134    font-weight: 700;135  }136 137  /* Tabs */138  .tabs {139    margin-top: 36px;140    display: flex;141    justify-content: space-around;142    padding: 0 36px;143    color: #c7cdd3;144    font-size: 32px;145    font-weight: 600;146  }147  .tab { padding: 18px 6px; }148  .tab.active { color: #ffffff; position: relative; }149  .tab.active::after {150    content: "";151    position: absolute;152    left: 50%; transform: translateX(-50%);153    bottom: -6px;154    width: 180px; height: 6px;155    background: #ff8a3d;156    border-radius: 3px;157  }158  .divider {159    width: calc(100% - 96px);160    margin: 24px auto 0;161    height: 1px; background: #3a3f43;162    opacity: 0.6;163  }164 165  /* List of historical values */166  .list {167    margin-top: 30px;168    padding: 0 48px;169  }170  .list-header {171    display: flex;172    justify-content: space-between;173    align-items: flex-end;174    color: #9aa0a6;175    padding: 12px 0 0 0;176    font-weight: 700;177    letter-spacing: 1px;178  }179  .value-head {180    display: grid;181    grid-template-columns: 1fr 1fr;182    gap: 80px;183    font-size: 26px;184  }185  .row {186    display: flex;187    justify-content: space-between;188    align-items: center;189    padding: 34px 0;190    border-bottom: 1px solid #3a3f43;191  }192  .row:last-child { border-bottom: none; }193  .label {194    font-size: 40px;195    color: #e7edf2;196    font-weight: 600;197  }198  .values {199    display: grid;200    grid-template-columns: 1fr 1fr;201    gap: 80px;202    font-size: 50px;203    font-weight: 800;204    color: #ffffff;205  }206  .values span.low { color: #e7edf2; }207  .values span { white-space: nowrap; }208 209  /* Bottom system bar */210  .bottom-bar {211    position: absolute;212    left: 0;213    bottom: 0;214    width: 1080px;215    height: 120px;216    background: #000;217  }218  .gesture {219    position: absolute;220    bottom: 36px;221    left: 50%;222    transform: translateX(-50%);223    width: 240px; height: 16px;224    background: #e6e6e6;225    border-radius: 12px;226  }227</style>228</head>229<body>230<div id="render-target">231 232  <!-- Status Bar -->233  <div class="status">234    <div class="time">10:04</div>235    <div class="icons">236      <!-- Simple filler icons to mimic status -->237      <svg class="icon-wifi" viewBox="0 0 24 24" fill="#fff"><path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 4l2 2 2-2c-2-1-4-1-4 0z"/></svg>238      <svg class="icon-battery" viewBox="0 0 24 24" fill="#fff"><path d="M2 8h16v8H2V8zm18 3h2v2h-2v-2z"/></svg>239    </div>240  </div>241 242  <!-- Blue header area -->243  <div class="header">244    <div class="hamburger">245      <svg viewBox="0 0 24 24" fill="#fff"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>246    </div>247    <div class="header-content">248      <div class="brand">249        <!-- simple sun/gear hybrid icon -->250        <svg width="28" height="28" viewBox="0 0 24 24" fill="none">251          <circle cx="12" cy="12" r="4" fill="#eef4ff"/>252          <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.6 4.6l2.1 2.1M17.3 17.3l2.1 2.1M19.4 4.6l-2.1 2.1M6.7 17.3l-2.1 2.1" stroke="#eef4ff" stroke-width="1.6" stroke-linecap="round"/>253        </svg>254        <span>AccuWeather</span>255      </div>256      <div class="location">257        Welsh Harp, GB258        <svg width="28" height="28" viewBox="0 0 24 24" fill="#eef4ff"><path d="M7 10l5 5 5-5H7z"/></svg>259      </div>260    </div>261    <div class="premium-btn">GET PREMIUM+</div>262  </div>263 264  <!-- Dark content card -->265  <div class="card">266    <div class="notch"></div>267    <div class="card-header">Saturday, September 23</div>268    <div class="unit">°F</div>269 270    <div class="tabs">271      <div class="tab">Day</div>272      <div class="tab">Night</div>273      <div class="tab active">History</div>274    </div>275    <div class="divider"></div>276 277    <div class="list">278      <div class="list-header">279        <div></div>280        <div class="value-head">281          <span>HIGH</span>282          <span>LOW</span>283        </div>284      </div>285 286      <div class="row">287        <div class="label">Today's Forecast</div>288        <div class="values">289          <span>65°</span>290          <span class="low">54°</span>291        </div>292      </div>293 294      <div class="row">295        <div class="label">Historical Average</div>296        <div class="values">297          <span>63°</span>298          <span class="low">50°</span>299        </div>300      </div>301 302      <div class="row">303        <div class="label">Last Year on this Date</div>304        <div class="values">305          <span>65°</span>306          <span class="low">53°</span>307        </div>308      </div>309    </div>310  </div>311 312  <!-- Bottom system navigation bar -->313  <div class="bottom-bar">314    <div class="gesture"></div>315  </div>316 317</div>318</body>319</html>