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 background: radial-gradient(1400px 1100px at 65% 35%, #b7d0f5 0%, #9cc2f2 30%, #263044 60%, #0d0e16 100%);15 font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;16 color: #fff;17 }18 19 /* subtle mist at the very top */20 .top-fade {21 position: absolute; left: 0; top: 0; right: 0; height: 180px;22 background: linear-gradient(to bottom, rgba(255,255,255,0.35), rgba(255,255,255,0));23 pointer-events: none;24 }25 26 /* Status bar */27 .status-bar {28 position: absolute; top: 22px; left: 36px; right: 36px; height: 64px;29 display: flex; align-items: center; justify-content: space-between;30 font-size: 34px; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.25);31 }32 .status-left { display: flex; align-items: center; gap: 18px; }33 .status-right { display: flex; align-items: center; gap: 26px; }34 35 /* Generic circular app icon container */36 .app {37 width: 160px; height: 160px; border-radius: 50%;38 background: #ffffff; color: #111; display: flex; align-items: center; justify-content: center;39 box-shadow: 0 6px 18px rgba(0,0,0,0.35);40 }41 .app-label {42 margin-top: 22px; color: #fff; font-size: 36px; text-align: center; letter-spacing: 0.2px;43 }44 45 /* Kindle single icon at right */46 .kindle-wrap {47 position: absolute; right: 74px; top: 1120px; width: 160px; text-align: center;48 }49 .kindle {50 background: radial-gradient(circle at 65% 25%, #7be0ff, #2b6d88 60%, #0d2634);51 position: relative; overflow: hidden;52 }53 .kindle svg { width: 90px; height: 90px; }54 55 /* 4-icon row */56 .row-4 {57 position: absolute; left: 0; right: 0; top: 1420px;58 display: grid; grid-template-columns: repeat(4, 1fr);59 padding: 0 64px; gap: 0;60 text-align: center;61 }62 .row-4 .cell { display: flex; flex-direction: column; align-items: center; }63 64 /* Dock icons above search bar */65 .dock-icons {66 position: absolute; left: 0; right: 0; top: 1730px;67 display: grid; grid-template-columns: repeat(4, 1fr);68 padding: 0 120px; text-align: center;69 }70 71 /* Google search pill */72 .search-pill {73 position: absolute; left: 64px; right: 64px; bottom: 170px; height: 120px;74 background: #33363b; border-radius: 60px; box-shadow: 0 10px 24px rgba(0,0,0,0.45);75 display: flex; align-items: center; justify-content: space-between; padding: 0 28px 0 28px;76 color: #cfd3d8; font-size: 36px;77 }78 .search-left, .search-right { display: flex; align-items: center; gap: 22px; }79 .g-badge {80 width: 68px; height: 68px; border-radius: 50%; background: #202124;81 display: flex; align-items: center; justify-content: center;82 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.06);83 }84 .dot { width: 18px; height: 18px; border-radius: 50%; }85 86 /* Home indicator */87 .home-indicator {88 position: absolute; left: 50%; transform: translateX(-50%);89 bottom: 70px; width: 220px; height: 10px; border-radius: 8px; background: rgba(255,255,255,0.8);90 }91 92 /* Simple SVG defaults */93 svg { display: block; }94 95</style>96</head>97<body>98<div id="render-target">99 100 <div class="top-fade"></div>101 102 <!-- Status Bar -->103 <div class="status-bar">104 <div class="status-left">105 <div>9:05</div>106 <!-- Cloud icon -->107 <svg width="44" height="44" viewBox="0 0 24 24" fill="#ffffff" aria-label="cloud">108 <path d="M6 16a4 4 0 1 1 .7-7.95A6 6 0 0 1 18 9a4 4 0 0 1-.4 8H7.5" opacity="0.75"/>109 </svg>110 </div>111 <div class="status-right">112 <!-- WiFi -->113 <svg width="44" height="44" viewBox="0 0 24 24" fill="#ffffff" aria-label="wifi">114 <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>115 <path d="M5 12c3-3 11-3 14 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>116 <path d="M9 16c2-2 4-2 6 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>117 <circle cx="12" cy="19" r="1.6" fill="#fff"/>118 </svg>119 <!-- Battery -->120 <svg width="48" height="44" viewBox="0 0 28 24" aria-label="battery">121 <rect x="2" y="5" width="20" height="14" rx="2" fill="none" stroke="#fff" stroke-width="2"/>122 <rect x="4" y="7" width="16" height="10" rx="1" fill="#ffffff"/>123 <rect x="22.5" y="9" width="3" height="6" rx="1" fill="#fff"/>124 </svg>125 </div>126 </div>127 128 <!-- Kindle single icon -->129 <div class="kindle-wrap">130 <div class="app kindle">131 <!-- Simple moon + ground hint -->132 <svg viewBox="0 0 100 100">133 <circle cx="68" cy="26" r="10" fill="#b8f0ff"/>134 <rect x="0" y="72" width="120" height="35" fill="#081820"/>135 </svg>136 </div>137 <div class="app-label">Kindle</div>138 </div>139 140 <!-- Row with 4 icons -->141 <div class="row-4">142 <!-- Play Store -->143 <div class="cell">144 <div class="app">145 <svg viewBox="0 0 100 100">146 <defs>147 <clipPath id="tri">148 <polygon points="18,18 82,50 18,82"></polygon>149 </clipPath>150 </defs>151 <rect width="100" height="100" fill="none"/>152 <g clip-path="url(#tri)">153 <rect x="18" y="18" width="64" height="64" fill="#34a853"/>154 <polygon points="18,18 82,50 18,50" fill="#4285f4"/>155 <polygon points="18,50 82,50 18,82" fill="#fbbc05"/>156 <polygon points="18,18 18,82 38,50" fill="#ea4335"/>157 </g>158 </svg>159 </div>160 <div class="app-label">Play Store</div>161 </div>162 163 <!-- Photos -->164 <div class="cell">165 <div class="app">166 <svg viewBox="0 0 100 100">167 <path d="M50 10a20 20 0 0 1 0 40H30A20 20 0 0 1 50 10z" fill="#ea4335"/>168 <path d="M90 50a20 20 0 0 1-40 0V30a20 20 0 0 1 40 20z" fill="#fbbc05"/>169 <path d="M50 90a20 20 0 0 1 0-40h20a20 20 0 0 1-20 40z" fill="#34a853"/>170 <path d="M10 50a20 20 0 0 1 40 0v20A20 20 0 0 1 10 50z" fill="#4285f4"/>171 </svg>172 </div>173 <div class="app-label">Photos</div>174 </div>175 176 <!-- Gmail -->177 <div class="cell">178 <div class="app">179 <svg viewBox="0 0 100 100">180 <rect x="16" y="28" width="68" height="44" rx="8" fill="#ffffff" stroke="#dadce0" stroke-width="4"/>181 <path d="M16 32 L50 55 L84 32" fill="none" stroke="#ea4335" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>182 <path d="M16 32 L16 68 M84 32 L84 68" stroke="#34a853" stroke-width="8" stroke-linecap="round"/>183 <path d="M16 32 L50 55 L84 32" fill="none" stroke="#fbbc05" stroke-width="8" stroke-linecap="round"/>184 <path d="M16 32 L50 55 L84 32" fill="none" stroke="#4285f4" stroke-width="6" stroke-linecap="round"/>185 </svg>186 </div>187 <div class="app-label">Gmail</div>188 </div>189 190 <!-- YouTube -->191 <div class="cell">192 <div class="app">193 <svg viewBox="0 0 100 100">194 <rect x="15" y="28" width="70" height="44" rx="14" fill="#ff0000"/>195 <polygon points="45,38 68,50 45,62" fill="#fff"/>196 </svg>197 </div>198 <div class="app-label">YouTube</div>199 </div>200 </div>201 202 <!-- Dock icons -->203 <div class="dock-icons">204 <!-- Phone -->205 <div class="cell">206 <div class="app">207 <svg viewBox="0 0 100 100">208 <path d="M34 22c-4 2-6 7-4 12 5 12 16 23 28 28 5 2 10 0 12-4l6-10-12-6-6 6c-6-3-12-9-15-15l6-6-6-12z" fill="#1976d2"/>209 </svg>210 </div>211 </div>212 <!-- Messages -->213 <div class="cell">214 <div class="app">215 <svg viewBox="0 0 100 100">216 <rect x="16" y="22" width="68" height="50" rx="12" fill="#4285f4"/>217 <polygon points="40,72 40,88 58,72" fill="#4285f4"/>218 <rect x="28" y="36" width="44" height="8" rx="4" fill="#cfe0ff"/>219 <rect x="28" y="50" width="28" height="8" rx="4" fill="#cfe0ff"/>220 </svg>221 </div>222 </div>223 <!-- Chrome -->224 <div class="cell">225 <div class="app">226 <svg viewBox="0 0 100 100">227 <circle cx="50" cy="50" r="28" fill="#1e88e5"/>228 <circle cx="50" cy="50" r="12" fill="#90caf9"/>229 <path d="M50 18a32 32 0 0 1 28 16H50z" fill="#ea4335"/>230 <path d="M22 34a32 32 0 0 1 28-16v16z" fill="#fbbc05"/>231 <path d="M78 50a32 32 0 0 1-56 16l14-24z" fill="#34a853"/>232 </svg>233 </div>234 </div>235 <!-- Camera -->236 <div class="cell">237 <div class="app">238 <svg viewBox="0 0 100 100">239 <rect x="18" y="30" width="64" height="40" rx="8" fill="#e8eaf0"/>240 <rect x="26" y="24" width="16" height="10" rx="3" fill="#b0b7c3"/>241 <circle cx="50" cy="50" r="14" fill="#3b5bdb"/>242 <circle cx="50" cy="50" r="8" fill="#a9c0ff"/>243 </svg>244 </div>245 </div>246 </div>247 248 <!-- Google Search pill -->249 <div class="search-pill">250 <div class="search-left">251 <div class="g-badge">252 <svg width="36" height="36" viewBox="0 0 24 24">253 <path d="M21 12h-8v3h4.6A6.5 6.5 0 1 1 12 5.5c1.6 0 3 .6 4.1 1.6l2.1-2.1A9 9 0 1 0 21 12z" fill="#4285f4"/>254 <path d="M3.5 8.8l2.6 1.9A4.5 4.5 0 0 1 12 7.5c1 0 1.9.3 2.6.8l2.1-2.1A7.5 7.5 0 0 0 3.5 8.8z" fill="#34a853"/>255 <path d="M12 20.5a7.5 7.5 0 0 0 7.1-5.3H13v-3h11v1a11 11 0 0 1-12 11" fill="#fbbc05" opacity="0"/>256 <path d="M20.5 12.5H13v-3h8a8 8 0 0 1-.5 3z" fill="#ea4335"/>257 </svg>258 </div>259 <span>Search...</span>260 </div>261 <div class="search-right">262 <!-- Mic icon -->263 <svg width="44" height="44" viewBox="0 0 24 24" fill="#9bd1ff" aria-label="mic">264 <rect x="9" y="4" width="6" height="10" rx="3" fill="#9bd1ff"/>265 <path d="M6 11a6 6 0 0 0 12 0" stroke="#9bd1ff" stroke-width="2" fill="none"/>266 <rect x="11" y="18" width="2" height="3" fill="#9bd1ff"/>267 </svg>268 <!-- Lens icon (rounded square with lens) -->269 <svg width="44" height="44" viewBox="0 0 24 24" aria-label="lens">270 <rect x="4" y="6" width="16" height="12" rx="4" fill="#ffb300"/>271 <circle cx="12" cy="12" r="3.5" fill="#1976d2"/>272 </svg>273 </div>274 </div>275 276 <!-- Home indicator -->277 <div class="home-indicator"></div>278 279</div>280</body>281</html>