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>Alarms UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #191C1F;15    color: #E0E0E0;16  }17  /* Top bars */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    background: #323436;25    color: #EDEDED;26    display: flex;27    align-items: center;28    padding: 0 36px;29    box-sizing: border-box;30    font-size: 42px;31  }32  .status-right {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 28px;37  }38  .app-bar {39    position: absolute;40    top: 120px;41    left: 0;42    width: 1080px;43    height: 180px;44    background: #323436;45    display: flex;46    align-items: center;47    padding: 0 36px;48    box-sizing: border-box;49  }50  .app-title {51    font-size: 64px;52    font-weight: 500;53    color: #E6E6E6;54  }55  .menu-icon {56    margin-left: auto;57    width: 48px;58    height: 48px;59  }60  /* List area */61  .content {62    position: absolute;63    top: 300px;64    left: 0;65    right: 0;66    bottom: 0;67    padding: 0 36px;68    box-sizing: border-box;69    background: #1E2124;70  }71  .alarm-row {72    position: relative;73    padding: 48px 0 56px 0;74  }75  .time {76    font-size: 160px;77    line-height: 160px;78    color: #BFC3C7;79    letter-spacing: -2px;80  }81  .ampm {82    font-size: 60px;83    color: #9EA2A6;84    margin-left: 12px;85    vertical-align: top;86    position: relative;87    top: -24px;88  }89  .days {90    font-size: 42px;91    color: #8A8D91;92    margin-top: 16px;93  }94  .divider {95    height: 2px;96    background: #2A2D30;97    margin-top: 36px;98  }99  /* Toggle */100  .toggle {101    position: absolute;102    right: 64px;103    top: 32px;104    width: 120px;105    height: 64px;106    border-radius: 32px;107    background: #6A6D70;108  }109  .toggle::after {110    content: "";111    position: absolute;112    top: 6px;113    left: 6px;114    width: 52px;115    height: 52px;116    border-radius: 26px;117    background: #BFC3C7;118    box-shadow: 0 0 0 10px rgba(0,0,0,0.08) inset;119  }120  .row-menu {121    position: absolute;122    right: 80px;123    bottom: 56px;124    width: 36px;125    height: 70px;126  }127  /* FAB */128  .fab {129    position: absolute;130    right: 80px;131    bottom: 360px;132    width: 160px;133    height: 160px;134    border-radius: 80px;135    background: #9A5D1C;136    display: flex;137    align-items: center;138    justify-content: center;139    box-shadow: 0 8px 20px rgba(0,0,0,0.45);140  }141  /* Gesture pill */142  .gesture-pill {143    position: absolute;144    bottom: 48px;145    left: 50%;146    transform: translateX(-50%);147    width: 420px;148    height: 16px;149    background: #EDEDED;150    border-radius: 8px;151    opacity: 0.9;152  }153  .mid-dash {154    position: absolute;155    bottom: 260px;156    left: 50%;157    transform: translateX(-50%);158    width: 160px;159    height: 6px;160    background: #8C8C8C;161    border-radius: 3px;162    opacity: 0.5;163  }164  /* Simple helper icons */165  svg { display: block; }166</style>167</head>168<body>169<div id="render-target">170 171  <!-- Status bar -->172  <div class="status-bar">173    <div>12:39</div>174    <div class="status-right">175      <!-- Weather temp text (simple) -->176      <div>66°</div>177      <!-- Notification bell -->178      <svg width="40" height="40" viewBox="0 0 24 24" fill="#EDEDED">179        <path d="M12 2c-3 0-5 2-5 5v4l-2 2v1h14v-1l-2-2V7c0-3-2-5-5-5zM10 19a2 2 0 0 0 4 0h-4z"/>180      </svg>181      <!-- Location icon -->182      <svg width="40" height="40" viewBox="0 0 24 24" fill="#EDEDED">183        <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/>184      </svg>185      <!-- Dot -->186      <svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="6" fill="#CFCFCF"/></svg>187      <!-- Wi-Fi -->188      <svg width="40" height="40" viewBox="0 0 24 24" fill="#EDEDED">189        <path d="M12 18l2 2-2 2-2-2 2-2zm-6-6l2 2 4-4 4 4 2-2-6-6-6 6zm-4-4l2 2 8-8 8 8 2-2-10-10L2 8z"/>190      </svg>191      <!-- Battery -->192      <svg width="40" height="40" viewBox="0 0 24 24" fill="#EDEDED">193        <path d="M16 4h2v2h2v12h-2v2h-2V4zM4 6h10v12H4V6z"/>194      </svg>195    </div>196  </div>197 198  <!-- App bar -->199  <div class="app-bar">200    <div class="app-title">Alarms</div>201    <!-- Vertical ellipsis -->202    <svg class="menu-icon" viewBox="0 0 24 24">203      <circle cx="12" cy="5" r="2" fill="#CFCFCF"></circle>204      <circle cx="12" cy="12" r="2" fill="#CFCFCF"></circle>205      <circle cx="12" cy="19" r="2" fill="#CFCFCF"></circle>206    </svg>207  </div>208 209  <!-- Content -->210  <div class="content">211    <!-- Alarm 1 -->212    <div class="alarm-row">213      <div class="time">12:38<span class="ampm">PM</span></div>214      <div class="toggle"></div>215      <!-- vertical ellipsis for row -->216      <svg class="row-menu" viewBox="0 0 24 72">217        <circle cx="12" cy="12" r="4" fill="#A9AAAE"></circle>218        <circle cx="12" cy="36" r="4" fill="#A9AAAE"></circle>219        <circle cx="12" cy="60" r="4" fill="#A9AAAE"></circle>220      </svg>221      <div class="divider"></div>222    </div>223 224    <!-- Alarm 2 -->225    <div class="alarm-row">226      <div class="time">8:30<span class="ampm">AM</span></div>227      <div class="days">Mon, Tue, Wed, Thu, Fri</div>228      <div class="toggle"></div>229      <svg class="row-menu" viewBox="0 0 24 72">230        <circle cx="12" cy="12" r="4" fill="#A9AAAE"></circle>231        <circle cx="12" cy="36" r="4" fill="#A9AAAE"></circle>232        <circle cx="12" cy="60" r="4" fill="#A9AAAE"></circle>233      </svg>234      <div class="divider"></div>235    </div>236 237    <!-- Alarm 3 -->238    <div class="alarm-row">239      <div class="time">9:00<span class="ampm">AM</span></div>240      <div class="days">Sat, Sun</div>241      <div class="toggle"></div>242      <svg class="row-menu" viewBox="0 0 24 72">243        <circle cx="12" cy="12" r="4" fill="#A9AAAE"></circle>244        <circle cx="12" cy="36" r="4" fill="#A9AAAE"></circle>245        <circle cx="12" cy="60" r="4" fill="#A9AAAE"></circle>246      </svg>247      <div class="divider"></div>248    </div>249  </div>250 251  <!-- Floating action button -->252  <div class="fab">253    <svg width="64" height="64" viewBox="0 0 24 24">254      <path d="M11 4h2v16h-2zM4 11h16v2H4z" fill="#FFFFFF"/>255    </svg>256  </div>257 258  <!-- Bottom UI elements -->259  <div class="mid-dash"></div>260  <div class="gesture-pill"></div>261</div>262</body>263</html>