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<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">6<title>Alarm Screen Mock</title>7<style>8  body { margin:0; padding:0; background: transparent; font-family: 'Roboto', Arial, sans-serif; }9  #render-target{10    position: relative;11    overflow: hidden;12    width:1080px;13    height:2400px;14    background:#0f1316;15    color:#e8eaed;16  }17 18  /* Top status bar */19  .status-bar{20    position:absolute;21    top:22px;22    left:30px;23    right:30px;24    height:48px;25    color:#cfd8dc;26    font-size:36px;27    letter-spacing:0.5px;28  }29  .status-right{30    position:absolute;31    right:0;32    top:0;33    display:flex;34    align-items:center;35    gap:26px;36    color:#cfd8dc;37    font-size:28px;38  }39  .dot{ width:6px; height:6px; background:#9aa0a6; border-radius:50%; display:inline-block; margin:0 6px; opacity:0.8; }40 41  /* Header */42  .header{43    position:absolute;44    top:110px;45    left:44px;46    font-size:72px;47    font-weight:700;48    color:#e3e6ea;49  }50  .menu{51    position:absolute;52    top:110px;53    right:36px;54    width:14px;55    height:64px;56    display:flex;57    flex-direction:column;58    justify-content:space-between;59    align-items:center;60  }61  .menu span{62    width:10px; height:10px; background:#c8d1d8; border-radius:50%;63    opacity:0.9;64  }65 66  /* Cards */67  .card{68    position:absolute;69    left:32px;70    width:1016px;71    background:#1b2227;72    border-radius:46px;73    box-shadow: 0 8px 18px rgba(0,0,0,0.35) inset;74    padding:44px 40px;75    box-sizing:border-box;76  }77  .card .time{78    font-size:160px;79    font-weight:700;80    letter-spacing:2px;81    color:#e7ebef;82    line-height:1;83  }84  .ampm{ font-size:64px; font-weight:700; color:#aeb7bf; margin-left:18px; }85  .subtext{ margin-top:26px; font-size:44px; color:#8a949b; }86 87  /* Toggle switch */88  .toggle{89    position:absolute;90    right:40px;91    top:50%;92    transform:translateY(-50%);93    width:210px; height:98px; border-radius:60px;94    background:#3a424a;95  }96  .toggle .knob{97    position:absolute; top:11px; left:12px;98    width:76px; height:76px; border-radius:50%;99    background:#c8d7e8;100    box-shadow:0 2px 6px rgba(0,0,0,0.4);101    transition: all .25s ease;102  }103  .toggle.on{ background:#114e83; }104  .toggle.on .knob{ left:122px; background:#b7d3f6; }105 106  /* Dropdown chevron circle */107  .chev{108    position:absolute; right:30px; top:30px;109    width:64px; height:64px; border-radius:50%;110    background:#262e34;111    display:flex; align-items:center; justify-content:center;112  }113  .chev svg{ width:28px; height:28px; fill:#aeb7bf; }114 115  /* Second card specifics */116  .title{ font-size:42px; color:#d9dee2; margin-bottom:26px; }117  .link{ position:absolute; bottom:34px; left:40px; color:#9dc2ff; font-size:44px; }118 119  /* Floating Action Button */120  .fab{121    position:absolute; left:50%; transform:translateX(-50%);122    bottom:340px; width:190px; height:190px; border-radius:50%;123    background:#a8cdf6; color:#0b1b29;124    display:flex; align-items:center; justify-content:center;125    box-shadow:0 12px 24px rgba(0,0,0,0.45);126    font-size:140px; font-weight:400;127  }128 129  /* Bottom nav */130  .bottom-nav{131    position:absolute; bottom:0; left:0; width:100%; height:230px;132    background:#151a1f;133    border-top:1px solid rgba(255,255,255,0.06);134    display:flex; align-items:center; justify-content:space-around;135    color:#c6cdd4;136  }137  .tab{138    width:180px; text-align:center; font-size:42px; color:#b8bfc6;139  }140  .tab .ico{141    width:96px; height:96px; margin:0 auto 12px; border-radius:28px;142    display:flex; align-items:center; justify-content:center;143  }144  .tab.active .ico{145    background:#2a3440;146    border:2px solid #3e4a55;147  }148  .tab.active .label{ color:#e6ebef; font-weight:600; }149  .label{ display:block; font-size:40px; }150 151  /* Simple icons */152  .ico svg{ width:54px; height:54px; fill:#c8d1d8; }153</style>154</head>155<body>156<div id="render-target">157 158  <!-- Status bar -->159  <div class="status-bar">160    8:57161    <span class="dot"></span>162    <span class="dot"></span>163    <span class="dot"></span>164    <span class="dot"></span>165    <div class="status-right">166      <!-- wifi -->167      <svg viewBox="0 0 24 24" width="38" height="38" fill="#cfd8dc">168        <path d="M12 20l3-3H9l3 3zm7.07-7.07l1.41-1.41C17.19 8.23 14.7 7 12 7s-5.19 1.23-8.48 4.52l1.41 1.41C7.73 10.13 9.79 9 12 9s4.27 1.13 7.07 3.93zM12 13c-1.66 0-3.22.64-4.39 1.81l1.41 1.41C9.9 15.34 10.92 15 12 15s2.1.34 2.98 1.22l1.41-1.41C15.22 13.64 13.66 13 12 13z"/>169      </svg>170      <!-- battery -->171      <svg viewBox="0 0 24 24" width="38" height="38" fill="#cfd8dc">172        <path d="M16 7h1V5h-1V4H6v1H5v2h1v10H5v2h1v1h10v-1h1v-2h-1V7zM8 9h8v8H8V9z"/>173      </svg>174    </div>175  </div>176 177  <!-- Header -->178  <div class="header">Alarm</div>179  <div class="menu"><span></span><span></span><span></span></div>180 181  <!-- Card 1 -->182  <div class="card" style="top:220px; height:360px;">183    <div class="chev">184      <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>185    </div>186    <div style="display:flex; align-items:flex-end;">187      <div class="time">1:00</div>188      <div class="ampm">AM</div>189    </div>190    <div class="subtext">Not scheduled</div>191    <div class="toggle" title="toggle off">192      <div class="knob"></div>193    </div>194  </div>195 196  <!-- Card 2 -->197  <div class="card" style="top:610px; height:640px;">198    <div class="chev">199      <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>200    </div>201    <div class="title">Gardening Club Meeting</div>202    <div style="display:flex; align-items:flex-end; margin-top:10px;">203      <div class="time">9:00</div>204      <div class="ampm">PM</div>205    </div>206    <div class="subtext" style="margin-top:36px;">Today</div>207    <div class="link">Dismiss</div>208    <div class="toggle on" title="toggle on" style="top:56%;">209      <div class="knob"></div>210    </div>211  </div>212 213  <!-- Floating Action Button -->214  <div class="fab">+</div>215 216  <!-- Bottom navigation -->217  <div class="bottom-nav">218    <div class="tab active">219      <div class="ico">220        <!-- alarm bell -->221        <svg viewBox="0 0 24 24">222          <path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V11a6 6 0 0 0-12 0v5l-2 2v1h16v-1l-2-2zM5.3 5.3l-1.6-1.6L6.1 1.3l1.6 1.6L5.3 5.3zm13.4 0l-2.4-2.4 1.6-1.6 2.4 2.4-1.6 1.6z"/>223        </svg>224      </div>225      <span class="label">Alarm</span>226    </div>227 228    <div class="tab">229      <div class="ico">230        <!-- clock -->231        <svg viewBox="0 0 24 24">232          <path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm1-9V7h-2v6h6v-2h-4z"/>233        </svg>234      </div>235      <span class="label">Clock</span>236    </div>237 238    <div class="tab">239      <div class="ico">240        <!-- hourglass -->241        <svg viewBox="0 0 24 24">242          <path d="M6 2h12v4l-4 4 4 4v6H6v-6l4-4-4-4V2zm10 4V4H8v2l4 4 4-4zm0 12v-2l-4-4-4 4v2h8z"/>243        </svg>244      </div>245      <span class="label">Timer</span>246    </div>247 248    <div class="tab">249      <div class="ico">250        <!-- stopwatch -->251        <svg viewBox="0 0 24 24">252          <path d="M15 1H9v2h6V1zm4.3 5.7l1.4-1.4-1.4-1.4-1.4 1.4 1.4 1.4zM12 6a8 8 0 1 0 .001 16.001A8 8 0 0 0 12 6zm1 8h4v-2h-4V8h-2v8h2z"/>253        </svg>254      </div>255      <span class="label">Stopwatch</span>256    </div>257 258    <div class="tab">259      <div class="ico">260        <!-- bed -->261        <svg viewBox="0 0 24 24">262          <path d="M3 7h5a3 3 0 0 1 3 3v3h10v4h-2v-2H4v2H2V7h1zm6 5V9a1 1 0 0 0-1-1H5v4h4z"/>263        </svg>264      </div>265      <span class="label">Bedtime</span>266    </div>267  </div>268 269</div>270</body>271</html>