GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Android Home Screen Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: radial-gradient(1200px 900px at 540px 980px, #8a6fb1 0%, #6a5598 40%, #5a4a8c 70%, #4d3e7f 100%);11 border-radius: 0;12 }13 14 /* Decorative sky elements */15 .moon {16 position: absolute; left: 150px; top: 540px; width: 780px; height: 780px;17 border-radius: 50%;18 background: radial-gradient(closest-side, rgba(230,220,245,0.45), rgba(180,160,215,0.35) 55%, rgba(160,140,205,0.15) 75%, rgba(140,120,190,0) 100%);19 mix-blend-mode: screen;20 filter: blur(0.2px);21 }22 .star { position: absolute; width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.9; }23 .star.s1 { left: 120px; top: 210px; width: 6px; height: 6px; }24 .star.s2 { left: 360px; top: 170px; width: 8px; height: 8px; }25 .star.s3 { left: 720px; top: 260px; width: 6px; height: 6px; }26 .star.s4 { left: 940px; top: 210px; width: 8px; height: 8px; }27 .star.s5 { left: 220px; top: 380px; width: 6px; height: 6px; }28 .star.s6 { left: 820px; top: 420px; width: 6px; height: 6px; }29 .star.s7 { left: 520px; top: 360px; width: 10px; height: 10px; }30 .star.s8 { left: 100px; top: 630px; width: 6px; height: 6px; opacity: 0.7; }31 .star.s9 { left: 980px; top: 560px; width: 6px; height: 6px; opacity: 0.7; }32 33 /* City silhouette */34 .city {35 position: absolute; left: 0; bottom: 370px; width: 1080px; height: 550px;36 background: linear-gradient(to top, rgba(50,35,85,0.8), rgba(50,35,85,0.2));37 }38 .building { position: absolute; bottom: 0; background: rgba(60,45,100,0.9); }39 .window { position: absolute; width: 28px; height: 40px; background: rgba(255,235,160,0.6); border-radius: 4px; }40 /* A few buildings */41 .b1 { left: 60px; width: 160px; height: 240px; }42 .b2 { left: 250px; width: 220px; height: 320px; }43 .b3 { left: 520px; width: 270px; height: 280px; }44 .b4 { left: 830px; width: 200px; height: 350px; }45 /* Windows sprinkled */46 .w1 { left: 75px; bottom: 60px; }47 .w2 { left: 115px; bottom: 120px; }48 .w3 { left: 285px; bottom: 80px; }49 .w4 { left: 335px; bottom: 160px; }50 .w5 { left: 560px; bottom: 100px; }51 .w6 { left: 620px; bottom: 180px; }52 .w7 { left: 880px; bottom: 140px; }53 .w8 { left: 920px; bottom: 220px; }54 55 /* Status bar */56 .status-bar {57 position: absolute; top: 24px; left: 0; right: 0; height: 90px; padding: 0 30px;58 color: #fff; font-size: 48px; line-height: 90px; font-weight: 500;59 text-shadow: 0 1px 2px rgba(0,0,0,0.35);60 }61 .status-left { position: absolute; left: 30px; top: 0; height: 90px; display: flex; align-items: center; gap: 16px; }62 .status-right { position: absolute; right: 30px; top: 0; height: 90px; display: flex; align-items: center; gap: 26px; }63 .status-icon { width: 42px; height: 42px; display: inline-block; }64 65 /* App grid */66 .app-grid {67 position: absolute; left: 40px; top: 160px; width: 1000px;68 display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 56px 40px;69 }70 .app-item { text-align: center; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.45); }71 .icon-circle {72 width: 156px; height: 156px; margin: 0 auto;73 background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 50%;74 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px; padding: 12px; box-sizing: border-box;75 }76 .app-label {77 margin-top: 18px; font-size: 34px; font-weight: 400; max-width: 240px;78 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: auto; margin-right: auto;79 }80 81 /* Dock row */82 .dock {83 position: absolute; left: 120px; bottom: 560px; width: 840px;84 display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 80px; align-items: end;85 }86 .dock .icon-circle { width: 146px; height: 146px; }87 .dock-label {88 margin-top: 16px; font-size: 32px; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,0.45);89 }90 91 /* Search bar */92 .search-bar {93 position: absolute; left: 60px; right: 60px; bottom: 240px; height: 120px;94 background: rgba(40,40,48,0.85); border-radius: 60px; display: flex; align-items: center;95 box-shadow: 0 8px 24px rgba(0,0,0,0.25);96 padding: 0 36px; color: #fff;97 }98 .search-left { display: flex; align-items: center; gap: 24px; }99 .google-g {100 width: 64px; height: 64px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center;101 font-weight: 700; font-size: 38px; color: #4285F4;102 }103 .search-placeholder { font-size: 34px; color: #cfd8dc; }104 .search-right { margin-left: auto; display: flex; align-items: center; gap: 28px; }105 .pill-icon { width: 60px; height: 60px; background: rgba(255,255,255,0.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; }106 107 /* Gesture bar */108 .gesture {109 position: absolute; left: 420px; bottom: 80px; width: 240px; height: 14px;110 background: rgba(255,255,255,0.7); border-radius: 20px;111 }112</style>113</head>114<body>115<div id="render-target">116 117 <div class="moon"></div>118 <div class="star s1"></div>119 <div class="star s2"></div>120 <div class="star s3"></div>121 <div class="star s4"></div>122 <div class="star s5"></div>123 <div class="star s6"></div>124 <div class="star s7"></div>125 <div class="star s8"></div>126 <div class="star s9"></div>127 128 <div class="city">129 <div class="building b1"></div>130 <div class="building b2"></div>131 <div class="building b3"></div>132 <div class="building b4"></div>133 <div class="window w1"></div>134 <div class="window w2"></div>135 <div class="window w3"></div>136 <div class="window w4"></div>137 <div class="window w5"></div>138 <div class="window w6"></div>139 <div class="window w7"></div>140 <div class="window w8"></div>141 </div>142 143 <!-- Status bar -->144 <div class="status-bar">145 <div class="status-left">146 <div style="font-size: 48px;">8:07</div>147 </div>148 <div class="status-right">149 <!-- Wi-Fi icon -->150 <svg class="status-icon" viewBox="0 0 24 24">151 <path d="M12 18c.8 0 1.5.7 1.5 1.5S12.8 21 12 21s-1.5-.7-1.5-1.5S11.2 18 12 18z" fill="#fff"/>152 <path d="M3 9c5.5-4.7 12.5-4.7 18 0l-1.6 1.6C15.2 6.5 8.8 6.5 4.6 10.6L3 9z" fill="#fff" opacity="0.85"/>153 <path d="M6.5 12.5c3.9-3.2 7.1-3.2 11 0l-1.5 1.5c-2.8-2.1-5.2-2.1-8 0l-1.5-1.5z" fill="#fff" opacity="0.85"/>154 </svg>155 <!-- Battery icon -->156 <svg class="status-icon" viewBox="0 0 28 24">157 <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="#fff"/>158 <rect x="4" y="8" width="14" height="8" fill="#5ad05a"/>159 <rect x="22" y="9" width="4" height="6" rx="1" ry="1" fill="#fff"/>160 </svg>161 </div>162 </div>163 164 <!-- App grid -->165 <div class="app-grid">166 <div class="app-item">167 <div class="icon-circle">[IMG: Android DBW App Icon]</div>168 <div class="app-label">DBW Show...</div>169 </div>170 <div class="app-item">171 <div class="icon-circle">[IMG: BBC News Icon]</div>172 <div class="app-label">BBC News</div>173 </div>174 <div class="app-item">175 <div class="icon-circle">[IMG: eBay Icon]</div>176 <div class="app-label">eBay</div>177 </div>178 <div class="app-item">179 <div class="icon-circle">[IMG: REI Co‑op Icon]</div>180 <div class="app-label">REI Co-op</div>181 </div>182 183 <div class="app-item">184 <div class="icon-circle">[IMG: adidas Icon]</div>185 <div class="app-label">adidas</div>186 </div>187 <div class="app-item">188 <div class="icon-circle">[IMG: khelmart Icon]</div>189 <div class="app-label">khelmart</div>190 </div>191 <div class="app-item">192 <div class="icon-circle">[IMG: Alibaba.com Icon]</div>193 <div class="app-label">Alibaba.com</div>194 </div>195 <div class="app-item">196 <div class="icon-circle">[IMG: Phases of the Moon Icon]</div>197 <div class="app-label">Phases of t...</div>198 </div>199 200 <div class="app-item">201 <div class="icon-circle">[IMG: Domino's Icon]</div>202 <div class="app-label">Domino's</div>203 </div>204 <div class="app-item">205 <div class="icon-circle">[IMG: La Pino'z Pizza Icon]</div>206 <div class="app-label">La Pino'z Pi...</div>207 </div>208 <div class="app-item">209 <div class="icon-circle">[IMG: Oven Story Icon]</div>210 <div class="app-label">Oven Story</div>211 </div>212 <div class="app-item">213 <div class="icon-circle">[IMG: Pizza Hut Icon]</div>214 <div class="app-label">Pizza Hut</div>215 </div>216 217 <div class="app-item">218 <div class="icon-circle">[IMG: MojoPizza Icon]</div>219 <div class="app-label">MojoPizza</div>220 </div>221 <div class="app-item">222 <div class="icon-circle">[IMG: Martino'z Pizza Icon]</div>223 <div class="app-label">Martinoz Pi...</div>224 </div>225 <div class="app-item">226 <div class="icon-circle">[IMG: Ooni Icon]</div>227 <div class="app-label">Ooni</div>228 </div>229 <div class="app-item">230 <div class="icon-circle">[IMG: La Milano Pizzeria Icon]</div>231 <div class="app-label">La Milano P...</div>232 </div>233 234 <div class="app-item">235 <div class="icon-circle">[IMG: TOSSIN Pizza Icon]</div>236 <div class="app-label">TOSSIN</div>237 </div>238 <div class="app-item">239 <div class="icon-circle">[IMG: Chicago Pizza Icon]</div>240 <div class="app-label">Chicago Piz...</div>241 </div>242 <div class="app-item">243 <div class="icon-circle">[IMG: California Pizza Icon]</div>244 <div class="app-label">California P...</div>245 </div>246 <div class="app-item">247 <div class="icon-circle">[IMG: RP's Pizzeria Icon]</div>248 <div class="app-label">RP's Pizzeria</div>249 </div>250 </div>251 252 <!-- Dock row -->253 <div class="dock">254 <div class="app-item">255 <div class="icon-circle">[IMG: Phone Icon]</div>256 <div class="dock-label">Phone</div>257 </div>258 <div class="app-item">259 <div class="icon-circle">[IMG: Messages Icon]</div>260 <div class="dock-label">Messages</div>261 </div>262 <div class="app-item">263 <div class="icon-circle">[IMG: Chrome Icon]</div>264 <div class="dock-label">Chrome</div>265 </div>266 <div class="app-item">267 <div class="icon-circle">[IMG: Camera Icon]</div>268 <div class="dock-label">Camera</div>269 </div>270 </div>271 272 <!-- Search bar -->273 <div class="search-bar">274 <div class="search-left">275 <div class="google-g">G</div>276 <div class="search-placeholder">Search</div>277 </div>278 <div class="search-right">279 <div class="pill-icon">280 <!-- Mic icon -->281 <svg width="34" height="34" viewBox="0 0 24 24">282 <path d="M12 4a3 3 0 013 3v6a3 3 0 11-6 0V7a3 3 0 013-3z" fill="#fff"/>283 <path d="M5 11a7 7 0 0014 0h-2a5 5 0 01-10 0H5z" fill="#fff" opacity="0.85"/>284 <rect x="11" y="18" width="2" height="4" fill="#fff"/>285 </svg>286 </div>287 <div class="pill-icon">288 <!-- Lens/camera icon -->289 <svg width="34" height="34" viewBox="0 0 24 24">290 <rect x="4" y="6" width="16" height="12" rx="3" fill="#fff"/>291 <circle cx="12" cy="12" r="4" fill="#5ad05a"/>292 </svg>293 </div>294 </div>295 </div>296 297 <!-- Gesture pill -->298 <div class="gesture"></div>299 300</div>301</body>302</html>