GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Report this item - UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ececec;14  }15 16  /* Header */17  .header {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 220px;23    background: #000;24    color: #fff;25  }26  .close-wrap {27    position: absolute;28    left: 28px;29    top: 60px;30    width: 96px;31    height: 96px;32    border-radius: 50%;33    background: rgba(255,255,255,0.08);34    display: flex;35    align-items: center;36    justify-content: center;37  }38  .header-title {39    position: absolute;40    left: 160px;41    top: 80px;42    font-size: 64px;43    font-weight: 700;44    letter-spacing: 0.2px;45  }46 47  /* Watermark subtitle */48  .watermark {49    position: absolute;50    top: 240px;51    left: 34px;52    font-size: 92px;53    color: #dcdcdc;54    opacity: 0.5;55    font-weight: 500;56  }57 58  /* Card */59  .card {60    position: absolute;61    left: 28px;62    top: 380px;63    width: 1024px;64    background: #1f1f1f;65    color: #fff;66    border-radius: 18px;67    box-shadow: 0 8px 0 rgba(0,0,0,0.35), 0 24px 40px rgba(0,0,0,0.4);68    padding: 36px;69  }70 71  .product-row {72    display: flex;73    gap: 34px;74    align-items: center;75  }76  .img-ph {77    width: 230px;78    height: 230px;79    background: #E0E0E0;80    border: 1px solid #BDBDBD;81    display: flex;82    align-items: center;83    justify-content: center;84    color: #757575;85    font-size: 24px;86    border-radius: 6px;87  }88  .prod-info {89    flex: 1;90  }91  .prod-title {92    font-size: 38px;93    line-height: 1.25;94    margin-bottom: 18px;95    font-weight: 600;96  }97  .meta {98    font-size: 30px;99    color: #b0b0b0;100    margin: 6px 0;101  }102  .meta span {103    color: #d6d6d6;104    font-weight: 500;105  }106 107  .divider {108    height: 1px;109    background: #3a3a3a;110    margin: 28px 0 24px;111  }112 113  /* Form fields */114  .field {115    margin-bottom: 36px;116  }117  .label {118    font-size: 34px;119    color: #e8e8e8;120    margin-bottom: 14px;121  }122  .select {123    position: relative;124    height: 110px;125    border-radius: 12px;126    background: #141414;127    border: 2px solid #5a5a5a;128    display: flex;129    align-items: center;130    padding: 0 24px;131    color: #bfbfbf;132    font-size: 32px;133  }134  .select .placeholder {135    opacity: 0.95;136  }137  .select svg {138    position: absolute;139    right: 24px;140    width: 36px;141    height: 36px;142    fill: #9e9e9e;143  }144 145  .btn {146    margin-top: 28px;147    width: 952px;148    height: 120px;149    background: #173763;150    color: #cdd6e6;151    font-size: 38px;152    font-weight: 700;153    border-radius: 14px;154    display: flex;155    align-items: center;156    justify-content: center;157    box-shadow: 0 6px 0 rgba(0,0,0,0.35);158  }159 160  /* Bottom system bar mimic */161  .sysbar {162    position: absolute;163    bottom: 0;164    left: 0;165    width: 1080px;166    height: 160px;167    background: #000;168  }169  .home-indicator {170    position: absolute;171    bottom: 30px;172    left: 50%;173    transform: translateX(-50%);174    width: 220px;175    height: 16px;176    background: #dcdcdc;177    border-radius: 10px;178    opacity: 0.9;179  }180</style>181</head>182<body>183<div id="render-target">184 185  <!-- Header -->186  <div class="header">187    <div class="close-wrap" aria-label="Close">188      <svg viewBox="0 0 24 24" width="48" height="48">189        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#fff" stroke-width="2.4" stroke-linecap="round" fill="none"></path>190      </svg>191    </div>192    <div class="header-title">Report this item</div>193  </div>194 195  <!-- Watermark -->196  <div class="watermark">File a report</div>197 198  <!-- Card -->199  <div class="card">200    <div class="product-row">201      <div class="img-ph">[IMG: Brown Leather Shoe]</div>202      <div class="prod-info">203        <div class="prod-title">204          Clarks Originals Womens Wallabee<br>205          Moccasin Cup Brown Leather Shoes206        </div>207        <div class="meta">Item no: <span>155608186658</span></div>208        <div class="meta">Seller: <span>clarks_official</span></div>209      </div>210    </div>211 212    <div class="divider"></div>213 214    <div class="field">215      <div class="label">Report Category</div>216      <div class="select">217        <div class="placeholder">Select from a list of report categories</div>218        <svg viewBox="0 0 24 24">219          <path d="M6 9l6 6 6-6" />220        </svg>221      </div>222    </div>223 224    <div class="field">225      <div class="label">Reason for Report</div>226      <div class="select">227        <div class="placeholder">Select from a list of reporting reasons</div>228        <svg viewBox="0 0 24 24">229          <path d="M6 9l6 6 6-6" />230        </svg>231      </div>232    </div>233 234    <div class="field">235      <div class="label">Detailed Reason</div>236      <div class="select">237        <div class="placeholder">Select from a list of detailed reporting reason</div>238        <svg viewBox="0 0 24 24">239          <path d="M6 9l6 6 6-6" />240        </svg>241      </div>242    </div>243 244    <div class="btn">Continue</div>245  </div>246 247  <!-- Bottom System Bar -->248  <div class="sysbar">249    <div class="home-indicator"></div>250  </div>251</div>252</body>253</html>