GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Alarm UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", "Segoe UI", Arial, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #262C31;15 color: #E9EEF2;16 }17 18 /* Top status bar */19 .status-bar {20 height: 120px;21 padding: 0 36px;22 color: #D9DEE3;23 display: flex;24 align-items: center;25 justify-content: space-between;26 }27 .status-left { font-size: 42px; letter-spacing: 1px; }28 .status-right { display: flex; gap: 28px; align-items: center; }29 .dot { width: 10px; height: 10px; background: #C9CDD1; border-radius: 50%; opacity: .7; }30 31 /* Header */32 .header {33 padding: 20px 40px 24px 40px;34 font-size: 68px;35 font-weight: 500;36 color: #DDE3E8;37 }38 .kebab {39 position: absolute; right: 36px; top: 250px;40 display: flex; flex-direction: column; gap: 10px; align-items: center;41 }42 .kebab span { width: 10px; height: 10px; background: #9AA2A9; border-radius: 50%; }43 44 /* Cards */45 .card {46 background: #2B3138;47 margin: 18px 28px;48 border-radius: 44px;49 padding: 44px 44px 54px 44px;50 box-sizing: border-box;51 position: relative;52 }53 .card + .card { margin-top: 26px; }54 .card .label-row {55 display: flex; align-items: center; gap: 16px; color: #AEB6BD; font-size: 36px;56 margin-bottom: 18px;57 }58 .folder-icon {59 width: 44px; height: 34px; border: 3px solid #7F8A93; border-radius: 6px; position: relative;60 }61 .folder-icon:before {62 content: ""; position: absolute; width: 18px; height: 8px; background: #2B3138; left: 6px; top: -8px;63 border-left: 3px solid #7F8A93; border-top: 3px solid #7F8A93;64 border-right: 3px solid #7F8A93; border-top-left-radius: 6px; border-top-right-radius: 6px;65 }66 67 .chevron {68 position: absolute; right: 32px; top: 26px;69 width: 70px; height: 70px; border-radius: 50%; background: rgba(255,255,255,0.08);70 display: flex; align-items: center; justify-content: center;71 }72 .chevron svg { width: 28px; height: 28px; fill: #B4BBC2; }73 74 .time-row { display: flex; align-items: baseline; justify-content: space-between; }75 .time {76 display: flex; align-items: baseline; gap: 14px;77 }78 .time .big {79 font-size: 170px; font-weight: 700; letter-spacing: 2px; line-height: 1;80 }81 .time .ampm { font-size: 52px; color: #C3C9CF; font-weight: 600; margin-bottom: 18px; }82 83 .switch {84 width: 190px; height: 92px; background: #1E4A78; border-radius: 60px; position: relative; margin-right: 8px;85 }86 .switch .thumb {87 width: 72px; height: 72px; background: #C8D8FF; border-radius: 50%;88 position: absolute; right: 12px; top: 10px;89 }90 .switch.off { background: #33414D; }91 .switch.off .thumb { left: 12px; right: auto; }92 93 .subtext { color: #AEB6BD; font-size: 40px; margin: 22px 0 28px 0; }94 95 /* Day chips */96 .days { display: flex; gap: 26px; margin-bottom: 32px; }97 .day {98 width: 84px; height: 84px; border-radius: 50%;99 border: 2px solid #444C54; color: #A8B0B7; display: flex; align-items: center; justify-content: center;100 font-size: 40px; font-weight: 600;101 }102 .day.sel {103 background: #AFC8FF; color: #1F2B3A; border-color: transparent;104 }105 106 .list { margin-top: 14px; }107 .item {108 display: flex; align-items: center; justify-content: space-between;109 padding: 22px 0; font-size: 44px; color: #D8DEE3;110 border-bottom: 1px solid rgba(255,255,255,0.06);111 }112 .item:last-child { border-bottom: none; }113 .item .left { display: flex; align-items: center; gap: 26px; }114 .mono { color: #AEB6BD; }115 116 .circle-btn {117 width: 64px; height: 64px; border: 3px solid #AEB6BD; border-radius: 50%;118 display: flex; align-items: center; justify-content: center; color: #AEB6BD; font-size: 46px;119 }120 .circle-fill {121 width: 64px; height: 64px; border-radius: 50%; background: #AEC7FF;122 display: flex; align-items: center; justify-content: center;123 }124 .circle-fill svg { width: 36px; height: 36px; fill: #243246; }125 126 /* Large plus button on second card */127 .big-plus {128 position: absolute; left: 50%; transform: translateX(-50%);129 top: 280px; width: 260px; height: 260px; border-radius: 50%;130 background: #AFC8FF; display: flex; align-items: center; justify-content: center; color: #1D2B3A; font-size: 120px;131 box-shadow: 0 10px 30px rgba(0,0,0,0.35);132 }133 134 /* Bottom navigation */135 .bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 230px; background: #2A3036; border-top: 1px solid rgba(255,255,255,0.06); }136 .tabs { display: flex; align-items: center; justify-content: space-around; padding: 26px 0 14px 0; }137 .tab { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #C4CBD1; font-size: 34px; }138 .tab .icon { width: 76px; height: 76px; border-radius: 22px; display: flex; align-items: center; justify-content: center; color: #B8C0C7; }139 .tab.active .icon { background: #3A4550; color: #E2E7EC; }140 .tab svg { width: 40px; height: 40px; fill: currentColor; }141 142 .gesture {143 position: absolute; left: 50%; transform: translateX(-50%);144 bottom: 22px; width: 360px; height: 12px; border-radius: 6px; background: #D9DDE1; opacity: .9;145 }146</style>147</head>148<body>149<div id="render-target">150 151 <!-- Status bar -->152 <div class="status-bar">153 <div class="status-left">11:30</div>154 <div class="status-right">155 <svg viewBox="0 0 24 24" width="36" height="36" fill="#D7DCE1"><circle cx="12" cy="12" r="10" fill="none" stroke="#D7DCE1" stroke-width="2"/></svg>156 <svg viewBox="0 0 24 24" width="36" height="36" fill="#D7DCE1"><rect x="4" y="5" width="16" height="14" rx="2" ry="2" fill="none" stroke="#D7DCE1" stroke-width="2"/></svg>157 <div class="dot"></div>158 <svg viewBox="0 0 24 24" width="38" height="38" fill="#D7DCE1"><path d="M12 2a7 7 0 0 0-7 7v5l-2 3h18l-2-3V9a7 7 0 0 0-7-7z"/></svg>159 <svg viewBox="0 0 24 24" width="38" height="38" fill="#D7DCE1"><path d="M6 20h12l1-12H5l1 12zm3-14h6l1-2H8l1 2z"/></svg>160 </div>161 </div>162 163 <!-- Header -->164 <div class="header">Alarm</div>165 <div class="kebab"><span></span><span></span><span></span></div>166 167 <!-- First card (expanded) -->168 <div class="card" style="margin-top: 40px;">169 <div class="chevron">170 <svg viewBox="0 0 24 24"><path d="M7 14l5-5 5 5"/></svg>171 </div>172 <div class="label-row">173 <div class="folder-icon"></div>174 <div>Wakeup</div>175 </div>176 177 <div class="time-row">178 <div class="time">179 <div class="big">6:10</div>180 <div class="ampm">AM</div>181 </div>182 <div class="switch"><div class="thumb"></div></div>183 </div>184 185 <div class="subtext">Mon, Tue</div>186 187 <div class="days">188 <div class="day">S</div>189 <div class="day sel">M</div>190 <div class="day sel">T</div>191 <div class="day">W</div>192 <div class="day">T</div>193 <div class="day">F</div>194 <div class="day">S</div>195 </div>196 197 <div class="list">198 <div class="item">199 <div class="left">200 <svg viewBox="0 0 24 24" width="40" height="40" class="mono"><path fill="#AEB6BD" d="M8 2h8v2H8zM12 6a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm-1 3h2v6h-2z"/></svg>201 <div>Pause alarm</div>202 </div>203 <div class="circle-btn">+</div>204 </div>205 206 <div class="item">207 <div class="left">208 <svg viewBox="0 0 24 24" width="40" height="40" class="mono"><path fill="#AEB6BD" d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zM18 16V9a6 6 0 1 0-12 0v7l-2 2h16l-2-2z"/></svg>209 <div>Full of Wonder</div>210 </div>211 </div>212 213 <div class="item">214 <div class="left">215 <svg viewBox="0 0 24 24" width="40" height="40" class="mono"><path fill="#AEB6BD" d="M3 8h3v8H3V8zm15 0h3v8h-3V8zM8 6h2v12H8V6zm6 0h2v12h-2V6z"/></svg>216 <div>Vibrate</div>217 </div>218 <div class="circle-fill">219 <svg viewBox="0 0 24 24"><path d="M9 12l2 2 4-4" stroke="#243246" stroke-width="2" fill="none"/></svg>220 </div>221 </div>222 223 <div class="item">224 <div class="left">225 <svg viewBox="0 0 24 24" width="40" height="40" class="mono"><circle cx="6" cy="12" r="2.2" fill="#AEB6BD"/><circle cx="12" cy="12" r="2.2" fill="#AEB6BD"/><circle cx="18" cy="12" r="2.2" fill="#AEB6BD"/></svg>226 <div>Google Assistant Routine</div>227 </div>228 <div class="circle-btn">+</div>229 </div>230 231 <div class="item">232 <div class="left">233 <svg viewBox="0 0 24 24" width="40" height="40" class="mono"><path fill="#AEB6BD" d="M7 6h10l-1 14H8L7 6zm2-3h6l1 2H8l1-2z"/></svg>234 <div>Delete</div>235 </div>236 </div>237 </div>238 </div>239 240 <!-- Second card (collapsed) -->241 <div class="card" style="height: 520px;">242 <div class="chevron">243 <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5"/></svg>244 </div>245 <div class="mono" style="font-size:36px; margin-bottom: 18px;">wakeup</div>246 247 <div class="time-row" style="margin-top: 10px;">248 <div class="time">249 <div class="big">7:00</div>250 <div class="ampm">AM</div>251 </div>252 <div class="switch off"><div class="thumb"></div></div>253 </div>254 255 <div class="subtext">Sun, Sat</div>256 257 <div class="big-plus">+</div>258 </div>259 260 <!-- Bottom navigation -->261 <div class="bottom">262 <div class="tabs">263 <div class="tab active">264 <div class="icon">265 <svg viewBox="0 0 24 24"><path d="M12 7a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm0 2v5l4 2" fill="none" stroke="currentColor" stroke-width="2"/></svg>266 </div>267 <div>Alarm</div>268 </div>269 <div class="tab">270 <div class="icon">271 <svg viewBox="0 0 24 24"><path d="M12 7a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm0 3v5M9 12h6" fill="none" stroke="currentColor" stroke-width="2"/></svg>272 </div>273 <div>Clock</div>274 </div>275 <div class="tab">276 <div class="icon">277 <svg viewBox="0 0 24 24"><path d="M7 3h10l-3 7h-4l-3-7zm3 9h4l3 9H7l3-9z" fill="currentColor"/></svg>278 </div>279 <div>Timer</div>280 </div>281 <div class="tab">282 <div class="icon">283 <svg viewBox="0 0 24 24"><circle cx="12" cy="13" r="7" fill="none" stroke="currentColor" stroke-width="2"/><path d="M12 13l4 2" stroke="currentColor" stroke-width="2"/></svg>284 </div>285 <div>Stopwatch</div>286 </div>287 <div class="tab">288 <div class="icon">289 <svg viewBox="0 0 24 24"><path d="M3 18h18v2H3zM4 12h8v4H4zM14 12h6v4h-6z" fill="currentColor"/></svg>290 </div>291 <div>Bedtime</div>292 </div>293 </div>294 <div class="gesture"></div>295 </div>296 297</div>298</body>299</html>