GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Report this item - Mock</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: #fafafa;14  }15 16  /* Top app bar */17  .appbar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 180px;23    background: #0a0a0a;24    color: #fff;25    box-sizing: border-box;26    padding: 36px 40px 24px 40px;27    display: flex;28    align-items: center;29  }30  .icon-circle {31    width: 72px;32    height: 72px;33    border-radius: 36px;34    border: 2px solid #3a3a3a;35    display: flex;36    align-items: center;37    justify-content: center;38    margin-right: 24px;39  }40  .icon-circle svg {41    width: 34px; height: 34px; fill: #ffffff;42  }43  .appbar-title {44    font-size: 54px;45    font-weight: 700;46    letter-spacing: 0.2px;47  }48 49  /* Faint background title */50  .faint-title {51    position: absolute;52    top: 210px;53    left: 40px;54    font-size: 86px;55    color: #dcdcdc;56    opacity: 0.55;57    font-weight: 600;58    letter-spacing: 0.3px;59  }60 61  /* Dark modal card */62  .report-card {63    position: absolute;64    left: 20px;65    right: 20px;66    top: 330px;67    bottom: 140px;68    background: #151515;69    color: #eaeaea;70    border-radius: 14px;71    box-shadow: 0 20px 30px rgba(0,0,0,0.35);72    padding: 40px;73    box-sizing: border-box;74  }75 76  .item-row {77    display: flex;78    gap: 28px;79    align-items: flex-start;80  }81  .thumb {82    width: 160px;83    height: 240px;84    background: #E0E0E0;85    border: 1px solid #BDBDBD;86    color: #757575;87    font-size: 24px;88    display: flex;89    align-items: center;90    justify-content: center;91  }92  .item-meta {93    flex: 1;94  }95  .item-title {96    font-size: 44px;97    font-weight: 700;98    color: #ffffff;99    margin-top: 4px;100  }101  .meta {102    margin-top: 18px;103    font-size: 30px;104    color: #c9c9c9;105  }106  .meta b { color: #ffffff; font-weight: 600; }107 108  .divider {109    margin: 34px 0 24px 0;110    height: 1px;111    background: #2b2b2b;112    border: 0;113  }114 115  .form-group {116    margin-top: 34px;117  }118  .label {119    font-size: 30px;120    color: #cfcfcf;121    margin-bottom: 18px;122  }123  .select {124    background: #1d1d1d;125    border: 1px solid #3d3d3d;126    height: 110px;127    border-radius: 12px;128    color: #bdbdbd;129    display: flex;130    align-items: center;131    padding: 0 28px;132    font-size: 32px;133    position: relative;134  }135  .select .caret {136    position: absolute;137    right: 24px;138    width: 36px;139    height: 36px;140    pointer-events: none;141    opacity: 0.8;142  }143  .select .caret svg { fill: #9a9a9a; }144 145  .btn {146    margin-top: 46px;147    width: 100%;148    height: 112px;149    border-radius: 12px;150    background: #15365c;151    color: #ffffff;152    font-size: 36px;153    border: none;154  }155</style>156</head>157<body>158<div id="render-target">159 160  <!-- App bar -->161  <div class="appbar">162    <div class="icon-circle" aria-label="Close">163      <svg viewBox="0 0 24 24">164        <path d="M18.3 5.7a1 1 0 0 0-1.4 0L12 10.6 7.1 5.7A1 1 0 1 0 5.7 7.1L10.6 12l-4.9 4.9a1 1 0 1 0 1.4 1.4L12 13.4l4.9 4.9a1 1 0 0 0 1.4-1.4L13.4 12l4.9-4.9a1 1 0 0 0 0-1.4z"/>165      </svg>166    </div>167    <div class="appbar-title">Report this item</div>168  </div>169 170  <div class="faint-title">File a report</div>171 172  <!-- Report card -->173  <div class="report-card">174    <div class="item-row">175      <div class="thumb">[IMG: Book cover]</div>176      <div class="item-meta">177        <div class="item-title">1984 by George Orwell</div>178        <div class="meta"><b>Item no:</b> 144204065111</div>179        <div class="meta"><b>Seller:</b> thrift.books</div>180      </div>181    </div>182 183    <div class="divider"></div>184 185    <div class="form-group">186      <div class="label">Report Category</div>187      <div class="select">Select from a list of report categories188        <span class="caret">189          <svg viewBox="0 0 24 24">190            <path d="M7 9l5 6 5-6H7z"/>191          </svg>192        </span>193      </div>194    </div>195 196    <div class="form-group">197      <div class="label">Reason for Report</div>198      <div class="select">Select from a list of reporting reasons199        <span class="caret">200          <svg viewBox="0 0 24 24">201            <path d="M7 9l5 6 5-6H7z"/>202          </svg>203        </span>204      </div>205    </div>206 207    <div class="form-group">208      <div class="label">Detailed Reason</div>209      <div class="select">Select from a list of detailed reporting reason210        <span class="caret">211          <svg viewBox="0 0 24 24">212            <path d="M7 9l5 6 5-6H7z"/>213          </svg>214        </span>215      </div>216    </div>217 218    <button class="btn">Continue</button>219  </div>220 221</div>222</body>223</html>