GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Product Page Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0b0b0b;14    color: #fff;15  }16 17  /* Status bar */18  .status-bar {19    height: 96px;20    background: #111;21    color: #fff;22    display: flex;23    align-items: center;24    padding: 0 32px;25    font-size: 36px;26    letter-spacing: 0.5px;27  }28  .status-bar .right { margin-left: auto; display: flex; gap: 28px; align-items: center; opacity: 0.9; }29  .dot { width: 10px; height: 10px; background: #bbb; border-radius: 50%; display: inline-block; }30 31  /* Main image */32  .image-area {33    position: relative;34    width: 1080px;35    height: 1040px;36    background: #E0E0E0;37    border-bottom: 1px solid #2a2a2a;38    display: flex;39    align-items: center;40    justify-content: center;41    color: #555;42    font-size: 38px;43  }44  .back-btn {45    position: absolute;46    left: 24px;47    top: 120px;48    width: 104px;49    height: 104px;50    background: #fff;51    border-radius: 52px;52    display: flex; align-items: center; justify-content: center;53    box-shadow: 0 6px 16px rgba(0,0,0,0.25);54  }55  .floating-icons {56    position: absolute;57    right: 24px;58    top: 120px;59    display: flex;60    flex-direction: column;61    gap: 20px;62  }63  .circle-icon {64    width: 104px; height: 104px; background: #fff; border-radius: 52px;65    display: flex; align-items: center; justify-content: center;66    box-shadow: 0 6px 16px rgba(0,0,0,0.25);67  }68  .find-similar {69    position: absolute;70    right: 24px;71    bottom: 36px;72    background: #fff;73    color: #111;74    padding: 26px 36px;75    border-radius: 40px;76    display: flex; gap: 16px; align-items: center;77    font-size: 34px;78    box-shadow: 0 6px 16px rgba(0,0,0,0.25);79  }80  .camera-icon {81    width: 56px; height: 56px; border-radius: 14px; border: 2px solid #111; display: inline-flex; align-items: center; justify-content: center;82  }83  /* Carousel dots */84  .dots {85    position: absolute;86    top: 1180px;87    left: 0; right: 0;88    display: flex; justify-content: center; gap: 18px;89  }90  .dots .d {91    width: 20px; height: 20px; background: #4c4c4c; border-radius: 20px;92  }93  .dots .active { background: #ddd; }94 95  /* Details */96  .details {97    position: absolute;98    top: 1220px;99    left: 0; right: 0;100    padding: 32px 36px 220px;101    background: #0b0b0b;102  }103  .badge {104    color: #9aa0a6;105    font-size: 34px;106    letter-spacing: 1px;107    margin-bottom: 10px;108  }109  .price { font-size: 64px; font-weight: 700; margin: 6px 0 16px; }110  .title { font-size: 40px; color: #e8eaed; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }111 112  /* Seller row */113  .seller {114    margin-top: 28px;115    display: flex; align-items: center; gap: 20px;116  }117  .seller .thumb {118    width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575; display: flex; align-items: center; justify-content: center; font-size: 24px; border-radius: 16px;119  }120  .seller .card {121    flex: 1;122    background: #3b3b3b;123    border-radius: 22px;124    padding: 24px 28px;125    display: flex; align-items: center; gap: 18px;126    font-size: 38px;127  }128  .seller .muted { color: #c9c9c9; font-size: 32px; }129 130  /* Info row */131  .info-row {132    margin-top: 28px;133    display: flex; gap: 34px; align-items: stretch;134  }135  .info-block {136    flex: 1;137    padding-right: 34px;138    border-right: 2px solid #2a2a2a;139  }140  .info-block:last-child { border-right: none; padding-right: 0; }141  .info-label { color: #c7c7c7; font-size: 32px; margin-bottom: 6px; }142  .info-value { font-size: 36px; }143  .star { color: #f5a623; margin-right: 8px; }144 145  /* Form fields */146  .field {147    margin-top: 34px;148  }149  .label {150    font-size: 34px; color: #e0e0e0; margin-bottom: 12px;151  }152  .label .req { color: #ff5a5f; }153  .select {154    height: 110px; border: 2px solid #565656; border-radius: 20px;155    display: flex; align-items: center; justify-content: space-between;156    padding: 0 28px; font-size: 36px; color: #d6d6d6; background: #0f0f0f;157  }158  .chev {159    width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 16px solid #d6d6d6;160    margin-left: 12px;161  }162 163  /* Bottom nav */164  .tabbar {165    position: absolute; left: 0; right: 0; bottom: 56px;166    height: 140px; background: #212121; border-top: 1px solid #2a2a2a;167    display: flex; justify-content: space-around; align-items: center;168    color: #ddd; font-size: 28px;169  }170  .tab {171    display: flex; flex-direction: column; align-items: center; gap: 8px;172    opacity: 0.95;173  }174  .tab svg { width: 44px; height: 44px; fill: none; stroke: #ddd; stroke-width: 3.5; }175  .home-indicator {176    position: absolute; left: 50%; transform: translateX(-50%);177    bottom: 16px; width: 280px; height: 10px; background: #f2f2f2; border-radius: 6px; opacity: 0.9;178  }179</style>180</head>181<body>182<div id="render-target">183 184  <!-- Status bar -->185  <div class="status-bar">186    11:14187    <div class="right">188      <span class="dot"></span>189      <span style="font-weight:600;">LR</span>190      <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>191      <span class="dot" style="background:#ddd;"></span>192      <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff"><path d="M12 2a6 6 0 0 0 0 12 4 4 0 0 1 4 4v2h2v-2a6 6 0 0 0-6-6 4 4 0 1 1 0-8z"/></svg>193      <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff"><path d="M16 4H8a2 2 0 0 0-2 2v12l6-3 6 3V6a2 2 0 0 0-2-2z"/></svg>194    </div>195  </div>196 197  <!-- Main image -->198  <div class="image-area">199    [IMG: Door lock product photo]200    <div class="back-btn">201      <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#111" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round">202        <path d="M15 18l-6-6 6-6"/>203      </svg>204    </div>205 206    <div class="floating-icons">207      <div class="circle-icon">208        <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#111" stroke-width="2.5">209          <path d="M21 15a3 3 0 0 1-3 3H8l-5 4V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3z"/>210        </svg>211      </div>212      <div class="circle-icon">213        <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#111" stroke-width="2.5">214          <path d="M4 12v-2a6 6 0 0 1 6-6h2"/><path d="M20 12v2a6 6 0 0 1-6 6h-2"/><path d="M16 3l2 2-2 2"/>215        </svg>216      </div>217      <div class="circle-icon">218        <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#111" stroke-width="2.5">219          <path d="M12 21s-6-4.35-8.5-7.5A5.5 5.5 0 0 1 12 5a5.5 5.5 0 0 1 8.5 8.5C18 16.65 12 21 12 21z"/>220        </svg>221      </div>222    </div>223 224    <div class="find-similar">225      <div class="camera-icon">226        <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="#111" stroke-width="2">227          <rect x="4" y="7" width="16" height="12" rx="2"/><circle cx="12" cy="13" r="3"/>228        </svg>229      </div>230      <span>Find similar items</span>231    </div>232  </div>233 234  <!-- Dots -->235  <div class="dots">236    <div class="d active"></div>237    <div class="d"></div>238    <div class="d"></div>239    <div class="d"></div>240    <div class="d"></div>241  </div>242 243  <!-- Details section -->244  <div class="details">245    <div class="badge">IN STOCK</div>246    <div class="price">$3.99+</div>247    <div class="title">Portable Door Lock  Home Security for Dorm, Airbnb, Hote...</div>248 249    <div class="seller">250      <div class="thumb">[IMG]</div>251      <div class="card">252        <div style="font-weight:700;">DesignInGifts</div>253        <div class="muted">| 1,143 sales</div>254      </div>255    </div>256 257    <div class="info-row">258      <div class="info-block">259        <div class="info-label">Est. arrival</div>260        <div class="info-value">Dec 11-16</div>261      </div>262      <div class="info-block">263        <div class="info-label">Ratings</div>264        <div class="info-value"><span class="star">★</span>4.79 <span style="color:#8ab4f8;">(295)</span></div>265      </div>266    </div>267 268    <div class="field">269      <div class="label">Pack<span class="req">*</span></div>270      <div class="select">271        <span style="opacity:0.85;">Select an option</span>272        <div class="chev"></div>273      </div>274    </div>275 276    <div class="field">277      <div class="label">Quantity</div>278      <div class="select">279        <span>1</span>280        <div class="chev"></div>281      </div>282    </div>283  </div>284 285  <!-- Bottom tab bar -->286  <div class="tabbar">287    <div class="tab">288      <svg viewBox="0 0 24 24"><path d="M3 11l9-7 9 7"/><path d="M9 22V12h6v10"/></svg>289      <div>Home</div>290    </div>291    <div class="tab">292      <svg viewBox="0 0 24 24"><path d="M12 21s-6-4.35-8.5-7.5A5.5 5.5 0 0 1 12 5a5.5 5.5 0 0 1 8.5 8.5C18 16.65 12 21 12 21z"/></svg>293      <div>Favorites</div>294    </div>295    <div class="tab">296      <svg viewBox="0 0 24 24"><path d="M3 6h12l3 6-3 6H3z"/></svg>297      <div>Deals</div>298    </div>299    <div class="tab">300      <svg viewBox="0 0 24 24"><circle cx="12" cy="7" r="4"/><path d="M4 22c1.5-4 5-6 8-6s6.5 2 8 6"/></svg>301      <div>You</div>302    </div>303    <div class="tab">304      <svg viewBox="0 0 24 24"><path d="M6 6h15l-2 12H7L6 6z"/><path d="M6 6H3"/><circle cx="9" cy="20" r="1.5"/><circle cx="18" cy="20" r="1.5"/></svg>305      <div>Cart</div>306    </div>307  </div>308 309  <div class="home-indicator"></div>310</div>311</body>312</html>