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>Android Home Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: linear-gradient(180deg, #5f7480 0%, #6c8189 100%);15 font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;16 color: #e9eef0;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 28px;23 left: 36px;24 right: 36px;25 height: 48px;26 color: #e9eef0;27 }28 .status-time {29 font-size: 34px;30 letter-spacing: 0.5px;31 }32 .status-icons {33 position: absolute;34 right: 0;35 top: 0;36 height: 48px;37 display: flex;38 align-items: center;39 gap: 24px;40 }41 .status-icons svg { opacity: 0.9; }42 43 /* Date */44 .date {45 position: absolute;46 top: 230px;47 left: 72px;48 font-size: 64px;49 font-weight: 300;50 text-shadow: 0 2px 3px rgba(0,0,0,0.2);51 }52 53 /* App icons common */54 .apps-row {55 position: absolute;56 left: 72px;57 width: 936px; /* 1080 - 2*72 */58 display: flex;59 justify-content: space-between;60 }61 .app {62 width: 260px;63 text-align: center;64 }65 .icon {66 width: 160px;67 height: 160px;68 margin: 0 auto;69 border-radius: 50%;70 background: #ffffff;71 box-shadow: 0 8px 18px rgba(0,0,0,0.25);72 display: flex;73 align-items: center;74 justify-content: center;75 }76 .icon.dark { background: #0a0a0a; }77 .name {78 margin-top: 22px;79 font-size: 36px;80 color: #e9eef0;81 text-shadow: 0 2px 3px rgba(0,0,0,0.35);82 }83 84 /* Dock row icons (slightly larger spacing) */85 .dock-row {86 position: absolute;87 left: 72px;88 width: 936px;89 display: flex;90 justify-content: space-between;91 }92 93 /* Search bar */94 .search-bar {95 position: absolute;96 left: 72px;97 width: 936px;98 height: 120px;99 border-radius: 60px;100 background: #ffffff;101 box-shadow: 0 14px 28px rgba(0,0,0,0.28);102 display: flex;103 align-items: center;104 padding: 0 28px;105 color: #6b6b6b;106 }107 .search-left {108 display: flex;109 align-items: center;110 gap: 18px;111 font-size: 38px;112 color: #8a8a8a;113 }114 .search-right {115 margin-left: auto;116 display: flex;117 align-items: center;118 gap: 30px;119 }120 121 /* Gesture bar */122 .gesture {123 position: absolute;124 bottom: 42px;125 left: 50%;126 transform: translateX(-50%);127 width: 240px;128 height: 10px;129 border-radius: 6px;130 background: rgba(255,255,255,0.9);131 }132</style>133</head>134<body>135<div id="render-target">136 137 <!-- Status Bar -->138 <div class="status-bar">139 <div class="status-time">12:44</div>140 <div class="status-icons">141 <!-- Wi-Fi -->142 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">143 <path d="M2 8c5.5-4.7 14.5-4.7 20 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.9"/>144 <path d="M5 11c4-3.5 10-3.5 14 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.9"/>145 <path d="M8 14c2.5-2.2 5.5-2.2 8 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.9"/>146 <circle cx="12" cy="18" r="1.6" fill="#ffffff"/>147 </svg>148 <!-- Battery -->149 <svg width="42" height="36" viewBox="0 0 28 16" fill="none">150 <rect x="1" y="3" width="22" height="10" rx="2" stroke="#ffffff" stroke-width="2"/>151 <rect x="3.5" y="5.5" width="14" height="5" rx="1.2" fill="#ffffff"/>152 <rect x="23.5" y="6" width="3" height="4" rx="1" fill="#ffffff"/>153 </svg>154 </div>155 </div>156 157 <!-- Date -->158 <div class="date">Fri, Jun 30</div>159 160 <!-- Top apps row (Nike, adidas, Myntra) -->161 <div class="apps-row" style="top: 700px;">162 <!-- Nike -->163 <div class="app">164 <div class="icon">165 <!-- Simplified swoosh -->166 <svg width="110" height="110" viewBox="0 0 110 110">167 <path d="M20 68c20-3 45-16 70-28-10 12-34 28-51 32-14 3-22-3-19-4z" fill="#0b0b0b"/>168 </svg>169 </div>170 <div class="name">Nike</div>171 </div>172 173 <!-- adidas -->174 <div class="app">175 <div class="icon dark">176 <svg width="110" height="110" viewBox="0 0 110 110">177 <rect x="23" y="56" width="16" height="22" transform="rotate(-30 23 56)" fill="#ffffff"/>178 <rect x="45" y="46" width="16" height="32" transform="rotate(-30 45 46)" fill="#ffffff"/>179 <rect x="67" y="36" width="16" height="42" transform="rotate(-30 67 36)" fill="#ffffff"/>180 </svg>181 </div>182 <div class="name">adidas</div>183 </div>184 185 <!-- Myntra -->186 <div class="app">187 <div class="icon">188 <svg width="110" height="110" viewBox="0 0 110 110">189 <path d="M30 76c12-30 20-42 25-34 6 8-9 24-4 29 4 5 20-17 26-29 10 16 9 33-6 34-25 2-33-1-41 0z" fill="#ff3b7a"/>190 <path d="M56 72c8-10 16-26 20-30 8 8 8 30-6 31-6 0-10-1-14-1z" fill="#ff8a00" opacity="0.9"/>191 </svg>192 </div>193 <div class="name">Myntra</div>194 </div>195 </div>196 197 <!-- Second row (ZARA, H&M) -->198 <div class="apps-row" style="top: 980px;">199 <!-- ZARA -->200 <div class="app">201 <div class="icon">202 <div style="font-size:48px;color:#111; font-weight:700; letter-spacing:3px;">ZARA</div>203 </div>204 <div class="name">ZARA</div>205 </div>206 207 <!-- H&M -->208 <div class="app">209 <div class="icon">210 <div style="font-size:52px;color:#c51616; font-weight:700;">H&M</div>211 </div>212 <div class="name">H&M</div>213 </div>214 215 <!-- spacer (empty third slot) -->216 <div class="app" style="opacity:0;"></div>217 </div>218 219 <!-- Google apps row (Play Store, Gmail, Photos, YouTube) -->220 <div class="apps-row" style="top: 1420px;">221 <!-- Play Store -->222 <div class="app">223 <div class="icon">224 <svg width="110" height="110" viewBox="0 0 110 110">225 <polygon points="30,35 60,55 30,75" fill="#34a853"/>226 <polygon points="60,55 78,65 68,78 48,66" fill="#4285f4"/>227 <polygon points="60,55 78,45 68,32 48,44" fill="#fbbc04"/>228 <polygon points="30,35 30,75 40,70 40,40" fill="#ea4335"/>229 </svg>230 </div>231 <div class="name">Play Store</div>232 </div>233 234 <!-- Gmail -->235 <div class="app">236 <div class="icon">237 <svg width="110" height="110" viewBox="0 0 110 110">238 <rect x="26" y="40" width="58" height="34" rx="6" fill="#fff" stroke="#cfd8dc"/>239 <path d="M26 44l29 20 29-20" fill="none" stroke="#ea4335" stroke-width="8" stroke-linejoin="round"/>240 <path d="M26 44l0 28" stroke="#34a853" stroke-width="8"/>241 <path d="M84 44l0 28" stroke="#4285f4" stroke-width="8"/>242 <path d="M39 44l16 11 16-11" fill="none" stroke="#fbbc04" stroke-width="8"/>243 </svg>244 </div>245 <div class="name">Gmail</div>246 </div>247 248 <!-- Photos -->249 <div class="app">250 <div class="icon">251 <svg width="110" height="110" viewBox="0 0 110 110">252 <circle cx="55" cy="55" r="12" fill="#fff"/>253 <path d="M55 18v25a12 12 0 0 1-12-12c0-7 5-13 12-13z" fill="#4285f4"/>254 <path d="M92 55H67a12 12 0 0 1 12-12c7 0 13 5 13 12z" fill="#34a853"/>255 <path d="M55 92V67a12 12 0 0 1 12 12c0 7-5 13-12 13z" fill="#fbbc04"/>256 <path d="M18 55h25a12 12 0 0 1-12 12c-7 0-13-5-13-12z" fill="#ea4335"/>257 </svg>258 </div>259 <div class="name">Photos</div>260 </div>261 262 <!-- YouTube -->263 <div class="app">264 <div class="icon">265 <svg width="110" height="110" viewBox="0 0 110 110">266 <rect x="26" y="38" width="58" height="34" rx="10" fill="#ff0000"/>267 <polygon points="50,44 50,66 70,55" fill="#ffffff"/>268 </svg>269 </div>270 <div class="name">YouTube</div>271 </div>272 </div>273 274 <!-- Dock icons (Phone, Messages, Chrome, Camera) -->275 <div class="dock-row" style="top: 1700px;">276 <!-- Phone -->277 <div class="app" style="width: 200px;">278 <div class="icon" style="background:#ffffff;">279 <svg width="110" height="110" viewBox="0 0 110 110">280 <circle cx="55" cy="55" r="50" fill="#4a90e2" opacity="0.12"/>281 <path d="M39 35l10 6c2 1 2 4 1 5l-5 6c5 9 12 15 20 20l6-5c2-1 4-1 5 1l6 10c1 2 0 4-2 5-5 3-11 4-16 2-10-4-26-20-30-30-2-5-1-11 2-16 1-2 3-3 5-2z" fill="#3578e5"/>282 </svg>283 </div>284 </div>285 286 <!-- Messages -->287 <div class="app" style="width: 200px;">288 <div class="icon" style="background:#ffffff;">289 <svg width="110" height="110" viewBox="0 0 110 110">290 <rect x="28" y="32" width="54" height="40" rx="12" fill="#1a73e8"/>291 <rect x="38" y="46" width="34" height="8" rx="4" fill="#ffffff" opacity="0.9"/>292 <path d="M54 72l-10 10v-10" fill="#1a73e8"/>293 </svg>294 </div>295 </div>296 297 <!-- Chrome -->298 <div class="app" style="width: 200px;">299 <div class="icon" style="background:#ffffff;">300 <svg width="110" height="110" viewBox="0 0 110 110">301 <circle cx="55" cy="55" r="30" fill="#1a73e8"/>302 <circle cx="55" cy="55" r="16" fill="#ffffff"/>303 <path d="M55 20a35 35 0 0 1 30 17H55z" fill="#ea4335"/>304 <path d="M85 37a35 35 0 0 1-8 48L55 55z" fill="#34a853"/>305 <path d="M77 85a35 35 0 0 1-52-13L55 55z" fill="#fbbc04"/>306 </svg>307 </div>308 </div>309 310 <!-- Camera -->311 <div class="app" style="width: 200px;">312 <div class="icon" style="background:#ffffff;">313 <svg width="110" height="110" viewBox="0 0 110 110">314 <rect x="26" y="40" width="58" height="36" rx="8" fill="#2f3d4c"/>315 <rect x="34" y="32" width="18" height="10" rx="3" fill="#2f3d4c"/>316 <circle cx="55" cy="58" r="12" fill="#4aa3ff"/>317 <circle cx="55" cy="58" r="6" fill="#bfe1ff"/>318 </svg>319 </div>320 </div>321 </div>322 323 <!-- Search Bar -->324 <div class="search-bar" style="top: 1890px;">325 <div class="search-left">326 <!-- Google G -->327 <svg width="54" height="54" viewBox="0 0 24 24">328 <path fill="#EA4335" d="M12 10.2h10.6c.1.6.2 1.2.2 1.8 0 6-4 10-10.8 10A12 12 0 1112 0c3.2 0 5.9 1.2 8 3.1l-3.3 3.2A6.9 6.9 0 0012 4.6a7.4 7.4 0 000 14.8c3.6 0 5.9-2 6.4-4.7H12v-4.5z"/>329 </svg>330 <span>Search</span>331 </div>332 <div class="search-right">333 <!-- Mic -->334 <svg width="44" height="44" viewBox="0 0 24 24">335 <rect x="9" y="4" width="6" height="10" rx="3" fill="#1a73e8"/>336 <path d="M5 11a7 7 0 0014 0" stroke="#34a853" stroke-width="2" fill="none"/>337 <rect x="11" y="18" width="2" height="3" rx="1" fill="#fbbc04"/>338 <rect x="9" y="21" width="6" height="1.5" rx="0.75" fill="#ea4335"/>339 </svg>340 <!-- Lens (camera) -->341 <svg width="48" height="48" viewBox="0 0 24 24">342 <rect x="4" y="7" width="16" height="10" rx="3" fill="#1a73e8" opacity="0.15"/>343 <circle cx="12" cy="12" r="4" fill="#1a73e8"/>344 <rect x="7" y="5" width="4" height="2.5" rx="1" fill="#34a853"/>345 <circle cx="18" cy="9" r="1.5" fill="#fbbc04"/>346 </svg>347 </div>348 </div>349 350 <!-- Labels under Google apps row -->351 <!-- Reused above via .name elements -->352 353 <!-- Gesture bar -->354 <div class="gesture"></div>355</div>356</body>357</html>