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 UI</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, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #000000;20    color: #ECECEC;21  }22 23  /* Status bar */24  .status-bar {25    height: 92px;26    padding: 0 32px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #EDEDED;31    font-size: 34px;32    letter-spacing: 0.5px;33    opacity: 0.9;34  }35  .status-left, .status-right {36    display: flex;37    align-items: center;38    gap: 22px;39  }40  .dot {41    width: 10px;42    height: 10px;43    background: #BDBDBD;44    border-radius: 50%;45    display: inline-block;46    opacity: 0.8;47  }48 49  /* Header */50  .header {51    padding: 12px 32px 8px;52    display: flex;53    align-items: center;54    justify-content: space-between;55  }56  .header-title {57    font-weight: 700;58    font-size: 56px;59    color: #D6D6D6;60  }61  .icon-btn {62    width: 64px;63    height: 64px;64    display: flex;65    align-items: center;66    justify-content: center;67    color: #CFCFCF;68  }69  .icon-btn svg { width: 40px; height: 40px; fill: #CFCFCF; }70 71  /* Cards */72  .content { padding: 16px 40px 0; }73  .card {74    background: #295CD9;75    border-radius: 32px;76    padding: 42px 40px;77    box-sizing: border-box;78  }79 80  .primary-card {81    background: #3973EE;82    position: relative;83    overflow: hidden;84    min-height: 520px;85  }86  .weather-top {87    display: flex;88    align-items: center;89    gap: 28px;90  }91  .big-temp {92    font-size: 140px;93    font-weight: 700;94    line-height: 1;95    color: #FFFFFF;96  }97  .feels {98    margin-left: 8px;99    font-size: 44px;100    color: #DDE6FF;101  }102  .primary-desc {103    margin-top: 30px;104    font-size: 44px;105    line-height: 1.4;106    color: #FFFFFF;107  }108  .hills {109    position: absolute;110    left: 0; right: 0; bottom: 0;111    height: 130px;112    background: linear-gradient(0deg, rgba(0,0,0,0.05), rgba(0,0,0,0.0));113    opacity: 0.35;114    border-bottom-left-radius: 32px;115    border-bottom-right-radius: 32px;116  }117 118  /* Alert pill */119  .alert-pill {120    background: #E15B63;121    color: #FFFFFF;122    border-radius: 28px;123    padding: 28px 32px;124    font-weight: 800;125    font-size: 44px;126    margin: 28px 0 18px;127    text-align: center;128  }129 130  /* Secondary cards */131  .panel {132    background: #1C1C1F;133    border-radius: 32px;134    padding: 34px 34px 24px;135    margin-top: 22px;136  }137  .panel h3 {138    margin: 0 0 18px;139    font-size: 40px;140    color: #CFCFCF;141    letter-spacing: 0.5px;142  }143  .divider {144    height: 2px;145    background: #33343A;146    margin: 8px 0 18px;147  }148 149  /* Hourly row */150  .hourly-row {151    display: flex;152    gap: 36px;153    overflow: hidden;154  }155  .hour {156    width: 130px;157    text-align: center;158    color: #D7D7D7;159  }160  .hour time {161    font-size: 34px;162    color: #B9BAC0;163  }164  .hour .t {165    margin-top: 12px;166    font-size: 42px;167    color: #FFFFFF;168  }169 170  /* Daily row */171  .daily-row {172    display: flex;173    align-items: center;174    gap: 26px;175    padding: 10px 0;176  }177  .day {178    width: 120px;179    font-size: 40px;180    color: #D7D7D7;181  }182  .min {183    margin-left: auto;184    font-size: 40px;185    color: #E6E6E6;186  }187  .max {188    font-size: 40px;189    color: #FFFFFF;190  }191  .range {192    height: 16px;193    width: 380px;194    background: #2A2B31;195    border-radius: 10px;196    position: relative;197    overflow: hidden;198    margin: 0 18px;199  }200  .range .bar {201    position: absolute;202    top: 0; bottom: 0; left: 18%;203    width: 62%;204    background: linear-gradient(90deg, #5C5C66, #E06230, #E23B34);205    border-radius: 10px;206  }207 208  /* Ad banner */209  .ad {210    position: absolute;211    left: 0;212    right: 0;213    bottom: 110px;214    margin: 0 0;215    padding: 0 0;216  }217  .ad-wrap {218    margin: 0 0;219    background: #FFFFFF;220    color: #111;221    display: flex;222    align-items: center;223    justify-content: space-between;224    padding: 28px 36px;225    gap: 24px;226  }227  .ad .headline {228    color: #E23B44;229    font-weight: 900;230    font-size: 54px;231    margin-bottom: 6px;232  }233  .ad .sub {234    font-size: 34px;235    color: #444;236  }237  .img-ph {238    width: 240px;239    height: 160px;240    background: #E0E0E0;241    border: 1px solid #BDBDBD;242    display: flex;243    align-items: center;244    justify-content: center;245    color: #757575;246    font-size: 28px;247  }248 249  /* Gesture bar */250  .gesture {251    position: absolute;252    bottom: 36px;253    left: 50%;254    transform: translateX(-50%);255    width: 260px;256    height: 10px;257    background: #DFDFDF;258    border-radius: 8px;259    opacity: 0.85;260  }261 262  /* Utility */263  .mt-24 { margin-top: 24px; }264</style>265</head>266<body>267<div id="render-target">268  <!-- Status bar -->269  <div class="status-bar">270    <div class="status-left">271      <div>2:54</div>272      <div class="dot"></div>273      <div>34°</div>274      <div class="dot"></div>275      <div>0°</div>276      <div class="dot"></div>277    </div>278    <div class="status-right">279      <svg width="40" height="40" viewBox="0 0 24 24" fill="#EDEDED" xmlns="http://www.w3.org/2000/svg"><path d="M7 18c0 1.1.9 2 2 2h6a2 2 0 0 0 2-2V8H7v10zM19 5h-3.5l-1-1h-5l-1 1H5v2h14V5z"/></svg>280      <svg width="40" height="40" viewBox="0 0 24 24" fill="#EDEDED" xmlns="http://www.w3.org/2000/svg"><path d="M16 7H8v10h8V7zm2-2v14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5h12z"/></svg>281      <div>100%</div>282    </div>283  </div>284 285  <!-- Header -->286  <div class="header">287    <div class="icon-btn" aria-label="Share">288      <!-- Simple share icon -->289      <svg viewBox="0 0 24 24"><path d="M18 16a3 3 0 0 0-2.39 1.2L8.91 13.7a3.1 3.1 0 0 0 0-3.4l6.7-3.4A3 3 0 1 0 15 5a3 3 0 0 0 .05.54L8.34 8.94a3 3 0 1 0 0 6.12l6.71 3.4A3 3 0 1 0 18 16z"/></svg>290    </div>291    <div class="header-title">Madrid, Spain</div>292    <div class="icon-btn" aria-label="More">293      <!-- vertical dots -->294      <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>295    </div>296  </div>297 298  <!-- Main content -->299  <div class="content">300    <!-- Primary weather card -->301    <div class="card primary-card">302      <div class="weather-top">303        <!-- Sun icon -->304        <svg width="150" height="150" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">305          <g>306            <circle cx="32" cy="32" r="14" fill="#FFD54F"/>307            <g fill="#F4A52E">308              <path d="M32 6l4 8h-8l4-8zM32 58l4-8h-8l4 8zM6 32l8-4v8l-8-4zM58 32l-8-4v8l8-4zM13 13l7 6-6 7-1-13zM51 51l-7-6 6-7 1 13zM13 51l6-7 7 6-13 1zM51 13l-6 7-7-6 13-1z"/>309            </g>310          </g>311        </svg>312 313        <div>314          <div class="big-temp">31°</div>315          <div class="feels">Feels 31°</div>316        </div>317      </div>318 319      <div class="primary-desc">320        I'm getting the menu lined up for my big summer barbecue. What do you think, kitten burgers or puppy steaks?321      </div>322 323      <div class="hills"></div>324    </div>325 326    <!-- Alert -->327    <div class="alert-pill">Extremely High Temperature Warning</div>328 329    <!-- Hourly forecast panel -->330    <div class="panel">331      <h3>HOURLY FORECAST</h3>332      <div class="divider"></div>333      <div class="hourly-row">334        <div class="hour">335          <time>11AM</time>336          <div class="mt-24">337            <svg width="64" height="64" viewBox="0 0 64 64"><circle cx="32" cy="32" r="14" fill="#FFD54F"/><g fill="#F4A52E"><path d="M32 6l3 6h-6l3-6zM6 32l6-3v6l-6-3zM32 58l3-6h-6l3 6zM58 32l-6-3v6l6-3z"/></g></svg>338          </div>339          <div class="t">30°</div>340        </div>341 342        <div class="hour">343          <time>12PM</time>344          <div class="mt-24">345            <svg width="64" height="64" viewBox="0 0 64 64"><circle cx="32" cy="32" r="14" fill="#FFD54F"/><g fill="#F4A52E"><path d="M32 6l3 6h-6l3-6zM6 32l6-3v6l-6-3zM32 58l3-6h-6l3 6zM58 32l-6-3v6l6-3z"/></g></svg>346          </div>347          <div class="t">33°</div>348        </div>349 350        <div class="hour">351          <time>1PM</time>352          <div class="mt-24">353            <svg width="64" height="64" viewBox="0 0 64 64"><circle cx="32" cy="32" r="14" fill="#FFD54F"/><g fill="#F4A52E"><path d="M32 6l3 6h-6l3-6zM6 32l6-3v6l-6-3zM32 58l3-6h-6l3 6zM58 32l-6-3v6l6-3z"/></g></svg>354          </div>355          <div class="t">35°</div>356        </div>357 358        <div class="hour">359          <time>2PM</time>360          <div class="mt-24">361            <svg width="64" height="64" viewBox="0 0 64 64"><circle cx="32" cy="32" r="14" fill="#FFD54F"/><g fill="#F4A52E"><path d="M32 6l3 6h-6l3-6zM6 32l6-3v6l-6-3zM32 58l3-6h-6l3 6zM58 32l-6-3v6l6-3z"/></g></svg>362          </div>363          <div class="t">36°</div>364        </div>365 366        <div class="hour">367          <time>3PM</time>368          <div class="mt-24">369            <svg width="64" height="64" viewBox="0 0 64 64"><circle cx="32" cy="32" r="14" fill="#FFD54F"/><g fill="#F4A52E"><path d="M32 6l3 6h-6l3-6zM6 32l6-3v6l-6-3zM32 58l3-6h-6l3 6zM58 32l-6-3v6l6-3z"/></g></svg>370          </div>371          <div class="t">37°</div>372        </div>373 374        <div class="hour">375          <time>4PM</time>376          <div class="mt-24">377            <!-- Partly cloudy: sun + small blue cloud -->378            <svg width="64" height="64" viewBox="0 0 64 64">379              <circle cx="26" cy="26" r="12" fill="#FFD54F"/>380              <path d="M38 40c0-4 3-7 7-7 4 0 7 3 7 7H38z" fill="#7DD3FF"/>381            </svg>382          </div>383          <div class="t">38°</div>384        </div>385 386        <div class="hour">387          <time>5PM</time>388          <div class="mt-24">389            <svg width="64" height="64" viewBox="0 0 64 64"><circle cx="32" cy="32" r="14" fill="#FFD54F"/><g fill="#F4A52E"><path d="M32 6l3 6h-6l3-6zM6 32l6-3v6l-6-3zM32 58l3-6h-6l3 6zM58 32l-6-3v6l6-3z"/></g></svg>390          </div>391          <div class="t">38°</div>392        </div>393      </div>394    </div>395 396    <!-- Daily forecast panel -->397    <div class="panel">398      <h3>DAILY FORECAST</h3>399      <div class="divider"></div>400      <div class="daily-row">401        <div class="day">WED</div>402        <svg width="56" height="56" viewBox="0 0 64 64"><circle cx="32" cy="32" r="14" fill="#FFD54F"/><g fill="#F4A52E"><path d="M32 6l3 6h-6l3-6zM6 32l6-3v6l-6-3zM32 58l3-6h-6l3 6zM58 32l-6-3v6l6-3z"/></g></svg>403        <div class="min">23°</div>404        <div class="range"><div class="bar"></div></div>405        <div class="max">38°</div>406      </div>407    </div>408  </div>409 410  <!-- Ad banner -->411  <div class="ad">412    <div class="ad-wrap">413      <div>414        <div class="headline">VIP GIRLFRIEND EXPERIENCE</div>415        <div class="sub">Get your organs harvested by beautiful lady</div>416      </div>417      <div class="img-ph">[IMG: Person Photo]</div>418    </div>419  </div>420 421  <!-- Gesture bar -->422  <div class="gesture"></div>423</div>424</body>425</html>