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 Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: linear-gradient(180deg, #59bbff 0%, #1f7bdd 38%, #0d66c9 100%);15    color: #fff;16  }17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0; left: 0; right: 0;21    height: 96px;22    padding: 0 32px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #eaf6ff;27    font-weight: 600;28    font-size: 40px;29    opacity: .95;30  }31  .status-icons {32    display: flex;33    align-items: center;34    gap: 22px;35  }36  .icon-wrap { width: 38px; height: 38px; opacity: .95; }37  /* App bar */38  .app-bar {39    position: absolute;40    top: 96px; left: 0; right: 0;41    height: 160px;42    padding: 0 36px;43    display: flex;44    align-items: center;45    justify-content: space-between;46  }47  .left-bar {48    display: flex; align-items: center; gap: 24px;49  }50  .hamburger {51    width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center;52  }53  .hamburger span, .hamburger span::before, .hamburger span::after {54    display: block; width: 44px; height: 4px; background: #eaf6ff; border-radius: 3px; position: relative;55  }56  .hamburger span::before { content: ""; position: absolute; top: -12px; left: 0; width: 44px; height: 4px; background:#eaf6ff; border-radius:3px; }57  .hamburger span::after { content: ""; position: absolute; top: 12px; left: 0; width: 34px; height: 4px; background:#eaf6ff; border-radius:3px; }58  .title-block { line-height: 1.15; }59  .brand {60    font-size: 38px; font-weight: 700; letter-spacing: .2px; display: flex; align-items: center; gap: 12px; opacity: .95;61  }62  .location {63    font-size: 58px; font-weight: 800;64  }65  .premium-btn {66    background: #ff7a3e; color: #fff; font-weight: 800; font-size: 34px; padding: 18px 30px;67    border-radius: 100px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.12);68  }69  .divider {70    position: absolute; top: 260px; left: 0; right: 0; height: 2px; background: rgba(255,255,255,.25);71  }72  /* Headline */73  .headline {74    position: absolute; top: 310px; left: 0; right: 0; text-align: center;75    font-size: 46px; font-weight: 500; opacity: .95;76  }77  .subtime {78    position: absolute; top: 382px; left: 0; right: 0; text-align: center; font-size: 34px; opacity: .85;79  }80  .subtime::after {81    content: ""; display: block; width: 2px; height: 24px; background: rgba(255,255,255,.7); margin: 10px auto 0;82  }83  /* Dial */84  .dial-wrap {85    position: absolute; top: 430px; left: 50%; transform: translateX(-50%);86    width: 940px; height: 940px;87  }88  .ticks {89    position: absolute; inset: -40px; border-radius: 50%;90    background:91      radial-gradient(closest-side, transparent 72%, rgba(255,255,255,.07) 72.4%, rgba(255,255,255,.07) 73%, transparent 73.4%),92      repeating-conic-gradient(from -10deg, rgba(255,255,255,.35) 0 4deg, transparent 4deg 12deg);93    filter: blur(.2px);94    opacity: .7;95  }96  .dial {97    position: absolute; inset: 0; border-radius: 50%;98    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.45), rgba(255,255,255,.15) 55%, rgba(255,255,255,.05) 70%, rgba(0,0,0,.0) 100%),99                radial-gradient(circle at 55% 55%, #79d0ff 0%, #5aaef7 55%, #4a8fe4 100%);100    box-shadow: inset 0 0 70px rgba(255,255,255,.3);101  }102  .dial-label {103    position: absolute; left: 0; right: 0; top: 330px; text-align: center;104  }105  .temp-icon { margin: 0 auto 12px; width: 90px; height: 90px; opacity: .95; }106  .temp {107    font-size: 160px; font-weight: 800; line-height: 1; letter-spacing: -2px;108  }109  .deg { font-size: .45em; vertical-align: 28px; opacity: .95; }110  .unit { font-size: 40px; margin-left: 8px; opacity: .9; }111  .feels { margin-top: 10px; font-size: 46px; opacity: .95; }112  .next {113    margin-top: 34px; font-size: 46px; font-weight: 700; color: #d6ecff; display: inline-flex; align-items: center; gap: 12px;114  }115  .arrow {116    width: 26px; height: 26px;117  }118  .dial-num {119    position: absolute; color: rgba(255,255,255,.6); font-weight: 600; font-size: 40px;120  }121  .dial-num.left { left: -50px; top: 430px; }122  .dial-num.right { right: -50px; top: 450px; }123  .dial-num.bottom { left: 50%; transform: translateX(-50%); bottom: -40px; }124  /* Legend */125  .legend {126    position: absolute; top: 1430px; left: 0; right: 0;127    padding: 0 64px; font-size: 40px; display: flex; gap: 40px; align-items: center; justify-content: center; flex-wrap: wrap; color: #dff2ff;128  }129  .legend-group { display: flex; align-items: center; gap: 16px; }130  .dot { width: 20px; height: 20px; border-radius: 50%; display: inline-block; }131  /* Forecast card */132  .forecast-card {133    position: absolute; top: 1520px; left: 36px; right: 36px;134    background: rgba(255,255,255,.08);135    border-radius: 28px;136    padding: 28px 18px 14px;137    backdrop-filter: blur(2px);138  }139  .forecast-grid {140    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; text-align: center;141  }142  .forecast-item {143    padding: 36px 12px 28px; border-radius: 20px;144    border-right: 1px solid rgba(255,255,255,.12);145  }146  .forecast-item:last-child { border-right: 0; }147  .fi-title { color: #bfe3ff; font-weight: 800; font-size: 40px; letter-spacing: .3px; }148  .fi-icon { width: 80px; height: 80px; margin: 26px auto 10px; opacity: .95; }149  .fi-temp { font-size: 86px; font-weight: 800; }150  .fi-sub { color: #cfe9ff; font-size: 34px; margin-top: 6px; }151  /* Details section title */152  .details-title {153    position: absolute; top: 1810px; left: 48px;154  }155  .details-title .big { font-size: 64px; font-weight: 800; }156  .details-title .small { margin-top: 8px; font-size: 34px; color: #b9defa; letter-spacing: 1px; }157  /* Bottom nav */158  .bottom-nav {159    position: absolute; bottom: 70px; left: 0; right: 0;160    height: 170px; background: rgba(255,255,255,.08);161    border-top: 1px solid rgba(255,255,255,.15);162    display: grid; grid-template-columns: repeat(4, 1fr);163  }164  .tab {165    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #d7edff; font-size: 34px; font-weight: 700;166  }167  .tab .ticon { width: 70px; height: 70px; opacity: .95; }168  .tab.active { color: #ffffff; }169  /* Gesture bar */170  .gesture {171    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);172    width: 340px; height: 12px; background: #0a0a0a; border-radius: 10px; opacity: .8;173  }174</style>175</head>176<body>177<div id="render-target">178  <!-- Status bar -->179  <div class="status-bar">180    <div>8:16</div>181    <div class="status-icons">182      <svg class="icon-wrap" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#eaf6ff"/><g stroke="#eaf6ff" stroke-width="2" fill="none"><path d="M12 1v3M12 20v3M1 12h3M20 12h3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1"/></g></svg>183      <svg class="icon-wrap" viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm0 3a7 7 0 110 14 7 7 0 010-14z" fill="#eaf6ff"/></svg>184      <svg class="icon-wrap" viewBox="0 0 24 24"><path d="M3 12l8-8v6h10v4H11v6z" fill="#eaf6ff"/></svg>185      <svg class="icon-wrap" viewBox="0 0 24 24"><path d="M2 7h20M2 12h20M2 17h20" stroke="#eaf6ff" stroke-width="2"/></svg>186      <svg class="icon-wrap" viewBox="0 0 28 14">187        <rect x="1" y="2" width="22" height="10" rx="2" ry="2" stroke="#eaf6ff" fill="none" stroke-width="2"/>188        <rect x="3" y="4" width="18" height="6" fill="#eaf6ff"/>189        <rect x="24.3" y="5" width="3" height="4" rx="1" fill="#eaf6ff"/>190      </svg>191      <span style="font-size:38px;">90%</span>192    </div>193  </div>194 195  <!-- App bar -->196  <div class="app-bar">197    <div class="left-bar">198      <div class="hamburger"><span></span></div>199      <div class="title-block">200        <div class="brand">201          <svg width="32" height="32" viewBox="0 0 24 24">202            <circle cx="12" cy="12" r="3" fill="#eaf6ff"></circle>203            <g stroke="#eaf6ff" stroke-width="2" fill="none">204              <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4 4l2 2M18 18l2 2M4 20l2-2M18 6l2-2"/>205            </g>206          </svg>207          AccuWeather208        </div>209        <div class="location">Gual Pahari, IN ▾</div>210      </div>211    </div>212    <div class="premium-btn">GET PREMIUM+</div>213  </div>214  <div class="divider"></div>215 216  <div class="headline">No precipitation for at least 60 min</div>217  <div class="subtime">8:16 AM</div>218 219  <!-- Dial -->220  <div class="dial-wrap">221    <div class="ticks"></div>222    <div class="dial"></div>223 224    <div class="dial-label">225      <svg class="temp-icon" viewBox="0 0 24 24">226        <g fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">227          <circle cx="9" cy="9" r="3"></circle>228          <path d="M9 1v2M9 15v2M1 9h2M15 9h2M3.5 3.5l1.4 1.4M14.1 14.1l1.4 1.4M3.5 14.5l1.4-1.4M14.1 3.9l1.4-1.4"/>229          <path d="M16 17a4 4 0 10-1-7 5 5 0 10-3 7h4z"></path>230        </g>231      </svg>232      <div class="temp">29<span class="deg">°</span><span class="unit">C</span></div>233      <div class="feels">RealFeel 36<span class="deg">°</span></div>234      <div class="next">Next 4 Hours235        <svg class="arrow" viewBox="0 0 24 24"><path d="M8 4l8 8-8 8" fill="none" stroke="#d6ecff" stroke-width="2"/></svg>236      </div>237    </div>238 239    <div class="dial-num left">45</div>240    <div class="dial-num right">15</div>241    <div class="dial-num bottom">30</div>242  </div>243 244  <!-- Legend -->245  <div class="legend">246    <div class="legend-group">Rain247      <span class="dot" style="background:#62d34d"></span>248      <span class="dot" style="background:#9bd800"></span>249      <span class="dot" style="background:#f6c700"></span>250      <span class="dot" style="background:#ff7a00"></span>251      <span class="dot" style="background:#ff3d3d"></span>252    </div>253    <div class="legend-group">Snow254      <span class="dot" style="background:#d6e8ff"></span>255      <span class="dot" style="background:#b3d8ff"></span>256      <span class="dot" style="background:#87baff"></span>257      <span class="dot" style="background:#2a63d9"></span>258    </div>259    <div class="legend-group">Ice260      <span class="dot" style="background:#ffb2c5"></span>261      <span class="dot" style="background:#ff86a9"></span>262      <span class="dot" style="background:#ff5e92"></span>263      <span class="dot" style="background:#ff3f82"></span>264    </div>265    <div class="legend-group">Mix266      <span class="dot" style="background:#c56cff"></span>267      <span class="dot" style="background:#a65cff"></span>268      <span class="dot" style="background:#8b4cff"></span>269      <span class="dot" style="background:#6c3cff"></span>270    </div>271  </div>272 273  <!-- Forecast Card -->274  <div class="forecast-card">275    <div class="forecast-grid">276      <div class="forecast-item">277        <div class="fi-title">TODAY</div>278        <svg class="fi-icon" viewBox="0 0 24 24">279          <g fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round">280            <path d="M7 17a4 4 0 110-8 5 5 0 119 3"></path>281            <path d="M10 20l2-3m-4 1.5l2-3" stroke="#bfe3ff"/>282          </g>283        </svg>284        <div class="fi-temp">35°</div>285        <div class="fi-sub">RealFeel 43°</div>286      </div>287      <div class="forecast-item">288        <div class="fi-title">TONIGHT</div>289        <svg class="fi-icon" viewBox="0 0 24 24">290          <g fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round">291            <path d="M15.5 5.5A6 6 0 116 15a6 6 0 009.5-9.5z"></path>292            <path d="M7 17a4 4 0 110-8 5 5 0 119 3"></path>293          </g>294        </svg>295        <div class="fi-temp">27°</div>296        <div class="fi-sub">RealFeel 31°</div>297      </div>298      <div class="forecast-item">299        <div class="fi-title">TUE</div>300        <svg class="fi-icon" viewBox="0 0 24 24">301          <g fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">302            <circle cx="8" cy="8" r="3"></circle>303            <path d="M8 1v2M8 13v2M1 8h2M13 8h2M3.5 3.5l1.4 1.4M12.1 12.1l1.4 1.4M3.5 12.5l1.4-1.4M12.1 4.9l1.4-1.4"/>304            <path d="M16 17a4 4 0 10-1-7 5 5 0 10-3 7h4z"></path>305          </g>306        </svg>307        <div class="fi-temp">37°</div>308        <div class="fi-sub">RealFeel 45°</div>309      </div>310    </div>311  </div>312 313  <!-- Details title -->314  <div class="details-title">315    <div class="big">Today's Details</div>316    <div class="small">CURRENT CONDITIONS</div>317  </div>318 319  <!-- Bottom navigation -->320  <div class="bottom-nav">321    <div class="tab active">322      <svg class="ticon" viewBox="0 0 24 24">323        <rect x="3" y="5" width="18" height="16" rx="2" fill="none" stroke="#fff" stroke-width="2"/>324        <rect x="7" y="1.8" width="2" height="6" fill="#fff"/>325        <rect x="15" y="1.8" width="2" height="6" fill="#fff"/>326        <rect x="7" y="11" width="4" height="4" fill="#fff" opacity=".9"/>327      </svg>328      Today329    </div>330    <div class="tab">331      <svg class="ticon" viewBox="0 0 24 24">332        <circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="2" fill="none"/>333        <path d="M12 7v6l4 2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>334      </svg>335      Hourly336    </div>337    <div class="tab">338      <svg class="ticon" viewBox="0 0 24 24">339        <rect x="3" y="4" width="18" height="17" rx="2" fill="none" stroke="#fff" stroke-width="2"/>340        <path d="M3 8h18" stroke="#fff" stroke-width="2"/>341        <rect x="6" y="11" width="5" height="5" fill="#fff" opacity=".9"/>342      </svg>343      Daily344    </div>345    <div class="tab">346      <svg class="ticon" viewBox="0 0 24 24">347        <path d="M12 3a9 9 0 100 18 9 9 0 000-18zm0 0a6 6 0 016 6" fill="none" stroke="#fff" stroke-width="2"/>348        <path d="M12 12l6 6" stroke="#fff" stroke-width="2" stroke-linecap="round"/>349      </svg>350      Radar & Maps351    </div>352  </div>353 354  <div class="gesture"></div>355</div>356</body>357</html>