GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Alarm Screen</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #15110d;13    font-family: "Segoe UI", Roboto, Arial, sans-serif;14    color: #f6efe6;15  }16 17  /* Top chrome */18  .status-bar {19    position: absolute;20    top: 0; left: 0;21    width: 100%;22    height: 110px;23    background: #2b221b;24    color: #efe4d6;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 36px;29    box-sizing: border-box;30    font-size: 34px;31  }32  .status-right {33    display: flex; gap: 24px; align-items: center;34  }35  .dot-icon { width: 12px; height: 12px; background: #efe4d6; border-radius: 50%; display: inline-block; }36  .status-ico {37    width: 34px; height: 34px; border: 2px solid #efe4d6; border-radius: 6px;38  }39  .battery {40    width: 46px; height: 22px; border: 3px solid #efe4d6; position: relative; border-radius: 4px;41  }42  .battery:after {43    content:""; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #efe4d6; border-radius: 2px;44  }45  .battery .lvl { position: absolute; left: 3px; top: 3px; bottom: 3px; width: 28px; background: #efe4d6; }46 47  .title-bar {48    position: absolute;49    top: 110px; left: 0; right: 0;50    height: 180px;51    background: #2b221b;52    display: flex; align-items: center;53    padding: 0 40px;54    box-sizing: border-box;55    font-size: 86px; font-weight: 700;56  }57 58  /* Cards */59  .content {60    position: absolute;61    top: 290px; left: 0; right: 0; bottom: 260px;62    padding: 10px 20px 0 20px;63    box-sizing: border-box;64    overflow: hidden;65  }66  .card {67    background: #1f1914;68    border-radius: 40px;69    padding: 34px 38px 36px 38px;70    box-sizing: border-box;71    margin: 22px 12px;72    position: relative;73  }74  .card .label {75    font-size: 42px;76    color: #e7dac9;77    margin-bottom: 18px;78  }79  .time-row {80    display: flex; align-items: baseline; gap: 16px;81  }82  .time-row .big {83    font-size: 180px; font-weight: 800; letter-spacing: 2px;84    line-height: 1;85    color: #f7f0e6;86  }87  .time-row .ampm {88    font-size: 64px; font-weight: 700; opacity: 0.95;89  }90  .days {91    margin-top: 22px;92    font-size: 42px;93    color: #cdbaa6;94  }95 96  .switch {97    position: absolute;98    right: 34px;99    bottom: 34px;100    width: 230px;101    height: 96px;102    background: #7c4b1d;103    border-radius: 50px;104    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.2);105  }106  .switch .knob {107    position: absolute;108    right: 8px; top: 8px;109    width: 80px; height: 80px;110    background: #f1d2b0;111    border-radius: 50%;112    box-shadow: 0 2px 0 rgba(0,0,0,0.2);113  }114 115  .collapse {116    position: absolute;117    right: 34px; top: 30px;118    width: 66px; height: 66px;119    background: #3a3028;120    border-radius: 50%;121    display: flex; align-items: center; justify-content: center;122    opacity: 0.8;123  }124  .collapse svg { width: 30px; height: 30px; fill: #cdbaa6; }125 126  /* Floating action button */127  .fab {128    position: absolute;129    bottom: 330px; left: 50%;130    transform: translateX(-50%);131    width: 290px; height: 290px;132    background: #f9bb85;133    border-radius: 50%;134    display: flex; align-items: center; justify-content: center;135    box-shadow: 0 8px 22px rgba(0,0,0,0.45);136    color: #3b291c;137    font-size: 160px; font-weight: 500;138  }139 140  /* Bottom navigation */141  .bottom-nav {142    position: absolute;143    left: 0; right: 0; bottom: 0;144    height: 190px;145    background: #2b221b;146    border-top: 2px solid #3b2f25;147    display: flex; align-items: center; justify-content: space-around;148  }149  .nav-item {150    width: 18%;151    color: #b6a792;152    text-align: center;153    font-size: 36px;154  }155  .nav-item .ico {156    width: 90px; height: 90px; margin: 0 auto 12px auto; display: flex; align-items: center; justify-content: center;157  }158  .nav-item svg { width: 70px; height: 70px; fill: #b6a792; }159  .nav-item.active { color: #ffffff; }160  .nav-item.active svg { fill: #ffffff; }161  .nav-item.active .ico {162    background: #3b2f25;163    border-radius: 26px;164  }165</style>166</head>167<body>168<div id="render-target">169 170  <!-- Status bar -->171  <div class="status-bar">172    <div>7:11</div>173    <div class="status-right">174      <div class="dot-icon"></div>175      <div class="dot-icon"></div>176      <div class="dot-icon"></div>177      <div class="status-ico"></div>178      <div style="width:28px; height:28px; border-radius:50%; border:3px solid #efe4d6;"></div>179      <div class="battery"><div class="lvl"></div></div>180      <div style="width:8px; height:34px; background:#efe4d6; border-radius:3px; opacity:.8;"></div>181    </div>182  </div>183 184  <!-- Title -->185  <div class="title-bar">Alarm</div>186 187  <!-- Cards -->188  <div class="content">189    <div class="card">190      <div class="label">Office time</div>191      <div class="time-row">192        <div class="big">8:00</div>193        <div class="ampm">AM</div>194      </div>195      <div class="days">Mon, Tue, Wed, Thu, Fri</div>196 197      <div class="collapse">198        <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"></path></svg>199      </div>200      <div class="switch">201        <div class="knob"></div>202      </div>203    </div>204 205    <div class="card">206      <div class="time-row">207        <div class="big">5:00</div>208        <div class="ampm">PM</div>209      </div>210      <div class="days">Mon, Tue, Wed, Thu, Fri</div>211 212      <div class="collapse">213        <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"></path></svg>214      </div>215      <div class="switch">216        <div class="knob"></div>217      </div>218    </div>219 220    <div class="card">221      <div class="label">Gym time</div>222      <div class="time-row">223        <div class="big">7:00</div>224        <div class="ampm">PM</div>225      </div>226      <div class="days">Mon, Tue, Wed, Thu, Fri</div>227 228      <div class="collapse">229        <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"></path></svg>230      </div>231      <div class="switch">232        <div class="knob"></div>233      </div>234    </div>235  </div>236 237  <!-- Floating action -->238  <div class="fab">+</div>239 240  <!-- Bottom Navigation -->241  <div class="bottom-nav">242    <div class="nav-item active">243      <div class="ico">244        <svg viewBox="0 0 24 24"><path d="M12 2c2.8 0 5 2.2 5 5v1h1a2 2 0 012 2v4h-2v6h-3v-6H9v6H6v-6H4V10a2 2 0 012-2h1V7c0-2.8 2.2-5 5-5z"></path></svg>245      </div>246      Alarm247    </div>248    <div class="nav-item">249      <div class="ico">250        <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 5h-2v6l5 3 1-1-4-2V7z"></path></svg>251      </div>252      Clock253    </div>254    <div class="nav-item">255      <div class="ico">256        <svg viewBox="0 0 24 24"><path d="M7 2h10v2H7V2zm0 4h10l-2 6 2 6H7l2-6-2-6zm3 6l-1 3h6l-1-3 1-3H9l1 3z"></path></svg>257      </div>258      Timer259    </div>260    <div class="nav-item">261      <div class="ico">262        <svg viewBox="0 0 24 24"><path d="M13 1h-2v2h2V1zm4 2l-1.4 1.4A8 8 0 1019 12h-2a6 6 0 11-6-6c1 0 2 .2 2 .2L15 3zM11 8h2v5h-2z"></path></svg>263      </div>264      Stopwatch265    </div>266    <div class="nav-item">267      <div class="ico">268        <svg viewBox="0 0 24 24"><path d="M3 11h14a4 4 0 014 4v4h-2v-2H5v2H3v-8zm2 2v2h12v-2H5zm4-7h4v4H9V6z"></path></svg>269      </div>270      Bedtime271    </div>272  </div>273 274</div>275</body>276</html>