GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Report Item UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #f4f4f4;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 90px;23    background: #000;24    color: #fff;25    font-size: 32px;26    display: flex;27    align-items: center;28    padding: 0 32px;29    box-sizing: border-box;30  }31  .status-icons {32    margin-left: auto;33    display: flex;34    align-items: center;35    gap: 22px;36    font-size: 28px;37    opacity: 0.9;38  }39  .status-dot {40    width: 12px; height: 12px; background: #fff; border-radius: 50%;41    display: inline-block;42  }43 44  /* Header */45  .header {46    position: absolute;47    top: 90px;48    left: 0;49    width: 1080px;50    height: 180px;51    background: #000;52    display: flex;53    align-items: center;54    padding: 0 36px;55    box-sizing: border-box;56    color: #fff;57  }58  .close-icon {59    width: 88px; height: 88px;60    display: inline-flex; justify-content: center; align-items: center;61    margin-right: 24px;62  }63  .header-title {64    font-size: 60px;65    font-weight: 700;66    letter-spacing: 0.2px;67  }68 69  /* Watermark title */70  .watermark {71    position: absolute;72    top: 290px;73    left: 36px;74    font-size: 90px;75    color: rgba(0,0,0,0.08);76    font-weight: 600;77  }78 79  /* Card */80  .card {81    position: absolute;82    top: 420px;83    left: 36px;84    width: 1008px;85    background: #1E1E1E;86    border-radius: 18px;87    box-shadow: 8px 10px 0 rgba(0,0,0,0.35);88    color: #fff;89    padding: 34px;90    box-sizing: border-box;91  }92 93  .item-row {94    display: flex;95    gap: 28px;96    align-items: flex-start;97  }98  .img-box {99    width: 230px;100    height: 230px;101    background: #E0E0E0;102    border: 1px solid #BDBDBD;103    color: #757575;104    display: flex; justify-content: center; align-items: center;105    font-size: 24px; text-align: center;106  }107  .item-info {108    flex: 1;109  }110  .item-title {111    font-size: 34px;112    line-height: 44px;113    margin-bottom: 12px;114  }115  .muted {116    color: #9E9E9E;117    font-size: 28px;118    line-height: 38px;119  }120  .muted .value {121    color: #CFCFCF;122  }123  .divider {124    margin: 24px 0 28px;125    height: 1px; background: #494949;126  }127 128  .field-label {129    font-size: 28px;130    margin-bottom: 12px;131    color: #EAEAEA;132  }133  .select {134    position: relative;135    height: 96px;136    border-radius: 12px;137    background: #222;138    border: 2px solid #5A5A5A;139    display: flex; align-items: center;140    padding: 0 24px;141    font-size: 28px;142    color: #CFCFCF;143    box-sizing: border-box;144  }145  .select.highlight {146    border-color: #FFFFFF;147  }148  .select svg {149    position: absolute;150    right: 24px;151    width: 32px; height: 32px;152    fill: #BEBEBE;153  }154 155  .button {156    margin-top: 34px;157    width: 940px;158    height: 96px;159    background: #173a6e;160    border-radius: 12px;161    color: #9FB1CC;162    font-size: 34px;163    font-weight: 700;164    display: flex; justify-content: center; align-items: center;165    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.35);166  }167 168  /* Bottom navigation bar */169  .bottom-bar {170    position: absolute;171    bottom: 0;172    left: 0;173    width: 1080px;174    height: 120px;175    background: #000;176    display: flex; justify-content: center; align-items: center;177  }178  .home-indicator {179    width: 200px; height: 12px; background: #E0E0E0; border-radius: 10px;180    opacity: 0.8;181  }182</style>183</head>184<body>185<div id="render-target">186 187  <div class="status-bar">188    4:56189    <div class="status-icons">190      <span class="status-dot"></span>191      <span>LR</span>192      <span class="status-dot"></span>193      <span>°</span>194      <span>95%</span>195    </div>196  </div>197 198  <div class="header">199    <div class="close-icon">200      <svg viewBox="0 0 24 24" width="72" height="72">201        <circle cx="12" cy="12" r="11" stroke="#fff" stroke-width="2" fill="none"></circle>202        <path d="M6 6 L18 18 M18 6 L6 18" stroke="#fff" stroke-width="2" />203      </svg>204    </div>205    <div class="header-title">Report this item</div>206  </div>207 208  <div class="watermark">File a report</div>209 210  <div class="card">211    <div class="item-row">212      <div class="img-box">[IMG: Brown leather moccasins]</div>213      <div class="item-info">214        <div class="item-title">Clarks Originals Womens Wallabee Moccasin Cup Brown Leather Shoes</div>215        <div class="muted">Item no: <span class="value">155608186658</span></div>216        <div class="muted">Seller: <span class="value">clarks_official</span></div>217      </div>218    </div>219 220    <div class="divider"></div>221 222    <div class="field">223      <div class="field-label">Report Category</div>224      <div class="select highlight">225        Prohibited and restricted items226        <svg viewBox="0 0 24 24">227          <path d="M6 9 L12 15 L18 9" />228        </svg>229      </div>230    </div>231 232    <div class="field" style="margin-top:24px;">233      <div class="field-label">Reason for Report</div>234      <div class="select">235        Select from a list of reporting reasons236        <svg viewBox="0 0 24 24">237          <path d="M6 9 L12 15 L18 9" />238        </svg>239      </div>240    </div>241 242    <div class="field" style="margin-top:24px;">243      <div class="field-label">Detailed Reason</div>244      <div class="select">245        Select from a list of detailed reporting reason246        <svg viewBox="0 0 24 24">247          <path d="M6 9 L12 15 L18 9" />248        </svg>249      </div>250    </div>251 252    <div class="button">Continue</div>253  </div>254 255  <div class="bottom-bar">256    <div class="home-indicator"></div>257  </div>258 259</div>260</body>261</html>