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 Detail Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9 10  /* Root render target */11  #render-target {12    width: 1080px;13    height: 2400px;14    position: relative;15    overflow: hidden;16    background: #ffffff;17    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;18    color: #111;19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    left: 0; top: 0; right: 0;25    height: 96px;26    background: #000;27    color: #fff;28    font-size: 34px;29    letter-spacing: 0.5px;30    display: flex;31    align-items: center;32    padding: 0 36px;33    box-sizing: border-box;34    justify-content: space-between;35  }36  .status-icons {37    display: flex;38    align-items: center;39    gap: 18px;40    opacity: 0.9;41  }42  .status-dot {43    width: 8px; height: 8px; background: #fff; border-radius: 50%;44    display: inline-block;45    margin: 0 6px;46  }47  .battery {48    width: 34px; height: 20px; border: 3px solid #fff; border-radius: 4px; position: relative;49  }50  .battery:after { content: ""; position: absolute; right: -6px; top: 5px; width: 6px; height: 10px; background: #fff; border-radius: 1px; }51  .battery .fill { position: absolute; left: 3px; top: 3px; bottom: 3px; right: 8px; background: #fff; }52 53  /* Top app bar */54  .app-bar {55    position: absolute;56    top: 96px;57    left: 0; right: 0;58    height: 120px;59    background: #fff;60    display: flex;61    align-items: center;62    padding: 0 32px;63    box-sizing: border-box;64    border-bottom: 1px solid #eee;65  }66  .app-title {67    font-size: 44px;68    font-weight: 700;69    margin-left: 18px;70    flex: 1;71    white-space: nowrap;72    overflow: hidden;73    text-overflow: ellipsis;74  }75  .icon-btn {76    width: 72px; height: 72px;77    display: flex; align-items: center; justify-content: center;78  }79  .icon {80    width: 44px; height: 44px;81    stroke: #111; fill: none; stroke-width: 4px;82  }83 84  /* Scrollable content area */85  .content {86    position: absolute;87    top: 216px; /* status(96) + appbar(120) */88    bottom: 120px; /* room for bottom area/home indicator */89    left: 0; right: 0;90    overflow: auto;91    padding: 32px 36px 160px 36px;92    box-sizing: border-box;93  }94 95  .paragraph {96    font-size: 36px;97    line-height: 48px;98    color: #222;99    margin: 12px 0 24px;100  }101 102  .bullets {103    margin: 18px 0 28px;104    padding-left: 18px;105  }106  .bullets li {107    font-size: 36px;108    line-height: 48px;109    margin: 10px 0;110  }111 112  .details-link {113    font-size: 36px;114    color: #9e9e9e;115    margin: 24px 0 36px;116  }117 118  .pill {119    height: 150px;120    border-radius: 90px;121    border: 2px solid #e0e0e0;122    background: #fff;123    margin: 18px 8px;124    padding: 0 44px;125    display: flex; align-items: center; justify-content: center;126    font-size: 44px;127    font-weight: 700;128    color: #111;129    box-shadow: 0 0 0 1px rgba(0,0,0,0.02) inset;130  }131  .pill.dark {132    background: #111;133    color: #fff;134    border-color: #111;135  }136  .pill .chev {137    width: 34px; height: 34px; margin-left: 14px;138  }139 140  .favorite-row {141    display: flex; align-items: center; justify-content: center;142    gap: 18px;143  }144  .heart {145    width: 44px; height: 44px;146    stroke: #111; stroke-width: 4px; fill: none;147  }148 149  .divider {150    height: 1px; background: #e6e6e6; margin: 36px 0;151  }152 153  .accordion-row {154    padding: 26px 8px;155    display: flex; align-items: center; justify-content: space-between;156  }157  .accordion-title {158    font-size: 40px; font-weight: 700; color: #111;159  }160  .chev-right {161    width: 34px; height: 34px; stroke: #777; stroke-width: 5px; fill: none;162  }163 164  .reviews-row {165    display: flex; align-items: center; justify-content: space-between;166    padding: 18px 8px;167  }168  .reviews-title { font-size: 40px; font-weight: 700; }169  .stars { display: flex; align-items: center; gap: 10px; }170  .star { width: 44px; height: 44px; }171  .star path { fill: #111; }172  .star.gray path { fill: #ddd; }173 174  /* Bottom black area and home indicator */175  .bottom-area {176    position: absolute;177    left: 0; right: 0; bottom: 0;178    height: 120px;179    background: #000;180  }181  .home-indicator {182    position: absolute; left: 50%; transform: translateX(-50%);183    bottom: 26px;184    width: 420px; height: 12px;185    background: #d8d8d8;186    border-radius: 8px;187    opacity: 0.9;188  }189</style>190</head>191<body>192<div id="render-target">193 194  <!-- Status bar -->195  <div class="status-bar">196    <div>3:00</div>197    <div class="status-icons">198      <span>•</span>199      <span>•</span>200      <span>•</span>201      <span>•</span>202      <span class="status-dot"></span>203      <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l2 4 4 1-3 3 .7 4L12 12l-3.7 2 .7-4-3-3 4-1z" fill="#fff"/></svg>204      <div class="battery"><div class="fill"></div></div>205    </div>206  </div>207 208  <!-- App Bar -->209  <div class="app-bar">210    <div class="icon-btn" title="Back">211      <svg class="icon" viewBox="0 0 24 24">212        <path d="M15 5l-7 7 7 7" stroke="#111" fill="none" stroke-linecap="round" stroke-linejoin="round"/>213      </svg>214    </div>215    <div class="app-title">Nike Air Force 1 '07 LV8 EMB</div>216    <div class="icon-btn" title="Search">217      <svg class="icon" viewBox="0 0 24 24">218        <circle cx="10" cy="10" r="7"></circle>219        <line x1="15" y1="15" x2="22" y2="22" stroke="#111" stroke-width="4" stroke-linecap="round"></line>220      </svg>221    </div>222    <div class="icon-btn" title="Bag">223      <svg class="icon" viewBox="0 0 24 24">224        <path d="M6 9h12l-1 11H7L6 9z" />225        <path d="M9 9V7a3 3 0 0 1 6 0v2" />226      </svg>227    </div>228  </div>229 230  <!-- Content -->231  <div class="content">232    <p class="paragraph">233      Quench your thirst for style with this salty take on the hoops original. Preserving everything you know best—'80s construction, bold details and nothin'-but-net style—, its cracked leather, salt-washed colours and weathered accents maintain its status as the coveted off-court shoe.234    </p>235 236    <ul class="bullets">237      <li>Shown: Summit White/Blue Whisper/Football Grey/White</li>238      <li>Style: DV0787-100</li>239      <li>Country/Region of Origin: Vietnam</li>240    </ul>241 242    <div class="details-link">View Product Details</div>243 244    <div class="pill">245      Size UK 10246      <svg class="chev" viewBox="0 0 24 24">247        <path d="M6 9l6 6 6-6" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>248      </svg>249    </div>250 251    <div class="pill dark">Add to Bag</div>252 253    <div class="pill">254      <div class="favorite-row">255        <span>Favorite</span>256        <svg class="heart" viewBox="0 0 24 24">257          <path d="M12 21s-7-4.3-9.5-8.1C.5 9.6 2 6 5.5 6 7.6 6 9 7.4 12 10.2 15 7.4 16.4 6 18.5 6 22 6 23.5 9.6 21.5 12.9 19 16.7 12 21 12 21z" />258        </svg>259      </div>260    </div>261 262    <div class="divider"></div>263 264    <div class="accordion-row">265      <div class="accordion-title">Size & Fit</div>266      <svg class="chev-right" viewBox="0 0 24 24">267        <path d="M9 6l6 6-6 6" />268      </svg>269    </div>270 271    <div class="divider"></div>272 273    <div class="reviews-row">274      <div class="reviews-title">Reviews (11)</div>275      <div style="display:flex;align-items:center;gap:18px;">276        <div class="stars">277          <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.2 22 12 18.6 5.8 22 7 14.14l-5-4.87 6.91-1.01z"/></svg>278          <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.2 22 12 18.6 5.8 22 7 14.14l-5-4.87 6.91-1.01z"/></svg>279          <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.2 22 12 18.6 5.8 22 7 14.14l-5-4.87 6.91-1.01z"/></svg>280          <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.2 22 12 18.6 5.8 22 7 14.14l-5-4.87 6.91-1.01z"/></svg>281          <svg class="star gray" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.2 22 12 18.6 5.8 22 7 14.14l-5-4.87 6.91-1.01z"/></svg>282        </div>283        <svg class="chev-right" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>284      </div>285    </div>286  </div>287 288  <!-- Bottom area -->289  <div class="bottom-area">290    <div class="home-indicator"></div>291  </div>292 293</div>294</body>295</html>