GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Report this item - UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #F3F3F5;13  }14 15  /* Status + App bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 90px;22    background: #0B0B0B;23    color: #EDEDED;24    font-size: 30px;25    letter-spacing: 1px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 36px;30  }31  .status-left { display: flex; align-items: center; gap: 18px; }32  .status-right { display: flex; align-items: center; gap: 20px; }33 34  .app-bar {35    position: absolute;36    top: 90px;37    left: 0;38    width: 1080px;39    height: 150px;40    background: #111214;41    color: #FFFFFF;42    display: flex;43    align-items: center;44    padding: 0 40px;45    box-sizing: border-box;46    box-shadow: 0 2px 0 rgba(0,0,0,0.25) inset;47  }48  .close-btn {49    width: 96px;50    height: 96px;51    border-radius: 48px;52    background: #1F1F1F;53    display: flex;54    align-items: center;55    justify-content: center;56    margin-right: 28px;57  }58  .close-btn svg { width: 38px; height: 38px; stroke: #FFFFFF; }59  .title {60    font-size: 56px;61    font-weight: 700;62  }63 64  /* Background hint text */65  .bg-heading {66    position: absolute;67    top: 300px;68    left: 40px;69    font-size: 96px;70    color: rgba(0,0,0,0.08);71    font-weight: 700;72  }73 74  /* Dark card/modal */75  .card {76    position: absolute;77    top: 360px;78    left: 40px;79    width: 1000px;80    background: #151617;81    color: #FFFFFF;82    border-radius: 24px;83    box-shadow: 0 22px 40px rgba(0,0,0,0.45);84    padding: 40px;85    box-sizing: border-box;86  }87  .card-header {88    display: flex;89    align-items: center;90    gap: 36px;91    margin-bottom: 20px;92  }93  .thumb {94    width: 180px;95    height: 250px;96    background: #E0E0E0;97    border: 1px solid #BDBDBD;98    color: #5F5F5F;99    display: flex;100    align-items: center;101    justify-content: center;102    font-size: 26px;103    text-align: center;104  }105  .item-info .name {106    font-size: 44px;107    font-weight: 700;108    margin-bottom: 8px;109  }110  .meta { font-size: 30px; color: #CFCFCF; margin: 6px 0; }111  .meta b { color: #FFFFFF; }112 113  .divider {114    height: 1px;115    background: #2C2C2C;116    margin: 28px 0 18px;117  }118 119  .label {120    font-size: 30px;121    color: #B7B7B7;122    margin: 26px 0 14px;123  }124  .select {125    position: relative;126    width: 100%;127    height: 110px;128    background: #0F1011;129    border: 2px solid #2C2C2C;130    border-radius: 16px;131    display: flex;132    align-items: center;133    padding: 0 28px;134    box-sizing: border-box;135    color: #FFFFFF;136    font-size: 34px;137  }138  .select.placeholder { color: #9FA4A8; }139  .select .caret {140    position: absolute;141    right: 22px;142    width: 36px;143    height: 36px;144  }145  .button {146    width: 100%;147    height: 120px;148    border-radius: 14px;149    background: #103766;150    margin-top: 34px;151    display: flex;152    align-items: center;153    justify-content: center;154    color: #DDE8F9;155    font-size: 40px;156    font-weight: 700;157  }158 159  /* Bottom gesture bar */160  .handle {161    position: absolute;162    bottom: 26px;163    left: 50%;164    transform: translateX(-50%);165    width: 360px;166    height: 10px;167    background: #CFCFCF;168    border-radius: 6px;169  }170</style>171</head>172<body>173<div id="render-target">174 175  <!-- Status bar -->176  <div class="status-bar">177    <div class="status-left">178      <div>6:13</div>179      <div style="width:18px;height:18px;background:#EDEDED;border-radius:3px;"></div>180      <div style="width:18px;height:18px;background:#EDEDED;border-radius:9px;"></div>181    </div>182    <div class="status-right">183      <div style="width:18px;height:18px;border:2px solid #EDEDED;border-radius:3px;"></div>184      <div style="width:36px;height:18px;border:2px solid #EDEDED;border-radius:3px;position:relative;">185        <div style="position:absolute;right:-6px;top:4px;width:6px;height:10px;background:#EDEDED;"></div>186      </div>187    </div>188  </div>189 190  <!-- App bar -->191  <div class="app-bar">192    <div class="close-btn">193      <svg viewBox="0 0 24 24" fill="none" stroke-width="2">194        <line x1="5" y1="5" x2="19" y2="19"></line>195        <line x1="19" y1="5" x2="5" y2="19"></line>196      </svg>197    </div>198    <div class="title">Report this item</div>199  </div>200 201  <div class="bg-heading">File a report</div>202 203  <!-- Dark card content -->204  <div class="card">205    <div class="card-header">206      <div class="thumb">[IMG: Book Cover]</div>207      <div class="item-info">208        <div class="name">1984 by George Orwell</div>209        <div class="meta">Item no: <b>144204065111</b></div>210        <div class="meta">Seller: <b>thrift.books</b></div>211      </div>212    </div>213 214    <div class="divider"></div>215 216    <div class="label">Report Category</div>217    <div class="select">218      Listing practices219      <svg class="caret" viewBox="0 0 24 24" fill="#C9CED6">220        <path d="M6 9l6 6 6-6"></path>221      </svg>222    </div>223 224    <div class="label">Reason for Report</div>225    <div class="select placeholder">226      Select from a list of reporting reasons227      <svg class="caret" viewBox="0 0 24 24" fill="#93989F">228        <path d="M6 9l6 6 6-6"></path>229      </svg>230    </div>231 232    <div class="label">Detailed Reason</div>233    <div class="select placeholder">234      Select from a list of detailed reporting reason235      <svg class="caret" viewBox="0 0 24 24" fill="#93989F">236        <path d="M6 9l6 6 6-6"></path>237      </svg>238    </div>239 240    <div class="button">Continue</div>241  </div>242 243  <div class="handle"></div>244</div>245</body>246</html>