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 Screen Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: radial-gradient(1400px 800px at 30% 10%, #8aa18e 0%, #6f8a77 40%, #5a7364 70%, #4e6657 100%);12 }13 14 /* Subtle abstract curved overlays to mimic wallpaper */15 .wall-curve {16 position: absolute; border-radius: 1000px; filter: blur(1px); opacity: 0.35;17 border: 6px solid rgba(0,0,0,0.35);18 }19 .curve-a { width: 900px; height: 1900px; top: -250px; left: 520px; transform: rotate(12deg); }20 .curve-b { width: 700px; height: 1800px; top: 200px; left: 420px; transform: rotate(-8deg); opacity: 0.25; }21 .curve-c { width: 1200px; height: 1600px; top: 580px; left: -250px; transform: rotate(18deg); opacity: 0.2; }22 23 /* Status bar */24 .status-bar { position: absolute; top: 28px; left: 36px; right: 36px; height: 60px; color: #ffffff; }25 .status-left { font-size: 36px; font-weight: 600; letter-spacing: 0.5px; float: left; }26 .status-center { float: left; margin-left: 28px; display: flex; gap: 18px; align-items: center; }27 .status-right { float: right; display: flex; gap: 20px; align-items: center; }28 .dot { width: 10px; height: 10px; background: #ffffff; border-radius: 50%; opacity: 0.9; }29 .ic { width: 34px; height: 34px; }30 31 /* App grid */32 .apps {33 position: absolute; left: 44px; right: 44px; top: 190px;34 display: grid; grid-template-columns: repeat(4, 1fr);35 column-gap: 44px; row-gap: 92px;36 }37 .app { display: flex; flex-direction: column; align-items: center; }38 .icon {39 width: 150px; height: 150px; border-radius: 50%;40 display: flex; justify-content: center; align-items: center;41 color: #fff; font-weight: 700; font-size: 56px; box-shadow: 0 10px 24px rgba(0,0,0,0.35);42 }43 .label {44 margin-top: 16px; font-size: 32px; color: #f1f1f1; text-shadow: 0 2px 2px rgba(0,0,0,0.35);45 text-align: center; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;46 }47 48 /* Specific icon stylings (simple brand-like hints) */49 .i-android { background: #2f7f52; position: relative; }50 .i-android svg { width: 86px; height: 86px; }51 .i-kayak { background: #ff7b2c; }52 .i-expedia { background: #ffd64e; color: #1c1c1c; font-size: 72px; }53 .i-firstcry { background: #b673d1; }54 .i-flipkart { background: #2a7eef; }55 .i-doordash { background: #e53c34; }56 .i-chat { background: #2bab62; }57 .i-instagram {58 background: conic-gradient(from 180deg, #ffdc80, #fcaf45, #f77737, #f56040, #fd1d1d, #c13584, #833ab4, #5851db, #405de6, #ffdc80);59 border: 6px solid rgba(255,255,255,0.35);60 color: #fff; font-size: 46px;61 }62 .i-gallery { background: #2a72f0; }63 .i-nykaa { background: #0b0b0b; }64 .i-citymapper { background: #2fb84d; }65 .i-zara { background: #ffffff; color: #111; font-weight: 800; }66 .i-hm { background: #ffffff; color: #d3242b; font-weight: 800; font-size: 48px; }67 .i-amazon { background: #d9b481; color: #111; }68 .i-farfetch { background: #ffffff; color: #111; }69 70 /* Dock row */71 .dock {72 position: absolute; left: 120px; right: 120px; bottom: 310px;73 display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 80px;74 align-items: center; justify-items: center;75 }76 .dock .icon { width: 140px; height: 140px; font-size: 40px; }77 .dock .phone { background: #3c86f1; }78 .dock .messages { background: #7fb5ff; }79 .dock .chrome {80 background: radial-gradient(circle at 50% 50%, #4db6ff 0%, #3aa0e8 40%, #2a79c5 60%), #fff;81 border: 6px solid #fff;82 }83 .dock .camera { background: #ffffff; color: #1a1a1a; }84 85 /* Search pill */86 .search-pill {87 position: absolute; left: 80px; right: 80px; bottom: 156px;88 height: 120px; background: #2a2a2a; border-radius: 60px;89 box-shadow: 0 10px 26px rgba(0,0,0,0.45); display: flex; align-items: center; padding: 0 28px; gap: 24px;90 }91 .search-g {92 width: 70px; height: 70px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center;93 font-weight: 800; color: #4285F4; font-size: 36px;94 position: relative;95 }96 .search-right { margin-left: auto; display: flex; gap: 26px; align-items: center; }97 .search-right .ic { width: 46px; height: 46px; }98 99 /* Gesture bar */100 .gesture {101 position: absolute; bottom: 72px; left: 50%; transform: translateX(-50%);102 width: 280px; height: 12px; background: #e6e6e6; border-radius: 8px; opacity: 0.95;103 }104 105 /* Minimal svg icon defaults */106 svg { display: block; }107 108</style>109</head>110<body>111<div id="render-target">112 113 <!-- abstract wallpaper curves -->114 <div class="wall-curve curve-a"></div>115 <div class="wall-curve curve-b"></div>116 <div class="wall-curve curve-c"></div>117 118 <!-- Status Bar -->119 <div class="status-bar">120 <div class="status-left">1:43</div>121 <div class="status-center">122 <div class="dot"></div>123 <svg class="ic" viewBox="0 0 24 24">124 <circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"/>125 <circle cx="12" cy="12" r="3" fill="#fff"/>126 </svg>127 <svg class="ic" viewBox="0 0 24 24">128 <path d="M3 5h18v14H3z" fill="none" stroke="#fff" stroke-width="2"/>129 <path d="M3 9h18" stroke="#fff" stroke-width="2"/>130 </svg>131 <svg class="ic" viewBox="0 0 24 24">132 <polygon points="10,7 17,12 10,17" fill="#fff"/>133 </svg>134 </div>135 <div class="status-right">136 <svg class="ic" viewBox="0 0 24 24">137 <path d="M2 6h20" stroke="#fff" stroke-width="2"/>138 <path d="M12 6v12" stroke="#fff" stroke-width="2"/>139 <path d="M2 18h20" stroke="#fff" stroke-width="2"/>140 </svg>141 <svg class="ic" viewBox="0 0 24 24">142 <path d="M3 16h18c0-5-4-9-9-9s-9 4-9 9z" fill="none" stroke="#fff" stroke-width="2"/>143 <circle cx="12" cy="16" r="2" fill="#fff"/>144 </svg>145 <svg class="ic" viewBox="0 0 24 24">146 <rect x="3" y="5" width="18" height="14" rx="3" ry="3" fill="none" stroke="#fff" stroke-width="2"/>147 <rect x="15" y="6" width="6" height="12" rx="2" ry="2" fill="#fff"/>148 </svg>149 </div>150 </div>151 152 <!-- App Grid -->153 <div class="apps">154 155 <div class="app">156 <div class="icon i-android">157 <svg viewBox="0 0 64 64">158 <rect x="18" y="26" width="28" height="22" rx="6" ry="6" fill="#c8f0d6"/>159 <circle cx="26" cy="20" r="3" fill="#c8f0d6"/>160 <circle cx="38" cy="20" r="3" fill="#c8f0d6"/>161 <rect x="22" y="48" width="6" height="12" fill="#c8f0d6"/>162 <rect x="36" y="48" width="6" height="12" fill="#c8f0d6"/>163 </svg>164 </div>165 <div class="label">DBW Show...</div>166 </div>167 168 <div class="app">169 <div class="icon i-kayak">K</div>170 <div class="label">KAYAK</div>171 </div>172 173 <div class="app">174 <div class="icon i-expedia">175 <svg viewBox="0 0 64 64">176 <path d="M22 44 L42 24" stroke="#111" stroke-width="10" stroke-linecap="round"/>177 <path d="M42 24 H28 V10" stroke="#111" stroke-width="10" stroke-linecap="round"/>178 </svg>179 </div>180 <div class="label">Expedia</div>181 </div>182 183 <div class="app">184 <div class="icon i-firstcry">fc</div>185 <div class="label">FirstCry</div>186 </div>187 188 <div class="app">189 <div class="icon i-flipkart">190 <svg viewBox="0 0 64 64">191 <path d="M20 18 h24 v28 H20 z" fill="#ffd447"/>192 <path d="M24 18 v-8 h16 v8" fill="#ffd447" stroke="#ffd447"/>193 </svg>194 </div>195 <div class="label">Flipkart</div>196 </div>197 198 <div class="app">199 <div class="icon i-doordash">D</div>200 <div class="label">DoorDash</div>201 </div>202 203 <div class="app">204 <div class="icon i-chat">205 <svg viewBox="0 0 64 64">206 <path d="M10 14 h44 v26 H26 l-10 10 v-10 H10 z" fill="#e8fff1"/>207 </svg>208 </div>209 <div class="label">Chat</div>210 </div>211 212 <div class="app">213 <div class="icon i-instagram">IG</div>214 <div class="label">Instagram</div>215 </div>216 217 <div class="app">218 <div class="icon i-gallery">219 <svg viewBox="0 0 64 64">220 <circle cx="22" cy="30" r="12" fill="#ffd54f"/>221 <circle cx="42" cy="40" r="8" fill="#ffed85"/>222 <rect x="8" y="46" width="48" height="8" fill="#fff"/>223 </svg>224 </div>225 <div class="label">Gallery</div>226 </div>227 228 <div class="app">229 <div class="icon i-nykaa">N</div>230 <div class="label">NykaaFashi...</div>231 </div>232 233 <div class="app">234 <div class="icon i-citymapper">235 <svg viewBox="0 0 64 64">236 <circle cx="18" cy="32" r="4" fill="#fff"/>237 <circle cx="46" cy="32" r="4" fill="#fff"/>238 <path d="M26 32 h12 l6 6" stroke="#fff" stroke-width="6" stroke-linecap="round"/>239 </svg>240 </div>241 <div class="label">Citymapper</div>242 </div>243 244 <div class="app">245 <div class="icon i-zara">ZARA</div>246 <div class="label">ZARA</div>247 </div>248 249 <div class="app">250 <div class="icon i-hm">H&M</div>251 <div class="label">H&M</div>252 </div>253 254 <div class="app">255 <div class="icon i-amazon">256 <svg viewBox="0 0 64 64">257 <path d="M18 40 C32 48 44 40 44 40" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round"/>258 <rect x="34" y="14" width="12" height="12" fill="#58b4ff"/>259 </svg>260 </div>261 <div class="label">Amazon</div>262 </div>263 264 <div class="app">265 <div class="icon i-farfetch">FF</div>266 <div class="label">Farfetch</div>267 </div>268 269 </div>270 271 <!-- Dock icons -->272 <div class="dock">273 <div class="icon phone">274 <svg viewBox="0 0 64 64">275 <path d="M18 14 h28 v36 H18 z" fill="#fff"/>276 <circle cx="32" cy="46" r="4" fill="#3c86f1"/>277 </svg>278 </div>279 <div class="icon messages">280 <svg viewBox="0 0 64 64">281 <rect x="14" y="16" width="36" height="24" rx="6" fill="#fff"/>282 <path d="M20 40 l-6 8 v-8" stroke="#fff" stroke-width="2"/>283 </svg>284 </div>285 <div class="icon chrome">286 <svg viewBox="0 0 64 64">287 <circle cx="32" cy="32" r="20" fill="#fff"/>288 <circle cx="32" cy="32" r="9" fill="#4db6ff"/>289 <path d="M32 12 a20 20 0 0 1 18 12 H32" fill="#ea4335"/>290 <path d="M14 26 a20 20 0 0 1 10 -14 l8 14" fill="#fbbc05"/>291 <path d="M52 26 a20 20 0 0 1 -8 22 l-12 -8" fill="#34a853"/>292 </svg>293 </div>294 <div class="icon camera">295 <svg viewBox="0 0 64 64">296 <rect x="12" y="18" width="40" height="28" rx="6" fill="#eaeaea" stroke="#1a1a1a" stroke-width="2"/>297 <circle cx="32" cy="32" r="10" fill="#9cc8ff" stroke="#1a1a1a" stroke-width="2"/>298 <rect x="24" y="12" width="16" height="8" rx="3" fill="#1a1a1a"/>299 </svg>300 </div>301 </div>302 303 <!-- Search pill -->304 <div class="search-pill">305 <div class="search-g">G</div>306 <div style="color:#cfcfcf; font-size:34px;">Search</div>307 <div class="search-right">308 <svg class="ic" viewBox="0 0 24 24">309 <circle cx="10" cy="10" r="7" fill="none" stroke="#fff" stroke-width="2"/>310 <line x1="15.5" y1="15.5" x2="22" y2="22" stroke="#fff" stroke-width="2"/>311 </svg>312 <svg class="ic" viewBox="0 0 24 24">313 <rect x="8" y="3" width="8" height="18" rx="4" fill="#fff"/>314 </svg>315 <svg class="ic" viewBox="0 0 24 24">316 <rect x="3" y="7" width="18" height="12" rx="3" fill="none" stroke="#fff" stroke-width="2"/>317 <circle cx="12" cy="13" r="4" fill="#fff"/>318 </svg>319 </div>320 </div>321 322 <!-- Gesture bar -->323 <div class="gesture"></div>324 325</div>326</body>327</html>