GD-ML/AndroidCode

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>Dropdown List Modal</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: system-ui, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #0b1020; /* deep, dark app background */20    color: #fff;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 120px;30    background: #000000;31    display: flex;32    align-items: center;33    padding: 0 40px;34    box-sizing: border-box;35    color: #ffffff;36    letter-spacing: 0.5px;37  }38  .status-left {39    display: flex;40    align-items: center;41    gap: 20px;42    font-size: 44px;43    font-weight: 600;44  }45  .status-right {46    margin-left: auto;47    display: flex;48    align-items: center;49    gap: 24px;50  }51  .sb-icon {52    width: 44px;53    height: 44px;54  }55  .battery {56    width: 64px;57    height: 36px;58  }59 60  /* Dim overlay behind the sheet */61  .dim {62    position: absolute;63    top: 120px;64    left: 0;65    width: 1080px;66    height: 2280px;67    background: rgba(0,0,0,0.55);68  }69 70  /* Modal sheet */71  .sheet {72    position: absolute;73    left: 40px;74    right: 40px;75    top: 160px;76    bottom: 160px;77    background: #1c1e1d;78    border-radius: 40px;79    box-shadow: 0 10px 30px rgba(0,0,0,0.6);80    overflow: hidden;81  }82  .list {83    position: absolute;84    inset: 0;85    overflow-y: auto;86    padding: 8px 0;87  }88  .item {89    height: 160px;90    display: flex;91    align-items: center;92    padding: 0 48px;93    box-sizing: border-box;94    border-bottom: 1px solid #2b2d2c;95    color: #f0f0f0;96    font-size: 54px;97    letter-spacing: 0.2px;98  }99  .item:last-child {100    border-bottom: none;101  }102  .item-label {103    flex: 1;104  }105  .radio {106    width: 64px;107    height: 64px;108  }109  .radio circle,110  .radio path {111    transition: all 0.2s ease;112  }113  .selected .item-label {114    color: #e8ffe8;115  }116  .selected .radio .ring {117    stroke: #9efc93;118  }119  .selected .radio .dot {120    fill: #9efc93;121  }122 123  /* Home indicator */124  .home-indicator {125    position: absolute;126    bottom: 36px;127    left: 50%;128    transform: translateX(-50%);129    width: 360px;130    height: 16px;131    background: #e6e6e6;132    border-radius: 12px;133    opacity: 0.9;134  }135</style>136</head>137<body>138<div id="render-target">139  <!-- Status bar -->140  <div class="status-bar">141    <div class="status-left">142      <div>8:30</div>143      <div style="font-size:38px; opacity:0.8;">35°</div>144    </div>145    <div class="status-right">146      <!-- Cellular -->147      <svg class="sb-icon" viewBox="0 0 24 24" fill="#ffffff">148        <rect x="2" y="16" width="4" height="6" rx="1"></rect>149        <rect x="8" y="12" width="4" height="10" rx="1" opacity="0.8"></rect>150        <rect x="14" y="8" width="4" height="14" rx="1" opacity="0.6"></rect>151      </svg>152      <!-- Wi-Fi -->153      <svg class="sb-icon" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">154        <path d="M2 8c5-4 15-4 20 0"></path>155        <path d="M5 12c3-3 11-3 14 0"></path>156        <path d="M8 16c2-2 6-2 8 0"></path>157        <circle cx="12" cy="19" r="1.8" fill="#ffffff"></circle>158      </svg>159      <!-- Notifications (simple bell) -->160      <svg class="sb-icon" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">161        <path d="M12 3c-3 0-5 2-5 5v4l-2 3h14l-2-3V8c0-3-2-5-5-5z"></path>162        <path d="M9 19c1.5 1.5 4.5 1.5 6 0" stroke-linecap="round"></path>163      </svg>164      <!-- Battery -->165      <svg class="battery" viewBox="0 0 60 30" fill="none" stroke="#ffffff" stroke-width="2">166        <rect x="2" y="4" width="50" height="22" rx="4"></rect>167        <rect x="52" y="10" width="6" height="10" rx="2" fill="#ffffff"></rect>168        <rect x="6" y="8" width="40" height="14" rx="2" fill="#ffffff"></rect>169      </svg>170    </div>171  </div>172 173  <!-- Dim overlay -->174  <div class="dim"></div>175 176  <!-- Bottom sheet list -->177  <div class="sheet">178    <div class="list">179      <div class="item">180        <div class="item-label">Batch</div>181        <svg class="radio" viewBox="0 0 24 24">182          <circle class="ring" cx="12" cy="12" r="9" fill="none" stroke="#cfd8dc" stroke-width="2"></circle>183        </svg>184      </div>185 186      <div class="item">187        <div class="item-label">C/C++</div>188        <svg class="radio" viewBox="0 0 24 24">189          <circle class="ring" cx="12" cy="12" r="9" fill="none" stroke="#cfd8dc" stroke-width="2"></circle>190        </svg>191      </div>192 193      <div class="item">194        <div class="item-label">CSS</div>195        <svg class="radio" viewBox="0 0 24 24">196          <circle class="ring" cx="12" cy="12" r="9" fill="none" stroke="#cfd8dc" stroke-width="2"></circle>197        </svg>198      </div>199 200      <div class="item">201        <div class="item-label">HTML</div>202        <svg class="radio" viewBox="0 0 24 24">203          <circle class="ring" cx="12" cy="12" r="9" fill="none" stroke="#cfd8dc" stroke-width="2"></circle>204        </svg>205      </div>206 207      <div class="item selected">208        <div class="item-label">JSON</div>209        <svg class="radio" viewBox="0 0 24 24">210          <circle class="ring" cx="12" cy="12" r="9" fill="none" stroke="#9efc93" stroke-width="2"></circle>211          <circle class="dot" cx="12" cy="12" r="4.5" fill="#9efc93"></circle>212        </svg>213      </div>214 215      <div class="item">216        <div class="item-label">Java</div>217        <svg class="radio" viewBox="0 0 24 24">218          <circle class="ring" cx="12" cy="12" r="9" fill="none" stroke="#cfd8dc" stroke-width="2"></circle>219        </svg>220      </div>221 222      <div class="item">223        <div class="item-label">JavaScript</div>224        <svg class="radio" viewBox="0 0 24 24">225          <circle class="ring" cx="12" cy="12" r="9" fill="none" stroke="#cfd8dc" stroke-width="2"></circle>226        </svg>227      </div>228 229      <div class="item">230        <div class="item-label">Less</div>231        <svg class="radio" viewBox="0 0 24 24">232          <circle class="ring" cx="12" cy="12" r="9" fill="none" stroke="#cfd8dc" stroke-width="2"></circle>233        </svg>234      </div>235 236      <div class="item">237        <div class="item-label">Markdown</div>238        <svg class="radio" viewBox="0 0 24 24">239          <circle class="ring" cx="12" cy="12" r="9" fill="none" stroke="#cfd8dc" stroke-width="2"></circle>240        </svg>241      </div>242 243      <div class="item">244        <div class="item-label">PHP</div>245        <svg class="radio" viewBox="0 0 24 24">246          <circle class="ring" cx="12" cy="12" r="9" fill="none" stroke="#cfd8dc" stroke-width="2"></circle>247        </svg>248      </div>249 250      <div class="item">251        <div class="item-label">Pug</div>252        <svg class="radio" viewBox="0 0 24 24">253          <circle class="ring" cx="12" cy="12" r="9" fill="none" stroke="#cfd8dc" stroke-width="2"></circle>254        </svg>255      </div>256 257      <div class="item">258        <div class="item-label">Python</div>259        <svg class="radio" viewBox="0 0 24 24">260          <circle class="ring" cx="12" cy="12" r="9" fill="none" stroke="#cfd8dc" stroke-width="2"></circle>261        </svg>262      </div>263    </div>264  </div>265 266  <!-- Home indicator -->267  <div class="home-indicator"></div>268</div>269</body>270</html>