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>Locations UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #2f363b; /* dark app background */15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;16    color: #E6EDF3;17  }18  .screen { position: absolute; inset: 0; }19 20  /* Header */21  .header {22    height: 170px;23    padding: 40px 48px 0 48px;24    display: flex;25    align-items: center;26    justify-content: space-between;27  }28  .header .title {29    font-size: 44px;30    font-weight: 700;31    letter-spacing: 0.3px;32  }33  .header .unit {34    font-size: 28px;35    color: #B0BEC5;36  }37  .icon-btn {38    width: 80px;39    height: 80px;40    background: transparent;41    border: none;42    padding: 0;43    cursor: default;44  }45  .icon {46    width: 32px;47    height: 32px;48    stroke: #CFD8DC;49    fill: none;50    stroke-width: 3;51  }52 53  /* Search */54  .search-bar {55    margin: 20px 48px 24px 48px;56    height: 130px;57    background: #282e32;58    border-radius: 22px;59    display: flex;60    align-items: center;61    padding: 0 36px;62  }63  .search-bar svg { stroke: #9FB2BF; width: 40px; height: 40px; }64  .search-bar span {65    margin-left: 26px;66    font-size: 36px;67    color: #D5DDE3;68  }69 70  /* Current section */71  .current {72    padding: 20px 48px 24px 48px;73    display: flex;74    align-items: center;75    justify-content: space-between;76  }77  .current-tag {78    display: flex;79    align-items: center;80    gap: 16px;81    color: #B0BEC5;82    font-size: 26px;83    letter-spacing: 1px;84  }85  .current-left .place {86    margin-top: 14px;87    font-size: 60px;88    font-weight: 700;89  }90  .current-left .country {91    margin-top: 6px;92    font-size: 30px;93    color: #B0BEC5;94  }95  .current-right {96    display: flex;97    align-items: center;98    gap: 28px;99  }100  .cloud-icon { width: 70px; height: 70px; stroke: #B8C7CE; }101  .temp {102    font-size: 64px;103    font-weight: 700;104  }105 106  .divider {107    height: 1px;108    background: #3a4045;109    margin: 20px 0;110  }111 112  /* Sections */113  .section-title {114    color: #B0BEC5;115    font-size: 26px;116    letter-spacing: 1px;117    text-transform: uppercase;118    padding: 24px 48px 18px 48px;119  }120 121  .hint-box {122    text-align: center;123    color: #D0D7DC;124    font-size: 30px;125    line-height: 46px;126    padding: 60px 90px;127  }128 129  .list-item {130    height: 140px;131    display: flex;132    align-items: center;133    justify-content: space-between;134    padding: 0 48px;135    border-top: 1px solid #3a4045;136  }137  .list-item span {138    font-size: 36px;139  }140 141  .chevron { width: 36px; height: 36px; stroke: #CFD8DC; }142 143  /* Recent header */144  .recent-header {145    display: flex;146    align-items: center;147    justify-content: space-between;148  }149  .clear {150    padding-right: 48px;151    color: #CFD8DC;152    font-size: 28px;153  }154  .right-group {155    display: flex;156    align-items: center;157    gap: 22px;158    color: #CFD8DC;159    font-size: 32px;160  }161  .plus { width: 36px; height: 36px; stroke: #CFD8DC; }162 163  /* Bottom gesture bar area */164  .gesture {165    position: absolute;166    left: 0;167    right: 0;168    bottom: 0;169    height: 140px;170    background: #000;171  }172  .gesture::before {173    content: "";174    position: absolute;175    left: 50%;176    bottom: 34px;177    transform: translateX(-50%);178    width: 240px;179    height: 12px;180    background: #EDEDED;181    border-radius: 8px;182    opacity: 0.85;183  }184</style>185</head>186<body>187<div id="render-target">188  <div class="screen">189 190    <div class="header">191      <button class="icon-btn" aria-label="Close">192        <svg class="icon" viewBox="0 0 24 24">193          <path d="M3 3 L21 21"></path>194          <path d="M21 3 L3 21"></path>195        </svg>196      </button>197      <div class="title">Locations</div>198      <div class="unit">°C</div>199    </div>200 201    <div class="search-bar">202      <svg viewBox="0 0 24 24">203        <circle cx="11" cy="11" r="7" fill="none" stroke-width="2"></circle>204        <path d="M20 20 L16 16" stroke-width="2" fill="none"></path>205      </svg>206      <span>Find Location</span>207    </div>208 209    <div class="current">210      <div class="current-left">211        <div class="current-tag">212          <svg class="icon" viewBox="0 0 24 24">213            <path d="M12 2 L9 10 L2 12 L9 14 L12 22 L15 14 L22 12 L15 10 Z"></path>214          </svg>215          <span>CURRENT</span>216        </div>217        <div class="place">Gual Pahari</div>218        <div class="country">India</div>219      </div>220      <div class="current-right">221        <svg class="cloud-icon" viewBox="0 0 24 24" fill="none" stroke-width="2">222          <path d="M7 18h10a4 4 0 0 0 0-8h-1.2A6 6 0 0 0 5 11.5 3.5 3.5 0 0 0 7 18z"></path>223        </svg>224        <div class="temp">29°</div>225      </div>226    </div>227 228    <div class="divider"></div>229 230    <div class="favorites">231      <div class="section-title">FAVORITES</div>232      <div class="hint-box">233        Add up to ten favorite locations, and start receiving notifications for them.234      </div>235      <div class="list-item">236        <span>Manage Notifications</span>237        <svg class="chevron" viewBox="0 0 24 24">238          <path d="M8 5 L16 12 L8 19" fill="none" stroke-width="2"></path>239        </svg>240      </div>241    </div>242 243    <div class="divider"></div>244 245    <div class="recent">246      <div class="recent-header">247        <div class="section-title">RECENT</div>248        <div class="clear">Clear All</div>249      </div>250 251      <div class="list-item">252        <span>Gual Pahari, Haryana</span>253        <div class="right-group">254          <svg class="plus" viewBox="0 0 24 24">255            <path d="M12 5 L12 19" fill="none" stroke-width="2"></path>256            <path d="M5 12 L19 12" fill="none" stroke-width="2"></path>257          </svg>258          <span class="favorite">Favorite</span>259        </div>260      </div>261    </div>262 263    <div class="gesture"></div>264  </div>265</div>266</body>267</html>