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>Pottery Barn 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: #ffffff;15 font-family: "Helvetica Neue", Arial, sans-serif;16 color: #111;17 }18 19 /* Top system/status bar */20 .status-bar {21 height: 120px;22 background: #3f51b5;23 color: #fff;24 padding: 0 36px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 font-weight: 600;29 letter-spacing: 0.5px;30 }31 .status-left { display: flex; align-items: center; gap: 20px; }32 .status-icons { display: flex; align-items: center; gap: 18px; opacity: 0.95; }33 .dot, .square, .triangle {34 width: 22px; height: 22px; background: #fff; border-radius: 4px;35 }36 .dot { border-radius: 50%; }37 .triangle {38 width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 22px solid #fff; background: none; border-radius: 0;39 }40 .status-right { display: flex; align-items: center; gap: 24px; }41 .pill {42 width: 38px; height: 22px; border: 2px solid #fff; border-radius: 4px; position: relative;43 }44 .pill::after { content: ""; position: absolute; right: 2px; top: 2px; width: 6px; height: 18px; background: #fff; }45 .wifi {46 width: 36px; height: 24px;47 background: conic-gradient(from 225deg, rgba(255,255,255,0) 0 45deg, #fff 45deg 55deg, rgba(255,255,255,0) 55deg 100%);48 mask: radial-gradient(circle at 0 100%, transparent 16px, #000 16px);49 }50 51 /* Country banner */52 .country-banner {53 height: 150px;54 border-bottom: 1px solid #E0E0E0;55 display: flex;56 align-items: center;57 padding: 0 30px;58 background: #fff;59 position: relative;60 }61 .flag {62 width: 96px; height: 64px; background: linear-gradient(#ff9933 0 33%, #fff 33% 66%, #138808 66% 100%);63 border: 1px solid #bdbdbd; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 18px; margin-right: 26px;64 }65 .country-text { line-height: 1.3; color: #5f5f5f; font-size: 30px; }66 .country-text .link { color: #3f51b5; text-decoration: underline; font-weight: 600; display: block; margin-top: 6px; }67 .dismiss {68 position: absolute; right: 30px; top: 30px; font-size: 46px; color: #333;69 }70 71 /* Tabs */72 .tabs {73 height: 110px;74 display: flex;75 align-items: center;76 gap: 48px;77 padding: 0 30px;78 border-bottom: 1px solid #e6e6e6;79 background: #fff;80 white-space: nowrap;81 overflow: hidden;82 }83 .tab { font-size: 34px; color: #222; }84 85 /* Promo strip */86 .promo {87 height: 90px;88 background: #111;89 color: #d0d0d0;90 display: flex;91 align-items: center;92 justify-content: center;93 font-size: 32px;94 }95 96 /* Brand header */97 .brand-header {98 height: 140px;99 display: flex;100 align-items: center;101 justify-content: space-between;102 padding: 0 26px;103 background: #fff;104 }105 .icon-group { display: flex; align-items: center; gap: 26px; }106 .center-logo {107 font-family: Georgia, "Times New Roman", serif;108 font-size: 56px;109 letter-spacing: 10px;110 color: #111;111 }112 .icon svg { display: block; }113 114 /* Hero */115 .hero {116 position: relative;117 height: 1220px;118 overflow: hidden;119 }120 .hero-img {121 position: absolute; inset: 0;122 background: #E0E0E0;123 border-top: 1px solid #BDBDBD;124 border-bottom: 1px solid #BDBDBD;125 display: flex; align-items: center; justify-content: center;126 color: #757575; font-size: 36px;127 }128 .hero-content {129 position: absolute; left: 50%; top: 140px; transform: translateX(-50%);130 text-align: center; color: #111; width: 92%;131 }132 .headline {133 font-family: Georgia, "Times New Roman", serif;134 font-size: 150px;135 line-height: 1;136 font-weight: 400;137 margin-bottom: 26px;138 }139 .subhead {140 font-size: 48px;141 color: #222;142 margin: 14px 0 40px;143 }144 .cta {145 display: inline-block;146 background: #000;147 color: #fff;148 padding: 28px 46px;149 font-size: 42px;150 letter-spacing: 4px;151 border-radius: 2px;152 }153 154 /* Fall section */155 .fall {156 background: #fff;157 padding: 70px 48px;158 height: 540px;159 border-top: 1px solid #f0f0f0;160 }161 .fall h2 {162 font-family: Georgia, "Times New Roman", serif;163 font-size: 110px;164 font-weight: 400;165 margin: 0 0 16px;166 color: #111;167 }168 .fall p {169 font-size: 44px;170 color: #444;171 margin: 0;172 }173 174 /* Floating action button */175 .fab {176 position: absolute;177 right: 46px;178 bottom: 320px;179 width: 120px; height: 120px; border-radius: 50%;180 background: #3f51b5;181 box-shadow: 0 8px 20px rgba(0,0,0,0.25);182 color: #fff;183 display: flex; align-items: center; justify-content: center;184 font-size: 70px; line-height: 0;185 }186 187 /* Bottom gesture indicator */188 .home-indicator {189 position: absolute;190 width: 300px; height: 10px;191 left: 50%; transform: translateX(-50%);192 bottom: 20px;193 background: rgba(0,0,0,0.6);194 border-radius: 6px;195 }196</style>197</head>198<body>199<div id="render-target">200 201 <!-- Simulated Android status bar -->202 <div class="status-bar">203 <div class="status-left">204 <div style="font-size:40px;">7:21</div>205 <div class="status-icons">206 <div class="square"></div>207 <div class="dot"></div>208 <div class="triangle"></div>209 </div>210 </div>211 <div class="status-right">212 <div class="wifi"></div>213 <div class="pill"></div>214 </div>215 </div>216 217 <!-- Country/region banner -->218 <div class="country-banner">219 <div class="flag" aria-label="India flag"></div>220 <div class="country-text">221 Looks like you're in India222 <span class="link">SHOP POTTERY BARN INDIA</span>223 </div>224 <div class="dismiss">×</div>225 </div>226 227 <!-- Category tabs -->228 <div class="tabs">229 <div class="tab">Pottery Barn Kids</div>230 <div class="tab">Pottery Barn Teen</div>231 <div class="tab">Pottery Barn Dorm</div>232 <div class="tab">Wedding & Registry</div>233 </div>234 235 <!-- Promo strip -->236 <div class="promo">Earn 10% Back in Rewards Today · Learn More ›</div>237 238 <!-- Brand header row -->239 <div class="brand-header">240 <div class="icon-group">241 <div class="icon">242 <svg width="56" height="56" viewBox="0 0 24 24">243 <path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z" fill="#111"></path>244 </svg>245 </div>246 <div class="icon">247 <svg width="56" height="56" viewBox="0 0 24 24">248 <circle cx="11" cy="11" r="6" stroke="#111" stroke-width="2" fill="none"></circle>249 <path d="M16 16l5 5" stroke="#111" stroke-width="2" fill="none"></path>250 </svg>251 </div>252 </div>253 <div class="center-logo">P O T T E R Y B A R N</div>254 <div class="icon-group">255 <div class="icon">256 <svg width="56" height="56" viewBox="0 0 24 24">257 <path d="M12 21s-8-6.5-8-11a5 5 0 019-3 5 5 0 019 3c0 4.5-8 11-8 11z" fill="none" stroke="#111" stroke-width="2"></path>258 </svg>259 </div>260 <div class="icon">261 <svg width="56" height="56" viewBox="0 0 24 24">262 <path d="M3 4h2l2 12h10l3-8H7" stroke="#111" stroke-width="2" fill="none" stroke-linejoin="round" stroke-linecap="round"></path>263 <circle cx="10" cy="20" r="1.6" fill="#111"></circle>264 <circle cx="17" cy="20" r="1.6" fill="#111"></circle>265 </svg>266 </div>267 </div>268 </div>269 270 <!-- Hero section -->271 <section class="hero">272 <div class="hero-img">[IMG: Living room sofa hero]</div>273 <div class="hero-content">274 <div class="headline">Made for<br>Lounging</div>275 <div class="subhead">Our sink-in sofas make the living room more inviting.</div>276 <div class="cta">SOFAS & SECTIONALS</div>277 </div>278 </section>279 280 <!-- Fall intro section -->281 <section class="fall">282 <h2>Welcoming Fall</h2>283 <p>Everything you need to style a cozy home.</p>284 </section>285 286 <!-- Floating action button -->287 <div class="fab">+</div>288 289 <!-- Bottom gesture indicator -->290 <div class="home-indicator"></div>291</div>292</body>293</html>