GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Weather UI Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #EEEEEE;12  }13 14  /* Top bars */15  .status-bar {16    height: 110px; background: #7B1F1F; color: #fff; display: flex; align-items: center;17    padding: 0 30px; font-size: 40px; letter-spacing: 0.5px;18  }19  .status-icons { margin-left: auto; display: flex; align-items: center; gap: 24px; }20  .status-dot { width: 16px; height: 16px; background: #fff; border-radius: 50%; opacity: 0.8; }21  .battery {22    width: 60px; height: 30px; border: 4px solid #fff; border-radius: 6px; position: relative;23  }24  .battery::after { content: ""; position: absolute; right: -10px; top: 7px; width: 8px; height: 16px; background: #fff; border-radius: 2px; }25  .battery-fill { width: 75%; height: 100%; background: #fff; opacity: 0.8; }26 27  .app-bar {28    height: 140px; background: #D32F2F; color: #fff; display: flex; align-items: center;29    padding: 0 24px; box-shadow: 0 2px 2px rgba(0,0,0,0.2);30  }31  .app-title { font-size: 48px; font-weight: 500; margin: 0 24px; flex: 1; }32  .app-actions { display: flex; align-items: center; gap: 30px; }33  .icon-btn { width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; }34  .icon-btn svg { width: 52px; height: 52px; fill: none; stroke: #fff; stroke-width: 6px; }35 36  /* Content cards */37  .content { padding: 24px; }38  .card {39    background: #fff; border-radius: 4px; box-shadow: 0 2px 2px rgba(0,0,0,0.2);40    margin-bottom: 26px; overflow: hidden;41  }42  .card-header {43    padding: 28px 30px; border-bottom: 1px solid #e0e0e0; color: #757575; font-size: 40px; font-weight: 600;44  }45 46  /* Daily forecast */47  .daily { padding: 24px 20px 10px 20px; }48  .days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }49  .day { padding: 10px 10px 0; }50  .day-title { color: #616161; font-size: 38px; font-weight: 700; letter-spacing: 1px; margin-bottom: 12px; }51  .wx-icon { width: 90px; height: 90px; }52  .temp-line { font-size: 48px; color: #212121; margin: 8px 0 6px; }53  .wind, .humid { display: flex; align-items: center; gap: 10px; color: #424242; font-size: 36px; }54  .wind svg { width: 40px; height: 40px; stroke: #424242; }55  .humid { color: #0288D1; }56  .humid svg { width: 36px; height: 36px; stroke: #0288D1; }57 58  .chart {59    margin: 20px 10px; height: 300px;60    background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center;61    color: #757575; font-size: 36px;62  }63  .more-link {64    border-top: 1px solid #e0e0e0; padding: 22px; text-align: center;65    color: #1976D2; font-weight: 700; font-size: 44px;66  }67 68  /* Hourly */69  .hourly { padding: 10px 20px 0 20px; }70  .subhead { text-align: center; color: #757575; font-size: 38px; font-weight: 600; margin: 16px 0 18px; }71  .hours { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding-bottom: 10px; }72  .hour { text-align: center; }73  .hour .time { font-size: 38px; color: #424242; margin-bottom: 8px; }74  .hour .wx-icon { margin: 0 auto 8px; }75  .hour .deg { font-size: 46px; margin-bottom: 8px; }76  .hour .wind { justify-content: center; font-size: 34px; }77 78  /* AQI */79  .aqi { padding: 20px; display: flex; align-items: center; gap: 26px; }80  .aqi-box {81    width: 220px; height: 160px; background: #E53935; display: flex; align-items: center; justify-content: center;82    color: #000; font-size: 84px; font-weight: 800; border-radius: 6px;83  }84  .aqi-text { font-size: 64px; color: #212121; font-weight: 500; }85  .sad-face {86    margin-left: auto; width: 120px; height: 120px; border-radius: 50%; background: #E53935;87    display: flex; align-items: center; justify-content: center;88  }89  .sad-face svg { width: 90px; height: 90px; fill: none; stroke: #fff; stroke-width: 6px; }90 91  /* Weather icon simple: sun + cloud */92  .sun-cloud svg { width: 90px; height: 90px; }93  .sun-cloud .sun { fill: #FFC107; stroke: #FFC107; }94  .sun-cloud .cloud { fill: #B0BEC5; stroke: #B0BEC5; }95 96  /* Dividers for visual consistency */97  .divider { height: 1px; background: #e0e0e0; }98 99</style>100</head>101<body>102<div id="render-target">103  <div class="status-bar">104    10:20105    <div class="status-icons">106      <div class="status-dot"></div>107      <div class="status-dot" style="opacity:0.6;"></div>108      <div class="status-dot" style="opacity:0.6;"></div>109      <div class="status-dot" style="opacity:0.4;"></div>110      <div class="battery"><div class="battery-fill"></div></div>111      <div style="font-size:40px;">100%</div>112    </div>113  </div>114 115  <div class="app-bar">116    <div class="icon-btn" aria-label="Menu">117      <svg viewBox="0 0 24 24">118        <path d="M3 6h18M3 12h18M3 18h18" />119      </svg>120    </div>121    <div class="app-title">New Delhi, Delhi, India</div>122    <div class="app-actions">123      <div class="icon-btn" aria-label="Search">124        <svg viewBox="0 0 24 24">125          <circle cx="10" cy="10" r="6"></circle>126          <path d="M14 14l7 7"></path>127        </svg>128      </div>129      <div class="icon-btn" aria-label="Locate">130        <svg viewBox="0 0 24 24">131          <circle cx="12" cy="12" r="6"></circle>132          <path d="M12 2v4M12 18v4M2 12h4M18 12h4"></path>133        </svg>134      </div>135      <div class="icon-btn" aria-label="Settings" style="font-size:52px; color:#fff;">⚙</div>136    </div>137  </div>138 139  <div class="content">140    <!-- Daily Forecast Card -->141    <div class="card">142      <div class="daily">143        <div class="days">144          <div class="day">145            <div class="day-title">TODAY</div>146            <div class="wx-icon sun-cloud">147              <svg viewBox="0 0 64 64">148                <circle class="sun" cx="20" cy="20" r="8"></circle>149                <rect class="cloud" x="24" y="26" width="28" height="14" rx="7" ry="7"></rect>150                <rect class="cloud" x="18" y="30" width="26" height="12" rx="6" ry="6"></rect>151              </svg>152            </div>153            <div class="temp-line">35° | 27°</div>154            <div class="wind">155              <svg viewBox="0 0 24 24">156                <circle cx="12" cy="12" r="10"></circle>157                <path d="M9 12l6 3V9z"></path>158              </svg>159              18 km/h160            </div>161            <div class="humid">162              <svg viewBox="0 0 24 24">163                <path d="M12 3C9 7 6 10 6 13a6 6 0 0012 0c0-3-3-6-6-10z"></path>164              </svg>165              9%166            </div>167          </div>168 169          <div class="day">170            <div class="day-title">WED 09</div>171            <div class="wx-icon sun-cloud">172              <svg viewBox="0 0 64 64">173                <circle class="sun" cx="22" cy="18" r="8"></circle>174                <rect class="cloud" x="26" y="26" width="28" height="14" rx="7" ry="7"></rect>175                <rect class="cloud" x="20" y="30" width="24" height="12" rx="6" ry="6"></rect>176              </svg>177            </div>178            <div class="temp-line">35° | 27°</div>179            <div class="wind">180              <svg viewBox="0 0 24 24">181                <circle cx="12" cy="12" r="10"></circle>182                <path d="M9 12l6 3V9z"></path>183              </svg>184              16 km/h185            </div>186            <div class="humid">187              <svg viewBox="0 0 24 24">188                <path d="M12 3C9 7 6 10 6 13a6 6 0 0012 0c0-3-3-6-6-10z"></path>189              </svg>190              24%191            </div>192          </div>193 194          <div class="day">195            <div class="day-title">THU 10</div>196            <div class="wx-icon sun-cloud">197              <svg viewBox="0 0 64 64">198                <circle class="sun" cx="22" cy="18" r="8"></circle>199                <rect class="cloud" x="26" y="26" width="28" height="14" rx="7" ry="7"></rect>200                <rect class="cloud" x="20" y="30" width="24" height="12" rx="6" ry="6"></rect>201              </svg>202            </div>203            <div class="temp-line">34° | 28°</div>204            <div class="wind">205              <svg viewBox="0 0 24 24">206                <circle cx="12" cy="12" r="10"></circle>207                <path d="M9 12l6 3V9z"></path>208              </svg>209              12 km/h210            </div>211            <div class="humid">212              <svg viewBox="0 0 24 24">213                <path d="M12 3C9 7 6 10 6 13a6 6 0 0012 0c0-3-3-6-6-10z"></path>214              </svg>215              24%216            </div>217          </div>218 219          <div class="day">220            <div class="day-title">FRI 11</div>221            <div class="wx-icon sun-cloud">222              <svg viewBox="0 0 64 64">223                <circle class="sun" cx="22" cy="18" r="8"></circle>224                <rect class="cloud" x="26" y="26" width="28" height="14" rx="7" ry="7"></rect>225                <rect class="cloud" x="20" y="30" width="24" height="12" rx="6" ry="6"></rect>226              </svg>227            </div>228            <div class="temp-line">34° | 28°</div>229            <div class="wind">230              <svg viewBox="0 0 24 24">231                <circle cx="12" cy="12" r="10"></circle>232                <path d="M9 12l6 3V9z"></path>233              </svg>234              11 km/h235            </div>236            <div class="humid">237              <svg viewBox="0 0 24 24">238                <path d="M12 3C9 7 6 10 6 13a6 6 0 0012 0c0-3-3-6-6-10z"></path>239              </svg>240              24%241            </div>242          </div>243        </div>244 245        <div class="chart">[IMG: Temperature & Precipitation Chart]</div>246      </div>247      <div class="more-link">MORE</div>248    </div>249 250    <!-- Hourly Forecast Card -->251    <div class="card">252      <div class="card-header">HOURLY FORECAST</div>253      <div class="hourly">254        <div class="subhead">TODAY</div>255        <div class="hours">256          <div class="hour">257            <div class="time">11 AM</div>258            <div class="wx-icon sun-cloud">259              <svg viewBox="0 0 64 64">260                <circle class="sun" cx="22" cy="18" r="8"></circle>261                <rect class="cloud" x="26" y="26" width="28" height="14" rx="7" ry="7"></rect>262                <rect class="cloud" x="20" y="30" width="24" height="12" rx="6" ry="6"></rect>263              </svg>264            </div>265            <div class="deg">32°</div>266            <div class="wind">267              <svg viewBox="0 0 24 24">268                <circle cx="12" cy="12" r="10"></circle>269                <path d="M9 12l6 3V9z"></path>270              </svg>271              16 km/h272            </div>273          </div>274 275          <div class="hour">276            <div class="time">12 PM</div>277            <div class="wx-icon sun-cloud">278              <svg viewBox="0 0 64 64">279                <circle class="sun" cx="22" cy="18" r="8"></circle>280                <rect class="cloud" x="26" y="26" width="28" height="14" rx="7" ry="7"></rect>281                <rect class="cloud" x="20" y="30" width="24" height="12" rx="6" ry="6"></rect>282              </svg>283            </div>284            <div class="deg">33°</div>285            <div class="wind">286              <svg viewBox="0 0 24 24">287                <circle cx="12" cy="12" r="10"></circle>288                <path d="M9 12l6 3V9z"></path>289              </svg>290              15 km/h291            </div>292          </div>293 294          <div class="hour">295            <div class="time">1 PM</div>296            <div class="wx-icon sun-cloud">297              <svg viewBox="0 0 64 64">298                <circle class="sun" cx="22" cy="18" r="8"></circle>299                <rect class="cloud" x="26" y="26" width="28" height="14" rx="7" ry="7"></rect>300                <rect class="cloud" x="20" y="30" width="24" height="12" rx="6" ry="6"></rect>301              </svg>302            </div>303            <div class="deg">34°</div>304            <div class="wind">305              <svg viewBox="0 0 24 24">306                <circle cx="12" cy="12" r="10"></circle>307                <path d="M9 12l6 3V9z"></path>308              </svg>309              15 km/h310            </div>311          </div>312 313          <div class="hour">314            <div class="time">2 PM</div>315            <div class="wx-icon sun-cloud">316              <svg viewBox="0 0 64 64">317                <circle class="sun" cx="22" cy="18" r="8"></circle>318                <rect class="cloud" x="26" y="26" width="28" height="14" rx="7" ry="7"></rect>319                <rect class="cloud" x="20" y="30" width="24" height="12" rx="6" ry="6"></rect>320              </svg>321            </div>322            <div class="deg">34°</div>323            <div class="wind">324              <svg viewBox="0 0 24 24">325                <circle cx="12" cy="12" r="10"></circle>326                <path d="M9 12l6 3V9z"></path>327              </svg>328              15 km/h329            </div>330          </div>331 332          <div class="hour">333            <div class="time">3 PM</div>334            <div class="wx-icon sun-cloud">335              <svg viewBox="0 0 64 64">336                <circle class="sun" cx="22" cy="18" r="8"></circle>337                <rect class="cloud" x="26" y="26" width="28" height="14" rx="7" ry="7"></rect>338                <rect class="cloud" x="20" y="30" width="24" height="12" rx="6" ry="6"></rect>339              </svg>340            </div>341            <div class="deg">34°</div>342            <div class="wind">343              <svg viewBox="0 0 24 24">344                <circle cx="12" cy="12" r="10"></circle>345                <path d="M9 12l6 3V9z"></path>346              </svg>347              15 km/h348            </div>349          </div>350        </div>351      </div>352      <div class="more-link">MORE</div>353    </div>354 355    <!-- Air Quality Index Card -->356    <div class="card">357      <div class="card-header">AIR QUALITY INDEX</div>358      <div class="aqi">359        <div class="aqi-box">361</div>360        <div class="aqi-text">Very Poor</div>361        <div class="sad-face">362          <svg viewBox="0 0 64 64">363            <circle cx="32" cy="32" r="28"></circle>364            <circle cx="22" cy="26" r="4"></circle>365            <circle cx="42" cy="26" r="4"></circle>366            <path d="M20 46c4-6 20-6 24 0" stroke-linecap="round"></path>367          </svg>368        </div>369      </div>370    </div>371  </div>372</div>373</body>374</html>