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: #fff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;16 /* dark textured-esque background */17 background:18 radial-gradient(1400px 1200px at 60% 60%, rgba(0,0,0,0.55), rgba(0,0,0,0.9)),19 repeating-linear-gradient(115deg, #2b2b2f 0 8px, #26262a 8px 16px);20 }21 22 /* Status bar */23 .status-bar {24 position: absolute;25 top: 24px;26 left: 32px;27 right: 32px;28 height: 80px;29 display: flex;30 align-items: center;31 justify-content: space-between;32 pointer-events: none;33 }34 .status-time {35 font-size: 38px;36 letter-spacing: 0.5px;37 opacity: 0.95;38 }39 .status-icons {40 display: flex;41 gap: 26px;42 align-items: center;43 }44 .status-icons svg { width: 38px; height: 38px; fill: #fff; opacity: 0.9; }45 46 /* Agenda widget text */47 .agenda {48 position: absolute;49 left: 56px;50 top: 260px;51 }52 .agenda .title {53 font-size: 58px;54 font-weight: 600;55 letter-spacing: 0.2px;56 }57 .agenda .row {58 display: flex;59 align-items: center;60 gap: 20px;61 margin-top: 20px;62 font-size: 34px;63 opacity: 0.9;64 }65 .agenda .row svg { width: 40px; height: 40px; fill: #fff; opacity: 0.9; }66 67 /* App grid (first row with labels) */68 .app-grid {69 position: absolute;70 left: 60px;71 right: 60px;72 bottom: 640px;73 display: grid;74 grid-template-columns: repeat(4, 1fr);75 gap: 30px 40px;76 }77 .app {78 text-align: center;79 }80 .icon-circle {81 width: 156px;82 height: 156px;83 margin: 0 auto 22px;84 border-radius: 50%;85 background: #ffffff;86 display: flex;87 align-items: center;88 justify-content: center;89 }90 .icon-circle svg {91 width: 96px;92 height: 96px;93 display: block;94 }95 .label {96 font-size: 32px;97 color: #efefef;98 letter-spacing: 0.2px;99 }100 101 /* Dock (second row icons, no labels) */102 .dock {103 position: absolute;104 left: 120px;105 right: 120px;106 bottom: 500px;107 display: flex;108 justify-content: space-between;109 }110 .dock .icon-circle {111 width: 150px;112 height: 150px;113 margin: 0;114 }115 116 /* Search pill */117 .search-pill {118 position: absolute;119 left: 56px;120 right: 56px;121 bottom: 300px;122 height: 120px;123 background: #33363a;124 border-radius: 60px;125 display: flex;126 align-items: center;127 padding: 0 34px;128 box-shadow: 0 8px 24px rgba(0,0,0,0.35) inset, 0 2px 6px rgba(0,0,0,0.35);129 }130 .search-left {131 display: flex;132 align-items: center;133 gap: 22px;134 color: #d6d6d6;135 font-size: 36px;136 }137 .search-left .g-badge {138 width: 72px;139 height: 72px;140 border-radius: 50%;141 background: #fff;142 display: grid;143 place-items: center;144 }145 .search-left .g-badge svg { width: 44px; height: 44px; }146 .search-right {147 margin-left: auto;148 display: flex;149 gap: 26px;150 align-items: center;151 }152 .search-right svg { width: 54px; height: 54px; }153 154 /* Gesture bar */155 .gesture {156 position: absolute;157 bottom: 120px;158 left: 320px;159 width: 440px;160 height: 14px;161 border-radius: 10px;162 background: rgba(255,255,255,0.85);163 }164</style>165</head>166<body>167<div id="render-target">168 169 <!-- Status Bar -->170 <div class="status-bar">171 <div class="status-time">11:03</div>172 <div class="status-icons">173 <!-- Wi-Fi -->174 <svg viewBox="0 0 24 24" aria-label="Wi-Fi">175 <path d="M12 18.5c.9 0 1.5.6 1.5 1.5S12.9 21.5 12 21.5 10.5 20.9 10.5 20s.6-1.5 1.5-1.5zM2 8.5c5.3-4.7 14.7-4.7 20 0l-1.7 1.7C16 6.2 8 6.2 3.7 10.2L2 8.5zm3.3 3.3c4.1-3.3 9.3-3.3 13.4 0l-1.7 1.7c-3.1-2.4-6.9-2.4-10 0L5.3 11.8zm3.4 3.4c2.7-1.8 5.9-1.8 8.6 0l-1.7 1.7c-1.9-1.2-3.2-1.2-5.1 0l-1.8-1.7z"/>176 </svg>177 <!-- Battery -->178 <svg viewBox="0 0 32 24" aria-label="Battery">179 <rect x="2" y="5" width="24" height="14" rx="2" ry="2" fill="#fff"/>180 <rect x="4.5" y="7.5" width="16" height="9" fill="#2d2d2d"/>181 <rect x="26.5" y="9" width="3" height="6" rx="1" fill="#fff"/>182 </svg>183 </div>184 </div>185 186 <!-- Agenda Widget -->187 <div class="agenda">188 <div class="title">26 min: Jumba classes</div>189 <div class="row">190 <!-- calendar icon -->191 <svg viewBox="0 0 24 24" aria-label="Event">192 <path d="M7 2h2v2h6V2h2v2h3c.6 0 1 .4 1 1v15c0 .6-.4 1-1 1H3c-.6 0-1-.4-1-1V5c0-.6.4-1 1-1h4V2zm14 6H3v11h18V8z"/>193 </svg>194 <span>at 11:30 AM</span>195 <!-- cloud icon -->196 <svg viewBox="0 0 24 24" aria-label="Weather">197 <path d="M6 18c-2.2 0-4-1.8-4-4s1.8-4 4-4c.3-2.8 2.6-5 5.5-5 3 0 5.5 2.5 5.5 5.5h.5c2.2 0 4 1.8 4 4s-1.8 4-4 4H6z"/>198 </svg>199 <span>31°C</span>200 </div>201 </div>202 203 <!-- First row of apps with labels -->204 <div class="app-grid">205 <!-- Play Store -->206 <div class="app">207 <div class="icon-circle">208 <svg viewBox="0 0 64 64" aria-label="Play Store">209 <defs>210 <clipPath id="round64"><circle cx="32" cy="32" r="30"/></clipPath>211 </defs>212 <g clip-path="url(#round64)">213 <polygon points="10,10 54,32 10,54" fill="#34a853"/>214 <polygon points="10,10 32,28 26,34 10,54" fill="#188038"/>215 <polygon points="10,10 32,28 44,16" fill="#4285f4"/>216 <polygon points="10,54 32,36 44,48" fill="#fbbc05"/>217 </g>218 </svg>219 </div>220 <div class="label">Play Store</div>221 </div>222 223 <!-- Gmail -->224 <div class="app">225 <div class="icon-circle">226 <svg viewBox="0 0 64 64" aria-label="Gmail">227 <rect x="10" y="18" width="44" height="28" rx="4" fill="#fff"/>228 <path d="M12 20l20 14L52 20v6L32 40 12 26z" fill="#ea4335"/>229 <path d="M12 20h8l12 9 12-9h8l-20 14z" fill="#34a853"/>230 <path d="M12 20v24h8V27L12 20z" fill="#4285f4"/>231 <path d="M52 20v24h-8V27l8-7z" fill="#fbbc05"/>232 </svg>233 </div>234 <div class="label">Gmail</div>235 </div>236 237 <!-- Photos -->238 <div class="app">239 <div class="icon-circle">240 <svg viewBox="0 0 64 64" aria-label="Photos">241 <path d="M32 8a16 16 0 0 1 0 32V8z" fill="#4285f4"/>242 <path d="M56 32a16 16 0 0 1-32 0h32z" fill="#34a853"/>243 <path d="M32 56a16 16 0 0 1 0-32v32z" fill="#fbbc05"/>244 <path d="M8 32a16 16 0 0 1 32 0H8z" fill="#ea4335"/>245 </svg>246 </div>247 <div class="label">Photos</div>248 </div>249 250 <!-- YouTube -->251 <div class="app">252 <div class="icon-circle">253 <svg viewBox="0 0 64 64" aria-label="YouTube">254 <rect x="10" y="18" width="44" height="28" rx="10" fill="#ff0000"/>255 <polygon points="28,22 46,32 28,42" fill="#ffffff"/>256 </svg>257 </div>258 <div class="label">YouTube</div>259 </div>260 </div>261 262 <!-- Dock icons -->263 <div class="dock">264 <!-- Phone -->265 <div class="icon-circle">266 <svg viewBox="0 0 64 64" aria-label="Phone">267 <circle cx="32" cy="32" r="26" fill="#2d7bf3"/>268 <path d="M27 20l-5 5c2 6 7 11 13 13l5-5c1-1 3-1 4 0l4 4c1 1 1 3 0 4-2 2-6 5-10 5-10 0-22-12-22-22 0-4 3-8 5-10 1-1 3-1 4 0l4 4c1 1 1 3 0 4z" fill="#fff"/>269 </svg>270 </div>271 <!-- Messages -->272 <div class="icon-circle">273 <svg viewBox="0 0 64 64" aria-label="Messages">274 <circle cx="32" cy="32" r="26" fill="#5b7cff"/>275 <path d="M16 22h32v18H28l-8 6v-6h-4V22z" fill="#ffffff"/>276 </svg>277 </div>278 <!-- Chrome -->279 <div class="icon-circle">280 <svg viewBox="0 0 64 64" aria-label="Chrome">281 <circle cx="32" cy="32" r="28" fill="#db4437"/>282 <path d="M32 4a28 28 0 0 1 24 14H32z" fill="#f4b400"/>283 <path d="M10 50A28 28 0 0 1 32 4l-8 14z" fill="#0f9d58"/>284 <circle cx="32" cy="32" r="12" fill="#4285f4"/>285 <circle cx="32" cy="32" r="6" fill="#bcd3ff"/>286 </svg>287 </div>288 <!-- Camera -->289 <div class="icon-circle">290 <svg viewBox="0 0 64 64" aria-label="Camera">291 <rect x="10" y="18" width="44" height="28" rx="6" fill="#4b4f55"/>292 <rect x="16" y="14" width="10" height="6" rx="2" fill="#4b4f55"/>293 <circle cx="32" cy="32" r="10" fill="#8aa1ff"/>294 <circle cx="32" cy="32" r="6" fill="#2d3b8f"/>295 </svg>296 </div>297 </div>298 299 <!-- Search pill -->300 <div class="search-pill">301 <div class="search-left">302 <div class="g-badge" aria-label="Google">303 <svg viewBox="0 0 24 24">304 <path fill="#4285F4" d="M21 12.2c0-.7-.1-1.2-.2-1.7H12v3.2h5.1c-.1.9-.7 2.3-2.1 3.2l3.2 2.5C20 17.8 21 15.3 21 12.2z"/>305 <path fill="#34A853" d="M12 22c2.7 0 4.9-.9 6.5-2.5l-3.2-2.5c-.9.6-2.1 1-3.3 1-2.5 0-4.7-1.7-5.5-4.1l-3.3 2.6C5 19.7 8.2 22 12 22z"/>306 <path fill="#FBBC05" d="M6.5 13.9C6.3 13.3 6.2 12.7 6.2 12s.1-1.3.3-1.9L3 7.4C2.3 8.8 2 10.3 2 12s.3 3.2 1 4.6l3.5-2.7z"/>307 <path fill="#EA4335" d="M12 5.5c1.5 0 2.8.5 3.8 1.4l2.8-2.8C17 2.6 14.7 2 12 2 8.2 2 5 4.3 3.5 7.4l3.7 2.7C7.3 7.7 9.5 5.5 12 5.5z"/>308 </svg>309 </div>310 <span>Search</span>311 </div>312 <div class="search-right">313 <!-- Mic -->314 <svg viewBox="0 0 24 24" aria-label="Mic" fill="#fff">315 <path d="M12 3a3 3 0 0 1 3 3v6a3 3 0 1 1-6 0V6a3 3 0 0 1 3-3zm-1 15.9V21h2v-2.1c3.4-.5 6-3.4 6-6.9h-2a4 4 0 0 1-8 0H5c0 3.4 2.6 6.3 6 6.9z"/>316 </svg>317 <!-- Lens/Camera -->318 <svg viewBox="0 0 24 24" aria-label="Lens" fill="#fff">319 <path d="M7 5h3l1-1h2l1 1h3a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zm5 3a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 2.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5z"/>320 </svg>321 </div>322 </div>323 324 <!-- Gesture bar -->325 <div class="gesture"></div>326</div>327</body>328</html>