GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Pottery Barn - Chairs (Mock)</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body{margin:0;padding:0;background:transparent;font-family: Arial, Helvetica, sans-serif;color:#111;}9  #render-target{10    width:1080px;height:2400px;position:relative;overflow:hidden;11    background:#ffffff;12  }13 14  /* Top status bar (android-like) */15  .status-bar{16    height:120px;background:#3f51b5;color:#fff;display:flex;align-items:center;justify-content:space-between;17    padding:0 36px;font-weight:600;font-size:44px;18  }19  .status-icons{display:flex;align-items:center;gap:24px;font-size:36px;opacity:.95}20  .dot{width:14px;height:14px;background:#fff;border-radius:50%;}21  .tri{width:0;height:0;border-left:18px solid transparent;border-right:18px solid transparent;border-top:28px solid #fff;opacity:.9}22  .wifi{width:40px;height:40px;border:5px solid #fff;border-top-color:transparent;border-left-color:transparent;border-radius:50%;transform:rotate(45deg)}23  .battery{width:64px;height:32px;border:4px solid #fff;border-radius:4px;position:relative}24  .battery:after{content:"";position:absolute;right:-10px;top:8px;width:8px;height:16px;background:#fff;border-radius:2px}25  /* Location banner */26  .geo-banner{27    height:120px;background:#f4f4f4;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;gap:26px;28    padding:0 24px;font-size:36px;color:#444;29  }30  .flag{31    width:120px;height:72px;background:#E0E0E0;border:1px solid #BDBDBD;display:flex;align-items:center;justify-content:center;32    color:#757575;font-size:26px;33  }34  .geo-banner .cta{color:#2a5bd7;text-decoration:underline;font-weight:600;margin-left:10px}35  .geo-close{margin-left:auto;font-size:44px;color:#111;font-weight:700;padding:0 24px}36 37  /* Tabs */38  .tabs{height:96px;display:flex;align-items:center;border-bottom:1px solid #e6e6e6;gap:48px;padding:0 32px;white-space:nowrap;overflow:hidden;}39  .tabs .tab{font-size:34px;color:#333}40  .tabs .tab + .tab{padding-left:8px;border-left:1px solid #e0e0e0}41 42  /* Promo stripe */43  .promo{height:96px;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:600}44  .promo span{opacity:.9}45 46  /* Header brand row */47  .brand-row{display:flex;align-items:center;justify-content:space-between;height:150px;padding:0 32px;border-bottom:1px solid #eee}48  .left-icons,.right-icons{display:flex;align-items:center;gap:30px}49  .brand{font-family: "Georgia", serif;letter-spacing:10px;font-size:56px}50  .icon{width:56px;height:56px;display:inline-flex;align-items:center;justify-content:center}51  .icon svg{width:48px;height:48px;stroke:#111;fill:none;stroke-width:3}52 53  /* Breadcrumb and title */54  .content{padding:32px}55  .crumb{display:inline-flex;align-items:center;background:#f2f2f2;border:1px solid #ddd;padding:14px 22px;border-radius:4px;font-size:32px;color:#333;gap:12px;margin-top:10px}56  .title-row{display:flex;align-items:flex-end;justify-content:space-between;margin-top:30px}57  .title{font-size:84px;font-weight:800;letter-spacing:1px;margin:0}58  .count{font-size:36px;color:#333;margin-right:16px}59 60  /* Category grid */61  .grid{display:flex;gap:36px;margin-top:28px}62  .card{width:474px}63  .img{64    width:100%;height:560px;background:#E0E0E0;border:1px solid #BDBDBD;65    display:flex;align-items:center;justify-content:center;color:#757575;font-size:34px;text-align:center;padding:12px;box-sizing:border-box;66  }67  .label{letter-spacing:6px;font-size:34px;text-align:center;margin:26px 0 8px 0}68 69  /* Controls */70  .controls{display:flex;gap:36px;margin:24px 0 40px}71  .btn{72    flex:1;border:2px solid #111;padding:26px 0;text-align:center;font-size:40px;letter-spacing:6px;background:#fff73  }74  .btn .mini{width:36px;height:36px;vertical-align:middle;margin-left:18px}75 76  /* Big banner */77  .banner-wrap{position:relative;margin-top:20px}78  .banner{79    width:100%;height:820px;background:#E0E0E0;border:1px solid #BDBDBD;80    display:flex;align-items:center;justify-content:center;color:#757575;font-size:40px81  }82  .heart-float{83    position:absolute;top:24px;right:24px;width:72px;height:72px;border-radius:50%;84    display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.92);box-shadow:0 2px 6px rgba(0,0,0,.15)85  }86  .heart-float svg{width:44px;height:44px;stroke:#c43d3d;fill:none;stroke-width:4}87 88  /* Floating action button */89  .fab{90    position:absolute;right:72px;top:1510px;width:120px;height:120px;border-radius:60px;background:#3f51b5;91    box-shadow:0 8px 18px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center92  }93  .fab svg{width:60px;height:60px;stroke:#fff;stroke-width:8}94 95  /* Bottom indicator (device-like) */96  .bottom-bar{position:absolute;left:0;right:0;bottom:0;height:110px;background:#000}97  .home-indicator{98    position:absolute;left:50%;transform:translateX(-50%);bottom:28px;width:240px;height:12px;border-radius:8px;background:#fff;opacity:.8599  }100</style>101</head>102<body>103<div id="render-target">104 105  <!-- Status bar -->106  <div class="status-bar">107    <div>7:26</div>108    <div class="status-icons">109      <div style="width:44px;height:44px;border-radius:50%;border:4px solid #fff"></div>110      <div class="tri"></div>111      <div class="dot"></div>112      <div class="wifi"></div>113      <div class="battery"></div>114    </div>115  </div>116 117  <!-- Geo banner -->118  <div class="geo-banner">119    <div class="flag">[IMG: India Flag]</div>120    <div>Looks like you're in India <span class="cta">SHOP POTTERY BARN INDIA</span></div>121    <div class="geo-close">X</div>122  </div>123 124  <!-- Tabs -->125  <div class="tabs">126    <div class="tab">Pottery Barn Kids</div>127    <div class="tab">Pottery Barn Teen</div>128    <div class="tab">Pottery Barn Dorm</div>129  </div>130 131  <!-- Promo -->132  <div class="promo"><span>Just In: 1500+ Holiday New Arrivals — Shop Now ›</span></div>133 134  <!-- Brand row -->135  <div class="brand-row">136    <div class="left-icons">137      <span class="icon">138        <svg viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18"/></svg>139      </span>140      <span class="icon">141        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-4-4"></path></svg>142      </span>143    </div>144    <div class="brand">POTTERYBARN</div>145    <div class="right-icons">146      <span class="icon">147        <svg viewBox="0 0 24 24"><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"/></svg>148      </span>149      <span class="icon">150        <svg viewBox="0 0 24 24"><path d="M6 6h15l-1.5 9H7.5L6 6z"></path><circle cx="9" cy="20" r="1.5"></circle><circle cx="18" cy="20" r="1.5"></circle></svg>151      </span>152    </div>153  </div>154 155  <!-- Main content -->156  <div class="content">157    <div class="crumb">158      <span>&lt;</span><span>Furniture</span>159    </div>160 161    <div class="title-row">162      <h1 class="title">Chairs</h1>163      <div class="count">632 Items</div>164    </div>165 166    <div class="grid">167      <div class="card">168        <div class="img">[IMG: Cream stationary chair with cushions]</div>169        <div class="label">STATIONARY CHAIRS</div>170      </div>171      <div class="card">172        <div class="img">[IMG: Gray swivel chair]</div>173        <div class="label">SWIVEL CHAIRS</div>174      </div>175    </div>176 177    <div class="grid" style="margin-top:36px">178      <div class="card">179        <div class="img">[IMG: Leather accent chair]</div>180        <div class="label">LEATHER CHAIRS</div>181      </div>182      <div class="card">183        <div class="img">[IMG: Wood dining chair]</div>184        <div class="label">DINING CHAIRS</div>185      </div>186    </div>187 188    <div class="controls">189      <div class="btn">FILTER190        <svg class="mini" viewBox="0 0 24 24"><path d="M3 5h18M6 12h12M9 19h6" stroke="#111" fill="none" stroke-width="2"/></svg>191      </div>192      <div class="btn">SORT193        <svg class="mini" viewBox="0 0 24 24"><path d="M8 6v12M8 6l-3 3M8 6l3 3M16 18V6M16 18l3-3M16 18l-3-3" stroke="#111" fill="none" stroke-width="2"/></svg>194      </div>195    </div>196 197    <div class="banner-wrap">198      <div class="banner">[IMG: Large room scene with round gray chair and console table]</div>199      <div class="heart-float">200        <svg viewBox="0 0 24 24"><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"/></svg>201      </div>202    </div>203  </div>204 205  <!-- Floating Action Button -->206  <div class="fab">207    <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>208  </div>209 210  <!-- Bottom device bar -->211  <div class="bottom-bar">212    <div class="home-indicator"></div>213  </div>214</div>215</body>216</html>