GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Report Item - Mock</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    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #4b4b4b;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    display: flex;27    align-items: center;28    padding: 0 36px;29    box-sizing: border-box;30    font-size: 42px;31  }32  .status-icons {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 30px;37  }38  .icon-wifi, .icon-battery {39    width: 50px;40    height: 50px;41  }42 43  /* Header/AppBar */44  .header {45    position: absolute;46    top: 120px;47    left: 0;48    width: 1080px;49    height: 120px;50    display: flex;51    align-items: center;52    padding: 0 36px;53    box-sizing: border-box;54  }55  .close-btn {56    width: 80px;57    height: 80px;58    border-radius: 40px;59    border: 3px solid #8f8f8f;60    display: flex;61    align-items: center;62    justify-content: center;63    margin-right: 24px;64  }65  .close-btn svg { width: 46px; height: 46px; }66  .title {67    font-size: 62px;68    color: #cfcfcf;69    font-weight: 700;70    letter-spacing: 0.3px;71  }72 73  /* Background hint text */74  .bg-hint {75    position: absolute;76    top: 310px;77    left: 36px;78    font-size: 84px;79    color: rgba(255,255,255,0.14);80    font-weight: 700;81  }82 83  /* Card */84  .report-card {85    position: absolute;86    top: 420px;87    left: 36px;88    width: 1008px;89    border-radius: 16px;90    background: #191919;91    box-shadow: 0 20px 24px rgba(0,0,0,0.45);92    color: #c9c9c9;93    padding: 40px;94    box-sizing: border-box;95  }96  .product-row {97    display: flex;98    gap: 28px;99    align-items: center;100  }101  .img-ph {102    width: 260px;103    height: 260px;104    background: #E0E0E0;105    border: 1px solid #BDBDBD;106    color: #757575;107    display: flex;108    align-items: center;109    justify-content: center;110    text-align: center;111    font-size: 30px;112  }113  .product-info {114    flex: 1;115    color: #bdbdbd;116    line-height: 1.65;117    font-size: 34px;118  }119  .divider {120    height: 2px;121    background: #3a3a3a;122    margin: 28px 0 30px;123  }124  .label {125    color: #cfcfcf;126    font-size: 34px;127    margin-bottom: 14px;128  }129  .select {130    height: 100px;131    border: 2px solid #555;132    border-radius: 14px;133    display: flex;134    align-items: center;135    padding: 0 26px;136    box-sizing: border-box;137    color: #d9d9d9;138    font-size: 36px;139    justify-content: space-between;140    margin-bottom: 28px;141  }142  .select .caret {143    width: 26px;144    height: 26px;145    border-right: 3px solid #8a8a8a;146    border-bottom: 3px solid #8a8a8a;147    transform: rotate(45deg);148    margin-left: 12px;149  }150  .hint {151    color: #9a9a9a;152    font-size: 32px;153  }154  .primary-btn {155    margin-top: 34px;156    height: 110px;157    width: 420px;158    border-radius: 14px;159    background: #0a5ea8;160    color: #cfe6ff;161    font-weight: 700;162    font-size: 38px;163    display: flex;164    align-items: center;165    justify-content: center;166    opacity: 0.85;167  }168 169  /* Floating picker dialog */170  .picker-dialog {171    position: absolute;172    left: 60px;173    top: 1060px;174    width: 960px;175    height: 200px;176    background: #5b5b5b;177    border-radius: 10px;178    box-shadow: 0 14px 18px rgba(0,0,0,0.45);179    display: flex;180    align-items: center;181    justify-content: space-between;182    padding: 0 36px;183    box-sizing: border-box;184    color: #fff;185  }186  .picker-dialog .option-text {187    font-size: 56px;188    font-weight: 600;189  }190  .radio {191    width: 60px;192    height: 60px;193    border: 5px solid #d8d8d8;194    border-radius: 50%;195  }196 197  /* Bottom gesture bar */198  .home-indicator {199    position: absolute;200    bottom: 34px;201    left: 50%;202    transform: translateX(-50%);203    width: 300px;204    height: 12px;205    background: #e9e9e9;206    border-radius: 8px;207    opacity: 0.9;208  }209</style>210</head>211<body>212<div id="render-target">213 214  <!-- Status Bar -->215  <div class="status-bar">216    <div>5:43</div>217    <div class="status-icons">218      <svg class="icon-wifi" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">219        <path d="M2 8c5-4 15-4 20 0"/>220        <path d="M5 11c4-3 10-3 14 0"/>221        <path d="M8 14c3-2 5-2 8 0"/>222        <circle cx="12" cy="18" r="1.6" fill="#fff"/>223      </svg>224      <svg class="icon-battery" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">225        <rect x="2" y="7" width="18" height="10" rx="2"/>226        <rect x="20" y="10" width="2" height="4" fill="#fff" stroke="none"/>227      </svg>228    </div>229  </div>230 231  <!-- Header -->232  <div class="header">233    <div class="close-btn" aria-label="Close">234      <svg viewBox="0 0 24 24" stroke="#8f8f8f" stroke-width="2" fill="none" stroke-linecap="round">235        <path d="M6 6 L18 18 M18 6 L6 18"></path>236      </svg>237    </div>238    <div class="title">Report this item</div>239  </div>240 241  <!-- Large faded background heading -->242  <div class="bg-hint">File a report</div>243 244  <!-- Report card content behind the picker -->245  <div class="report-card">246    <div class="product-row">247      <div class="img-ph">[IMG: Robot Vacuum Product]</div>248      <div class="product-info">249        <div>FDW Robot Vacuum Cleaner 2000Pa Strong Suction, 4400mAh, Black</div>250        <div style="margin-top: 10px; color:#9f9f9f;">Item no: 134742755024</div>251        <div style="margin-top: 4px; color:#9f9f9f;">Seller: xpectmoreforless</div>252      </div>253    </div>254 255    <div class="divider"></div>256 257    <div class="label">Report Category</div>258    <div class="select">259      <span>Price gouging</span>260      <div class="caret"></div>261    </div>262 263    <div class="label">Reason for Report</div>264    <div class="select">265      <span class="hint">Select from a list of detailed reporting reason</span>266      <div class="caret"></div>267    </div>268 269    <div class="primary-btn">Continue</div>270  </div>271 272  <!-- Floating dialog for option -->273  <div class="picker-dialog">274    <div class="option-text">Price gouging</div>275    <div class="radio" aria-hidden="true"></div>276  </div>277 278  <!-- Home indicator -->279  <div class="home-indicator"></div>280</div>281</body>282</html>