GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Alarm UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    overflow: hidden;10    width: 1080px;11    height: 2400px;12    background: #1b1613; /* deep brownish black */13    color: #f4e9dc;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 96px;23    color: #e9ded1;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 36px;28    box-sizing: border-box;29  }30  .status-time { font-size: 38px; letter-spacing: 1px; }31  .status-icons { display: flex; align-items: center; gap: 22px; opacity: .9; }32  .icon-dot,33  .icon-sig,34  .icon-battery { width: 26px; height: 26px; border-radius: 50%; background: #e9ded1; opacity: .85; }35  .icon-triple { width: 10px; height: 40px; display: flex; flex-direction: column; justify-content: space-between; }36  .icon-triple span { width: 10px; height: 10px; background: #c9b6a4; border-radius: 50%; display: block; }37 38  /* Header */39  .header {40    position: absolute;41    top: 108px;42    left: 44px;43    right: 44px;44    display: flex;45    align-items: center;46    justify-content: space-between;47  }48  .title { font-size: 78px; font-weight: 700; }49  .menu-dots { width: 14px; height: 70px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; margin-right: 12px; }50  .menu-dots i { width: 10px; height: 10px; background: #c7b39e; border-radius: 50%; display: block; }51 52  /* Card list area */53  .list {54    position: absolute;55    top: 220px;56    left: 30px;57    width: 1020px;58  }59 60  .card {61    position: relative;62    width: 1020px;63    background: #231c18;64    border-radius: 44px;65    padding: 44px 40px;66    box-sizing: border-box;67    margin-bottom: 38px;68    color: #f3e7d7;69  }70  .card .chev {71    position: absolute;72    top: 34px;73    right: 34px;74    width: 54px; height: 54px;75    border-radius: 50%;76    background: #3a2f2a;77    display: flex; align-items: center; justify-content: center;78  }79  .card .chev svg { width: 26px; height: 26px; fill: #c7b6a3; }80 81  .time-row { display: flex; align-items: center; justify-content: space-between; }82  .big-time { font-size: 180px; letter-spacing: 2px; font-weight: 800; }83  .ampm { font-size: 64px; margin-left: 10px; font-weight: 700; vertical-align: super; }84 85  .subtext { margin-top: 10px; font-size: 44px; color: #d8c9b9; }86  .action-text { margin-top: 18px; font-size: 44px; color: #f1a54a; }87 88  /* Toggle switch */89  .toggle {90    position: absolute;91    right: 40px;92    bottom: 44px;93    width: 184px;94    height: 98px;95    background: #7b4a18;96    border-radius: 60px;97    display: flex;98    align-items: center;99    padding: 0 14px;100    box-sizing: border-box;101  }102  .toggle .knob {103    width: 74px; height: 74px; border-radius: 50%;104    background: #f7d9bd;105    margin-left: auto; /* ON position */106  }107 108  /* Card label above time */109  .label { font-size: 46px; margin-bottom: 12px; color: #e9ded1; }110 111  /* Floating action button */112  .fab {113    position: absolute;114    bottom: 465px;115    left: 400px;116    width: 280px; height: 280px;117    background: #f4b77f;118    border-radius: 50%;119    box-shadow: 0 8px 20px rgba(0,0,0,.4);120    display: flex; align-items: center; justify-content: center;121    z-index: 5;122  }123  .fab span {124    font-size: 140px; color: #4b2d15; line-height: 0;125  }126 127  /* Bottom navigation */128  .bottom-bar {129    position: absolute;130    bottom: 0;131    left: 0;132    width: 1080px;133    height: 250px;134    background: #211a16;135    border-top-left-radius: 32px;136    border-top-right-radius: 32px;137    box-sizing: border-box;138    padding-top: 22px;139  }140  .nav-row {141    display: flex;142    justify-content: space-around;143    align-items: center;144    padding: 8px 10px 0;145  }146  .nav-item { width: 180px; text-align: center; color: #c9b6a4; }147  .nav-item.active { color: #f3d6af; }148  .nav-icon {149    width: 76px; height: 76px; border-radius: 24px;150    background: #3a2f2a;151    margin: 0 auto 10px;152    display: flex; align-items: center; justify-content: center;153  }154  .nav-item.active .nav-icon { background: #6b553f; }155  .nav-icon svg { width: 42px; height: 42px; fill: currentColor; }156  .nav-label { font-size: 38px; }157 158  /* Gesture bar */159  .gesture {160    position: absolute;161    bottom: 16px;162    left: 50%;163    transform: translateX(-50%);164    width: 420px; height: 10px; background: #e8e6e6; border-radius: 8px; opacity: .9;165  }166</style>167</head>168<body>169<div id="render-target">170 171  <!-- Status Bar -->172  <div class="status-bar">173    <div class="status-time">12:19</div>174    <div class="status-icons">175      <div class="icon-dot"></div>176      <div class="icon-dot"></div>177      <div class="icon-dot"></div>178      <div class="icon-dot"></div>179      <div class="icon-triple">180        <span></span><span></span><span></span>181      </div>182    </div>183  </div>184 185  <!-- Header -->186  <div class="header">187    <div class="title">Alarm</div>188    <div class="menu-dots"><i></i><i></i><i></i></div>189  </div>190 191  <!-- Cards List -->192  <div class="list">193 194    <!-- Card 1 -->195    <div class="card" style="height: 410px;">196      <div class="chev">197        <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>198      </div>199      <div class="time-row">200        <div class="big-time">12:20<span class="ampm">AM</span></div>201      </div>202      <div class="subtext">Today</div>203      <div class="action-text">Dismiss</div>204      <div class="toggle">205        <div class="knob"></div>206      </div>207    </div>208 209    <!-- Card 2 -->210    <div class="card" style="height: 350px;">211      <div class="chev">212        <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>213      </div>214      <div class="label">time to walk</div>215      <div class="time-row">216        <div class="big-time" style="font-size: 160px;">7:15<span class="ampm">AM</span></div>217      </div>218      <div class="subtext">Every day</div>219      <div class="toggle">220        <div class="knob"></div>221      </div>222    </div>223 224    <!-- Card 3 -->225    <div class="card" style="height: 350px;">226      <div class="chev">227        <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>228      </div>229      <div class="label">Office time</div>230      <div class="time-row">231        <div class="big-time" style="font-size: 160px;">8:00<span class="ampm">AM</span></div>232      </div>233      <div class="subtext">Mon, Tue, Wed, Thu, Fri</div>234      <div class="toggle">235        <div class="knob"></div>236      </div>237    </div>238 239    <!-- Card 4 -->240    <div class="card" style="height: 360px; margin-bottom: 440px;">241      <div class="chev">242        <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>243      </div>244      <div class="label">Gym time</div>245      <div class="time-row">246        <div class="big-time" style="font-size: 160px;">8:00<span class="ampm">PM</span></div>247      </div>248      <div class="subtext">Mon, Tue, Wed, Thu, Fri</div>249      <div class="toggle">250        <div class="knob"></div>251      </div>252    </div>253 254    <!-- Floating Action Button -->255    <div class="fab"><span>+</span></div>256 257  </div>258 259  <!-- Bottom Navigation -->260  <div class="bottom-bar">261    <div class="nav-row">262      <div class="nav-item active">263        <div class="nav-icon">264          <svg viewBox="0 0 24 24"><path d="M7 2h10v2H7zm-1 5h12v2H6zm-1 5h14v2H5zm2 5h10v2H7z"/></svg>265        </div>266        <div class="nav-label">Alarm</div>267      </div>268      <div class="nav-item">269        <div class="nav-icon">270          <svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 100 8 4 4 0 000-8zm0-6a1 1 0 011 1v3h-2V3a1 1 0 011-1zm8 9a1 1 0 011 1h-3v-2h3a1 1 0 01-1 1zM3 12a1 1 0 011-1h3v2H4a1 1 0 01-1-1zm9 9a1 1 0 01-1-1v-3h2v3a1 1 0 01-1 1z"/></svg>271        </div>272        <div class="nav-label">Clock</div>273      </div>274      <div class="nav-item">275        <div class="nav-icon">276          <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 5v5.59l3.3 3.3-1.42 1.42L10 13V7h3z"/></svg>277        </div>278        <div class="nav-label">Timer</div>279      </div>280      <div class="nav-item">281        <div class="nav-icon">282          <svg viewBox="0 0 24 24"><path d="M8 2h8v2H8zM12 6a8 8 0 100 16 8 8 0 000-16zm1 4v4.59l3 3L15.59 19 11 14.41V10h2z"/></svg>283        </div>284        <div class="nav-label">Stopwatch</div>285      </div>286      <div class="nav-item">287        <div class="nav-icon">288          <svg viewBox="0 0 24 24"><path d="M4 10h16v8H4zM2 8h20v2H2zm3 10h2v2H5zm12 0h2v2h-2z"/></svg>289        </div>290        <div class="nav-label">Bedtime</div>291      </div>292    </div>293  </div>294 295  <div class="gesture"></div>296 297</div>298</body>299</html>