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>Android Home UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000;15    border-radius: 32px;16    box-shadow: 0 20px 60px rgba(0,0,0,0.35);17    color: #fff;18  }19  /* Wallpaper placeholder */20  .wallpaper {21    position: absolute;22    left: 0; top: 0; right: 0; bottom: 0;23    background: #E0E0E0;24    border: 1px solid #BDBDBD;25    display: flex;26    align-items: center;27    justify-content: center;28    color: #757575;29    font-size: 32px;30    letter-spacing: 0.2px;31  }32  .scrim {33    position: absolute;34    inset: 0;35    background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.35));36    pointer-events: none;37  }38 39  /* Status bar */40  .status-bar {41    position: absolute;42    top: 24px;43    left: 24px;44    right: 24px;45    height: 64px;46    display: flex;47    align-items: center;48    justify-content: space-between;49    color: #FFFFFF;50    font-weight: 500;51  }52  .status-left {53    display: flex;54    align-items: center;55    gap: 14px;56  }57  .clock {58    font-size: 40px;59    line-height: 40px;60    text-shadow: 0 2px 6px rgba(0,0,0,0.35);61  }62  .status-mini {63    display: inline-flex;64    gap: 8px;65    align-items: center;66  }67  .status-mini svg { opacity: 0.95; }68  .status-right {69    display: flex;70    align-items: center;71    gap: 16px;72  }73 74  /* Date and weather */75  .date-weather {76    position: absolute;77    top: 210px;78    left: 48px;79    color: #FFFFFF;80  }81  .date-weather .date {82    font-size: 64px;83    font-weight: 500;84    letter-spacing: 0.2px;85    text-shadow: 0 3px 8px rgba(0,0,0,0.45);86  }87  .date-weather .weather {88    margin-top: 18px;89    display: flex;90    align-items: center;91    gap: 14px;92    font-size: 32px;93    opacity: 0.95;94    text-shadow: 0 2px 6px rgba(0,0,0,0.4);95  }96 97  /* App grid */98  .app-grid {99    position: absolute;100    top: 1420px;101    left: 0;102    right: 0;103    display: flex;104    justify-content: space-around;105    padding: 0 90px;106  }107  .app {108    width: 180px;109    text-align: center;110    color: #fff;111  }112  .icon-circle {113    width: 160px;114    height: 160px;115    border-radius: 50%;116    background: #FFFFFF;117    box-shadow: 0 12px 28px rgba(0,0,0,0.35);118    display: flex;119    align-items: center;120    justify-content: center;121    margin: 0 auto;122  }123  .app-label {124    margin-top: 14px;125    font-size: 28px;126    font-weight: 500;127    text-shadow: 0 2px 6px rgba(0,0,0,0.5);128  }129 130  /* Dock */131  .dock {132    position: absolute;133    bottom: 340px;134    left: 0; right: 0;135    display: flex;136    justify-content: space-evenly;137    padding: 0 80px;138  }139  .dock .icon-circle {140    width: 140px;141    height: 140px;142  }143 144  /* Search bar */145  .search-bar {146    position: absolute;147    left: 60px;148    right: 60px;149    bottom: 200px;150    height: 120px;151    background: rgba(32,32,32,0.85);152    border-radius: 60px;153    box-shadow: 0 12px 28px rgba(0,0,0,0.45);154    display: flex;155    align-items: center;156    padding: 0 34px;157    color: #DADADA;158  }159  .search-left, .search-right {160    display: flex;161    align-items: center;162    gap: 18px;163  }164  .search-left {165    flex: 1;166    gap: 22px;167  }168  .search-text {169    font-size: 32px;170    color: #D0D0D0;171  }172  .search-g {173    width: 64px;174    height: 64px;175    border-radius: 32px;176    background: #FFF;177    display: flex; align-items: center; justify-content: center;178    font-weight: 700; font-size: 34px;179    color: #4285F4;180  }181 182  /* Home indicator */183  .home-indicator {184    position: absolute;185    bottom: 52px;186    left: 50%;187    transform: translateX(-50%);188    width: 300px;189    height: 12px;190    background: #FFFFFF;191    border-radius: 12px;192    opacity: 0.85;193  }194 195  /* Utility */196  svg { display: block; }197</style>198</head>199<body>200<div id="render-target">201 202  <!-- Wallpaper placeholder -->203  <div class="wallpaper">[IMG: Browser interface background]</div>204  <div class="scrim"></div>205 206  <!-- Status Bar -->207  <div class="status-bar">208    <div class="status-left">209      <div class="clock">10:20</div>210      <div class="status-mini">211        <!-- small screen icon -->212        <svg width="28" height="20" viewBox="0 0 28 20">213          <rect x="1" y="3" width="24" height="14" rx="2" fill="#FFFFFF" opacity="0.7"></rect>214          <rect x="4" y="6" width="18" height="8" fill="#000000" opacity="0.6"></rect>215        </svg>216        <!-- small video icon -->217        <svg width="28" height="20" viewBox="0 0 28 20">218          <rect x="2" y="4" width="16" height="12" rx="2" fill="#FFFFFF" opacity="0.75"></rect>219          <polygon points="20,7 26,10 20,13" fill="#FFFFFF" opacity="0.75"></polygon>220        </svg>221      </div>222    </div>223    <div class="status-right">224      <!-- WiFi icon -->225      <svg width="34" height="24" viewBox="0 0 34 24">226        <path d="M2 6c8-6 22-6 30 0" stroke="#FFFFFF" stroke-width="2.6" fill="none" opacity="0.9"></path>227        <path d="M7 11c6-4 14-4 20 0" stroke="#FFFFFF" stroke-width="2.6" fill="none" opacity="0.9"></path>228        <path d="M13 16c4-3 8-3 12 0" stroke="#FFFFFF" stroke-width="2.6" fill="none" opacity="0.9"></path>229        <circle cx="17" cy="20" r="2.8" fill="#FFFFFF" opacity="0.95"></circle>230      </svg>231      <!-- Battery icon -->232      <svg width="38" height="24" viewBox="0 0 38 24">233        <rect x="1" y="4" width="30" height="16" rx="3" stroke="#FFFFFF" stroke-width="2" fill="none" opacity="0.9"></rect>234        <rect x="3" y="6" width="22" height="12" rx="2" fill="#FFFFFF" opacity="0.95"></rect>235        <rect x="32" y="9" width="4" height="6" rx="1" fill="#FFFFFF" opacity="0.9"></rect>236      </svg>237    </div>238  </div>239 240  <!-- Date & Weather -->241  <div class="date-weather">242    <div class="date">Mon, Jun 26</div>243    <div class="weather">244      <!-- Cloud icon -->245      <svg width="40" height="40" viewBox="0 0 40 40">246        <path d="M14 26h14a6 6 0 0 0 0-12c-1.4 0-2.7.4-3.8 1.1A8 8 0 0 0 10 18a6.5 6.5 0 0 0 4 8z" fill="#FFFFFF"></path>247      </svg>248      <span>28°C · Today 29° / 26° · Cloudy</span>249    </div>250  </div>251 252  <!-- App Grid Row -->253  <div class="app-grid">254    <!-- Play Store -->255    <div class="app">256      <div class="icon-circle">257        <svg width="96" height="96" viewBox="0 0 96 96">258          <polygon points="18,16 76,48 18,80" fill="#34A853"></polygon>259          <polygon points="18,16 40,40 18,40" fill="#FBBC04"></polygon>260          <polygon points="18,80 40,56 18,56" fill="#EA4335"></polygon>261          <polygon points="40,40 76,48 40,56" fill="#4285F4"></polygon>262        </svg>263      </div>264      <div class="app-label">Play Store</div>265    </div>266 267    <!-- Gmail -->268    <div class="app">269      <div class="icon-circle">270        <svg width="96" height="96" viewBox="0 0 96 96">271          <rect x="16" y="26" width="64" height="44" rx="8" fill="#FFFFFF" stroke="#DADADA" stroke-width="2"></rect>272          <path d="M18 28 L48 50 L78 28" stroke="#EA4335" stroke-width="10" fill="none"></path>273          <path d="M18 72 L18 36 L48 56 L78 36 L78 72" stroke="#34A853" stroke-width="8" fill="none" opacity="0.9"></path>274        </svg>275      </div>276      <div class="app-label">Gmail</div>277    </div>278 279    <!-- Photos -->280    <div class="app">281      <div class="icon-circle">282        <svg width="96" height="96" viewBox="0 0 96 96">283          <path d="M48 48 L48 16 A32 32 0 0 1 80 48 Z" fill="#EA4335"></path>284          <path d="M48 48 L80 48 A32 32 0 0 1 48 80 Z" fill="#FBBC04"></path>285          <path d="M48 48 L48 80 A32 32 0 0 1 16 48 Z" fill="#34A853"></path>286          <path d="M48 48 L16 48 A32 32 0 0 1 48 16 Z" fill="#4285F4"></path>287          <circle cx="48" cy="48" r="10" fill="#FFFFFF"></circle>288        </svg>289      </div>290      <div class="app-label">Photos</div>291    </div>292 293    <!-- YouTube -->294    <div class="app">295      <div class="icon-circle">296        <svg width="96" height="96" viewBox="0 0 96 96">297          <rect x="16" y="26" width="64" height="44" rx="10" fill="#FF0000"></rect>298          <polygon points="44,34 66,48 44,62" fill="#FFFFFF"></polygon>299        </svg>300      </div>301      <div class="app-label">YouTube</div>302    </div>303  </div>304 305  <!-- Dock -->306  <div class="dock">307    <!-- Phone -->308    <div class="icon-circle">309      <svg width="80" height="80" viewBox="0 0 80 80">310        <path d="M24 20c6 18 18 30 36 36l-6 8c-3 1-8-1-14-5s-12-10-16-16-6-11-5-14l5-6z" fill="#1A73E8"></path>311      </svg>312    </div>313    <!-- Messages -->314    <div class="icon-circle">315      <svg width="80" height="80" viewBox="0 0 80 80">316        <rect x="14" y="16" width="52" height="40" rx="12" fill="#007AFF"></rect>317        <polygon points="26,56 32,44 44,56" fill="#007AFF"></polygon>318        <circle cx="28" cy="36" r="4" fill="#FFFFFF"></circle>319        <circle cx="40" cy="36" r="4" fill="#FFFFFF"></circle>320        <circle cx="52" cy="36" r="4" fill="#FFFFFF"></circle>321      </svg>322    </div>323    <!-- Chrome -->324    <div class="icon-circle">325      <svg width="80" height="80" viewBox="0 0 80 80">326        <circle cx="40" cy="40" r="36" fill="#EA4335"></circle>327        <path d="M40 40 L10 40 A30 30 0 0 1 35 12 L40 40 Z" fill="#FBBC04"></path>328        <path d="M40 40 L56 12 A30 30 0 0 1 70 40 L40 40 Z" fill="#34A853"></path>329        <circle cx="40" cy="40" r="16" fill="#4285F4" stroke="#FFFFFF" stroke-width="2"></circle>330      </svg>331    </div>332    <!-- Camera -->333    <div class="icon-circle">334      <svg width="80" height="80" viewBox="0 0 80 80">335        <rect x="16" y="26" width="48" height="32" rx="8" fill="#3C4043"></rect>336        <rect x="24" y="20" width="16" height="8" rx="4" fill="#5F6368"></rect>337        <circle cx="40" cy="42" r="10" fill="#1A73E8"></circle>338        <circle cx="40" cy="42" r="4" fill="#FFFFFF"></circle>339      </svg>340    </div>341  </div>342 343  <!-- Search bar -->344  <div class="search-bar">345    <div class="search-left">346      <div class="search-g">G</div>347      <div class="search-text">Search...</div>348    </div>349    <div class="search-right">350      <!-- Microphone -->351      <svg width="40" height="40" viewBox="0 0 40 40">352        <rect x="14" y="8" width="12" height="16" rx="6" fill="#FFFFFF"></rect>353        <path d="M10 20c0 8 20 8 20 0" stroke="#FFFFFF" stroke-width="2" fill="none"></path>354        <rect x="18" y="26" width="4" height="8" fill="#FFFFFF"></rect>355      </svg>356      <!-- Lens (simple camera) -->357      <svg width="40" height="40" viewBox="0 0 40 40">358        <rect x="8" y="12" width="24" height="16" rx="6" fill="#FFFFFF"></rect>359        <circle cx="20" cy="20" r="6" fill="#000000" opacity="0.6"></circle>360      </svg>361    </div>362  </div>363 364  <!-- Home indicator -->365  <div class="home-indicator"></div>366 367</div>368</body>369</html>