GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Alarm Screen Mock</title>6<style>7 body{margin:0;padding:0;background:transparent;font-family:Segoe UI, Roboto, Arial, sans-serif;color:#e7eaf0;}8 #render-target{9 width:1080px;height:2400px;position:relative;overflow:hidden;10 background:#22262b;11 }12 /* Top status bar */13 .status{position:absolute;left:0;top:0;width:100%;height:110px;padding:0 36px;box-sizing:border-box;14 display:flex;align-items:center;justify-content:space-between;color:#dfe4ea;}15 .status .left{font-weight:700;font-size:42px;letter-spacing:1px;}16 .status .right{display:flex;gap:18px;align-items:center;}17 .ico{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;opacity:.9;}18 /* Page title */19 .title{position:absolute;top:120px;left:46px;font-size:84px;font-weight:700;letter-spacing:.5px;color:#e9edf4;}20 /* Cards */21 .card{22 width:1000px;margin:20px auto;border-radius:36px;background:#171b20;23 box-sizing:border-box;color:#e9edf4;24 }25 .card.collapsed{height:260px;margin-top:210px;padding:36px 44px;display:flex;align-items:center;justify-content:space-between;}26 .big-time{font-size:140px;font-weight:800;letter-spacing:2px;}27 .am{font-size:48px;margin-left:16px;opacity:.85;}28 .subtext{margin-top:6px;color:#aeb6c1;font-size:40px;}29 .switch{30 width:172px;height:92px;border-radius:60px;background:#2f343b;position:relative;cursor:default;31 }32 .switch .knob{33 position:absolute;top:10px;left:12px;width:72px;height:72px;border-radius:50%;background:#c8d0da;34 transition:all .2s ease;35 }36 .switch.on{background:#6b88ff;}37 .switch.on .knob{left:88px;background:#dbe4ff;}38 /* Expanded card */39 .card.expanded{padding:34px 36px 40px; margin-top:28px;}40 .row{display:flex;align-items:center;justify-content:space-between;}41 .label-row{display:flex;align-items:center;gap:18px;color:#cfd6df;font-size:42px;margin-bottom:18px;}42 .tag-ico{width:46px;height:46px;border-radius:6px;border:2px solid #8b96a3;display:flex;align-items:center;justify-content:center;}43 .dayline{display:flex;align-items:center;gap:22px;margin:22px 0 8px;}44 .dot-day{45 width:96px;height:96px;border-radius:60px;background:#23282f;color:#b8c2cf;display:flex;align-items:center;justify-content:center;46 font-size:44px;47 }48 .dot-day.sel{background:#a8c0ff;color:#0e1d3b;}49 .setting{50 display:flex;align-items:center;justify-content:space-between;padding:26px 8px;border-top:1px solid rgba(255,255,255,.04);51 color:#dfe5ee;font-size:42px;52 }53 .setting:first-of-type{border-top:none;margin-top:6px;}54 .s-left{display:flex;align-items:center;gap:26px;}55 .mini{56 width:64px;height:64px;border-radius:14px;background:#23282f;display:flex;align-items:center;justify-content:center;color:#aeb6c1;57 }58 .chip-right{59 width:76px;height:76px;border-radius:24px;border:3px solid #aeb6c1;display:flex;align-items:center;justify-content:center;60 color:#aeb6c1;font-weight:700;61 }62 .chip-right.filled{background:#a8c0ff;border-color:#a8c0ff;color:#122046;}63 /* Floating add button */64 .fab{65 position:absolute;left:50%;transform:translateX(-50%);bottom:360px;width:230px;height:230px;border-radius:50%;66 background:#b8ccff;display:flex;align-items:center;justify-content:center;color:#11224c;font-size:120px;font-weight:700;67 box-shadow:0 10px 30px rgba(0,0,0,.4);68 }69 /* Bottom nav */70 .bottom-bar{71 position:absolute;left:0;bottom:0;width:100%;height:210px;background:#1a1e23;border-top-left-radius:26px;border-top-right-radius:26px;72 display:flex;align-items:center;justify-content:space-around;padding-bottom:12px;73 }74 .nav-item{display:flex;flex-direction:column;align-items:center;gap:16px;color:#cbd3dd;font-size:38px;}75 .nav-item.active{color:#dfe6f3;}76 .nav-pill{77 position:absolute;left:34px;bottom:124px;width:146px;height:86px;border-radius:46px;background:#2a2f36;display:flex;align-items:center;justify-content:center;78 }79 /* Helper icons as simple SVG */80 svg{display:block}81</style>82</head>83<body>84<div id="render-target">85 86 <!-- Status bar -->87 <div class="status">88 <div class="left">11:20</div>89 <div class="right">90 <div class="ico">91 <svg width="34" height="34" viewBox="0 0 24 24" fill="#cfd6df"><path d="M7 10h10v2H7v-2zm0 4h7v2H7v-2zM5 3h14a2 2 0 0 1 2 2v14l-4-4H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/></svg>92 </div>93 <div class="ico">94 <svg width="34" height="34" viewBox="0 0 24 24" fill="#cfd6df"><path d="M10 17l5-5-5-5v10z"/></svg>95 </div>96 <div class="ico">97 <svg width="34" height="34" viewBox="0 0 24 24" fill="#cfd6df"><path d="M12 2l4 4h-3v7h-2V6H8l4-4zM6 18h12v2H6v-2z"/></svg>98 </div>99 <div class="ico">100 <svg width="34" height="34" viewBox="0 0 24 24" fill="#cfd6df"><circle cx="12" cy="12" r="2.5"/><path d="M4.93 4.93a10 10 0 1 1 14.14 14.14A10 10 0 0 1 4.93 4.93zm2.83 2.83a7 7 0 1 0 9.9 9.9 7 7 0 0 0-9.9-9.9z"/></svg>101 </div>102 <div class="ico">103 <svg width="34" height="34" viewBox="0 0 24 24" fill="#cfd6df"><path d="M18 6.5V12a6 6 0 1 1-12 0V6.5a2.5 2.5 0 0 1 5 0V12a1 1 0 0 0 2 0V6.5a2.5 2.5 0 1 1 5 0z"/></svg>104 </div>105 <div class="ico">106 <svg width="34" height="34" viewBox="0 0 24 24" fill="#cfd6df"><path d="M12 22a7 7 0 0 0 7-7h-2a5 5 0 0 1-10 0H5a7 7 0 0 0 7 7zM11 2h2v9h-2z"/></svg>107 </div>108 </div>109 </div>110 111 <!-- Title -->112 <div class="title">Alarm</div>113 114 <!-- First collapsed alarm -->115 <div class="card collapsed">116 <div>117 <div style="display:flex;align-items:flex-end;">118 <div class="big-time">11:00</div>119 <div class="am">AM</div>120 </div>121 <div class="subtext">Mon, Tue</div>122 </div>123 <div class="switch">124 <div class="knob"></div>125 </div>126 </div>127 128 <!-- Expanded alarm -->129 <div class="card expanded">130 <div class="label-row">131 <div class="tag-ico">132 <svg width="30" height="30" viewBox="0 0 24 24" fill="#8b96a3"><path d="M20 10l-8 8-8-8V4h6l10 10zM7 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>133 </div>134 <div>meeting</div>135 <div style="margin-left:auto;">136 <div class="switch on"><div class="knob"></div></div>137 </div>138 </div>139 140 <div class="row" style="margin-top:8px;">141 <div style="display:flex;align-items:flex-end;">142 <div class="big-time">12:30</div>143 <div class="am">PM</div>144 </div>145 <div style="display:flex;align-items:center;gap:18px;">146 <div style="color:#aeb6c1;font-size:44px;margin-right:6px;">Saturday</div>147 </div>148 </div>149 150 <div class="dayline">151 <div class="dot-day">S</div>152 <div class="dot-day">M</div>153 <div class="dot-day">T</div>154 <div class="dot-day">W</div>155 <div class="dot-day">T</div>156 <div class="dot-day">F</div>157 <div class="dot-day sel">S</div>158 </div>159 160 <div class="setting">161 <div class="s-left">162 <div class="mini">163 <svg width="36" height="36" viewBox="0 0 24 24" fill="#aeb6c1"><path d="M12 6a7 7 0 0 1 7 7v2l2 2v1H3v-1l2-2v-2a7 7 0 0 1 7-7zm0-4a2 2 0 0 1 2 2h-4a2 2 0 0 1 2-2z"/></svg>164 </div>165 <div>Pause alarm</div>166 </div>167 <div class="chip-right">+</div>168 </div>169 170 <div class="setting">171 <div class="s-left">172 <div class="mini">173 <svg width="36" height="36" viewBox="0 0 24 24" fill="#aeb6c1"><path d="M12 22a7 7 0 0 1-7-7h2a5 5 0 0 0 10 0h2a7 7 0 0 1-7 7zM12 2a5 5 0 0 1 5 5v5H7V7a5 5 0 0 1 5-5z"/></svg>174 </div>175 <div>Full of Wonder</div>176 </div>177 </div>178 179 <div class="setting">180 <div class="s-left">181 <div class="mini">182 <svg width="36" height="36" viewBox="0 0 24 24" fill="#aeb6c1"><path d="M3 17h2l3-7 3 7h2l3-7 3 7h2l-4-10h-2l-3 7-3-7H7L3 17z"/></svg>183 </div>184 <div>Vibrate</div>185 </div>186 <div class="chip-right filled">187 <svg width="34" height="34" viewBox="0 0 24 24" fill="#11224c"><path d="M9 16.2l-3.5-3.5L4 14.2 9 19l11-11-1.5-1.5z"/></svg>188 </div>189 </div>190 191 <div class="setting">192 <div class="s-left">193 <div class="mini">194 <svg width="36" height="36" viewBox="0 0 24 24" fill="#aeb6c1"><path d="M12 3a9 9 0 0 0 0 18h6v-2h-6a7 7 0 1 1 7-7v1h2v-1A9 9 0 0 0 12 3z"/></svg>195 </div>196 <div>Google Assistant Routine</div>197 </div>198 <div class="chip-right">+</div>199 </div>200 201 <div class="setting">202 <div class="s-left">203 <div class="mini">204 <svg width="36" height="36" viewBox="0 0 24 24" fill="#aeb6c1"><path d="M6 7h12l-1 13H7L6 7zm3-4h6l1 2H8l1-2z"/></svg>205 </div>206 <div>Delete</div>207 </div>208 </div>209 </div>210 211 <!-- Floating action button -->212 <div class="fab">+</div>213 214 <!-- Bottom navigation -->215 <div class="bottom-bar">216 <div class="nav-item active">217 <div class="ico">218 <svg width="56" height="56" viewBox="0 0 24 24" fill="#dfe6f3"><path d="M12 8a6 6 0 0 1 6 6v2l2 2v1H4v-1l2-2v-2a6 6 0 0 1 6-6zm0-4a2 2 0 0 1 2 2h-4a2 2 0 0 1 2-2z"/></svg>219 </div>220 <div>Alarm</div>221 </div>222 <div class="nav-item">223 <div class="ico">224 <svg width="56" height="56" viewBox="0 0 24 24" fill="#cbd3dd"><path d="M12 7v5l4 2-.7 1.4L11 13V7h1zM12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"/></svg>225 </div>226 <div>Clock</div>227 </div>228 <div class="nav-item">229 <div class="ico">230 <svg width="56" height="56" viewBox="0 0 24 24" fill="#cbd3dd"><path d="M5 3h14v2H5V3zm2 4h10l1 12H6L7 7zm3 15h4v2h-4v-2z"/></svg>231 </div>232 <div>Timer</div>233 </div>234 <div class="nav-item">235 <div class="ico">236 <svg width="56" height="56" viewBox="0 0 24 24" fill="#cbd3dd"><path d="M7 12h10v2H7v-2zm0 4h6v2H7v-2zM5 3h14v2H5V3z"/></svg>237 </div>238 <div>Stopwatch</div>239 </div>240 <div class="nav-item">241 <div class="ico">242 <svg width="56" height="56" viewBox="0 0 24 24" fill="#cbd3dd"><path d="M2 20h20v-2l-3-8H5l-3 8v2zm5-6h10l2 6H5l2-6zM7 4h10v4H7V4z"/></svg>243 </div>244 <div>Bedtime</div>245 </div>246 </div>247 248</div>249</body>250</html>