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: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background:12 radial-gradient(1600px 1200px at 20% 30%, #121416 0%, #0f1012 60%, #0c0d0f 100%);13 }14 15 /* Subtle feather-like texture using repeating gradients */16 #render-target::before {17 content: "";18 position: absolute; inset: 0;19 background:20 repeating-linear-gradient(120deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 3px, transparent 8px),21 repeating-linear-gradient(60deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 4px, transparent 12px);22 mix-blend-mode: soft-light; opacity: 0.3; pointer-events: none;23 }24 25 /* Status bar */26 .status-bar {27 position: absolute; top: 24px; left: 32px; right: 32px; height: 60px;28 display: flex; align-items: center; justify-content: space-between; color: #ffffff;29 font-size: 34px; font-weight: 500;30 }31 .status-left { display: flex; align-items: center; gap: 18px; }32 .status-icons { display: flex; align-items: center; gap: 16px; }33 .dot { width: 10px; height: 10px; background: #ffffff; border-radius: 50%; opacity: 0.9; }34 .small-icon { width: 32px; height: 32px; opacity: 0.95; }35 .small-icon svg { width: 100%; height: 100%; }36 37 /* Weather/date widget */38 .widget {39 position: absolute; top: 220px; left: 64px; right: 64px; color: #fff;40 }41 .date {42 font-size: 64px; font-weight: 500; letter-spacing: 0.2px;43 margin-bottom: 24px;44 text-shadow: 0 1px 2px rgba(0,0,0,0.5);45 }46 .weather {47 display: flex; align-items: center; gap: 18px;48 font-size: 32px; color: #e9eef7;49 text-shadow: 0 1px 2px rgba(0,0,0,0.5);50 }51 .sun {52 width: 36px; height: 36px; border-radius: 50%;53 background: #FFD54F; position: relative;54 box-shadow: 0 2px 4px rgba(0,0,0,0.35);55 }56 .sun::after {57 content: ""; position: absolute; right: -2px; bottom: -2px;58 width: 16px; height: 16px; background: #ffffff; border-radius: 50%;59 }60 61 /* App grid */62 .apps-row {63 position: absolute; left: 64px; right: 64px;64 display: flex; justify-content: space-between; align-items: flex-start;65 }66 .apps-row.row1 { top: 1520px; }67 .apps-row.row2 { top: 1760px; }68 .app {69 width: 180px; text-align: center; color: #eaf0f6;70 text-shadow: 0 1px 2px rgba(0,0,0,0.6);71 }72 .icon-circle {73 width: 160px; height: 160px; border-radius: 50%;74 background: #ffffff; margin: 0 auto 18px auto;75 display: grid; place-items: center;76 box-shadow: 0 8px 20px rgba(0,0,0,0.45);77 overflow: hidden;78 }79 .icon-circle svg { width: 82%; height: 82%; }80 81 .label { font-size: 32px; }82 83 /* Google search bar */84 .search-bar {85 position: absolute; left: 64px; right: 64px; bottom: 180px;86 height: 120px; background: #2c2f33; border-radius: 60px;87 display: flex; align-items: center; padding: 0 36px; gap: 26px;88 box-shadow: 0 6px 18px rgba(0,0,0,0.55);89 }90 .g-logo {91 width: 66px; height: 66px; border-radius: 50%;92 display: grid; place-items: center; background: transparent;93 }94 .g-logo svg { width: 100%; height: 100%; }95 .search-placeholder {96 flex: 1; color: #bfc6cf; font-size: 34px;97 }98 .search-action {99 width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;100 background: rgba(255,255,255,0.06);101 }102 .search-action svg { width: 60%; height: 60%; }103 104 /* Gesture bar */105 .gesture {106 position: absolute; left: 50%; transform: translateX(-50%);107 bottom: 80px; width: 420px; height: 14px; border-radius: 10px;108 background: #c9cdd3; opacity: 0.65;109 }110</style>111</head>112<body>113<div id="render-target">114 115 <!-- Status bar -->116 <div class="status-bar">117 <div class="status-left">118 <div class="time">8:35</div>119 <div class="dot"></div>120 <div class="dot" style="opacity:.6"></div>121 <div class="dot" style="opacity:.6"></div>122 </div>123 <div class="status-icons">124 <!-- Wi-Fi -->125 <div class="small-icon">126 <svg viewBox="0 0 24 24" fill="#fff">127 <path d="M12 18.5l1.7-1.7a2.4 2.4 0 00-3.4 0L12 18.5z"/>128 <path d="M4.9 11.8l1.8 1.8A8 8 0 0117.3 13.6l1.8-1.8A10.7 10.7 0 004.9 11.8z" opacity=".7"/>129 <path d="M8.5 14.6l1.7 1.7a4.8 4.8 0 016.6 0l1.7-1.7a7.2 7.2 0 00-10 0z" opacity=".9"/>130 </svg>131 </div>132 <!-- Battery -->133 <div class="small-icon">134 <svg viewBox="0 0 24 24">135 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>136 <rect x="21" y="10" width="2" height="4" fill="#fff"/>137 <rect x="4" y="8" width="13" height="8" fill="#fff"/>138 </svg>139 </div>140 </div>141 </div>142 143 <!-- Weather Widget -->144 <div class="widget">145 <div class="date">Wed, Nov 15</div>146 <div class="weather">147 <div class="sun"></div>148 <div>16°C · Today 27° / 13° · Mostly sunny</div>149 </div>150 </div>151 152 <!-- Apps row 1 -->153 <div class="apps-row row1">154 <!-- Play Store -->155 <div class="app">156 <div class="icon-circle">157 <svg viewBox="0 0 100 100">158 <!-- triangle play -->159 <polygon points="22,20 78,50 22,80" fill="#34A853"/>160 <polygon points="22,20 44,32 22,44" fill="#4285F4"/>161 <polygon points="22,56 44,68 22,80" fill="#FBBC05"/>162 <polygon points="44,32 44,68 78,50" fill="#EA4335"/>163 </svg>164 </div>165 <div class="label">Play Store</div>166 </div>167 <!-- Gmail -->168 <div class="app">169 <div class="icon-circle">170 <svg viewBox="0 0 100 100">171 <rect x="18" y="28" width="64" height="44" rx="8" fill="#fff" stroke="#cfd3d8" stroke-width="4"/>172 <path d="M18 34 L50 56 L82 34" stroke="#EA4335" stroke-width="10" fill="none"/>173 <path d="M22 70 V40 L50 60 L78 40 V70" fill="none" stroke="#34A853" stroke-width="10"/>174 <path d="M22 38 A10 10 0 0 1 32 28" stroke="#FBBC05" stroke-width="10" fill="none"/>175 <path d="M68 28 A10 10 0 0 1 78 38" stroke="#4285F4" stroke-width="10" fill="none"/>176 </svg>177 </div>178 <div class="label">Gmail</div>179 </div>180 <!-- Photos -->181 <div class="app">182 <div class="icon-circle">183 <svg viewBox="0 0 100 100">184 <circle cx="50" cy="50" r="12" fill="#fff"/>185 <path d="M50 20 A30 30 0 0 1 80 50 L50 50 Z" fill="#4285F4"/>186 <path d="M80 50 A30 30 0 0 1 50 80 L50 50 Z" fill="#34A853"/>187 <path d="M50 80 A30 30 0 0 1 20 50 L50 50 Z" fill="#FBBC05"/>188 <path d="M20 50 A30 30 0 0 1 50 20 L50 50 Z" fill="#EA4335"/>189 </svg>190 </div>191 <div class="label">Photos</div>192 </div>193 <!-- YouTube -->194 <div class="app">195 <div class="icon-circle">196 <svg viewBox="0 0 100 100">197 <rect x="18" y="28" width="64" height="44" rx="12" fill="#FF0000"/>198 <polygon points="44,38 44,62 66,50" fill="#fff"/>199 </svg>200 </div>201 <div class="label">YouTube</div>202 </div>203 </div>204 205 <!-- Apps row 2 -->206 <div class="apps-row row2">207 <!-- Phone -->208 <div class="app">209 <div class="icon-circle">210 <svg viewBox="0 0 100 100">211 <circle cx="50" cy="50" r="40" fill="#E3F2FD"/>212 <path d="M38 30c2-3 5-3 7-1l6 6c2 2 2 5-1 7l-5 3c6 10 12 15 22 20l3-5c2-3 5-3 7-1l6 6c2 2 2 5-1 7-5 3-12 4-20 1-16-6-28-18-36-34-3-8-2-15 1-20z"213 fill="#1E88E5"/>214 </svg>215 </div>216 <div class="label">Phone</div>217 </div>218 <!-- Messages -->219 <div class="app">220 <div class="icon-circle">221 <svg viewBox="0 0 100 100">222 <rect x="18" y="24" width="64" height="44" rx="12" fill="#1976D2"/>223 <rect x="26" y="34" width="48" height="8" rx="4" fill="#fff" opacity=".9"/>224 <rect x="26" y="48" width="32" height="8" rx="4" fill="#fff" opacity=".9"/>225 <path d="M36 80 L46 68 H70 A8 8 0 0 0 78 60 V68 A12 12 0 0 1 66 80 Z" fill="#1976D2"/>226 </svg>227 </div>228 <div class="label">Messages</div>229 </div>230 <!-- Chrome -->231 <div class="app">232 <div class="icon-circle">233 <svg viewBox="0 0 100 100">234 <circle cx="50" cy="50" r="42" fill="#fff"/>235 <path d="M50 14 A36 36 0 0 1 86 50 H58 L50 34" fill="#EA4335"/>236 <path d="M86 50 A36 36 0 0 1 50 86 L36 58 H58" fill="#34A853"/>237 <path d="M50 86 A36 36 0 0 1 14 50 L42 50 L58 58" fill="#FBBC05"/>238 <circle cx="50" cy="50" r="18" fill="#4285F4"/>239 <circle cx="50" cy="50" r="10" fill="#eaf3ff"/>240 </svg>241 </div>242 <div class="label">Chrome</div>243 </div>244 <!-- Camera -->245 <div class="app">246 <div class="icon-circle">247 <svg viewBox="0 0 100 100">248 <rect x="18" y="30" width="64" height="42" rx="10" fill="#9EA5AD"/>249 <rect x="24" y="24" width="20" height="10" rx="4" fill="#8A9098"/>250 <circle cx="50" cy="51" r="16" fill="#2E7DFF"/>251 <circle cx="50" cy="51" r="8" fill="#9CC0FF"/>252 <rect x="64" y="38" width="12" height="6" rx="2" fill="#c8cdd3"/>253 </svg>254 </div>255 <div class="label">Camera</div>256 </div>257 </div>258 259 <!-- Google Search Bar -->260 <div class="search-bar">261 <div class="g-logo" aria-label="Google logo">262 <svg viewBox="0 0 100 100">263 <path d="M50 20 A30 30 0 1 0 80 50H50" fill="none" stroke="#4285F4" stroke-width="12"/>264 <path d="M50 20 A30 30 0 0 0 24 34" fill="none" stroke="#EA4335" stroke-width="12"/>265 <path d="M24 34 A30 30 0 0 0 24 66" fill="none" stroke="#FBBC05" stroke-width="12"/>266 <path d="M24 66 A30 30 0 0 0 50 80" fill="none" stroke="#34A853" stroke-width="12"/>267 </svg>268 </div>269 <div class="search-placeholder">Search…</div>270 <div class="search-action" aria-label="Voice search">271 <svg viewBox="0 0 24 24" fill="#fff">272 <rect x="9" y="4" width="6" height="10" rx="3"/>273 <path d="M6 12a6 6 0 0012 0" fill="none" stroke="#fff" stroke-width="2"/>274 <rect x="11" y="18" width="2" height="3" fill="#fff"/>275 <rect x="8" y="20" width="8" height="2" rx="1" fill="#fff"/>276 </svg>277 </div>278 <div class="search-action" aria-label="Lens">279 <svg viewBox="0 0 24 24">280 <rect x="5" y="5" width="14" height="14" rx="4" fill="#fff" opacity=".9"/>281 <circle cx="12" cy="12" r="4" fill="#4285F4"/>282 <circle cx="17" cy="7" r="2" fill="#EA4335"/>283 </svg>284 </div>285 </div>286 287 <!-- Gesture bar -->288 <div class="gesture"></div>289</div>290</body>291</html>