GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Android Home UI - Render</title>5<style>6 body {7 margin: 0;8 padding: 0;9 background: transparent;10 font-family: Arial, Helvetica, sans-serif;11 }12 #render-target {13 width: 1080px;14 height: 2400px;15 position: relative;16 overflow: hidden;17 background: radial-gradient(1200px 900px at 50% 30%, #2d2d2d 0%, #1b1b1b 50%, #101010 100%);18 color: #fff;19 }20 21 /* Status bar */22 .statusbar {23 position: absolute;24 top: 0;25 left: 0;26 right: 0;27 height: 84px;28 padding: 16px 24px;29 color: #ffffff;30 font-size: 42px;31 display: flex;32 align-items: center;33 justify-content: space-between;34 opacity: 0.95;35 }36 .status-icons {37 display: flex;38 align-items: center;39 gap: 22px;40 }41 .status-icons svg {42 height: 36px;43 width: 36px;44 fill: #ffffff;45 opacity: 0.9;46 }47 48 /* App grid */49 .app-grid {50 position: absolute;51 top: 140px;52 left: 40px;53 right: 40px;54 display: grid;55 grid-template-columns: repeat(4, 1fr);56 grid-column-gap: 40px;57 grid-row-gap: 70px;58 }59 .tile {60 text-align: center;61 }62 .app-icon {63 width: 160px;64 height: 160px;65 margin: 0 auto 16px;66 border-radius: 50%;67 display: flex;68 align-items: center;69 justify-content: center;70 font-weight: 700;71 font-size: 38px;72 color: #fff;73 border: 2px solid rgba(255,255,255,0.12);74 box-shadow: 0 6px 14px rgba(0,0,0,0.35);75 }76 .label {77 font-size: 34px;78 letter-spacing: 0.2px;79 opacity: 0.95;80 width: 220px;81 margin: 0 auto;82 white-space: nowrap;83 overflow: hidden;84 text-overflow: ellipsis;85 }86 87 /* Icon colors (approx.) */88 .irctc { background: linear-gradient(135deg, #7a4dd3, #c84aa9); }89 .falou { background: linear-gradient(135deg, #2a74ff, #49a2ff); }90 .memrise { background: #c8a040; }91 .babbel { background: #d77a2a; }92 93 .shareme { background: #59b8ff; }94 .etsy { background: #d06e33; }95 .artsy { background: #1a1a1a; }96 .quickart { background: linear-gradient(135deg, #6f3bd2, #d94f7d); }97 98 .artsticker { background: #111111; }99 .peggy { background: #8a8a8a; }100 .rtistiq { background: #000; }101 .udemy { background: #6b43e5; }102 103 .byjus { background: #7c4ac5; }104 .edurev { background: #1aa0ff; }105 .quickey { background: #44a45a; }106 .clevcalc { background: #2f4b86; }107 108 /* Dock */109 .dock {110 position: absolute;111 bottom: 300px;112 left: 80px;113 right: 80px;114 display: flex;115 justify-content: space-between;116 }117 .dock .dock-icon {118 width: 160px;119 height: 160px;120 border-radius: 50%;121 background: rgba(255,255,255,0.12);122 display: flex;123 align-items: center;124 justify-content: center;125 color: #fff;126 font-weight: 700;127 font-size: 34px;128 border: 2px solid rgba(255,255,255,0.18);129 backdrop-filter: blur(2px);130 }131 132 /* Search bar */133 .search-bar {134 position: absolute;135 bottom: 120px;136 left: 60px;137 width: 960px;138 height: 120px;139 border-radius: 60px;140 background: rgba(60,60,60,0.85);141 display: flex;142 align-items: center;143 padding: 0 32px;144 gap: 20px;145 box-shadow: 0 10px 20px rgba(0,0,0,0.35);146 }147 .search-bar .g-logo {148 width: 64px;149 height: 64px;150 border-radius: 32px;151 background: #ffffff;152 color: #222;153 font-weight: 900;154 display: flex;155 align-items: center;156 justify-content: center;157 }158 .search-placeholder {159 flex: 1;160 color: #dcdcdc;161 font-size: 36px;162 opacity: 0.9;163 }164 .search-bar .action {165 width: 72px;166 height: 72px;167 border-radius: 36px;168 background: rgba(255,255,255,0.12);169 display: flex;170 align-items: center;171 justify-content: center;172 }173 .search-bar .action svg {174 width: 40px;175 height: 40px;176 fill: #ffffff;177 opacity: 0.9;178 }179 180 /* Gesture pill */181 .gesture {182 position: absolute;183 bottom: 30px;184 left: 50%;185 transform: translateX(-50%);186 width: 280px;187 height: 8px;188 background: rgba(255,255,255,0.92);189 border-radius: 4px;190 }191 192 /* USB Debugging dialog */193 .usb-dialog {194 position: absolute;195 left: 60px;196 right: 60px;197 bottom: 520px;198 height: 540px;199 border-radius: 40px;200 background: rgba(0,0,0,0.75);201 box-shadow: 0 18px 40px rgba(0,0,0,0.5);202 padding: 44px 40px;203 color: #ffffff;204 }205 .usb-title {206 font-size: 60px;207 font-weight: 800;208 margin-bottom: 26px;209 }210 .usb-text {211 font-size: 36px;212 line-height: 1.4;213 opacity: 0.95;214 margin-bottom: 26px;215 }216 .checkbox-row {217 display: flex;218 align-items: center;219 gap: 18px;220 margin-top: 22px;221 font-size: 36px;222 opacity: 0.95;223 }224 .checkbox {225 width: 40px;226 height: 40px;227 border: 2px solid #d7d7d7;228 border-radius: 6px;229 background: rgba(255,255,255,0.05);230 }231 .usb-actions {232 position: absolute;233 right: 30px;234 bottom: 30px;235 display: flex;236 gap: 28px;237 }238 .usb-btn {239 min-width: 170px;240 height: 84px;241 padding: 0 28px;242 border-radius: 42px;243 border: 2px solid rgba(255,255,255,0.3);244 background: rgba(255,255,255,0.12);245 color: #ffffff;246 font-size: 38px;247 font-weight: 700;248 display: flex;249 align-items: center;250 justify-content: center;251 }252 .usb-btn.primary {253 background: #3ea96a;254 border-color: #3ea96a;255 }256</style>257</head>258<body>259<div id="render-target">260 261 <!-- Status bar -->262 <div class="statusbar">263 <div class="time">12:51</div>264 <div class="status-icons">265 <!-- Wi-Fi icon -->266 <svg viewBox="0 0 24 24">267 <path d="M12 18c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm-6.99-7.35a13.98 13.98 0 0 1 13.98 0l-1.41 1.41a11.98 11.98 0 0 0-11.16 0L5.01 10.65zm3.49 3.49a9.01 9.01 0 0 1 9 0l-1.41 1.41a7.01 7.01 0 0 0-6.18 0l-1.41-1.41zm3.51 3.51a4 4 0 0 1 4 0l-1.41 1.41a2 2 0 0 0-1.18 0L12 17.65z"/>268 </svg>269 <!-- Battery icon -->270 <svg viewBox="0 0 24 24">271 <path d="M16 6h1v2h1c.55 0 1 .45 1 1v8c0 .55-.45 1-1 1h-1v2h-1V6zM3 9c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v8c0 .55-.45 1-1 1H4c-.55 0-1-.45-1-1V9zm2 1v6h8v-6H5z"/>272 </svg>273 </div>274 </div>275 276 <!-- App grid -->277 <div class="app-grid">278 <!-- Row 1 -->279 <div class="tile">280 <div class="app-icon irctc">IR</div>281 <div class="label">IRCTC Rail...</div>282 </div>283 <div class="tile">284 <div class="app-icon falou">FA</div>285 <div class="label">Falou</div>286 </div>287 <div class="tile">288 <div class="app-icon memrise">ME</div>289 <div class="label">Memrise</div>290 </div>291 <div class="tile">292 <div class="app-icon babbel">B</div>293 <div class="label">Babbel</div>294 </div>295 <!-- Row 2 -->296 <div class="tile">297 <div class="app-icon shareme">∞</div>298 <div class="label">ShareMe</div>299 </div>300 <div class="tile">301 <div class="app-icon etsy">E</div>302 <div class="label">Etsy</div>303 </div>304 <div class="tile">305 <div class="app-icon artsy">A</div>306 <div class="label">Artsy</div>307 </div>308 <div class="tile">309 <div class="app-icon quickart">Q</div>310 <div class="label">QuickArt</div>311 </div>312 <!-- Row 3 -->313 <div class="tile">314 <div class="app-icon artsticker">AS</div>315 <div class="label">ArtSticker</div>316 </div>317 <div class="tile">318 <div class="app-icon peggy">P</div>319 <div class="label">Peggy</div>320 </div>321 <div class="tile">322 <div class="app-icon rtistiq">RT</div>323 <div class="label">RtistiQ</div>324 </div>325 <div class="tile">326 <div class="app-icon udemy">U</div>327 <div class="label">Udemy</div>328 </div>329 <!-- Row 4 -->330 <div class="tile">331 <div class="app-icon byjus">B</div>332 <div class="label">BYJU’S Exa...</div>333 </div>334 <div class="tile">335 <div class="app-icon edurev">ER</div>336 <div class="label">EduRev</div>337 </div>338 <div class="tile">339 <div class="app-icon quickey">Q+</div>340 <div class="label">Quickey Cal...</div>341 </div>342 <div class="tile">343 <div class="app-icon clevcalc">C+</div>344 <div class="label">ClevCalc</div>345 </div>346 </div>347 348 <!-- USB debugging dialog -->349 <div class="usb-dialog">350 <div class="usb-title">Allow USB debugging?</div>351 <div class="usb-text">352 The computer's RSA key fingerprint is:<br>353 30:44:CA:0E:5E:6B:D6:CA:15:7A:C9:92:FA:B<br>354 4:61:71355 </div>356 <div class="checkbox-row">357 <div class="checkbox"></div>358 <div>Always allow from this computer</div>359 </div>360 <div class="usb-actions">361 <div class="usb-btn">Cancel</div>362 <div class="usb-btn primary">Allow</div>363 </div>364 </div>365 366 <!-- Dock icons -->367 <div class="dock">368 <div class="dock-icon">Phone</div>369 <div class="dock-icon">Msg</div>370 <div class="dock-icon">Chrome</div>371 <div class="dock-icon">Camera</div>372 </div>373 374 <!-- Search bar -->375 <div class="search-bar">376 <div class="g-logo">G</div>377 <div class="search-placeholder">Search...</div>378 <div class="action">379 <!-- Mic -->380 <svg viewBox="0 0 24 24">381 <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5-3c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.34 2.5 6.08 5.7 6.58V21h2.6v-3.42C16.5 17.08 19 14.34 19 11h-2z"/>382 </svg>383 </div>384 <div class="action">385 <!-- Camera -->386 <svg viewBox="0 0 24 24">387 <path d="M9 4h6l2 2h3c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2h3l2-2zm3 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 2.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5z"/>388 </svg>389 </div>390 </div>391 392 <!-- Gesture bar -->393 <div class="gesture"></div>394 395</div>396</body>397</html>