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">6<title>Report This Item</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background:15      repeating-linear-gradient(45deg, #f4f4f4 0px, #f4f4f4 8px, #f1f1f1 8px, #f1f1f1 16px);16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17    color: #111;18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 1080px;26    height: 96px;27    background: #000;28    color: #fff;29    display: flex;30    align-items: center;31    padding: 0 32px;32    box-sizing: border-box;33    font-weight: 600;34    letter-spacing: 0.5px;35  }36  .status-left { font-size: 40px; }37  .status-right {38    margin-left: auto;39    display: flex;40    align-items: center;41    gap: 26px;42  }43  .status-icon svg { width: 38px; height: 38px; fill: none; stroke: #fff; stroke-width: 3; }44 45  /* Header */46  .header {47    position: absolute;48    top: 96px;49    left: 0;50    width: 1080px;51    height: 160px;52    background: #000;53    color: #fff;54    display: flex;55    align-items: center;56    box-sizing: border-box;57    padding: 0 36px;58  }59  .close-btn {60    width: 84px;61    height: 84px;62    border-radius: 42px;63    border: 3px solid #fff;64    display: flex;65    align-items: center;66    justify-content: center;67    margin-right: 22px;68  }69  .close-btn svg { width: 40px; height: 40px; stroke: #fff; stroke-width: 6; }70  .header-title {71    font-size: 64px;72    font-weight: 800;73  }74 75  /* Ghost title under header */76  .ghost-title {77    position: absolute;78    top: 280px;79    left: 36px;80    font-size: 76px;81    color: rgba(0,0,0,0.08);82    font-weight: 700;83  }84 85  /* Card */86  .card {87    position: absolute;88    top: 360px;89    left: 32px;90    width: 1016px;91    background: #1f1f1f;92    color: #fff;93    border-radius: 18px;94    box-shadow: 0 8px 0 rgba(0,0,0,0.6), 0 14px 24px rgba(0,0,0,0.4);95    padding: 28px;96    box-sizing: border-box;97  }98  .item-row {99    display: flex;100    gap: 28px;101    align-items: center;102  }103  .img-ph {104    width: 240px;105    height: 240px;106    background: #E0E0E0;107    border: 1px solid #BDBDBD;108    display: flex;109    align-items: center;110    justify-content: center;111    color: #757575;112    font-size: 28px;113  }114  .item-info h3 {115    margin: 0;116    font-size: 40px;117    line-height: 1.25;118    font-weight: 700;119    max-width: 700px;120  }121  .meta {122    margin-top: 14px;123    font-size: 32px;124    line-height: 1.6;125    color: #b0b0b0;126  }127  .meta b { color: #e4e4e4; font-weight: 800; }128 129  .divider {130    height: 1px;131    background: #3a3a3a;132    margin: 24px 0 18px;133  }134 135  .field {136    margin: 20px 0;137  }138  .label {139    font-size: 34px;140    color: #cfcfcf;141    margin-bottom: 12px;142  }143  .select {144    position: relative;145    height: 92px;146    border: 2px solid #6a6a6a;147    border-radius: 16px;148    display: flex;149    align-items: center;150    padding: 0 26px;151    box-sizing: border-box;152    font-size: 34px;153    color: #eee;154    background: #222;155  }156  .select.active {157    border: 3px solid #ffffff;158    box-shadow: 0 0 0 2px rgba(255,255,255,0.15) inset;159  }160  .select .chev {161    position: absolute;162    right: 20px;163    top: 50%;164    transform: translateY(-50%);165  }166  .select .chev svg { width: 32px; height: 32px; fill: #bfbfbf; }167 168  .button {169    margin: 40px 0 12px;170    width: 94%;171    height: 100px;172    background: #12315e;173    border-radius: 14px;174    display: flex;175    align-items: center;176    justify-content: center;177    color: #9aa7b8;178    font-size: 40px;179    font-weight: 800;180    margin-left: 3%;181  }182 183  /* Bottom navigation bar */184  .bottom-bar {185    position: absolute;186    bottom: 0;187    left: 0;188    width: 1080px;189    height: 132px;190    background: #000;191    display: flex;192    align-items: center;193    justify-content: center;194  }195  .home-pill {196    width: 200px;197    height: 18px;198    background: #e6e6e6;199    border-radius: 9px;200  }201</style>202</head>203<body>204<div id="render-target">205 206  <!-- Status bar -->207  <div class="status-bar">208    <div class="status-left">4:57</div>209    <div class="status-right">210      <div class="status-icon">211        <!-- simple "Do not disturb" icon -->212        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><line x1="6" y1="12" x2="18" y2="12"></line></svg>213      </div>214      <div class="status-icon">215        <!-- wifi -->216        <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0"></path><path d="M5 12c3-3 11-3 14 0"></path><path d="M8 16c2-2 6-2 8 0"></path><circle cx="12" cy="19" r="1.8" fill="#fff" stroke="none"></circle></svg>217      </div>218      <div class="status-icon">219        <!-- battery -->220        <svg viewBox="0 0 28 24"><rect x="2" y="5" width="20" height="14" rx="2" ry="2"></rect><rect x="23" y="9" width="3" height="6"></rect></svg>221      </div>222      <div style="font-size:32px;">96%</div>223    </div>224  </div>225 226  <!-- Header -->227  <div class="header">228    <div class="close-btn">229      <svg viewBox="0 0 24 24"><line x1="5" y1="5" x2="19" y2="19"></line><line x1="19" y1="5" x2="5" y2="19"></line></svg>230    </div>231    <div class="header-title">Report this item</div>232  </div>233 234  <div class="ghost-title">File a report</div>235 236  <!-- Dark card -->237  <div class="card">238    <div class="item-row">239      <div class="img-ph">[IMG: Brown Leather Shoe]</div>240      <div class="item-info">241        <h3>Clarks Originals Womens Wallabee Moccasin Cup Brown Leather Shoes</h3>242        <div class="meta">Item no: <b>155608186658</b><br>Seller: <b>clarks_official</b></div>243      </div>244    </div>245 246    <div class="divider"></div>247 248    <div class="field">249      <div class="label">Report Category</div>250      <div class="select">251        Prohibited and restricted items252        <div class="chev">253          <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"></path></svg>254        </div>255      </div>256    </div>257 258    <div class="field">259      <div class="label">Reason for Report</div>260      <div class="select active">261        Animals, plants, and wildlife262        <div class="chev">263          <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"></path></svg>264        </div>265      </div>266    </div>267 268    <div class="field">269      <div class="label">Detailed Reason</div>270      <div class="select">271        Select from a list of detailed reporting reason272        <div class="chev">273          <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"></path></svg>274        </div>275      </div>276    </div>277 278    <div class="button">Continue</div>279  </div>280 281  <!-- Bottom bar -->282  <div class="bottom-bar">283    <div class="home-pill"></div>284  </div>285 286</div>287</body>288</html>