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; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background:15 radial-gradient(1200px 1200px at 80% 40%, rgba(90,90,90,0.55), transparent 60%),16 radial-gradient(900px 900px at 20% 60%, rgba(255,255,255,0.9), rgba(230,230,230,0.85) 60%, rgba(210,210,210,0.8)),17 linear-gradient(180deg, #efefef 0%, #dcdcdc 40%, #d5d5d5 100%);18 }19 20 /* Status bar */21 .status-bar {22 position: absolute;23 top: 0;24 left: 0;25 right: 0;26 height: 110px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 padding: 0 32px;31 color: #ffffff;32 text-shadow: 0 1px 2px rgba(0,0,0,0.55);33 font-size: 34px;34 letter-spacing: 0.5px;35 }36 .status-left { display: flex; align-items: center; gap: 22px; }37 .status-right { display: flex; align-items: center; gap: 26px; }38 39 /* Grid of apps */40 .apps {41 position: absolute;42 top: 190px;43 left: 48px;44 right: 48px;45 display: grid;46 grid-template-columns: repeat(4, 1fr);47 column-gap: 40px;48 row-gap: 120px;49 justify-items: center;50 }51 .app {52 width: 200px;53 text-align: center;54 color: #ffffff;55 text-shadow: 0 2px 4px rgba(0,0,0,0.55);56 }57 .icon {58 width: 170px;59 height: 170px;60 border-radius: 50%;61 background: #ffffff;62 display: grid;63 place-items: center;64 margin: 0 auto 22px;65 box-shadow: 0 16px 28px rgba(0,0,0,0.28), 0 4px 10px rgba(0,0,0,0.22);66 position: relative;67 overflow: hidden;68 }69 .label { font-size: 36px; }70 71 /* Dock row */72 .dock {73 position: absolute;74 bottom: 390px;75 left: 60px;76 right: 60px;77 display: flex;78 justify-content: space-between;79 }80 .dock .icon { width: 150px; height: 150px; }81 82 /* Search bar */83 .search {84 position: absolute;85 left: 56px;86 right: 56px;87 bottom: 210px;88 height: 120px;89 background: #2e2e2e;90 border-radius: 60px;91 box-shadow: 0 12px 26px rgba(0,0,0,0.35);92 display: flex;93 align-items: center;94 padding: 0 34px;95 color: #e0e0e0;96 font-size: 40px;97 }98 .search .gLogo {99 width: 72px; height: 72px; border-radius: 50%;100 background: #fff; display: grid; place-items: center; margin-right: 22px;101 }102 .search .actions { margin-left: auto; display: flex; align-items: center; gap: 28px; }103 .search .pill-divider { width: 2px; height: 44px; background: rgba(255,255,255,0.14); border-radius: 2px; }104 105 /* Gesture bar */106 .gesture {107 position: absolute;108 bottom: 128px;109 left: 50%;110 transform: translateX(-50%);111 width: 260px; height: 14px;112 background: rgba(60,60,60,0.8);113 border-radius: 10px;114 }115 116 /* Small helpers */117 svg { display: block; }118 119 /* Specific branded icon backgrounds */120 .icon.habitica { background: #6c49ce; }121 .icon.things3 {122 background: linear-gradient(135deg, #6fe1ff, #35c1f1 60%, #19a7e6);123 }124 .icon.tasty { background: #bceff3; }125</style>126</head>127<body>128<div id="render-target">129 130 <!-- Status bar -->131 <div class="status-bar">132 <div class="status-left">133 <div>10:43</div>134 <div>60°</div>135 <!-- simple location and data icons -->136 <svg width="34" height="34" viewBox="0 0 24 24" fill="#ffffff" opacity="0.9">137 <path d="M12 2l4 8-4 12-4-12 4-8z"/>138 </svg>139 <svg width="34" height="34" viewBox="0 0 24 24" fill="#ffffff" opacity="0.9">140 <path d="M3 18h18v2H3zM3 12h14v2H3zM3 6h10v2H3z"/>141 </svg>142 </div>143 <div class="status-right">144 <!-- Wi‑Fi -->145 <svg width="44" height="44" viewBox="0 0 24 24" fill="#ffffff">146 <path d="M12 18.5l2.5 2.5-2.5 2.5-2.5-2.5L12 18.5z" opacity="0"></path>147 <path d="M12 18a3 3 0 0 1 2.1.9L12 21l-2.1-2.1A3 3 0 0 1 12 18zm0-4.5c2.2 0 4.2.9 5.7 2.3l-1.4 1.4A6.5 6.5 0 0 0 12 15.5a6.5 6.5 0 0 0-4.3 1.7l-1.4-1.4A8.9 8.9 0 0 1 12 13.5zm0-4.5c3.5 0 6.8 1.4 9.2 3.8l-1.4 1.4A12.2 12.2 0 0 0 12 11.5a12.2 12.2 0 0 0-7.8 2.7L2.8 12.8C5.3 10.4 8.6 9 12 9z"/>148 </svg>149 <!-- Battery -->150 <svg width="56" height="44" viewBox="0 0 40 24" fill="none">151 <rect x="1" y="4" width="32" height="16" rx="3" stroke="#fff" stroke-width="2"/>152 <rect x="3" y="6" width="22" height="12" rx="2" fill="#ffffff"/>153 <rect x="33" y="9" width="5" height="6" rx="1" fill="#ffffff"/>154 </svg>155 </div>156 </div>157 158 <!-- App grid -->159 <div class="apps">160 <!-- Tasks -->161 <div class="app">162 <div class="icon">163 <svg width="130" height="130" viewBox="0 0 100 100">164 <circle cx="50" cy="50" r="36" fill="none" stroke="#2382ff" stroke-width="10"/>165 <path d="M34 51l10 10 22-23" fill="none" stroke="#2382ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="10"/>166 </svg>167 </div>168 <div class="label">Tasks</div>169 </div>170 171 <!-- TickTick -->172 <div class="app">173 <div class="icon">174 <svg width="130" height="130" viewBox="0 0 100 100">175 <circle cx="50" cy="50" r="36" fill="none" stroke="#2e8cff" stroke-width="10"/>176 <path d="M34 51l10 10 22-23" fill="none" stroke="#ffbf22" stroke-linecap="round" stroke-linejoin="round" stroke-width="10"/>177 </svg>178 </div>179 <div class="label">TickTick</div>180 </div>181 182 <!-- 3 Things -->183 <div class="app">184 <div class="icon things3">185 <svg width="120" height="120" viewBox="0 0 100 100">186 <rect x="18" y="22" width="28" height="28" rx="6" fill="rgba(255,255,255,0.9)"/>187 <rect x="36" y="38" width="28" height="28" rx="6" fill="rgba(255,255,255,0.85)"/>188 <rect x="54" y="54" width="28" height="28" rx="6" fill="rgba(255,255,255,0.8)"/>189 </svg>190 </div>191 <div class="label">3 Things</div>192 </div>193 194 <!-- Habitica -->195 <div class="app">196 <div class="icon habitica">197 <svg width="130" height="130" viewBox="0 0 100 100">198 <!-- simplified mascot silhouette -->199 <path d="M25 65c10-20 10-35 27-35 10 0 13 7 13 12 6 2 10 7 10 13 0 10-8 18-19 18-8 0-13-3-16-8l-6 0c-5 0-8 2-9 5z" fill="#ffffff"/>200 <rect x="27" y="60" width="8" height="6" rx="3" fill="#6c49ce"/>201 <circle cx="61" cy="45" r="3" fill="#6c49ce"/>202 </svg>203 </div>204 <div class="label">Habitica</div>205 </div>206 207 <!-- BigOven -->208 <div class="app">209 <div class="icon">210 <svg width="120" height="120" viewBox="0 0 100 100">211 <rect x="24" y="24" width="22" height="22" rx="6" fill="#e60023"/>212 <rect x="54" y="24" width="22" height="22" rx="6" fill="#e60023"/>213 <rect x="24" y="54" width="22" height="22" rx="6" fill="#e60023"/>214 <rect x="54" y="54" width="22" height="22" rx="6" fill="#e60023"/>215 </svg>216 </div>217 <div class="label">BigOven</div>218 </div>219 220 <!-- Tasty -->221 <div class="app">222 <div class="icon tasty">223 <div style="font-weight:900; font-size:44px; color:#1a1a1a;">TASTY</div>224 </div>225 <div class="label">Tasty</div>226 </div>227 228 <!-- Empty slots to keep grid spacing similar -->229 <div></div>230 <div></div>231 </div>232 233 <!-- Dock icons -->234 <div class="dock">235 <!-- Phone -->236 <div class="icon">237 <svg width="100" height="100" viewBox="0 0 100 100">238 <path d="M36 22l12 12-7 7c4 8 9 13 17 17l7-7 12 12c-6 8-14 12-20 10-18-6-33-21-39-39-2-6 2-14 10-20z" fill="#2e7df6"/>239 </svg>240 </div>241 242 <!-- Messages -->243 <div class="icon">244 <svg width="100" height="100" viewBox="0 0 100 100">245 <rect x="18" y="18" width="64" height="46" rx="12" fill="#3a88ff"/>246 <path d="M30 70l16-10h24c7 0 12-5 12-12v-2" stroke="none" fill="#3a88ff"/>247 <circle cx="38" cy="42" r="6" fill="#fff"/>248 <circle cx="54" cy="42" r="6" fill="#fff"/>249 <circle cx="70" cy="42" r="6" fill="#fff"/>250 </svg>251 </div>252 253 <!-- Chrome -->254 <div class="icon">255 <svg width="100" height="100" viewBox="0 0 100 100">256 <circle cx="50" cy="50" r="40" fill="#f2f2f2"/>257 <g transform="translate(50 50)">258 <path d="M0 0 L34 0 A34 34 0 0 0 -10 -30 Z" fill="#db4437"/>259 <path d="M0 0 L-10 -30 A34 34 0 0 0 -30 12 Z" fill="#0f9d58"/>260 <path d="M0 0 L-30 12 A34 34 0 0 0 34 0 Z" fill="#f4b400"/>261 <circle cx="0" cy="0" r="16" fill="#4285f4" stroke="#ffffff" stroke-width="4"/>262 </g>263 </svg>264 </div>265 266 <!-- Camera -->267 <div class="icon">268 <svg width="100" height="100" viewBox="0 0 100 100">269 <rect x="16" y="28" width="68" height="48" rx="10" fill="#9aa0a6"/>270 <rect x="26" y="22" width="20" height="10" rx="4" fill="#9aa0a6"/>271 <circle cx="50" cy="52" r="16" fill="#1a73e8"/>272 <circle cx="50" cy="52" r="9" fill="#8ab4f8"/>273 <circle cx="74" cy="36" r="5" fill="#cfd8dc"/>274 </svg>275 </div>276 </div>277 278 <!-- Search bar -->279 <div class="search">280 <div class="gLogo">281 <svg width="48" height="48" viewBox="0 0 24 24">282 <path d="M12 4a8 8 0 1 0 0 16c3.3 0 6.1-2 7.3-4.8h-7.3v-3.4h11A10 10 0 0 1 12 22 10 10 0 1 1 12 2c2.1 0 4 .7 5.5 1.9l-2.4 2.4C14.3 5.5 13.2 5 12 5z" fill="#4285F4"/>283 </svg>284 </div>285 <div>Search...</div>286 <div class="actions">287 <svg width="54" height="54" viewBox="0 0 24 24" fill="#1a73e8">288 <path d="M12 3l3 6 6 .9-4.5 4.3 1 6L12 17l-5.5 3.2 1-6L3 9.9 9 9z"/>289 </svg>290 <div class="pill-divider"></div>291 <svg width="54" height="54" viewBox="0 0 24 24" fill="#34a853">292 <rect x="4" y="6" width="16" height="12" rx="3" fill="#34a853"/>293 <circle cx="12" cy="12" r="4" fill="#fff"/>294 </svg>295 </div>296 </div>297 298 <!-- Gesture pill -->299 <div class="gesture"></div>300 301</div>302</body>303</html>