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>Item Detail Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #000; color: #fff;12  }13 14  /* Header */15  .header { height: 120px; padding: 0 32px; display: flex; align-items: center; }16  .burger { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }17  .header-title { font-size: 44px; font-weight: 600; margin-left: 18px; }18  .action-icons { margin-left: auto; display: flex; gap: 20px; }19  .icon-btn { width: 92px; height: 92px; border-radius: 50%; background: #222; display: flex; align-items: center; justify-content: center; }20  .icon-btn svg { width: 40px; height: 40px; fill: #fff; }21 22  /* Hero image area */23  .hero { position: relative; margin: 8px 24px 0; }24  .hero .img {25    height: 980px; background: #E0E0E0; border: 1px solid #BDBDBD;26    display: flex; justify-content: center; align-items: center; color: #757575; font-size: 36px; border-radius: 8px;27  }28  .ribbon {29    position: absolute; left: 90px; top: 52px;30    background: #C8102E; color: #fff; font-weight: 700; font-size: 32px;31    padding: 18px 24px; border-radius: 12px;32  }33  .counter {34    position: absolute; right: 30px; top: 58px;35    background: #6B6B6B; color: #fff; font-size: 28px;36    padding: 14px 20px; border-radius: 10px;37  }38  .fav {39    position: absolute; right: 18px; bottom: 18px;40    width: 120px; height: 120px; border-radius: 50%; background: #1f1f1f;41    display: flex; align-items: center; justify-content: center;42  }43  .fav svg { width: 52px; height: 52px; stroke: #fff; fill: none; stroke-width: 3.5; }44 45  .dots { display: flex; justify-content: center; gap: 12px; margin: 18px 0 10px; }46  .dot { width: 14px; height: 14px; background: #555; border-radius: 50%; }47 48  /* Content */49  .content { padding: 0 40px; }50  .title { font-size: 56px; font-weight: 800; line-height: 1.2; margin: 18px 0 26px; }51 52  .seller { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 18px; }53  .store-icon { width: 52px; height: 52px; background: #222; border-radius: 12px; display: flex; align-items: center; justify-content: center; }54  .store-icon svg { width: 34px; height: 34px; fill: #fff; }55  .seller-text { flex: 1; }56  .seller-text .name { font-size: 32px; }57  .seller-text .feedback { font-size: 30px; color: #9fd; text-decoration: underline; }58  .arrow { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }59  .arrow svg { width: 26px; height: 26px; fill: #fff; }60 61  .price { font-size: 56px; font-weight: 800; margin: 20px 0 6px; }62  .shipping { font-size: 32px; color: #ccc; font-weight: 500; }63 64  .delivery { font-size: 34px; margin: 22px 0 24px; }65 66  .row { display: flex; align-items: center; justify-content: space-between; margin: 16px 0; }67  .label { color: #bdbdbd; font-size: 30px; }68  .value { font-size: 32px; }69  .info { width: 34px; height: 34px; border-radius: 50%; background: #2a2a2a; display: inline-flex; align-items: center; justify-content: center; margin-left: 8px; color: #ddd; font-size: 20px; }70 71  .quantity { margin-top: 22px; align-items: flex-start; }72  .qty-left { width: 50%; }73  .qty-left .small { color: #bdbdbd; font-size: 28px; margin-top: 6px; }74  .qty-select {75    width: 420px; height: 120px; border-radius: 16px; background: #111; border: 1px solid #333;76    display: flex; align-items: center; justify-content: space-between; padding: 0 28px; color: #fff; font-size: 36px;77  }78  .caret { width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 16px solid #fff; }79 80</style>81</head>82<body>83<div id="render-target">84 85  <!-- Header -->86  <div class="header">87    <div class="burger">88      <svg viewBox="0 0 24 24">89        <rect x="3" y="5" width="18" height="2" fill="#fff"></rect>90        <rect x="3" y="11" width="18" height="2" fill="#fff"></rect>91        <rect x="3" y="17" width="18" height="2" fill="#fff"></rect>92      </svg>93    </div>94    <div class="header-title">Item</div>95    <div class="action-icons">96      <div class="icon-btn">97        <!-- Search -->98        <svg viewBox="0 0 24 24">99          <circle cx="11" cy="11" r="7.5"></circle>100          <rect x="17" y="17" width="6" height="2" transform="rotate(45 17 17)"></rect>101        </svg>102      </div>103      <div class="icon-btn">104        <!-- Cart -->105        <svg viewBox="0 0 24 24">106          <path d="M7 7h10l-1 10H8L7 7z"></path>107          <circle cx="9" cy="20" r="2"></circle>108          <circle cx="15" cy="20" r="2"></circle>109        </svg>110      </div>111      <div class="icon-btn">112        <!-- Share -->113        <svg viewBox="0 0 24 24">114          <path d="M18 8l-6-4v3H6v2h6v3z"></path>115          <path d="M6 12h12v2H6z"></path>116        </svg>117      </div>118      <div class="icon-btn">119        <!-- More -->120        <svg viewBox="0 0 24 24">121          <circle cx="5" cy="12" r="2"></circle>122          <circle cx="12" cy="12" r="2"></circle>123          <circle cx="19" cy="12" r="2"></circle>124        </svg>125      </div>126    </div>127  </div>128 129  <!-- Main Image -->130  <div class="hero">131    <div class="img">[IMG: iPhone 14 Pro Max photo]</div>132    <div class="ribbon">19 watched in the last 24 hours</div>133    <div class="counter">1 of 2</div>134    <div class="fav">135      <svg viewBox="0 0 24 24">136        <path d="M12 21s-7-4.35-7-9a4.5 4.5 0 019 0 4.5 4.5 0 019 0c0 4.65-7 9-7 9z"></path>137      </svg>138    </div>139  </div>140 141  <!-- Carousel dots -->142  <div class="dots">143    <div class="dot"></div>144    <div class="dot"></div>145  </div>146 147  <!-- Details -->148  <div class="content">149    <div class="title">iPhone 14 Pro Max - Unlocked - 128GB - Black - Excellent</div>150 151    <div class="seller">152      <div class="store-icon">153        <svg viewBox="0 0 24 24">154          <path d="M3 10l3-5h12l3 5H3z"></path>155          <path d="M4 10h16v10H4z"></path>156        </svg>157      </div>158      <div class="seller-text">159        <div class="name">buybackboss (11826)</div>160        <div class="feedback">99.2% positive feedback</div>161      </div>162      <div class="arrow">163        <svg viewBox="0 0 24 24">164          <path d="M9 6l6 6-6 6"></path>165        </svg>166      </div>167    </div>168 169    <div class="price">$975.00 <span class="shipping">+ $42.69 Shipping</span></div>170 171    <div class="delivery">Est. delivery Mon, Jul 24 - Thu, Aug 10</div>172 173    <div class="row">174      <div class="label">Condition</div>175      <div class="value">Excellent - Refurbished <span class="info">i</span></div>176    </div>177 178    <div class="row quantity">179      <div class="qty-left">180        <div class="label">Quantity</div>181        <div class="small">4 available</div>182      </div>183      <div class="qty-select">184        <span>1</span>185        <span class="caret"></span>186      </div>187    </div>188  </div>189 190</div>191</body>192</html>