GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Alarm Screen Mock</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: "Roboto", Arial, Helvetica, sans-serif; }8  #render-target{9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#101317; color:#EAECEF;12  }13  *{ box-sizing:border-box; }14 15  /* Status bar */16  .status-bar{17    position:absolute; top:0; left:0; right:0;18    height:110px; padding:22px 36px;19    display:flex; align-items:center; justify-content:space-between;20    color:#E9EEF4; font-size:40px; letter-spacing:0.5px;21    opacity:0.95;22  }23  .sb-right{ display:flex; align-items:center; gap:18px; }24  .icon-box{25    width:34px; height:34px; border-radius:6px;26    border:2px solid #8D939C; opacity:0.85;27  }28  .cloud{29    width:40px; height:26px; border-radius:14px;30    border:2px solid #8D939C; position:relative;31  }32  .cloud:before{33    content:""; position:absolute; width:18px; height:18px; border:2px solid #8D939C;34    border-radius:50%; top:-8px; left:6px; background:transparent;35  }36  .tri-dot{37    position:absolute; top:160px; right:36px; width:10px; height:64px;38  }39  .tri-dot span{40    display:block; width:10px; height:10px; background:#9AA1AB; border-radius:50%; margin:8px 0;41  }42 43  /* Title */44  .title{45    position:absolute; top:118px; left:45px;46    font-size:86px; font-weight:600; color:#E7EBF0;47    letter-spacing:0.5px;48  }49 50  /* Alarm list */51  .alarms{ position:absolute; left:30px; right:30px; top:250px; bottom:320px; overflow:hidden; }52  .card{53    position:relative;54    width:100%; border-radius:48px; background:#1B1F24;55    padding:54px 48px; margin:26px 0;56    box-shadow:0 2px 0 rgba(0,0,0,0.35) inset;57  }58  .time{59    font-size:165px; line-height:1; color:#C9CDD3; letter-spacing:-3px; font-weight:600;60  }61  .ampm{ font-size:52px; color:#AAB1BA; margin-left:16px; vertical-align:top; font-weight:500; }62  .subtitle{ margin-top:22px; font-size:46px; color:#8F96A0; }63  .label{ font-size:44px; color:#B7BDC6; margin-bottom:16px; }64 65  /* small chevron */66  .chev{67    position:absolute; right:38px; top:36px; width:58px; height:58px;68    border-radius:16px; background:#232830; display:flex; align-items:center; justify-content:center;69  }70  .chev:before{71    content:""; width:0; height:0; border-left:12px solid transparent; border-right:12px solid transparent;72    border-top:16px solid #AAB1BA;73  }74 75  /* Toggle (off look) */76  .toggle{77    position:absolute; right:40px; bottom:46px;78    width:210px; height:96px; border-radius:60px; background:#2E343C;79  }80  .toggle:after{81    content:""; position:absolute; top:12px; left:12px; width:72px; height:72px;82    background:#D7DCEC; border-radius:50%;83    box-shadow:0 2px 0 rgba(0,0,0,0.25);84  }85 86  /* Floating action button */87  .fab{88    position:absolute; left:50%; transform:translateX(-50%);89    bottom:480px; width:300px; height:300px; border-radius:50%;90    background:#BBD1FF; color:#0F1621;91    display:flex; align-items:center; justify-content:center;92    font-size:140px; font-weight:700; box-shadow:0 20px 40px rgba(0,0,0,0.35);93  }94 95  /* Bottom navigation */96  .bottom-nav{97    position:absolute; left:0; right:0; bottom:0; height:212px;98    background:#15191F; border-top:1px solid #21262E;99    display:flex; padding:26px 24px 18px; justify-content:space-around; align-items:flex-end;100  }101  .nav-item{ width:18%; text-align:center; color:#B2B9C3; font-size:40px; }102  .nav-ico{103    width:96px; height:96px; margin:0 auto 14px; border-radius:28px;104    display:flex; align-items:center; justify-content:center;105  }106  .nav-item.active{ color:#EAF0F9; }107  .nav-item.active .nav-ico{ background:#222A33; }108  /* simple icons */109  .ico-clock, .ico-timer, .ico-stop, .ico-bed{110    width:56px; height:56px; border:6px solid currentColor; border-radius:50%; position:relative;111  }112  .ico-clock:after{113    content:""; position:absolute; width:6px; height:20px; background:currentColor; left:50%; top:20%;114    transform:translateX(-50%);115  }116  .ico-clock:before{117    content:""; position:absolute; width:22px; height:6px; background:currentColor; left:50%; top:50%;118    transform:translate(-20%, -50%) rotate(20deg);119  }120  .ico-timer:after{121    content:""; position:absolute; width:32px; height:6px; background:currentColor; left:50%; top:-16px;122    transform:translateX(-50%);123  }124  .ico-timer:before{125    content:""; position:absolute; width:6px; height:20px; background:currentColor; left:50%; top:20%;126    transform:translateX(-50%);127  }128  .ico-stop{129    border-color:currentColor;130  }131  .ico-stop:after{132    content:""; position:absolute; width:26px; height:26px; background:currentColor; left:50%; top:50%;133    transform:translate(-50%,-50%); border-radius:6px;134  }135  .ico-bed{136    border:none; border-bottom:6px solid currentColor; border-radius:0;137  }138  .ico-bed:before{139    content:""; position:absolute; left:6px; right:6px; top:12px; height:18px; border:6px solid currentColor; border-bottom:none; border-radius:10px 10px 0 0;140  }141  .ico-bed:after{142    content:""; position:absolute; left:16px; top:40px; width:24px; height:18px; background:currentColor; border-radius:9px;143  }144</style>145</head>146<body>147<div id="render-target">148 149  <div class="status-bar">150    <div class="sb-left">12:15</div>151    <div class="sb-right">152      <div class="icon-box"></div>153      <div class="icon-box"></div>154      <div class="cloud"></div>155      <div style="width:34px; height:28px; border:2px solid #8D939C; border-top-left-radius:6px; border-top-right-radius:6px;"></div>156      <div style="width:24px; height:38px; border:2px solid #8D939C; border-radius:6px;"></div>157    </div>158  </div>159 160  <div class="tri-dot"><span></span><span></span><span></span></div>161 162  <div class="title">Alarm</div>163 164  <div class="alarms">165 166    <div class="card">167      <div class="chev"></div>168      <div class="time">10:00 <span class="ampm">AM</span></div>169      <div class="subtitle">Not scheduled</div>170      <div class="toggle"></div>171    </div>172 173    <div class="card">174      <div class="chev"></div>175      <div class="label">Party</div>176      <div class="time">12:30 <span class="ampm">PM</span></div>177      <div class="subtitle">Friday</div>178      <div class="toggle"></div>179    </div>180 181    <div class="card">182      <div class="chev"></div>183      <div class="label">Wedding</div>184      <div class="time">2:30 <span class="ampm">PM</span></div>185      <div class="subtitle">Not scheduled</div>186      <div class="toggle"></div>187    </div>188 189    <div class="card" style="margin-bottom:160px;">190      <div class="chev"></div>191      <div class="time">2:45 <span class="ampm">PM</span></div>192      <div class="subtitle">Every day</div>193      <div class="toggle"></div>194    </div>195 196  </div>197 198  <div class="fab">+</div>199 200  <div class="bottom-nav">201    <div class="nav-item active">202      <div class="nav-ico"><div class="ico-clock"></div></div>203      Alarm204    </div>205    <div class="nav-item">206      <div class="nav-ico"><div class="ico-clock" style="transform:scale(0.9); opacity:0.8;"></div></div>207      Clock208    </div>209    <div class="nav-item">210      <div class="nav-ico"><div class="ico-timer"></div></div>211      Timer212    </div>213    <div class="nav-item">214      <div class="nav-ico"><div class="ico-stop"></div></div>215      Stopwatch216    </div>217    <div class="nav-item">218      <div class="nav-ico"><div class="ico-bed"></div></div>219      Bedtime220    </div>221  </div>222 223</div>224</body>225</html>