GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Android Home UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: radial-gradient(1200px 1400px at 40% 35%, #2c2c2f 0%, #1f2124 40%, #15171a 100%);12 }13 14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; right: 0; height: 110px;17 padding: 24px 28px;18 display: flex; align-items: center; justify-content: space-between;19 color: #ffffff;20 }21 .status-left { display: flex; align-items: center; gap: 12px; }22 .time { font-size: 40px; font-weight: 600; letter-spacing: 0.5px; }23 .status-icons { display: flex; align-items: center; gap: 16px; }24 .mini-pill {25 background: rgba(255,255,255,0.15); color: #fff; border-radius: 12px;26 padding: 2px 8px; font-size: 22px; line-height: 22px;27 }28 .top-icon { width: 32px; height: 32px; opacity: 0.9; }29 30 /* App grid */31 .icon-grid {32 position: absolute; left: 0; right: 0; top: 150px;33 padding: 0 60px;34 display: grid;35 grid-template-columns: repeat(4, 1fr);36 grid-row-gap: 90px;37 grid-column-gap: 36px;38 justify-items: center;39 }40 .app { width: 240px; text-align: center; color: #ffffff; }41 .app-icon {42 width: 170px; height: 170px; border-radius: 50%;43 margin: 0 auto 18px; position: relative;44 display: flex; align-items: center; justify-content: center;45 box-shadow: 0 6px 12px rgba(0,0,0,0.35);46 color: #fff; font-weight: 700;47 }48 .app-label {49 font-size: 28px; line-height: 32px;50 max-width: 210px; margin: 0 auto;51 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;52 }53 .notif-dot {54 position: absolute; top: 10px; right: 12px;55 width: 28px; height: 28px; border-radius: 50%;56 background: #d9c8ff; border: 2px solid rgba(255,255,255,0.9);57 box-shadow: 0 2px 4px rgba(0,0,0,0.25);58 }59 60 /* Individual icon colors/content */61 .ic-sidechef { background: #0b5c60; font-size: 88px; font-weight: 500; }62 .ic-fakegps { background: #ffffff; color: #222; font-size: 26px; }63 .ic-lunch { background: #ffffff; color: #222; }64 .ic-babbel { background: #ff7a1a; font-size: 80px; }65 .ic-booking { background: #0a4aa6; font-size: 64px; }66 .ic-expedia { background: #ffd635; }67 .ic-kiwi { background: #1fc2a1; font-size: 76px; }68 .ic-zappo { background: #14286b; }69 .ic-redfin { background: #c62828; font-size: 40px; }70 71 .photo-placeholder {72 width: 130px; height: 130px;73 background: #E0E0E0; border: 1px solid #BDBDBD;74 display: flex; align-items: center; justify-content: center;75 color: #757575; font-size: 22px; text-align: center; border-radius: 50%;76 }77 78 /* Expedia arrow */79 .expedia-mark { width: 90px; height: 90px; }80 /* Zappo tile flower (simplified) */81 .zappo-mark { width: 96px; height: 96px; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 8px; }82 .zappo-mark div { width: 24px; height: 24px; background: #ffcf33; border-radius: 6px; }83 84 /* Dock */85 .dock {86 position: absolute; left: 0; right: 0; bottom: 420px;87 display: flex; justify-content: center; gap: 90px;88 }89 .dock-icon {90 width: 140px; height: 140px; border-radius: 50%;91 background: #ffffff; display: flex; align-items: center; justify-content: center;92 box-shadow: 0 8px 14px rgba(0,0,0,0.35);93 }94 .dock-icon svg { width: 72px; height: 72px; }95 96 /* Google search bar */97 .search-bar {98 position: absolute; left: 80px; right: 80px; bottom: 260px;99 height: 120px; background: #3a3a3d; border-radius: 60px;100 display: flex; align-items: center; justify-content: space-between;101 padding: 0 36px; color: #ddd;102 box-shadow: 0 10px 18px rgba(0,0,0,0.4);103 }104 .search-left { display: flex; align-items: center; gap: 22px; font-size: 36px; }105 .google-g {106 width: 64px; height: 64px; border-radius: 50%;107 background: #fff; display: grid; place-items: center; font-weight: 800; color: #4285F4;108 }109 .search-right { display: flex; align-items: center; gap: 24px; }110 .search-right .tool { width: 60px; height: 60px; border-radius: 50%; background: #4a4a4d; display: flex; align-items: center; justify-content: center; }111 112 /* Navigation pill */113 .nav-pill {114 position: absolute; left: 50%; transform: translateX(-50%);115 bottom: 36px; width: 200px; height: 14px;116 background: #ffffff; opacity: 0.85; border-radius: 10px;117 }118</style>119</head>120<body>121<div id="render-target">122 123 <!-- Status bar -->124 <div class="status-bar">125 <div class="status-left">126 <div class="time">8:40</div>127 <div class="mini-pill">B</div>128 <svg class="top-icon" viewBox="0 0 24 24">129 <path d="M12 3l6 6-1.4 1.4L12 5.8 7.4 10.4 6 9z" fill="#fff"></path>130 </svg>131 <svg class="top-icon" viewBox="0 0 24 24">132 <path d="M4 12l8-8 8 8" stroke="#fff" stroke-width="2" fill="none"></path>133 </svg>134 <div style="width:6px;height:6px;background:#fff;border-radius:50%;opacity:.7;"></div>135 </div>136 <div class="status-icons">137 <!-- WiFi -->138 <svg class="top-icon" viewBox="0 0 24 24">139 <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none" opacity=".8"></path>140 <path d="M5 11c3-3 11-3 14 0" stroke="#fff" stroke-width="2" fill="none" opacity=".8"></path>141 <path d="M8 14c2-2 6-2 8 0" stroke="#fff" stroke-width="2" fill="none"></path>142 <circle cx="12" cy="17" r="2" fill="#fff"></circle>143 </svg>144 <!-- Battery -->145 <svg class="top-icon" viewBox="0 0 26 24">146 <rect x="1" y="6" width="18" height="12" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"></rect>147 <rect x="3" y="8" width="14" height="8" fill="#fff"></rect>148 <rect x="21" y="9" width="3" height="6" rx="1" fill="#fff"></rect>149 </svg>150 </div>151 </div>152 153 <!-- App grid -->154 <div class="icon-grid">155 <!-- Row 1 -->156 <div class="app">157 <div class="app-icon ic-sidechef">158 S159 </div>160 <div class="app-label">SideChef</div>161 </div>162 <div class="app">163 <div class="app-icon ic-fakegps">164 <div class="photo-placeholder">[IMG: GPS & emoji]</div>165 </div>166 <div class="app-label">Fake GPS</div>167 </div>168 <div class="app">169 <div class="app-icon ic-lunch">170 <div class="photo-placeholder">[IMG: Lunch Wrap]</div>171 <div class="notif-dot"></div>172 </div>173 <div class="app-label">Lunch Reci...</div>174 </div>175 <div class="app">176 <div class="app-icon ic-babbel">B</div>177 <div class="app-label">Babbel</div>178 </div>179 180 <!-- Row 2 -->181 <div class="app">182 <div class="app-icon ic-booking">B</div>183 <div class="app-label">Booking.com</div>184 </div>185 <div class="app">186 <div class="app-icon ic-expedia">187 <svg class="expedia-mark" viewBox="0 0 48 48">188 <circle cx="24" cy="24" r="22" fill="none"></circle>189 <path d="M14 32l12-12h8l-12 12z" fill="#0d2a59"></path>190 <path d="M22 18l-8 8" stroke="#0d2a59" stroke-width="4"></path>191 </svg>192 </div>193 <div class="app-label">Expedia</div>194 </div>195 <div class="app">196 <div class="app-icon ic-kiwi">K</div>197 <div class="app-label">Kiwi.com</div>198 </div>199 <div class="app">200 <div class="app-icon ic-zappo">201 <div class="zappo-mark">202 <div></div><div></div><div></div>203 <div></div><div></div><div></div>204 <div></div><div></div><div></div>205 </div>206 <div class="notif-dot"></div>207 </div>208 <div class="app-label">Zappo Bran...</div>209 </div>210 211 <!-- Row 3 -->212 <div class="app">213 <div class="app-icon ic-redfin">REDFIN</div>214 <div class="app-label">Redfin</div>215 </div>216 </div>217 218 <!-- Dock icons -->219 <div class="dock">220 <div class="dock-icon">221 <!-- Phone -->222 <svg viewBox="0 0 24 24">223 <path d="M6 2l4 4-2 2c1.5 3.5 4.5 6.5 8 8l2-2 4 4-2 2c-2 1-6-1-10-5S1 10 2 8l4-4z" fill="#2f7eea"></path>224 </svg>225 </div>226 <div class="dock-icon">227 <!-- Messages -->228 <svg viewBox="0 0 24 24">229 <path d="M3 4h18v12H9l-5 4V4z" fill="#3f7cff"></path>230 <circle cx="8" cy="10" r="2" fill="#fff"></circle>231 <circle cx="12" cy="10" r="2" fill="#fff"></circle>232 <circle cx="16" cy="10" r="2" fill="#fff"></circle>233 </svg>234 </div>235 <div class="dock-icon">236 <!-- Chrome simplified -->237 <svg viewBox="0 0 24 24">238 <circle cx="12" cy="12" r="10" fill="#4caf50"></circle>239 <path d="M12 2a10 10 0 019 6H12z" fill="#f44336"></path>240 <path d="M12 22a10 10 0 01-8.7-5l7.7-3z" fill="#ffeb3b"></path>241 <circle cx="12" cy="12" r="4.5" fill="#1e88e5"></circle>242 </svg>243 </div>244 <div class="dock-icon">245 <!-- Camera -->246 <svg viewBox="0 0 24 24">247 <rect x="3" y="6" width="18" height="12" rx="2" fill="#616161"></rect>248 <rect x="8" y="3" width="8" height="3" rx="1" fill="#616161"></rect>249 <circle cx="12" cy="12" r="4" fill="#1e88e5"></circle>250 </svg>251 </div>252 </div>253 254 <!-- Search bar -->255 <div class="search-bar">256 <div class="search-left">257 <div class="google-g">G</div>258 <div>Search...</div>259 </div>260 <div class="search-right">261 <div class="tool">262 <!-- Mic -->263 <svg viewBox="0 0 24 24">264 <rect x="9" y="4" width="6" height="10" rx="3" fill="#ff5252"></rect>265 <path d="M5 11a7 7 0 0014 0" stroke="#fff" stroke-width="2" fill="none"></path>266 <rect x="11" y="16" width="2" height="4" fill="#fff"></rect>267 </svg>268 </div>269 <div class="tool">270 <!-- Google Lens (camera) -->271 <svg viewBox="0 0 24 24">272 <rect x="5" y="5" width="14" height="14" rx="3" fill="#43a047"></rect>273 <circle cx="12" cy="12" r="4" fill="#fff"></circle>274 </svg>275 </div>276 </div>277 </div>278 279 <!-- Navigation pill -->280 <div class="nav-pill"></div>281 282</div>283</body>284</html>