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 - Jacket</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 96px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 36px;28    color: #555;29    font-size: 36px;30  }31  .status-left { display: flex; align-items: center; gap: 24px; }32  .status-center { display: flex; align-items: center; gap: 18px; }33  .status-right { display: flex; align-items: center; gap: 18px; }34 35  /* Top toolbar */36  .toolbar {37    position: absolute;38    top: 96px;39    left: 0;40    width: 1080px;41    height: 120px;42    display: flex;43    align-items: center;44    justify-content: space-between;45    padding: 0 36px;46    color: #333;47  }48  .toolbar-right {49    display: flex;50    align-items: center;51    gap: 36px;52  }53  .icon-btn {54    width: 48px;55    height: 48px;56    display: inline-flex;57    align-items: center;58    justify-content: center;59  }60 61  /* Main product image placeholder */62  .product-photo {63    position: absolute;64    top: 260px;65    left: 60px;66    width: 960px;67    height: 1500px;68    background: #E0E0E0;69    border: 1px solid #BDBDBD;70    display: flex;71    align-items: center;72    justify-content: center;73    color: #757575;74    font-size: 32px;75    text-align: center;76  }77 78  /* Floating button (bottom-left) */79  .floating-btn {80    position: absolute;81    left: 36px;82    top: 1680px;83    width: 132px;84    height: 132px;85    border-radius: 50%;86    background: #dfe6dd;87    border: 1px solid #b5c1ad;88    display: flex;89    align-items: center;90    justify-content: center;91    color: #556b2f;92    font-size: 28px;93  }94 95  /* Bottom action bar */96  .bottom-actions {97    position: absolute;98    top: 1870px;99    left: 0;100    width: 1080px;101    height: 170px;102    border-top: 2px solid #E0E0E0;103    border-bottom: 2px solid #E0E0E0;104    display: grid;105    grid-template-columns: 1fr 1fr;106    background: #fff;107  }108  .action {109    display: flex;110    flex-direction: column;111    align-items: center;112    justify-content: center;113    gap: 12px;114  }115  .action + .action { border-left: 2px solid #E0E0E0; }116  .action-title {117    font-size: 36px;118    color: #222;119    letter-spacing: 1px;120  }121  .action-sub {122    font-size: 26px;123    color: #9E9E9E;124  }125 126  /* Product info */127  .product-info {128    position: absolute;129    top: 2060px;130    left: 36px;131    width: 1008px;132    height: 250px;133    color: #222;134  }135  .product-title {136    font-size: 40px;137    letter-spacing: 1px;138    margin-bottom: 24px;139  }140  .price-row {141    display: flex;142    align-items: center;143    gap: 24px;144  }145  .old-price {146    font-size: 32px;147    color: #777;148    text-decoration: line-through;149  }150  .price-badge {151    background: #ffe76a;152    color: #222;153    padding: 12px 18px;154    border-radius: 6px;155    border: 1px solid #d6c34d;156    font-size: 32px;157    letter-spacing: 0.5px;158  }159 160  /* Gesture bar */161  .gesture-bar {162    position: absolute;163    bottom: 36px;164    left: 50%;165    transform: translateX(-50%);166    width: 220px;167    height: 12px;168    background: #C7C7C7;169    border-radius: 6px;170  }171 172  /* Helper icon styles (status bar small) */173  .mini-icon { width: 34px; height: 34px; }174</style>175</head>176<body>177<div id="render-target">178 179  <!-- Status Bar -->180  <div class="status-bar">181    <div class="status-left">182      <div>8:47</div>183    </div>184    <div class="status-center">185      <!-- simple mini icons to emulate status indicators -->186      <svg class="mini-icon" viewBox="0 0 32 32">187        <circle cx="16" cy="16" r="12" fill="#9E9E9E"></circle>188      </svg>189      <svg class="mini-icon" viewBox="0 0 32 32">190        <rect x="6" y="6" width="20" height="20" rx="4" fill="#BDBDBD"></rect>191      </svg>192      <svg class="mini-icon" viewBox="0 0 32 32">193        <path d="M4 20c4-6 8-9 12-9s8 3 12 9" stroke="#9E9E9E" stroke-width="3" fill="none" stroke-linecap="round"></path>194        <circle cx="16" cy="20" r="2" fill="#9E9E9E"></circle>195      </svg>196    </div>197    <div class="status-right">198      <svg class="mini-icon" viewBox="0 0 32 32">199        <path d="M6 26V6l8 8 12-8v20" stroke="#616161" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>200      </svg>201      <svg class="mini-icon" viewBox="0 0 32 32">202        <rect x="6" y="8" width="20" height="16" rx="3" stroke="#616161" stroke-width="3" fill="none"></rect>203        <rect x="27" y="12" width="2" height="8" fill="#616161"></rect>204      </svg>205    </div>206  </div>207 208  <!-- Top Toolbar -->209  <div class="toolbar">210    <div class="icon-btn" aria-label="Close">211      <svg width="48" height="48" viewBox="0 0 36 36">212        <path d="M6 6 L30 30 M30 6 L6 30" stroke="#333" stroke-width="3" stroke-linecap="round"></path>213      </svg>214    </div>215    <div class="toolbar-right">216      <div class="icon-btn" aria-label="Share">217        <svg width="48" height="48" viewBox="0 0 36 36">218          <circle cx="26" cy="10" r="3" fill="#333"></circle>219          <circle cx="10" cy="18" r="3" fill="#333"></circle>220          <circle cx="26" cy="26" r="3" fill="#333"></circle>221          <path d="M12 18 L24 12" stroke="#333" stroke-width="3" stroke-linecap="round"></path>222          <path d="M12 18 L24 24" stroke="#333" stroke-width="3" stroke-linecap="round"></path>223        </svg>224      </div>225      <div class="icon-btn" aria-label="Bookmark">226        <svg width="48" height="48" viewBox="0 0 36 36">227          <path d="M10 6 H26 V30 L18 24 L10 30 Z" stroke="#333" stroke-width="3" fill="none" stroke-linejoin="round"></path>228        </svg>229      </div>230    </div>231  </div>232 233  <!-- Main Product Photo Placeholder -->234  <div class="product-photo">[IMG: Product photo - black belted jacket on model]</div>235 236  <!-- Floating Button (bottom-left overlay) -->237  <div class="floating-btn">[BTN]</div>238 239  <!-- Bottom Actions -->240  <div class="bottom-actions">241    <div class="action">242      <div class="action-title">VIEW SIMILAR</div>243      <div class="action-sub">OUT OF STOCK</div>244    </div>245    <div class="action">246      <div class="action-title">SHOPPING BAG</div>247    </div>248  </div>249 250  <!-- Product Info -->251  <div class="product-info">252    <div class="product-title">DOUBLE-SIDED BELTED JACKET</div>253    <div class="price-row">254      <div class="old-price">109.00 USD</div>255      <div class="price-badge">-35% 69.99 USD</div>256    </div>257  </div>258 259  <!-- Gesture bar at bottom -->260  <div class="gesture-bar"></div>261 262</div>263</body>264</html>