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>Mobile Listing - iPhone 14 Pro Max</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0B0B0B;15    color: #EDEDED;16  }17 18  /* Utility */19  .row { display: flex; align-items: center; }20  .space-between { justify-content: space-between; }21  .muted { color: #A0A0A0; }22  .divider { height: 2px; background: #2A2A2A; margin: 28px 24px; }23 24  /* Header */25  .header { padding: 28px 24px 8px; }26  .title-wrap { display: flex; align-items: center; gap: 22px; }27  .circle-btn {28    width: 96px; height: 96px;29    background: #1A1A1A;30    border-radius: 50%;31    display: flex; align-items: center; justify-content: center;32  }33  .title {34    font-size: 56px;35    font-weight: 800;36    letter-spacing: -0.5px;37  }38  .header-actions { margin-left: auto; display: flex; align-items: center; gap: 18px; }39  .svg-ic { width: 40px; height: 40px; fill: none; stroke: #EDEDED; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }40 41  /* Secondary actions */42  .action-row { padding: 8px 24px 0; display: flex; align-items: center; justify-content: space-between; }43  .link-primary { color: #6BA5FF; font-weight: 600; font-size: 36px; }44  .sort-filter { display: flex; align-items: center; gap: 36px; }45  .sf { color: #6BA5FF; font-weight: 600; font-size: 36px; display: inline-flex; align-items: center; gap: 10px; }46 47  /* Section heading */48  .section { padding: 28px 24px 0; }49  .section h2 {50    margin: 0 0 18px 0;51    font-size: 52px;52    font-weight: 800;53  }54 55  /* Chips */56  .chips { display: flex; gap: 18px; padding: 8px 0 18px; flex-wrap: wrap; }57  .chip {58    padding: 18px 30px;59    border: 2px solid #3B3B3B;60    color: #EDEDED;61    border-radius: 40px;62    font-size: 34px;63    background: #151515;64  }65 66  /* Cards */67  .card {68    margin: 18px 16px 22px;69    background: #1A1A1A;70    border-radius: 18px;71    padding: 24px;72    display: flex;73    gap: 24px;74  }75  .thumb {76    position: relative;77    width: 300px; height: 300px;78    border-radius: 28px;79    overflow: hidden;80    flex: 0 0 300px;81    background: #E0E0E0;82    border: 1px solid #BDBDBD;83    display: flex; align-items: center; justify-content: center;84    color: #555;85    font-weight: 600;86    text-align: center;87    padding: 10px;88  }89  .wish {90    position: absolute;91    right: 12px; top: 12px;92    width: 78px; height: 78px;93    background: rgba(0,0,0,0.6);94    border-radius: 50%;95    display: flex; align-items: center; justify-content: center;96  }97  .heart { width: 36px; height: 36px; fill: #FFFFFF; }98 99  .card-body { flex: 1; min-width: 0; }100  .card-title {101    font-size: 40px;102    font-weight: 700;103    line-height: 1.2;104    margin: 4px 0 10px;105  }106  .sub { color: #B9B9B9; font-size: 30px; margin-bottom: 8px; }107  .stars { color: #FFFFFF; font-size: 36px; letter-spacing: 2px; margin: 8px 0; }108  .price { font-size: 50px; font-weight: 800; margin: 6px 0; }109  .note { color: #B9B9B9; font-size: 30px; line-height: 1.3; }110 111  .sponsored { color: #8C8C8C; font-size: 30px; padding: 8px 8px 6px 16px; }112 113  /* Sticky bottom results bar */114  .results-bar {115    position: absolute;116    left: 0;117    right: 0;118    bottom: 120px;119    height: 96px;120    background: rgba(18,18,18,0.95);121    border-top: 2px solid #2A2A2A;122    display: flex; align-items: center; justify-content: center;123    font-size: 36px; font-weight: 700;124  }125  .home-indicator {126    position: absolute; left: 50%; transform: translateX(-50%);127    bottom: 40px;128    width: 420px; height: 10px;129    border-radius: 8px;130    background: #6B6B6B;131    opacity: 0.9;132  }133</style>134</head>135<body>136<div id="render-target">137 138  <!-- Header -->139  <div class="header">140    <div class="title-wrap" style="justify-content: space-between;">141      <div class="row" style="gap:22px; flex:1;">142        <div class="circle-btn" aria-label="Menu">143          <svg class="svg-ic" viewBox="0 0 24 24">144            <path d="M4 6h16M4 12h16M4 18h12"/>145          </svg>146        </div>147        <div class="title">iPhone 14 Pro Max</div>148      </div>149      <div class="header-actions">150        <div class="circle-btn" aria-label="Search">151          <svg class="svg-ic" viewBox="0 0 24 24">152            <circle cx="11" cy="11" r="7"></circle>153            <path d="M21 21l-4.5-4.5"></path>154          </svg>155        </div>156        <div class="circle-btn" aria-label="Camera">157          <svg class="svg-ic" viewBox="0 0 24 24">158            <path d="M4 7h4l2-3h4l2 3h4v11H4z"></path>159            <circle cx="12" cy="12" r="3.5"></circle>160          </svg>161        </div>162        <div class="circle-btn" aria-label="Cart">163          <svg class="svg-ic" viewBox="0 0 24 24">164            <path d="M3 5h2l2 12h10l2-8H7"></path>165            <circle cx="10" cy="19" r="1.5"></circle>166            <circle cx="16" cy="19" r="1.5"></circle>167          </svg>168        </div>169      </div>170    </div>171  </div>172 173  <!-- Secondary actions -->174  <div class="action-row">175    <div class="link-primary">♡ Save this search</div>176    <div class="sort-filter">177      <div class="sf">Sort ↑↓</div>178      <div class="sf">Filter ⏷</div>179    </div>180  </div>181 182  <!-- Storage chips -->183  <div class="section">184    <h2>Shop by Storage Capacity</h2>185    <div class="chips">186      <div class="chip">256 GB</div>187      <div class="chip">128 GB</div>188      <div class="chip">512 GB</div>189      <div class="chip">1 TB</div>190    </div>191  </div>192 193  <div class="divider"></div>194 195  <!-- Card 1 -->196  <div class="card">197    <div class="thumb">198      [IMG: iPhone 14 Pro Max product gallery]199      <div class="wish" title="Wishlist">200        <svg class="heart" viewBox="0 0 24 24">201          <path d="M12 21s-7-4.35-9.5-7.5A5.5 5.5 0 1 1 12 6.7 5.5 5.5 0 1 1 21.5 13.5C19 16.65 12 21 12 21z"/>202        </svg>203      </div>204    </div>205    <div class="card-body">206      <div class="card-title">Apple iPhone 14 Pro Max A16 128GB 256GB 512GB 1TB Unlocked New Sealed</div>207      <div class="sub">Brand New</div>208      <div class="stars">★★★★★ <span class="muted">(3)</span></div>209      <div class="price">$1,429.49 to $2,089.49</div>210      <div class="note">+$18.49 shipping • from South Korea<br>40+ watchers</div>211    </div>212  </div>213  <div class="sponsored">Sponsored</div>214 215  <div class="divider"></div>216 217  <!-- Card 2 -->218  <div class="card">219    <div class="thumb">220      [IMG: iPhone 14 Pro Max - Black front/back]221      <div class="wish" title="Wishlist">222        <svg class="heart" viewBox="0 0 24 24">223          <path d="M12 21s-7-4.35-9.5-7.5A5.5 5.5 0 1 1 12 6.7 5.5 5.5 0 1 1 21.5 13.5C19 16.65 12 21 12 21z"/>224        </svg>225      </div>226    </div>227    <div class="card-body">228      <div class="card-title">iPhone 14 Pro Max - Unlocked - 128GB - Black - Excellent</div>229      <div class="sub">Excellent - Refurbished · Apple iPhone 14 Pro Max · 128 GB</div>230      <div class="stars">★★★★★ <span class="muted">(8)</span></div>231      <div class="price">$975.00</div>232      <div class="note">+$42.69 shipping • from United States<br>eBay Refurbished</div>233    </div>234  </div>235  <div class="sponsored">Sponsored</div>236 237  <!-- Third card header preview (cut at bottom in screenshot) -->238  <div class="divider"></div>239  <div class="card" style="padding-bottom: 10px;">240    <div class="thumb">[IMG: iPhone 14 Pro Max in box]</div>241    <div class="card-body">242      <div class="card-title">Apple iPhone 14 Pro Max Smartphone (A2651) Unlocked - 128GB Black OPEN BOX</div>243      <div class="sub">Open Box · Apple iPhone 14 Pro Max</div>244    </div>245  </div>246 247  <!-- Sticky bottom results and home indicator -->248  <div class="results-bar">863 results</div>249  <div class="home-indicator"></div>250 251</div>252</body>253</html>