GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">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: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: radial-gradient(1800px 1400px at 60% 40%, #d7d7d7 0%, #cfcfcf 40%, #bfbfbf 100%);11 }12 13 /* Status bar */14 .status-bar {15 position: absolute; top: 22px; left: 28px; right: 28px; height: 64px;16 display: flex; align-items: center; justify-content: space-between; color: #ffffff;17 }18 .status-left { display: flex; align-items: center; gap: 18px; }19 .status-time { font-size: 36px; font-weight: 600; letter-spacing: 0.5px; }20 .status-weather { font-size: 28px; opacity: 0.95; }21 .status-right { display: flex; align-items: center; gap: 22px; }22 .sb-icon { width: 34px; height: 34px; }23 .dot { width: 8px; height: 8px; border-radius: 50%; background: #ffffff; opacity: 0.9; }24 25 /* App grid */26 .apps {27 position: absolute; top: 220px; left: 0; right: 0;28 padding: 0 40px;29 display: grid;30 grid-template-columns: repeat(4, 1fr);31 justify-items: center;32 row-gap: 120px;33 column-gap: 10px;34 color: #f4f4f4;35 }36 .app-item { width: 220px; text-align: center; }37 .app-icon {38 width: 160px; height: 160px; border-radius: 50%;39 display: flex; align-items: center; justify-content: center;40 color: #ffffff; font-weight: 700; font-size: 34px;41 box-shadow: 0 12px 18px rgba(0,0,0,0.35);42 position: relative;43 }44 .app-label {45 margin-top: 18px; font-size: 32px; color: #eaeaea; text-shadow: 0 2px 4px rgba(0,0,0,0.35);46 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;47 }48 .notif-dot {49 position: absolute; right: -2px; top: -2px;50 width: 32px; height: 32px; border-radius: 50%; background: #b7e6bf; border: 3px solid #2b2b2b;51 box-shadow: 0 2px 4px rgba(0,0,0,0.4);52 }53 54 /* Icon color themes */55 .white { background: #ffffff; color: #d62828; }56 .red { background: #be2d2d; }57 .blue { background: #3a78cf; }58 .yellow { background: #f0c532; color: #1b1b1b; }59 .black { background: #0e0e0e; }60 .teal { background: #4aa2a2; }61 .darkblue { background: #173766; }62 .wine { background: #b53c3c; }63 .grayRing { box-shadow: inset 0 0 0 10px #121212, 0 12px 18px rgba(0,0,0,0.35); background: #f4d54b; color: #121212; }64 65 /* Specialized icon accents */66 .half-red::after {67 content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 40%;68 background: #e33b3b; border-bottom-left-radius: 80px; border-bottom-right-radius: 80px;69 }70 .adidas-bars {71 width: 90px; height: 70px;72 }73 .adidas-bars div {74 width: 24px; height: 60px; background: #ffffff; display: inline-block; transform-origin: bottom left;75 }76 .adidas-bars div:nth-child(1){ transform: skewY(-20deg); margin-right: 8px; }77 .adidas-bars div:nth-child(2){ transform: skewY(-12deg); margin-right: 8px; }78 .adidas-bars div:nth-child(3){ transform: skewY(-4deg); }79 .checklist { width: 110px; height: 110px; border-radius: 55px; background: #e9f0ff; display: grid; grid-template-columns: 34px auto; gap: 12px; align-items: center; justify-items: center; padding: 18px; color:#3a78cf; }80 .checklist .tick { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #3a78cf; position: relative; }81 .checklist .tick::after { content:""; position:absolute; left:6px; top:4px; width:8px; height:14px; border-right:3px solid #3a78cf; border-bottom:3px solid #3a78cf; transform: rotate(45deg); }82 .clock-face { width: 110px; height: 110px; border-radius: 55px; background: #ffffff; border: 6px solid #2c66b3; position: relative; }83 .clock-face::before { content:""; position:absolute; left:50%; top:50%; width:6px; height:38px; background:#2c66b3; transform-origin: bottom center; transform: translate(-50%, -100%) rotate(-20deg); border-radius:3px; }84 .clock-face::after { content:""; position:absolute; left:50%; top:50%; width:6px; height:28px; background:#2c66b3; transform-origin: bottom center; transform: translate(-50%, -100%) rotate(60deg); border-radius:3px; }85 .ring { width: 120px; height: 120px; border-radius: 60px; background: #f1f1f1; border: 14px solid #2b3f45; position: relative; }86 .ring::after { content:""; position:absolute; left:50%; top:50%; width:12px; height:12px; background:#4aa26e; border-radius:50%; transform: translate(-50%, -50%); }87 .darkclock { width: 120px; height: 120px; border-radius: 60px; background: #14335d; border: 10px solid #0e2245; position: relative; }88 .darkclock::before { content:""; position:absolute; left:50%; top:50%; width:8px; height:36px; background:#e6f0ff; transform-origin: bottom center; transform: translate(-50%, -100%) rotate(10deg); border-radius:4px; }89 .darkclock::after { content:""; position:absolute; left:50%; top:50%; width:8px; height:26px; background:#e6f0ff; transform-origin: bottom center; transform: translate(-50%, -100%) rotate(-65deg); border-radius:4px; }90 .alarmy-gradient {91 background: conic-gradient(from 210deg, #ff6b6b, #ff8f3a, #ffd166, #ff6b6b 90%);92 color: #ffffff;93 }94 95 /* Dock row */96 .dock {97 position: absolute; left: 0; right: 0; bottom: 340px;98 display: flex; justify-content: space-evenly; align-items: center;99 padding: 0 90px;100 }101 .dock-icon {102 width: 150px; height: 150px; background: #ffffff; border-radius: 75px;103 display: flex; align-items: center; justify-content: center;104 box-shadow: 0 10px 16px rgba(0,0,0,0.35);105 }106 .dock-icon svg { width: 70px; height: 70px; }107 108 /* Search bar */109 .search-bar {110 position: absolute; left: 70px; right: 70px; bottom: 160px; height: 120px;111 background: #2a2a2a; border-radius: 64px; box-shadow: 0 12px 20px rgba(0,0,0,0.5);112 display: flex; align-items: center; justify-content: space-between; padding: 0 34px; color: #ffffff;113 }114 .search-left { display: flex; align-items: center; gap: 22px; }115 .g-pill {116 width: 70px; height: 70px; border-radius: 35px; background: #1e1e1e; display:flex; align-items:center; justify-content:center; font-weight: 800; font-size: 36px;117 color: #4c8bf5;118 }119 .search-hint { opacity: 0.75; font-size: 32px; }120 .search-right { display: flex; align-items: center; gap: 18px; }121 .round-btn { width: 70px; height: 70px; border-radius: 35px; background: #3a3a3a; display:flex; align-items:center; justify-content:center; }122 .round-btn svg { width: 36px; height: 36px; }123 124 /* Gesture bar */125 .gesture {126 position: absolute; left: 50%; bottom: 28px; width: 300px; height: 10px; background: #5a5a5a; border-radius: 8px; transform: translateX(-50%);127 opacity: 0.8;128 }129</style>130</head>131<body>132<div id="render-target">133 134 <!-- Status bar -->135 <div class="status-bar">136 <div class="status-left">137 <div class="status-time">12:39</div>138 <div class="status-weather">66°</div>139 <div class="dot"></div>140 <div class="dot"></div>141 </div>142 <div class="status-right">143 <!-- WiFi -->144 <svg class="sb-icon" viewBox="0 0 24 24" fill="none">145 <path d="M2 8 C7 3,17 3,22 8" stroke="#fff" stroke-width="2" stroke-linecap="round"/>146 <path d="M5 12 C9 8,15 8,19 12" stroke="#fff" stroke-width="2" stroke-linecap="round"/>147 <path d="M9 16 C11 14,13 14,15 16" stroke="#fff" stroke-width="2" stroke-linecap="round"/>148 <circle cx="12" cy="19" r="2" fill="#fff"/>149 </svg>150 <!-- Battery -->151 <svg class="sb-icon" viewBox="0 0 24 24">152 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"/>153 <rect x="4" y="8" width="12" height="8" fill="#fff"/>154 <rect x="20" y="9" width="2.5" height="6" fill="#fff"/>155 </svg>156 </div>157 </div>158 159 <!-- Apps grid -->160 <div class="apps">161 <!-- Row 1 -->162 <div class="app-item">163 <div class="app-icon white">164 CNA165 <div class="notif-dot"></div>166 </div>167 <div class="app-label">CNA</div>168 </div>169 170 <div class="app-item">171 <div class="app-icon white half-red" style="color:#2c2c2c;">sky</div>172 <div class="app-label">Sky News</div>173 </div>174 175 <div class="app-item">176 <div class="app-icon blue" style="font-size:30px; line-height:1.1; flex-direction:column;">177 <span style="font-weight:800;">euro</span>178 <span style="font-weight:800;">news</span>179 <div class="notif-dot"></div>180 </div>181 <div class="app-label">Euronews</div>182 </div>183 184 <div class="app-item">185 <div class="app-icon grayRing">JD</div>186 <div class="app-label">JD</div>187 </div>188 189 <!-- Row 2 -->190 <div class="app-item">191 <div class="app-icon white" style="color:#202020; font-size:30px;">192 <div style="display:flex; flex-direction:column; align-items:center;">193 <div style="width:74px; height:40px; background:#202020; clip-path: polygon(0 100%, 50% 0, 100% 100%);"></div>194 <div style="margin-top:8px;">REI</div>195 </div>196 </div>197 <div class="app-label">REI Co-op</div>198 </div>199 200 <div class="app-item">201 <div class="app-icon black">202 <div class="adidas-bars">203 <div></div><div></div><div></div>204 </div>205 </div>206 <div class="app-label">adidas</div>207 </div>208 209 <div class="app-item">210 <div class="app-icon blue" style="font-size:28px;">DECATHLON</div>211 <div class="app-label">Decathlon</div>212 </div>213 214 <div class="app-item">215 <div class="app-icon black" style="font-size:30px;">M&S</div>216 <div class="app-label">M&S India</div>217 </div>218 219 <!-- Row 3 -->220 <div class="app-item">221 <div class="app-icon wine" style="font-size:28px;">Reebok</div>222 <div class="app-label">Reebok</div>223 </div>224 225 <div class="app-item">226 <div class="app-icon yellow" style="font-size:58px; letter-spacing:2px;">••</div>227 <div class="app-label">Bewakoof</div>228 </div>229 230 <div class="app-item">231 <div class="app-icon white" style="color:#d62828; font-size:44px;">H&M</div>232 <div class="app-label">H&M</div>233 </div>234 235 <div class="app-item">236 <div class="app-icon white">237 <div class="checklist">238 <div class="tick"></div><div style="justify-self:start;">Task</div>239 <div class="tick"></div><div style="justify-self:start;">List</div>240 <div class="tick"></div><div style="justify-self:start;">Plan</div>241 </div>242 </div>243 <div class="app-label">Taskito</div>244 </div>245 246 <!-- Row 4 -->247 <div class="app-item">248 <div class="app-icon alarmy-gradient">⏰</div>249 <div class="app-label">Alarmy</div>250 </div>251 252 <div class="app-item">253 <div class="app-icon white">254 <div class="clock-face"></div>255 <div class="notif-dot"></div>256 </div>257 <div class="app-label">Simple Alarm</div>258 </div>259 260 <div class="app-item">261 <div class="app-icon teal">262 <div class="ring"></div>263 </div>264 <div class="app-label">Alarm and ...</div>265 </div>266 267 <div class="app-item">268 <div class="app-icon darkblue">269 <div class="darkclock"></div>270 <div class="notif-dot"></div>271 </div>272 <div class="app-label">Alarm Clock</div>273 </div>274 275 <!-- Row 5 -->276 <div class="app-item">277 <div class="app-icon black" style="font-size:40px;">🕑</div>278 <div class="app-label">Alarms</div>279 </div>280 <div class="app-item"></div><div class="app-item"></div><div class="app-item"></div>281 </div>282 283 <!-- Dock row -->284 <div class="dock">285 <div class="dock-icon">286 <!-- Phone -->287 <svg viewBox="0 0 24 24">288 <path d="M6 3 C5 3,4 4,4 5 C4 15,14 21,19 21 C20 21,21 20,21 19 L19 15 C18.2 14.5,17.5 14.7,17 15 L14 17 C11 16,8 13,7 10 L9 7 C9.3 6.5,9.5 5.8,9 5 L6 3 Z" fill="#3275f0"/>289 </svg>290 </div>291 <div class="dock-icon">292 <!-- Messages -->293 <svg viewBox="0 0 24 24">294 <path d="M3 4 H21 V16 H8 L4 20 V4 Z" fill="#4c8bf5"/>295 <circle cx="8" cy="10" r="1.8" fill="#ffffff"/>296 <circle cx="12" cy="10" r="1.8" fill="#ffffff"/>297 <circle cx="16" cy="10" r="1.8" fill="#ffffff"/>298 </svg>299 </div>300 <div class="dock-icon">301 <!-- Chrome -->302 <svg viewBox="0 0 24 24">303 <circle cx="12" cy="12" r="9" fill="#f5c04a"/>304 <path d="M12 12 L20 6 A9 9 0 0 0 4 6 L8 12 Z" fill="#e64c3c"/>305 <path d="M8 12 L12 20 A9 9 0 0 0 20 6 L12 12 Z" fill="#41a85f"/>306 <circle cx="12" cy="12" r="5" fill="#4c8bf5" stroke="#ffffff" stroke-width="1.5"/>307 </svg>308 </div>309 <div class="dock-icon">310 <!-- Camera -->311 <svg viewBox="0 0 24 24">312 <rect x="3" y="6" width="18" height="12" rx="2" fill="#444"/>313 <circle cx="12" cy="12" r="4.5" fill="#4c8bf5"/>314 <rect x="8" y="3" width="8" height="3" rx="1.5" fill="#666"/>315 </svg>316 </div>317 </div>318 319 <!-- Search bar -->320 <div class="search-bar">321 <div class="search-left">322 <div class="g-pill">G</div>323 <div class="search-hint">Search</div>324 </div>325 <div class="search-right">326 <div class="round-btn">327 <!-- Mic -->328 <svg viewBox="0 0 24 24">329 <rect x="9" y="4" width="6" height="10" rx="3" fill="#4c8bf5"/>330 <path d="M6 11 C6 15,18 15,18 11" stroke="#fff" stroke-width="2" fill="none"/>331 <rect x="11" y="15" width="2" height="4" fill="#fff"/>332 <rect x="8" y="19" width="8" height="2" rx="1" fill="#fff"/>333 </svg>334 </div>335 <div class="round-btn">336 <!-- Google Lens / Camera -->337 <svg viewBox="0 0 24 24">338 <rect x="4" y="6" width="16" height="12" rx="3" fill="#ff5252"/>339 <circle cx="12" cy="12" r="4" fill="#4c8bf5"/>340 <rect x="9" y="3" width="6" height="3" rx="1.5" fill="#ffd166"/>341 </svg>342 </div>343 </div>344 </div>345 346 <!-- Gesture bar -->347 <div class="gesture"></div>348</div>349</body>350</html>