GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>The Clock UI Mock</title>7<style>8 @keyframes tick {}9 body { margin: 0; padding: 0; background: transparent; }10 #render-target {11 width: 1080px;12 height: 2400px;13 position: relative;14 overflow: hidden;15 background: #0f0f10;16 font-family: "Roboto", "Segoe UI", Arial, sans-serif;17 color: #f1f1f1;18 }19 20 /* Top header with diagonal stripes */21 .header {22 height: 420px;23 background:24 linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.55)),25 repeating-linear-gradient(-24deg, #1f1f22 0 80px, #151518 80px 160px);26 padding: 36px 40px 0 40px;27 box-sizing: border-box;28 }29 30 /* Status bar */31 .status {32 display: flex;33 align-items: center;34 justify-content: space-between;35 color: #d9d9d9;36 font-size: 34px;37 letter-spacing: 0.5px;38 height: 70px;39 }40 .status .left,41 .status .right { display: flex; align-items: center; gap: 22px; }42 43 /* Title row */44 .title-row {45 margin-top: 28px;46 display: flex;47 align-items: center;48 gap: 24px;49 }50 .title-row .title {51 font-size: 64px;52 font-weight: 500;53 }54 55 /* Tabs */56 .tabs {57 margin-top: 36px;58 display: grid;59 grid-template-columns: repeat(4, 1fr);60 gap: 0;61 text-align: center;62 color: #e9e9e9;63 }64 .tab {65 display: flex;66 flex-direction: column;67 align-items: center;68 gap: 14px;69 font-size: 32px;70 opacity: 0.9;71 }72 .tab .label { margin-top: 6px; }73 .tab.active .label { color: #ffffff; }74 .tab-underline {75 grid-column: 2 / 3;76 height: 6px;77 background: #d6455c;78 width: 48%;79 justify-self: center;80 border-radius: 3px;81 margin-top: 18px;82 }83 84 /* Main area */85 .content {86 position: absolute;87 top: 420px;88 left: 0;89 right: 0;90 bottom: 0;91 background: #111214;92 border-top-left-radius: 26px;93 border-top-right-radius: 26px;94 padding: 40px 48px 140px 48px;95 box-sizing: border-box;96 }97 98 .time-panel {99 display: grid;100 grid-template-columns: 1fr 1fr;101 align-items: center;102 gap: 30px;103 }104 105 /* Analog clock (stylized) */106 .analog {107 width: 420px;108 height: 420px;109 border-radius: 50%;110 border: 10px solid #e9e9e9;111 background:112 radial-gradient(circle at center, #0f0f11 0 55%, #0c0c0d 56% 100%);113 position: relative;114 margin-left: 20px;115 box-shadow: 0 0 0 4px #222 inset;116 }117 .analog::before {118 content: "";119 position: absolute;120 inset: 20px;121 border-radius: 50%;122 border: 2px dashed #cfcfcf;123 opacity: 0.35;124 }125 .analog .center-dot {126 position: absolute;127 width: 12px;128 height: 12px;129 background: #ff586e;130 border-radius: 50%;131 top: 50%;132 left: 50%;133 transform: translate(-50%, -50%);134 }135 /* Simple hands (static visual for mock) */136 .hand.hour {137 position: absolute;138 width: 8px; height: 120px; background: #ffffff; left: 50%; top: 50%;139 transform-origin: 50% 100%;140 transform: translateX(-50%) rotate(300deg);141 border-radius: 6px;142 }143 .hand.min {144 position: absolute;145 width: 6px; height: 180px; background: #d8d8d8; left: 50%; top: 50%;146 transform-origin: 50% 100%;147 transform: translateX(-50%) rotate(18deg);148 border-radius: 6px;149 }150 .hand.sec {151 position: absolute;152 width: 3px; height: 190px; background: #ff586e; left: 50%; top: 50%;153 transform-origin: 50% 100%;154 transform: translateX(-50%) rotate(330deg);155 }156 157 /* Digital block */158 .digital {159 display: flex;160 flex-direction: column;161 align-items: flex-start;162 gap: 14px;163 padding-right: 24px;164 }165 .time-row {166 display: flex;167 align-items: baseline;168 gap: 14px;169 }170 .time-text {171 font-size: 120px;172 font-weight: 700;173 letter-spacing: 1px;174 }175 .seconds {176 font-size: 32px;177 color: #ff586e;178 margin-left: -10px;179 position: relative;180 top: -30px;181 }182 .ampm {183 font-size: 40px;184 opacity: 0.9;185 margin-left: 4px;186 }187 .date-line {188 font-size: 40px;189 opacity: 0.9;190 color: #e6e6e6;191 }192 193 /* World clocks list */194 .list {195 margin-top: 48px;196 display: flex;197 flex-direction: column;198 gap: 56px;199 }200 .city-item {201 display: grid;202 grid-template-columns: 1fr auto 52px;203 align-items: center;204 gap: 24px;205 }206 .city-left .name {207 font-size: 56px;208 font-weight: 600;209 margin-bottom: 8px;210 }211 .city-left .gmt {212 font-size: 30px;213 color: #c9c9c9;214 margin-bottom: 8px;215 }216 .city-left .diff {217 font-size: 30px;218 color: #e85b6f;219 }220 .city-time {221 font-size: 80px;222 font-weight: 700;223 white-space: nowrap;224 }225 .city-time .small {226 font-size: 34px;227 font-weight: 500;228 margin-left: 8px;229 opacity: 0.9;230 }231 .trash {232 width: 44px; height: 44px; opacity: 0.6;233 }234 235 /* FAB */236 .fab {237 position: absolute;238 bottom: 230px;239 left: 50%;240 transform: translateX(-50%);241 width: 132px;242 height: 132px;243 border-radius: 50%;244 background: #e44758;245 box-shadow: 0 10px 0 0 #a12a37, 0 10px 24px rgba(0,0,0,0.6);246 display: flex;247 align-items: center;248 justify-content: center;249 }250 .fab svg { width: 72px; height: 72px; }251 252 /* Ad placeholder */253 .ad {254 position: absolute;255 left: 0; right: 0;256 bottom: 110px;257 height: 160px;258 background: #E0E0E0;259 border-top: 2px solid #BDBDBD;260 border-bottom: 2px solid #BDBDBD;261 display: flex;262 align-items: center;263 padding: 0 24px;264 color: #555;265 box-sizing: border-box;266 }267 .ad .img {268 width: 120px; height: 120px;269 background: #E0E0E0;270 border: 1px solid #BDBDBD;271 border-radius: 24px;272 display: flex; align-items: center; justify-content: center;273 color: #757575;274 margin-right: 20px;275 }276 .ad .text { font-size: 36px; }277 .ad .cta {278 margin-left: auto;279 background: #2e7d32; color: #fff;280 padding: 16px 28px; border-radius: 10px;281 font-size: 36px; font-weight: 600;282 }283 284 /* Bottom gesture bar */285 .gesture {286 position: absolute;287 bottom: 40px;288 left: 50%;289 transform: translateX(-50%);290 width: 300px;291 height: 10px;292 border-radius: 10px;293 background: #bdbdbd;294 opacity: 0.8;295 }296 297 /* Simple icon styling helpers */298 .icon { width: 40px; height: 40px; fill: #e9e9e9; }299 .icon-lg { width: 48px; height: 48px; }300 .tab .icon { width: 56px; height: 56px; }301</style>302</head>303<body>304<div id="render-target">305 306 <div class="header">307 <div class="status">308 <div class="left">309 <span>8:06</span>310 <!-- tiny dot icon -->311 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg>312 </div>313 <div class="right">314 <!-- WiFi -->315 <svg class="icon" viewBox="0 0 24 24">316 <path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 4c1-1 3-1 4 0l-2 2-2-2z"/>317 </svg>318 <!-- Battery -->319 <svg class="icon" viewBox="0 0 24 24">320 <rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="none" stroke="#e9e9e9" stroke-width="2"/>321 <rect x="4" y="9" width="12" height="6" fill="#e9e9e9"/>322 <rect x="20" y="10" width="2" height="4" fill="#e9e9e9"/>323 </svg>324 </div>325 </div>326 327 <div class="title-row">328 <!-- Menu icon -->329 <svg class="icon-lg" viewBox="0 0 24 24">330 <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z" fill="#e9e9e9"/>331 </svg>332 <div class="title">The Clock</div>333 <div style="margin-left:auto; display:flex; align-items:center; gap:26px;">334 <!-- Night icon -->335 <svg class="icon-lg" viewBox="0 0 24 24">336 <path d="M12 2a9 9 0 0 0 0 18c4 0 7.5-2.7 8.6-6.4C19 15 16 13 16 9s3-6 4.6-4.6A9 9 0 0 0 12 2z" fill="#e9e9e9"/>337 </svg>338 <!-- Settings -->339 <svg class="icon-lg" viewBox="0 0 24 24">340 <path d="M19 13.5l2-1.5-2-1.5-.3-2.4-2.4-.3-1.5-2L12 4l-1.5 2-2.4.3-.3 2.4-2 1.5 2 1.5.3 2.4 2.4.3 1.5 2L12 20l1.5-2 2.4-.3.3-2.4zM12 9a3 3 0 1 1 0 6 3 3 0 0 1 0-6z" fill="#e9e9e9"/>341 </svg>342 </div>343 </div>344 345 <div class="tabs">346 <div class="tab">347 <svg class="icon" viewBox="0 0 24 24">348 <path d="M7 2h10v2h3v2H4V4h3V2zm1 6h8v12H8V8zm-3 0h2v12H5V8zm12 0h2v12h-2V8z" fill="#e9e9e9"/>349 </svg>350 <div class="label">Alarms</div>351 </div>352 <div class="tab active">353 <svg class="icon" viewBox="0 0 24 24">354 <circle cx="12" cy="12" r="9" fill="none" stroke="#e9e9e9" stroke-width="2"/>355 <path d="M12 7v6l4 2" stroke="#e9e9e9" stroke-width="2" fill="none" stroke-linecap="round"/>356 </svg>357 <div class="label">Clock</div>358 </div>359 <div class="tab">360 <svg class="icon" viewBox="0 0 24 24">361 <circle cx="12" cy="12" r="9" fill="none" stroke="#e9e9e9" stroke-width="2"/>362 <path d="M12 6v6h6" stroke="#e9e9e9" stroke-width="2" fill="none"/>363 </svg>364 <div class="label">Timer</div>365 </div>366 <div class="tab">367 <svg class="icon" viewBox="0 0 24 24">368 <circle cx="12" cy="12" r="9" fill="none" stroke="#e9e9e9" stroke-width="2"/>369 <path d="M8 12a4 4 0 1 0 8 0" stroke="#e9e9e9" stroke-width="2" fill="none"/>370 </svg>371 <div class="label">Stopwatch</div>372 </div>373 <div class="tab-underline"></div>374 </div>375 </div>376 377 <div class="content">378 <div class="time-panel">379 <div class="analog">380 <div class="hand hour"></div>381 <div class="hand min"></div>382 <div class="hand sec"></div>383 <div class="center-dot"></div>384 </div>385 <div class="digital">386 <div class="time-row">387 <div class="time-text">8:06</div>388 <div class="seconds">38</div>389 <div class="ampm">PM</div>390 </div>391 <div class="date-line">September 29, 2023</div>392 <div class="date-line">Friday</div>393 </div>394 </div>395 396 <div class="list">397 <!-- London -->398 <div class="city-item">399 <div class="city-left">400 <div class="name">London</div>401 <div class="gmt">GMT+01:00</div>402 <div class="diff">4 hours 30 minutes behind</div>403 </div>404 <div class="city-time">3:36 <span class="small">PM</span></div>405 <svg class="trash" viewBox="0 0 24 24">406 <path d="M6 7h12l-1 13H7L6 7zm3-3h6l1 2H8l1-2z" fill="#c7c7c7"/>407 </svg>408 </div>409 410 <!-- New York -->411 <div class="city-item">412 <div class="city-left">413 <div class="name">New York</div>414 <div class="gmt">GMT-04:00</div>415 <div class="diff">9 hours 30 minutes behind</div>416 </div>417 <div class="city-time">10:36 <span class="small">AM</span></div>418 <svg class="trash" viewBox="0 0 24 24">419 <path d="M6 7h12l-1 13H7L6 7zm3-3h6l1 2H8l1-2z" fill="#c7c7c7"/>420 </svg>421 </div>422 423 <!-- Sydney -->424 <div class="city-item">425 <div class="city-left">426 <div class="name">Sydney</div>427 <div class="gmt">GMT+10:00</div>428 <div class="diff">4 hours 30 minutes ahead</div>429 </div>430 <div class="city-time"><span class="small" style="margin-right:10px; opacity:0.8;">Sat</span>12:36 <span class="small">AM</span></div>431 <svg class="trash" viewBox="0 0 24 24">432 <path d="M6 7h12l-1 13H7L6 7zm3-3h6l1 2H8l1-2z" fill="#c7c7c7"/>433 </svg>434 </div>435 </div>436 </div>437 438 <!-- Floating Action Button -->439 <div class="fab" aria-label="Add">440 <svg viewBox="0 0 24 24">441 <path d="M11 4h2v16h-2z" fill="#fff"/>442 <path d="M4 11h16v2H4z" fill="#fff"/>443 </svg>444 </div>445 446 <!-- Ad Placeholder -->447 <div class="ad">448 <div class="img">[IMG: Ad Icon]</div>449 <div class="text">[IMG: Ad Banner Placeholder] Buddy Loan: Personal Loan</div>450 <div class="cta">GET</div>451 </div>452 453 <!-- Bottom gesture bar -->454 <div class="gesture"></div>455</div>456</body>457</html>