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>Choose Bluetooth device</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2160px;11    position: relative;12    overflow: hidden;13    background: #121212;14    color: #F3EFE7;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 110px;24    color: #EDE7DB;25    display: flex;26    align-items: center;27    padding: 0 36px;28    box-sizing: border-box;29    font-size: 38px;30    letter-spacing: 1px;31  }32  .status-left { flex: 1; }33  .status-right { display: flex; align-items: center; gap: 22px; }34  .icon-battery, .icon-wifi, .icon-dnd {35    width: 44px; height: 44px;36  }37  .icon-battery rect, .icon-wifi path, .icon-dnd circle { fill: #EDE7DB; }38 39  /* Title */40  .title {41    position: absolute;42    top: 140px;43    left: 60px;44    right: 60px;45    font-size: 78px;46    line-height: 1.2;47    font-weight: 700;48    color: #EFEAE2;49  }50 51  /* Section header */52  .section {53    position: absolute;54    top: 370px;55    left: 60px;56    right: 60px;57    display: flex;58    align-items: center;59    justify-content: space-between;60    color: #E9C977;61    font-size: 42px;62    letter-spacing: 0.5px;63  }64  .chev {65    width: 36px; height: 36px;66  }67  .chev path { fill: #E9C977; }68 69  /* List */70  .list {71    position: absolute;72    top: 450px;73    left: 50px;74    right: 50px;75  }76  .item {77    display: flex;78    align-items: center;79    gap: 34px;80    padding: 26px 10px;81    height: 150px;82  }83  .circle {84    width: 120px;85    height: 120px;86    border-radius: 60px;87    display: flex;88    align-items: center;89    justify-content: center;90  }91  .name {92    font-size: 56px;93    color: #F6F1E8;94    letter-spacing: 0.5px;95  }96 97  /* circle colors */98  .c-peach { background: #FFE4A8; }99  .c-mint { background: #CDEED9; }100  .c-green { background: #D6F3D6; }101  .c-pink { background: #FBC2DD; }102  .c-lav { background: #DCC6FF; }103 104  /* simple icons inside circles */105  .ico {106    width: 76px; height: 76px;107  }108  .ico path { fill: #B56B00; }109  .ico-green path { fill: #2E8B57; }110  .ico-pink path { fill: #9B2E6B; }111  .ico-purple path { fill: #6E5ACB; }112 113  /* Bottom nav bar mimic */114  .bottom-area {115    position: absolute;116    left: 0; right: 0; bottom: 40px;117    height: 90px;118    display: flex;119    align-items: center;120    justify-content: center;121  }122  .home-pill {123    width: 210px;124    height: 22px;125    background: #CFCFCF;126    border-radius: 16px;127    opacity: 0.85;128  }129  .back-chev {130    position: absolute;131    left: 150px;132    width: 44px; height: 44px;133    border-left: 8px solid #BDBDBD;134    border-bottom: 8px solid #BDBDBD;135    transform: rotate(45deg);136    opacity: 0.9;137  }138</style>139</head>140<body>141<div id="render-target">142 143  <!-- Status bar -->144  <div class="status-bar">145    <div class="status-left">1:46</div>146    <div class="status-right">147      <!-- Do Not Disturb icon -->148      <svg class="icon-dnd" viewBox="0 0 24 24">149        <circle cx="12" cy="12" r="10"></circle>150        <rect x="6" y="11" width="12" height="2" fill="#121212"></rect>151      </svg>152      <!-- Wi‑Fi icon -->153      <svg class="icon-wifi" viewBox="0 0 24 24">154        <path d="M12 20a2 2 0 100-4 2 2 0 000 4zm6-4a8.5 8.5 0 00-12 0l2 2a5.5 5.5 0 018 0l2-2zm4-4a13 13 0 00-20 0l2.2 2.2a10 10 0 0115.6 0L22 12z"></path>155      </svg>156      <!-- Battery icon + percent -->157      <svg class="icon-battery" viewBox="0 0 28 18">158        <rect x="1" y="3" width="22" height="12" rx="2"></rect>159        <rect x="24" y="6" width="3" height="6" rx="1"></rect>160        <rect x="3" y="5" width="18" height="8" fill="#EDE7DB"></rect>161      </svg>162      <div style="font-size:34px;">100%</div>163    </div>164  </div>165 166  <!-- Title -->167  <div class="title">Choose Bluetooth device</div>168 169  <!-- Section header -->170  <div class="section">171    <div>Available devices</div>172    <svg class="chev" viewBox="0 0 24 24">173      <path d="M7 10l5 5 5-5z"></path>174    </svg>175  </div>176 177  <!-- Device list -->178  <div class="list">179 180    <div class="item">181      <div class="circle c-peach">182        <svg class="ico" viewBox="0 0 24 24">183          <path d="M6 3h3c0 2 .3 3.2.8 4.6.1.3 0 .7-.2.9L8 10c1.9 3 4.1 5.1 7 7l1.6-1.6c.2-.2.6-.3.9-.2 1.4.5 2.6.7 4.6.8v3c-9.7 0-18-8.3-18-18z"></path>184        </svg>185      </div>186      <div class="name">SAMSUNG M20</div>187    </div>188 189    <div class="item">190      <div class="circle c-mint">191        <svg class="ico ico-green" viewBox="0 0 24 24">192          <path d="M12 4a8 8 0 00-8 8v6a2 2 0 002 2h2v-7H6a6 6 0 0112 0h-2v7h2a2 2 0 002-2v-6a8 8 0 00-8-8z"></path>193        </svg>194      </div>195      <div class="name">KJ781BT</div>196    </div>197 198    <div class="item">199      <div class="circle c-green">200        <svg class="ico ico-green" viewBox="0 0 24 24">201          <path d="M12 4a8 8 0 00-8 8v6a2 2 0 002 2h2v-7H6a6 6 0 0112 0h-2v7h2a2 2 0 002-2v-6a8 8 0 00-8-8z"></path>202        </svg>203      </div>204      <div class="name">Anuj's Galaxy A21s</div>205    </div>206 207    <div class="item">208      <div class="circle c-pink">209        <svg class="ico ico-pink" viewBox="0 0 24 24">210          <path d="M6 3h3c0 2 .3 3.2.8 4.6.1.3 0 .7-.2.9L8 10c1.9 3 4.1 5.1 7 7l1.6-1.6c.2-.2.6-.3.9-.2 1.4.5 2.6.7 4.6.8v3c-9.7 0-18-8.3-18-18z"></path>211        </svg>212      </div>213      <div class="name">Redmi 8</div>214    </div>215 216    <div class="item">217      <div class="circle c-lav">218        <svg class="ico ico-purple" viewBox="0 0 24 24">219          <path d="M6 3h3c0 2 .3 3.2.8 4.6.1.3 0 .7-.2.9L8 10c1.9 3 4.1 5.1 7 7l1.6-1.6c.2-.2.6-.3.9-.2 1.4.5 2.6.7 4.6.8v3c-9.7 0-18-8.3-18-18z"></path>220        </svg>221      </div>222      <div class="name">OnePlus 10R 5G</div>223    </div>224 225    <div class="item">226      <div class="circle c-lav">227        <svg class="ico ico-purple" viewBox="0 0 24 24">228          <path d="M6 3h3c0 2 .3 3.2.8 4.6.1.3 0 .7-.2.9L8 10c1.9 3 4.1 5.1 7 7l1.6-1.6c.2-.2.6-.3.9-.2 1.4.5 2.6.7 4.6.8v3c-9.7 0-18-8.3-18-18z"></path>229        </svg>230      </div>231      <div class="name">OnePlus 8T</div>232    </div>233 234  </div>235 236  <!-- Bottom controls -->237  <div class="bottom-area">238    <div class="back-chev"></div>239    <div class="home-pill"></div>240  </div>241 242</div>243</body>244</html>