GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Android Home Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: radial-gradient(1600px 1600px at 70% 55%, #7e8f80 0%, #6e7f71 40%, #5e6f63 70%, #56695e 100%);13 }14 15 /* soft abstract curves */16 .curve {17 position: absolute;18 border-radius: 50%;19 border: 3px solid rgba(20,30,25,0.35);20 opacity: 0.55;21 }22 .curve.c1 { width: 1400px; height: 2400px; left: 520px; top: 180px; transform: rotate(8deg); border-color: rgba(10,20,15,0.25); }23 .curve.c2 { width: 1100px; height: 2600px; left: -300px; top: -200px; transform: rotate(-12deg); border-color: rgba(0,0,0,0.18); }24 .curve.c3 { width: 900px; height: 1800px; right: -100px; bottom: -200px; transform: rotate(18deg); border-color: rgba(0,0,0,0.25); }25 26 /* Status bar */27 .status-bar {28 position: absolute;29 top: 18px;30 left: 0;31 width: 100%;32 padding: 0 32px;33 color: #ffffff;34 display: flex;35 justify-content: space-between;36 align-items: center;37 font-size: 32px;38 letter-spacing: 0.5px;39 text-shadow: 0 1px 2px rgba(0,0,0,0.25);40 }41 .status-left { display: flex; align-items: center; gap: 18px; }42 .notif-dot {43 width: 14px; height: 14px; background: #ffffff; opacity: 0.9; border-radius: 50%;44 }45 .status-right { display: flex; align-items: center; gap: 22px; }46 .icon-sys { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }47 48 /* Date & weather widget */49 .widget {50 position: absolute;51 top: 120px;52 left: 72px;53 color: #ffffff;54 text-shadow: 0 1px 3px rgba(0,0,0,0.35);55 }56 .widget .date {57 font-size: 64px;58 font-weight: 600;59 margin-bottom: 14px;60 }61 .widget .weather {62 font-size: 36px;63 opacity: 0.95;64 display: flex;65 align-items: center;66 gap: 18px;67 }68 .cloud {69 width: 46px; height: 32px;70 display: inline-flex; align-items: center; justify-content: center;71 }72 73 /* App grid */74 .grid {75 position: absolute;76 top: 1460px;77 left: 0; right: 0;78 width: 100%;79 display: grid;80 grid-template-columns: repeat(4, 1fr);81 row-gap: 110px;82 padding: 0 80px;83 color: #fff;84 text-align: center;85 }86 .app { display: flex; flex-direction: column; align-items: center; }87 .icon-round {88 width: 168px; height: 168px;89 border-radius: 50%;90 background: rgba(255,255,255,0.95);91 box-shadow: 0 8px 20px rgba(0,0,0,0.35), inset 0 0 0 6px rgba(255,255,255,0.25);92 display: flex; align-items: center; justify-content: center;93 position: relative;94 }95 .label { color: #ffffff; font-size: 36px; margin-top: 20px; text-shadow: 0 1px 2px rgba(0,0,0,0.35); }96 97 .badge {98 position: absolute; top: 10px; right: 14px;99 width: 34px; height: 34px;100 background: #b7e6db;101 border: 4px solid #ffffff;102 border-radius: 50%;103 }104 105 /* Dock row under grid */106 .dock {107 position: absolute;108 top: 1780px;109 left: 0; right: 0;110 width: 100%;111 display: grid;112 grid-template-columns: repeat(4, 1fr);113 padding: 0 80px;114 text-align: center;115 }116 .dock .label { margin-top: 18px; font-size: 32px; opacity: 0.95; }117 118 /* Search pill */119 .search-pill {120 position: absolute;121 bottom: 170px;122 left: 90px;123 width: 900px;124 height: 120px;125 background: rgba(20,30,25,0.6);126 border-radius: 70px;127 display: flex;128 align-items: center;129 padding: 0 36px;130 color: #fff;131 box-shadow: 0 10px 30px rgba(0,0,0,0.35);132 }133 .search-pill .g {134 width: 60px; height: 60px; border-radius: 50%;135 background: #2c3b34; display: flex; align-items: center; justify-content: center; margin-right: 24px;136 font-weight: bold;137 }138 .pill-actions { margin-left: auto; display: flex; gap: 26px; }139 .pill-icon {140 width: 60px; height: 60px; border-radius: 12px; background: #2c3b34; display: flex; align-items: center; justify-content: center;141 }142 143 /* Gesture bar */144 .gesture {145 position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);146 width: 300px; height: 10px; background: rgba(0,0,0,0.4); border-radius: 10px;147 }148 149 /* Simplified logos within circles */150 svg { display: block; }151</style>152</head>153<body>154<div id="render-target">155 <!-- Abstract curves to mimic wallpaper -->156 <div class="curve c1"></div>157 <div class="curve c2"></div>158 <div class="curve c3"></div>159 160 <!-- Status bar -->161 <div class="status-bar">162 <div class="status-left">163 <div>8:40</div>164 <div class="notif-dot"></div>165 <div class="notif-dot"></div>166 <div class="notif-dot"></div>167 </div>168 <div class="status-right">169 <!-- Signal/WiFi -->170 <div class="icon-sys">171 <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff"><path d="M12 20l3-3H9l3 3zM2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2z"/></svg>172 </div>173 <!-- Battery -->174 <div class="icon-sys">175 <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff"><path d="M16 6h2a2 2 0 012 2v8a2 2 0 01-2 2h-2v-2h2V8h-2V6z"/><rect x="4" y="6" width="12" height="12" rx="2" ry="2" stroke="#fff" fill="none" stroke-width="2"/><rect x="6" y="8" width="8" height="8" fill="#fff"/></svg>176 </div>177 </div>178 </div>179 180 <!-- Date & weather widget -->181 <div class="widget">182 <div class="date">Tue, Nov 28</div>183 <div class="weather">184 <div class="cloud">185 <svg width="46" height="32" viewBox="0 0 64 32" fill="none">186 <path d="M18 26h24c6 0 10-4 10-8s-3-8-9-8c-1-5-5-8-11-8-7 0-12 6-12 11-6 0-10 4-10 9s4 4 8 4z" fill="#e9eff1" opacity="0.95"/>187 </svg>188 </div>189 <div>19°C · Today 23° / 14° · Cloudy</div>190 </div>191 </div>192 193 <!-- Top grid of apps -->194 <div class="grid">195 <!-- Play Store -->196 <div class="app">197 <div class="icon-round">198 <svg width="110" height="110" viewBox="0 0 64 64">199 <polygon points="10,10 54,32 10,54" fill="#5bc0eb"/>200 <polygon points="10,10 30,22 24,28" fill="#6bcf53"/>201 <polygon points="10,54 30,42 24,36" fill="#ffd54f"/>202 <polygon points="24,28 24,36 30,32" fill="#e84d4d"/>203 </svg>204 </div>205 <div class="label">Play Store</div>206 </div>207 208 <!-- Gmail -->209 <div class="app">210 <div class="icon-round">211 <svg width="118" height="118" viewBox="0 0 64 64">212 <rect x="8" y="14" width="48" height="36" rx="6" fill="#fff" stroke="#ccc"/>213 <path d="M8 20l24 16L56 20v-6H8v6z" fill="none" stroke="#e53935" stroke-width="6"/>214 <path d="M8 20v24h10V26" stroke="#34a853" stroke-width="6" fill="none"/>215 <path d="M56 20v24H46V26" stroke="#4285f4" stroke-width="6" fill="none"/>216 </svg>217 <div class="badge"></div>218 </div>219 <div class="label">Gmail</div>220 </div>221 222 <!-- Photos -->223 <div class="app">224 <div class="icon-round">225 <svg width="118" height="118" viewBox="0 0 64 64">226 <path d="M32 8v20H12a20 20 0 0120-20z" fill="#fbbc05"/>227 <path d="M56 32H36V12a20 20 0 0120 20z" fill="#ea4335"/>228 <path d="M32 56V36h20a20 20 0 01-20 20z" fill="#34a853"/>229 <path d="M8 32h20v20A20 20 0 018 32z" fill="#4285f4"/>230 </svg>231 </div>232 <div class="label">Photos</div>233 </div>234 235 <!-- YouTube -->236 <div class="app">237 <div class="icon-round">238 <svg width="118" height="118" viewBox="0 0 64 64">239 <rect x="10" y="18" width="44" height="28" rx="6" fill="#ff3b30"/>240 <polygon points="28,23 28,41 44,32" fill="#fff"/>241 </svg>242 <div class="badge" style="background:#bfe7dd;"></div>243 </div>244 <div class="label">YouTube</div>245 </div>246 </div>247 248 <!-- Dock row -->249 <div class="dock">250 <!-- Phone -->251 <div class="app">252 <div class="icon-round">253 <svg width="110" height="110" viewBox="0 0 64 64">254 <path d="M18 14c-2 2-2 6 0 10 4 8 10 14 18 18 4 2 8 2 10 0l4-4c1-1 1-3 0-4l-6-4c-1-1-3-1-4 0l-3 3c-4-2-7-5-9-9l3-3c1-1 1-3 0-4l-4-6c-1-1-3-1-4 0l-5 3z" fill="#42a5f5"/>255 </svg>256 </div>257 <div class="label">Phone</div>258 </div>259 260 <!-- Messages -->261 <div class="app">262 <div class="icon-round">263 <svg width="118" height="118" viewBox="0 0 64 64">264 <rect x="10" y="12" width="44" height="34" rx="8" fill="#4285f4"/>265 <rect x="20" y="22" width="24" height="4" fill="#cbe1ff"/>266 <rect x="20" y="30" width="18" height="4" fill="#cbe1ff"/>267 <path d="M22 46l10-8h22" fill="#4285f4"/>268 </svg>269 </div>270 <div class="label">Messages</div>271 </div>272 273 <!-- Chrome -->274 <div class="app">275 <div class="icon-round">276 <svg width="118" height="118" viewBox="0 0 64 64">277 <circle cx="32" cy="32" r="22" fill="#f4b400"/>278 <path d="M10 24h24l10 18A22 22 0 1132 10" fill="#db4437" opacity="0.95"/>279 <path d="M22 52l12-20h20A22 22 0 0122 52z" fill="#0f9d58" opacity="0.95"/>280 <circle cx="32" cy="32" r="10" fill="#4285f4" stroke="#fff" stroke-width="2"/>281 </svg>282 </div>283 <div class="label">Chrome</div>284 </div>285 286 <!-- Camera -->287 <div class="app">288 <div class="icon-round">289 <svg width="118" height="118" viewBox="0 0 64 64">290 <rect x="10" y="18" width="44" height="28" rx="6" fill="#37474f"/>291 <circle cx="32" cy="32" r="10" fill="#90caf9"/>292 <rect x="20" y="14" width="10" height="6" rx="2" fill="#455a64"/>293 </svg>294 </div>295 <div class="label">Camera</div>296 </div>297 </div>298 299 <!-- Google search -->300 <div class="search-pill">301 <div class="g">G</div>302 <div style="opacity:0.8;">Search</div>303 <div class="pill-actions">304 <div class="pill-icon">305 <svg width="34" height="34" viewBox="0 0 24 24" fill="#4caf50"><circle cx="12" cy="18" r="2"/><rect x="11" y="4" width="2" height="10" rx="1"/></svg>306 </div>307 <div class="pill-icon">308 <svg width="34" height="34" viewBox="0 0 24 24" fill="#ffc107"><rect x="4" y="5" width="16" height="12" rx="3" fill="#ffc107"/><circle cx="12" cy="11" r="3" fill="#fff"/></svg>309 </div>310 </div>311 </div>312 313 <!-- Gesture bar -->314 <div class="gesture"></div>315</div>316</body>317</html>