GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Report This Item</title>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: #f3f3f3;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 90px;23    background: #000;24    color: #fff;25    display: flex;26    align-items: center;27    padding: 0 28px;28    box-sizing: border-box;29    font-size: 30px;30    letter-spacing: 0.5px;31  }32  .status-bar .time { font-weight: 600; }33  .status-icons {34    margin-left: auto;35    display: flex;36    align-items: center;37    gap: 20px;38  }39  .status-icons .dot {40    width: 18px; height: 18px; background: #fff; border-radius: 50%;41  }42  .status-icons .battery {43    width: 36px; height: 18px; border: 2px solid #fff; border-radius: 3px; position: relative;44  }45  .status-icons .battery::after {46    content: ""; position: absolute; right: -6px; top: 4px; width: 4px; height: 10px; background: #fff; border-radius: 1px;47  }48 49  /* App bar */50  .app-bar {51    position: absolute;52    top: 90px;53    left: 0;54    width: 1080px;55    height: 150px;56    background: #0d0d0d;57    color: #fff;58    display: flex;59    align-items: center;60    box-sizing: border-box;61    padding: 0 30px;62    box-shadow: 0 2px 6px rgba(0,0,0,0.5);63  }64  .close-btn {65    width: 88px; height: 88px;66    border-radius: 50%;67    border: 2px solid #2e2e2e;68    display: flex;69    align-items: center;70    justify-content: center;71    margin-right: 20px;72    background: #1a1a1a;73  }74  .close-btn svg { width: 36px; height: 36px; }75  .title {76    font-size: 54px;77    font-weight: 700;78    letter-spacing: 0.2px;79  }80 81  /* Modal card */82  .modal-card {83    position: absolute;84    top: 270px;85    left: 30px;86    width: 1020px;87    background: #181818;88    border-radius: 14px;89    box-shadow: 0 10px 28px rgba(0,0,0,0.6);90    padding: 34px;91    box-sizing: border-box;92    color: #eaeaea;93  }94 95  .item-header {96    display: flex;97    gap: 28px;98    align-items: center;99    margin-bottom: 28px;100  }101  .thumb {102    width: 170px; height: 240px;103    background: #E0E0E0;104    border: 1px solid #BDBDBD;105    color: #757575;106    display: flex;107    justify-content: center;108    align-items: center;109    font-size: 22px;110    text-align: center;111    padding: 8px;112  }113  .item-title { font-size: 42px; font-weight: 700; color: #ffffff; margin-bottom: 10px; }114  .meta { font-size: 30px; color: #b9b9b9; margin: 6px 0; }115 116  .divider {117    height: 2px; background: #2e2e2e; margin: 16px 0 28px 0;118  }119 120  .label {121    font-size: 30px;122    color: #cccccc;123    margin: 20px 0 12px 0;124  }125  .select, .textarea {126    width: 100%;127    background: #101010;128    color: #f0f0f0;129    border: 2px solid #2e2e2e;130    border-radius: 12px;131    height: 110px;132    padding: 0 24px;133    box-sizing: border-box;134    display: flex;135    align-items: center;136    font-size: 32px;137    position: relative;138  }139  .select .chev {140    position: absolute;141    right: 18px;142    width: 34px;143    height: 34px;144    fill: #8e8e8e;145  }146  .textarea {147    height: 300px;148    align-items: flex-start;149    padding-top: 16px;150    color: #9f9f9f;151  }152 153  .hint {154    margin-top: 14px;155    font-size: 26px;156    color: #9a9a9a;157  }158 159  .submit {160    margin-top: 28px;161    width: 100%;162    height: 120px;163    border-radius: 12px;164    background: #2f66cc;165    color: #fff;166    font-size: 40px;167    font-weight: 700;168    border: none;169    box-shadow: inset 0 -4px 0 rgba(0,0,0,0.2);170    cursor: default;171  }172 173  /* Gesture bar */174  .gesture-bar {175    position: absolute;176    bottom: 24px;177    left: 50%;178    transform: translateX(-50%);179    width: 300px;180    height: 10px;181    background: #dcdcdc;182    border-radius: 6px;183  }184</style>185</head>186<body>187<div id="render-target">188 189  <div class="status-bar">190    <div class="time">6:15</div>191    <div class="status-icons">192      <div class="dot"></div>193      <div class="dot"></div>194      <div class="battery"></div>195    </div>196  </div>197 198  <div class="app-bar">199    <div class="close-btn">200      <svg viewBox="0 0 24 24">201        <path d="M6 6 L18 18 M18 6 L6 18" stroke="#fff" stroke-width="2" stroke-linecap="round"/>202      </svg>203    </div>204    <div class="title">Report this item</div>205  </div>206 207  <div class="modal-card">208    <div class="item-header">209      <div class="thumb">[IMG: Book Cover]</div>210      <div class="item-text">211        <div class="item-title">1984 by George Orwell</div>212        <div class="meta">Item no: 144204065111</div>213        <div class="meta">Seller: thrift.books</div>214      </div>215    </div>216 217    <div class="divider"></div>218 219    <div class="field">220      <div class="label">Report Category</div>221      <div class="select">Listing practices222        <svg class="chev" viewBox="0 0 24 24">223          <path d="M6 9l6 6 6-6" />224        </svg>225      </div>226    </div>227 228    <div class="field">229      <div class="label">Reason for Report</div>230      <div class="select">Search and browse manipulation231        <svg class="chev" viewBox="0 0 24 24">232          <path d="M6 9l6 6 6-6" />233        </svg>234      </div>235    </div>236 237    <div class="field">238      <div class="label">Detailed Reason</div>239      <div class="select">Incorrect Item Condition240        <svg class="chev" viewBox="0 0 24 24">241          <path d="M6 9l6 6 6-6" />242        </svg>243      </div>244    </div>245 246    <div class="field">247      <div class="label">Brief Description</div>248      <div class="textarea"></div>249    </div>250 251    <div class="hint">100 characters left. Do not include HTML or JavaScript.</div>252 253    <button class="submit">Submit report</button>254  </div>255 256  <div class="gesture-bar"></div>257</div>258</body>259</html>