GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Alarms UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #181a1c; color: #e0e0e0;13 }14 15 /* Status bar */16 .status-bar {17 height: 100px;18 background: #2f3235;19 display: flex;20 align-items: center;21 padding: 0 32px;22 font-size: 38px;23 color: #e6e6e6;24 }25 .status-left { display: flex; align-items: center; gap: 20px; }26 .status-right { margin-left: auto; display: flex; align-items: center; gap: 28px; }27 .icon-sb { width: 44px; height: 44px; opacity: 0.9; }28 29 /* App bar */30 .app-bar {31 height: 130px;32 background: #26282b;33 display: flex;34 align-items: center;35 padding: 0 28px;36 border-bottom: 1px solid #33383d;37 }38 .app-title {39 font-size: 52px;40 margin-left: 20px;41 letter-spacing: 0.5px;42 }43 .app-actions { margin-left: auto; display: flex; align-items: center; gap: 22px; }44 .icon { width: 60px; height: 60px; }45 46 /* Content */47 .content {48 padding: 24px 28px 0 28px;49 background: #1f2124;50 height: 2170px;51 }52 53 /* Time row */54 .time-row {55 position: relative;56 display: flex;57 align-items: center;58 padding: 40px 0 20px 0;59 }60 .time {61 font-size: 168px;62 font-weight: 300;63 line-height: 1;64 letter-spacing: -2px;65 }66 .ampm {67 font-size: 62px;68 margin-left: 16px;69 opacity: 0.9;70 }71 .toggle {72 margin-left: auto;73 width: 120px; height: 64px;74 background: #3f3426;75 border-radius: 32px;76 position: relative;77 }78 .toggle::after {79 content: "";80 position: absolute;81 right: 6px; top: 4px;82 width: 56px; height: 56px;83 border-radius: 50%;84 background: #c3902e;85 box-shadow: -8px 0 0 rgba(0,0,0,0.35);86 }87 .time-check {88 position: absolute;89 right: 40px;90 bottom: 14px;91 width: 52px; height: 52px;92 }93 94 .divider {95 height: 2px;96 background: #33383d;97 margin: 24px 0;98 }99 100 /* Setting rows */101 .setting {102 padding: 18px 6px;103 }104 .setting .label {105 color: #cc9932;106 font-size: 46px;107 margin-bottom: 14px;108 }109 .setting .sub {110 color: #c7c7c7;111 font-size: 42px;112 opacity: 0.85;113 }114 115 /* Checkbox row */116 .checkbox-row {117 display: flex;118 align-items: center;119 padding: 26px 6px;120 font-size: 50px;121 }122 .checkbox {123 margin-left: auto;124 width: 60px; height: 60px;125 border: 4px solid #9aa0a6;126 border-radius: 8px;127 background: transparent;128 }129 130 /* Large spacer area to mimic empty form region */131 .spacer {132 height: 1160px;133 }134 135 /* Bottom actions */136 .actions {137 position: absolute;138 bottom: 100px;139 left: 0; right: 0;140 padding: 0 30px;141 }142 .actions .top-line {143 height: 2px; background: #33383d; margin-bottom: 30px;144 }145 .actions-row {146 display: flex; align-items: center;147 font-size: 50px;148 color: #cc9932;149 }150 .actions-row .left { }151 .actions-row .right { margin-left: auto; }152 153 /* Gesture bar */154 .gesture {155 position: absolute;156 bottom: 28px;157 left: 50%; transform: translateX(-50%);158 width: 300px; height: 16px;159 background: #ffffff;160 border-radius: 10px;161 opacity: 0.85;162 }163</style>164</head>165<body>166<div id="render-target">167 168 <!-- Status bar -->169 <div class="status-bar">170 <div class="status-left">171 <div>12:41</div>172 <svg class="icon-sb" viewBox="0 0 24 24">173 <rect x="3" y="8" width="4" height="12" fill="#bdbdbd"></rect>174 <rect x="9" y="11" width="4" height="9" fill="#bdbdbd"></rect>175 <rect x="15" y="5" width="4" height="15" fill="#bdbdbd"></rect>176 </svg>177 <div style="font-size:34px; opacity:0.85;">66°</div>178 </div>179 <div class="status-right">180 <svg class="icon-sb" viewBox="0 0 24 24">181 <path d="M2 18l8-8 6 6 6-6" fill="none" stroke="#e0e0e0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>182 </svg>183 <svg class="icon-sb" viewBox="0 0 24 24">184 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#e0e0e0" stroke-width="2"></rect>185 <rect x="4" y="8" width="10" height="8" fill="#e0e0e0"></rect>186 <rect x="20" y="9" width="2" height="6" fill="#e0e0e0"></rect>187 </svg>188 </div>189 </div>190 191 <!-- App bar -->192 <div class="app-bar">193 <svg class="icon" viewBox="0 0 24 24">194 <path d="M15 6l-6 6 6 6" fill="none" stroke="#e0e0e0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>195 </svg>196 <div class="app-title">Alarms</div>197 <div class="app-actions">198 <svg class="icon" viewBox="0 0 24 24">199 <circle cx="12" cy="5" r="2" fill="#cfcfcf"></circle>200 <circle cx="12" cy="12" r="2" fill="#cfcfcf"></circle>201 <circle cx="12" cy="19" r="2" fill="#cfcfcf"></circle>202 </svg>203 </div>204 </div>205 206 <!-- Content -->207 <div class="content">208 <div class="time-row">209 <div class="time">5:30</div>210 <div class="ampm">PM</div>211 <div class="toggle"></div>212 <svg class="time-check" viewBox="0 0 24 24">213 <path d="M5 13l4 4 10-10" fill="none" stroke="#bfbfbf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>214 </svg>215 </div>216 217 <div class="divider"></div>218 219 <div class="setting">220 <div class="label">Repeat</div>221 <div class="sub">Never</div>222 </div>223 224 <div class="divider"></div>225 226 <div class="setting">227 <div class="label">Ringtone</div>228 <div class="sub">Default (Fresh Start)</div>229 </div>230 231 <div class="divider"></div>232 233 <div class="checkbox-row">234 <div>Gentle pre-alarm</div>235 <div class="checkbox"></div>236 </div>237 238 <div class="divider" style="margin-top: 20px;"></div>239 240 <div class="setting">241 <div class="label" style="color:#c7c7c7;">Label</div>242 </div>243 244 <div class="spacer"></div>245 </div>246 247 <!-- Bottom actions -->248 <div class="actions">249 <div class="top-line"></div>250 <div class="actions-row">251 <div class="left">CANCEL</div>252 <div class="right">OK</div>253 </div>254 </div>255 256 <div class="gesture"></div>257</div>258</body>259</html>