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: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F1F1F1;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    background: #000;25    color: #fff;26  }27  .status-content {28    position: absolute;29    top: 28px;30    left: 36px;31    right: 36px;32    display: flex;33    align-items: center;34    justify-content: space-between;35    font-size: 44px;36    letter-spacing: 0.5px;37  }38  .notif-icons {39    display: flex;40    gap: 18px;41    margin-left: 24px;42  }43  .dot {44    width: 18px;45    height: 18px;46    border-radius: 50%;47    background: #fff;48    opacity: 0.9;49  }50  .right-icons {51    display: flex;52    align-items: center;53    gap: 24px;54  }55  .wifi-icon, .battery-icon {56    display: inline-block;57  }58  .wifi-icon svg, .battery-icon svg {59    width: 60px; height: 40px;60    fill: none; stroke: #fff; stroke-width: 6;61  }62 63  /* Header bar */64  .header {65    position: absolute;66    top: 120px;67    left: 0;68    width: 1080px;69    height: 220px;70    background: #111;71    color: #fff;72  }73  .header-inner {74    position: absolute;75    left: 40px;76    right: 40px;77    top: 54px;78    display: flex;79    align-items: center;80    gap: 28px;81  }82  .close-btn {83    width: 90px;84    height: 90px;85    border-radius: 45px;86    border: 3px solid #fff;87    display: flex;88    align-items: center;89    justify-content: center;90  }91  .close-btn svg { width: 56px; height: 56px; stroke: #fff; stroke-width: 8; }92  .title {93    font-size: 68px;94    font-weight: 700;95  }96 97  /* Background large helper text */98  .bg-helper {99    position: absolute;100    top: 370px;101    left: 40px;102    font-size: 100px;103    color: #E5E5E5;104    opacity: 0.6;105    font-weight: 600;106  }107 108  /* Card */109  .card {110    position: absolute;111    top: 520px;112    left: 40px;113    width: 1000px;114    background: #1C1C1C;115    color: #EFEFEF;116    border-radius: 16px;117    box-shadow: 0 16px 0 #3a3a3a, 0 8px 24px rgba(0,0,0,0.45);118    padding: 32px 32px 40px 32px;119  }120 121  .product-row {122    display: flex;123    gap: 28px;124    align-items: flex-start;125  }126  .img-ph {127    width: 220px;128    height: 220px;129    background: #E0E0E0;130    border: 1px solid #BDBDBD;131    display: flex;132    justify-content: center;133    align-items: center;134    color: #757575;135    font-size: 28px;136    text-align: center;137    border-radius: 6px;138  }139  .prod-info .prod-title {140    font-size: 40px;141    line-height: 1.25;142    font-weight: 600;143    margin-top: 6px;144    margin-bottom: 18px;145  }146  .meta {147    font-size: 30px;148    color: #B5B5B5;149    margin: 6px 0;150  }151 152  .divider {153    margin: 28px 0 18px 0;154    border: none;155    border-top: 2px solid #3A3A3A;156  }157 158  .form-group { margin: 24px 0; }159  .label {160    font-size: 34px;161    color: #DDDDDD;162    margin-bottom: 14px;163  }164  .select {165    position: relative;166    height: 100px;167    border: 2px solid #3E3E3E;168    border-radius: 12px;169    background: #111;170    color: #EDEDED;171    display: flex;172    align-items: center;173    padding: 0 24px;174    font-size: 36px;175    box-shadow: inset 0 0 0 0 rgba(255,255,255,0.1);176  }177  .select.active {178    border-color: #FFFFFF;179    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.15);180  }181  .select .arrow {182    position: absolute;183    right: 20px;184    top: 50%;185    transform: translateY(-50%);186  }187  .select .arrow svg {188    width: 40px; height: 40px; fill: #BFBFBF;189  }190 191  .btn {192    width: 920px;193    height: 110px;194    margin: 34px auto 0 auto;195    background: #0D3D72;196    color: #C7D6EA;197    font-size: 40px;198    font-weight: 700;199    border-radius: 14px;200    display: flex;201    align-items: center;202    justify-content: center;203    box-shadow: 0 8px 0 #2b2b2b;204  }205 206  /* Bottom gesture bar */207  .gesture-bar {208    position: absolute;209    bottom: 26px;210    left: 0;211    width: 1080px;212    height: 140px;213    background: #000;214  }215  .gesture-pill {216    position: absolute;217    bottom: 42px;218    left: 50%;219    transform: translateX(-50%);220    width: 220px;221    height: 16px;222    background: #DCDCDC;223    border-radius: 10px;224    opacity: 0.9;225  }226</style>227</head>228<body>229<div id="render-target">230 231  <!-- Status bar -->232  <div class="status-bar">233    <div class="status-content">234      <div style="display:flex; align-items:center;">235        <div style="font-weight:600;">5:45</div>236        <div class="notif-icons">237          <div class="dot"></div>238          <div class="dot"></div>239          <div class="dot"></div>240          <div class="dot"></div>241          <div class="dot" style="opacity:.6;"></div>242        </div>243      </div>244      <div class="right-icons">245        <span class="wifi-icon">246          <svg viewBox="0 0 64 40">247            <path d="M6 26c8-8 44-8 52 0"/>248            <path d="M14 32c6-6 30-6 36 0"/>249            <circle cx="32" cy="36" r="3" fill="#fff" stroke="none"/>250          </svg>251        </span>252        <span class="battery-icon">253          <svg viewBox="0 0 70 40">254            <rect x="3" y="8" width="56" height="24" rx="4"></rect>255            <rect x="60" y="15" width="7" height="10" rx="2"></rect>256            <rect x="8" y="12" width="40" height="16" fill="#fff" stroke="none"></rect>257          </svg>258        </span>259      </div>260    </div>261  </div>262 263  <!-- Header bar with title -->264  <div class="header">265    <div class="header-inner">266      <div class="close-btn">267        <svg viewBox="0 0 56 56">268          <line x1="10" y1="10" x2="46" y2="46"></line>269          <line x1="46" y1="10" x2="10" y2="46"></line>270        </svg>271      </div>272      <div class="title">Report this item</div>273    </div>274  </div>275 276  <!-- Background helper text -->277  <div class="bg-helper">File a report</div>278 279  <!-- Card -->280  <div class="card">281    <div class="product-row">282      <div class="img-ph">[IMG: Robot Vacuum]</div>283      <div class="prod-info">284        <div class="prod-title">FDW Robot Vacuum Cleaner 2000Pa Strong Suction, 4400mAh, Black</div>285        <div class="meta">Item no: 134742755024</div>286        <div class="meta">Seller: xpectmoreforless</div>287      </div>288    </div>289 290    <hr class="divider">291 292    <div class="form-group">293      <div class="label">Report Category</div>294      <div class="select">295        Price gouging296        <span class="arrow">297          <svg viewBox="0 0 24 24"><path d="M4 8l8 8 8-8"></path></svg>298        </span>299      </div>300    </div>301 302    <div class="form-group">303      <div class="label">Reason for Report</div>304      <div class="select active">305        Price gouging306        <span class="arrow">307          <svg viewBox="0 0 24 24"><path d="M4 8l8 8 8-8"></path></svg>308        </span>309      </div>310    </div>311 312    <div class="form-group">313      <div class="label">Detailed Reason</div>314      <div class="select">315        Select from a list of detailed reporting reason316        <span class="arrow">317          <svg viewBox="0 0 24 24"><path d="M4 8l8 8 8-8"></path></svg>318        </span>319      </div>320    </div>321 322    <div class="btn">Continue</div>323  </div>324 325  <!-- Bottom gesture bar -->326  <div class="gesture-bar">327    <div class="gesture-pill"></div>328  </div>329 330</div>331</body>332</html>