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; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color:#111; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden; background:#ffffff;11  }12 13  /* Status bar */14  .status-bar {15    height:110px;16    padding:0 36px;17    display:flex;18    align-items:center;19    justify-content:space-between;20    color:#4a4a4a;21    font-size:38px;22  }23  .status-icons { display:flex; gap:26px; align-items:center; }24  .dot { width:18px; height:18px; background:#757575; border-radius:3px; }25  .gear {26    width:32px; height:32px; border:4px solid #757575; border-radius:50%;27    position:relative;28  }29 30  /* Back button */31  .top-back {32    position:absolute; left:36px; top:140px; width:64px; height:64px; display:flex; align-items:center; justify-content:center;33  }34  .icon { width:48px; height:48px; }35 36  /* Hero image */37  .hero {38    position:relative;39    margin-top:100px;40    width:100%;41    height:820px;42    background:#F7F7F7;43    border-top:1px solid #ECECEC;44    border-bottom:1px solid #ECECEC;45    display:flex; align-items:flex-end; justify-content:center;46  }47  .hero .placeholder {48    position:absolute; inset:0;49    display:flex; align-items:center; justify-content:center;50    color:#757575; font-size:36px; letter-spacing:.2px;51    background:#E0E0E0; border:1px solid #BDBDBD;52  }53  .promo-tag {54    position:absolute; left:36px; bottom:160px;55    background:#E40000; color:#fff; font-weight:700; font-size:36px;56    padding:18px 26px; border-radius:4px;57  }58 59  /* Carousel dots */60  .carousel-dots {61    height:120px; display:flex; align-items:center; gap:26px; padding:0 48px;62  }63  .c-dot {64    width:22px; height:22px; border:3px solid #BDBDBD; border-radius:50%;65  }66  .c-dot.active {67    background:#111; border-color:#111;68  }69 70  /* Divider + section header */71  .divider {72    height:4px; background:#EAEAEA; width:100%;73  }74  .fits-with {75    border-top:2px solid #DADADA; border-bottom:2px solid #DADADA;76    height:110px; display:flex; align-items:center; justify-content:center;77    font-weight:800; font-size:44px; letter-spacing:.5px;78  }79  .fits-with .arrow { position:absolute; right:48px; width:42px; height:42px; }80 81  /* Product info */82  .content {83    padding:44px 44px 0 44px;84  }85  .row-like {86    display:flex; align-items:flex-start; justify-content:space-between; gap:24px;87  }88  .title {89    font-size:64px; font-weight:900; line-height:1.15; margin:10px 0 22px 0;90  }91  .subtitle {92    font-size:38px; color:#5a5a5a; margin-bottom:36px;93  }94  .price {95    font-size:64px; font-weight:900; margin:8px 0 40px 0;96  }97  .heart-wrap {98    width:120px; height:120px; border:4px solid #CFCFCF; border-radius:60px;99    display:flex; align-items:center; justify-content:center; margin-top:20px;100  }101 102  /* Variants */103  .variants-title { font-size:40px; font-weight:700; margin:20px 0 24px 0; }104  .variants { display:flex; gap:30px; margin-bottom:46px; }105  .thumb {106    width:210px; height:160px; background:#E0E0E0; border:1px solid #BDBDBD;107    display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px;108  }109 110  /* Size selector */111  .size-title { font-size:44px; font-weight:700; margin-bottom:22px; }112  .select-box {113    height:140px; border:4px solid #D0D0D0; border-radius:6px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; color:#9A9A9A; font-size:42px;114  }115 116  /* Bottom nav */117  .bottom-nav {118    position:absolute; bottom:60px; left:0; right:0;119    border-top:2px solid #E6E6E6;120    height:180px; display:flex; background:#fff;121  }122  .nav-item {123    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:#9A9A9A; font-size:32px;124  }125  .nav-item.active { color:#111; font-weight:700; }126  .nav-icon { width:52px; height:52px; }127 128  /* Gesture bar */129  .gesture {130    position:absolute; bottom:20px; left:50%; transform:translateX(-50%);131    width:380px; height:16px; background:#9E9E9E; border-radius:16px;132  }133</style>134</head>135<body>136<div id="render-target">137 138  <div class="status-bar">139    <div style="display:flex; align-items:center; gap:22px;">140      <div style="font-weight:700;">2:52</div>141      <div class="dot"></div>142      <div class="gear"></div>143    </div>144    <div class="status-icons">145      <!-- simple wifi -->146      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#6b6b6b" stroke-width="2">147        <path d="M2 9c5-5 15-5 20 0"></path>148        <path d="M5 12c3.5-3.5 10.5-3.5 14 0"></path>149        <path d="M8 15c2-2 6-2 8 0"></path>150        <circle cx="12" cy="18" r="1.5" fill="#6b6b6b" stroke="none"></circle>151      </svg>152      <!-- battery -->153      <svg class="icon" viewBox="0 0 28 24" fill="none" stroke="#6b6b6b" stroke-width="2">154        <rect x="2" y="6" width="20" height="12" rx="2"></rect>155        <rect x="4" y="8" width="12" height="8" fill="#6b6b6b" stroke="none"></rect>156        <rect x="22" y="9" width="4" height="6" rx="1" fill="#6b6b6b" stroke="none"></rect>157      </svg>158    </div>159  </div>160 161  <div class="top-back">162    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.5">163      <path d="M15 19l-7-7 7-7"></path>164    </svg>165  </div>166 167  <div class="hero">168    <div class="placeholder">[IMG: Black sneaker sole]</div>169    <div class="promo-tag">APP -5%: APP5</div>170  </div>171 172  <div class="carousel-dots">173    <span class="c-dot"></span>174    <span class="c-dot active"></span>175    <span class="c-dot"></span>176    <span class="c-dot"></span>177    <span class="c-dot"></span>178    <span class="c-dot"></span>179    <span class="c-dot"></span>180  </div>181 182  <div class="divider"></div>183 184  <div class="fits-with">185    FITS WITH186    <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.5">187      <path d="M6 14l6-6 6 6"></path>188    </svg>189  </div>190 191  <div class="content">192    <div class="row-like">193      <div style="flex:1;">194        <div class="title">Nike Air Force 1 '07 Fresh</div>195        <div class="subtitle">Black/ Anthracite-Black-Black</div>196        <div class="price">140 €</div>197      </div>198      <div class="heart-wrap">199        <svg viewBox="0 0 24 24" class="nav-icon" fill="none" stroke="#111" stroke-width="2">200          <path d="M12 21s-7-4.6-9.5-8.3c-2-2.9.2-6.7 3.7-6.7 1.8 0 3.1 1 3.8 2.2.7-1.2 2-2.2 3.8-2.2 3.5 0 5.7 3.8 3.7 6.7C19 16.4 12 21 12 21z"></path>201        </svg>202      </div>203    </div>204 205    <div class="variants-title">2 variants</div>206    <div class="variants">207      <div class="thumb">[IMG: Variant 1 shoe]</div>208      <div class="thumb">[IMG: Variant 2 shoe]</div>209    </div>210 211    <div class="size-title">Select a size:</div>212    <div class="select-box">213      <div>17 available size</div>214      <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#111" stroke-width="2.5">215        <path d="M6 9l6 6 6-6"></path>216      </svg>217    </div>218  </div>219 220  <div class="bottom-nav">221    <div class="nav-item active">222      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">223        <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>224        <path d="M9 21V9h6v12"></path>225      </svg>226      <div>Home</div>227    </div>228    <div class="nav-item">229      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#9A9A9A" stroke-width="2">230        <circle cx="11" cy="11" r="7"></circle>231        <path d="M21 21l-4.3-4.3"></path>232      </svg>233      <div>Shopping</div>234    </div>235    <div class="nav-item">236      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#9A9A9A" stroke-width="2">237        <path d="M12 21s-7-4.6-9.5-8.3c-2-2.9.2-6.7 3.7-6.7 1.8 0 3.1 1 3.8 2.2.7-1.2 2-2.2 3.8-2.2 3.5 0 5.7 3.8 3.7 6.7C19 16.4 12 21 12 21z"></path>238      </svg>239      <div>Wishlist</div>240    </div>241    <div class="nav-item">242      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#9A9A9A" stroke-width="2">243        <path d="M6 6h15l-2 10H7L6 6z"></path>244        <circle cx="9" cy="20" r="1.5"></circle>245        <circle cx="18" cy="20" r="1.5"></circle>246        <path d="M6 6l-2-2"></path>247      </svg>248      <div>Cart</div>249    </div>250    <div class="nav-item">251      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#9A9A9A" stroke-width="2">252        <circle cx="12" cy="7" r="4"></circle>253        <path d="M5.5 21a6.5 6.5 0 0 1 13 0"></path>254      </svg>255      <div>Profile</div>256    </div>257  </div>258 259  <div class="gesture"></div>260</div>261</body>262</html>