GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Pottery Barn Drawer Mock</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:#111; }9 #render-target {10 position: relative;11 width:1080px; height:2400px;12 overflow:hidden;13 background:#ffffff;14 }15 16 /* Status bar */17 .status-bar {18 height:110px;19 background:#3f51b5;20 color:#fff;21 display:flex;22 align-items:center;23 padding:0 28px;24 font-weight:600;25 }26 .status-time { font-size:40px; letter-spacing:1px; }27 .status-icons { margin-left:auto; display:flex; align-items:center; gap:22px; }28 .status-dot { width:12px; height:12px; background:#fff; border-radius:50%; opacity:.8; }29 .icon-mini { width:36px; height:36px; }30 .top-progress {31 position:absolute; left:0; top:110px; width:220px; height:8px; background:#e53935;32 }33 34 /* Header */35 .app-bar {36 height:150px;37 background:#fff;38 border-bottom:1px solid #e9e9e9;39 display:flex; align-items:center;40 padding:0 26px;41 }42 .left-actions, .right-actions { display:flex; align-items:center; gap:28px; }43 .left-actions { width:220px; }44 .right-actions { margin-left:auto; width:220px; justify-content:flex-end; }45 .brand {46 flex:1; text-align:center; font-weight:800; color:#111;47 font-size:44px; letter-spacing:12px;48 }49 .icon-btn svg { width:54px; height:54px; stroke:#111; }50 .icon-btn.heart svg, .icon-btn.cart svg { stroke:#111; }51 52 /* Top quick actions */53 .quick-actions {54 background:#f6f6f6;55 border-bottom:1px solid #e6e6e6;56 }57 .quick-grid {58 display:grid; grid-template-columns:repeat(4, 1fr);59 padding:26px 0 18px;60 text-align:center;61 gap:0;62 }63 .qa-item { color:#111; }64 .qa-item svg { width:70px; height:70px; stroke:#111; margin-bottom:12px; }65 .qa-item span { display:block; font-size:30px; }66 67 /* Drawer + list */68 .drawer {69 position:relative;70 width:880px; /* leave peek on right */71 background:#fff;72 z-index:2;73 }74 .crumb {75 height:120px; display:flex; align-items:center; gap:20px;76 padding:0 30px; border-bottom:1px solid #ececec; font-size:38px;77 }78 .crumb svg { width:38px; height:38px; stroke:#111; }79 .menu {80 font-size:38px;81 }82 .menu-item {83 height:140px; display:flex; align-items:center; padding:0 34px;84 border-bottom:1px solid #ededed;85 color:#111; background:#fff;86 }87 .menu-item.active { background:#3f3f3f; color:#fff; border-bottom:0; }88 .menu-item.linkish { position:relative; }89 .menu-item.linkish .label {90 text-decoration:underline; text-underline-offset:8px;91 }92 .menu-item.linkish { outline:1px dotted #9e9e9e; outline-offset:-18px; }93 94 /* Right-side page peek */95 .page-peek {96 position:absolute; right:0; top:110px; /* below status */97 width:200px; height:2290px; background:#f1f1f1; border-left:1px solid #e0e0e0;98 display:flex; align-items:flex-start; justify-content:center; padding-top:340px;99 }100 .peek-image {101 width:180px; height:900px; background:#E0E0E0; border:1px solid #BDBDBD;102 display:flex; align-items:center; justify-content:center; color:#757575; text-align:center; font-size:28px; padding:12px;103 }104 105 /* Floating Action Button */106 .fab {107 position:absolute; right:140px; bottom:420px;108 width:120px; height:120px; background:#3f51b5; border-radius:50%;109 box-shadow:0 8px 18px rgba(0,0,0,.25);110 display:flex; align-items:center; justify-content:center;111 }112 .fab svg { width:58px; height:58px; stroke:#fff; }113 114 /* Bottom nav bar mimic */115 .bottom-bar {116 position:absolute; left:0; bottom:0; width:1080px; height:120px; background:#000;117 display:flex; align-items:center; justify-content:center;118 }119 .home-pill {120 width:260px; height:12px; background:#ccc; border-radius:8px; opacity:.9;121 }122</style>123</head>124<body>125<div id="render-target">126 127 <!-- Status bar -->128 <div class="status-bar">129 <div class="status-time">7:26</div>130 <div class="status-icons">131 <!-- simple weather/sun -->132 <svg class="icon-mini" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">133 <circle cx="12" cy="12" r="4"></circle>134 <path d="M12 1v3M12 20v3M1 12h3M20 12h3M4 4l2 2M18 18l2 2M18 6l2-2M4 20l2-2"></path>135 </svg>136 <span style="font-size:26px; opacity:.9;">99</span>137 <!-- alert triangle -->138 <svg class="icon-mini" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">139 <path d="M12 3l10 18H2L12 3z"></path>140 <path d="M12 9v5M12 19h.01"></path>141 </svg>142 <div class="status-dot"></div>143 <!-- wifi -->144 <svg class="icon-mini" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">145 <path d="M2 8c5-5 15-5 20 0"></path>146 <path d="M5 12c3-3 11-3 14 0"></path>147 <path d="M8 16c2-2 6-2 8 0"></path>148 <circle cx="12" cy="19" r="1.5" fill="#fff" stroke="none"></circle>149 </svg>150 <!-- battery -->151 <svg class="icon-mini" viewBox="0 0 26 24" fill="none" stroke="#fff" stroke-width="2">152 <rect x="1" y="6" width="20" height="12" rx="2"></rect>153 <rect x="22" y="9" width="3" height="6"></rect>154 <rect x="3" y="8" width="14" height="8" fill="#fff" stroke="none"></rect>155 </svg>156 </div>157 </div>158 <div class="top-progress"></div>159 160 <!-- Right-side page preview -->161 <div class="page-peek">162 <div class="peek-image">[IMG: Living room photo]</div>163 </div>164 165 <!-- App bar -->166 <div class="app-bar">167 <div class="left-actions">168 <div class="icon-btn">169 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.5" stroke-linecap="round">170 <path d="M5 5l14 14M19 5L5 19"></path>171 </svg>172 </div>173 <div class="icon-btn">174 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.5" stroke-linecap="round">175 <circle cx="11" cy="11" r="6"></circle>176 <path d="M20 20l-4-4"></path>177 </svg>178 </div>179 </div>180 <div class="brand">POTTERYBARN</div>181 <div class="right-actions">182 <div class="icon-btn heart">183 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.2" stroke-linecap="round">184 <path d="M12 21s-7-4.5-9-8c-1.5-2.7.2-6 3.5-6 2.2 0 3.3 1.2 5.5 3.3C14.2 8.2 15.3 7 17.5 7 20.8 7 22.5 10.3 21 13c-2 3.5-9 8-9 8z"></path>185 </svg>186 </div>187 <div class="icon-btn cart">188 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.2" stroke-linecap="round">189 <circle cx="9" cy="20" r="1.6"></circle>190 <circle cx="17" cy="20" r="1.6"></circle>191 <path d="M3 4h2l2.2 11h10.5l2.1-7H7"></path>192 </svg>193 </div>194 </div>195 </div>196 197 <!-- Quick actions -->198 <div class="quick-actions">199 <div class="quick-grid">200 <div class="qa-item">201 <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round">202 <circle cx="12" cy="8" r="3"></circle>203 <path d="M4 20c1.8-4 13.2-4 16 0"></path>204 </svg>205 <span>Sign In</span>206 </div>207 <div class="qa-item">208 <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round">209 <path d="M12 2v4M12 18v4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8"></path>210 <circle cx="12" cy="12" r="6"></circle>211 </svg>212 <span>Recents</span>213 </div>214 <div class="qa-item">215 <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round">216 <rect x="1" y="8" width="16" height="9" rx="2"></rect>217 <path d="M17 12h3l2 3h-5M6 17a2 2 0 1 0 0 0"></path>218 </svg>219 <span>Track Order</span>220 </div>221 <div class="qa-item">222 <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round">223 <path d="M12 21s7-6.5 7-11a7 7 0 1 0-14 0c0 4.5 7 11 7 11z"></path>224 <circle cx="12" cy="10" r="2.5"></circle>225 </svg>226 <span>Stores</span>227 </div>228 </div>229 </div>230 231 <!-- Drawer content -->232 <div class="drawer">233 <div class="crumb">234 <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round"><path d="M15 18l-6-6 6-6"></path></svg>235 <div>Furniture</div>236 </div>237 238 <div class="menu">239 <div class="menu-item">In Stock & Quick Ship Furniture</div>240 <div class="menu-item active">Living Room Furniture</div>241 <div class="menu-item">Sofa & Sectional Collections</div>242 <div class="menu-item">Sofas</div>243 <div class="menu-item">Sectional Sofas</div>244 <div class="menu-item linkish"><span class="label">Chairs</span></div>245 <div class="menu-item">Sleeper Sofas & Daybeds</div>246 <div class="menu-item">Leather Furniture</div>247 <div class="menu-item">Coffee Tables</div>248 <div class="menu-item">End & Side Tables</div>249 </div>250 </div>251 252 <!-- Floating action button (visible on page peek area) -->253 <div class="fab">254 <svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round">255 <path d="M12 5v14M5 12h14"></path>256 </svg>257 </div>258 259 <!-- Bottom navigation bar mimic -->260 <div class="bottom-bar">261 <div class="home-pill"></div>262 </div>263</div>264</body>265</html>