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>Report this item UI</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    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #0b0b0b;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 90px;24    color: #fff;25    padding: 0 40px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    font-weight: 600;30    font-size: 34px;31    background: #000;32  }33  .status-right {34    display: flex;35    align-items: center;36    gap: 22px;37  }38  .status-dots { display: flex; gap: 10px; margin-left: 14px; }39  .dot { width: 12px; height: 12px; background: #fff; border-radius: 50%; opacity: 0.8; }40  .icon {41    width: 38px;42    height: 38px;43    display: inline-block;44  }45 46  /* Header */47  .header {48    position: absolute;49    top: 90px;50    left: 0;51    width: 1080px;52    height: 220px;53    background: #000;54    color: #fff;55    display: flex;56    align-items: center;57    padding: 0 40px;58  }59  .close-btn {60    width: 84px;61    height: 84px;62    border-radius: 42px;63    border: 2px solid #fff;64    display: flex;65    align-items: center;66    justify-content: center;67    margin-right: 24px;68  }69  .header-title {70    font-size: 66px;71    font-weight: 700;72    letter-spacing: 0.5px;73  }74 75  /* Faint background label */76  .faint-label {77    position: absolute;78    top: 290px;79    left: 40px;80    font-size: 80px;81    color: rgba(255,255,255,0.08);82    letter-spacing: 0.2px;83  }84 85  /* Card */86  .card {87    position: absolute;88    top: 360px;89    left: 40px;90    width: 1000px;91    background: #141414;92    border-radius: 16px;93    box-shadow: 0 12px 0 rgba(0,0,0,0.5), 0 20px 40px rgba(0,0,0,0.6);94    color: #e6e6e6;95    padding: 28px;96  }97  .item-row {98    display: flex;99    gap: 26px;100    align-items: flex-start;101  }102  .img-placeholder {103    width: 220px;104    height: 220px;105    background: #E0E0E0;106    border: 1px solid #BDBDBD;107    display: flex;108    justify-content: center;109    align-items: center;110    color: #757575;111    font-size: 26px;112    text-align: center;113    border-radius: 6px;114  }115  .item-info {116    flex: 1;117  }118  .item-title {119    font-size: 40px;120    line-height: 1.25;121    margin-top: 10px;122    margin-bottom: 16px;123    color: #fff;124  }125  .meta {126    font-size: 30px;127    color: #b3b3b3;128    margin-bottom: 6px;129  }130  .divider {131    height: 1px;132    background: #2a2a2a;133    margin: 24px 0 12px;134  }135 136  /* Form sections */137  .field {138    margin: 22px 0;139  }140  .label {141    font-size: 32px;142    color: #d5d5d5;143    margin-bottom: 12px;144  }145  .select {146    height: 92px;147    background: #1f1f1f;148    border: 1px solid #3a3a3a;149    border-radius: 12px;150    padding: 0 22px;151    display: flex;152    align-items: center;153    justify-content: space-between;154    color: #eaeaea;155    font-size: 34px;156  }157  .select--highlight {158    border: 2px solid #ffffff;159    box-shadow: 0 0 0 3px rgba(255,255,255,0.08) inset;160  }161  .select-text { opacity: 0.95; }162  .caret {163    width: 28px; height: 28px;164  }165 166  .policy {167    font-size: 28px;168    color: #cfcfcf;169    margin: 18px 0;170  }171  .policy a { color: #2a7bd8; text-decoration: none; }172 173  .textarea {174    width: 100%;175    height: 280px;176    background: #1f1f1f;177    border: 1px solid #3a3a3a;178    border-radius: 12px;179    padding: 22px;180    color: #eaeaea;181    font-size: 32px;182    line-height: 1.4;183    box-sizing: border-box;184  }185  .helper {186    font-size: 26px;187    color: #a9a9a9;188    margin-top: 10px;189  }190 191  .submit {192    margin-top: 34px;193    width: 100%;194    height: 104px;195    background: #0a5db8;196    color: #fff;197    font-size: 36px;198    font-weight: 700;199    border: none;200    border-radius: 12px;201    box-shadow: 0 6px 0 rgba(0,0,0,0.35);202  }203 204  /* bottom safe area bar */205  .nav-indicator {206    position: absolute;207    bottom: 20px;208    left: 50%;209    transform: translateX(-50%);210    width: 300px;211    height: 10px;212    background: #d9d9d9;213    border-radius: 10px;214    opacity: 0.9;215  }216</style>217</head>218<body>219<div id="render-target">220 221  <!-- Status bar -->222  <div class="status-bar">223    <div>5:46224      <span class="status-dots">225        <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>226      </span>227    </div>228    <div class="status-right">229      <!-- Wi-Fi -->230      <svg class="icon" viewBox="0 0 24 24" fill="#fff">231        <path d="M2 8c5-5 15-5 20 0l-2 2c-4-4-12-4-16 0L2 8zm4 4c3-3 9-3 12 0l-2 2c-2-2-6-2-8 0l-2-2zm4 4c1-1 3-1 4 0l-2 2-2-2z"/>232      </svg>233      <!-- Battery -->234      <svg class="icon" viewBox="0 0 24 24" fill="#fff">235        <rect x="2" y="6" width="18" height="12" rx="2" ry="2"></rect>236        <rect x="21" y="10" width="2" height="4"></rect>237        <rect x="4" y="8" width="14" height="8" fill="#fff"></rect>238      </svg>239    </div>240  </div>241 242  <!-- Header -->243  <div class="header">244    <div class="close-btn">245      <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round">246        <path d="M5 5l14 14M19 5L5 19"/>247      </svg>248    </div>249    <div class="header-title">Report this item</div>250  </div>251 252  <!-- Faint background text -->253  <div class="faint-label">File a report</div>254 255  <!-- Main Card -->256  <div class="card">257    <div class="item-row">258      <div class="img-placeholder">[IMG: Robot vacuum cleaner]</div>259      <div class="item-info">260        <div class="item-title">FDW Robot Vacuum Cleaner 2000Pa Strong Suction, 4400mAh, Black</div>261        <div class="meta">Item no: <span style="color:#cfcfcf">134742755024</span></div>262        <div class="meta">Seller: <span style="color:#cfcfcf">xpectmoreforless</span></div>263      </div>264    </div>265 266    <div class="divider"></div>267 268    <div class="field">269      <div class="label">Report Category</div>270      <div class="select">271        <span class="select-text">Price gouging</span>272        <svg class="caret" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M6 9l6 6 6-6z"/></svg>273      </div>274    </div>275 276    <div class="field">277      <div class="label">Reason for Report</div>278      <div class="select">279        <span class="select-text">Price gouging</span>280        <svg class="caret" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M6 9l6 6 6-6z"/></svg>281      </div>282    </div>283 284    <div class="field">285      <div class="label">Detailed Reason</div>286      <div class="select select--highlight">287        <span class="select-text">Other</span>288        <svg class="caret" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M6 9l6 6 6-6z"/></svg>289      </div>290    </div>291 292    <div class="policy">Before reporting an item, please review the <a href="#">eBay Listings Policies</a>.</div>293 294    <div class="field">295      <div class="label">Brief Description</div>296      <div class="textarea"></div>297      <div class="helper">100 characters left. Do not include HTML or JavaScript.</div>298    </div>299 300    <button class="submit">Submit report</button>301  </div>302 303  <div class="nav-indicator"></div>304</div>305</body>306</html>