GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Calendar UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #121212;13 color: #FFFFFF;14 font-family: Arial, Helvetica, sans-serif;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0; left: 0;21 width: 100%; height: 90px;22 display: flex;23 align-items: center;24 padding: 0 32px;25 color: #D8D8D8;26 font-size: 34px;27 letter-spacing: 0.5px;28 }29 .status-icons { margin-left: auto; display: flex; align-items: center; gap: 24px; }30 .status-dot {31 width: 18px; height: 18px; border-radius: 50%; background: #D8D8D8;32 opacity: 0.85;33 }34 .status-battery {35 width: 44px; height: 22px; border: 2px solid #D8D8D8; border-radius: 5px; position: relative;36 }37 .status-battery::after {38 content: ""; position: absolute; right: -6px; top: 6px; width: 6px; height: 10px; background: #D8D8D8; border-radius: 2px;39 }40 .status-battery .level { width: 28px; height: 14px; background: #9FD4FF; margin: 2px; border-radius: 3px; }41 42 /* App bar */43 .app-bar {44 position: absolute;45 top: 90px; left: 0;46 width: 100%; height: 130px;47 display: flex; align-items: center;48 padding: 0 28px;49 }50 .icon-btn {51 width: 70px; height: 70px;52 border-radius: 35px;53 border: 1px solid #2F2F2F;54 display: flex; align-items: center; justify-content: center;55 color: #D5D5D5;56 background: #181818;57 }58 .center-chev { position: absolute; left: 50%; transform: translateX(-50%); top: 40px; opacity: 0.7; }59 .save-btn {60 margin-left: auto;61 background: #9FC3F3;62 color: #0E2038;63 border-radius: 40px;64 padding: 18px 34px;65 font-weight: 700;66 font-size: 36px;67 }68 69 /* Content area */70 .content {71 position: absolute;72 top: 220px; left: 0;73 width: 100%;74 padding: 0 40px 40px 40px;75 }76 .title-input {77 font-size: 64px;78 color: #EAEAEA;79 border-bottom: 2px solid #2A2A2A;80 padding-bottom: 24px;81 margin-bottom: 10px;82 }83 .caret {84 display: inline-block;85 width: 4px; height: 64px; background: #A8C4FF;86 margin-left: 8px; transform: translateY(10px);87 }88 .section-divider { height: 1px; background: #1D1D1D; margin: 18px 0 8px; }89 90 .row {91 display: flex; align-items: center;92 padding: 28px 0;93 border-bottom: 1px solid #1D1D1D;94 font-size: 40px;95 color: #E5E5E5;96 }97 .row .left { display: flex; align-items: center; gap: 24px; }98 .row .right { margin-left: auto; color: #C9D7FF; font-weight: 600; }99 .round-icon {100 width: 58px; height: 58px; border-radius: 50%;101 background: #1E1E1E; border: 1px solid #2E2E2E;102 display: flex; align-items: center; justify-content: center;103 }104 .subtext { color: #AFAFAF; font-size: 36px; margin-top: 6px; }105 106 /* Toggle */107 .toggle-off {108 width: 170px; height: 84px; border-radius: 42px;109 background: #2A2A2A; position: relative;110 border: 1px solid #383838;111 }112 .toggle-off::after {113 content: ""; position: absolute; left: 6px; top: 8px;114 width: 68px; height: 68px; border-radius: 34px;115 background: #6B6B6B;116 }117 118 /* Pills / buttons */119 .pill {120 display: inline-block;121 padding: 18px 28px;122 border: 1px solid #365D8A;123 color: #BFD5FF;124 border-radius: 16px;125 margin-top: 20px;126 font-size: 38px;127 }128 129 /* Keyboard */130 .keyboard {131 position: absolute;132 left: 0; bottom: 0;133 width: 100%; height: 920px;134 background: #1A1A1A;135 border-top: 1px solid #2A2A2A;136 box-shadow: 0 -6px 18px rgba(0,0,0,0.35);137 }138 .kb-top {139 display: flex; align-items: center; gap: 36px;140 padding: 28px 24px;141 color: #D0D0D0;142 }143 .kb-icon {144 width: 74px; height: 74px; border-radius: 18px;145 background: #222; border: 1px solid #333;146 display: flex; align-items: center; justify-content: center;147 font-size: 36px;148 }149 .kb-rows { padding: 10px 18px; }150 .kb-row {151 display: grid;152 grid-template-columns: repeat(10, 1fr);153 gap: 14px;154 margin: 16px 0;155 }156 .key {157 height: 120px; border-radius: 18px;158 background: #2A2A2A; color: #EFEFEF;159 display: flex; align-items: center; justify-content: center;160 font-size: 48px;161 border: 1px solid #3A3A3A;162 }163 .key.wide { grid-column: span 2; }164 .kb-bottom {165 display: grid; grid-template-columns: 1fr 1fr 4fr 1fr 1fr;166 gap: 16px;167 padding: 18px;168 }169 .check-btn {170 width: 140px; height: 140px; border-radius: 70px;171 background: #C8DCF9; color: #10243A; border: 1px solid #92B8ED;172 display: flex; align-items: center; justify-content: center;173 font-size: 56px; font-weight: 700;174 justify-self: end;175 }176</style>177</head>178<body>179<div id="render-target">180 181 <!-- Status bar -->182 <div class="status-bar">183 <div>12:52</div>184 <div class="status-icons">185 <div class="status-dot"></div>186 <div class="status-dot" style="opacity:0.5;"></div>187 <div class="status-battery"><div class="level"></div></div>188 </div>189 </div>190 191 <!-- App bar -->192 <div class="app-bar">193 <div class="icon-btn">194 <!-- Close icon -->195 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">196 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#D8D8D8" stroke-width="2" stroke-linecap="round"/>197 </svg>198 </div>199 200 <div class="center-chev">201 <!-- Down chevron -->202 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">203 <path d="M6 9 L12 15 L18 9" stroke="#BEBEBE" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>204 </svg>205 </div>206 207 <div class="save-btn">Save</div>208 </div>209 210 <!-- Content -->211 <div class="content">212 <div class="title-input">213 Add title<span class="caret"></span>214 </div>215 216 <!-- All-day -->217 <div class="row">218 <div class="left">219 <div class="round-icon">220 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">221 <circle cx="12" cy="12" r="9" stroke="#7F7F7F" stroke-width="2"/>222 <path d="M12 6 L12 12 L16 14" stroke="#7F7F7F" stroke-width="2" stroke-linecap="round"/>223 </svg>224 </div>225 <div>All-day</div>226 </div>227 <div class="right">228 <div class="toggle-off"></div>229 </div>230 </div>231 232 <!-- Start -->233 <div class="row">234 <div class="left">235 <div style="width:58px;height:58px;border-radius:50%;background:#1E1E1E;border:1px solid #2E2E2E;display:flex;align-items:center;justify-content:center;">236 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">237 <path d="M3 6 H21 M7 3 V6 M17 3 V6" stroke="#8A8A8A" stroke-width="2" stroke-linecap="round"/>238 <rect x="4" y="8" width="16" height="12" rx="2" stroke="#8A8A8A" stroke-width="2"/>239 </svg>240 </div>241 <div>242 <div>Sat, Sep 23, 2023</div>243 </div>244 </div>245 <div class="right">1:00 AM</div>246 </div>247 248 <!-- End -->249 <div class="row">250 <div class="left">251 <div style="width:58px;height:58px;border-radius:50%;background:#1E1E1E;border:1px solid #2E2E2E;display:flex;align-items:center;justify-content:center;">252 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">253 <path d="M3 6 H21 M7 3 V6 M17 3 V6" stroke="#8A8A8A" stroke-width="2" stroke-linecap="round"/>254 <rect x="4" y="8" width="16" height="12" rx="2" stroke="#8A8A8A" stroke-width="2"/>255 </svg>256 </div>257 <div>Sat, Sep 23, 2023</div>258 </div>259 <div class="right">2:00 AM</div>260 </div>261 262 <!-- Time zone -->263 <div class="row">264 <div class="left">265 <div class="round-icon">266 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">267 <circle cx="12" cy="12" r="9" stroke="#8A8A8A" stroke-width="2"/>268 <path d="M3 12 H21 M12 3 V21" stroke="#8A8A8A" stroke-width="2" opacity="0.7"/>269 </svg>270 </div>271 <div>272 <div>India Standard Time</div>273 </div>274 </div>275 </div>276 277 <!-- Repeat -->278 <div class="row">279 <div class="left">280 <div class="round-icon">281 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">282 <path d="M7 7 H14 L12 5 M17 17 H10 L12 19" stroke="#8A8A8A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>283 </svg>284 </div>285 <div>Does not repeat</div>286 </div>287 </div>288 289 <!-- Add people -->290 <div class="row" style="border-bottom:none;">291 <div class="left">292 <div class="round-icon">293 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">294 <circle cx="12" cy="9" r="4" stroke="#8A8A8A" stroke-width="2"/>295 <path d="M4 20 C4 15 20 15 20 20" stroke="#8A8A8A" stroke-width="2" stroke-linecap="round"/>296 </svg>297 </div>298 <div>Add people</div>299 </div>300 </div>301 302 <div class="pill">View schedules</div>303 304 <!-- Placeholder for video conferencing image/area -->305 <div style="margin-top:40px;">306 <div style="width:100%; height:130px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575;">307 [IMG: Add video conferencing bar]308 </div>309 </div>310 </div>311 312 <!-- Keyboard -->313 <div class="keyboard">314 <div class="kb-top">315 <div class="kb-icon">☰</div>316 <div class="kb-icon">☺</div>317 <div class="kb-icon">GIF</div>318 <div class="kb-icon">⚙</div>319 <div class="kb-icon">Gᵗ</div>320 <div class="kb-icon">🎨</div>321 <div class="kb-icon">🎤</div>322 </div>323 324 <div class="kb-rows">325 <div class="kb-row">326 <div class="key">Q</div><div class="key">W</div><div class="key">E</div><div class="key">R</div><div class="key">T</div><div class="key">Y</div><div class="key">U</div><div class="key">I</div><div class="key">O</div><div class="key">P</div>327 </div>328 <div class="kb-row">329 <div class="key">A</div><div class="key">S</div><div class="key">D</div><div class="key">F</div><div class="key">G</div><div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div><div class="key wide">⌫</div>330 </div>331 <div class="kb-row" style="grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;">332 <div class="key wide">⇧</div>333 <div class="key">Z</div><div class="key">X</div><div class="key">C</div><div class="key">V</div><div class="key">B</div><div class="key">N</div><div class="key">M</div>334 <div class="key">.</div>335 <div class="key wide">✔</div>336 </div>337 </div>338 339 <div class="kb-bottom">340 <div class="key">?123</div>341 <div class="key">,</div>342 <div class="key" style="grid-column: span 1;"> </div>343 <div class="key">.</div>344 <div class="check-btn">✓</div>345 </div>346 </div>347 348</div>349</body>350</html>