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; }8 #render-target{9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#1f1813; color:#f2e7dc;11 }12 13 /* Top status/title */14 .status-bar{15 height:88px; padding:0 36px; display:flex; align-items:center; justify-content:space-between;16 color:#d7c9ba; font-size:36px; letter-spacing:1px;17 }18 .status-icons{ display:flex; gap:26px; align-items:center; }19 .dot{ width:12px; height:12px; border-radius:50%; background:#d7c9ba; opacity:.9;}20 .sig{ width:26px; height:26px; border:3px solid #d7c9ba; border-radius:4px; }21 .wifi{ width:0; height:0; border-left:14px solid transparent; border-right:14px solid transparent; border-top:22px solid #d7c9ba; opacity:.9; }22 .battery{ width:46px; height:22px; border:3px solid #d7c9ba; border-radius:4px; position:relative; }23 .battery:after{ content:""; position:absolute; right:-8px; top:5px; width:6px; height:12px; background:#d7c9ba; border-radius:2px; }24 25 .title{26 font-size:88px; font-weight:600; padding:12px 36px 20px;27 }28 29 /* Cards */30 .card{31 background:#2a221c; margin:14px 26px; border-radius:42px; padding:40px 36px; position:relative;32 box-shadow: 0 6px 18px rgba(0,0,0,0.35) inset;33 }34 35 /* Toggle */36 .toggle{ width:180px; height:92px; border-radius:46px; background:#6b4b2f; position:absolute; right:36px; top:50%; transform:translateY(-50%); }37 .toggle.on{ background:#6b4b2f; }38 .toggle .knob{39 width:76px; height:76px; border-radius:50%; background:#f7c58c; position:absolute; top:8px; right:8px;40 box-shadow:0 2px 0 rgba(0,0,0,0.15) inset;41 }42 43 .time-row{ display:flex; align-items:baseline; gap:18px; }44 .time{ font-size:190px; font-weight:800; letter-spacing:2px; }45 .ampm{ font-size:68px; font-weight:700; letter-spacing:3px; }46 47 .repeat{ margin-top:16px; color:#d7c9ba; font-size:44px; }48 49 /* Expanded */50 .label-row{ display:flex; align-items:center; gap:18px; color:#d9c7b6; font-size:44px; margin-bottom:18px; }51 .tag{52 width:54px; height:36px; border-radius:8px; border:3px solid #d9c7b6;53 display:inline-block;54 }55 56 .days{ margin-top:24px; display:flex; gap:26px; }57 .day{58 width:92px; height:92px; border-radius:50%; background:#3a3027; display:flex; align-items:center; justify-content:center;59 color:#b4a599; font-size:44px; font-weight:700;60 }61 .day.active{ background:#f4bd85; color:#3b2b20; }62 63 .option{ display:flex; align-items:center; justify-content:space-between; padding:28px 6px; border-top:1px solid rgba(255,255,255,0.06); }64 .opt-left{ display:flex; align-items:center; gap:28px; font-size:44px; color:#f2e7dc; }65 .opt-right{ display:flex; align-items:center; gap:20px; }66 .small-icon{ width:58px; height:58px; border-radius:14px; display:flex; align-items:center; justify-content:center; }67 .plus-circle, .check-circle{68 width:86px; height:86px; border-radius:50%; border:6px solid #e6d3c2; display:flex; align-items:center; justify-content:center; color:#e6d3c2; font-size:56px;69 }70 .check-circle{ background:#efaa62; border-color:#efaa62; color:#2a221c; font-weight:900; }71 72 /* Snackbar */73 .snack{74 position:absolute; left:36px; right:36px; bottom:420px;75 background:#5a4a3e; color:#f2e7dc; padding:34px 36px; border-radius:56px; font-size:44px;76 box-shadow:0 8px 26px rgba(0,0,0,0.4);77 }78 79 /* Delete + FAB */80 .delete-row{ display:flex; align-items:center; gap:22px; color:#f2e7dc; font-size:50px; padding:22px 6px; }81 .trash{ width:54px; height:54px; border:4px solid #f2e7dc; border-top:0; position:relative; border-radius:6px; }82 .trash:before{ content:""; position:absolute; top:-18px; left:8px; right:8px; height:8px; background:#f2e7dc; border-radius:8px; }83 84 .fab{85 position:absolute; left:50%; transform:translateX(-50%); bottom:280px;86 width:240px; height:240px; background:#f7c58c; color:#2a221c; border-radius:50%;87 display:flex; align-items:center; justify-content:center; font-size:120px; font-weight:600;88 box-shadow:0 10px 30px rgba(0,0,0,0.5);89 }90 91 /* Bottom navigation */92 .bottom-bar{93 position:absolute; bottom:0; left:0; right:0; height:180px; background:#2a221c; display:flex; justify-content:space-around; align-items:center; border-top-left-radius:26px; border-top-right-radius:26px; box-shadow:0 -2px 16px rgba(0,0,0,0.35) inset;94 }95 .nav-item{ display:flex; flex-direction:column; align-items:center; gap:14px; color:#c6b9ac; font-size:40px; }96 .nav-item.active{ color:#f7c58c; }97 .nav-icon{ width:66px; height:66px; }98 99 /* Helpers: inline icons */100 svg{ display:block; }101</style>102</head>103<body>104<div id="render-target">105 106 <!-- Status bar -->107 <div class="status-bar">108 <div>7:13</div>109 <div class="status-icons">110 <div class="dot"></div>111 <div class="dot"></div>112 <div class="dot"></div>113 <div class="sig"></div>114 <div class="wifi"></div>115 <div class="battery"></div>116 </div>117 </div>118 119 <div class="title">Alarm</div>120 121 <!-- Collapsed 5:00 PM alarm -->122 <div class="card" style="height:280px;">123 <div class="time-row">124 <div class="time">5:00</div>125 <div class="ampm">PM</div>126 </div>127 <div class="repeat">Mon, Tue, Wed, Thu, Fri</div>128 <div class="toggle on"><div class="knob"></div></div>129 </div>130 131 <!-- Expanded 8:00 PM alarm -->132 <div class="card" style="padding-bottom:30px;">133 <div class="label-row">134 <div class="tag"></div>135 <div>Gym time</div>136 <div style="margin-left:auto; opacity:.6;">137 <svg width="42" height="42"><path d="M10 26 L21 14 L32 26" fill="none" stroke="#bfae9e" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/></svg>138 </div>139 </div>140 141 <div class="time-row" style="margin-top:6px;">142 <div class="time">8:00</div>143 <div class="ampm">PM</div>144 <div class="toggle on" style="top:96px; transform:none;"></div>145 <div class="toggle on"><div class="knob"></div></div>146 </div>147 148 <div class="repeat" style="margin-top:12px;">Mon, Tue, Wed, Thu, Fri</div>149 150 <div class="days">151 <div class="day">S</div>152 <div class="day active">M</div>153 <div class="day active">T</div>154 <div class="day active">W</div>155 <div class="day active">T</div>156 <div class="day active">F</div>157 <div class="day">S</div>158 </div>159 160 <!-- Options -->161 <div class="option" style="margin-top:26px;">162 <div class="opt-left">163 <div class="small-icon">164 <svg class="nav-icon" viewBox="0 0 24 24">165 <path d="M12 8 v5" stroke="#e6d3c2" stroke-width="2" stroke-linecap="round"/>166 <circle cx="12" cy="13" r="8" fill="none" stroke="#e6d3c2" stroke-width="2"/>167 </svg>168 </div>169 <div>Pause alarm</div>170 </div>171 <div class="plus-circle">+</div>172 </div>173 174 <div class="option">175 <div class="opt-left">176 <div class="small-icon">177 <svg class="nav-icon" viewBox="0 0 24 24">178 <path d="M6 9 a6 6 0 0 1 12 0 v6 H6z" fill="none" stroke="#e6d3c2" stroke-width="2"/>179 <path d="M9 20 h6" stroke="#e6d3c2" stroke-width="2" stroke-linecap="round"/>180 </svg>181 </div>182 <div>Default (Bright Morning)</div>183 </div>184 </div>185 186 <div class="option">187 <div class="opt-left">188 <div class="small-icon">189 <svg class="nav-icon" viewBox="0 0 24 24">190 <path d="M2 8 l4 8 M8 8 l4 8 M14 8 l4 8 M20 8 l2 4" fill="none" stroke="#e6d3c2" stroke-width="2" stroke-linecap="round"/>191 </svg>192 </div>193 <div>Vibrate</div>194 </div>195 <div class="check-circle">✓</div>196 </div>197 198 <div class="option">199 <div class="opt-left">200 <div class="small-icon">201 <svg class="nav-icon" viewBox="0 0 24 24">202 <circle cx="6" cy="12" r="2" fill="#e6d3c2"/>203 <circle cx="12" cy="12" r="2" fill="#e6d3c2"/>204 <circle cx="18" cy="12" r="2" fill="#e6d3c2"/>205 </svg>206 </div>207 <div>Google Assistant Routine</div>208 </div>209 <div class="plus-circle">+</div>210 </div>211 212 <div class="snack">Alarm set for 47 minutes from now.</div>213 214 <div class="delete-row">215 <div class="trash"></div>216 <div>Delete</div>217 </div>218 </div>219 220 <!-- Floating action button -->221 <div class="fab">+</div>222 223 <!-- Bottom navigation -->224 <div class="bottom-bar">225 <div class="nav-item active">226 <svg class="nav-icon" viewBox="0 0 24 24">227 <circle cx="12" cy="13" r="8" fill="none" stroke="#f7c58c" stroke-width="2"/>228 <path d="M12 9 v4 h4" stroke="#f7c58c" stroke-width="2" stroke-linecap="round"/>229 </svg>230 <div>Alarm</div>231 </div>232 <div class="nav-item">233 <svg class="nav-icon" viewBox="0 0 24 24">234 <circle cx="12" cy="12" r="8" fill="none" stroke="#c6b9ac" stroke-width="2"/>235 <path d="M12 8 v5 l3 2" stroke="#c6b9ac" stroke-width="2" stroke-linecap="round"/>236 </svg>237 <div>Clock</div>238 </div>239 <div class="nav-item">240 <svg class="nav-icon" viewBox="0 0 24 24">241 <path d="M7 5 h10 v4 H7z M7 11 h10 v8 H7z" fill="none" stroke="#c6b9ac" stroke-width="2"/>242 </svg>243 <div>Timer</div>244 </div>245 <div class="nav-item">246 <svg class="nav-icon" viewBox="0 0 24 24">247 <circle cx="12" cy="12" r="8" fill="none" stroke="#c6b9ac" stroke-width="2"/>248 <path d="M8 12 h8" stroke="#c6b9ac" stroke-width="2"/>249 </svg>250 <div>Stopwatch</div>251 </div>252 <div class="nav-item">253 <svg class="nav-icon" viewBox="0 0 24 24">254 <path d="M3 14 h18 v5 H3z M6 11 h6 v3 H6z" fill="none" stroke="#c6b9ac" stroke-width="2"/>255 </svg>256 <div>Bedtime</div>257 </div>258 </div>259 260</div>261</body>262</html>