GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Report this item</title>7<style>8  body { margin:0; padding:0; background:transparent; }9  #render-target {10    width:1080px; height:2400px;11    position:relative; overflow:hidden;12    background:#000000;13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;14    color:#fff;15  }16 17  /* Status bar */18  .status-bar {19    position:absolute; top:0; left:0; right:0;20    height:84px;21    padding:24px 30px 0 30px;22    box-sizing:border-box;23    color:#ffffff;24    font-size:32px;25    letter-spacing:0.5px;26  }27  .status-icons {28    position:absolute; right:30px; top:24px;29    display:flex; align-items:center; gap:18px; color:#fff; opacity:0.9;30    font-size:28px;31  }32  .icon-battery, .icon-wifi, .icon-signal {33    width:36px; height:24px; display:inline-block;34  }35  .icon-battery svg, .icon-wifi svg, .icon-signal svg { fill:#fff; }36 37  /* Header */38  .appbar {39    position:absolute; top:84px; left:0; right:0;40    height:140px; background:#0a0a0a;41    display:flex; align-items:center;42    padding:0 30px; box-sizing:border-box;43  }44  .close-btn {45    width:76px; height:76px; display:flex; align-items:center; justify-content:center;46    margin-right:20px;47  }48  .close-btn svg { width:50px; height:50px; stroke:#ffffff; stroke-width:8; }49  .title {50    font-size:64px; font-weight:700; color:#ffffff;51  }52 53  /* Watermark text */54  .watermark {55    position:absolute; top:240px; left:30px;56    font-size:78px; font-weight:600; color:#e6e6e6; opacity:0.18;57  }58 59  /* Card */60  .card {61    position:absolute; left:30px; right:30px; top:360px;62    background:#1c1c1c;63    border-radius:20px;64    box-shadow: 0 8px 12px rgba(0,0,0,0.6);65    padding:30px;66  }67  .item-row {68    display:flex; gap:28px;69  }70  .img-ph {71    width:240px; height:240px; background:#E0E0E0;72    border:1px solid #BDBDBD;73    display:flex; align-items:center; justify-content:center;74    color:#757575; font-size:26px; text-align:center;75    border-radius:6px;76  }77  .item-info { flex:1; }78  .item-title { font-size:42px; font-weight:600; line-height:1.25; margin-top:8px; }79  .meta { margin-top:18px; font-size:30px; color:#9aa0a6; }80  .meta strong { color:#e0e0e0; font-weight:600; }81  .divider { height:1px; background:#444; margin:26px 0 20px 0; }82 83  .field { margin-bottom:28px; }84  .label { font-size:30px; margin-bottom:12px; color:#dddddd; }85  .select {86    background:#121212; color:#eaeaea;87    border:1px solid #555; border-radius:12px;88    height:88px; display:flex; align-items:center; justify-content:space-between;89    padding:0 22px; font-size:30px;90  }91  .select.white-border { border:3px solid #ffffff; }92 93  .arrow svg { width:26px; height:26px; fill:#bcbcbc; }94 95  .note {96    font-size:28px; color:#c7c7c7; margin:14px 0 8px 0;97  }98  .note a { color:#4b8dfd; text-decoration:none; }99 100  .textarea {101    background:#121212; border:1px solid #555; border-radius:12px;102    height:300px; color:#eaeaea; font-size:30px; padding:20px; box-sizing:border-box;103  }104  .helper { font-size:26px; color:#9aa0a6; margin-top:10px; }105 106  .submit {107    margin-top:28px;108    height:100px; border-radius:12px; background:#2657a7;109    color:#ffffff; font-size:36px; font-weight:700;110    display:flex; align-items:center; justify-content:center;111    box-shadow: 0 4px 0 rgba(0,0,0,0.35) inset;112  }113 114  /* bottom safe-area bar */115  .gesture-bar {116    position:absolute; bottom:26px; left:50%; transform:translateX(-50%);117    width:240px; height:10px; background:#e5e5e5; border-radius:10px; opacity:0.7;118  }119</style>120</head>121<body>122<div id="render-target">123 124  <!-- Status bar -->125  <div class="status-bar">126    4:58127    <div class="status-icons">128      <div class="icon-signal">129        <svg viewBox="0 0 24 24"><path d="M2 18h2v2H2v-2zm4-4h2v6H6v-6zm4-4h2v10h-2V10zm4-6h2v16h-2V4zm4 2h2v14h-2V6z"/></svg>130      </div>131      <div class="icon-wifi">132        <svg viewBox="0 0 24 24"><path d="M12 18c.7 0 1.3.6 1.3 1.3S12.7 20.6 12 20.6s-1.3-.6-1.3-1.3S11.3 18 12 18zm-6.7-6.2l1.4 1.4A8.5 8.5 0 0 1 12 12c2.3 0 4.5.9 6.3 2.2l1.4-1.4A10.7 10.7 0 0 0 12 10c-3 0-5.8 1.1-8.7 1.8zM3 8.2l1.5 1.5C6.3 8.6 9 7.7 12 7.7s5.8.9 7.5 2l1.5-1.5C18.8 6.3 15.6 5.5 12 5.5 8.4 5.5 5.2 6.3 3 8.2z"/></svg>133      </div>134      <div class="icon-battery">135        <svg viewBox="0 0 28 16"><rect x="1" y="2" width="22" height="12" rx="2" fill="#fff"></rect><rect x="3" y="4" width="17" height="8" fill="#000"></rect><rect x="21" y="4" width="1.5" height="8" fill="#79d46b"></rect><rect x="24" y="6" width="3" height="4" rx="1" fill="#fff"></rect></svg>136      </div>137      <span style="font-size:28px;">96%</span>138    </div>139  </div>140 141  <!-- Header bar -->142  <div class="appbar">143    <div class="close-btn">144      <svg viewBox="0 0 48 48">145        <path d="M10 10 L38 38 M38 10 L10 38" />146      </svg>147    </div>148    <div class="title">Report this item</div>149  </div>150 151  <div class="watermark">File a report</div>152 153  <!-- Main card -->154  <div class="card">155    <div class="item-row">156      <div class="img-ph">[IMG: Brown leather shoe]</div>157      <div class="item-info">158        <div class="item-title">Clarks Originals Womens Wallabee Moccasin Cup Brown Leather Shoes</div>159        <div class="meta">Item no: <strong>155608186658</strong></div>160        <div class="meta">Seller: <strong>clarks_official</strong></div>161      </div>162    </div>163 164    <div class="divider"></div>165 166    <div class="field">167      <div class="label">Report Category</div>168      <div class="select">169        <span>Prohibited and restricted items</span>170        <span class="arrow">171          <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6z"/></svg>172        </span>173      </div>174    </div>175 176    <div class="field">177      <div class="label">Reason for Report</div>178      <div class="select">179        <span>Animals, plants, and wildlife</span>180        <span class="arrow">181          <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6z"/></svg>182        </span>183      </div>184    </div>185 186    <div class="field">187      <div class="label">Detailed Reason</div>188      <div class="select white-border">189        <span>Turtle or tortoise shell items</span>190        <span class="arrow">191          <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6z"/></svg>192        </span>193      </div>194    </div>195 196    <div class="note">Before reporting an item, please review the <a href="#">eBay Listings Policies</a>.</div>197 198    <div class="field">199      <div class="label">Brief Description</div>200      <div class="textarea"></div>201      <div class="helper">100 characters left. Do not include HTML or JavaScript.</div>202    </div>203 204    <div class="submit">Submit report</div>205  </div>206 207  <div class="gesture-bar"></div>208</div>209</body>210</html>