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 Edit Label</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; position: relative; overflow: hidden;11 background: #0E1217; color: #DDE3EA; border-radius: 28px;12 }13 14 /* Top status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; width: 100%; height: 110px;17 color: #E8EEF6; display: flex; align-items: center; justify-content: space-between;18 padding: 0 32px; box-sizing: border-box; font-weight: 500;19 }20 .status-left { font-size: 40px; letter-spacing: 0.5px; }21 .status-right { display: flex; gap: 26px; align-items: center; }22 .status-icon svg { width: 36px; height: 36px; fill: none; stroke: #C8D0DA; stroke-width: 2.6; }23 24 /* Header */25 .header {26 position: absolute; top: 110px; left: 0; width: 100%; height: 140px; padding: 0 32px;27 box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;28 }29 .header .title { font-size: 72px; font-weight: 500; color: #E9EEF6; }30 .dots { width: 16px; height: 70px; display: flex; align-items: center; justify-content: center; margin-right: 10px; }31 .dots svg { width: 12px; height: 48px; fill: #C7CFD9; }32 33 /* Alarm card */34 .alarm-card {35 position: absolute; top: 280px; left: 32px; width: 1016px; height: 260px;36 background: #161A20; border-radius: 36px; box-shadow: 0 8px 24px rgba(0,0,0,0.35);37 padding: 36px 40px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;38 }39 .time { font-size: 134px; font-weight: 600; color: #E8ECF4; letter-spacing: 1px; }40 .time .ampm { font-size: 44px; margin-left: 16px; color: #B7C0CB; vertical-align: super; }41 .toggle {42 width: 140px; height: 76px; border-radius: 38px; position: relative;43 background: #203A58; /* off-looking dark blue */44 }45 .toggle .knob {46 position: absolute; top: 8px; right: 8px; width: 60px; height: 60px;47 background: #AFC2D9; border-radius: 50%;48 }49 50 /* Dialog overlay */51 .dialog {52 position: absolute; top: 730px; left: 80px; width: 920px; background: #222A33;53 border-radius: 36px; padding: 36px; box-sizing: border-box;54 box-shadow: 0 18px 40px rgba(0,0,0,0.55);55 border: 1px solid rgba(173, 194, 219, 0.16);56 }57 .field-label { color: #AFC7E9; font-size: 38px; margin-bottom: 22px; }58 .text-input {59 width: 100%; height: 120px; border-radius: 16px; padding: 26px 24px;60 box-sizing: border-box; font-size: 56px; color: #EAF1FF; background: #1D242B;61 border: 3px solid #73A7FF; outline: none;62 }63 .dialog-actions {64 margin-top: 34px; display: flex; justify-content: flex-end; gap: 48px;65 }66 .btn-link { font-size: 46px; color: #9BC3FF; }67 68 /* Day chips */69 .day-row {70 position: absolute; top: 1070px; left: 32px; width: 1016px; display: flex; gap: 28px;71 align-items: center; justify-content: flex-start;72 }73 .chip {74 width: 110px; height: 110px; border-radius: 56px; border: 2px solid #3A4350;75 color: #C7CED8; font-size: 44px; display: flex; align-items: center; justify-content: center;76 background: #0E1217;77 }78 79 /* List rows */80 .list {81 position: absolute; top: 1210px; left: 32px; width: 1016px;82 display: flex; flex-direction: column; gap: 38px;83 }84 .row {85 height: 120px; border-radius: 24px; background: #151A20; padding: 0 28px;86 box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;87 }88 .row-left { display: flex; align-items: center; gap: 26px; }89 .row-icon svg { width: 48px; height: 48px; stroke: #C5CDD8; stroke-width: 2.4; fill: none; }90 .row-text { font-size: 46px; color: #DDE3EA; }91 .row-right { display: flex; align-items: center; }92 .plus-btn, .check-btn {93 width: 72px; height: 72px; border-radius: 36px; display: flex; align-items: center; justify-content: center;94 }95 .plus-btn { background: #263042; border: 2px solid #42516A; }96 .plus-btn svg { width: 36px; height: 36px; stroke: #9BB7E5; stroke-width: 3.4; }97 .check-btn { background: #AFC7FF; }98 .check-btn svg { width: 36px; height: 36px; stroke: #0E1217; stroke-width: 3.6; }99 100 /* Keyboard */101 .keyboard {102 position: absolute; left: 0; bottom: 0; width: 100%; height: 960px;103 background: #14181E; border-top-left-radius: 32px; border-top-right-radius: 32px;104 box-shadow: 0 -14px 40px rgba(0,0,0,0.45);105 }106 .suggestions {107 height: 120px; border-bottom: 1px solid #2A313B; display: flex; align-items: center; justify-content: space-between;108 padding: 0 22px; box-sizing: border-box; color: #E9EDF4;109 }110 .s-left { display: flex; align-items: center; gap: 18px; }111 .grid-icon {112 width: 72px; height: 72px; border-radius: 20px; background: #20252B; display: grid; grid-template-columns: repeat(3, 1fr);113 grid-gap: 6px; padding: 10px; box-sizing: border-box;114 }115 .grid-icon span { background: #3A4048; border-radius: 6px; }116 .s-words { display: flex; gap: 28px; font-size: 42px; color: #E0E6EF; }117 .divider { color: #6E7783; }118 .mic-icon svg { width: 42px; height: 42px; fill: none; stroke: #C6CED8; stroke-width: 2.6; }119 120 .keys { padding: 24px; box-sizing: border-box; display: flex; flex-direction: column; gap: 24px; }121 .key-row { display: flex; justify-content: space-between; gap: 12px; }122 .key {123 height: 120px; min-width: 86px; flex: 1; border-radius: 18px; background: #1B2027; color: #E5EBF3; font-size: 48px;124 display: flex; align-items: center; justify-content: center; box-shadow: inset 0 -3px 0 rgba(255,255,255,0.04);125 }126 .key.wide { flex: 2.2; }127 .key.space { flex: 5.6; color: #B9C1CB; font-size: 34px; }128 .key.special { background: #20262D; color: #C9D1DC; }129 .enter {130 width: 140px; height: 140px; border-radius: 70px; background: #C9D6FF; color: #0E1217; font-weight: 700; font-size: 54px;131 display: flex; align-items: center; justify-content: center;132 }133 .backspace-icon svg { width: 42px; height: 42px; stroke: #C7CFDA; stroke-width: 2.4; fill: none; }134 135 /* Bottom handle */136 .handle {137 position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);138 width: 260px; height: 10px; background: #E5E6EB; border-radius: 5px; opacity: 0.9;139 }140</style>141</head>142<body>143<div id="render-target">144 145 <!-- Status bar -->146 <div class="status-bar">147 <div class="status-left">11:36</div>148 <div class="status-right">149 <div class="status-icon">150 <!-- Headphones icon -->151 <svg viewBox="0 0 24 24"><path d="M4 12a8 8 0 0 1 16 0"></path><path d="M4 12v5a2 2 0 0 0 2 2h2v-7H6a2 2 0 0 0-2 2"></path><path d="M20 12v5a2 2 0 0 1-2 2h-2v-7h2a2 2 0 0 1 2 2"></path></svg>152 </div>153 <div class="status-icon">154 <!-- Wifi -->155 <svg viewBox="0 0 24 24"><path d="M2 9c5-4 15-4 20 0"></path><path d="M5 12c3-3 11-3 14 0"></path><path d="M8 15c2-2 6-2 8 0"></path><circle cx="12" cy="18" r="1.6" fill="#C8D0DA"></circle></svg>156 </div>157 <div class="status-icon">158 <!-- Battery -->159 <svg viewBox="0 0 24 24"><rect x="3" y="7" width="17" height="10" rx="2"></rect><rect x="20.5" y="10" width="2.5" height="4" rx="0.6" fill="#C8D0DA"></rect></svg>160 </div>161 </div>162 </div>163 164 <!-- Header -->165 <div class="header">166 <div class="title">Alarm</div>167 <div class="dots">168 <svg viewBox="0 0 4 16"><circle cx="2" cy="2" r="2"></circle><circle cx="2" cy="8" r="2"></circle><circle cx="2" cy="14" r="2"></circle></svg>169 </div>170 </div>171 172 <!-- Alarm card -->173 <div class="alarm-card">174 <div class="time">7:00 <span class="ampm">AM</span></div>175 <div class="toggle"><div class="knob"></div></div>176 </div>177 178 <!-- Edit Label Dialog -->179 <div class="dialog">180 <div class="field-label">Label</div>181 <input class="text-input" value="Wakeup">182 <div class="dialog-actions">183 <div class="btn-link">Cancel</div>184 <div class="btn-link">OK</div>185 </div>186 </div>187 188 <!-- Day chips -->189 <div class="day-row">190 <div class="chip">S</div>191 <div class="chip">M</div>192 <div class="chip">T</div>193 <div class="chip">W</div>194 <div class="chip">T</div>195 <div class="chip">F</div>196 <div class="chip">S</div>197 </div>198 199 <!-- Options list -->200 <div class="list">201 <div class="row">202 <div class="row-left">203 <div class="row-icon">204 <!-- Calendar -->205 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2"></rect><path d="M3 9h18"></path><path d="M7 3v4"></path><path d="M17 3v4"></path></svg>206 </div>207 <div class="row-text">Schedule alarm</div>208 </div>209 <div class="row-right">210 <div class="plus-btn">211 <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"></path></svg>212 </div>213 </div>214 </div>215 <div class="row">216 <div class="row-left">217 <div class="row-icon">218 <!-- Bell -->219 <svg viewBox="0 0 24 24"><path d="M12 3c-3 0-6 3-6 7v3l-2 2h16l-2-2v-3c0-4-3-7-6-7z"></path><path d="M10 19c0 1 1 2 2 2s2-1 2-2"></path></svg>220 </div>221 <div class="row-text">Full of Wonder</div>222 </div>223 <div class="row-right"></div>224 </div>225 <div class="row">226 <div class="row-left">227 <div class="row-icon">228 <!-- Vibrate glyph -->229 <svg viewBox="0 0 24 24"><path d="M6 3l12 18"></path><path d="M18 3L6 21"></path></svg>230 </div>231 <div class="row-text">Vibrate</div>232 </div>233 <div class="row-right">234 <div class="check-btn">235 <svg viewBox="0 0 24 24"><path d="M5 12l5 5 9-10"></path></svg>236 </div>237 </div>238 </div>239 </div>240 241 <!-- Keyboard -->242 <div class="keyboard">243 <div class="suggestions">244 <div class="s-left">245 <div class="grid-icon">246 <span></span><span></span><span></span>247 <span></span><span></span><span></span>248 <span></span><span></span><span></span>249 </div>250 <div class="s-words">251 <div>Wakeup</div>252 <div class="divider">|</div>253 <div>Wake-up</div>254 <div class="divider">|</div>255 <div>Wake up</div>256 </div>257 </div>258 <div class="mic-icon">259 <svg viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="10" rx="3"></rect><path d="M5 10a7 7 0 0 0 14 0"></path><path d="M12 17v4"></path></svg>260 </div>261 </div>262 263 <div class="keys">264 <div class="key-row">265 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>266 </div>267 <div class="key-row">268 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>269 <div class="key special backspace-icon">270 <svg viewBox="0 0 24 24"><path d="M20 7h-9l-5 5 5 5h9v-10z"></path></svg>271 </div>272 </div>273 <div class="key-row">274 <div class="key special wide">?123</div>275 <div class="key special">,</div>276 <div class="key special">😊</div>277 <div class="key space">space</div>278 <div class="key">.</div>279 <div class="enter">✓</div>280 </div>281 </div>282 283 <div class="handle"></div>284 </div>285 286</div>287</body>288</html>