GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Alarm 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:#1c1613;11    color:#fff;12  }13  .status-bar {14    position:absolute; top:0; left:0; right:0;15    height:110px; padding:0 36px;16    display:flex; align-items:center; justify-content:space-between;17    color:#eae7e4; font-weight:600;18    font-size:46px;19  }20  .status-icons { display:flex; align-items:center; gap:24px; }21  .app-title {22    position:absolute; top:140px; left:46px;23    font-size:86px; font-weight:700; color:#eae7e4;24  }25  .menu-dots {26    position:absolute; top:150px; right:46px;27    width:20px; height:80px; display:flex; flex-direction:column; justify-content:space-between; align-items:center;28  }29  .menu-dots span {30    width:10px; height:10px; border-radius:50%; background:#9c8f86;31  }32  .cards { position:absolute; top:260px; left:26px; right:26px; }33  .card {34    width:1028px; border-radius:54px;35    background:#241c18; margin-bottom:36px;36    padding:44px; box-sizing:border-box;37    position:relative;38    box-shadow: 0 8px 18px rgba(0,0,0,0.35);39  }40  .card.large { padding-top:56px; padding-bottom:56px; }41  .time-row { display:flex; align-items:flex-end; gap:16px; }42  .time {43    font-size:180px; line-height:180px; font-weight:800; letter-spacing:4px; color:#fff;44  }45  .ampm { font-size:58px; margin-bottom:24px; color:#eae7e4; font-weight:700; }46  .sub {47    margin-top:30px; font-size:50px; color:#d0c6bf;48  }49  .sub.orange { color:#f2b367; }50  .toggle {51    position:absolute; right:46px; bottom:54px;52    width:190px; height:90px; border-radius:45px;53    background:#7b4b1d; display:flex; align-items:center; justify-content:flex-end; padding-right:12px;54  }55  .toggle .knob {56    width:68px; height:68px; border-radius:50%;57    background:#f4c897;58    box-shadow:0 2px 6px rgba(0,0,0,0.35);59  }60  .chevron {61    position:absolute; top:34px; right:34px;62    width:64px; height:64px; border-radius:50%;63    background:#3a302a; display:flex; align-items:center; justify-content:center;64  }65  .chevron svg { width:28px; height:28px; fill:#c6b9af; }66  .label { font-size:52px; color:#d9d0c9; margin-bottom:18px; }67  .days { margin-top:30px; font-size:48px; color:#d9d0c9; }68  /* Floating action button */69  .fab {70    position:absolute; left:50%; transform:translateX(-50%);71    top:1420px; width:300px; height:300px;72    border-radius:50%; background:#ffc58a;73    display:flex; align-items:center; justify-content:center;74    box-shadow:0 10px 24px rgba(0,0,0,0.5);75    z-index:5;76  }77  .fab span { font-size:120px; color:#5d3b19; font-weight:700; }78  /* Bottom nav */79  .bottom-nav {80    position:absolute; bottom:0; left:0; right:0;81    height:214px; background:#2a201b;82    display:flex; align-items:center; justify-content:space-around;83    padding:0 24px;84    box-shadow:0 -10px 24px rgba(0,0,0,0.4);85  }86  .nav-item { display:flex; align-items:center; flex-direction:column; gap:16px; color:#d9d0c9; font-size:42px; }87  .nav-item.active { color:#f4c897; }88  .icon-wrap {89    width:110px; height:110px; border-radius:28px;90    background:#4a3b32; display:flex; align-items:center; justify-content:center;91  }92  .nav-item.active .icon-wrap { background:#5a442f; }93  .nav-item svg { width:64px; height:64px; fill:#eae7e4; }94  .nav-item.active svg { fill:#f4c897; }95</style>96</head>97<body>98<div id="render-target">99 100  <!-- Status bar -->101  <div class="status-bar">102    <div>12:20</div>103    <div class="status-icons">104      <!-- Notification dot -->105      <svg width="20" height="20">106        <circle cx="10" cy="10" r="6" fill="#cfc6be"></circle>107      </svg>108      <!-- Mail -->109      <svg width="28" height="28" viewBox="0 0 24 24">110        <path fill="#cfc6be" d="M3 6h18v12H3V6zm9 6 9-6H3l9 6zm-9 6 9-6 9 6H3z"/>111      </svg>112      <!-- Sun/brightness -->113      <svg width="28" height="28" viewBox="0 0 24 24">114        <path fill="#cfc6be" d="M12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0-5h1v3h-1V2zm0 19h1v3h-1v-3zM2 11h3v1H2v-1zm17 0h3v1h-3v-1zM4.7 4.7l2.1 2.1-.7.7L4 5.4l.7-.7zm12.5 12.5 2.1 2.1-.7.7-2.1-2.1.7-.7zM19.3 4.7l.7.7-2.1 2.1-.7-.7 2.1-2.1zM4.7 19.3l.7.7 2.1-2.1-.7-.7-2.1 2.1z"/>115      </svg>116      <!-- Download icon -->117      <svg width="26" height="26" viewBox="0 0 24 24">118        <path fill="#cfc6be" d="M12 3v10l4-4 1.4 1.4L12 17l-5.4-5.6L8 9l4 4V3h0zM4 19h16v2H4v-2z"/>119      </svg>120      <!-- Signal dot -->121      <svg width="18" height="18">122        <circle cx="9" cy="9" r="5" fill="#cfc6be"></circle>123      </svg>124      <!-- Wi‑Fi -->125      <svg width="28" height="28" viewBox="0 0 24 24">126        <path fill="#cfc6be" d="M12 18l-2 2 2 2 2-2-2-2zm-6-6 1.5 1.5A7 7 0 0 1 18.5 13L20 11a9 9 0 0 0-14 0zm-3-3 1.5 1.5A12 12 0 0 1 21.5 10L23 8A14 14 0 0 0 3 9z"/>127      </svg>128      <!-- Battery -->129      <svg width="34" height="34" viewBox="0 0 24 24">130        <path fill="#cfc6be" d="M20 7h2v10h-2V7zM3 7h16v10H3V7zm2 2v6h12V9H5z"/>131      </svg>132    </div>133  </div>134 135  <!-- Title -->136  <div class="app-title">Alarm</div>137 138  <!-- Menu dots -->139  <div class="menu-dots">140    <span></span><span></span><span></span>141  </div>142 143  <!-- Cards -->144  <div class="cards">145    <!-- First alarm -->146    <div class="card large">147      <div class="chevron">148        <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>149      </div>150      <div class="time-row">151        <div class="time">12:20</div>152        <div class="ampm">AM</div>153      </div>154      <div class="sub">Today</div>155      <div class="sub orange">Snoozing until Fri 12:30 AM</div>156      <div class="toggle"><div class="knob"></div></div>157    </div>158 159    <!-- Second alarm -->160    <div class="card">161      <div class="chevron">162        <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>163      </div>164      <div class="label">time to walk</div>165      <div class="time-row">166        <div class="time" style="font-size:170px; line-height:170px;">7:15</div>167        <div class="ampm">AM</div>168      </div>169      <div class="sub">Every day</div>170      <div class="toggle"><div class="knob"></div></div>171    </div>172 173    <!-- Third alarm -->174    <div class="card">175      <div class="chevron">176        <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>177      </div>178      <div class="label">Office time</div>179      <div class="time-row">180        <div class="time" style="font-size:170px; line-height:170px;">8:00</div>181        <div class="ampm">AM</div>182      </div>183      <div class="days">Mon, Tue, Wed, Thu, Fri</div>184      <div class="toggle"><div class="knob"></div></div>185    </div>186 187    <!-- Fourth alarm -->188    <div class="card" style="margin-bottom:300px;">189      <div class="chevron">190        <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>191      </div>192      <div class="label">Gym time</div>193      <div class="time-row">194        <div class="time" style="font-size:170px; line-height:170px;">8:00</div>195        <div class="ampm">PM</div>196      </div>197      <div class="days">Mon, Tue, Wed, Thu, Fri</div>198      <div class="toggle"><div class="knob"></div></div>199    </div>200  </div>201 202  <!-- Floating action button -->203  <div class="fab"><span>+</span></div>204 205  <!-- Bottom navigation -->206  <div class="bottom-nav">207    <div class="nav-item active">208      <div class="icon-wrap">209        <!-- Alarm clock -->210        <svg viewBox="0 0 24 24">211          <path d="M6 2 2 6l2 2 4-4L6 2zm12 0 4 4-2 2-4-4 2-2zM12 6a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm0 3v6l4 2-.6 1.2L11 15V9h1z"/>212        </svg>213      </div>214      <div>Alarm</div>215    </div>216    <div class="nav-item">217      <div class="icon-wrap">218        <!-- Clock -->219        <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 1 0 20A10 10 0 0 1 12 2zm1 5h-2v6l5 3 1-1.7-4-2.3V7z"/></svg>220      </div>221      <div>Clock</div>222    </div>223    <div class="nav-item">224      <div class="icon-wrap">225        <!-- Timer -->226        <svg viewBox="0 0 24 24"><path d="M9 2h6v2H9V2zm3 4a9 9 0 1 1 0 18 9 9 0 0 1 0-18zm1 4h-2v6h2V10z"/></svg>227      </div>228      <div>Timer</div>229    </div>230    <div class="nav-item">231      <div class="icon-wrap">232        <!-- Stopwatch -->233        <svg viewBox="0 0 24 24"><path d="M9 2h6v2H9V2zm9.7 5.3-1.4-1.4-2.3 2.3 1.4 1.4 2.3-2.3zM12 6a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm1 4h-2v6h2V10z"/></svg>234      </div>235      <div>Stopwatch</div>236    </div>237    <div class="nav-item">238      <div class="icon-wrap">239        <!-- Bedtime -->240        <svg viewBox="0 0 24 24"><path d="M3 12h18v6H3v-6zm2-6h8a3 3 0 0 1 3 3v3H5V6zm16 11h2v3h-2v-3z"/></svg>241      </div>242      <div>Bedtime</div>243    </div>244  </div>245 246</div>247</body>248</html>