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>Mobile Menu Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 10 #render-target {11 width: 1080px;12 height: 2400px;13 position: relative;14 overflow: hidden;15 background: #ffffff;16 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17 color: #111;18 }19 20 /* Status bar */21 .status-bar {22 position: absolute;23 top: 0;24 left: 0;25 width: 1080px;26 height: 110px;27 background: #3F51B5;28 color: #fff;29 display: flex;30 align-items: center;31 padding: 0 36px;32 box-sizing: border-box;33 font-size: 36px;34 }35 .status-left { font-weight: 600; }36 .status-right {37 margin-left: auto;38 display: flex;39 align-items: center;40 gap: 26px;41 }42 .sb-icon {43 width: 26px; height: 26px; opacity: 0.95;44 }45 46 /* Header */47 .header {48 position: absolute;49 top: 110px;50 left: 0;51 width: 1080px;52 height: 140px;53 background: #fff;54 border-bottom: 1px solid #e6e6e6;55 display: flex;56 align-items: center;57 padding: 0 32px;58 box-sizing: border-box;59 }60 .header .left-icons, .header .right-icons {61 display: flex;62 align-items: center;63 gap: 28px;64 }65 .header .brand {66 position: absolute;67 left: 50%;68 transform: translateX(-50%);69 font-family: "Times New Roman", Georgia, serif;70 font-size: 44px;71 letter-spacing: 8px;72 font-weight: 700;73 }74 .icon-btn svg { width: 44px; height: 44px; stroke: #111; }75 76 /* Drawer container (left panel) */77 .drawer {78 position: absolute;79 top: 250px; /* below header */80 left: 0;81 width: 780px;82 height: 1940px; /* until before bottom bar */83 background: #fff;84 border-right: 1px solid #dcdcdc;85 overflow: hidden;86 }87 88 /* Quick actions row */89 .quick-actions {90 display: grid;91 grid-template-columns: repeat(4, 1fr);92 border-bottom: 1px solid #eaeaea;93 padding: 26px 10px 18px;94 gap: 8px;95 }96 .qa-item {97 display: flex;98 flex-direction: column;99 align-items: center;100 gap: 10px;101 padding: 8px 0 18px;102 color: #333;103 font-size: 28px;104 }105 .qa-icon {106 width: 72px;107 height: 72px;108 border: 2px solid #111;109 border-radius: 50%;110 display: flex;111 align-items: center;112 justify-content: center;113 }114 .qa-icon svg { width: 44px; height: 44px; }115 116 /* Category list */117 .category-list { width: 100%; }118 .category-item {119 height: 150px;120 display: flex;121 align-items: center;122 justify-content: space-between;123 padding: 0 34px;124 box-sizing: border-box;125 border-bottom: 1px solid #ececec;126 font-size: 38px;127 }128 .chev svg { width: 28px; height: 28px; stroke: #111; }129 130 /* Right-side underlying page preview */131 .preview {132 position: absolute;133 top: 250px;134 left: 780px;135 width: 300px;136 height: 1940px;137 background: #E0E0E0;138 border-left: 1px solid #BDBDBD;139 border-right: 1px solid #BDBDBD;140 display: flex;141 align-items: center;142 justify-content: center;143 color: #757575;144 text-align: center;145 padding: 12px;146 box-sizing: border-box;147 }148 149 /* Floating Action Button */150 .fab {151 position: absolute;152 right: 70px;153 bottom: 260px;154 width: 120px;155 height: 120px;156 border-radius: 60px;157 background: #3F51B5;158 box-shadow: 0 8px 20px rgba(0,0,0,0.3);159 display: flex;160 align-items: center;161 justify-content: center;162 color: #fff;163 font-size: 70px;164 font-weight: 600;165 }166 167 /* Bottom gesture bar */168 .bottom-bar {169 position: absolute;170 bottom: 0;171 left: 0;172 width: 1080px;173 height: 150px;174 background: #000;175 display: flex;176 align-items: center;177 justify-content: center;178 }179 .gesture {180 width: 260px;181 height: 14px;182 background: #e6e6e6;183 border-radius: 8px;184 }185</style>186</head>187<body>188<div id="render-target">189 190 <!-- Status Bar -->191 <div class="status-bar">192 <div class="status-left">7:22</div>193 <div class="status-right">194 <svg class="sb-icon" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="10"/></svg>195 <svg class="sb-icon" viewBox="0 0 24 24" fill="#fff"><rect x="3" y="3" width="18" height="18" rx="3"/></svg>196 <svg class="sb-icon" viewBox="0 0 24 24" fill="#fff"><path d="M2 12h20" stroke="#fff" stroke-width="2"/></svg>197 <svg class="sb-icon" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="3"/></svg>198 <svg class="sb-icon" viewBox="0 0 24 24" fill="#fff"><path d="M4 12h16" stroke="#fff" stroke-width="2"/></svg>199 </div>200 </div>201 202 <!-- Header -->203 <div class="header">204 <div class="left-icons">205 <div class="icon-btn" title="Close">206 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">207 <path d="M5 5l14 14M19 5L5 19" />208 </svg>209 </div>210 <div class="icon-btn" title="Search">211 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">212 <circle cx="11" cy="11" r="7"></circle>213 <path d="M20 20l-3.5-3.5"></path>214 </svg>215 </div>216 </div>217 218 <div class="brand">POTTERYBARN</div>219 220 <div class="right-icons">221 <div class="icon-btn" title="Favorites">222 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">223 <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z"></path>224 </svg>225 </div>226 <div class="icon-btn" title="Cart">227 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">228 <circle cx="9" cy="20" r="1.5"></circle>229 <circle cx="17" cy="20" r="1.5"></circle>230 <path d="M3 4h2l2 12h10l2-8H7"></path>231 </svg>232 </div>233 </div>234 </div>235 236 <!-- Drawer (left panel) -->237 <div class="drawer">238 <!-- Quick actions -->239 <div class="quick-actions">240 <div class="qa-item">241 <div class="qa-icon">242 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">243 <circle cx="12" cy="8" r="4"></circle>244 <path d="M4 20c1-4 6-6 8-6s7 2 8 6"></path>245 </svg>246 </div>247 <div>Sign In</div>248 </div>249 <div class="qa-item">250 <div class="qa-icon">251 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">252 <path d="M12 8v5l3 2"></path>253 <circle cx="12" cy="12" r="9"></circle>254 </svg>255 </div>256 <div>Recents</div>257 </div>258 <div class="qa-item">259 <div class="qa-icon">260 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">261 <rect x="3" y="8" width="18" height="8" rx="2"></rect>262 <circle cx="7" cy="18" r="2"></circle>263 <circle cx="17" cy="18" r="2"></circle>264 </svg>265 </div>266 <div>Track Order</div>267 </div>268 <div class="qa-item">269 <div class="qa-icon">270 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">271 <path d="M12 21s6-5.2 6-10a6 6 0 1 0-12 0c0 4.8 6 10 6 10z"></path>272 <circle cx="12" cy="11" r="2"></circle>273 </svg>274 </div>275 <div>Stores</div>276 </div>277 </div>278 279 <!-- Categories -->280 <div class="category-list">281 <div class="category-item">282 <div>Furniture</div>283 <div class="chev">284 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">285 <path d="M9 6l6 6-6 6"></path>286 </svg>287 </div>288 </div>289 <div class="category-item">290 <div>Outdoor</div>291 <div class="chev">292 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2"><path d="M9 6l6 6-6 6"></path></svg>293 </div>294 </div>295 <div class="category-item">296 <div>Bedding</div>297 <div class="chev">298 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2"><path d="M9 6l6 6-6 6"></path></svg>299 </div>300 </div>301 <div class="category-item">302 <div>Bath</div>303 <div class="chev">304 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2"><path d="M9 6l6 6-6 6"></path></svg>305 </div>306 </div>307 <div class="category-item">308 <div>Lighting</div>309 <div class="chev">310 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2"><path d="M9 6l6 6-6 6"></path></svg>311 </div>312 </div>313 <div class="category-item">314 <div>Rugs</div>315 <div class="chev">316 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2"><path d="M9 6l6 6-6 6"></path></svg>317 </div>318 </div>319 <div class="category-item">320 <div>Windows</div>321 <div class="chev">322 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2"><path d="M9 6l6 6-6 6"></path></svg>323 </div>324 </div>325 <div class="category-item">326 <div>Pillows & Decor</div>327 <div class="chev">328 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2"><path d="M9 6l6 6-6 6"></path></svg>329 </div>330 </div>331 <div class="category-item">332 <div>Art & Mirrors</div>333 <div class="chev">334 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2"><path d="M9 6l6 6-6 6"></path></svg>335 </div>336 </div>337 <div class="category-item">338 <div>Tabletop & Bar</div>339 <div class="chev">340 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2"><path d="M9 6l6 6-6 6"></path></svg>341 </div>342 </div>343 <div class="category-item">344 <div>Organization</div>345 <div class="chev">346 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2"><path d="M9 6l6 6-6 6"></path></svg>347 </div>348 </div>349 </div>350 </div>351 352 <!-- Underlying page preview to the right of drawer -->353 <div class="preview">[IMG: Living Room Scene]</div>354 355 <!-- Floating Action Button -->356 <div class="fab">+</div>357 358 <!-- Bottom area / gesture bar -->359 <div class="bottom-bar">360 <div class="gesture"></div>361 </div>362 363</div>364</body>365</html>