GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Alarm Sound UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px; height: 2400px;9    position: relative; overflow: hidden;10    background: #121212; color: #ffffff;11  }12 13  /* Status bar */14  .status-bar {15    position: absolute; top: 0; left: 0; right: 0;16    height: 96px; padding: 18px 28px 0 28px;17    color: #EDEDED; font-weight: 600; font-size: 34px;18  }19  .status-time { position: absolute; left: 28px; top: 20px; }20  .status-icons { position: absolute; right: 24px; top: 20px; display: flex; gap: 18px; align-items: center; }21  .status-icon {22    width: 32px; height: 32px; border-radius: 6px;23    background: #2A2A2A; border: 1px solid #3A3A3A;24  }25 26  /* Top actions */27  .top-back {28    position: absolute; top: 120px; left: 32px; width: 60px; height: 60px;29  }30  .top-menu {31    position: absolute; top: 128px; right: 32px; width: 44px; height: 44px;32  }33 34  /* Title */35  .title {36    position: absolute; top: 220px; left: 40px;37    font-size: 88px; font-weight: 700; letter-spacing: -1px;38  }39 40  /* Tabs */41  .tabs { position: absolute; top: 420px; left: 40px; display: flex; gap: 26px; }42  .pill {43    display: inline-flex; align-items: center; gap: 18px;44    padding: 22px 34px; border-radius: 80px; font-size: 38px;45    color: #C9D5FF; border: 1px solid #3A4A7A; background: transparent;46  }47  .pill svg { width: 42px; height: 42px; fill: #C9D5FF; }48  .pill.selected {49    background: #274B8C; border-color: transparent; color: #ffffff;50  }51  .pill.selected svg { fill: #ffffff; }52 53  /* Section titles */54  .section-title {55    position: absolute; left: 40px; color: #8AB4F8;56    font-size: 40px; font-weight: 600;57  }58  #rec-title { top: 530px; }59  #your-title { top: 820px; }60  #device-title { top: 1100px; }61 62  /* Rows */63  .row {64    position: absolute; left: 40px; right: 40px;65    height: 150px; display: flex; align-items: center;66    padding: 0 28px; border-radius: 26px; color: #F5F5F5;67    font-size: 44px; letter-spacing: 0.2px;68  }69  .row .label { margin-left: 30px; }70  .row .right { margin-left: auto; display: flex; align-items: center; }71  .row.selected { background: #21262C; }72  .row.dimmed { color: #B6B6B6; }73 74  /* Icon circles used in rows */75  .circle {76    width: 110px; height: 110px; border-radius: 55px;77    background: #1F2A36; border: 1px solid #2E3844;78    display: flex; align-items: center; justify-content: center;79  }80  .circle svg { width: 58px; height: 58px; fill: #8AB4F8; }81 82  /* Check badge */83  .check-badge {84    width: 64px; height: 64px; border-radius: 32px;85    background: #3B6CC6; display: flex; align-items: center; justify-content: center;86    margin-right: 8px;87  }88  .check-badge svg { width: 36px; height: 36px; fill: #fff; }89 90  /* Divider helper for last row preview */91  .fade-bottom {92    position: absolute; bottom: 0; left: 0; right: 0; height: 180px;93    background: linear-gradient(to bottom, rgba(18,18,18,0), rgba(18,18,18,1));94  }95</style>96</head>97<body>98<div id="render-target">99 100  <!-- Status bar -->101  <div class="status-bar">102    <div class="status-time">11:14</div>103    <div class="status-icons">104      <div class="status-icon"></div>105      <div class="status-icon"></div>106      <div class="status-icon"></div>107      <div class="status-icon"></div>108      <div class="status-icon"></div>109    </div>110  </div>111 112  <!-- Back arrow -->113  <svg class="top-back" viewBox="0 0 48 48">114    <path fill="#FFFFFF" d="M28 8 L12 24 L28 40 L32 36 L20 24 L32 12 Z"></path>115  </svg>116 117  <!-- 3-dot menu -->118  <svg class="top-menu" viewBox="0 0 24 24">119    <circle cx="12" cy="4" r="2" fill="#FFFFFF"></circle>120    <circle cx="12" cy="12" r="2" fill="#FFFFFF"></circle>121    <circle cx="12" cy="20" r="2" fill="#FFFFFF"></circle>122  </svg>123 124  <!-- Title -->125  <div class="title">Alarm sound</div>126 127  <!-- Tabs -->128  <div class="tabs">129    <div class="pill selected">130      <svg viewBox="0 0 24 24">131        <path d="M12 3c-4 0-6 3-6 7v4l-2 2v2h16v-2l-2-2v-4c0-4-2-7-6-7zm0 17a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2z"></path>132      </svg>133      <span>Sounds</span>134    </div>135    <div class="pill">136      <svg viewBox="0 0 24 24">137        <polygon points="8,5 19,12 8,19" />138      </svg>139      <span>YouTube Music</span>140    </div>141  </div>142 143  <!-- Recorded sounds -->144  <div id="rec-title" class="section-title">Recorded sounds</div>145  <div class="row" style="top: 630px;">146    <div class="circle">147      <!-- Microphone icon -->148      <svg viewBox="0 0 24 24">149        <path d="M12 14c2.2 0 4-1.8 4-4V6c0-2.2-1.8-4-4-4s-4 1.8-4 4v4c0 2.2 1.8 4 4 4zm5 0c0 3.3-2.7 6-6 6s-6-2.7-6-6h2c0 2.2 1.8 4 4 4s4-1.8 4-4h2zm-5 8h-2v-3h2v3z"></path>150      </svg>151    </div>152    <div class="label">Record new</div>153  </div>154 155  <!-- Your sounds -->156  <div id="your-title" class="section-title">Your sounds</div>157  <div class="row" style="top: 920px;">158    <div class="circle">159      <!-- Plus icon -->160      <svg viewBox="0 0 24 24">161        <path d="M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7z"></path>162      </svg>163    </div>164    <div class="label">Add new</div>165  </div>166 167  <!-- Device sounds -->168  <div id="device-title" class="section-title">Device sounds</div>169 170  <!-- Silent -->171  <div class="row dimmed" style="top: 1200px;">172    <div class="circle" style="background:#1B1B1B; border-color:#2A2A2A;">173      <!-- Bell with strike -->174      <svg viewBox="0 0 24 24">175        <path fill="#B6B6B6" d="M12 3c-4 0-6 3-6 7v3l-2 2v2h8.5l-1.7-2H6v-2l.1-.9 8.7 8.7 1.4-1.4-9.7-9.7C7 6.7 8.9 5 12 5c3.1 0 5 1.7 6.5 4.7L20 11v2h-2l-2 2h1.6L12 8.4V3z"></path>176        <path fill="#B6B6B6" d="M14 19a2 2 0 0 1-4 0h4z"></path>177        <path fill="#B6B6B6" d="M5 5 L19 19" stroke="#B6B6B6" stroke-width="2"></path>178      </svg>179    </div>180    <div class="label">Silent</div>181  </div>182 183  <!-- Default (Bright Morning) selected -->184  <div class="row selected" style="top: 1380px;">185    <div class="circle">186      <!-- Bell icon -->187      <svg viewBox="0 0 24 24">188        <path d="M12 3c-4 0-6 3-6 7v4l-2 2v2h16v-2l-2-2v-4c0-4-2-7-6-7zm0 17a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2z"></path>189      </svg>190    </div>191    <div class="label">Default (Bright Morning)</div>192    <div class="right">193      <div class="check-badge">194        <svg viewBox="0 0 24 24">195          <path d="M9.5 16.5l-3.5-3.5 1.6-1.6 1.9 1.9 6.4-6.4 1.6 1.6z"></path>196        </svg>197      </div>198    </div>199  </div>200 201  <!-- Bright Morning -->202  <div class="row" style="top: 1560px;">203    <div class="circle">204      <svg viewBox="0 0 24 24">205        <path d="M12 3c-4 0-6 3-6 7v4l-2 2v2h16v-2l-2-2v-4c0-4-2-7-6-7zm0 17a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2z"></path>206      </svg>207    </div>208    <div class="label">Bright Morning</div>209  </div>210 211  <!-- Cuckoo Clock -->212  <div class="row" style="top: 1740px;">213    <div class="circle">214      <svg viewBox="0 0 24 24">215        <path d="M12 3c-4 0-6 3-6 7v4l-2 2v2h16v-2l-2-2v-4c0-4-2-7-6-7zm0 17a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2z"></path>216      </svg>217    </div>218    <div class="label">Cuckoo Clock</div>219  </div>220 221  <!-- Early Twilight -->222  <div class="row" style="top: 1920px;">223    <div class="circle">224      <svg viewBox="0 0 24 24">225        <path d="M12 3c-4 0-6 3-6 7v4l-2 2v2h16v-2l-2-2v-4c0-4-2-7-6-7zm0 17a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2z"></path>226      </svg>227    </div>228    <div class="label">Early Twilight</div>229  </div>230 231  <div class="fade-bottom"></div>232 233</div>234</body>235</html>