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">5<title>Alarm Screen Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #0f1115;14 color: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 }17 18 /* General helpers */19 .row { display: flex; align-items: center; }20 .space-between { justify-content: space-between; }21 .pill { border-radius: 999px; }22 .muted { color: #a8adb7; }23 .divider { height: 1px; background: #1c222a; }24 .icon { width: 40px; height: 40px; display: inline-block; }25 .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font-weight: 600; cursor: default; }26 .content { padding: 0 36px; }27 28 /* Status bar */29 .status-bar {30 height: 88px;31 padding: 0 24px;32 display: flex;33 align-items: center;34 justify-content: space-between;35 color: #d7dbe1;36 font-size: 36px;37 }38 .status-icons .dot {39 width: 8px; height: 8px; background: #b8bec7; border-radius: 50%; margin: 0 10px;40 }41 .status-icons svg { width: 36px; height: 36px; margin-left: 18px; fill: #c7ccd4; }42 43 /* Header */44 .header { padding: 8px 36px 0; }45 .title { font-size: 52px; font-weight: 700; }46 .header-actions { gap: 28px; }47 .header-actions .square {48 width: 96px; height: 96px; border-radius: 24px; background: #5c85ff;49 display: flex; align-items: center; justify-content: center;50 }51 .header-actions .icon-btn {52 width: 72px; height: 72px; border-radius: 18px; background: #1b2230;53 display: flex; align-items: center; justify-content: center;54 }55 .header-actions svg { width: 42px; height: 42px; }56 57 /* Next alarm info */58 .info-bar {59 margin: 24px 36px 0;60 background: #232935;61 color: #d5dae4;62 padding: 22px 26px;63 border-radius: 16px;64 font-size: 32px;65 }66 67 /* Day label */68 .day-label { font-size: 44px; font-weight: 700; padding: 28px 36px 16px; }69 70 /* Alarm card */71 .alarm-card {72 margin: 0 36px;73 background: #2a3242;74 border-radius: 26px;75 padding: 28px;76 display: flex;77 align-items: center;78 position: relative;79 }80 .alarm-left { display: flex; align-items: center; gap: 22px; }81 .alarm-left .alarm-title { font-size: 34px; color: #cfd5df; }82 .alarm-time { font-size: 92px; font-weight: 700; letter-spacing: 1px; margin-left: 18px; }83 84 .alarm-right {85 margin-left: auto;86 display: flex; align-items: center; gap: 18px;87 }88 .toggle {89 background: #729bff;90 color: #fff;91 padding: 12px 22px;92 border-radius: 999px;93 display: flex; align-items: center; gap: 12px;94 }95 .toggle .label { font-size: 28px; color: #e9edff; }96 .mini-icon {97 width: 68px; height: 68px; border-radius: 16px; background: #212837;98 display: flex; align-items: center; justify-content: center;99 }100 .mini-icon svg { width: 34px; height: 34px; fill: #bfc5d0; }101 102 /* Ad grid */103 .ad-header {104 margin: 26px 36px 12px;105 display: flex; justify-content: flex-end; gap: 18px; align-items: center;106 }107 .ad-header .badge {108 width: 48px; height: 48px; border-radius: 24px; background: #2a3242;109 display: flex; align-items: center; justify-content: center; color: #cfd5df; font-weight: 700;110 border: 1px solid #3b4556;111 }112 .ad-grid {113 margin: 0 24px;114 display: grid;115 grid-template-columns: repeat(3, 1fr);116 gap: 22px;117 }118 .ad-card {119 background: #202534;120 border-radius: 16px;121 position: relative;122 overflow: hidden;123 height: 460px;124 border: 1px solid #2f3748;125 }126 .ad-img {127 position: absolute; inset: 0;128 background: #E0E0E0;129 color: #757575;130 border: 1px solid #BDBDBD;131 display: flex; align-items: center; justify-content: center;132 text-align: center; padding: 12px; font-size: 28px; line-height: 1.2;133 }134 .discount {135 position: absolute; top: 16px; left: 16px;136 background: #2b2f3c; color: #dce2ee; border: 1px solid #3e4658;137 padding: 10px 16px; border-radius: 12px; font-weight: 700; font-size: 28px;138 }139 .price {140 position: absolute; bottom: 16px; right: 16px;141 background: #2b2f3c; color: #ffffff; border: 1px solid #3e4658;142 padding: 10px 16px; border-radius: 12px; font-weight: 700; font-size: 30px;143 }144 145 /* Brand row */146 .brand-row {147 margin: 22px 36px;148 background: #131822;149 border-top: 1px solid #1f2430;150 padding-top: 18px;151 display: flex; align-items: center; gap: 18px;152 }153 .brand-logo {154 width: 100px; height: 100px; border-radius: 16px; background: #2a3242;155 display: flex; align-items: center; justify-content: center; border: 1px solid #3b4556;156 color: #cfd5df; font-size: 28px; text-align: center;157 }158 .brand-name { font-size: 42px; font-weight: 700; }159 .rating { display: inline-flex; align-items: center; gap: 8px; margin-left: 12px; color: #cfd5df; font-size: 28px; }160 .installed { color: #88d28f; font-weight: 700; margin-left: 12px; font-size: 30px; }161 .open-btn {162 margin-left: auto; background: #2aa368; color: #fff;163 padding: 18px 40px; border-radius: 999px; font-size: 34px; font-weight: 700;164 }165 166 /* Remove Ads button */167 .remove-ads {168 margin: 36px auto 0; width: 1008px; height: 120px;169 background: #8ea3ff; border-radius: 18px;170 display: flex; align-items: center; justify-content: center;171 color: #10131a; font-weight: 800; font-size: 42px;172 }173 174 /* Bottom gesture bar */175 .gesture {176 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);177 width: 220px; height: 10px; background: #e6e6e6; border-radius: 6px; opacity: 0.9;178 }179</style>180</head>181<body>182<div id="render-target">183 184 <!-- Status Bar -->185 <div class="status-bar">186 <div class="row">187 <span>3:13</span>188 <div class="status-icons row" style="margin-left:18px;">189 <span class="dot"></span>190 <!-- Small calendar icon -->191 <svg viewBox="0 0 24 24">192 <path d="M7 2h2v2h6V2h2v2h3v16H4V4h3V2zm13 6H4v12h16V8zM6 11h5v3H6v-3z"></path>193 </svg>194 <!-- Alarm/bell icon -->195 <svg viewBox="0 0 24 24">196 <path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm8-6V11a8 8 0 1 0-16 0v5l-2 2h20l-2-2z"></path>197 </svg>198 <!-- WiFi icon -->199 <svg viewBox="0 0 24 24">200 <path d="M12 18l-2 2 2 2 2-2-2-2zm-7-8l2 2a10 10 0 0 1 14 0l2-2a12 12 0 0 0-18 0zm3 3l2 2a6 6 0 0 1 8 0l2-2a8 8 0 0 0-12 0z"></path>201 </svg>202 <!-- Battery icon -->203 <svg viewBox="0 0 24 24">204 <path d="M2 8v8h17V8H2zm19 3h1v2h-1v-2zM4 10h13v4H4v-4z"></path>205 </svg>206 </div>207 </div>208 <div class="row header-actions">209 <div class="icon-btn">210 <!-- Lightning icon -->211 <svg viewBox="0 0 24 24" style="fill:#ffd34d;">212 <path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z"></path>213 </svg>214 </div>215 <div class="icon-btn">216 <!-- Gear icon -->217 <svg viewBox="0 0 24 24">218 <path d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm9 4l-2 1a7.3 7.3 0 0 1-.5 1.2l1 2-2 2-2-1a7.3 7.3 0 0 1-1.2.5l-1 2h-3l-1-2a7.3 7.3 0 0 1-1.2-.5l-2 1-2-2 1-2a7.3 7.3 0 0 1-.5-1.2l-2-1v-3l2-1c.1-.4.3-.8.5-1.2l-1-2 2-2 2 1c.4-.2.8-.4 1.2-.5l1-2h3l1 2c.4.1.8.3 1.2.5l2-1 2 2-1 2c.2.4.4.8.5 1.2l2 1v3z"></path>219 </svg>220 </div>221 <div class="square">222 <!-- Plus icon -->223 <svg viewBox="0 0 24 24" style="fill:#ffffff;">224 <path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z"></path>225 </svg>226 </div>227 </div>228 </div>229 230 <!-- Header Title -->231 <div class="header row space-between">232 <div class="title">My Alarms</div>233 </div>234 235 <!-- Info bar -->236 <div class="info-bar">Next alarm in 1 day, 2 hours and 17 minutes</div>237 238 <!-- Day label -->239 <div class="day-label">Wednesday</div>240 241 <!-- Alarm card -->242 <div class="alarm-card">243 <div class="alarm-left">244 <!-- Sun icon -->245 <svg class="icon" viewBox="0 0 24 24" style="fill:#ffd34d;">246 <path d="M12 4l1.5-3h-3L12 4zm0 19l1.5-3h-3L12 23zM4 12l-3-1.5v3L4 12zm19 0l-3 1.5v-3L23 12zM6 6l-2-2-2 2 2 2 2-2zm16 0l-2-2-2 2 2 2 2-2zM6 18l-2 2-2-2 2-2 2 2zm16 0l-2 2-2-2 2-2 2 2zM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10z"></path>247 </svg>248 <div>249 <div class="alarm-title">Go to gym</div>250 <div class="alarm-time">05:30 PM</div>251 </div>252 </div>253 <div class="alarm-right">254 <div class="toggle">255 <!-- Check icon -->256 <svg viewBox="0 0 24 24">257 <path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z"></path>258 </svg>259 <span class="label">On</span>260 </div>261 <div class="mini-icon">262 <!-- Pencil icon -->263 <svg viewBox="0 0 24 24">264 <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm18.37-11.6a1 1 0 0 0 0-1.41l-2.6-2.6a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.09-1.97z"></path>265 </svg>266 </div>267 <div class="mini-icon">268 <!-- Trash icon -->269 <svg viewBox="0 0 24 24">270 <path d="M16 4l-1-2H9L8 4H4v2h16V4h-4zM6 8v12h12V8H6z"></path>271 </svg>272 </div>273 <div class="muted" style="font-size:28px; margin-left:10px;">Wed, Fri</div>274 </div>275 </div>276 277 <!-- Ads header controls -->278 <div class="ad-header">279 <div class="badge">i</div>280 <div class="badge">×</div>281 </div>282 283 <!-- Advertisement Grid -->284 <div class="ad-grid">285 <!-- Card 1 -->286 <div class="ad-card">287 <div class="ad-img">[IMG: Teal color-block men's polo]</div>288 <div class="discount">-60%</div>289 <div class="price">₹1,390</div>290 </div>291 <!-- Card 2 -->292 <div class="ad-card">293 <div class="ad-img">[IMG: Navy long-sleeve polo]</div>294 <div class="discount">-23%</div>295 <div class="price">₹2,290</div>296 </div>297 <!-- Card 3 -->298 <div class="ad-card">299 <div class="ad-img">[IMG: Dark polo with small print]</div>300 <div class="discount">-60%</div>301 <div class="price">₹990</div>302 </div>303 <!-- Card 4 -->304 <div class="ad-card">305 <div class="ad-img">[IMG: Black jeans/trousers]</div>306 <div class="discount">-36%</div>307 <div class="price">₹3,190</div>308 </div>309 <!-- Card 5 -->310 <div class="ad-card">311 <div class="ad-img">[IMG: Light mint polo]</div>312 <div class="discount">-60%</div>313 <div class="price">₹1,190</div>314 </div>315 <!-- Card 6 -->316 <div class="ad-card">317 <div class="ad-img">[IMG: Light grey sweatshirt]</div>318 <div class="discount">-26%</div>319 <div class="price">₹2,590</div>320 </div>321 </div>322 323 <!-- Brand info and action -->324 <div class="brand-row">325 <div class="brand-logo">M&S</div>326 <div class="brand-name">M&S India</div>327 <div class="rating">328 <!-- Star icon -->329 <svg viewBox="0 0 24 24" style="width:28px;height:28px;fill:#ffd34d;">330 <path d="M12 17.3l6.18 3.7-1.64-7.03L21 9.24l-7.19-.61L12 2 10.19 8.63 3 9.24l4.46 4.73L5.82 21z"></path>331 </svg>332 <span>4.4</span>333 </div>334 <div class="installed">Installed</div>335 <div class="open-btn btn">Open</div>336 </div>337 338 <!-- Remove Ads button -->339 <div class="remove-ads">REMOVE ADS</div>340 341 <!-- Bottom gesture bar -->342 <div class="gesture"></div>343</div>344</body>345</html>