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">6<title>Search - Chair</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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #1f1f1f;17  }18 19  /* Header with gradient */20  .header {21    width: 100%;22    height: 340px;23    background: linear-gradient(180deg, #8FE1E6 0%, #B9F0E7 100%);24    box-sizing: border-box;25    padding: 24px 36px 0 36px;26  }27  .status-bar {28    height: 64px;29    display: flex;30    align-items: center;31    justify-content: space-between;32    color: #2a2a2a;33    font-size: 38px;34    font-weight: 600;35    opacity: 0.95;36  }37  .status-icons { display:flex; align-items:center; gap:26px; }38  .status-icons svg { width: 42px; height: 42px; }39 40  .top-row {41    margin-top: 18px;42    display: flex;43    align-items: center;44    gap: 22px;45  }46  .back-btn {47    width: 84px;48    height: 84px;49    display:flex;50    align-items:center;51    justify-content:center;52  }53  .back-btn svg { width: 48px; height: 48px; }54 55  .search-wrap {56    flex: 1;57    display: flex;58    align-items: center;59    gap: 18px;60  }61  .search-box {62    flex: 1;63    height: 112px;64    background: #ffffff;65    border-radius: 28px;66    box-shadow: 0 8px 16px rgba(0,0,0,0.08);67    display: flex;68    align-items: center;69    padding: 0 32px;70    box-sizing: border-box;71    gap: 22px;72  }73  .search-box svg { width: 50px; height: 50px; }74  .search-text {75    font-size: 40px;76    color: #4a4a4a;77  }78  .scan-btn {79    width: 112px;80    height: 112px;81    background: #ffffff;82    border-radius: 24px;83    box-shadow: 0 8px 16px rgba(0,0,0,0.10);84    display: flex;85    align-items: center;86    justify-content: center;87  }88  .scan-btn svg { width: 54px; height: 54px; }89 90  /* Tabs */91  .tabs {92    width: 100%;93    height: 120px;94    background: #ffffff;95    display: flex;96    box-shadow: 0 8px 16px rgba(0,0,0,0.08);97  }98  .tab {99    flex: 1;100    display: flex;101    align-items: center;102    justify-content: center;103    font-size: 44px;104    color: #212121;105    border-right: 1px solid #eaeaea;106  }107  .tab:last-child { border-right: none; }108  .tab.arrow {109    flex: 0 0 120px;110    border-left: 1px solid #eaeaea;111  }112  .tab.arrow svg { width: 46px; height: 46px; }113 114  /* Scrollable content */115  .content {116    position: absolute;117    top: 460px;        /* header (340) + tabs (120) */118    bottom: 210px;     /* space for bottom nav and home indicator */119    left: 0;120    right: 0;121    overflow-y: auto;122    -webkit-overflow-scrolling: touch;123    background: #ffffff;124  }125  .photo {126    width: 912px;127    margin: 36px auto 24px;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: 36px;135    text-align: center;136  }137  .photo.tall-1 { height: 620px; }138  .photo.tall-2 { height: 820px; }139  .photo.tall-3 { height: 720px; }140 141  /* Bottom navigation */142  .bottom-nav {143    position: absolute;144    left: 0; right: 0;145    bottom: 96px;146    height: 152px;147    background: #ffffff;148    border-top: 1px solid #e9e9e9;149    display: flex;150    align-items: center;151    justify-content: space-around;152  }153  .nav-item {154    width: 140px;155    height: 120px;156    display:flex;157    align-items:center;158    justify-content:center;159    position: relative;160  }161  .nav-item svg { width: 64px; height: 64px; stroke: #222; }162  .nav-item.active svg { stroke: #1aa7a6; fill: none; }163  .cart-badge {164    position: absolute;165    top: 18px;166    right: 22px;167    font-size: 34px;168    color: #1a1a1a;169  }170 171  /* Home indicator */172  .home-indicator {173    position: absolute;174    left: 50%;175    transform: translateX(-50%);176    bottom: 24px;177    width: 340px;178    height: 12px;179    background: #bfbfbf;180    border-radius: 6px;181    opacity: 0.7;182  }183</style>184</head>185<body>186<div id="render-target">187 188  <!-- Gradient Header -->189  <div class="header">190    <div class="status-bar">191      <div>3:45</div>192      <div class="status-icons">193        <!-- simple cellular/wifi/battery indicators -->194        <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2"><path d="M2 18l5-5 4 4 5-5 6 6"/></svg>195        <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2"><path d="M2 10a10 10 0 0 1 20 0"/><path d="M5 10a7 7 0 0 1 14 0"/><circle cx="12" cy="16" r="2"/></svg>196        <svg viewBox="0 0 36 24" fill="none" stroke="#222" stroke-width="2">197          <rect x="1" y="5" width="28" height="14" rx="2"></rect>198          <rect x="31" y="9" width="4" height="6" rx="1" fill="#222" stroke="none"></rect>199        </svg>200      </div>201    </div>202 203    <div class="top-row">204      <div class="back-btn">205        <svg viewBox="0 0 48 48" fill="none" stroke="#222" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">206          <path d="M30 8 L14 24 L30 40"></path>207        </svg>208      </div>209 210      <div class="search-wrap">211        <div class="search-box">212          <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">213            <circle cx="10" cy="10" r="7"></circle>214            <path d="M15 15 L22 22"></path>215          </svg>216          <div class="search-text">chair</div>217        </div>218        <div class="scan-btn" title="Scan">219          <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round">220            <path d="M4 8V5a1 1 0 0 1 1-1h3"></path>221            <path d="M20 8V5a1 1 0 0 0-1-1h-3"></path>222            <path d="M4 16v3a1 1 0 0 0 1 1h3"></path>223            <path d="M20 16v3a1 1 0 0 1-1 1h-3"></path>224          </svg>225        </div>226      </div>227    </div>228  </div>229 230  <!-- Tabs -->231  <div class="tabs">232    <div class="tab">Details</div>233    <div class="tab">Compare</div>234    <div class="tab">Reviews</div>235    <div class="tab arrow">236      <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">237        <path d="M6 14L12 8l6 6"></path>238      </svg>239    </div>240  </div>241 242  <!-- Scrollable content (image placeholders) -->243  <div class="content">244    <div class="photo tall-1">[IMG: Black dining chairs on patterned rug]</div>245    <div class="photo tall-2">[IMG: Single black chair beside white drawers]</div>246    <div class="photo tall-3">[IMG: Bright dining room with black chairs]</div>247    <div style="height: 80px"></div>248  </div>249 250  <!-- Bottom Navigation -->251  <div class="bottom-nav">252    <div class="nav-item active" title="Home">253      <svg viewBox="0 0 24 24" fill="none" stroke-width="2">254        <path d="M3 10l9-7 9 7"></path>255        <path d="M5 10v10h14V10"></path>256      </svg>257    </div>258    <div class="nav-item" title="Profile">259      <svg viewBox="0 0 24 24" fill="none" stroke-width="2">260        <circle cx="12" cy="8" r="4"></circle>261        <path d="M4 20c2-4 6-6 8-6s6 2 8 6"></path>262      </svg>263    </div>264    <div class="nav-item" title="Layers">265      <svg viewBox="0 0 24 24" fill="none" stroke-width="2">266        <path d="M12 3l9 5-9 5-9-5 9-5z"></path>267        <path d="M3 12l9 5 9-5"></path>268      </svg>269    </div>270    <div class="nav-item" title="Cart">271      <svg viewBox="0 0 24 24" fill="none" stroke-width="2">272        <circle cx="9" cy="20" r="2"></circle>273        <circle cx="17" cy="20" r="2"></circle>274        <path d="M3 4h3l3 12h9l2-8H7"></path>275      </svg>276      <div class="cart-badge">0</div>277    </div>278    <div class="nav-item" title="Menu">279      <svg viewBox="0 0 24 24" fill="none" stroke-width="2">280        <path d="M4 6h16"></path>281        <path d="M4 12h16"></path>282        <path d="M4 18h16"></path>283      </svg>284    </div>285  </div>286 287  <!-- Home indicator -->288  <div class="home-indicator"></div>289 290</div>291</body>292</html>