GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Report this item UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative; overflow: hidden;11    width: 1080px; height: 2400px;12    background: #f4f4f4;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 0; left: 0;18    width: 100%; height: 120px;19    background: #000;20    color: #fff;21  }22  .status-content {23    height: 100%;24    display: flex; align-items: center;25    padding: 0 36px;26    font-weight: 600; font-size: 36px;27    justify-content: space-between;28  }29  .status-icons { display: flex; align-items: center; gap: 26px; }30  .icon { width: 40px; height: 40px; }31 32  /* Header */33  .header {34    position: absolute; top: 120px; left: 0;35    width: 100%; height: 220px;36    background: #111;37    color: #fff;38    display: flex; align-items: center;39    padding: 0 40px;40  }41  .close-circle {42    width: 96px; height: 96px; border-radius: 48px;43    border: 4px solid #fff;44    display: flex; align-items: center; justify-content: center;45    margin-right: 24px;46  }47  .header-title {48    font-size: 66px; font-weight: 800; letter-spacing: 0.3px;49  }50 51  /* Background helper text */52  .bg-title {53    position: absolute; top: 340px; left: 40px;54    font-size: 110px; color: #dcdcdc; opacity: 0.4; font-weight: 700;55  }56 57  /* Dark panel (modal) */58  .panel {59    position: absolute; top: 420px; left: 32px;60    width: 1016px; background: #1c1c1c; color: #ddd;61    border-radius: 20px;62    box-shadow: 0 12px 0 #2c2c2c, 0 26px 40px rgba(0,0,0,0.45);63    padding: 36px;64  }65  .item-row {66    display: flex; gap: 28px;67  }68  .img-placeholder {69    width: 240px; height: 240px;70    background: #E0E0E0; border: 1px solid #BDBDBD;71    display: flex; justify-content: center; align-items: center;72    color: #757575; font-weight: 600; text-align: center; padding: 10px;73  }74  .item-info { flex: 1; }75  .item-title {76    font-size: 40px; line-height: 1.3; color: #eaeaea; font-weight: 700;77  }78  .meta {79    margin-top: 16px; font-size: 34px; color: #a6a6a6;80  }81  .divider {82    height: 1px; background: #3a3a3a; margin: 36px 0 28px 0;83  }84 85  .label {86    font-size: 34px; color: #cfcfcf; margin: 18px 0 12px 0; font-weight: 600;87  }88 89  .select {90    position: relative;91    background: #1f1f1f;92    border: 3px solid #bfbfbf;93    border-radius: 14px;94    height: 96px;95    display: flex; align-items: center;96    padding: 0 26px; color: #e8e8e8; font-size: 38px;97  }98  .select.placeholder { color: #9aa0a6; }99  .caret {100    position: absolute; right: 20px; top: 50%;101    transform: translateY(-50%);102    width: 42px; height: 42px;103  }104 105  .button {106    margin-top: 44px;107    height: 96px; border-radius: 14px;108    background: #0f3a66;109    color: #cbd7e7; font-size: 40px; font-weight: 800;110    display: flex; align-items: center; justify-content: center;111    box-shadow: 0 8px 0 #12243a;112  }113 114  /* Bottom system bar */115  .bottom-bar {116    position: absolute; bottom: 0; left: 0;117    width: 100%; height: 120px; background: #000;118  }119  .home-handle {120    position: absolute; bottom: 34px; left: 50%;121    transform: translateX(-50%);122    width: 220px; height: 16px; border-radius: 8px;123    background: #cfd2d6;124    opacity: 0.9;125  }126</style>127</head>128<body>129<div id="render-target">130 131  <!-- Status bar -->132  <div class="status-bar">133    <div class="status-content">134      <div>5:43</div>135      <div class="status-icons">136        <!-- Simple placeholders for status icons -->137        <svg class="icon" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="3"/></svg>138        <svg class="icon" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="3"/></svg>139        <svg class="icon" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="3"/></svg>140        <svg class="icon" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="3"/></svg>141        <svg class="icon" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="3"/></svg>142        <!-- Wi-Fi -->143        <svg class="icon" viewBox="0 0 24 24" stroke="#fff" fill="none" stroke-width="2">144          <path d="M2 8c5-5 15-5 20 0"/><path d="M5 12c3-3 11-3 14 0"/><path d="M8 16c2-2 6-2 8 0"/><circle cx="12" cy="19" r="1.8" fill="#fff"/>145        </svg>146        <!-- Battery -->147        <svg class="icon" viewBox="0 0 30 24" fill="none" stroke="#fff" stroke-width="2">148          <rect x="2" y="6" width="22" height="12" rx="2" />149          <rect x="24" y="10" width="4" height="4" fill="#fff" stroke="#fff"/>150          <rect x="4" y="8" width="16" height="8" fill="#fff" stroke="none"/>151        </svg>152      </div>153    </div>154  </div>155 156  <!-- Header -->157  <div class="header">158    <div class="close-circle">159      <svg viewBox="0 0 24 24" width="48" height="48" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round">160        <path d="M4 4 L20 20 M20 4 L4 20"/>161      </svg>162    </div>163    <div class="header-title">Report this item</div>164  </div>165 166  <!-- Background big text -->167  <div class="bg-title">File a report</div>168 169  <!-- Main dark panel -->170  <div class="panel">171    <div class="item-row">172      <div class="img-placeholder">[IMG: Robot Vacuum Cleaner]</div>173      <div class="item-info">174        <div class="item-title">FDW Robot Vacuum Cleaner 2000Pa Strong Suction, 4400mAh, Black</div>175        <div class="meta">Item no: 134742755024</div>176        <div class="meta">Seller: xpectmoreforless</div>177      </div>178    </div>179 180    <div class="divider"></div>181 182    <div class="label">Report Category</div>183    <div class="select">184      Price gouging185      <svg class="caret" viewBox="0 0 24 24" fill="#bbb">186        <path d="M6 9l6 6 6-6"/>187      </svg>188    </div>189 190    <div class="label" style="margin-top: 28px;">Reason for Report</div>191    <div class="select placeholder">192      Select from a list of reporting reasons193      <svg class="caret" viewBox="0 0 24 24" fill="#bbb"><path d="M6 9l6 6 6-6"/></svg>194    </div>195 196    <div class="label" style="margin-top: 28px;">Detailed Reason</div>197    <div class="select placeholder">198      Select from a list of detailed reporting reason199      <svg class="caret" viewBox="0 0 24 24" fill="#bbb"><path d="M6 9l6 6 6-6"/></svg>200    </div>201 202    <div class="button">Continue</div>203  </div>204 205  <!-- Bottom system bar -->206  <div class="bottom-bar">207    <div class="home-handle"></div>208  </div>209 210</div>211</body>212</html>