GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Report This Item - Mock UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0b0b0b;14    color: #fff;15  }16 17  /* Status bar */18  .status-bar {19    height: 110px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #eaeaea;25    font-size: 36px;26    letter-spacing: 0.5px;27  }28  .status-right {29    display: flex;30    align-items: center;31    gap: 24px;32  }33  .icon-signal, .icon-battery, .icon-wifi {34    width: 38px; height: 24px; position: relative;35  }36  .icon-signal::before { content: ""; position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; border-left: 4px solid #eaeaea; border-bottom: 4px solid #eaeaea; transform: skewX(-25deg); }37  .icon-wifi { width: 40px; }38  .icon-wifi::before { content: ""; position: absolute; left: 0; right: 0; top: 2px; bottom: 2px; border: 4px solid #eaeaea; border-radius: 50% 50% 0 0; border-bottom: none; }39  .icon-battery { width: 54px; }40  .icon-battery::before {41    content: ""; position: absolute; inset: 0; border: 4px solid #eaeaea; border-radius: 4px;42  }43  .icon-battery::after {44    content: ""; position: absolute; right: -10px; top: 9px; width: 10px; height: 12px; background: #eaeaea; border-radius: 2px;45  }46 47  /* Header */48  .header {49    display: flex;50    align-items: center;51    gap: 28px;52    padding: 20px 28px 16px 28px;53    border-bottom: 1px solid #1e1e1e;54  }55  .back-btn {56    width: 90px; height: 90px; background: #141414; border-radius: 45px;57    display: flex; align-items: center; justify-content: center; border: 1px solid #252525;58  }59  .back-btn svg { width: 38px; height: 38px; fill: #ffffff; opacity: 0.92; }60  .title {61    font-size: 58px;62    font-weight: 700;63  }64 65  /* Form content */66  .content {67    padding: 24px 34px 0 34px;68  }69  .section-label {70    font-size: 34px;71    color: #bdbdbd;72    margin: 30px 0 14px 6px;73  }74  .dropdown, .textarea {75    background: #121212;76    border: 1px solid #2b2b2b;77    border-radius: 18px;78    color: #eaeaea;79  }80  .dropdown {81    height: 120px;82    display: flex;83    align-items: center;84    justify-content: space-between;85    padding: 0 28px;86    font-size: 36px;87  }88  .dropdown .value { opacity: 0.95; }89  .caret svg { width: 32px; height: 32px; fill: #bdbdbd; }90  .textarea {91    min-height: 250px;92    padding: 24px 28px;93    font-size: 36px;94    line-height: 1.4;95  }96  .help-text {97    margin: 18px 10px 0;98    color: #bdbdbd;99    font-size: 30px;100  }101  .submit-btn {102    margin: 44px auto;103    width: 980px;104    height: 116px;105    background: #2a62f0;106    border-radius: 18px;107    display: flex;108    align-items: center;109    justify-content: center;110    font-size: 42px;111    font-weight: 700;112    color: #fff;113    box-shadow: 0 6px 0 rgba(0,0,0,0.35);114  }115 116  /* Keyboard mock */117  .keyboard {118    position: absolute;119    left: 0; right: 0; bottom: 0;120    height: 760px;121    background: #0f0f0f;122    border-top: 1px solid #1e1e1e;123    padding: 12px 24px 24px;124  }125  .suggestions {126    display: flex;127    align-items: center;128    gap: 30px;129    padding: 12px 10px 20px;130    color: #eaeaea;131    font-size: 40px;132  }133  .suggestion-pill {134    padding: 8px 20px;135    background: #1a1a1a;136    border: 1px solid #2b2b2b;137    border-radius: 28px;138  }139  .keyboard-row {140    display: flex;141    gap: 16px;142    margin-bottom: 20px;143    justify-content: center;144  }145  .key {146    flex: 0 0 88px;147    height: 110px;148    background: #1a1a1a;149    border: 1px solid #2b2b2b;150    border-radius: 18px;151    color: #eaeaea;152    font-size: 46px;153    display: flex;154    align-items: center;155    justify-content: center;156  }157  .key.small { flex-basis: 120px; }158  .key.wide { flex-basis: 320px; }159  .key.extra-wide { flex-basis: 540px; }160  .emoji { font-size: 52px; }161  .enter {162    background: #191919;163  }164  .enter svg { width: 44px; height: 44px; fill: #eaeaea; }165</style>166</head>167<body>168<div id="render-target">169 170  <!-- Status Bar -->171  <div class="status-bar">172    <div>6:16</div>173    <div class="status-right">174      <div class="icon-signal"></div>175      <div class="icon-wifi"></div>176      <div class="icon-battery"></div>177    </div>178  </div>179 180  <!-- Header -->181  <div class="header">182    <div class="back-btn">183      <svg viewBox="0 0 24 24">184        <path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/>185      </svg>186    </div>187    <div class="title">Report this item</div>188  </div>189 190  <!-- Form Content -->191  <div class="content">192    <div class="section-label">Reason for Report</div>193    <div class="dropdown">194      <div class="value">Search and browse manipulation</div>195      <div class="caret">196        <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>197      </div>198    </div>199 200    <div class="section-label">Detailed Reason</div>201    <div class="dropdown">202      <div class="value">Incorrect Item Condition</div>203      <div class="caret">204        <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>205      </div>206    </div>207 208    <div class="section-label">Brief Description</div>209    <div class="textarea">Item condition is not good</div>210 211    <div class="help-text">74 characters left. Do not include HTML or JavaScript.</div>212 213    <div class="submit-btn">Submit report</div>214  </div>215 216  <!-- Keyboard Mock -->217  <div class="keyboard">218    <div class="suggestions">219      <span class="suggestion-pill">good</span>220      <span class="suggestion-pill">goods</span>221      <span class="suggestion-pill emoji">👍</span>222      <span class="suggestion-pill emoji">😊</span>223      <span class="suggestion-pill">🎤</span>224    </div>225 226    <div class="keyboard-row">227      <div class="key">q</div>228      <div class="key">w</div>229      <div class="key">e</div>230      <div class="key">r</div>231      <div class="key">t</div>232      <div class="key">y</div>233      <div class="key">u</div>234      <div class="key">i</div>235      <div class="key">o</div>236      <div class="key">p</div>237    </div>238    <div class="keyboard-row">239      <div class="key small">a</div>240      <div class="key">s</div>241      <div class="key">d</div>242      <div class="key">f</div>243      <div class="key">g</div>244      <div class="key">h</div>245      <div class="key">j</div>246      <div class="key">k</div>247      <div class="key">l</div>248    </div>249    <div class="keyboard-row">250      <div class="key">z</div>251      <div class="key">x</div>252      <div class="key">c</div>253      <div class="key">v</div>254      <div class="key">b</div>255      <div class="key">n</div>256      <div class="key">m</div>257    </div>258    <div class="keyboard-row">259      <div class="key small">?123</div>260      <div class="key small">,</div>261      <div class="key small">😊</div>262      <div class="key extra-wide"></div>263      <div class="key small">.</div>264      <div class="key enter">265        <svg viewBox="0 0 24 24"><path d="M19 7v6H7.4l3.3-3.3-1.4-1.4L4.6 14l4.7 4.7 1.4-1.4L7.4 13H21V7z"/></svg>266      </div>267    </div>268  </div>269 270</div>271</body>272</html>