GD-ML/AndroidCode
13.4k
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>Mobile Home Screen Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: radial-gradient(1200px 1200px at 50% 20%, #333 0%, #1f1f1f 55%, #161616 100%);15 font-family: Roboto, Arial, sans-serif;16 color: #fff;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 right: 0;25 height: 110px;26 padding: 24px 36px 0 36px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #fff;31 pointer-events: none;32 }33 .status-left {34 display: flex;35 align-items: center;36 gap: 18px;37 font-size: 40px;38 font-weight: 600;39 letter-spacing: 0.5px;40 text-shadow: 0 2px 3px rgba(0,0,0,0.7);41 }42 .notif-square {43 width: 26px;44 height: 26px;45 background: #fff;46 border-radius: 4px;47 }48 .status-right {49 display: flex;50 align-items: center;51 gap: 26px;52 }53 .status-icon svg { width: 36px; height: 36px; fill: #fff; }54 55 /* App grid */56 .app-grid {57 position: absolute;58 top: 210px;59 left: 0;60 right: 0;61 padding: 0 80px;62 display: grid;63 grid-template-columns: repeat(4, 1fr);64 grid-row-gap: 120px;65 justify-items: center;66 }67 .app {68 width: 220px;69 text-align: center;70 }71 .icon-circle {72 width: 166px;73 height: 166px;74 border-radius: 50%;75 background: #fff;76 display: flex;77 align-items: center;78 justify-content: center;79 box-shadow: 0 8px 20px rgba(0,0,0,0.35);80 position: relative;81 }82 .label {83 margin-top: 18px;84 font-size: 34px;85 line-height: 1.2;86 text-shadow: 0 2px 3px rgba(0,0,0,0.8);87 }88 89 /* Icon drawings (simple approximations) */90 .icon-notes {91 width: 120px;92 height: 120px;93 border-radius: 14px;94 background:95 linear-gradient(#f8d255 0 34px, #ffffff 34px 100%);96 position: relative;97 overflow: hidden;98 }99 .icon-notes::after {100 content: "";101 position: absolute;102 left: 14px;103 right: 14px;104 top: 46px;105 height: 70px;106 background: repeating-linear-gradient(107 to bottom,108 #e6e6e6 0px,109 #e6e6e6 3px,110 transparent 3px,111 transparent 22px112 );113 }114 115 .icon-onedrive svg,116 .icon-terabox svg,117 .icon-edmunds svg,118 .icon-houzz svg,119 .icon-autoscout svg,120 .icon-ssbeauty svg { width: 120px; height: 120px; }121 122 /* Dock */123 .dock {124 position: absolute;125 left: 0;126 right: 0;127 bottom: 330px;128 display: flex;129 justify-content: center;130 gap: 90px;131 }132 .dock .icon-circle { width: 140px; height: 140px; }133 134 /* Search bar */135 .search-bar {136 position: absolute;137 left: 60px;138 right: 60px;139 bottom: 150px;140 height: 120px;141 background: rgba(50, 50, 50, 0.95);142 border-radius: 60px;143 display: flex;144 align-items: center;145 padding: 0 28px;146 box-shadow: 0 10px 26px rgba(0,0,0,0.5);147 }148 .g-chip {149 width: 74px;150 height: 74px;151 border-radius: 20px;152 background: #2d2d2d;153 display: flex;154 align-items: center;155 justify-content: center;156 margin-right: 18px;157 }158 .g-chip span {159 font-weight: 700;160 font-size: 42px;161 letter-spacing: 0.5px;162 background: conic-gradient(#4285F4 0 25%, #34A853 25% 50%, #FBBC05 50% 75%, #EA4335 75% 100%);163 -webkit-background-clip: text;164 background-clip: text;165 color: transparent;166 }167 .search-placeholder {168 flex: 1;169 height: 60px;170 border-radius: 30px;171 opacity: 0.25;172 background: #e0e0e0;173 }174 .search-actions {175 display: flex;176 gap: 22px;177 margin-left: 22px;178 }179 .search-actions svg { width: 44px; height: 44px; }180 181 /* Gesture pill */182 .gesture {183 position: absolute;184 left: 50%;185 transform: translateX(-50%);186 bottom: 40px;187 width: 210px;188 height: 10px;189 background: #e5e5e5;190 border-radius: 10px;191 opacity: 0.9;192 }193 194 /* Minor helpers */195 .muted { opacity: 0.9; }196</style>197</head>198<body>199<div id="render-target">200 <!-- Status bar -->201 <div class="status-bar">202 <div class="status-left">203 <div>9:20</div>204 <div class="notif-square"></div>205 </div>206 <div class="status-right">207 <div class="status-icon" title="Wi‑Fi">208 <svg viewBox="0 0 24 24">209 <path d="M12 20a2 2 0 1 0 0-0.01z"></path>210 <path d="M2 9c5.5-5 14.5-5 20 0l-2 2c-4-3.7-12-3.7-16 0L2 9z"></path>211 <path d="M6 13c3.5-3 8.5-3 12 0l-2 2c-2.2-1.8-5.8-1.8-8 0l-2-2z"></path>212 <path d="M9.5 16.5c1.4-1.2 3.6-1.2 5 0L12 19l-2.5-2.5z"></path>213 </svg>214 </div>215 <div class="status-icon" title="Battery">216 <svg viewBox="0 0 28 18">217 <rect x="1" y="3" width="22" height="12" rx="2" ry="2" fill="#fff"></rect>218 <rect x="2.8" y="4.8" width="18.4" height="8.4" fill="#0f0"></rect>219 <rect x="23.5" y="7" width="3.5" height="4" rx="1" fill="#fff"></rect>220 </svg>221 </div>222 </div>223 </div>224 225 <!-- App grid -->226 <div class="app-grid">227 <!-- Notes -->228 <div class="app">229 <div class="icon-circle">230 <div class="icon-notes"></div>231 </div>232 <div class="label">Notes</div>233 </div>234 235 <!-- OneDrive -->236 <div class="app">237 <div class="icon-circle">238 <div class="icon-onedrive">239 <svg viewBox="0 0 64 64">240 <defs>241 <linearGradient id="odg" x1="0" y1="0" x2="0" y2="1">242 <stop offset="0" stop-color="#2a7de1"/>243 <stop offset="1" stop-color="#1b56b6"/>244 </linearGradient>245 </defs>246 <path d="M20 34c2-9 10-14 18-10 5-3 12-2 16 4-6-1-10 1-12 4-6-4-14-3-22 2z" fill="#4aa3ff"/>247 <path d="M12 40c0-6 6-12 14-12 6 0 12 3 15 8 6 0 11 4 11 8H12z" fill="url(#odg)"></path>248 </svg>249 </div>250 </div>251 <div class="label">OneDrive</div>252 </div>253 254 <!-- TeraBox -->255 <div class="app">256 <div class="icon-circle">257 <div class="icon-terabox">258 <svg viewBox="0 0 64 64">259 <defs>260 <linearGradient id="tb" x1="0" y1="0" x2="0" y2="1">261 <stop offset="0" stop-color="#48a8ff"/>262 <stop offset="1" stop-color="#0a68d9"/>263 </linearGradient>264 </defs>265 <circle cx="32" cy="32" r="28" fill="url(#tb)"></circle>266 <path d="M32 18l10 10h-6v10h-8V28h-6z" fill="#fff" />267 <rect x="23" y="40" width="18" height="6" rx="3" fill="#fff"/>268 <text x="32" y="52" font-size="10" text-anchor="middle" fill="#0a68d9" font-weight="700">1024GB</text>269 </svg>270 </div>271 </div>272 <div class="label">TeraBox</div>273 </div>274 275 <!-- Edmunds -->276 <div class="app">277 <div class="icon-circle">278 <div class="icon-edmunds">279 <svg viewBox="0 0 64 64">280 <rect x="10" y="26" width="44" height="16" rx="6" fill="#2a7de1"></rect>281 <circle cx="22" cy="44" r="4" fill="#2a7de1"></circle>282 <circle cx="42" cy="44" r="4" fill="#2a7de1"></circle>283 <rect x="22" y="22" width="20" height="6" rx="3" fill="#2a7de1"></rect>284 <circle cx="22" cy="44" r="2" fill="#fff"></circle>285 <circle cx="42" cy="44" r="2" fill="#fff"></circle>286 </svg>287 </div>288 </div>289 <div class="label">Edmunds</div>290 </div>291 292 <!-- Houzz -->293 <div class="app">294 <div class="icon-circle">295 <div class="icon-houzz">296 <svg viewBox="0 0 64 64">297 <rect x="14" y="14" width="16" height="36" fill="#40c06a"></rect>298 <rect x="34" y="24" width="16" height="26" fill="#40c06a"></rect>299 </svg>300 </div>301 </div>302 <div class="label">Houzz</div>303 </div>304 305 <!-- AutoScout24 -->306 <div class="app">307 <div class="icon-circle">308 <div class="icon-autoscout">309 <svg viewBox="0 0 64 64">310 <circle cx="32" cy="32" r="28" fill="#ffe01b"></circle>311 <rect x="12" y="18" width="40" height="16" rx="4" fill="#fff"></rect>312 <text x="32" y="29" font-size="12" text-anchor="middle" fill="#111" font-weight="700">Auto</text>313 <rect x="12" y="38" width="40" height="10" rx="4" fill="#111"></rect>314 <text x="32" y="46" font-size="10" text-anchor="middle" fill="#fff" font-weight="700">Scout24</text>315 </svg>316 </div>317 </div>318 <div class="label">AutoScout24</div>319 </div>320 321 <!-- SSBeauty -->322 <div class="app">323 <div class="icon-circle">324 <div class="icon-ssbeauty">325 <svg viewBox="0 0 64 64">326 <rect x="10" y="10" width="44" height="44" rx="8" fill="#111"></rect>327 <text x="24" y="36" font-size="16" fill="#fff" font-weight="700">SS</text>328 <text x="40" y="36" font-size="16" fill="#c0392b" font-weight="700">B</text>329 </svg>330 </div>331 </div>332 <div class="label">SSBeauty</div>333 </div>334 </div>335 336 <!-- Dock icons -->337 <div class="dock">338 <!-- Phone -->339 <div class="icon-circle">340 <svg viewBox="0 0 64 64" width="90" height="90">341 <circle cx="32" cy="32" r="30" fill="#ffffff00"></circle>342 <path d="M40 42c-8-3-15-10-18-18l6-6 4 4-3 3c2 4 5 7 9 9l3-3 4 4-5 7z" fill="#2a7de1"></path>343 </svg>344 </div>345 <!-- Messages -->346 <div class="icon-circle">347 <svg viewBox="0 0 64 64" width="90" height="90">348 <rect x="12" y="14" width="40" height="30" rx="8" fill="#2a7de1"></rect>349 <polygon points="22,44 26,36 42,36 22,44" fill="#2a7de1"></polygon>350 <circle cx="24" cy="28" r="3" fill="#fff"></circle>351 <circle cx="32" cy="28" r="3" fill="#fff"></circle>352 <circle cx="40" cy="28" r="3" fill="#fff"></circle>353 </svg>354 </div>355 <!-- Chrome -->356 <div class="icon-circle">357 <svg viewBox="0 0 64 64" width="90" height="90">358 <circle cx="32" cy="32" r="26" fill="#e74c3c"></circle>359 <path d="M32 6a26 26 0 0 1 22 13H32z" fill="#f1c40f"></path>360 <path d="M12 22a26 26 0 0 0 20 38l10-17-30-21z" fill="#2ecc71"></path>361 <circle cx="32" cy="32" r="10" fill="#1e88e5"></circle>362 <circle cx="32" cy="32" r="5" fill="#bfe3ff"></circle>363 </svg>364 </div>365 <!-- Camera -->366 <div class="icon-circle">367 <svg viewBox="0 0 64 64" width="90" height="90">368 <rect x="14" y="22" width="36" height="24" rx="6" fill="#616161"></rect>369 <rect x="20" y="18" width="12" height="8" rx="2" fill="#4a4a4a"></rect>370 <circle cx="32" cy="34" r="8" fill="#9ec3ff"></circle>371 <circle cx="32" cy="34" r="4" fill="#2a7de1"></circle>372 </svg>373 </div>374 </div>375 376 <!-- Search bar -->377 <div class="search-bar">378 <div class="g-chip"><span>G</span></div>379 <div class="search-placeholder"></div>380 <div class="search-actions">381 <!-- Mic -->382 <svg viewBox="0 0 24 24" fill="#fff">383 <path d="M12 3a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3z"></path>384 <path d="M5 12a7 7 0 0 0 14 0h-2a5 5 0 0 1-10 0H5z"></path>385 <rect x="11" y="19" width="2" height="3" rx="1" fill="#fff"></rect>386 </svg>387 <!-- Lens/Camera -->388 <svg viewBox="0 0 24 24" fill="#fff">389 <rect x="4" y="7" width="16" height="10" rx="3"></rect>390 <circle cx="12" cy="12" r="3.5" fill="#8ab4f8"></circle>391 <rect x="8" y="5" width="4" height="3" rx="1" fill="#fff"></rect>392 </svg>393 </div>394 </div>395 396 <!-- Gesture pill -->397 <div class="gesture"></div>398</div>399</body>400</html>