GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Modal List - Categories</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #202224;14    font-family: Roboto, Arial, 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    padding: 0 36px;30    font-size: 40px;31    z-index: 10;32  }33  .status-right {34    margin-left: auto;35    display: flex;36    align-items: center;37    gap: 24px;38    font-size: 34px;39    opacity: 0.9;40  }41  .status-icon {42    width: 38px;43    height: 38px;44    border-radius: 50%;45    border: 3px solid #bbb;46    opacity: 0.9;47  }48  .battery {49    display: inline-block;50    width: 56px;51    height: 28px;52    border: 4px solid #fff;53    border-radius: 6px;54    position: relative;55    margin-right: 8px;56  }57  .battery::after {58    content: "";59    position: absolute;60    right: -10px;61    top: 6px;62    width: 8px;63    height: 16px;64    background: #fff;65    border-radius: 2px;66  }67  .battery-level {68    position: absolute;69    left: 0;70    top: 0;71    height: 100%;72    width: 80%;73    background: #fff;74  }75 76  /* Underlying app placeholder */77  .app-bg {78    position: absolute;79    top: 120px;80    left: 0;81    width: 1080px;82    height: 2120px;83    background: #2b2d30;84  }85  .app-placeholder {86    position: absolute;87    left: 64px;88    top: 220px;89    width: 952px;90    height: 1600px;91    background: #E0E0E0;92    border: 1px solid #BDBDBD;93    display: flex;94    align-items: center;95    justify-content: center;96    color: #757575;97    font-size: 40px;98    border-radius: 12px;99  }100 101  /* Scrim */102  .scrim {103    position: absolute;104    top: 120px;105    left: 0;106    width: 1080px;107    height: 2180px;108    background: rgba(0,0,0,0.55);109    z-index: 20;110  }111 112  /* Modal sheet */113  .modal {114    position: absolute;115    top: 160px;116    left: 54px;117    width: 972px;118    background: #55585b;119    border-radius: 20px;120    box-shadow: 0 10px 40px rgba(0,0,0,0.5);121    z-index: 30;122    overflow: hidden;123  }124  .modal .option {125    display: flex;126    align-items: center;127    justify-content: space-between;128    padding: 42px 30px;129    font-size: 46px;130    line-height: 1.15;131    color: #fff;132    border-bottom: 1px solid #6b6e71;133  }134  .modal .option:last-child {135    border-bottom: none;136  }137  .radio {138    width: 62px;139    height: 62px;140    border-radius: 50%;141    border: 6px solid #c2c3c5;142    box-sizing: border-box;143    flex-shrink: 0;144    opacity: 0.95;145  }146 147  /* Close fab on left */148  .close-fab {149    position: absolute;150    top: 150px;151    left: 8px;152    width: 96px;153    height: 96px;154    border-radius: 50%;155    background: #6a6d70;156    color: #fff;157    display: flex;158    align-items: center;159    justify-content: center;160    font-size: 52px;161    z-index: 35;162    box-shadow: 0 6px 12px rgba(0,0,0,0.4);163  }164 165  /* Bottom navigation pill */166  .nav-pill {167    position: absolute;168    bottom: 40px;169    left: 50%;170    transform: translateX(-50%);171    width: 260px;172    height: 18px;173    background: #fff;174    border-radius: 12px;175    opacity: 0.9;176    z-index: 10;177  }178</style>179</head>180<body>181<div id="render-target">182  <div class="status-bar">183    <div class="time">4:57</div>184    <div class="status-right">185      <span class="status-icon"></span>186      <span class="status-icon"></span>187      <span class="status-icon"></span>188      <div class="battery"><div class="battery-level"></div></div>189      <span>95%</span>190    </div>191  </div>192 193  <div class="app-bg"></div>194  <div class="app-placeholder">[IMG: Underlying app content]</div>195 196  <div class="scrim"></div>197 198  <div class="close-fab">✕</div>199 200  <div class="modal">201    <div class="option">202      <div>Adult material</div>203      <div class="radio"></div>204    </div>205    <div class="option">206      <div>Animals, plants, and wildlife</div>207      <div class="radio"></div>208    </div>209    <div class="option">210      <div>Artifacts, grave-related items, and Native American arts and crafts</div>211      <div class="radio"></div>212    </div>213    <div class="option">214      <div>Drugs, alcohol, and tobacco</div>215      <div class="radio"></div>216    </div>217    <div class="option">218      <div>Electronics and electronic surveillance equipment</div>219      <div class="radio"></div>220    </div>221    <div class="option">222      <div>Firearms, weapons, and knives</div>223      <div class="radio"></div>224    </div>225    <div class="option">226      <div>Government and police-related items</div>227      <div class="radio"></div>228    </div>229    <div class="option">230      <div>Hazardous materials</div>231      <div class="radio"></div>232    </div>233    <div class="option">234      <div>Illegal items and items encouraging illegal activity</div>235      <div class="radio"></div>236    </div>237    <div class="option">238      <div>Manufacturers' coupons, gift cards, and credit cards</div>239      <div class="radio"></div>240    </div>241    <div class="option">242      <div>Offensive or violent material</div>243      <div class="radio"></div>244    </div>245    <div class="option">246      <div>Other prohibited or restricted items</div>247      <div class="radio"></div>248    </div>249  </div>250 251  <div class="nav-pill"></div>252</div>253</body>254</html>