GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Product Page - Derby Shoes</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #0f0f10; color: #f3f3f3;12  }13 14  /* Global helpers */15  .row { display: flex; align-items: center; }16  .space { height: 24px; }17  .label { color: #bdbdbd; font-size: 34px; letter-spacing: 1px; }18  .text { font-size: 40px; }19  .title { font-size: 56px; line-height: 1.25; font-weight: 600; margin-top: 20px; }20  .price { font-size: 56px; font-weight: 700; margin: 24px 0; }21  .divider { height: 1px; background: #252527; margin: 0 -40px; }22 23  /* Status bar */24  .status-bar {25    height: 120px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between;26    color: #ffffff; font-weight: 600; font-size: 42px;27  }28  .status-icons { display: flex; align-items: center; gap: 24px; }29  .icon-rect { width: 34px; height: 34px; border: 2px solid #eaeaea; border-radius: 6px; opacity: 0.85; }30  .battery { width: 70px; height: 32px; border: 2px solid #eaeaea; border-radius: 6px; position: relative; }31  .battery::after { content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 16px; background: #eaeaea; border-radius: 2px; }32  .battery-fill { position: absolute; left: 3px; top: 4px; height: 24px; width: 48px; background: #7fd772; border-radius: 4px; }33  .percent { font-size: 34px; margin-left: 8px; }34 35  /* Page content */36  .page {37    padding: 24px 40px 36px 40px;38  }39 40  /* Colour selector */41  .colour-line { margin-top: 12px; font-size: 36px; }42  .chip { color: #cfcfcf; }43  .thumbs { display: flex; gap: 28px; margin-top: 24px; }44  .thumb {45    width: 220px; height: 220px; background: #e0e0e0;46    border: 1px solid #bdbdbd; display: flex; justify-content: center; align-items: center;47    color: #757575; font-size: 28px; border-radius: 8px;48  }49  .thumb.active { outline: 6px solid #cfcfcf; }50 51  /* Size dropdown */52  .dropdown {53    margin-top: 30px; background: #141416; border: 1px solid #2a2a2d;54    border-radius: 10px; height: 110px; padding: 0 28px;55    display: flex; align-items: center; justify-content: space-between;56    font-size: 42px;57  }58  .chev {59    width: 26px; height: 26px; border-right: 4px solid #cfcfcf; border-bottom: 4px solid #cfcfcf; transform: rotate(-45deg);60    margin-right: 10px;61  }62 63  /* Add to bag */64  .cta-row { display: flex; align-items: center; gap: 26px; margin-top: 26px; }65  .cta { flex: 1; height: 120px; background: #2f8e44; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 44px; font-weight: 700; letter-spacing: 1px; }66  .fav {67    width: 120px; height: 120px; border-radius: 60px; background: #1b1c1f; border: 1px solid #2a2a2d;68    display: flex; align-items: center; justify-content: center;69  }70  .fav svg { width: 50px; height: 50px; fill: none; stroke: #f1f1f1; stroke-width: 6; }71 72  /* Free delivery card */73  .card {74    margin-top: 28px; border: 1px solid #2a2a2d; border-radius: 12px; padding: 26px 28px; background: #121214;75  }76  .truck { width: 60px; height: 40px; margin-right: 18px; }77  .policy { margin-top: 18px; color: #cfcfcf; font-size: 38px; }78  .policy span { color: #ffffff; font-weight: 600; }79 80  /* Accordion */81  .accordion { margin-top: 34px; border-top: 1px solid #222; }82  .acc-row {83    height: 120px; display: flex; align-items: center; justify-content: space-between;84    border-bottom: 1px solid #222; font-size: 48px; padding: 0 4px;85  }86  .plus {87    width: 48px; height: 48px; position: relative;88  }89  .plus::before, .plus::after {90    content: ""; position: absolute; background: #eaeaea;91  }92  .plus::before { width: 48px; height: 6px; top: 21px; left: 0; }93  .plus::after { width: 6px; height: 48px; top: 0; left: 21px; }94 95  /* Recommendation section */96  .recommend { margin-top: 26px; }97  .recommend .head { display: flex; align-items: baseline; justify-content: space-between; }98  .recommend .head .left { font-size: 46px; font-weight: 700; }99  .recommend .head .right { font-size: 36px; color: #cfcfcf; }100  .carousel { margin-top: 18px; display: flex; gap: 24px; }101  .card-item { width: 420px; height: 520px; border-radius: 12px; background: #e0e0e0; border: 1px solid #bdbdbd; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px; overflow: hidden; }102 103  /* Bottom gesture bar */104  .gesture {105    position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);106    width: 640px; height: 12px; background: #d9d9d9; border-radius: 8px; opacity: 0.6;107  }108</style>109</head>110<body>111<div id="render-target">112  <!-- Status Bar -->113  <div class="status-bar">114    <div class="row" style="gap:14px;">115      <div style="font-size:42px;">7:49</div>116      <div class="icon-rect"></div>117      <div class="icon-rect"></div>118      <div class="icon-rect"></div>119      <div class="icon-rect"></div>120    </div>121    <div class="status-icons">122      <div class="battery"><div class="battery-fill"></div></div>123      <div class="percent">72%</div>124    </div>125  </div>126 127  <!-- Content -->128  <div class="page">129    <div class="colour-line">130      <span class="chip">COLOUR:</span>131      <span class="text" style="margin-left: 14px;">Mid Brown</span>132    </div>133 134    <div class="thumbs">135      <div class="thumb">[IMG: Black formal shoe]</div>136      <div class="thumb active">[IMG: Brown derby on legs]</div>137    </div>138 139    <div class="title">New Look plain formal derby in brown</div>140    <div class="price">£29.99</div>141 142    <div class="dropdown">143      <div>SIZE</div>144      <div class="row">145        <div class="chev"></div>146      </div>147    </div>148 149    <div class="cta-row">150      <div class="cta">ADD TO BAG</div>151      <div class="fav">152        <svg viewBox="0 0 24 24">153          <path d="M12 21s-6-4.35-8.5-7.05C1.5 12.1 2.2 9.2 4.6 8c2.1-1.1 4.1-.4 5.4 1.1 1.3-1.5 3.3-2.2 5.4-1.1 2.4 1.2 3.1 4.1 1.1 5.95C18 16.65 12 21 12 21z"/>154        </svg>155      </div>156    </div>157 158    <div class="card">159      <div class="row">160        <svg class="truck" viewBox="0 0 64 40">161          <rect x="2" y="10" width="34" height="18" fill="none" stroke="#eaeaea" stroke-width="3"></rect>162          <rect x="38" y="16" width="18" height="12" fill="none" stroke="#eaeaea" stroke-width="3"></rect>163          <circle cx="14" cy="32" r="4" fill="#eaeaea"></circle>164          <circle cx="48" cy="32" r="4" fill="#eaeaea"></circle>165        </svg>166        <div class="text" style="font-size: 42px;">Free Delivery</div>167      </div>168      <div class="policy">View our <span>Delivery & Returns Policy</span></div>169    </div>170 171    <div class="accordion">172      <div class="acc-row">173        <div>Product details</div>174        <div class="plus"></div>175      </div>176      <div class="acc-row">177        <div>Brand</div>178        <div class="plus"></div>179      </div>180      <div class="acc-row">181        <div>Look after me</div>182        <div class="plus"></div>183      </div>184      <div class="acc-row">185        <div>About me</div>186        <div class="plus"></div>187      </div>188    </div>189 190    <div class="recommend">191      <div class="head">192        <div class="left">YOU MIGHT ALSO LIKE</div>193        <div class="right">16 items</div>194      </div>195      <div class="carousel">196        <div class="card-item">[IMG: Casual outfit close-up]</div>197        <div class="card-item">[IMG: Black trousers product]</div>198        <div class="card-item">[IMG: More recommendations]</div>199      </div>200    </div>201  </div>202 203  <div class="gesture"></div>204</div>205</body>206</html>