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 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 color: #ffffff;15 font-family: Roboto, "Segoe UI", Arial, Helvetica, sans-serif;16 /* Dark textured-like backdrop */17 background:18 radial-gradient(1200px 1200px at 25% 15%, #1b1b1b 0%, #0f0f0f 60%, #0b0b0b 100%),19 radial-gradient(900px 900px at 80% 65%, #171717 0%, transparent 70%),20 repeating-linear-gradient(55deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 10px);21 }22 23 /* Status bar */24 .status-bar {25 position: absolute;26 top: 14px;27 left: 24px;28 right: 24px;29 height: 64px;30 display: flex;31 align-items: center;32 justify-content: space-between;33 color: #fff;34 font-weight: 500;35 font-size: 28px;36 letter-spacing: 0.5px;37 text-shadow: 0 0 2px rgba(0,0,0,0.6);38 }39 .status-left, .status-right { display: flex; align-items: center; gap: 18px; }40 .status-left .time { font-size: 32px; font-weight: 600; opacity: 0.95; }41 .notif-badge {42 width: 28px; height: 28px; border-radius: 7px;43 background: rgba(255,255,255,0.18);44 display: inline-flex; align-items: center; justify-content: center;45 font-size: 18px; color: #fff;46 }47 .dot {48 width: 10px; height: 10px; border-radius: 50%;49 background: rgba(255,255,255,0.7); display: inline-block;50 margin-left: 6px;51 }52 .icon-wifi svg, .icon-battery svg { display: block; }53 .icon-battery {54 width: 44px; height: 22px; position: relative;55 }56 57 /* Date & weather widget */58 .date-widget {59 position: absolute;60 left: 64px;61 top: 210px;62 color: #fff;63 text-shadow: 0 2px 6px rgba(0,0,0,0.5);64 }65 .date-widget .title {66 font-size: 64px; font-weight: 600; margin-bottom: 22px;67 }68 .date-widget .weather {69 display: flex; align-items: center; gap: 16px;70 font-size: 34px; opacity: 0.9;71 }72 .date-widget .weather svg { width: 46px; height: 46px; }73 74 /* App grid */75 .app-row {76 position: absolute;77 left: 0; width: 100%;78 display: flex; justify-content: space-around;79 }80 .row-1 { top: 1460px; }81 .row-2 { top: 1700px; }82 .app {83 width: 190px; text-align: center; color: #fff;84 }85 .app .icon {86 position: relative;87 width: 160px; height: 160px; margin: 0 auto 16px;88 border-radius: 50%;89 background: #ffffff;90 box-shadow: 0 8px 22px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(0,0,0,0.05);91 display: flex; align-items: center; justify-content: center;92 }93 .app .label {94 font-size: 30px; opacity: 0.95; letter-spacing: 0.2px;95 }96 .notif-dot {97 position: absolute; right: 10px; top: 10px;98 width: 28px; height: 28px; border-radius: 50%;99 background: #c9b8e9;100 box-shadow: 0 2px 6px rgba(0,0,0,0.35);101 }102 103 /* Dock search bar */104 .dock-search {105 position: absolute;106 left: 70px;107 right: 70px;108 top: 1950px;109 height: 120px;110 background: rgba(26,26,26,0.9);111 border-radius: 60px;112 box-shadow: 0 10px 30px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.06);113 display: flex; align-items: center; justify-content: space-between;114 padding: 0 28px;115 }116 .dock-left, .dock-right { display: flex; align-items: center; gap: 24px; }117 .g-chip {118 width: 64px; height: 64px; border-radius: 50%;119 background: #fff; display: flex; align-items: center; justify-content: center;120 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);121 }122 .hint-text {123 color: rgba(255,255,255,0.5); font-size: 30px;124 }125 .dock-btn {126 width: 64px; height: 64px; border-radius: 50%;127 background: rgba(255,255,255,0.08);128 display: flex; align-items: center; justify-content: center;129 }130 131 /* Gesture bar */132 .gesture {133 position: absolute;134 bottom: 24px; left: 50%;135 transform: translateX(-50%);136 width: 320px; height: 10px;137 border-radius: 8px;138 background: rgba(255,255,255,0.8);139 box-shadow: 0 0 10px rgba(255,255,255,0.25);140 }141</style>142</head>143<body>144<div id="render-target">145 146 <!-- Status bar -->147 <div class="status-bar">148 <div class="status-left">149 <div class="time">9:08</div>150 <div class="notif-badge">B</div>151 <div class="notif-badge">✉</div>152 <div class="notif-badge">N</div>153 <span class="dot"></span>154 </div>155 <div class="status-right">156 <div class="icon-wifi">157 <svg width="42" height="26" viewBox="0 0 42 26" fill="none" xmlns="http://www.w3.org/2000/svg">158 <path d="M21 20c2.5-3 6.5-3 9 0" stroke="#fff" stroke-width="2.6" stroke-linecap="round"/>159 <path d="M14 16c5-6 15-6 20 0" stroke="#fff" stroke-width="2.6" stroke-linecap="round"/>160 <path d="M6 12c8-9 22-9 30 0" stroke="#fff" stroke-width="2.6" stroke-linecap="round"/>161 <circle cx="21" cy="22" r="2.2" fill="#fff"/>162 </svg>163 </div>164 <div class="icon-battery">165 <svg width="52" height="24" viewBox="0 0 52 24" xmlns="http://www.w3.org/2000/svg">166 <rect x="1" y="3" width="44" height="18" rx="3" ry="3" fill="none" stroke="#fff" stroke-width="2"/>167 <rect x="3" y="5" width="30" height="14" rx="2" fill="#fff"/>168 <rect x="46" y="8" width="5" height="10" rx="2" fill="#fff"/>169 </svg>170 </div>171 </div>172 </div>173 174 <!-- Date & Weather -->175 <div class="date-widget">176 <div class="title">Fri, Jul 28</div>177 <div class="weather">178 <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">179 <circle cx="19" cy="22" r="9" fill="#dfe6f3"/>180 <ellipse cx="28" cy="26" rx="13" ry="8" fill="#e7edf8"/>181 <rect x="8" y="26" width="30" height="8" rx="4" fill="#e7edf8"/>182 </svg>183 <span>28°C · Today 30° / 25° · Cloudy</span>184 </div>185 </div>186 187 <!-- App Row 1 -->188 <div class="app-row row-1">189 <!-- Play Store -->190 <div class="app">191 <div class="icon">192 <svg width="110" height="110" viewBox="0 0 110 110" xmlns="http://www.w3.org/2000/svg">193 <polygon points="22,20 82,55 22,90" fill="#34a853"/>194 <polygon points="22,20 52,37 40,50" fill="#4285f4"/>195 <polygon points="22,90 52,73 40,60" fill="#fbbc05"/>196 <polygon points="52,37 82,55 52,73" fill="#ea4335"/>197 </svg>198 </div>199 <div class="label">Play Store</div>200 </div>201 202 <!-- Gmail -->203 <div class="app">204 <div class="icon">205 <svg width="112" height="112" viewBox="0 0 112 112" xmlns="http://www.w3.org/2000/svg">206 <rect x="18" y="30" width="76" height="52" rx="10" fill="#fff" stroke="#dadce0"/>207 <path d="M18 38 L56 62 L94 38" fill="none" stroke="#ea4335" stroke-width="10" stroke-linejoin="round"/>208 <path d="M18 38 L18 82" stroke="#34a853" stroke-width="10"/>209 <path d="M94 38 L94 82" stroke="#4285f4" stroke-width="10"/>210 </svg>211 <span class="notif-dot"></span>212 </div>213 <div class="label">Gmail</div>214 </div>215 216 <!-- Photos -->217 <div class="app">218 <div class="icon">219 <svg width="110" height="110" viewBox="0 0 110 110" xmlns="http://www.w3.org/2000/svg">220 <path d="M55 20 A35 35 0 0 1 90 55 H55 Z" fill="#fbbc05"/>221 <path d="M90 55 A35 35 0 0 1 55 90 V55 Z" fill="#34a853"/>222 <path d="M55 90 A35 35 0 0 1 20 55 H55 Z" fill="#4285f4"/>223 <path d="M20 55 A35 35 0 0 1 55 20 V55 Z" fill="#ea4335"/>224 </svg>225 </div>226 <div class="label">Photos</div>227 </div>228 229 <!-- YouTube -->230 <div class="app">231 <div class="icon">232 <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">233 <rect x="20" y="34" width="80" height="52" rx="14" fill="#ff0000"/>234 <polygon points="52,46 52,74 78,60" fill="#fff"/>235 </svg>236 <span class="notif-dot"></span>237 </div>238 <div class="label">YouTube</div>239 </div>240 </div>241 242 <!-- App Row 2 -->243 <div class="app-row row-2">244 <!-- Phone -->245 <div class="app">246 <div class="icon">247 <svg width="108" height="108" viewBox="0 0 108 108" xmlns="http://www.w3.org/2000/svg">248 <path d="M32 28c3-3 7-3 10 0l6 6c2 2 2 5 0 7l-6 6c4 8 10 14 18 18l6-6c2-2 5-2 7 0l6 6c3 3 3 7 0 10-4 4-9 6-14 6-22-3-40-21-43-43 0-5 2-10 6-14z" fill="#2c7ef7"/>249 </svg>250 </div>251 <div class="label">Phone</div>252 </div>253 254 <!-- Messages -->255 <div class="app">256 <div class="icon">257 <svg width="108" height="108" viewBox="0 0 108 108" xmlns="http://www.w3.org/2000/svg">258 <rect x="18" y="26" width="72" height="48" rx="12" fill="#1a73e8"/>259 <rect x="30" y="38" width="48" height="8" rx="4" fill="#ffffff"/>260 <rect x="30" y="52" width="32" height="8" rx="4" fill="#ffffff"/>261 <polygon points="48,74 60,74 54,86" fill="#1a73e8"/>262 </svg>263 </div>264 <div class="label">Messages</div>265 </div>266 267 <!-- Chrome -->268 <div class="app">269 <div class="icon">270 <svg width="112" height="112" viewBox="0 0 112 112" xmlns="http://www.w3.org/2000/svg">271 <circle cx="56" cy="56" r="44" fill="#fff"/>272 <path d="M56 56 L96 56 A40 40 0 0 0 40 18z" fill="#ea4335"/>273 <path d="M56 56 L40 18 A40 40 0 0 0 16 70z" fill="#fbbc05"/>274 <path d="M56 56 L16 70 A40 40 0 0 0 96 56z" fill="#34a853"/>275 <circle cx="56" cy="56" r="18" fill="#4285f4"/>276 </svg>277 </div>278 <div class="label">Chrome</div>279 </div>280 281 <!-- Camera -->282 <div class="app">283 <div class="icon">284 <svg width="115" height="115" viewBox="0 0 115 115" xmlns="http://www.w3.org/2000/svg">285 <rect x="16" y="34" width="83" height="50" rx="10" fill="#5f6368" />286 <circle cx="57.5" cy="59" r="16" fill="#1e88e5"/>287 <rect x="28" y="28" width="18" height="10" rx="4" fill="#5f6368"/>288 <circle cx="85" cy="44" r="6" fill="#9aa0a6"/>289 </svg>290 </div>291 <div class="label">Camera</div>292 </div>293 </div>294 295 <!-- Dock search pill -->296 <div class="dock-search">297 <div class="dock-left">298 <div class="g-chip">299 <svg width="42" height="42" viewBox="0 0 42 42" xmlns="http://www.w3.org/2000/svg">300 <circle cx="21" cy="21" r="20" fill="white"/>301 <path d="M22 30c-4.8 0-9-3.9-9-9s4.2-9 9-9c2.3 0 4.2.8 5.8 2.1l-2.4 2.4C24.5 16.6 23.3 16 22 16c-3 0-5.5 2.5-5.5 5.5S19 27 22 27c2.2 0 4-1.1 4.7-3H22v-3h8.8c.1.6.2 1.1.2 1.8 0 5.6-3.9 9.2-9 9.2z" fill="#4285F4"/>302 <path d="M32 22h-3v-3h9v3h-3v3h-3v-3z" fill="#34A853" opacity="0"/>303 </svg>304 </div>305 <div class="hint-text">Search</div>306 </div>307 <div class="dock-right">308 <div class="dock-btn">309 <svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">310 <rect x="12" y="4" width="4" height="14" rx="2" fill="#4fc3f7"/>311 <rect x="8" y="10" width="12" height="12" rx="6" fill="none" stroke="#4fc3f7" stroke-width="2"/>312 </svg>313 </div>314 <div class="dock-btn">315 <svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">316 <rect x="4" y="7" width="20" height="14" rx="3" fill="#ffc107"/>317 <circle cx="14" cy="14" r="5" fill="#1e88e5"/>318 <rect x="7" y="5" width="6" height="4" rx="2" fill="#616161"/>319 </svg>320 </div>321 </div>322 </div>323 324 <!-- Gesture bar -->325 <div class="gesture"></div>326</div>327</body>328</html>