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>Alarm Sound UI</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#1f2429; color:#e9eef3;12  }13 14  /* Status bar */15  .status-bar {16    position:absolute; top:0; left:0; right:0;17    height:110px; padding:0 36px;18    display:flex; align-items:center; justify-content:space-between;19    color:#cfd6dc; font-size:42px; letter-spacing:0.5px;20  }21  .status-right { display:flex; align-items:center; gap:28px; }22  .dot { width:10px; height:10px; background:#cfd6dc; border-radius:50%; display:inline-block; margin:0 10px; opacity:0.8; }23  /* simple status icons */24  .icon-wifi, .icon-battery, .icon-signal { width:54px; height:54px; }25  .icon-wifi path, .icon-battery path, .icon-signal path { fill:#cfd6dc; }26 27  /* Header */28  .header {29    position:absolute; top:110px; left:0; right:0;30    height:140px; display:flex; align-items:center;31    padding:0 36px; gap:32px;32  }33  .back-btn {34    width:84px; height:84px; display:flex; align-items:center; justify-content:center;35    border-radius:42px; color:#cfd6dc;36  }37  .title { font-size:64px; font-weight:600; color:#e9eef3; }38 39  /* Tabs */40  .tabs {41    position:absolute; top:275px; left:36px; right:36px;42    display:flex; gap:28px;43  }44  .chip {45    display:flex; align-items:center; gap:22px;46    padding:26px 34px; border-radius:36px; font-size:40px;47    background:#2a3138; color:#dce3e9;48    border:1px solid rgba(255,255,255,0.06);49  }50  .chip.active {51    background:#2f3a44;52    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08);53  }54  .chip .circle-icon {55    width:64px; height:64px; border-radius:50%;56    display:flex; align-items:center; justify-content:center;57    background:#3a444d;58  }59  .chip svg { width:40px; height:40px; }60 61  /* List */62  .list {63    position:absolute; top:380px; left:0; right:0; bottom:0;64    padding:16px 0 120px 0;65    overflow:hidden;66  }67  .row {68    display:flex; align-items:center; justify-content:space-between;69    padding:36px 36px;70    height:140px;71    border-top:1px solid rgba(255,255,255,0.04);72    border-bottom:1px solid rgba(0,0,0,0.2);73  }74  .row.selected { background:#2b3239; }75  .row .left {76    display:flex; align-items:center; gap:34px;77  }78  .ring-icon {79    width:92px; height:92px; border-radius:46px;80    background:#2b3239; display:flex; align-items:center; justify-content:center;81  }82  .row .text { font-size:52px; color:#e9eef3; }83  .check {84    width:64px; height:64px; border-radius:32px;85    border:2px solid #8fb1ff;86    display:flex; align-items:center; justify-content:center;87    margin-right:10px;88  }89  .check svg { width:46px; height:46px; }90  /* Simple icons styling */91  .ring-icon svg, .back-btn svg { fill:#cfd6dc; }92  .row:not(.selected) .check { border-color:transparent; }93</style>94</head>95<body>96<div id="render-target">97 98  <!-- Status Bar -->99  <div class="status-bar">100    <div class="status-left">11:18 <span class="dot"></span> 31</div>101    <div class="status-right">102      <!-- small icons approximations -->103      <svg class="icon-signal" viewBox="0 0 24 24"><path d="M2 20h2v-2H2v2zm4 0h2v-6H6v6zm4 0h2v-10h-2v10zm4 0h2V6h-2v14zm4 0h2V2h-2v18z"/></svg>104      <svg class="icon-wifi" viewBox="0 0 24 24"><path d="M12 20c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6.6-6.6 1.4-1.4C17.3 9 14.7 8 12 8s-5.3 1-8 3l1.4 1.4C7.8 10.1 9.9 9.2 12 9.2s4.2.9 6.6 3.2zM12 5.5c3.2 0 6.2 1.1 8.8 3.2l1.3-1.5C19.9 3.8 16.1 2.5 12 2.5S4.1 3.8 1.9 7.2l1.3 1.5C5.8 6.6 8.8 5.5 12 5.5z"/></svg>105      <svg class="icon-battery" viewBox="0 0 24 24"><path d="M17 6h3v3h2v6h-2v3h-3V6zM3 7h12v10H3V7zm2 2v6h8V9H5z"/></svg>106    </div>107  </div>108 109  <!-- Header -->110  <div class="header">111    <div class="back-btn">112      <svg viewBox="0 0 24 24"><path d="M15.5 19 8.5 12l7-7 1.5 1.5L11.5 12l5.5 5.5-1.5 1.5z"/></svg>113    </div>114    <div class="title">Alarm sound</div>115    <div style="margin-left:auto; width:72px; height:72px; opacity:0.6;">116      <!-- kebab menu placeholder -->117      <svg viewBox="0 0 24 24"><path fill="#cfd6dc" d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4z"/></svg>118    </div>119  </div>120 121  <!-- Tabs -->122  <div class="tabs">123    <div class="chip active">124      <div class="circle-icon">125        <!-- bell icon -->126        <svg viewBox="0 0 24 24"><path d="M12 22a2.5 2.5 0 0 0 2.3-2h-4.6A2.5 2.5 0 0 0 12 22zm8-6c-1.7-1.5-3-3.3-3-6a5 5 0 0 0-10 0c0 2.7-1.3 4.5-3 6v2h16v-2z"/></svg>127      </div>128      Sounds129    </div>130    <div class="chip">131      <div class="circle-icon">132        <!-- play icon -->133        <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7-11-7z"/></svg>134      </div>135      YouTube Music136    </div>137  </div>138 139  <!-- List -->140  <div class="list">141    <!-- Selected row -->142    <div class="row selected">143      <div class="left">144        <div class="ring-icon">145          <svg viewBox="0 0 24 24"><path d="M12 22a2.5 2.5 0 0 0 2.3-2h-4.6A2.5 2.5 0 0 0 12 22zm8-6c-1.7-1.5-3-3.3-3-6a5 5 0 0 0-10 0c0 2.7-1.3 4.5-3 6v2h16v-2z"/></svg>146        </div>147        <div class="text">Early Twilight</div>148      </div>149      <div class="check">150        <svg viewBox="0 0 24 24"><path fill="#8fb1ff" d="M9.5 16.5 5.5 12.5l1.4-1.4 2.6 2.6 7-7 1.4 1.4-8.4 8.4z"/></svg>151      </div>152    </div>153 154    <div class="row">155      <div class="left">156        <div class="ring-icon">157          <svg viewBox="0 0 24 24"><path d="M12 22a2.5 2.5 0 0 0 2.3-2h-4.6A2.5 2.5 0 0 0 12 22zm8-6c-1.7-1.5-3-3.3-3-6a5 5 0 0 0-10 0c0 2.7-1.3 4.5-3 6v2h16v-2z"/></svg>158        </div>159        <div class="text">Full of Wonder</div>160      </div>161      <div class="check"></div>162    </div>163 164    <div class="row">165      <div class="left">166        <div class="ring-icon">167          <svg viewBox="0 0 24 24"><path d="M12 22a2.5 2.5 0 0 0 2.3-2h-4.6A2.5 2.5 0 0 0 12 22zm8-6c-1.7-1.5-3-3.3-3-6a5 5 0 0 0-10 0c0 2.7-1.3 4.5-3 6v2h16v-2z"/></svg>168        </div>169        <div class="text">Gentle Breeze</div>170      </div>171      <div class="check"></div>172    </div>173 174    <div class="row">175      <div class="left">176        <div class="ring-icon">177          <svg viewBox="0 0 24 24"><path d="M12 22a2.5 2.5 0 0 0 2.3-2h-4.6A2.5 2.5 0 0 0 12 22zm8-6c-1.7-1.5-3-3.3-3-6a5 5 0 0 0-10 0c0 2.7-1.3 4.5-3 6v2h16v-2z"/></svg>178        </div>179        <div class="text">Icicles</div>180      </div>181      <div class="check"></div>182    </div>183 184    <div class="row">185      <div class="left">186        <div class="ring-icon">187          <svg viewBox="0 0 24 24"><path d="M12 22a2.5 2.5 0 0 0 2.3-2h-4.6A2.5 2.5 0 0 0 12 22zm8-6c-1.7-1.5-3-3.3-3-6a5 5 0 0 0-10 0c0 2.7-1.3 4.5-3 6v2h16v-2z"/></svg>188        </div>189        <div class="text">Jump-Start</div>190      </div>191      <div class="check"></div>192    </div>193 194    <div class="row">195      <div class="left">196        <div class="ring-icon">197          <svg viewBox="0 0 24 24"><path d="M12 22a2.5 2.5 0 0 0 2.3-2h-4.6A2.5 2.5 0 0 0 12 22zm8-6c-1.7-1.5-3-3.3-3-6a5 5 0 0 0-10 0c0 2.7-1.3 4.5-3 6v2h16v-2z"/></svg>198        </div>199        <div class="text">Loose Change</div>200      </div>201      <div class="check"></div>202    </div>203 204    <div class="row">205      <div class="left">206        <div class="ring-icon">207          <svg viewBox="0 0 24 24"><path d="M12 22a2.5 2.5 0 0 0 2.3-2h-4.6A2.5 2.5 0 0 0 12 22zm8-6c-1.7-1.5-3-3.3-3-6a5 5 0 0 0-10 0c0 2.7-1.3 4.5-3 6v2h16v-2z"/></svg>208        </div>209        <div class="text">A Real Hoot</div>210      </div>211      <div class="check"></div>212    </div>213 214    <div class="row">215      <div class="left">216        <div class="ring-icon">217          <svg viewBox="0 0 24 24"><path d="M12 22a2.5 2.5 0 0 0 2.3-2h-4.6A2.5 2.5 0 0 0 12 22zm8-6c-1.7-1.5-3-3.3-3-6a5 5 0 0 0-10 0c0 2.7-1.3 4.5-3 6v2h16v-2z"/></svg>218        </div>219        <div class="text">Rolling Fog</div>220      </div>221      <div class="check"></div>222    </div>223 224    <div class="row">225      <div class="left">226        <div class="ring-icon">227          <svg viewBox="0 0 24 24"><path d="M12 22a2.5 2.5 0 0 0 2.3-2h-4.6A2.5 2.5 0 0 0 12 22zm8-6c-1.7-1.5-3-3.3-3-6a5 5 0 0 0-10 0c0 2.7-1.3 4.5-3 6v2h16v-2z"/></svg>228        </div>229        <div class="text">Spokes</div>230      </div>231      <div class="check"></div>232    </div>233 234    <div class="row">235      <div class="left">236        <div class="ring-icon">237          <svg viewBox="0 0 24 24"><path d="M12 22a2.5 2.5 0 0 0 2.3-2h-4.6A2.5 2.5 0 0 0 12 22zm8-6c-1.7-1.5-3-3.3-3-6a5 5 0 0 0-10 0c0 2.7-1.3 4.5-3 6v2h16v-2z"/></svg>238        </div>239        <div class="text">Sun-Shower</div>240      </div>241      <div class="check"></div>242    </div>243  </div>244 245</div>246</body>247</html>