GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Report Item Modal</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #1a1a1a;14    font-family: Arial, Helvetica, sans-serif;15    color: #fff;16  }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: #fff;27    display: flex;28    align-items: center;29    justify-content: space-between;30    padding: 0 32px;31    box-sizing: border-box;32    letter-spacing: 0.5px;33    font-weight: 600;34  }35  .status-left { font-size: 42px; }36  .status-right {37    display: flex;38    align-items: center;39    gap: 22px;40  }41  .status-icon {42    width: 32px; height: 32px;43    border-radius: 50%;44    border: 3px solid #ccc;45    opacity: 0.9;46  }47  .battery {48    width: 46px; height: 28px; border: 3px solid #ccc; border-radius: 6px; position: relative;49  }50  .battery:after {51    content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 12px; background: #ccc; border-radius: 2px;52  }53 54  /* Dimmed page background */55  .page-dim {56    position: absolute;57    top: 120px;58    left: 0;59    right: 0;60    bottom: 0;61    background: linear-gradient(#3a3a3a 0%, #5b5b5b 60%, #585858 100%);62  }63 64  /* Large faint page title behind modal */65  .faint-title {66    position: absolute;67    top: 220px;68    left: 40px;69    font-size: 96px;70    color: rgba(255,255,255,0.25);71    font-weight: 600;72  }73 74  /* Modal header */75  .modal-header {76    position: absolute;77    top: 130px;78    left: 24px;79    right: 24px;80    height: 120px;81    display: flex;82    align-items: center;83    gap: 24px;84    color: #d0d0d0;85  }86  .close-btn {87    width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center;88  }89  .close-btn svg { width: 54px; height: 54px; }90  .modal-header h1 {91    margin: 0;92    font-size: 64px;93    font-weight: 700;94    letter-spacing: 0.5px;95  }96 97  /* Modal card */98  .modal-card {99    position: absolute;100    left: 40px;101    right: 40px;102    top: 520px;103    background: #2c2c2c;104    border-radius: 18px;105    box-shadow: 0 12px 0 rgba(0,0,0,0.6), 0 22px 40px rgba(0,0,0,0.8);106    padding: 36px;107    box-sizing: border-box;108  }109 110  .item-row {111    display: flex;112    gap: 32px;113    align-items: center;114    margin-bottom: 28px;115  }116  .thumb {117    width: 260px; height: 200px;118    background: #E0E0E0; border: 1px solid #BDBDBD;119    display: flex; align-items: center; justify-content: center;120    color: #757575; font-size: 28px; text-align: center;121  }122  .item-info .title {123    font-size: 42px; line-height: 1.25; color: #efefef; font-weight: 600;124    margin-bottom: 12px;125  }126  .item-info .meta {127    font-size: 32px; color: #b9b9b9; margin-top: 6px;128  }129 130  .options {131    margin-top: 16px;132    border-radius: 12px;133    overflow: hidden;134  }135  .option {136    background: #5a5a5a;137    padding: 36px 28px;138    display: flex;139    align-items: center;140    justify-content: space-between;141    border-top: 1px solid #4a4a4a;142    border-bottom: 1px solid #4a4a4a;143  }144  .option:first-child { border-top: none; }145  .option:last-child { border-bottom: none; }146  .option .label {147    font-size: 48px; line-height: 1.2; color: #fff; font-weight: 600;148  }149  .radio {150    width: 54px; height: 54px;151  }152  .radio svg { width: 54px; height: 54px; }153  .home-indicator {154    position: absolute;155    bottom: 42px;156    left: 50%;157    transform: translateX(-50%);158    width: 220px; height: 16px; border-radius: 12px; background: #eaeaea; opacity: 0.9;159  }160</style>161</head>162<body>163<div id="render-target">164  <div class="status-bar">165    <div class="status-left">4:58</div>166    <div class="status-right">167      <div class="status-icon"></div>168      <div class="status-icon"></div>169      <div class="status-icon"></div>170      <div class="battery"></div>171      <div style="font-size:32px; color:#fff;">96%</div>172    </div>173  </div>174 175  <div class="page-dim"></div>176 177  <div class="modal-header">178    <div class="close-btn">179      <svg viewBox="0 0 24 24">180        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#ccc" stroke-width="3" stroke-linecap="round" fill="none"></path>181      </svg>182    </div>183    <h1>Report this item</h1>184  </div>185 186  <div class="faint-title">File a report</div>187 188  <div class="modal-card">189    <div class="item-row">190      <div class="thumb">[IMG: Brown leather shoe]</div>191      <div class="item-info">192        <div class="title">Clarks Originals Womens Wallabee Moccasin Cup Brown Leather Shoes</div>193        <div class="meta">Item no: 155608186658</div>194        <div class="meta">Seller: clarks_official</div>195      </div>196    </div>197 198    <div class="options">199      <div class="option">200        <div class="label">Animals, animal parts, pelts, or skins</div>201        <div class="radio">202          <svg viewBox="0 0 24 24">203            <circle cx="12" cy="12" r="9" stroke="#ddd" stroke-width="2" fill="none"></circle>204          </svg>205        </div>206      </div>207      <div class="option">208        <div class="label">Ivory or bone</div>209        <div class="radio">210          <svg viewBox="0 0 24 24">211            <circle cx="12" cy="12" r="9" stroke="#ddd" stroke-width="2" fill="none"></circle>212          </svg>213        </div>214      </div>215      <div class="option">216        <div class="label">Marine mammal items</div>217        <div class="radio">218          <svg viewBox="0 0 24 24">219            <circle cx="12" cy="12" r="9" stroke="#ddd" stroke-width="2" fill="none"></circle>220          </svg>221        </div>222      </div>223      <div class="option">224        <div class="label">Other wildlife items that can't be listed</div>225        <div class="radio">226          <svg viewBox="0 0 24 24">227            <circle cx="12" cy="12" r="9" stroke="#ddd" stroke-width="2" fill="none"></circle>228          </svg>229        </div>230      </div>231      <div class="option">232        <div class="label">Turtle or tortoise shell items</div>233        <div class="radio">234          <svg viewBox="0 0 24 24">235            <circle cx="12" cy="12" r="9" stroke="#ddd" stroke-width="2" fill="none"></circle>236          </svg>237        </div>238      </div>239    </div>240  </div>241 242  <div class="home-indicator"></div>243</div>244</body>245</html>