GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Report This Item - Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">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: #f3f3f3;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 110px;24    background: #000;25    color: #fff;26    padding: 0 40px;27    box-sizing: border-box;28    display: flex;29    align-items: center;30    justify-content: space-between;31    font-weight: 600;32    letter-spacing: 0.5px;33  }34  .status-left { font-size: 48px; }35  .status-right {36    display: flex;37    gap: 26px;38    align-items: center;39  }40  .status-dot {41    width: 18px; height: 18px; background: #fff; border-radius: 50%;42  }43  .icon-wifi, .icon-battery {44    display: inline-block;45  }46  .icon-wifi svg { width: 50px; height: 50px; }47  .icon-battery svg { width: 60px; height: 38px; }48 49  /* Header */50  .header {51    position: absolute;52    top: 110px;53    left: 0;54    width: 1080px;55    height: 230px;56    background: #000;57    color: #fff;58    box-sizing: border-box;59    padding: 40px 40px;60    display: flex;61    align-items: center;62    gap: 30px;63  }64  .close-circle {65    width: 100px; height: 100px; border-radius: 50%;66    border: 6px solid rgba(255,255,255,0.8);67    display: flex; align-items: center; justify-content: center;68  }69  .close-circle svg { width: 60px; height: 60px; }70  .header-title {71    font-size: 72px;72    font-weight: 800;73    letter-spacing: 0.3px;74  }75 76  /* Faint background heading */77  .faint-title {78    position: absolute;79    top: 360px;80    left: 40px;81    font-size: 96px;82    color: #e7e7e7;83    font-weight: 700;84    letter-spacing: 0.2px;85  }86 87  /* Card */88  .card {89    position: absolute;90    top: 480px;91    left: 40px;92    width: 1000px;93    background: #1f1f1f;94    border-radius: 18px;95    box-shadow: 8px 12px 0 rgba(0,0,0,0.4);96    color: #fff;97    padding: 30px;98    box-sizing: border-box;99  }100  .product-row {101    display: flex;102    gap: 30px;103    align-items: flex-start;104  }105  .img-placeholder {106    width: 280px; height: 280px;107    background: #E0E0E0;108    border: 1px solid #BDBDBD;109    display: flex; justify-content: center; align-items: center;110    color: #757575; font-weight: 600; text-align: center; border-radius: 6px;111  }112  .product-info {113    flex: 1;114  }115  .product-title {116    font-size: 40px; line-height: 1.35; font-weight: 700;117  }118  .muted {119    margin-top: 12px;120    font-size: 34px; color: #a8a8a8;121  }122  .divider {123    border-top: 2px solid #3a3a3a;124    margin: 30px 0;125  }126 127  .field-label {128    font-size: 40px; color: #d7d7d7; margin-bottom: 16px;129  }130  .select-field {131    height: 120px; border-radius: 12px; background: #2a2a2a;132    border: 2px solid #3a3a3a; color: #a0a0a0;133    display: flex; align-items: center; justify-content: space-between;134    padding: 0 30px; box-sizing: border-box; font-size: 36px;135    margin-bottom: 36px;136  }137  .chevron svg { width: 40px; height: 40px; fill: #9e9e9e; }138 139  .btn {140    width: 920px; height: 120px;141    background: #123d69; border-radius: 12px;142    display: flex; align-items: center; justify-content: center;143    color: #cfd7df; font-size: 44px; font-weight: 800;144    margin: 16px auto 20px;145    box-shadow: 0 6px 0 rgba(0,0,0,0.35);146  }147 148  /* Spinner overlay inside card */149  .card { position: absolute; }150  .spinner {151    position: absolute;152    left: 50%;153    top: 690px; /* visually near Detailed Reason field */154    transform: translate(-50%, -50%);155    width: 120px; height: 120px;156    border: 12px solid rgba(92, 153, 220, 0.35);157    border-top-color: #5c99dc;158    border-right-color: #5c99dc;159    border-radius: 50%;160    animation: spin 1s linear infinite;161  }162  @keyframes spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }163 164  /* Bottom nav bar */165  .bottom-bar {166    position: absolute;167    bottom: 0; left: 0; width: 1080px; height: 150px; background: #000;168    display: flex; align-items: center; justify-content: center;169  }170  .home-pill {171    width: 220px; height: 18px; background: #e5e5e5; border-radius: 9px;172  }173</style>174</head>175<body>176<div id="render-target">177 178  <!-- Status bar -->179  <div class="status-bar">180    <div class="status-left">5:42</div>181    <div class="status-right">182      <div class="status-dot"></div>183      <div class="status-dot"></div>184      <div class="status-dot"></div>185      <div class="status-dot"></div>186      <div class="status-dot"></div>187      <span class="icon-wifi">188        <svg viewBox="0 0 24 24">189          <path fill="#fff" d="M12 20a2 2 0 1 0 0.001-4.001A2 2 0 0 0 12 20zm6.3-6.3a9 9 0 0 0-12.6 0l1.4 1.4a7 7 0 0 1 9.8 0l1.4-1.4zm3.5-3.5a14 14 0 0 0-19.6 0l1.4 1.4a12 12 0 0 1 16.8 0l1.4-1.4z"/>190        </svg>191      </span>192      <span class="icon-battery">193        <svg viewBox="0 0 32 18">194          <rect x="1" y="3" width="26" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>195          <rect x="4" y="6" width="20" height="6" fill="#fff"/>196          <rect x="28" y="6" width="3" height="6" rx="1" fill="#fff"/>197        </svg>198      </span>199    </div>200  </div>201 202  <!-- Header -->203  <div class="header">204    <div class="close-circle">205      <svg viewBox="0 0 24 24">206        <path fill="#fff" d="M6 6l12 12M18 6L6 18" stroke="#fff" stroke-width="2" stroke-linecap="round"/>207      </svg>208    </div>209    <div class="header-title">Report this item</div>210  </div>211 212  <div class="faint-title">File a report</div>213 214  <!-- Modal Card -->215  <div class="card">216    <div class="product-row">217      <div class="img-placeholder">[IMG: Robot Vacuum Cleaner]</div>218      <div class="product-info">219        <div class="product-title">FDW Robot Vacuum Cleaner 2000Pa Strong Suction, 4400mAh, Black</div>220        <div class="muted">Item no: 134742755024</div>221        <div class="muted">Seller: xpectmoreforless</div>222      </div>223    </div>224 225    <div class="divider"></div>226 227    <div class="field">228      <div class="field-label">Report Category</div>229      <div class="select-field">230        <span>Select from a list of report categories</span>231        <span class="chevron">232          <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#9e9e9e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>233        </span>234      </div>235    </div>236 237    <div class="field">238      <div class="field-label">Reason for Report</div>239      <div class="select-field">240        <span>Select from a list of reporting reasons</span>241        <span class="chevron">242          <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#9e9e9e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>243        </span>244      </div>245    </div>246 247    <div class="field">248      <div class="field-label">Detailed Reason</div>249      <div class="select-field">250        <span>Select from a list of detailed reporting reason</span>251        <span class="chevron">252          <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#9e9e9e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>253        </span>254      </div>255    </div>256 257    <div class="btn">Continue</div>258 259    <!-- Loading spinner positioned over inputs -->260    <div class="spinner"></div>261  </div>262 263  <!-- Bottom navigation bar -->264  <div class="bottom-bar">265    <div class="home-pill"></div>266  </div>267 268</div>269</body>270</html>