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 UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: radial-gradient(1400px 1200px at 70% 20%, #7a8a7b 0%, #5f6f62 45%, #4c5a50 70%, #3f4a42 100%);12 }13 14 /* subtle wallpaper arcs */15 .arc {16 position: absolute; border: 6px solid rgba(0,0,0,0.25); border-radius: 50%;17 opacity: 0.35;18 }19 .arc.a1 { width: 1600px; height: 1600px; left: -580px; top: 300px; transform: rotate(8deg); border-color: rgba(0,0,0,0.28); }20 .arc.a2 { width: 1200px; height: 1400px; left: 670px; top: 650px; transform: rotate(-12deg); border-color: rgba(0,0,0,0.32); }21 .arc.a3 { width: 900px; height: 1200px; left: 520px; top: -120px; transform: rotate(15deg); border-color: rgba(0,0,0,0.22); }22 23 /* Status bar */24 .status-bar { position: absolute; top: 0; left: 0; width: 100%; height: 120px; display: flex; align-items: center; padding: 0 36px; color: #fff; }25 .sb-left { display: flex; align-items: center; gap: 18px; font-weight: 600; letter-spacing: 0.6px; font-size: 36px; }26 .sb-center { margin-left: 22px; display: flex; align-items: center; gap: 26px; }27 .sb-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }28 29 /* App grid */30 .apps { position: absolute; left: 60px; right: 60px; top: 220px; }31 .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 56px 48px; }32 .app { display: flex; flex-direction: column; align-items: center; }33 .icon {34 width: 160px; height: 160px; border-radius: 50%;35 display: flex; align-items: center; justify-content: center;36 color: #fff; font-weight: 700; font-size: 52px; letter-spacing: 1px;37 box-shadow: 0 8px 18px rgba(0,0,0,0.25);38 }39 .label { margin-top: 18px; font-size: 32px; color: #ffffff; text-shadow: 0 2px 3px rgba(0,0,0,0.35); text-align: center; line-height: 1.1; max-width: 220px; }40 41 /* Dock row */42 .dock { position: absolute; left: 70px; right: 70px; bottom: 320px; display: flex; justify-content: space-between; }43 .dock .icon { width: 144px; height: 144px; background: #ffffff; color: #3c6be8; box-shadow: 0 8px 18px rgba(0,0,0,0.25); }44 .dock svg { width: 72px; height: 72px; }45 46 /* Search pill */47 .search { position: absolute; left: 66px; right: 66px; bottom: 180px; height: 120px; background: #ffffff; border-radius: 60px; box-shadow: 0 12px 28px rgba(0,0,0,0.28); display: flex; align-items: center; padding: 0 36px; }48 .search .g { font-weight: 800; font-size: 48px; letter-spacing: 0.5px; background: linear-gradient(90deg, #4285F4 0%, #EA4335 33%, #FBBC05 66%, #34A853 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }49 .search .hint { margin-left: 18px; font-size: 36px; color: #777; }50 .search .tools { margin-left: auto; display: flex; align-items: center; gap: 28px; }51 .tool { width: 76px; height: 76px; background: #f1f1f1; border-radius: 50%; display: flex; align-items: center; justify-content: center; }52 53 /* Gesture bar */54 .gesture { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); width: 300px; height: 12px; background: rgba(0,0,0,0.55); border-radius: 6px; }55 56 /* Specific app colors */57 .yummly { background: #F28B3C; }58 .kitchen { background: #FFD64D; color: #2b2b2b; font-weight: 800; }59 .tasty { background: #BDE5F2; color: #222; }60 .bigoven { background: #ffffff; color: #c6242b; border: 2px solid #eee; }61 .sidechef { background: #111; }62 .goodfood { background: #e7f0ec; color: #276d64; border: 2px solid #d7e3de; }63 .whisk { background: #6fd6c3; }64 .recipes { background: #f0e6d6; color: #202020; }65 .cookpad { background: #F6A451; }66 .supercook { background: #ffffff; color: #59b36d; border: 2px solid #e8e8e8; }67 68 /* Small label trimming */69 .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }70 71 /* Simple icon styling for app logos (minimal, stylized) */72 .icon svg { filter: drop-shadow(0px 1px 0 rgba(0,0,0,0.15)); }73</style>74</head>75<body>76<div id="render-target">77 78 <!-- abstract arcs to mimic wallpaper -->79 <div class="arc a1"></div>80 <div class="arc a2"></div>81 <div class="arc a3"></div>82 83 <!-- Status bar -->84 <div class="status-bar">85 <div class="sb-left">11:09</div>86 <div class="sb-center">87 <!-- chat bubble -->88 <svg viewBox="0 0 24 24" width="40" height="40">89 <path d="M4 4h16v12H9l-5 4V4z" fill="#fff"/>90 </svg>91 <!-- trophy/cup -->92 <svg viewBox="0 0 24 24" width="40" height="40">93 <path d="M5 4h14v3H5zM6 7h12v3c0 3-2 5-6 5s-6-2-6-5V7zM10 17h4v3h-4z" fill="#fff"/>94 </svg>95 <!-- pencil -->96 <svg viewBox="0 0 24 24" width="40" height="40">97 <path d="M3 17l10-10 4 4-10 10H3v-4zM15 5l2-2 4 4-2 2z" fill="#fff"/>98 </svg>99 <!-- scissors -->100 <svg viewBox="0 0 24 24" width="40" height="40">101 <path d="M4 7a3 3 0 106 0 3 3 0 10-6 0zm0 10a3 3 0 106 0 3 3 0 10-6 0zM10 14l10-6M10 10l10 6" stroke="#fff" stroke-width="2" fill="none"/>102 </svg>103 </div>104 <div class="sb-right">105 <!-- wifi -->106 <svg viewBox="0 0 24 24" width="40" height="40">107 <path d="M12 18.5l1.5 1.5-1.5 1.5-1.5-1.5L12 18.5z" fill="#fff"/>108 <path d="M3 9c5-4 13-4 18 0M6 12c3.5-3 8.5-3 12 0M9 15c2-2 5-2 6 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>109 </svg>110 <!-- battery -->111 <svg viewBox="0 0 28 24" width="46" height="40">112 <rect x="2" y="6" width="20" height="12" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"/>113 <rect x="4" y="8" width="10" height="8" fill="#fff"/>114 <rect x="22" y="9" width="4" height="6" rx="1" fill="#fff"/>115 </svg>116 </div>117 </div>118 119 <!-- App grid -->120 <div class="apps">121 <div class="grid">122 123 <!-- Yummly -->124 <div class="app">125 <div class="icon yummly">Y</div>126 <div class="label">Yummly</div>127 </div>128 129 <!-- Kitchen Stories -->130 <div class="app">131 <div class="icon kitchen">≈</div>132 <div class="label truncate">Kitchen Sto...</div>133 </div>134 135 <!-- Tasty -->136 <div class="app">137 <div class="icon tasty">T</div>138 <div class="label">Tasty</div>139 </div>140 141 <!-- BigOven -->142 <div class="app">143 <div class="icon bigoven" style="font-size:44px;">BO</div>144 <div class="label">BigOven</div>145 </div>146 147 <!-- SideChef -->148 <div class="app">149 <div class="icon sidechef" style="font-size:66px;">∫</div>150 <div class="label">SideChef</div>151 </div>152 153 <!-- Good Food -->154 <div class="app">155 <div class="icon goodfood" style="font-size:64px; font-weight:800;">gf</div>156 <div class="label">Good Food</div>157 </div>158 159 <!-- Whisk -->160 <div class="app">161 <div class="icon whisk" style="font-size:58px; font-weight:800;">W</div>162 <div class="label">Whisk</div>163 </div>164 165 <!-- Cookbook / Recipes -->166 <div class="app">167 <div class="icon recipes" style="font-size:46px; font-weight:800;">Recipes</div>168 <div class="label truncate">Cookbook ...</div>169 </div>170 171 <!-- Cookpad -->172 <div class="app">173 <div class="icon cookpad">174 <!-- chef hat simple -->175 <svg viewBox="0 0 64 64">176 <path d="M16 42h32v10H16z" fill="#fff"/>177 <path d="M12 30c0-8 8-14 20-14s20 6 20 14c0 0-2 2-6 2H18c-4 0-6-2-6-2z" fill="#fff"/>178 </svg>179 </div>180 <div class="label">Cookpad</div>181 </div>182 183 <!-- Supercook -->184 <div class="app">185 <div class="icon supercook">186 <!-- sprout -->187 <svg viewBox="0 0 64 64">188 <path d="M32 46v-16" stroke="#59b36d" stroke-width="6" stroke-linecap="round"/>189 <path d="M28 24c-10 0-14-8-14-8s10-2 18 4" fill="#59b36d"/>190 <path d="M36 28c10 0 14-8 14-8s-10-2-18 4" fill="#59b36d"/>191 </svg>192 </div>193 <div class="label">Supercook</div>194 </div>195 196 <!-- empty placeholders to match grid spacing -->197 <div class="app"></div>198 <div class="app"></div>199 200 </div>201 </div>202 203 <!-- Dock icons -->204 <div class="dock">205 <!-- Phone -->206 <div class="icon">207 <svg viewBox="0 0 64 64">208 <path d="M46 50c-10-6-20-16-26-26l8-8-12-6-6 12c8 18 20 30 38 38l12-6-6-12-8 8z" fill="#3c6be8"/>209 </svg>210 </div>211 <!-- Messages -->212 <div class="icon">213 <svg viewBox="0 0 64 64">214 <path d="M10 14h44v28H28l-12 10V42H10z" fill="#3c6be8"/>215 </svg>216 </div>217 <!-- Chrome -->218 <div class="icon">219 <svg viewBox="0 0 64 64">220 <circle cx="32" cy="32" r="12" fill="#4285F4"/>221 <path d="M32 8c10 0 18 6 22 14H34a12 12 0 00-2-14z" fill="#EA4335"/>222 <path d="M54 22c4 8 3 18-3 26L34 34a12 12 0 0110-12z" fill="#FBBC05"/>223 <path d="M51 48c-6 6-14 8-22 6L22 34h12a12 12 0 0117 14z" fill="#34A853"/>224 </svg>225 </div>226 <!-- Camera -->227 <div class="icon">228 <svg viewBox="0 0 64 64">229 <rect x="10" y="18" width="44" height="28" rx="6" fill="#3c6be8"/>230 <circle cx="32" cy="32" r="10" fill="#ffffff"/>231 <circle cx="32" cy="32" r="6" fill="#3c6be8"/>232 </svg>233 </div>234 </div>235 236 <!-- Search bar -->237 <div class="search">238 <div class="g">G</div>239 <div class="hint">Search</div>240 <div class="tools">241 <div class="tool">242 <!-- microphone -->243 <svg viewBox="0 0 24 24">244 <path d="M12 4a4 4 0 014 4v4a4 4 0 11-8 0V8a4 4 0 014-4z" fill="#555"/>245 <path d="M5 12a7 7 0 0014 0M12 19v3" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>246 </svg>247 </div>248 <div class="tool">249 <!-- camera -->250 <svg viewBox="0 0 24 24">251 <rect x="3" y="7" width="18" height="12" rx="3" fill="#555"/>252 <circle cx="12" cy="13" r="4" fill="#9aa0a6"/>253 </svg>254 </div>255 </div>256 </div>257 258 <!-- Gesture bar -->259 <div class="gesture"></div>260 261</div>262</body>263</html>