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>Alarm - Mock</title>7<style>8 :root{9 --bg:#12161b;10 --card:#171b22;11 --card-2:#202a33;12 --text:#c9d1da;13 --text-dim:#9aa6b2;14 --accent:#9cc1ff;15 --divider:#26303a;16 --key:#2a2f35;17 --key-dim:#22272d;18 --ok:#cfe0ff;19 --ok-bg:#3b4c64;20 }21 html,body{margin:0;padding:0;background:transparent;font-family:system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";}22 #render-target{23 position:relative; overflow:hidden;24 width:1080px; height:2400px;25 background:var(--bg);26 color:var(--text);27 }28 /* Status bar */29 .statusbar{30 position:absolute; left:0; top:0; right:0; height:110px;31 display:flex; align-items:center; justify-content:space-between;32 padding:0 36px; color:#e6edf5; font-weight:600; letter-spacing:1px;33 }34 .status-icons{display:flex; gap:22px; align-items:center; opacity:.9;}35 .dot{width:10px;height:10px;background:#cfd6df;border-radius:50%;}36 /* Header */37 .header{38 position:absolute; left:40px; top:140px;39 font-size:64px; color:#b8c2cc; font-weight:600;40 }41 .menu{42 position:absolute; right:36px; top:150px; width:60px; height:60px; display:flex; align-items:center; justify-content:center; opacity:.7;43 }44 /* Alarm sheet/card */45 .sheet{46 position:absolute; left:36px; right:36px; top:280px;47 background:var(--card); border-radius:36px;48 padding:38px 38px 28px 38px;49 box-shadow:0 10px 40px rgba(0,0,0,.5) inset;50 }51 .add-label{52 display:flex; align-items:center; gap:16px; color:var(--text-dim);53 font-size:34px; margin-bottom:20px;54 }55 .add-label svg{opacity:.8;}56 .time-row{display:flex; align-items:baseline; gap:18px; margin:16px 0 28px;}57 .time{58 font-size:180px; font-weight:800; letter-spacing:2px; color:#e9eef6;59 line-height:1;60 text-shadow:0 2px 0 rgba(0,0,0,.25);61 }62 .ampm{font-size:46px; font-weight:700; color:#cdd6e0; position:relative; top:-20px;}63 .chevron{64 position:absolute; right:28px; top:18px; width:72px; height:72px; border-radius:50%;65 background:#2a3037; display:flex; align-items:center; justify-content:center; opacity:.6;66 }67 .row{display:flex; align-items:center; justify-content:space-between; height:120px; border-top:1px solid var(--divider); padding:0 6px; color:#c7d1db;}68 .row:first-of-type{border-top:none; margin-top:320px;}69 .l{display:flex; align-items:center; gap:26px; font-size:40px;}70 .r{display:flex; align-items:center;}71 .chip{72 width:64px; height:64px; border-radius:50%; background:#8fb2ff33; border:2px solid #8fb2ff;73 display:flex; align-items:center; justify-content:center; color:#8fb2ff; font-weight:700;74 }75 .chip.filled{background:#a9c4ff; color:#1d2b46; border:none;}76 .plus{width:60px;height:60px;border-radius:50%;border:3px solid #94a3b8;color:#94a3b8;display:flex;align-items:center;justify-content:center;font-size:44px;}77 /* Floating label dialog */78 .dialog{79 position:absolute; left:70px; right:70px; top:520px;80 background:#1f2832; border-radius:36px; padding:34px; box-shadow:0 16px 40px rgba(0,0,0,.55);81 }82 .input{83 border:3px solid var(--accent); border-radius:18px; height:160px; padding:22px; color:#e7f0ff; font-size:42px;84 display:flex; align-items:flex-start;85 }86 .float-label{87 position:absolute; top:22px; left:50px; color:var(--accent); font-size:34px; background:#1f2832; padding:0 12px;88 }89 .dialog-actions{display:flex; gap:36px; justify-content:flex-end; padding:26px 6px 6px;}90 .btn{color:#cfe0ff; font-size:44px;}91 /* Icons */92 .ico{width:46px; height:46px; fill:#9aa6b2;}93 .ico-big{width:56px; height:56px; fill:#c6d0da;}94 /* Keyboard */95 .keyboard{96 position:absolute; left:0; right:0; bottom:90px; height:720px;97 background:#161b21; border-top-left-radius:26px; border-top-right-radius:26px; box-shadow:0 -8px 24px rgba(0,0,0,.6) inset;98 padding:22px 26px;99 }100 .kbd-top{display:flex; gap:28px; margin-bottom:18px;}101 .kbd-icon{102 width:86px; height:86px; border-radius:20px; background:#1f252c; display:flex; align-items:center; justify-content:center; color:#d0d6de; font-weight:700;103 }104 .keys{display:flex; gap:12px; justify-content:center; margin:14px 0;}105 .key{106 background:var(--key); color:#d9e1ea; font-size:44px; width:90px; height:108px; border-radius:18px; display:flex; align-items:center; justify-content:center;107 box-shadow:0 2px 0 #000 inset;108 }109 .key.wide{width:180px;}110 .key.xwide{flex:1; min-width:300px;}111 .key.dim{background:var(--key-dim); color:#b8c1cb;}112 .key.primary{background:#c3cff5; color:#1b2a46; font-weight:800;}113 .space{height:108px;}114 /* Bottom gesture handle */115 .handle{116 position:absolute; left:50%; transform:translateX(-50%);117 bottom:24px; width:340px; height:10px; border-radius:6px; background:#9aa6b244;118 }119</style>120</head>121<body>122<div id="render-target">123 124 <div class="statusbar">125 <div style="font-size:40px;">11:27</div>126 <div class="status-icons">127 <svg class="ico" viewBox="0 0 24 24"><path d="M7 3h10v2H7zM5 6h14l1 14H4z"/></svg>128 <svg class="ico" viewBox="0 0 24 24"><path d="M12 1a4 4 0 0 1 4 4v1h-8V5a4 4 0 0 1 4-4zm-7 9h14l-1 10H6z"/></svg>129 <div class="dot"></div>130 <svg class="ico" viewBox="0 0 24 24"><path d="M18 7v10H6V7h12m0-2H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2z"/></svg>131 <svg class="ico" viewBox="0 0 24 24"><path d="M12 4l4 4h-3v6H11V8H8l4-4zm7 14H5v2h14v-2z"/></svg>132 <svg class="ico" viewBox="0 0 24 24"><path d="M16.5 4A5.5 5.5 0 0 0 11 9.5c0 4.125 5.5 10.5 5.5 10.5S22 13.625 22 9.5A5.5 5.5 0 0 0 16.5 4zm0 7.5A2 2 0 1 1 16.5 7a2 2 0 0 1 0 4.5z"/></svg>133 </div>134 </div>135 136 <div class="header">Alarm</div>137 <div class="menu">138 <svg class="ico" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>139 </div>140 141 <div class="sheet">142 <div class="chevron">143 <svg class="ico" viewBox="0 0 24 24"><path d="M7 14l5-5 5 5z"/></svg>144 </div>145 <div class="add-label">146 <svg class="ico" viewBox="0 0 24 24"><path d="M3 7v6l7 7 11-11-7-7H3zm2 2h7l5 5-7 7-5-5V9z"/></svg>147 <span>Add label</span>148 </div>149 150 <div class="time-row">151 <div class="time">6:10</div>152 <div class="ampm">AM</div>153 </div>154 155 <!-- options list (appears under dialog so pushed with margin in css) -->156 <div class="row">157 <div class="l">158 <svg class="ico-big" viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm6-6V11c0-3.07-1.64-5.64-4.5-6.32V4a1.5 1.5 0 0 0-3 0v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>159 <span>Full of Wonder</span>160 </div>161 <div class="r"></div>162 </div>163 <div class="row">164 <div class="l">165 <svg class="ico-big" viewBox="0 0 24 24"><path d="M3 7h2v10H3V7zm16 0h2v10h-2V7zM7 9h2v6H7V9zm8 0h2v6h-2V9z"/></svg>166 <span>Vibrate</span>167 </div>168 <div class="r">169 <div class="chip filled">170 <svg viewBox="0 0 24 24" width="34" height="34"><path fill="#1b2a46" d="M9 16.2l-3.5-3.5L4 14.2 9 19l11-11-1.5-1.5z"/></svg>171 </div>172 </div>173 </div>174 <div class="row">175 <div class="l">176 <svg class="ico-big" viewBox="0 0 24 24"><circle cx="6" cy="12" r="2"/><circle cx="10.5" cy="10.5" r="1.5"/><circle cx="15" cy="9" r="1.2"/><circle cx="17.5" cy="13.5" r="2"/></svg>177 <span>Google Assistant Routine</span>178 </div>179 <div class="r">180 <div class="plus">+</div>181 </div>182 </div>183 <div class="row">184 <div class="l">185 <svg class="ico-big" viewBox="0 0 24 24"><path d="M7 4h10l1 3H6l1-3zm-1 5h12v11a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V9z"/></svg>186 <span>Delete</span>187 </div>188 <div class="r"></div>189 </div>190 </div>191 192 <!-- Dialog overlay -->193 <div class="dialog">194 <div class="float-label">Label</div>195 <div class="input"></div>196 <div class="dialog-actions">197 <div class="btn">Cancel</div>198 <div class="btn">OK</div>199 </div>200 </div>201 202 <!-- Keyboard -->203 <div class="keyboard">204 <div class="kbd-top">205 <div class="kbd-icon">⬛</div>206 <div class="kbd-icon">😊</div>207 <div class="kbd-icon">GIF</div>208 <div class="kbd-icon">⚙</div>209 <div class="kbd-icon">G↔︎</div>210 <div class="kbd-icon">🎨</div>211 </div>212 213 <div class="keys">214 <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>215 </div>216 <div class="keys" style="padding:0 26px;">217 <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>218 </div>219 <div class="keys">220 <div class="key dim" style="width:120px;">⇧</div>221 <div class="key">Z</div><div class="key">X</div><div class="key">C</div><div class="key">V</div><div class="key">B</div><div class="key">N</div><div class="key">M</div>222 <div class="key dim" style="width:140px;">⌫</div>223 </div>224 <div class="keys">225 <div class="key primary" style="width:150px;">?123</div>226 <div class="key dim" style="width:90px;">,</div>227 <div class="key dim" style="width:90px;">😊</div>228 <div class="key xwide space"></div>229 <div class="key dim" style="width:90px;">.</div>230 <div class="key primary" style="width:150px;">✓</div>231 </div>232 </div>233 234 <div class="handle"></div>235</div>236</body>237</html>