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: #101213;14    color: #fff;15  }16 17  /* Status bar */18  .status-bar {19    height: 90px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #c9c9c9;25    font-size: 38px;26  }27  .status-right {28    display: flex;29    gap: 24px;30    align-items: center;31  }32  .dot {33    width: 18px; height: 18px; background: #c9c9c9; border-radius: 50%;34  }35 36  /* Header with close */37  .header {38    height: 160px;39    display: flex;40    align-items: center;41    padding: 0 36px;42    gap: 30px;43  }44  .circle-btn {45    width: 100px; height: 100px; border-radius: 50%;46    background: #1b1c1d;47    display: flex; align-items: center; justify-content: center;48  }49  .circle-btn svg { width: 44px; height: 44px; }50  .title { font-size: 64px; font-weight: 700; }51 52  .ghost-heading {53    position: absolute;54    left: 36px;55    top: 360px;56    font-size: 86px;57    color: rgba(255,255,255,0.08);58    pointer-events: none;59  }60 61  /* Card / sheet */62  .sheet {63    position: absolute;64    left: 20px;65    right: 20px;66    top: 320px;67    bottom: 40px;68    background: #181A1B;69    border-radius: 18px;70    box-shadow: 0 8px 24px rgba(0,0,0,0.6);71    border: 1px solid #202325;72    overflow: hidden;73  }74  .sheet-inner {75    padding: 40px 40px 32px 40px;76    height: 100%;77    overflow-y: auto;78  }79 80  /* Item preview row */81  .item-row {82    display: flex;83    gap: 36px;84    align-items: center;85    margin-bottom: 24px;86  }87  .item-img {88    width: 180px;89    height: 260px;90    background: #E0E0E0;91    border: 1px solid #BDBDBD;92    display: flex; align-items: center; justify-content: center;93    color: #757575; font-size: 30px;94  }95  .item-details .name { font-size: 44px; font-weight: 700; margin-bottom: 12px; }96  .item-details .meta { font-size: 34px; color: #aab0b6; margin: 6px 0; }97  .divider {98    height: 2px; background: #2a2d30; margin: 28px 0 24px 0;99  }100 101  /* Form fields */102  .field { margin-bottom: 34px; }103  .label { font-size: 34px; color: #cfd3d7; margin-bottom: 16px; }104  .select, .textarea {105    background: #121416;106    border: 1px solid #2b2f33;107    color: #e7eaee;108    border-radius: 12px;109    padding: 28px 28px;110    font-size: 36px;111  }112  .select {113    display: flex; align-items: center; justify-content: space-between;114  }115  .select .value { opacity: 0.95; }116  .select svg { width: 34px; height: 34px; fill: #8a8f95; }117  .textarea {118    min-height: 220px; line-height: 1.4;119  }120 121  .helper {122    font-size: 28px;123    color: #98a0a7;124    margin-top: 16px;125  }126 127  .submit {128    margin-top: 40px;129    background: #2466C9;130    border-radius: 14px;131    border: none;132    color: #fff;133    font-size: 44px;134    font-weight: 700;135    width: 100%;136    padding: 32px 0;137    text-align: center;138    cursor: pointer;139  }140</style>141</head>142<body>143<div id="render-target">144 145  <!-- Status bar -->146  <div class="status-bar">147    <div>6:17</div>148    <div class="status-right">149      <div class="dot"></div>150      <div class="dot"></div>151      <div class="dot"></div>152    </div>153  </div>154 155  <!-- Header -->156  <div class="header">157    <div class="circle-btn" aria-label="Close">158      <svg viewBox="0 0 24 24">159        <path d="M6 6 L18 18 M18 6 L6 18" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>160      </svg>161    </div>162    <div class="title">Report this item</div>163  </div>164 165  <div class="ghost-heading">File a report</div>166 167  <!-- Sheet -->168  <div class="sheet">169    <div class="sheet-inner">170 171      <div class="item-row">172        <div class="item-img">[IMG: Book Cover]</div>173        <div class="item-details">174          <div class="name">1984 by George Orwell</div>175          <div class="meta">Item no: 144204065111</div>176          <div class="meta">Seller: thrift.books</div>177        </div>178      </div>179 180      <div class="divider"></div>181 182      <div class="field">183        <div class="label">Report Category</div>184        <div class="select">185          <div class="value">Listing practices</div>186          <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" /></svg>187        </div>188      </div>189 190      <div class="field">191        <div class="label">Reason for Report</div>192        <div class="select">193          <div class="value">Search and browse manipulation</div>194          <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" /></svg>195        </div>196      </div>197 198      <div class="field">199        <div class="label">Detailed Reason</div>200        <div class="select">201          <div class="value">Incorrect Item Condition</div>202          <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" /></svg>203        </div>204      </div>205 206      <div class="field">207        <div class="label">Brief Description</div>208        <div class="textarea">Item condition is not good</div>209      </div>210 211      <div class="helper">74 characters left. Do not include HTML or JavaScript.</div>212 213      <div class="submit">Submit report</div>214 215    </div>216  </div>217 218</div>219</body>220</html>