GD-ML/AndroidCode

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>Product Details - Chair</title>7<style>8  body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width:1080px;11    height:2400px;12    position:relative;13    overflow:hidden;14    background:#ffffff;15    border-radius:0;16  }17 18  /* Top gradient area */19  .top-gradient {20    width:100%;21    height:290px;22    background: linear-gradient(180deg, #9fe0d9 0%, #c6efe9 100%);23    position: relative;24    padding-top: 24px;25    box-sizing: border-box;26  }27 28  /* Status bar simulation */29  .status-bar {30    height:60px;31    display:flex;32    align-items:center;33    justify-content:space-between;34    padding: 0 28px;35    color:#1f1f1f;36    font-weight:600;37    font-size:38px;38    opacity:.9;39  }40  .status-icons {41    display:flex;42    align-items:center;43    gap:18px;44  }45  .battery {46    width:44px; height:22px; border:3px solid #1f1f1f; border-radius:4px; position:relative;47  }48  .battery::after { content:""; position:absolute; right:-8px; top:5px; width:6px; height:12px; background:#1f1f1f; border-radius:2px; }49  .battery .level { width:70%; height:100%; background:#1f1f1f; }50 51  /* Search row */52  .search-row {53    position:absolute;54    left:24px;55    right:24px;56    top:108px;57    display:flex;58    align-items:center;59    gap:24px;60  }61  .back-btn {62    width:72px; height:72px; display:flex; align-items:center; justify-content:center;63  }64  .search-box {65    flex:1;66    height:110px;67    background:#fff;68    border-radius:26px;69    box-shadow: 0 6px 12px rgba(0,0,0,0.12);70    display:flex;71    align-items:center;72    padding:0 24px;73    gap:18px;74  }75  .search-input {76    flex:1;77    font-size:44px;78    color:#3b3b3b;79  }80  .scan-btn {81    width:92px; height:84px;82    border-radius:18px;83    background:#f4f7f8;84    border:1px solid #d6e0e3;85    display:flex; align-items:center; justify-content:center;86  }87 88  /* Tabs */89  .tabs {90    position:absolute;91    top:290px;92    left:0; right:0;93    height:120px;94    background:#ffffff;95    border-top:1px solid #e8e8e8;96    border-bottom:1px solid #e8e8e8;97    display:flex;98    align-items:stretch;99  }100  .tab { flex:1; display:flex; align-items:center; justify-content:center; font-size:44px; color:#222; }101  .tab.active { font-weight:700; position:relative; }102  .tab.active::after {103    content:""; position:absolute; bottom:0; left:25%; width:50%; height:8px; background:#2aa39a; border-radius:4px;104  }105  .tab-right {106    width:120px; border-left:1px solid #eee; display:flex; align-items:center; justify-content:center; background:#f6faf9;107  }108 109  /* Scrollable content area mimic */110  .content {111    position:absolute;112    top:410px;113    left:0; right:0; bottom:200px;114    padding:24px 32px 0 32px;115    overflow:hidden; /* screenshot static */116  }117 118  .section-title {119    font-size:56px;120    font-weight:800;121    margin:24px 0 24px;122    color:#1e1e1e;123  }124 125  .image-placeholder {126    width:100%;127    height:420px;128    background:#E0E0E0;129    border:1px solid #BDBDBD;130    display:flex;131    align-items:center;132    justify-content:center;133    color:#757575;134    font-size:40px;135    border-radius:6px;136  }137 138  .product-title {139    font-size:54px;140    font-weight:800;141    color:#111;142    margin:36px 0 18px;143  }144 145  .bullets {146    margin: 12px 0 28px 18px;147  }148  .bullets li {149    font-size:40px;150    line-height:1.45;151    margin: 14px 0;152  }153 154  .large-photo {155    width:100%;156    height:760px;157    background:#E0E0E0;158    border:1px solid #BDBDBD;159    display:flex;160    align-items:center;161    justify-content:center;162    color:#757575;163    font-size:40px;164    border-radius:8px;165  }166 167  /* Bottom nav bar */168  .bottom-nav {169    position:absolute;170    left:0; right:0;171    bottom:120px;172    height:150px;173    border-top:1px solid #e7ecec;174    background:#ffffff;175    display:flex;176    align-items:center;177    justify-content:space-around;178  }179  .nav-item { width:150px; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#0f0f0f; gap:10px; }180  .nav-item span { font-size:28px; }181  .nav-item.active { color:#1a918a; position:relative; }182  .nav-item.active::before {183    content:""; position:absolute; top:-6px; width:120px; height:10px; background:#1a918a; border-radius:6px;184  }185  .cart-badge {186    position:absolute;187    top:28px;188    transform:translateX(14px);189    font-size:26px;190    color:#1a918a;191  }192 193  /* Gesture pill */194  .gesture-pill {195    position:absolute;196    bottom:40px;197    left:50%;198    transform:translateX(-50%);199    width:320px;200    height:14px;201    background:#bdbdbd;202    border-radius:10px;203    opacity:.9;204  }205 206  /* SVG helpers */207  svg { display:block; }208</style>209</head>210<body>211<div id="render-target">212  <!-- Top area -->213  <div class="top-gradient">214    <div class="status-bar">215      <div>3:45</div>216      <div class="status-icons">217        <!-- simple signal dot -->218        <svg width="26" height="26" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" fill="#1f1f1f"/></svg>219        <!-- wifi -->220        <svg width="32" height="26" viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0" stroke="#1f1f1f" stroke-width="2" fill="none"/><path d="M5 11c4-3 10-3 14 0" stroke="#1f1f1f" stroke-width="2" fill="none"/><path d="M9 15c2-1 4-1 6 0" stroke="#1f1f1f" stroke-width="2" fill="none"/><circle cx="12" cy="18" r="1.6" fill="#1f1f1f"/></svg>221        <!-- battery -->222        <div class="battery"><div class="level"></div></div>223      </div>224    </div>225 226    <div class="search-row">227      <div class="back-btn">228        <svg width="44" height="44" viewBox="0 0 24 24"><path d="M15 4 L7 12 L15 20" stroke="#1b1b1b" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>229      </div>230      <div class="search-box">231        <svg width="46" height="46" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#1f2222" stroke-width="2.4" fill="none"/><path d="M16 16 L21 21" stroke="#1f2222" stroke-width="2.4" stroke-linecap="round"/></svg>232        <div class="search-input">chair</div>233        <div class="scan-btn" title="Scan">234          <svg width="40" height="40" viewBox="0 0 24 24">235            <path d="M4 8V5a1 1 0 0 1 1-1h3M20 8V5a1 1 0 0 0-1-1h-3M4 16v3a1 1 0 0 0 1 1h3M20 16v3a1 1 0 0 1-1 1h-3" stroke="#2b3b3b" stroke-width="2" fill="none" stroke-linecap="round"/>236          </svg>237        </div>238      </div>239    </div>240  </div>241 242  <!-- Tabs -->243  <div class="tabs">244    <div class="tab active">Details</div>245    <div class="tab">Compare</div>246    <div class="tab">Reviews</div>247    <div class="tab-right">248      <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 8 L6 14 H18 Z" fill="#2a2a2a"/></svg>249    </div>250  </div>251 252  <!-- Content -->253  <div class="content">254    <div class="section-title">Product Description</div>255 256    <div class="image-placeholder">[IMG: Chair product collage]</div>257 258    <div class="product-title">Ikea Italian Chair (Wood , Black)</div>259 260    <ul class="bullets">261      <li>Is Assembly Required: True; Size Name: Standard; Seat Height: 27.0; Back Style: Arrow Back</li>262      <li>Seat Height: 33.0; Furniture Finish: Bend; Style Name: Italianate</li>263    </ul>264 265    <div class="large-photo">[IMG: Dining set with black Ikea chairs]</div>266  </div>267 268  <!-- Bottom navigation -->269  <div class="bottom-nav">270    <div class="nav-item active">271      <svg width="56" height="56" viewBox="0 0 24 24"><path d="M3 11 L12 4 L21 11 V20 H14 V14 H10 V20 H3 Z" fill="none" stroke="#1a918a" stroke-width="2" stroke-linejoin="round"/></svg>272      <span>Home</span>273    </div>274    <div class="nav-item">275      <svg width="56" height="56" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" stroke="#1b1b1b" stroke-width="2" fill="none"/><path d="M4 20c1-4 6-5 8-5s7 1 8 5" stroke="#1b1b1b" stroke-width="2" fill="none" stroke-linecap="round"/></svg>276      <span>Account</span>277    </div>278    <div class="nav-item">279      <svg width="56" height="56" viewBox="0 0 24 24"><path d="M7 7h10v4H7zM4 13h16v4H4z" stroke="#1b1b1b" stroke-width="2" fill="none"/></svg>280      <span>Layers</span>281    </div>282    <div class="nav-item" style="position:relative;">283      <svg width="56" height="56" viewBox="0 0 24 24"><path d="M6 6h2l1 9h8l2-7H8" stroke="#1b1b1b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/><circle cx="10" cy="20" r="1.6" fill="#1b1b1b"/><circle cx="17" cy="20" r="1.6" fill="#1b1b1b"/></svg>284      <span>Cart</span>285      <div class="cart-badge">0</div>286    </div>287    <div class="nav-item">288      <svg width="56" height="56" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18" stroke="#1b1b1b" stroke-width="2" stroke-linecap="round"/></svg>289      <span>Menu</span>290    </div>291  </div>292 293  <div class="gesture-pill"></div>294</div>295</body>296</html>