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 - Sporty Sneakers</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #222;17  }18  /* Header */19  .header {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 160px;25    background: #fff;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 40px;30    box-sizing: border-box;31  }32  .header-left, .header-right {33    display: flex;34    align-items: center;35    gap: 30px;36  }37  .icon-btn {38    width: 48px;39    height: 48px;40    display: flex;41    align-items: center;42    justify-content: center;43    cursor: pointer;44  }45  .icon-btn svg { width: 32px; height: 32px; }46  /* Image area */47  .image-area {48    position: absolute;49    top: 160px;50    left: 0;51    width: 1080px;52    height: 1520px;53    background: linear-gradient(135deg, #f3f4f6 0%, #ffffff 60%);54  }55  .product-photo {56    position: absolute;57    left: 50%;58    transform: translateX(-50%);59    bottom: 220px;60    width: 860px;61    height: 360px;62    background: #E0E0E0;63    border: 1px solid #BDBDBD;64    display: flex;65    align-items: center;66    justify-content: center;67    color: #757575;68    font-size: 28px;69    letter-spacing: 0.5px;70  }71  /* Action bar */72  .action-bar {73    position: absolute;74    top: 1680px;75    left: 0;76    width: 1080px;77    height: 120px;78    background: #fff;79    display: grid;80    grid-template-columns: 1fr 1fr;81    border-top: 1px solid #ddd;82    border-bottom: 1px solid #ddd;83  }84  .action-item {85    display: flex;86    align-items: center;87    justify-content: center;88    font-size: 32px;89    letter-spacing: 1px;90  }91  .action-item + .action-item {92    border-left: 1px solid #ddd;93  }94  /* Info section */95  .info {96    position: absolute;97    top: 1800px;98    left: 0;99    width: 1080px;100    height: 600px;101    background: #fff;102    box-sizing: border-box;103    padding: 40px 50px;104  }105  .title {106    font-size: 36px;107    font-weight: 500;108    letter-spacing: 1px;109    margin-bottom: 24px;110  }111  .price-row {112    display: flex;113    align-items: center;114    gap: 18px;115    margin-bottom: 18px;116  }117  .old-price {118    font-size: 28px;119    color: #6b6b6b;120    text-decoration: line-through;121  }122  .sale-badge {123    font-size: 28px;124    color: #fff;125    background: #000;126    padding: 8px 14px;127    border-radius: 6px;128    display: inline-block;129  }130  .note {131    font-size: 26px;132    color: #9a9a9a;133    margin-top: 22px;134  }135  .info-footer {136    display: flex;137    align-items: center;138    justify-content: space-between;139    margin-top: 40px;140  }141  .swatches {142    display: flex;143    align-items: center;144    gap: 24px;145  }146  .swatch {147    width: 82px;148    height: 82px;149    border: 1px solid #cfcfcf;150    box-sizing: border-box;151  }152  .swatch.gray { background: #b7b7b7; }153  .swatch.black { background: #101010; }154  .swatch-indicator {155    width: 56px;156    height: 6px;157    background: #222;158    border-radius: 3px;159    margin: 10px auto 0;160  }161  /* Gesture bar imitation */162  .gesture-bar {163    position: absolute;164    bottom: 30px;165    left: 50%;166    transform: translateX(-50%);167    width: 320px;168    height: 14px;169    background: #bdbdbd;170    border-radius: 7px;171    opacity: 0.7;172  }173</style>174</head>175<body>176<div id="render-target">177  <!-- Header -->178  <div class="header">179    <div class="header-left">180      <div class="icon-btn" aria-label="Close">181        <svg viewBox="0 0 24 24">182          <path d="M5 5l14 14M19 5l-14 14" stroke="#000" stroke-width="2" stroke-linecap="round"/>183        </svg>184      </div>185    </div>186    <div class="header-right">187      <div class="icon-btn" aria-label="Share">188        <svg viewBox="0 0 24 24">189          <circle cx="17" cy="7" r="2" fill="none" stroke="#000" stroke-width="2"/>190          <circle cx="7" cy="12" r="2" fill="none" stroke="#000" stroke-width="2"/>191          <circle cx="17" cy="17" r="2" fill="none" stroke="#000" stroke-width="2"/>192          <path d="M14 9l-5 3m5 3l-5-3" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round"/>193        </svg>194      </div>195      <div class="icon-btn" aria-label="Bookmark">196        <svg viewBox="0 0 24 24">197          <path d="M6 4h12v16l-6-4-6 4z" fill="none" stroke="#000" stroke-width="2" stroke-linejoin="round"/>198        </svg>199      </div>200    </div>201  </div>202 203  <!-- Image area -->204  <div class="image-area">205    <div class="product-photo">[IMG: Sporty Sneakers product photo]</div>206  </div>207 208  <!-- Action bar -->209  <div class="action-bar">210    <div class="action-item">ADD</div>211    <div class="action-item">SHOPPING BAG</div>212  </div>213 214  <!-- Info section -->215  <div class="info">216    <div class="title">SPORTY SNEAKERS</div>217    <div class="price-row">218      <div class="old-price">29.95 EUR</div>219      <div class="sale-badge">-33%&nbsp;&nbsp;19.99 EUR</div>220    </div>221    <div class="note">VAT included / excl Shipping cost</div>222 223    <div class="info-footer">224      <div></div>225      <div class="swatches">226        <div>227          <div class="swatch gray"></div>228          <div class="swatch-indicator"></div>229        </div>230        <div class="swatch black"></div>231      </div>232    </div>233  </div>234 235  <div class="gesture-bar"></div>236</div>237</body>238</html>