GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Similar Items UI</title>6<style>7  body { margin:0; padding:0; background: transparent; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#F3F3F3; font-family: Arial, Helvetica, sans-serif; color:#222;11    box-sizing: border-box;12  }13 14  .statusbar {15    height:120px; background:#E6E6E6;16    display:flex; align-items:center; justify-content:space-between;17    padding:0 40px; border-bottom:1px solid #D0D0D0;18    font-size:36px; color:#333;19  }20  .status-icons { display:flex; align-items:center; gap:24px; }21  .icon { width:48px; height:48px; }22 23  .nav {24    height:110px; display:flex; align-items:center; justify-content:space-between;25    padding:0 40px; color:#333;26  }27  .nav .left, .nav .right { display:flex; align-items:center; gap:32px; }28 29  .hero {30    height:640px; border-top:1px solid #BDBDBD; border-bottom:1px solid #BDBDBD;31    display:flex; align-items:center; justify-content:center;32  }33  .hero .img {34    width:100%; height:100%; background:#E0E0E0; color:#757575;35    border:0; display:flex; align-items:center; justify-content:center;36  }37 38  .similar-header {39    background:#fff; height:120px; display:flex; align-items:center;40    padding:0 40px; border-top:1px solid #CFCFCF; border-bottom:1px solid #CFCFCF;41    font-size:36px; letter-spacing:0.5px;42  }43  .similar-header .title { font-weight:700; }44  .similar-header .count { margin-left:16px; color:#777; font-size:32px; }45 46  .grid {47    display:grid; grid-template-columns:1fr 1fr;48    background:#fff;49  }50  .card {51    border-bottom:1px solid #DADADA; position:relative; padding-bottom:20px;52  }53  .card:nth-child(odd) { border-right:1px solid #DADADA; }54 55  .card .img {56    height:520px; margin:40px; background:#E0E0E0; border:1px solid #BDBDBD;57    display:flex; align-items:center; justify-content:center; color:#757575;58    position:relative;59  }60  .plus {61    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);62    width:88px; height:88px; border-radius:50%; background:rgba(255,255,255,0.92);63    border:1px solid #C8C8C8; display:flex; align-items:center; justify-content:center;64  }65 66  .details { padding:0 40px 30px 40px; font-size:32px; line-height:1.35; }67  .title-row { display:flex; align-items:center; justify-content:space-between; gap:20px; font-weight:600; }68  .bookmark { width:40px; height:40px; }69  .price-row { display:flex; align-items:center; gap:20px; margin-top:10px; color:#666; }70  .old { text-decoration:line-through; color:#888; }71  .tags { display:flex; gap:12px; margin-top:10px; }72  .tag {73    background:#F3E64C; color:#222; padding:10px 14px; border-radius:6px;74    font-weight:600; font-size:30px; border:1px solid #E0D64A;75  }76 77  .assistant-fab {78    position:absolute; left:30px; bottom:540px; width:120px; height:120px;79    border-radius:60px; background:#E0E0E0; border:1px solid #BDBDBD;80    display:flex; align-items:center; justify-content:center; color:#757575;81    box-shadow:0 4px 10px rgba(0,0,0,0.15);82  }83 84  .home-indicator {85    position:absolute; bottom:34px; left:50%; transform:translateX(-50%);86    width:240px; height:10px; background:#B3B3B3; border-radius:6px;87  }88</style>89</head>90<body>91<div id="render-target">92 93  <div class="statusbar">94    <div>8:49</div>95    <div class="status-icons">96      <svg class="icon" viewBox="0 0 24 24">97        <circle cx="12" cy="12" r="9" fill="none" stroke="#666" stroke-width="2"></circle>98      </svg>99      <svg class="icon" viewBox="0 0 24 24">100        <rect x="3" y="8" width="18" height="9" rx="2" fill="none" stroke="#666" stroke-width="2"></rect>101        <path d="M6 11h12" stroke="#666" stroke-width="2"></path>102      </svg>103      <svg class="icon" viewBox="0 0 24 24">104        <path d="M4 12l6-6v12z" fill="none" stroke="#666" stroke-width="2"></path>105        <path d="M14 6h6v12h-6" fill="none" stroke="#666" stroke-width="2"></path>106      </svg>107      <svg class="icon" viewBox="0 0 24 24">108        <path d="M3 15c2-4 6-7 9-7s7 3 9 7" fill="none" stroke="#666" stroke-width="2"></path>109        <circle cx="12" cy="15" r="2" fill="#666"></circle>110      </svg>111      <svg class="icon" viewBox="0 0 24 24">112        <path d="M6 7h12l-1 12H7L6 7z" fill="none" stroke="#666" stroke-width="2"></path>113      </svg>114    </div>115  </div>116 117  <div class="nav">118    <div class="left">119      <svg class="icon" viewBox="0 0 24 24">120        <path d="M5 5L19 19M19 5L5 19" stroke="#222" stroke-width="2" stroke-linecap="round"></path>121      </svg>122    </div>123    <div class="right">124      <svg class="icon" viewBox="0 0 24 24">125        <circle cx="6" cy="12" r="2" fill="#333"></circle>126        <circle cx="18" cy="6" r="2" fill="#333"></circle>127        <circle cx="18" cy="18" r="2" fill="#333"></circle>128        <path d="M6 12l10-6M6 12l10 6" stroke="#333" stroke-width="2" fill="none"></path>129      </svg>130      <svg class="icon" viewBox="0 0 24 24">131        <path d="M6 4h12v16l-6-4-6 4z" fill="none" stroke="#333" stroke-width="2"></path>132      </svg>133    </div>134  </div>135 136  <div class="hero">137    <div class="img">138      [IMG: Model wearing black shearling jacket]139    </div>140  </div>141 142  <div class="similar-header">143    <div class="title">SIMILAR ITEMS</div>144    <div class="count">10 items</div>145  </div>146 147  <div class="grid">148    <div class="card">149      <div class="img">150        [IMG: Distressed faux leather bomber]151        <div class="plus">152          <svg viewBox="0 0 24 24" width="42" height="42">153            <path d="M12 5v14M5 12h14" stroke="#333" stroke-width="2" stroke-linecap="round"></path>154          </svg>155        </div>156      </div>157      <div class="details">158        <div class="title-row">159          <div>DISTRESSED FAUX LEATHER B...</div>160          <svg class="bookmark" viewBox="0 0 24 24">161            <path d="M6 4h12v16l-6-4-6 4z" fill="none" stroke="#333" stroke-width="2"></path>162          </svg>163        </div>164        <div class="price-row">165          <div class="old">89.90 USD</div>166        </div>167        <div class="tags">168          <span class="tag">-33%</span>169          <span class="tag">59.99 USD</span>170        </div>171      </div>172    </div>173 174    <div class="card">175      <div class="img">176        [IMG: Faux leather peplum jacket]177        <div class="plus">178          <svg viewBox="0 0 24 24" width="42" height="42">179            <path d="M12 5v14M5 12h14" stroke="#333" stroke-width="2" stroke-linecap="round"></path>180          </svg>181        </div>182      </div>183      <div class="details">184        <div class="title-row">185          <div>FAUX LEATHER PEPLUM JACKET</div>186          <svg class="bookmark" viewBox="0 0 24 24">187            <path d="M6 4h12v16l-6-4-6 4z" fill="none" stroke="#333" stroke-width="2"></path>188          </svg>189        </div>190        <div class="price-row">191          <div class="old">69.90 USD</div>192        </div>193        <div class="tags">194          <span class="tag">-34%</span>195          <span class="tag">45.99 USD</span>196        </div>197      </div>198    </div>199 200    <div class="card">201      <div class="img">202        [IMG: Faux leather jacket ZW collection]203        <div class="plus">204          <svg viewBox="0 0 24 24" width="42" height="42">205            <path d="M12 5v14M5 12h14" stroke="#333" stroke-width="2" stroke-linecap="round"></path>206          </svg>207        </div>208      </div>209      <div class="details">210        <div class="title-row">211          <div>FAUX LEATHER JACKET ZW C...</div>212          <svg class="bookmark" viewBox="0 0 24 24">213            <path d="M6 4h12v16l-6-4-6 4z" fill="none" stroke="#333" stroke-width="2"></path>214          </svg>215        </div>216        <div class="price-row">217          <div class="old">139.00 USD</div>218        </div>219        <div class="tags">220          <span class="tag">-42%</span>221          <span class="tag">79.99 USD</span>222        </div>223      </div>224    </div>225 226    <div class="card">227      <div class="img">228        [IMG: Combination puffer jacket]229        <div class="plus">230          <svg viewBox="0 0 24 24" width="42" height="42">231            <path d="M12 5v14M5 12h14" stroke="#333" stroke-width="2" stroke-linecap="round"></path>232          </svg>233        </div>234      </div>235      <div class="details">236        <div class="title-row">237          <div>COMBINATION PUFFER JACKET</div>238          <svg class="bookmark" viewBox="0 0 24 24">239            <path d="M6 4h12v16l-6-4-6 4z" fill="none" stroke="#333" stroke-width="2"></path>240          </svg>241        </div>242        <div class="price-row">243          <div>59.90 USD</div>244        </div>245      </div>246    </div>247  </div>248 249  <div class="assistant-fab">Assistant</div>250  <div class="home-indicator"></div>251</div>252</body>253</html>