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 App Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #0e0e10; color: #fff;12 }13 14 /* Status bar */15 .statusbar {16 position: absolute; top: 0; left: 0; width: 100%; height: 110px;17 padding: 18px 24px; box-sizing: border-box;18 display: flex; align-items: center; justify-content: space-between;19 color: #fff; font-size: 34px; letter-spacing: 0.5px;20 }21 .sb-left { display: flex; align-items: center; gap: 28px; }22 .sb-right { display: flex; align-items: center; gap: 24px; font-size: 30px; opacity: 0.9; }23 .icon { width: 40px; height: 40px; display: inline-block; }24 .icon svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 3; }25 26 /* Page title and actions */27 .title-row {28 position: absolute; top: 120px; left: 32px; right: 32px;29 display: flex; align-items: center; justify-content: space-between;30 }31 .page-title { font-size: 56px; font-weight: 600; }32 .actions { display: flex; align-items: center; gap: 28px; }33 .action-btn {34 width: 92px; height: 92px; border-radius: 24px;35 background: #1a1a1d; display: flex; align-items: center; justify-content: center;36 box-shadow: inset 0 0 0 1px #2b2b2f;37 }38 .action-btn svg { width: 52px; height: 52px; stroke: #d5d5d5; }39 40 /* Next alarm strip */41 .next-strip {42 position: absolute; top: 210px; left: 32px; right: 32px; height: 78px;43 background: #1a1a1d; border-radius: 16px; color: #b6b6b8;44 display: flex; align-items: center; padding: 0 24px; font-size: 32px;45 box-shadow: inset 0 0 0 1px #2b2b2f;46 }47 48 /* Day heading */49 .day-label {50 position: absolute; top: 308px; left: 32px;51 font-size: 46px; font-weight: 600; color: #dcdcdf;52 }53 54 /* Alarm card */55 .alarm-card {56 position: absolute; top: 370px; left: 32px; width: 1016px; height: 170px;57 background: #2e3748; border-radius: 34px; box-shadow: inset 0 0 0 1px #425068;58 display: flex; align-items: center; padding: 24px; box-sizing: border-box;59 gap: 22px;60 }61 .sun-wrap .icon svg { stroke: #cbd7ff; }62 .alarm-info { display: flex; flex-direction: column; gap: 8px; }63 .label { font-size: 36px; color: #c9d4ff; }64 .time { font-size: 84px; font-weight: 700; letter-spacing: 1px; color: #ffffff; }65 .alarm-right {66 margin-left: auto; display: flex; align-items: center; gap: 18px;67 }68 .toggle {69 width: 142px; height: 86px; border-radius: 44px;70 background: #5977c9; display: flex; align-items: center; justify-content: center;71 box-shadow: inset 0 0 0 1px #7ea0ff;72 }73 .toggle svg { width: 50px; height: 50px; stroke: #fff; }74 .small-icon { width: 66px; height: 66px; border-radius: 16px; background: #41506b; display: flex; align-items: center; justify-content: center; }75 .small-icon svg { width: 40px; height: 40px; stroke: #e7ecff; }76 .repeat-text { position: absolute; right: 48px; bottom: 20px; font-size: 34px; color: #d6defa; }77 78 /* Ads section */79 .ads-area {80 position: absolute; top: 580px; left: 0; right: 0; height: 820px;81 }82 .ads-grid {83 display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;84 padding: 0 18px;85 }86 .ad-card {87 height: 300px; background: #E0E0E0; border: 1px solid #BDBDBD;88 border-radius: 16px; position: relative; display: flex;89 align-items: center; justify-content: center; color: #757575; font-size: 30px;90 }91 .badge {92 position: absolute; top: 14px; left: 14px;93 background: #e9eefc; color: #1e2a52; font-size: 32px; font-weight: 700;94 padding: 8px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px #c9d2ff;95 }96 .price-tag {97 position: absolute; bottom: 16px; right: 16px;98 background: #1a1a1d; color: #fff; font-size: 32px; padding: 8px 16px; border-radius: 14px;99 box-shadow: inset 0 0 0 1px #2b2b2f;100 }101 .ads-row-2 { margin-top: 18px; }102 .brand-row {103 display: flex; align-items: center; gap: 18px;104 margin: 18px; padding-top: 8px; color: #d5d5d7; font-size: 34px;105 }106 .brand-logo {107 width: 100px; height: 100px; background: #E0E0E0; border: 1px solid #BDBDBD;108 border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;109 }110 .brand-spacer { flex: 1; }111 .open-btn {112 background: #1faa78; color: #fff; font-weight: 700;113 padding: 18px 36px; border-radius: 36px; font-size: 34px;114 }115 116 /* Remove ads button */117 .remove-ads {118 position: absolute; bottom: 380px; left: 24px; right: 24px; height: 110px;119 background: #3f4f77; border-radius: 16px; display: flex; align-items: center; justify-content: center;120 color: #cfd6f7; font-size: 40px; font-weight: 700;121 }122 123 /* Modal overlay */124 .overlay {125 position: absolute; inset: 0; background: rgba(0,0,0,0.6);126 }127 .dialog {128 position: absolute; left: 64px; right: 64px; top: 880px;129 background: #1a1a1d; border-radius: 18px; box-shadow: 0 18px 40px rgba(0,0,0,0.5), inset 0 0 0 1px #2b2b2f;130 padding: 40px; color: #fff;131 }132 .dialog-title { font-size: 52px; font-weight: 700; margin-bottom: 28px; }133 .dialog-text { font-size: 38px; color: #d6d6d9; }134 .dialog-actions {135 margin-top: 46px; display: flex; justify-content: flex-end; gap: 42px;136 }137 .btn {138 font-size: 40px; font-weight: 700; color: #92a3ff; padding: 12px 18px;139 }140 .btn.primary { color: #a7b8ff; }141</style>142</head>143<body>144<div id="render-target">145 146 <!-- Status bar -->147 <div class="statusbar">148 <div class="sb-left">149 <div>3:14</div>150 <span class="icon">151 <!-- Simple calendar icon -->152 <svg viewBox="0 0 24 24">153 <rect x="3" y="5" width="18" height="16" rx="2"></rect>154 <line x1="3" y1="10" x2="21" y2="10"></line>155 <line x1="7" y1="3" x2="7" y2="7"></line>156 <line x1="17" y1="3" x2="17" y2="7"></line>157 </svg>158 </span>159 <span class="icon">160 <!-- Clock icon -->161 <svg viewBox="0 0 24 24">162 <circle cx="12" cy="12" r="9"></circle>163 <line x1="12" y1="12" x2="12" y2="7"></line>164 <line x1="12" y1="12" x2="16" y2="14"></line>165 </svg>166 </span>167 <span class="icon">168 <!-- Dot icon -->169 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"></circle></svg>170 </span>171 </div>172 <div class="sb-right">173 <span class="icon">174 <!-- WiFi -->175 <svg viewBox="0 0 24 24">176 <path d="M2 8c5-4 15-4 20 0"></path>177 <path d="M5 12c4-3 10-3 14 0"></path>178 <path d="M8 16c3-2 5-2 8 0"></path>179 <circle cx="12" cy="20" r="1.8" fill="#fff"></circle>180 </svg>181 </span>182 <span class="icon">183 <!-- Battery -->184 <svg viewBox="0 0 24 24">185 <rect x="2" y="7" width="18" height="10" rx="2"></rect>186 <rect x="20" y="10" width="2" height="4" rx="1"></rect>187 </svg>188 </span>189 </div>190 </div>191 192 <!-- Title / actions -->193 <div class="title-row">194 <div class="page-title">My Alarms</div>195 <div class="actions">196 <div class="action-btn">197 <!-- Lightning/flash -->198 <svg viewBox="0 0 24 24">199 <path d="M13 2L4 14h7l-2 8 11-14h-7l2-6z" fill="none"></path>200 </svg>201 </div>202 <div class="action-btn">203 <!-- Gear -->204 <svg viewBox="0 0 24 24">205 <circle cx="12" cy="12" r="3.5"></circle>206 <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.6 4.6l2.1 2.1M17.3 17.3l2.1 2.1M4.6 19.4l2.1-2.1M17.3 6.7l2.1-2.1"></path>207 </svg>208 </div>209 <div class="action-btn" style="background:#2f3a5c;">210 <!-- Plus in rounded square -->211 <svg viewBox="0 0 24 24">212 <rect x="2.5" y="2.5" width="19" height="19" rx="5" stroke="#bfd2ff"></rect>213 <line x1="12" y1="7" x2="12" y2="17" stroke="#bfd2ff"></line>214 <line x1="7" y1="12" x2="17" y2="12" stroke="#bfd2ff"></line>215 </svg>216 </div>217 </div>218 </div>219 220 <!-- Next alarm strip -->221 <div class="next-strip">Next alarm in 1 day, 2 hours and 16 minutes</div>222 223 <!-- Day label -->224 <div class="day-label">Wednesday</div>225 226 <!-- Alarm card -->227 <div class="alarm-card">228 <div class="sun-wrap icon">229 <!-- Sun icon -->230 <svg viewBox="0 0 24 24">231 <circle cx="12" cy="12" r="4"></circle>232 <line x1="12" y1="2" x2="12" y2="6"></line>233 <line x1="12" y1="18" x2="12" y2="22"></line>234 <line x1="2" y1="12" x2="6" y2="12"></line>235 <line x1="18" y1="12" x2="22" y2="12"></line>236 <line x1="4.2" y1="4.2" x2="6.8" y2="6.8"></line>237 <line x1="17.2" y1="17.2" x2="19.8" y2="19.8"></line>238 <line x1="17.2" y1="6.8" x2="19.8" y2="4.2"></line>239 <line x1="4.2" y1="19.8" x2="6.8" y2="17.2"></line>240 </svg>241 </div>242 <div class="alarm-info">243 <div class="label">Go to gym</div>244 <div class="time">05:30 PM</div>245 </div>246 <div class="alarm-right">247 <div class="toggle">248 <!-- Check -->249 <svg viewBox="0 0 24 24">250 <circle cx="12" cy="12" r="10"></circle>251 <path d="M7 12l3 3 7-7"></path>252 </svg>253 </div>254 <div class="small-icon">255 <!-- Pencil -->256 <svg viewBox="0 0 24 24">257 <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z"></path>258 <path d="M14.06 4.94l3.75 3.75"></path>259 </svg>260 </div>261 <div class="small-icon">262 <!-- Trash -->263 <svg viewBox="0 0 24 24">264 <path d="M4 7h16"></path>265 <path d="M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12"></path>266 <path d="M10 11v6M14 11v6"></path>267 <path d="M9 7l1-3h4l1 3"></path>268 </svg>269 </div>270 </div>271 <div class="repeat-text">Wed, Fri</div>272 </div>273 274 <!-- Ads grid -->275 <div class="ads-area">276 <div class="ads-grid">277 <div class="ad-card">278 <div class="badge">-60%</div>279 [IMG: Men's Polo Shirt]280 <div class="price-tag">₹3,190</div>281 </div>282 <div class="ad-card">283 <div class="badge">-23%</div>284 [IMG: Dark Sweatshirt]285 <div class="price-tag">₹1,190</div>286 </div>287 <div class="ad-card">288 <div class="badge">-60%</div>289 [IMG: Black Polo Shirt]290 <div class="price-tag">₹2,590</div>291 </div>292 </div>293 294 <div class="ads-grid ads-row-2">295 <div class="ad-card">296 <div class="badge">-30%</div>297 [IMG: Casual Pants]298 <div class="price-tag">₹1,790</div>299 </div>300 <div class="ad-card">[IMG: Beige Tee]</div>301 <div class="ad-card">[IMG: Grey Joggers]</div>302 </div>303 304 <div class="brand-row">305 <div class="brand-logo">[LOGO]</div>306 <div>307 <div style="font-weight:700;">M&S India</div>308 <div style="color:#a5a5a9; font-size:30px;">4.4 ★ Installed</div>309 </div>310 <div class="brand-spacer"></div>311 <div class="open-btn">Open</div>312 </div>313 </div>314 315 <!-- Remove ads button -->316 <div class="remove-ads">REMOVE ADS</div>317 318 <!-- Confirmation modal -->319 <div class="overlay"></div>320 <div class="dialog">321 <div class="dialog-title">Delete</div>322 <div class="dialog-text">Are you sure you want to delete this alarm?</div>323 <div class="dialog-actions">324 <div class="btn">CANCEL</div>325 <div class="btn primary">OK</div>326 </div>327 </div>328 329</div>330</body>331</html>