GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Android Home UI - Render</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    border-radius: 28px;13    box-shadow: 0 10px 30px rgba(0,0,0,0.25);14    background: linear-gradient(180deg, #6f6a66 0%, #8a7c6f 30%, #6b5b4f 60%, #544841 100%);15    color: #fff;16  }17 18  /* Wallpaper placeholder (semantic image) */19  .wallpaper {20    position: absolute;21    inset: 0;22    background: #E0E0E0;23    border: 1px solid #BDBDBD;24    display: flex;25    align-items: center;26    justify-content: center;27    color: #757575;28    font-size: 28px;29    z-index: 0;30  }31  .tint {32    position: absolute;33    inset: 0;34    background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.45));35    z-index: 1;36  }37 38  /* Status bar */39  .status-bar {40    position: absolute;41    top: 0;42    left: 0;43    right: 0;44    height: 96px;45    z-index: 2;46    padding: 22px 28px;47    display: flex;48    align-items: center;49    justify-content: space-between;50    color: #fff;51    font-weight: 500;52  }53  .status-left {54    display: flex;55    align-items: center;56    gap: 16px;57    font-size: 40px;58  }59  .notif-dot {60    width: 18px; height: 18px; border-radius: 50%; background: #ffffffaa;61    margin-right: 6px; display: inline-block;62  }63  .status-right {64    display: flex;65    align-items: center;66    gap: 22px;67  }68  .status-icon svg { width: 34px; height: 34px; fill: #fff; }69 70  /* Weather widget */71  .weather {72    position: absolute;73    top: 190px;74    left: 60px;75    z-index: 2;76    color: #fff;77  }78  .weather .date {79    font-size: 56px;80    font-weight: 600;81    letter-spacing: 0.5px;82    margin-bottom: 18px;83    text-shadow: 0 2px 6px rgba(0,0,0,0.35);84  }85  .weather .summary {86    display: flex;87    align-items: center;88    gap: 18px;89    font-size: 34px;90    opacity: 0.95;91  }92  .sun {93    width: 34px; height: 34px; border-radius: 50%; background: #ffcf3b; box-shadow: 0 0 0 3px rgba(255,255,255,0.25);94  }95 96  /* App grid */97  .app-row {98    position: absolute;99    left: 0; right: 0;100    display: flex;101    justify-content: space-evenly;102    padding: 0 40px;103    z-index: 2;104  }105  .row-1 { top: 1360px; }106  .row-2 { top: 1720px; }107 108  .app-item {109    width: 210px;110    text-align: center;111  }112  .bubble {113    position: relative;114    width: 170px; height: 170px;115    margin: 0 auto 22px auto;116    border-radius: 50%;117    background: #fff;118    box-shadow: 0 12px 30px rgba(0,0,0,0.35);119    display: flex;120    align-items: center;121    justify-content: center;122  }123  .label {124    font-size: 36px;125    text-shadow: 0 2px 6px rgba(0,0,0,0.4);126  }127  .notif-badge {128    position: absolute; right: 10px; top: 10px;129    width: 30px; height: 30px;130    background: #f2c94c;131    border: 3px solid #fff;132    border-radius: 50%;133    box-shadow: 0 6px 12px rgba(0,0,0,0.25);134  }135 136  /* Search bar */137  .search-bar {138    position: absolute;139    left: 50px;140    right: 50px;141    bottom: 180px;142    height: 120px;143    background: #2f2b28;144    border-radius: 60px;145    z-index: 2;146    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08), 0 8px 26px rgba(0,0,0,0.45);147    display: flex;148    align-items: center;149    padding: 0 34px;150    justify-content: space-between;151  }152  .search-left {153    display: flex; align-items: center; gap: 22px;154    color: #fff;155  }156  .g-chip {157    width: 72px; height: 72px; border-radius: 50%;158    background: #4285F4;159    display: flex; align-items: center; justify-content: center;160    box-shadow: 0 4px 10px rgba(0,0,0,0.35);161    font-weight: 800; font-size: 42px; color: #fff;162  }163  .search-actions { display: flex; align-items: center; gap: 24px; }164  .search-actions .action {165    width: 74px; height: 74px; border-radius: 50%;166    background: #3b3532; display: flex; align-items: center; justify-content: center;167    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.1);168  }169  .search-actions svg { width: 40px; height: 40px; fill: #fff; }170 171  /* Gesture bar */172  .gesture {173    position: absolute;174    bottom: 26px;175    left: 50%;176    transform: translateX(-50%);177    width: 420px;178    height: 12px;179    border-radius: 8px;180    background: #fff;181    opacity: 0.75;182    z-index: 2;183  }184</style>185</head>186<body>187<div id="render-target">188  <div class="wallpaper">[IMG: Scenic Mountain Wallpaper]</div>189  <div class="tint"></div>190 191  <!-- Status Bar -->192  <div class="status-bar">193    <div class="status-left">194      <div>9:52</div>195      <span class="notif-dot"></span>196      <span class="notif-dot"></span>197      <span class="notif-dot"></span>198      <span class="notif-dot"></span>199      <span class="notif-dot" style="opacity:0.6;"></span>200    </div>201    <div class="status-right">202      <div class="status-icon">203        <!-- Wi-Fi -->204        <svg viewBox="0 0 24 24">205          <path d="M12 18.5c.9 0 1.5.6 1.5 1.5s-.6 1.5-1.5 1.5-1.5-.6-1.5-1.5.6-1.5 1.5-1.5zM2.5 9.5c5.9-5.2 13.1-5.2 19 0l-1.7 1.7c-4.5-3.9-10.9-3.9-15.5 0L2.5 9.5zm4.1 4.1c3.6-3.1 8.3-3.1 11.9 0l-1.7 1.7c-2.7-2.3-6.9-2.3-9.6 0l-1.7-1.7z"/>206        </svg>207      </div>208      <div class="status-icon">209        <!-- Battery -->210        <svg viewBox="0 0 24 24">211          <path d="M20 8h2v8h-2v2H4V6h16v2zm-2 10V8H6v10h12z"/>212        </svg>213      </div>214    </div>215  </div>216 217  <!-- Weather -->218  <div class="weather">219    <div class="date">Mon, Nov 6</div>220    <div class="summary">221      <div class="sun"></div>222      <div>24°C · Today 31° / 17° · Sunny</div>223    </div>224  </div>225 226  <!-- App Row 1 -->227  <div class="app-row row-1">228    <!-- Play Store -->229    <div class="app-item">230      <div class="bubble">231        <svg width="110" height="110" viewBox="0 0 48 48">232          <defs>233            <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">234              <stop offset="0" stop-color="#34A853"/>235              <stop offset="1" stop-color="#0F9D58"/>236            </linearGradient>237          </defs>238          <path d="M9 10l22 14-22 14z" fill="url(#g1)"></path>239          <path d="M31 24l8-5v10z" fill="#4285F4"></path>240          <path d="M9 10l19 12 5-3-22-14z" fill="#FBBC05" opacity="0.9"></path>241          <path d="M9 38l24-15-5-3-19 12z" fill="#EA4335" opacity="0.9"></path>242        </svg>243      </div>244      <div class="label">Play Store</div>245    </div>246 247    <!-- Gmail -->248    <div class="app-item">249      <div class="bubble">250        <div class="notif-badge"></div>251        <svg width="120" height="120" viewBox="0 0 48 48">252          <path d="M6 12h36v24H6z" fill="#fff"></path>253          <path d="M6 12l18 12 18-12" stroke="#EA4335" stroke-width="6" fill="none"></path>254          <path d="M6 36V16l8 6v14z" fill="#34A853"></path>255          <path d="M42 36V16l-8 6v14z" fill="#4285F4"></path>256        </svg>257      </div>258      <div class="label">Gmail</div>259    </div>260 261    <!-- Photos -->262    <div class="app-item">263      <div class="bubble">264        <svg width="120" height="120" viewBox="0 0 48 48">265          <circle cx="16" cy="16" r="10" fill="#EA4335"></circle>266          <circle cx="32" cy="16" r="10" fill="#FBBC05"></circle>267          <circle cx="16" cy="32" r="10" fill="#34A853"></circle>268          <circle cx="32" cy="32" r="10" fill="#4285F4"></circle>269          <circle cx="24" cy="24" r="6" fill="#fff"></circle>270        </svg>271      </div>272      <div class="label">Photos</div>273    </div>274 275    <!-- YouTube -->276    <div class="app-item">277      <div class="bubble">278        <svg width="120" height="120" viewBox="0 0 48 48">279          <rect x="7" y="14" width="34" height="20" rx="10" fill="#FF0000"></rect>280          <polygon points="21,18 21,30 31,24" fill="#fff"></polygon>281        </svg>282      </div>283      <div class="label">YouTube</div>284    </div>285  </div>286 287  <!-- App Row 2 -->288  <div class="app-row row-2">289    <!-- Phone -->290    <div class="app-item">291      <div class="bubble">292        <svg width="120" height="120" viewBox="0 0 48 48">293          <circle cx="24" cy="24" r="20" fill="#3D7BFF"></circle>294          <path d="M15 18c4 7 8 10 15 13l4-4c-2-1-4-2-6-3l-3 3c-3-2-5-4-7-7l3-3c-1-2-2-4-3-6l-3 3z" fill="#fff"></path>295        </svg>296      </div>297      <div class="label">Phone</div>298    </div>299 300    <!-- Messages -->301    <div class="app-item">302      <div class="bubble">303        <svg width="120" height="120" viewBox="0 0 48 48">304          <rect x="8" y="10" width="32" height="22" rx="6" fill="#1A73E8"></rect>305          <polygon points="18,32 18,40 26,32" fill="#1A73E8"></polygon>306          <rect x="13" y="16" width="22" height="4" rx="2" fill="#fff" opacity="0.9"></rect>307          <rect x="13" y="22" width="16" height="4" rx="2" fill="#fff" opacity="0.9"></rect>308        </svg>309      </div>310      <div class="label">Messages</div>311    </div>312 313    <!-- Chrome -->314    <div class="app-item">315      <div class="bubble">316        <svg width="120" height="120" viewBox="0 0 48 48">317          <circle cx="24" cy="24" r="22" fill="#EA4335"></circle>318          <path d="M24 24l18 0A22 22 0 0 1 12 12l12 12z" fill="#FBBC05"></path>319          <path d="M24 24L12 12A22 22 0 0 0 7 36h17l0-12z" fill="#34A853"></path>320          <circle cx="24" cy="24" r="9" fill="#4285F4"></circle>321          <circle cx="24" cy="24" r="5" fill="#fff"></circle>322        </svg>323      </div>324      <div class="label">Chrome</div>325    </div>326 327    <!-- Camera -->328    <div class="app-item">329      <div class="bubble">330        <svg width="120" height="120" viewBox="0 0 48 48">331          <rect x="8" y="14" width="32" height="22" rx="6" fill="#C7CCD1"></rect>332          <rect x="16" y="10" width="12" height="6" rx="2" fill="#8C949B"></rect>333          <circle cx="24" cy="25" r="8" fill="#4F6AA3"></circle>334          <circle cx="24" cy="25" r="4" fill="#9DB4D6"></circle>335        </svg>336      </div>337      <div class="label">Camera</div>338    </div>339  </div>340 341  <!-- Search Bar -->342  <div class="search-bar">343    <div class="search-left">344      <div class="g-chip">G</div>345      <!-- Minimal placeholder label to mimic input -->346      <div style="opacity:0.85; font-size:34px;">Search</div>347    </div>348    <div class="search-actions">349      <div class="action">350        <!-- Microphone -->351        <svg viewBox="0 0 24 24">352          <path d="M12 3a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3zm-5 9a5 5 0 0 0 10 0h2a7 7 0 0 1-6 6.9V21h-2v-2.1A7 7 0 0 1 5 12h2z"/>353        </svg>354      </div>355      <div class="action">356        <!-- Google Lens/Camera -->357        <svg viewBox="0 0 24 24">358          <rect x="4" y="7" width="16" height="12" rx="3"></rect>359          <circle cx="12" cy="13" r="4" fill="#4285F4"></circle>360        </svg>361      </div>362    </div>363  </div>364 365  <!-- Gesture bar -->366  <div class="gesture"></div>367</div>368</body>369</html>