GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Alarm UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #2b2d30; /* overall dark background */15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 }17 18 /* Top blue header area */19 .top-area {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 540px;25 background: #2a66dd;26 }27 28 .status-bar {29 height: 100px;30 display: flex;31 align-items: center;32 color: #fff;33 padding: 0 40px;34 font-weight: 600;35 font-size: 42px;36 letter-spacing: 0.5px;37 }38 .status-left { display: flex; align-items: center; gap: 22px; }39 .status-right { margin-left: auto; display: flex; align-items: center; gap: 28px; }40 41 .mini-pill {42 width: 70px; height: 54px;43 background: rgba(255,255,255,0.25);44 border: 1px solid rgba(255,255,255,0.4);45 border-radius: 6px;46 display: flex; align-items: center; justify-content: center;47 font-size: 28px; color: #fff;48 }49 .dot {50 width: 14px; height: 14px; background: #fff; border-radius: 50%;51 margin-left: 8px;52 }53 54 .ad-top {55 position: absolute;56 top: 100px;57 left: 0;58 width: 100%;59 height: 170px;60 display: flex;61 align-items: center;62 padding: 0 28px;63 }64 .ad-card {65 width: 1024px;66 height: 142px;67 background: #e9e3dc;68 border: 1px solid #d1c9bf;69 border-radius: 12px;70 display: flex;71 align-items: center;72 overflow: hidden;73 }74 .ad-logo {75 width: 142px; height: 142px;76 background: #E0E0E0;77 border-right: 1px solid #BDBDBD;78 display: flex; align-items: center; justify-content: center;79 color: #757575; font-weight: 700;80 }81 .ad-body {82 flex: 1;83 padding: 14px 18px;84 color: #333;85 }86 .ad-title { font-size: 44px; font-weight: 700; margin-bottom: 4px; }87 .ad-sub { font-size: 30px; color: #6b6b6b; }88 .ad-cta {89 width: 280px; height: 100%;90 background: #e5832c;91 color: #fff;92 display: flex; align-items: center; justify-content: center;93 font-size: 44px; font-weight: 700;94 }95 96 .toolbar {97 position: absolute;98 top: 270px;99 left: 0;100 width: 100%;101 height: 170px;102 display: flex;103 align-items: center;104 padding: 0 40px;105 color: #fff;106 }107 .toolbar-left {108 display: flex; align-items: center; gap: 28px;109 }110 .toolbar-title {111 font-size: 64px; font-weight: 700;112 }113 .toolbar-right {114 margin-left: auto; display: flex; align-items: center; gap: 36px;115 }116 117 /* Main content area */118 .content {119 position: absolute;120 top: 540px;121 left: 0;122 right: 0;123 bottom: 440px; /* leaves room for ad + navbar */124 display: flex;125 align-items: center;126 justify-content: center;127 flex-direction: column;128 color: #eaeaea;129 text-align: center;130 }131 .empty-text {132 margin-top: 28px;133 font-size: 44px;134 color: #e0e0e0;135 }136 137 /* Floating action button */138 .fab {139 position: absolute;140 right: 80px;141 bottom: 520px;142 width: 170px;143 height: 170px;144 border-radius: 50%;145 background: #3577ff;146 box-shadow: 0 10px 24px rgba(0,0,0,0.35);147 display: flex; align-items: center; justify-content: center;148 }149 .fab span {150 color: #fff;151 font-size: 120px;152 line-height: 0;153 margin-top: -6px;154 }155 156 /* Bottom ad */157 .bottom-ad {158 position: absolute;159 left: 0;160 bottom: 220px;161 width: 100%;162 height: 220px;163 background: #ffffff;164 border-top: 1px solid #dcdcdc;165 display: flex;166 align-items: center;167 padding: 20px 24px;168 box-sizing: border-box;169 gap: 24px;170 }171 .ad-img {172 width: 300px; height: 180px;173 background: #E0E0E0;174 border: 1px solid #BDBDBD;175 display: flex; align-items: center; justify-content: center;176 color: #757575;177 font-size: 28px;178 }179 .ad-info { flex: 1; }180 .ad-info .brand { font-size: 48px; font-weight: 700; color: #1f1f1f; }181 .ad-info .rating { font-size: 32px; color: #555; margin-top: 8px; }182 .install-btn {183 width: 220px; height: 88px;184 background: #2db964;185 color: #fff; border-radius: 10px;186 display: flex; align-items: center; justify-content: center;187 font-size: 36px; font-weight: 700;188 }189 190 /* Bottom navigation */191 .navbar {192 position: absolute;193 left: 0;194 bottom: 60px;195 width: 100%;196 height: 160px;197 background: #2b2d30;198 border-top: 1px solid #3a3a3a;199 display: flex;200 justify-content: space-around;201 align-items: center;202 color: #a9a9a9;203 }204 .nav-item {205 display: flex; flex-direction: column; align-items: center;206 gap: 12px;207 }208 .nav-label {209 font-size: 34px;210 }211 .nav-item.active .nav-label { color: #2a66dd; font-weight: 700; }212 .icon { display: block; }213 214 /* Gesture bar */215 .gesture {216 position: absolute;217 bottom: 18px;218 left: 50%;219 transform: translateX(-50%);220 width: 240px;221 height: 10px;222 background: #eaeaea;223 border-radius: 6px;224 opacity: 0.85;225 }226</style>227</head>228<body>229<div id="render-target">230 231 <!-- Top Blue Area -->232 <div class="top-area">233 <!-- Status bar -->234 <div class="status-bar">235 <div class="status-left">236 <div>12:17</div>237 <div class="mini-pill">TH</div>238 <div class="mini-pill">TOI</div>239 <div class="mini-pill">TOI</div>240 <div class="dot"></div>241 </div>242 <div class="status-right">243 <!-- Location pin -->244 <svg class="icon" width="42" height="42" viewBox="0 0 24 24">245 <path d="M12 2c-4.4 0-8 3.6-8 8 0 5.3 8 12 8 12s8-6.7 8-12c0-4.4-3.6-8-8-8zm0 5.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7z" fill="#ffffff"/>246 </svg>247 <!-- Wi-Fi -->248 <svg class="icon" width="42" height="42" viewBox="0 0 24 24">249 <path d="M2 9c2.9-2.4 6.4-3.7 10-3.7S19.1 6.6 22 9l-2 2c-2.4-2-5.6-3.1-8-3.1S6.4 9 4 11L2 9z" fill="#ffffff"/>250 <path d="M5 13c2-1.7 4.4-2.6 7-2.6s5 .9 7 2.6l-2 2c-1.5-1.2-3.6-1.8-5-1.8s-3.5.6-5 1.8l-2-2z" fill="#ffffff" opacity="0.85"/>251 <circle cx="12" cy="18.3" r="1.8" fill="#ffffff"/>252 </svg>253 <!-- Battery -->254 <svg class="icon" width="52" height="42" viewBox="0 0 28 18">255 <rect x="1" y="3" width="22" height="12" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="2"/>256 <rect x="24" y="6" width="3" height="6" rx="1" fill="#ffffff"/>257 <rect x="3" y="5" width="16" height="8" fill="#ffffff"/>258 </svg>259 </div>260 </div>261 262 <!-- Top ad banner -->263 <div class="ad-top">264 <div class="ad-card">265 <div class="ad-logo">[IMG: KOHLER Logo]</div>266 <div class="ad-body">267 <div class="ad-title">Colours by Kohler</div>268 <div class="ad-sub">Give your bathroom a bold makeover with the vibrant Colours by Kohler range.</div>269 </div>270 <div class="ad-cta">Know more!</div>271 </div>272 </div>273 274 <!-- Toolbar -->275 <div class="toolbar">276 <div class="toolbar-left">277 <!-- Hexagon icon -->278 <svg class="icon" width="72" height="72" viewBox="0 0 24 24">279 <polygon points="12,2 20,7 20,17 12,22 4,17 4,7" fill="none" stroke="#ffffff" stroke-width="2"/>280 </svg>281 <div class="toolbar-title">Alarm</div>282 </div>283 <div class="toolbar-right">284 <!-- Diamond icon -->285 <svg class="icon" width="64" height="64" viewBox="0 0 24 24">286 <polygon points="12,2 20,9 12,22 4,9" fill="#ffc94d" stroke="#e6a800" stroke-width="1.5"/>287 </svg>288 <!-- Crescent moon -->289 <svg class="icon" width="64" height="64" viewBox="0 0 24 24">290 <path d="M16 2a9 9 0 1 0 0 20c-3.8-1.5-6.5-5.2-6.5-9.5S12.2 3.5 16 2z" fill="#ffffff"/>291 </svg>292 </div>293 </div>294 </div>295 296 <!-- Main dark content -->297 <div class="content">298 <!-- Center alarm icon -->299 <svg class="icon" width="200" height="200" viewBox="0 0 24 24">300 <circle cx="12" cy="13" r="7" fill="none" stroke="#ffffff" stroke-width="2.2"/>301 <path d="M12 9v4l3 2" stroke="#ffffff" stroke-width="2.2" fill="none" stroke-linecap="round"/>302 <rect x="5" y="4" width="3" height="2" transform="rotate(-40 6.5 5)" fill="#ffffff"/>303 <rect x="16" y="4" width="3" height="2" transform="rotate(40 17.5 5)" fill="#ffffff"/>304 </svg>305 <div class="empty-text">No Alarm Available</div>306 </div>307 308 <!-- Floating action button -->309 <div class="fab"><span>+</span></div>310 311 <!-- Bottom ad -->312 <div class="bottom-ad">313 <div class="ad-img">[IMG: Booking.com App]</div>314 <div class="ad-info">315 <div class="brand">Booking.com</div>316 <div class="rating">4.7 ★ FREE</div>317 </div>318 <div class="install-btn">Install</div>319 </div>320 321 <!-- Bottom navigation -->322 <div class="navbar">323 <div class="nav-item">324 <!-- Home icon -->325 <svg class="icon" width="62" height="62" viewBox="0 0 24 24">326 <path d="M4 10l8-6 8 6v8a2 2 0 0 1-2 2h-4v-6H10v6H6a2 2 0 0 1-2-2v-8z" fill="none" stroke="#a9a9a9" stroke-width="2"/>327 </svg>328 <div class="nav-label">World Clock</div>329 </div>330 <div class="nav-item active">331 <!-- Alarm icon (active) -->332 <svg class="icon" width="62" height="62" viewBox="0 0 24 24">333 <circle cx="12" cy="13" r="7" fill="none" stroke="#2a66dd" stroke-width="2"/>334 <path d="M12 9v4l3 2" stroke="#2a66dd" stroke-width="2" fill="none" stroke-linecap="round"/>335 </svg>336 <div class="nav-label">Alarm</div>337 </div>338 <div class="nav-item">339 <!-- Timer icon -->340 <svg class="icon" width="62" height="62" viewBox="0 0 24 24">341 <circle cx="12" cy="13" r="7" fill="none" stroke="#a9a9a9" stroke-width="2"/>342 <rect x="10" y="2" width="4" height="3" fill="#a9a9a9"/>343 <path d="M12 10v4" stroke="#a9a9a9" stroke-width="2" stroke-linecap="round"/>344 </svg>345 <div class="nav-label">Timer</div>346 </div>347 <div class="nav-item">348 <!-- Stopwatch icon -->349 <svg class="icon" width="62" height="62" viewBox="0 0 24 24">350 <circle cx="12" cy="14" r="6.5" fill="none" stroke="#a9a9a9" stroke-width="2"/>351 <rect x="10.5" y="3" width="3" height="2.5" fill="#a9a9a9"/>352 <path d="M12 11.5v3l2 1" stroke="#a9a9a9" stroke-width="2" stroke-linecap="round"/>353 </svg>354 <div class="nav-label">Stop Watch</div>355 </div>356 </div>357 358 <!-- Gesture bar -->359 <div class="gesture"></div>360</div>361</body>362</html>