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: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff; color: #111;13  }14 15  /* Status bar */16  .status-bar {17    height: 120px;18    padding: 0 40px;19    display: flex; align-items: center; justify-content: space-between;20    font-size: 38px; color: #555;21  }22  .status-left, .status-right {23    display: flex; align-items: center; gap: 24px;24  }25  .icon-square {26    width: 40px; height: 40px; background: #777; border-radius: 6px;27  }28  .icon-gear {29    width: 40px; height: 40px; border: 3px solid #777; border-radius: 50%;30    position: relative;31  }32  .icon-gear:before { content: ""; position: absolute; left: 18px; top: 18px; width: 4px; height: 4px; background: #777; border-radius: 50%; }33  .icon-wifi, .icon-battery { display: inline-flex; align-items: center; }34  .icon-battery {35    width: 54px; height: 32px; border: 3px solid #777; border-radius: 6px; position: relative;36  }37  .icon-battery:after {38    content: ""; position: absolute; right: -10px; top: 10px; width: 8px; height: 12px; background: #777; border-radius: 2px;39  }40  .wifi-shape {41    width: 44px; height: 44px;42    border: 4px solid #777; border-radius: 50%;43    border-top-color: transparent; border-left-color: transparent;44    transform: rotate(45deg);45  }46 47  /* Hero section */48  .hero {49    position: relative;50    height: 980px;51    background: #fafafa;52  }53  .back-btn {54    position: absolute; left: 36px; top: 160px;55    width: 72px; height: 72px; border: none; background: transparent; cursor: pointer;56  }57  .back-btn svg { width: 72px; height: 72px; }58  .product-image {59    position: absolute; left: 60px; right: 60px; top: 240px;60    height: 560px;61    background: #E0E0E0; border: 1px solid #BDBDBD;62    display: flex; align-items: center; justify-content: center;63    color: #757575; font-size: 36px;64  }65  .promo-tag {66    position: absolute; left: 60px; bottom: 180px;67    background: #ff2a2a; color: #fff; font-weight: 700;68    padding: 20px 28px; font-size: 32px; border-radius: 4px;69  }70  .dots {71    position: absolute; left: 60px; bottom: 90px; display: flex; gap: 26px;72  }73  .dot {74    width: 20px; height: 20px; border-radius: 50%; border: 2px solid #ADADAD; background: transparent;75  }76  .dot.active { background: #111; border-color: #111; }77 78  /* Fits with bar */79  .fits-with {80    height: 120px; border-top: 2px solid #e5e5e5; border-bottom: 2px solid #e5e5e5;81    display: flex; align-items: center; justify-content: center;82    font-weight: 700; font-size: 40px; letter-spacing: 1px;83    position: relative;84  }85  .fits-with .caret {86    position: absolute; right: 40px; top: 50%; transform: translateY(-50%);87  }88 89  /* Content */90  .content {91    padding: 40px 50px 0 50px;92  }93  .title-row {94    display: flex; align-items: center; justify-content: space-between; gap: 20px;95  }96  .title {97    font-size: 60px; font-weight: 800; line-height: 1.2;98  }99  .subtitle {100    margin-top: 18px; font-size: 36px; color: #555;101  }102  .price {103    margin-top: 34px; font-size: 56px; font-weight: 800;104  }105  .heart-circle {106    width: 120px; height: 120px; border: 3px solid #111; border-radius: 50%;107    display: flex; align-items: center; justify-content: center;108  }109  .variants { margin-top: 40px; }110  .variants .label { font-size: 38px; font-weight: 700; margin-bottom: 22px; }111  .thumbs { display: flex; gap: 28px; }112  .thumb {113    width: 240px; height: 160px; background: #E0E0E0; border: 1px solid #BDBDBD;114    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;115  }116 117  .size-label { margin-top: 60px; font-size: 40px; font-weight: 700; }118  .size-dropdown {119    margin-top: 22px; height: 150px; border: 3px solid #cfcfcf; border-radius: 6px;120    display: flex; align-items: center; justify-content: space-between;121    padding: 0 36px; font-size: 38px; color: #999;122  }123 124  /* Bottom navigation */125  .bottom-nav {126    position: absolute; left: 0; bottom: 0;127    width: 100%; height: 240px; border-top: 2px solid #e5e5e5; background: #fff;128    display: flex; align-items: center; justify-content: space-around;129  }130  .nav-item {131    display: flex; flex-direction: column; align-items: center; gap: 14px;132    color: #888; font-size: 28px;133  }134  .nav-item.active { color: #111; font-weight: 700; }135  .nav-icon { width: 64px; height: 64px; }136  .nav-icon svg { width: 64px; height: 64px; }137 138  .gesture-bar {139    position: absolute; left: 50%; bottom: 270px; transform: translateX(-50%);140    width: 420px; height: 16px; background: #9b9b9b; border-radius: 10px;141  }142</style>143</head>144<body>145<div id="render-target">146 147  <!-- Status Bar -->148  <div class="status-bar">149    <div class="status-left">150      <div>2:53</div>151      <div class="icon-square"></div>152      <div class="icon-gear"></div>153    </div>154    <div class="status-right">155      <div class="icon-wifi"><div class="wifi-shape"></div></div>156      <div class="icon-battery"></div>157    </div>158  </div>159 160  <!-- Hero product area -->161  <div class="hero">162    <button class="back-btn" aria-label="Back">163      <svg viewBox="0 0 48 48">164        <path d="M30 10 L14 24 L30 38" stroke="#000" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>165      </svg>166    </button>167 168    <div class="product-image">[IMG: Black Nike Air Force 1 Shoe]</div>169 170    <div class="promo-tag">APP -5%: APP5</div>171 172    <div class="dots">173      <div class="dot"></div>174      <div class="dot"></div>175      <div class="dot active"></div>176      <div class="dot"></div>177      <div class="dot"></div>178      <div class="dot"></div>179    </div>180  </div>181 182  <!-- Fits With Bar -->183  <div class="fits-with">184    <span>FITS WITH</span>185    <div class="caret">186      <svg width="48" height="48" viewBox="0 0 48 48">187        <path d="M10 30 L24 16 L38 30" stroke="#000" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>188      </svg>189    </div>190  </div>191 192  <!-- Content -->193  <div class="content">194    <div class="title-row">195      <div class="title">Nike Air Force 1 '07 Fresh</div>196      <div class="heart-circle">197        <svg viewBox="0 0 64 64">198          <path d="M32 52 C20 42 14 36 14 26 C14 20 18 16 24 16 C28 16 31 18 32 21 C33 18 36 16 40 16 C46 16 50 20 50 26 C50 36 44 42 32 52 Z"199                stroke="#111" stroke-width="3" fill="none" />200        </svg>201      </div>202    </div>203    <div class="subtitle">Black/ Anthracite-Black-Black</div>204    <div class="price">140 €</div>205 206    <div class="variants">207      <div class="label">2 variants</div>208      <div class="thumbs">209        <div class="thumb">[IMG: White Shoe Variant]</div>210        <div class="thumb">[IMG: White Shoe Variant]</div>211      </div>212    </div>213 214    <div class="size-label">Select a size:</div>215    <div class="size-dropdown">216      <span>17 available size</span>217      <svg width="48" height="48" viewBox="0 0 48 48">218        <path d="M12 18 L24 30 L36 18" stroke="#111" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>219      </svg>220    </div>221  </div>222 223  <!-- Gesture bar (Android) -->224  <div class="gesture-bar"></div>225 226  <!-- Bottom navigation -->227  <div class="bottom-nav">228    <div class="nav-item active">229      <div class="nav-icon">230        <svg viewBox="0 0 64 64">231          <path d="M12 28 L32 12 L52 28 V52 H38 V38 H26 V52 H12 Z" fill="#111"/>232        </svg>233      </div>234      <div>Home</div>235    </div>236    <div class="nav-item">237      <div class="nav-icon">238        <svg viewBox="0 0 64 64">239          <circle cx="28" cy="28" r="16" stroke="#888" stroke-width="4" fill="none"/>240          <line x1="42" y1="42" x2="56" y2="56" stroke="#888" stroke-width="4" stroke-linecap="round"/>241        </svg>242      </div>243      <div>Shopping</div>244    </div>245    <div class="nav-item">246      <div class="nav-icon">247        <svg viewBox="0 0 64 64">248          <path d="M32 52 C20 42 14 36 14 26 C14 20 18 16 24 16 C28 16 31 18 32 21 C33 18 36 16 40 16 C46 16 50 20 50 26 C50 36 44 42 32 52 Z"249                stroke="#888" stroke-width="4" fill="none"/>250        </svg>251      </div>252      <div>Wishlist</div>253    </div>254    <div class="nav-item">255      <div class="nav-icon">256        <svg viewBox="0 0 64 64">257          <rect x="18" y="20" width="28" height="32" rx="3" ry="3" stroke="#888" stroke-width="4" fill="none"/>258          <path d="M22 20 C22 14 26 12 32 12 C38 12 42 14 42 20" stroke="#888" stroke-width="4" fill="none"/>259        </svg>260      </div>261      <div>Cart</div>262    </div>263    <div class="nav-item">264      <div class="nav-icon">265        <svg viewBox="0 0 64 64">266          <circle cx="32" cy="22" r="10" stroke="#888" stroke-width="4" fill="none"/>267          <path d="M14 52 C16 40 24 36 32 36 C40 36 48 40 50 52" stroke="#888" stroke-width="4" fill="none"/>268        </svg>269      </div>270      <div>Profile</div>271    </div>272  </div>273 274</div>275</body>276</html>