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 Modal</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", "Segoe UI", Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #1a1a1a;15 border-radius: 0;16 box-shadow: none;17 color: #efefef;18 }19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 1080px;25 height: 140px;26 background: #000;27 color: #fff;28 }29 .status-content {30 position: absolute;31 top: 30px;32 left: 36px;33 right: 36px;34 display: flex;35 align-items: center;36 justify-content: space-between;37 font-weight: 500;38 }39 .status-left { font-size: 40px; }40 .status-right { display: flex; align-items: center; gap: 22px; }41 .battery {42 display: flex;43 align-items: center;44 gap: 10px;45 font-size: 34px;46 }47 .battery svg { width: 38px; height: 22px; }48 /* Page header behind modal */49 .page-header {50 position: absolute;51 top: 160px;52 left: 36px;53 right: 36px;54 height: 120px;55 display: flex;56 align-items: center;57 gap: 24px;58 color: #bdbdbd;59 }60 .page-header .title {61 font-size: 68px;62 font-weight: 700;63 letter-spacing: 0.5px;64 }65 .icon-btn {66 width: 96px;67 height: 96px;68 display: inline-flex;69 align-items: center;70 justify-content: center;71 }72 .icon-btn svg { width: 72px; height: 72px; opacity: 0.9; }73 /* Background page content */74 .content {75 position: absolute;76 top: 320px;77 left: 36px;78 right: 36px;79 color: #cfcfcf;80 }81 .content h1 {82 margin: 0 0 24px 0;83 font-size: 88px;84 font-weight: 600;85 color: #b5b5b5;86 }87 .item-card {88 width: 1008px;89 background: #262626;90 border-radius: 16px;91 box-shadow: 0 4px 0 #111;92 padding: 28px;93 display: flex;94 gap: 28px;95 align-items: center;96 }97 .img-ph {98 width: 260px;99 height: 220px;100 background: #E0E0E0;101 border: 1px solid #BDBDBD;102 display: flex;103 align-items: center;104 justify-content: center;105 color: #757575;106 font-size: 26px;107 border-radius: 8px;108 }109 .item-info {110 flex: 1;111 color: #d9d9d9;112 font-size: 36px;113 line-height: 1.35;114 }115 .divider {116 width: 1008px;117 height: 2px;118 background: #3f3f3f;119 margin: 36px 0;120 }121 /* Overlay and modal */122 .overlay {123 position: absolute;124 inset: 0;125 background: rgba(0,0,0,0.55);126 }127 .modal {128 position: absolute;129 left: 36px;130 right: 36px;131 top: 860px;132 background: #555555;133 border-radius: 20px;134 box-shadow: 0 24px 36px rgba(0,0,0,0.8), 0 10px 0 #111;135 padding: 34px 26px 34px 26px;136 width: 1008px;137 }138 .option-row {139 display: flex;140 align-items: center;141 justify-content: space-between;142 padding: 42px 28px;143 color: #ffffff;144 font-size: 58px;145 font-weight: 500;146 letter-spacing: 0.2px;147 border-bottom: 1px solid #777777;148 }149 .option-row:last-child { border-bottom: none; }150 .radio {151 width: 64px;152 height: 64px;153 border-radius: 50%;154 border: 4px solid #d9d9d9;155 box-sizing: border-box;156 background: transparent;157 }158 /* Bottom navigation pill */159 .nav-pill {160 position: absolute;161 left: 50%;162 transform: translateX(-50%);163 bottom: 48px;164 width: 200px;165 height: 14px;166 background: #eaeaea;167 border-radius: 8px;168 opacity: 0.9;169 }170</style>171</head>172<body>173<div id="render-target">174 <!-- Status bar -->175 <div class="status-bar">176 <div class="status-content">177 <div class="status-left">4:56</div>178 <div class="status-right">179 <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">180 <circle cx="12" cy="12" r="10" opacity="0.85"/>181 </svg>182 <div class="battery">183 <svg viewBox="0 0 28 16" xmlns="http://www.w3.org/2000/svg">184 <rect x="0.5" y="2.5" width="24" height="11" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>185 <rect x="25.5" y="6" width="2" height="4" fill="#fff"/>186 <rect x="2.5" y="4.5" width="17" height="7" fill="#fff"/>187 </svg>188 <span>95%</span>189 </div>190 </div>191 </div>192 </div>193 194 <!-- Page header -->195 <div class="page-header">196 <div class="icon-btn" aria-label="Close">197 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">198 <circle cx="12" cy="12" r="10" fill="none" stroke="#9e9e9e" stroke-width="2"></circle>199 <path d="M7 7 L17 17 M17 7 L7 17" stroke="#9e9e9e" stroke-width="2" stroke-linecap="round"/>200 </svg>201 </div>202 <div class="title">Report this item</div>203 </div>204 205 <!-- Background content -->206 <div class="content">207 <h1>File a report</h1>208 <div class="item-card">209 <div class="img-ph">[IMG: Brown moccasin shoe]</div>210 <div class="item-info">211 <div>Clarks Originals Womens Wallabee Moccasin Cup Brown Leather Shoes</div>212 <div style="margin-top: 14px; color:#bdbdbd;">Item no: 155608186658</div>213 <div style="margin-top: 8px; color:#bdbdbd;">Seller: clarks_official</div>214 </div>215 </div>216 <div class="divider"></div>217 </div>218 219 <!-- Overlay and modal -->220 <div class="overlay"></div>221 <div class="modal">222 <div class="option-row">223 <span>Copyright and trademark</span>224 <div class="radio"></div>225 </div>226 <div class="option-row">227 <span>Listing practices</span>228 <div class="radio"></div>229 </div>230 <div class="option-row">231 <span>Price gouging</span>232 <div class="radio"></div>233 </div>234 <div class="option-row">235 <span>Prohibited and restricted items</span>236 <div class="radio"></div>237 </div>238 </div>239 240 <!-- Bottom navigation bar pill -->241 <div class="nav-pill"></div>242</div>243</body>244</html>