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;13  }14 15  /* Top hero area */16  .hero {17    position: absolute;18    left: 0; top: 0;19    width: 1080px; height: 1450px;20    background: #e8eef1;21  }22 23  .close-btn {24    position: absolute; top: 190px; right: 40px; width: 50px; height: 50px; cursor: pointer;25  }26  .close-btn svg { width: 100%; height: 100%; }27  .close-btn line { stroke: #000; stroke-width: 6; stroke-linecap: round; }28 29  .hero-image {30    position: absolute;31    left: 90px; top: 540px;32    width: 900px; height: 520px;33    background: #E0E0E0;34    border: 1px solid #BDBDBD;35    display: flex; align-items: center; justify-content: center;36    color: #757575; font-size: 34px; letter-spacing: 1px;37  }38 39  /* Right vertical progress bars */40  .progress-rail {41    position: absolute; right: 24px; top: 600px;42    display: flex; flex-direction: column; gap: 36px;43  }44  .progress-rail span {45    display: block; width: 6px; height: 40px; background: #000; border-radius: 3px; opacity: 0.2;46  }47  .progress-rail span.active { opacity: 0.9; height: 48px; }48 49  /* Thumbnails strip */50  .thumbs {51    position: absolute; left: 0; top: 1350px;52    width: 1080px; height: 210px;53    background: #edf1f3;54    border-top: 1px solid #e0e0e0;55    display: flex; align-items: center; padding: 0 40px; gap: 36px;56    box-sizing: border-box;57  }58  .thumb {59    position: relative;60    width: 180px; height: 120px;61    background: #E0E0E0; border: 1px solid #BDBDBD;62    display: flex; align-items: center; justify-content: center;63    color: #757575; font-size: 22px;64  }65  .thumb.selected .corner { position: absolute; width: 36px; height: 36px; border: 4px solid #fff; }66  .thumb.selected .corner.tl { left: -4px; top: -4px; border-right: none; border-bottom: none; }67  .thumb.selected .corner.br { right: -4px; bottom: -4px; border-left: none; border-top: none; }68 69  /* Slider indicator */70  .slider-indicator {71    position: absolute; top: 1575px; left: 50%; transform: translateX(-50%);72    width: 140px; height: 16px; border-radius: 10px; background: #dcdcdc;73  }74 75  /* Product info section */76  .info {77    position: absolute; left: 0; top: 1620px; width: 1080px;78    background: #ffffff; padding: 40px 48px 0; box-sizing: border-box;79  }80  .info-top {81    display: flex; align-items: center; justify-content: space-between;82    margin-bottom: 20px;83  }84  .ar-badge {85    display: inline-flex; align-items: center; gap: 10px;86    color: #000; font-weight: 600;87  }88  .ar-icon {89    width: 42px; height: 42px;90    border-radius: 8px; border: 2px solid #000;91    display: flex; align-items: center; justify-content: center;92    font-size: 16px;93  }94  .fav-btn { width: 44px; height: 44px; }95  .fav-btn svg { width: 100%; height: 100%; }96  .fav-btn path { stroke: #000; stroke-width: 3; fill: none; }97 98  .title {99    font-size: 60px; font-weight: 800; letter-spacing: 2px; margin: 14px 0 28px;100  }101 102  .meta {103    display: flex; align-items: center; gap: 40px;104    font-size: 32px; letter-spacing: 2px; color: #000;105    margin-bottom: 40px;106  }107  .price { font-weight: 800; }108 109  .size-btn {110    width: 980px; height: 120px; background: #000; color: #fff;111    border: none; border-radius: 4px; font-size: 34px; letter-spacing: 4px; font-weight: 800;112    display: flex; align-items: center; justify-content: space-between;113    padding: 0 40px; box-sizing: border-box;114    margin: 10px 0 70px;115  }116  .size-btn svg { width: 46px; height: 46px; }117  .size-btn path { stroke: #fff; stroke-width: 6; fill: none; stroke-linecap: round; }118 119  /* Bottom system bar */120  .bottom-bar {121    position: absolute; left: 0; bottom: 0; width: 1080px; height: 160px; background: #000;122  }123  .gesture-pill {124    position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);125    width: 240px; height: 16px; border-radius: 12px; background: #cfcfcf;126    opacity: 0.9;127  }128</style>129</head>130<body>131<div id="render-target">132 133  <!-- Top hero area -->134  <div class="hero">135    <!-- Close icon -->136    <div class="close-btn" aria-label="Close">137      <svg viewBox="0 0 50 50">138        <line x1="8" y1="8" x2="42" y2="42"></line>139        <line x1="42" y1="8" x2="8" y2="42"></line>140      </svg>141    </div>142 143    <!-- Main product image placeholder -->144    <div class="hero-image">[IMG: Pink Running Shoe - Main]</div>145 146    <!-- Vertical progress bars -->147    <div class="progress-rail">148      <span class="active"></span>149      <span></span>150      <span></span>151      <span></span>152      <span></span>153      <span></span>154      <span></span>155    </div>156 157    <!-- Thumbnails strip -->158    <div class="thumbs">159      <div class="thumb">[IMG: Lime Shoe]</div>160      <div class="thumb">[IMG: Pink Shoe]</div>161      <div class="thumb">[IMG: Black Shoe]</div>162      <div class="thumb selected">163        <div class="corner tl"></div>164        <div class="corner br"></div>165        [IMG: Pink Shoe Variant]166      </div>167      <div class="thumb">[IMG: Grey/Green Shoe]</div>168    </div>169 170    <!-- Slider indicator -->171    <div class="slider-indicator"></div>172  </div>173 174  <!-- Product info section -->175  <div class="info">176    <div class="info-top">177      <div class="ar-badge">178        <div class="ar-icon">AR</div>179      </div>180      <div class="fav-btn" aria-label="Favorite">181        <svg viewBox="0 0 48 48">182          <path d="M24 40s-10-7-14-12c-4-5-3-12 3-15 5-2 9 2 11 5 2-3 6-7 11-5 6 3 7 10 3 15-4 5-14 12-14 12z"></path>183        </svg>184      </div>185    </div>186 187    <div class="title">SWITCH FWD RUNNING SHOES</div>188 189    <div class="meta">190      <span class="price">$140.00</span>191      <span>WOMEN'S PERFORMANCE</span>192    </div>193 194    <button class="size-btn">195      <span>SELECT SIZE</span>196      <svg viewBox="0 0 48 48">197        <path d="M10 24h28M28 12l10 12-10 12"></path>198      </svg>199    </button>200  </div>201 202  <!-- Bottom system bar -->203  <div class="bottom-bar">204    <div class="gesture-pill"></div>205  </div>206 207</div>208</body>209</html>