GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Modal Options List</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Arial, Helvetica, sans-serif;12  }13  #render-target {14    position: relative;15    overflow: hidden;16    width: 1080px;17    height: 2400px;18    background: #101010;19    color: #fff;20  }21 22  /* Status bar */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 120px;29    background: #000000;30    display: flex;31    align-items: center;32    justify-content: space-between;33    padding: 0 36px;34    box-sizing: border-box;35  }36  .status-left {37    display: flex;38    align-items: center;39    gap: 20px;40    font-size: 46px;41    letter-spacing: 1px;42  }43  .status-right {44    display: flex;45    align-items: center;46    gap: 24px;47  }48  .status-icon {49    width: 40px;50    height: 40px;51    border-radius: 6px;52    background: #ffffff;53    opacity: 0.9;54  }55  .status-dot {56    width: 22px;57    height: 22px;58    border-radius: 50%;59    background: #ffffff;60    opacity: 0.9;61  }62 63  /* Dim background overlay */64  .overlay {65    position: absolute;66    inset: 0;67    background: rgba(0,0,0,0.6);68  }69 70  /* Modal sheet */71  .sheet {72    position: absolute;73    left: 60px;74    top: 150px;75    width: 960px;76    height: 1920px;77    background: #3f4246;78    border-radius: 16px;79    box-shadow: 0 24px 60px rgba(0,0,0,0.6);80    overflow: hidden;81  }82  .sheet-content {83    position: absolute;84    inset: 0;85    overflow-y: auto;86  }87  .list-item {88    display: flex;89    align-items: center;90    justify-content: space-between;91    padding: 46px 40px;92    border-bottom: 2px solid rgba(255,255,255,0.08);93    color: #ffffff;94    font-size: 56px;95    line-height: 1.15;96  }97  .list-item:last-child {98    border-bottom: none;99  }100  .radio {101    width: 64px;102    height: 64px;103    border-radius: 50%;104    border: 6px solid rgba(255,255,255,0.75);105    box-sizing: border-box;106  }107 108  /* Floating back button (left edge) */109  .floating-back {110    position: absolute;111    top: 500px;112    left: 24px;113    width: 90px;114    height: 90px;115    background: rgba(255,255,255,0.1);116    border-radius: 45px;117    display: flex;118    align-items: center;119    justify-content: center;120    backdrop-filter: blur(2px);121  }122  .floating-back svg {123    width: 44px;124    height: 44px;125    fill: none;126    stroke: #ffffff;127    stroke-width: 8;128    stroke-linecap: round;129    stroke-linejoin: round;130  }131 132  /* Android navigation pill */133  .nav-bar {134    position: absolute;135    bottom: 0;136    left: 0;137    width: 1080px;138    height: 140px;139    background: #000000;140    display: flex;141    align-items: center;142    justify-content: center;143  }144  .pill {145    width: 240px;146    height: 12px;147    background: #ffffff;148    border-radius: 12px;149    opacity: 0.9;150  }151</style>152</head>153<body>154<div id="render-target">155  <!-- Status bar -->156  <div class="status-bar">157    <div class="status-left">158      <div>6:14</div>159      <div class="status-dot"></div>160      <div class="status-icon"></div>161    </div>162    <div class="status-right">163      <div class="status-icon"></div>164      <div class="status-icon"></div>165      <div class="status-dot"></div>166    </div>167  </div>168 169  <!-- Dim overlay -->170  <div class="overlay"></div>171 172  <!-- Floating back button -->173  <div class="floating-back">174    <svg viewBox="0 0 24 24">175      <path d="M15 6 L9 12 L15 18" />176    </svg>177  </div>178 179  <!-- Modal sheet with list -->180  <div class="sheet">181    <div class="sheet-content">182      <div class="list-item">183        <span>payment methods</span>184        <div class="radio"></div>185      </div>186      <div class="list-item">187        <span>Compilation and informational items</span>188        <div class="radio"></div>189      </div>190      <div class="list-item">191        <span>Duplicate listings</span>192        <div class="radio"></div>193      </div>194      <div class="list-item">195        <span>Feedback solicitation</span>196        <div class="radio"></div>197      </div>198      <div class="list-item">199        <span>Fraudulent listing activities</span>200        <div class="radio"></div>201      </div>202      <div class="list-item">203        <span>Inappropriate item description</span>204        <div class="radio"></div>205      </div>206      <div class="list-item">207        <span>Inappropriate seller terms</span>208        <div class="radio"></div>209      </div>210      <div class="list-item">211        <span>Links, logos, and videos</span>212        <div class="radio"></div>213      </div>214      <div class="list-item">215        <span>No item listings and inappropriate comments</span>216        <div class="radio"></div>217      </div>218      <div class="list-item">219        <span>Offer to buy or sell outside eBay</span>220        <div class="radio"></div>221      </div>222      <div class="list-item">223        <span>Other listing practices</span>224        <div class="radio"></div>225      </div>226      <div class="list-item">227        <span>Search and browse manipulation</span>228        <div class="radio"></div>229      </div>230      <div class="list-item">231        <span>Stolen property</span>232        <div class="radio"></div>233      </div>234    </div>235  </div>236 237  <!-- Bottom navigation pill -->238  <div class="nav-bar">239    <div class="pill"></div>240  </div>241</div>242</body>243</html>