GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Alarm Sound UI</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: "Segoe UI", Arial, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #1f242a; /* dark app background */18    color: #E9EEF5;19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 120px;28    padding: 0 36px;29    box-sizing: border-box;30    display: flex;31    align-items: center;32    justify-content: space-between;33    color: #D7DFE8;34    font-size: 38px;35    letter-spacing: 0.2px;36  }37  .status-icons {38    display: flex;39    align-items: center;40    gap: 28px;41  }42  .status-dot {43    width: 12px;44    height: 12px;45    background: #D7DFE8;46    border-radius: 50%;47    opacity: 0.8;48  }49  .status-pill {50    width: 44px;51    height: 28px;52    border-radius: 4px;53    background: #D7DFE8;54    opacity: 0.85;55  }56 57  /* App bar / header */58  .app-header {59    position: absolute;60    top: 120px;61    left: 0;62    width: 100%;63    padding: 28px 36px 32px 36px;64    box-sizing: border-box;65  }66  .title-row {67    display: flex;68    align-items: center;69    justify-content: space-between;70    margin-bottom: 40px;71  }72  .left-title {73    display: flex;74    align-items: center;75    gap: 26px;76  }77  .header-title {78    font-size: 64px;79    font-weight: 600;80    color: #E9EEF5;81  }82 83  /* Tabs / Pills */84  .tabs {85    display: flex;86    gap: 24px;87    margin-top: 8px;88  }89  .pill {90    display: inline-flex;91    align-items: center;92    gap: 22px;93    padding: 26px 38px;94    border-radius: 90px;95    background: #2a3037;96    color: #E9EEF5;97    font-size: 38px;98  }99  .pill.active {100    background: #2e3740;101    box-shadow: inset 0 0 0 3px #43566a;102  }103 104  /* List */105  .list {106    position: absolute;107    top: 360px;108    left: 0;109    width: 100%;110    padding-bottom: 160px;111  }112  .list-item {113    display: flex;114    align-items: center;115    justify-content: space-between;116    padding: 34px 36px;117    box-sizing: border-box;118    height: 170px;119    border-bottom: 1px solid rgba(255,255,255,0.06);120    background: #1f242a;121  }122  .list-item:nth-child(2) {123    background: #232930;124  }125  .item-left {126    display: flex;127    align-items: center;128    gap: 34px;129  }130  .icon-round {131    width: 96px;132    height: 96px;133    border-radius: 72px;134    background: #2a3037;135    display: flex;136    align-items: center;137    justify-content: center;138  }139  .item-title {140    font-size: 46px;141    color: #E3E8EF;142  }143  .item-right {144    display: flex;145    align-items: center;146    gap: 34px;147  }148 149  /* Bottom gesture bar */150  .gesture-bar {151    position: absolute;152    bottom: 50px;153    left: 50%;154    transform: translateX(-50%);155    width: 520px;156    height: 16px;157    background: #E9EEF5;158    opacity: 0.7;159    border-radius: 10px;160  }161 162  /* SVG helpers */163  .icon-svg {164    width: 48px;165    height: 48px;166    fill: none;167    stroke: #E9EEF5;168    stroke-width: 4;169  }170  .icon-svg.play {171    fill: #E9EEF5;172    stroke: none;173  }174  .menu-icon circle {175    fill: #E9EEF5;176  }177  .eq-bar rect {178    fill: #8AB4F8;179  }180  .check {181    width: 64px;182    height: 64px;183  }184  .check circle {185    fill: #8AB4F8;186  }187  .check path {188    fill: #1f242a;189  }190</style>191</head>192<body>193<div id="render-target">194 195  <!-- Status Bar -->196  <div class="status-bar">197    <div>11:19</div>198    <div class="status-icons">199      <div class="status-pill"></div>200      <div class="status-dot"></div>201      <div class="status-dot"></div>202      <div class="status-dot"></div>203      <div class="status-pill" style="width:30px;"></div>204    </div>205  </div>206 207  <!-- Header with back and menu -->208  <div class="app-header">209    <div class="title-row">210      <div class="left-title">211        <!-- Back arrow -->212        <svg class="icon-svg" viewBox="0 0 24 24">213          <path d="M15 6 L9 12 L15 18" stroke-linecap="round" stroke-linejoin="round"></path>214          <path d="M9 12 H22" stroke-linecap="round"></path>215        </svg>216        <div class="header-title">Alarm sound</div>217      </div>218      <!-- 3-dot menu -->219      <svg width="44" height="44" viewBox="0 0 24 24" class="menu-icon">220        <circle cx="12" cy="5" r="2.5"></circle>221        <circle cx="12" cy="12" r="2.5"></circle>222        <circle cx="12" cy="19" r="2.5"></circle>223      </svg>224    </div>225 226    <!-- Tabs -->227    <div class="tabs">228      <div class="pill active">229        <div class="icon-round" style="width:64px;height:64px;">230          <!-- Bell icon -->231          <svg class="icon-svg" viewBox="0 0 24 24" style="width:34px;height:34px;">232            <path d="M12 21a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z" stroke-linecap="round" stroke-linejoin="round"></path>233            <path d="M18 16H6c0-5 2-8 6-8s6 3 6 8z" stroke-linecap="round" stroke-linejoin="round"></path>234          </svg>235        </div>236        <div>Sounds</div>237      </div>238      <div class="pill">239        <div class="icon-round" style="width:64px;height:64px;">240          <!-- Play icon -->241          <svg class="icon-svg play" viewBox="0 0 24 24" style="width:34px;height:34px;">242            <polygon points="8,5 20,12 8,19"></polygon>243          </svg>244        </div>245        <div>YouTube Music</div>246      </div>247    </div>248  </div>249 250  <!-- List of sounds -->251  <div class="list">252 253    <div class="list-item">254      <div class="item-left">255        <div class="icon-round">256          <svg class="icon-svg" viewBox="0 0 24 24">257            <path d="M12 21a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z" stroke-linecap="round" stroke-linejoin="round"></path>258            <path d="M18 16H6c0-5 2-8 6-8s6 3 6 8z" stroke-linecap="round" stroke-linejoin="round"></path>259          </svg>260        </div>261        <div class="item-title">Early Twilight</div>262      </div>263    </div>264 265    <div class="list-item">266      <div class="item-left">267        <div class="icon-round">268          <svg class="icon-svg" viewBox="0 0 24 24">269            <path d="M12 21a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z" stroke-linecap="round" stroke-linejoin="round"></path>270            <path d="M18 16H6c0-5 2-8 6-8s6 3 6 8z" stroke-linecap="round" stroke-linejoin="round"></path>271          </svg>272        </div>273        <div class="item-title">Full of Wonder</div>274      </div>275      <div class="item-right">276        <!-- Equalizer icon -->277        <svg width="48" height="48" viewBox="0 0 24 24" class="eq-bar">278          <rect x="3" y="12" width="3" height="8" rx="1"></rect>279          <rect x="10.5" y="8" width="3" height="12" rx="1"></rect>280          <rect x="18" y="10" width="3" height="10" rx="1"></rect>281        </svg>282        <!-- Check icon -->283        <svg class="check" viewBox="0 0 24 24">284          <circle cx="12" cy="12" r="11"></circle>285          <path d="M9 12.5l2.3 2.5L16 9.5" fill="none" stroke="#1f242a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>286        </svg>287      </div>288    </div>289 290    <div class="list-item">291      <div class="item-left">292        <div class="icon-round">293          <svg class="icon-svg" viewBox="0 0 24 24">294            <path d="M12 21a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z" stroke-linecap="round" stroke-linejoin="round"></path>295            <path d="M18 16H6c0-5 2-8 6-8s6 3 6 8z" stroke-linecap="round" stroke-linejoin="round"></path>296          </svg>297        </div>298        <div class="item-title">Gentle Breeze</div>299      </div>300    </div>301 302    <div class="list-item">303      <div class="item-left">304        <div class="icon-round">305          <svg class="icon-svg" viewBox="0 0 24 24">306            <path d="M12 21a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z" stroke-linecap="round" stroke-linejoin="round"></path>307            <path d="M18 16H6c0-5 2-8 6-8s6 3 6 8z" stroke-linecap="round" stroke-linejoin="round"></path>308          </svg>309        </div>310        <div class="item-title">Icicles</div>311      </div>312    </div>313 314    <div class="list-item">315      <div class="item-left">316        <div class="icon-round">317          <svg class="icon-svg" viewBox="0 0 24 24">318            <path d="M12 21a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z" stroke-linecap="round" stroke-linejoin="round"></path>319            <path d="M18 16H6c0-5 2-8 6-8s6 3 6 8z" stroke-linecap="round" stroke-linejoin="round"></path>320          </svg>321        </div>322        <div class="item-title">Jump-Start</div>323      </div>324    </div>325 326    <div class="list-item">327      <div class="item-left">328        <div class="icon-round">329          <svg class="icon-svg" viewBox="0 0 24 24">330            <path d="M12 21a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z" stroke-linecap="round" stroke-linejoin="round"></path>331            <path d="M18 16H6c0-5 2-8 6-8s6 3 6 8z" stroke-linecap="round" stroke-linejoin="round"></path>332          </svg>333        </div>334        <div class="item-title">Loose Change</div>335      </div>336    </div>337 338    <div class="list-item">339      <div class="item-left">340        <div class="icon-round">341          <svg class="icon-svg" viewBox="0 0 24 24">342            <path d="M12 21a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z" stroke-linecap="round" stroke-linejoin="round"></path>343            <path d="M18 16H6c0-5 2-8 6-8s6 3 6 8z" stroke-linecap="round" stroke-linejoin="round"></path>344          </svg>345        </div>346        <div class="item-title">A Real Hoot</div>347      </div>348    </div>349 350    <div class="list-item">351      <div class="item-left">352        <div class="icon-round">353          <svg class="icon-svg" viewBox="0 0 24 24">354            <path d="M12 21a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z" stroke-linecap="round" stroke-linejoin="round"></path>355            <path d="M18 16H6c0-5 2-8 6-8s6 3 6 8z" stroke-linecap="round" stroke-linejoin="round"></path>356          </svg>357        </div>358        <div class="item-title">Rolling Fog</div>359      </div>360    </div>361 362    <div class="list-item">363      <div class="item-left">364        <div class="icon-round">365          <svg class="icon-svg" viewBox="0 0 24 24">366            <path d="M12 21a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z" stroke-linecap="round" stroke-linejoin="round"></path>367            <path d="M18 16H6c0-5 2-8 6-8s6 3 6 8z" stroke-linecap="round" stroke-linejoin="round"></path>368          </svg>369        </div>370        <div class="item-title">Spokes</div>371      </div>372    </div>373 374    <div class="list-item">375      <div class="item-left">376        <div class="icon-round">377          <svg class="icon-svg" viewBox="0 0 24 24">378            <path d="M12 21a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z" stroke-linecap="round" stroke-linejoin="round"></path>379            <path d="M18 16H6c0-5 2-8 6-8s6 3 6 8z" stroke-linecap="round" stroke-linejoin="round"></path>380          </svg>381        </div>382        <div class="item-title">Sun-Shower</div>383      </div>384    </div>385 386  </div>387 388  <!-- Bottom gesture bar -->389  <div class="gesture-bar"></div>390 391</div>392</body>393</html>