GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>AccuWeather Mock</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: "Segoe UI", Arial, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: linear-gradient(180deg, #5a88d5 0%, #4a7fd0 40%, #3e75c6 100%);18    color: #fff;19  }20 21  /* Top status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 100%;27    height: 96px;28    padding: 0 36px;29    box-sizing: border-box;30    display: flex;31    align-items: center;32    justify-content: space-between;33    font-weight: 600;34    letter-spacing: 0.5px;35    font-size: 42px;36    opacity: 0.95;37  }38  .status-icons {39    display: flex;40    align-items: center;41    gap: 24px;42  }43  .icon-dot {44    width: 16px;45    height: 16px;46    background: #fff;47    border-radius: 50%;48    opacity: 0.9;49  }50  .icon-square {51    width: 28px;52    height: 28px;53    background: #fff;54    border-radius: 6px;55    opacity: 0.9;56  }57  .icon-cloud {58    width: 34px;59    height: 24px;60    border-radius: 12px;61    background: rgba(255,255,255,0.9);62    position: relative;63  }64  .icon-cloud::after{65    content:"";66    position:absolute;67    width:18px;height:18px;68    background:#fff;border-radius:50%;69    left:-8px;top:-6px;70  }71 72  /* App header */73  .app-header {74    position: absolute;75    top: 108px;76    left: 0;77    width: 100%;78    padding: 0 36px;79    box-sizing: border-box;80    display: flex;81    align-items: center;82    justify-content: space-between;83  }84  .hamburger {85    width: 62px;86    height: 62px;87    display: flex;88    align-items: center;89    justify-content: center;90  }91  .hamburger svg path { stroke: #fff; stroke-width: 7; }92  .brand {93    text-align: left;94    color: #fff;95  }96  .brand .title {97    font-size: 42px;98    font-weight: 700;99  }100  .brand .subtitle {101    font-size: 38px;102    font-weight: 700;103    margin-top: 6px;104  }105  .premium-btn {106    background: #ff8f4c;107    color: #fff;108    font-weight: 800;109    font-size: 36px;110    padding: 20px 32px;111    border-radius: 50px;112    box-shadow: 0 8px 16px rgba(0,0,0,0.15);113  }114 115  /* Headline section */116  .headline {117    position: absolute;118    top: 260px;119    left: 0;120    width: 100%;121    text-align: center;122    color: #e8f0ff;123  }124  .headline .mini {125    font-size: 30px;126    letter-spacing: 2px;127    font-weight: 700;128    opacity: 0.85;129  }130  .headline .main {131    margin-top: 22px;132    font-size: 54px;133    font-weight: 700;134  }135 136  /* Ring / center */137  .ring-wrap {138    position: absolute;139    top: 420px;140    left: 50%;141    transform: translateX(-50%);142    width: 900px;143    height: 900px;144  }145  .ring {146    width: 900px;147    height: 900px;148    border-radius: 50%;149    background:150      radial-gradient(closest-side, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 60%, rgba(255,255,255,0.0) 61%),151      repeating-conic-gradient(from -6deg,152        rgba(255,255,255,0.35) 0deg 12deg,153        rgba(255,255,255,0.0) 12deg 22deg);154    filter: blur(0.2px);155  }156  .ring-center {157    position: absolute;158    top: 50%;159    left: 50%;160    width: 520px;161    transform: translate(-50%,-50%);162    text-align: center;163  }164  .now-label {165    position: absolute;166    top: -80px;167    left: 50%;168    transform: translateX(-50%);169    font-size: 32px;170    font-weight: 700;171    letter-spacing: 1px;172    color: #eaf1ff;173  }174  .weather-row {175    display: flex;176    align-items: center;177    justify-content: center;178    gap: 26px;179    margin-top: 20px;180  }181  .partly-icon {182    width: 120px;183    height: 90px;184  }185  .temp {186    font-size: 150px;187    font-weight: 800;188    line-height: 1;189    letter-spacing: 2px;190  }191  .temp .unit {192    font-size: 80px;193    font-weight: 700;194    vertical-align: top;195    margin-left: 12px;196  }197  .realfeel {198    margin-top: 16px;199    font-size: 42px;200    color: #eaf1ff;201  }202  .see-btn {203    margin-top: 36px;204    display: inline-block;205    padding: 22px 36px;206    border-radius: 40px;207    background: rgba(255,255,255,0.22);208    color: #fff;209    font-weight: 700;210    font-size: 40px;211    backdrop-filter: blur(2px);212  }213  .see-btn svg { margin-left: 12px; vertical-align: middle; }214 215  .update-line {216    position: absolute;217    top: 1340px;218    left: 0;219    width: 100%;220    text-align: center;221    color: #e8f0ff;222    font-size: 34px;223    opacity: 0.9;224  }225  .dots {226    position: absolute;227    top: 1402px;228    left: 50%;229    transform: translateX(-50%);230    display: flex;231    gap: 30px;232  }233  .dot {234    width: 120px;235    height: 6px;236    background: rgba(255,255,255,0.6);237    border-radius: 6px;238  }239  .dot.small { width: 86px; opacity: 0.3; }240 241  /* Cards */242  .cards {243    position: absolute;244    bottom: 310px;245    left: 0;246    width: 100%;247    padding: 0 36px;248    box-sizing: border-box;249    display: flex;250    gap: 36px;251  }252  .card {253    flex: 1;254    min-width: 300px;255    background: rgba(255,255,255,0.08);256    border-radius: 24px;257    padding: 34px;258    box-sizing: border-box;259    color: #fff;260  }261  .card .label {262    font-size: 36px;263    letter-spacing: 1px;264    opacity: 0.95;265  }266  .card .c-icon {267    width: 72px;268    height: 72px;269    margin: 18px 0;270  }271  .card .deg {272    font-size: 86px;273    font-weight: 800;274  }275  .card .rf {276    margin-top: 8px;277    font-size: 34px;278    color: #eaf1ff;279  }280 281  /* Bottom nav */282  .bottom-nav {283    position: absolute;284    bottom: 72px;285    left: 0;286    width: 100%;287    padding: 24px 36px 0 36px;288    box-sizing: border-box;289    display: flex;290    justify-content: space-between;291    align-items: flex-end;292    background: linear-gradient(180deg, rgba(62,117,198,0) 0%, rgba(62,117,198,0.3) 60%, rgba(62,117,198,0.7) 100%);293  }294  .nav-item {295    flex: 1;296    text-align: center;297    color: #cfe3ff;298  }299  .nav-item .ico {300    width: 80px;301    height: 80px;302    margin: 0 auto 14px;303  }304  .nav-item .txt {305    font-size: 34px;306    font-weight: 700;307    opacity: 0.9;308  }309  .nav-item.active .txt {310    color: #fff;311  }312  .nav-item.active .ico path, .nav-item.active .ico rect, .nav-item.active .ico circle {313    fill: #fff;314    stroke: #fff;315  }316</style>317</head>318<body>319<div id="render-target">320 321  <!-- Status bar -->322  <div class="status-bar">323    <div>8:18</div>324    <div class="status-icons">325      <div class="icon-cloud"></div>326      <div class="icon-square"></div>327      <div class="icon-dot"></div>328      <div class="icon-dot" style="width:24px;height:24px;"></div>329      <div class="icon-square" style="border-radius:50%;width:32px;height:32px;"></div>330    </div>331  </div>332 333  <!-- App header -->334  <div class="app-header">335    <div class="hamburger">336      <svg width="52" height="52">337        <path d="M6 10 H46 M6 26 H46 M6 42 H46" fill="none"></path>338      </svg>339    </div>340    <div class="brand">341      <div class="title">AccuWeather</div>342      <div class="subtitle">Orléans, FR</div>343    </div>344    <div class="premium-btn">GET PREMIUM+</div>345  </div>346 347  <!-- Headline -->348  <div class="headline">349    <div class="mini">EXCLUSIVE ACCUWEATHER MINUTECAST</div>350    <div class="main">No precipitation for at least 60 min</div>351  </div>352 353  <!-- Ring and center content -->354  <div class="ring-wrap">355    <div class="now-label">NOW</div>356    <div class="ring"></div>357    <div class="ring-center">358      <div class="weather-row">359        <!-- Partly cloudy icon -->360        <svg class="partly-icon" viewBox="0 0 120 90">361          <!-- sun -->362          <circle cx="36" cy="28" r="16" fill="none" stroke="#fff" stroke-width="6"/>363          <line x1="36" y1="4" x2="36" y2="0" stroke="#fff" stroke-width="6"/>364          <line x1="60" y1="28" x2="68" y2="28" stroke="#fff" stroke-width="6"/>365          <line x1="12" y1="28" x2="4" y2="28" stroke="#fff" stroke-width="6"/>366          <line x1="22" y1="14" x2="16" y2="8" stroke="#fff" stroke-width="6"/>367          <line x1="50" y1="14" x2="56" y2="8" stroke="#fff" stroke-width="6"/>368          <!-- cloud -->369          <path d="M62 58c-10 0-18 6-18 14s8 12 18 12h32c12 0 18-6 18-14s-8-12-18-12c-2-10-12-16-22-10" fill="none" stroke="#fff" stroke-width="6" />370        </svg>371        <div class="temp">64<span class="unit">°F</span></div>372      </div>373      <div class="realfeel">RealFeel 63°</div>374      <div class="see-btn">375        See 4 Hours376        <svg width="36" height="36" viewBox="0 0 36 36">377          <path d="M10 8 L24 18 L10 28" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>378        </svg>379      </div>380    </div>381  </div>382 383  <div class="update-line">Updated minute-by-minute as of 8:15 PM</div>384  <div class="dots">385    <div class="dot"></div>386    <div class="dot small"></div>387  </div>388 389  <!-- Bottom cards -->390  <div class="cards">391    <div class="card">392      <div class="label">AFTERNOON</div>393      <svg class="c-icon" viewBox="0 0 72 72">394        <circle cx="26" cy="26" r="12" fill="none" stroke="#fff" stroke-width="4"/>395        <path d="M26 54c-6 0-10 4-10 8h34c6 0 10-4 10-8s-4-8-10-8c-1-6-7-10-14-6" fill="none" stroke="#fff" stroke-width="4"/>396      </svg>397      <div class="deg">66°</div>398      <div class="rf">RealFeel 65°</div>399    </div>400    <div class="card">401      <div class="label">TONIGHT</div>402      <svg class="c-icon" viewBox="0 0 72 72">403        <path d="M42 12c-12 2-20 14-18 26s14 20 26 18c-10-2-18-12-18-22s8-20 18-22z" fill="none" stroke="#fff" stroke-width="4"/>404      </svg>405      <div class="deg">41°</div>406      <div class="rf">RealFeel 42°</div>407    </div>408    <div class="card">409      <div class="label">SUN</div>410      <svg class="c-icon" viewBox="0 0 72 72">411        <circle cx="36" cy="36" r="12" fill="none" stroke="#fff" stroke-width="4"/>412        <line x1="36" y1="6" x2="36" y2="0" stroke="#fff" stroke-width="4"/>413        <line x1="36" y1="72" x2="36" y2="66" stroke="#fff" stroke-width="4"/>414        <line x1="6" y1="36" x2="0" y2="36" stroke="#fff" stroke-width="4"/>415        <line x1="72" y1="36" x2="66" y2="36" stroke="#fff" stroke-width="4"/>416        <line x1="14" y1="14" x2="9" y2="9" stroke="#fff" stroke-width="4"/>417        <line x1="58" y1="58" x2="63" y2="63" stroke="#fff" stroke-width="4"/>418        <line x1="58" y1="14" x2="63" y2="9" stroke="#fff" stroke-width="4"/>419        <line x1="14" y1="58" x2="9" y2="63" stroke="#fff" stroke-width="4"/>420      </svg>421      <div class="deg">72°</div>422      <div class="rf">RealFeel 72°</div>423    </div>424  </div>425 426  <!-- Bottom navigation -->427  <div class="bottom-nav">428    <div class="nav-item active">429      <svg class="ico" viewBox="0 0 80 80">430        <rect x="18" y="26" width="44" height="36" rx="6" ry="6" fill="none" stroke="#cfe3ff" stroke-width="4"></rect>431        <rect x="22" y="16" width="10" height="10" rx="2" fill="#cfe3ff"></rect>432        <rect x="48" y="16" width="10" height="10" rx="2" fill="#cfe3ff"></rect>433      </svg>434      <div class="txt">Today</div>435    </div>436    <div class="nav-item">437      <svg class="ico" viewBox="0 0 80 80">438        <circle cx="40" cy="40" r="26" fill="none" stroke="#cfe3ff" stroke-width="4"></circle>439        <line x1="40" y1="40" x2="40" y2="22" stroke="#cfe3ff" stroke-width="4"></line>440        <line x1="40" y1="40" x2="54" y2="46" stroke="#cfe3ff" stroke-width="4"></line>441      </svg>442      <div class="txt">Hourly</div>443    </div>444    <div class="nav-item">445      <svg class="ico" viewBox="0 0 80 80">446        <rect x="18" y="22" width="44" height="38" rx="8" fill="none" stroke="#cfe3ff" stroke-width="4"></rect>447        <line x1="18" y1="38" x2="62" y2="38" stroke="#cfe3ff" stroke-width="4"></line>448      </svg>449      <div class="txt">Daily</div>450    </div>451    <div class="nav-item">452      <svg class="ico" viewBox="0 0 80 80">453        <circle cx="36" cy="36" r="20" fill="none" stroke="#cfe3ff" stroke-width="4"></circle>454        <path d="M36 16 A20 20 0 0 1 56 36" fill="none" stroke="#cfe3ff" stroke-width="4"></path>455        <circle cx="64" cy="64" r="10" fill="none" stroke="#cfe3ff" stroke-width="4"></circle>456      </svg>457      <div class="txt">Radar & Maps</div>458    </div>459  </div>460 461</div>462</body>463</html>