GD-ML/AndroidCode
13.4k
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 Item UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #0a0a0a;15 }16 * { box-sizing: border-box; }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 120px;25 background: #000;26 color: #ffffff;27 display: flex;28 align-items: center;29 justify-content: space-between;30 padding: 0 40px;31 font-size: 40px;32 }33 .status-icons {34 display: flex;35 align-items: center;36 gap: 24px;37 }38 .dot { width: 14px; height: 14px; background: #fff; border-radius: 50%; opacity: 0.85; }39 .wifi svg, .battery svg { display: block; }40 41 /* Header */42 .header {43 position: absolute;44 top: 120px;45 left: 0;46 width: 1080px;47 height: 160px;48 background: #000;49 display: flex;50 align-items: center;51 padding: 0 40px;52 }53 .close-btn {54 width: 96px; height: 96px;55 border: 4px solid #666;56 border-radius: 50%;57 color: #bcbcbc;58 display: flex;59 align-items: center;60 justify-content: center;61 font-size: 64px;62 margin-right: 24px;63 }64 .title {65 font-size: 64px;66 font-weight: 700;67 color: #bdbdbd;68 }69 70 /* Faint background text */71 .background-text {72 position: absolute;73 top: 310px;74 left: 48px;75 font-size: 110px;76 color: #bdbdbd;77 opacity: 0.15;78 letter-spacing: 1px;79 }80 81 /* Dialog card */82 .card {83 position: absolute;84 top: 520px;85 left: 48px;86 width: 984px;87 background: #3d3d3d;88 border-radius: 20px;89 box-shadow: 0 22px 0 rgba(0,0,0,0.45), 0 18px 28px rgba(0,0,0,0.6);90 overflow: hidden;91 }92 .product-row {93 display: flex;94 gap: 32px;95 padding: 36px;96 background: #2e2e2e;97 border-bottom: 1px solid rgba(255,255,255,0.08);98 }99 .img-placeholder {100 width: 280px;101 height: 280px;102 background: #E0E0E0;103 border: 1px solid #BDBDBD;104 display: flex;105 justify-content: center;106 align-items: center;107 color: #757575;108 font-size: 28px;109 text-align: center;110 }111 .product-info {112 flex: 1;113 display: flex;114 flex-direction: column;115 justify-content: center;116 }117 .product-title {118 font-size: 40px;119 color: #e3e3e3;120 line-height: 1.25;121 margin-bottom: 24px;122 }123 .product-meta {124 font-size: 28px;125 color: #9d9d9d;126 line-height: 1.7;127 }128 129 /* Options list */130 .options {131 padding: 28px;132 }133 .option {134 display: flex;135 align-items: center;136 justify-content: space-between;137 background: #5a5a5a;138 border-radius: 14px;139 padding: 38px 36px;140 margin-bottom: 22px;141 border: 1px solid rgba(255,255,255,0.08);142 }143 .option-text {144 font-size: 48px;145 color: #ffffff;146 }147 .radio {148 width: 64px; height: 64px;149 }150 151 /* Bottom gesture bar */152 .gesture-bar {153 position: absolute;154 bottom: 32px; left: 50%;155 transform: translateX(-50%);156 width: 240px; height: 12px;157 background: #eaeaea;158 border-radius: 6px;159 opacity: 0.9;160 }161</style>162</head>163<body>164<div id="render-target">165 166 <!-- Status Bar -->167 <div class="status-bar">168 <div>5:45</div>169 <div class="status-icons">170 <div class="dot"></div>171 <div class="dot"></div>172 <div class="dot"></div>173 <div class="dot"></div>174 <div class="dot"></div>175 <div class="wifi">176 <svg width="40" height="32" viewBox="0 0 40 32">177 <path d="M2 10c9-8 27-8 36 0" stroke="#fff" stroke-width="3" fill="none" opacity="0.9"/>178 <path d="M8 16c6-5 18-5 24 0" stroke="#fff" stroke-width="3" fill="none" opacity="0.9"/>179 <circle cx="20" cy="24" r="3" fill="#fff"/>180 </svg>181 </div>182 <div class="battery">183 <svg width="46" height="24" viewBox="0 0 46 24">184 <rect x="1" y="3" width="40" height="18" rx="3" stroke="#fff" stroke-width="3" fill="none"/>185 <rect x="5" y="6" width="28" height="12" fill="#fff"/>186 <rect x="41" y="8" width="4" height="8" fill="#fff"/>187 </svg>188 </div>189 </div>190 </div>191 192 <!-- Header -->193 <div class="header">194 <div class="close-btn">×</div>195 <div class="title">Report this item</div>196 </div>197 198 <!-- Faint background text -->199 <div class="background-text">File a report</div>200 201 <!-- Dialog Card -->202 <div class="card">203 <div class="product-row">204 <div class="img-placeholder">[IMG: Robot Vacuum]</div>205 <div class="product-info">206 <div class="product-title">207 FDW Robot Vacuum Cleaner 2000Pa Strong Suction, 4400mAh, Black208 </div>209 <div class="product-meta">210 Item no: 134742755024<br>211 Seller: xpectmoreforless212 </div>213 </div>214 </div>215 216 <div class="options">217 <div class="option">218 <div class="option-text">General household Items</div>219 <svg class="radio" viewBox="0 0 64 64">220 <circle cx="32" cy="32" r="26" fill="none" stroke="#e6e6e6" stroke-width="4"/>221 </svg>222 </div>223 <div class="option">224 <div class="option-text">Hygiene items</div>225 <svg class="radio" viewBox="0 0 64 64">226 <circle cx="32" cy="32" r="26" fill="none" stroke="#e6e6e6" stroke-width="4"/>227 </svg>228 </div>229 <div class="option">230 <div class="option-text">Medical supplies</div>231 <svg class="radio" viewBox="0 0 64 64">232 <circle cx="32" cy="32" r="26" fill="none" stroke="#e6e6e6" stroke-width="4"/>233 </svg>234 </div>235 <div class="option">236 <div class="option-text">Other</div>237 <svg class="radio" viewBox="0 0 64 64">238 <circle cx="32" cy="32" r="26" fill="none" stroke="#e6e6e6" stroke-width="4"/>239 </svg>240 </div>241 <div class="option">242 <div class="option-text">Sanitation items</div>243 <svg class="radio" viewBox="0 0 64 64">244 <circle cx="32" cy="32" r="26" fill="none" stroke="#e6e6e6" stroke-width="4"/>245 </svg>246 </div>247 </div>248 </div>249 250 <!-- Bottom gesture bar -->251 <div class="gesture-bar"></div>252</div>253</body>254</html>