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>Calendar Event - Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #141218; /* dark, purple-tinted */14 color: #ECE8F4;15 }16 17 /* Status bar */18 .status-bar {19 height: 110px;20 padding: 0 36px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #EDE7F6;25 font-size: 40px;26 letter-spacing: 1px;27 }28 .status-right {29 display: flex;30 gap: 26px;31 align-items: center;32 opacity: 0.85;33 }34 .icon {35 width: 44px; height: 44px;36 display: inline-flex; align-items: center; justify-content: center;37 }38 .icon svg { width: 100%; height: 100%; fill: #EDE7F6; }39 40 /* Header + title */41 .header {42 padding: 10px 34px 22px 34px;43 border-bottom: 1px solid #2A2432;44 }45 .nav-row {46 height: 110px;47 display: flex;48 align-items: center;49 justify-content: space-between;50 }51 .close-btn {52 width: 86px; height: 86px; border-radius: 50%;53 background: transparent; border: none; color: #EDE7F6; padding: 0;54 }55 .close-btn svg { width: 86px; height: 86px; }56 .save-pill {57 background: #D5B8F6;58 color: #1B1024;59 padding: 22px 46px;60 border-radius: 42px;61 font-weight: bold;62 font-size: 40px;63 }64 .title-input {65 margin-top: 12px;66 width: 100%;67 background: transparent;68 border: none;69 color: #F4EEFF;70 font-size: 64px;71 outline: none;72 caret-color: #BFA4FF;73 }74 .title-input::placeholder { color: #D4CBE7; opacity: 0.9; }75 76 /* Account row */77 .account-row {78 display: flex;79 align-items: center;80 gap: 26px;81 padding: 28px 36px;82 border-bottom: 1px solid #2A2432;83 }84 .avatar {85 width: 86px; height: 86px; border-radius: 50%;86 background: #C46E86; display: flex; align-items: center; justify-content: center;87 color: #1A0F1F; font-weight: 800; font-size: 44px;88 }89 .account-text { line-height: 1.2; }90 .account-line {91 display: flex; align-items: center; gap: 14px; font-size: 40px; color: #EDE7F6;92 }93 .blue-dot {94 width: 20px; height: 20px; background: #4FB3FF; border-radius: 50%;95 box-shadow: 0 0 0 6px rgba(79,179,255,0.15);96 display: inline-block;97 }98 .email {99 font-size: 34px; color: #B8ABC9; margin-top: 6px;100 }101 102 /* Settings list */103 .list { }104 .row {105 display: flex;106 align-items: center;107 padding: 34px 36px;108 border-bottom: 1px solid #2A2432;109 min-height: 120px;110 }111 .row .left {112 width: 70px;113 display: flex;114 justify-content: center;115 align-items: center;116 opacity: 0.95;117 }118 .row .label {119 font-size: 42px; color: #EFE7FF;120 }121 .row .right {122 margin-left: auto;123 font-size: 40px;124 color: #EDE7F6;125 opacity: 0.9;126 }127 128 /* Toggle */129 .toggle {130 width: 170px; height: 82px; background: #3A3340; border-radius: 42px; position: relative;131 }132 .toggle span {133 position: absolute; top: 9px; left: 10px;134 width: 64px; height: 64px; background: #8A809B; border-radius: 50%;135 }136 .toggle.on { background: #7A5AF8; }137 .toggle.on span { left: 96px; background: #FFFFFF; }138 139 /* Keyboard mock */140 .keyboard {141 position: absolute; left: 0; right: 0; bottom: 0;142 height: 980px;143 background: #19161E;144 border-top: 1px solid #2A2432;145 box-shadow: 0 -10px 30px rgba(0,0,0,0.35) inset;146 padding: 24px 22px 110px;147 }148 .kb-top {149 display: flex; justify-content: space-between; align-items: center;150 padding: 6px 8px 22px;151 }152 .kb-top .slot {153 width: 85px; height: 85px; border-radius: 18px; background: #231F29;154 display:flex; align-items:center; justify-content:center; color:#C9BED8; font-size:32px;155 border: 1px solid #2B2733;156 }157 .keys {158 display: grid;159 grid-template-columns: repeat(10, 1fr);160 gap: 14px;161 }162 .key {163 background: #221E28;164 border: 1px solid #2D2835;165 height: 120px;166 border-radius: 22px;167 display:flex; align-items:center; justify-content:center;168 color:#F0E9FF; font-size: 44px; font-weight: 600;169 }170 .row-gap { height: 18px; }171 .keys2 { grid-template-columns: repeat(9, 1fr); }172 .keys3 { grid-template-columns: repeat(8, 1fr); }173 .space-row {174 display: grid;175 grid-template-columns: 160px 1fr 160px 160px;176 gap: 14px; margin-top: 14px;177 }178 .space { height: 120px; background: #221E28; border:1px solid #2D2835; border-radius: 22px; }179 .space.long { }180 .space.mid {181 grid-column: 2;182 }183 /* Home indicator */184 .home-indicator {185 position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);186 width: 360px; height: 10px; border-radius: 8px; background: #DDD3EF; opacity: 0.75;187 }188</style>189</head>190<body>191<div id="render-target">192 193 <!-- Status Bar -->194 <div class="status-bar">195 <div class="time">8:37</div>196 <div class="status-right">197 <div class="icon" title="signal">198 <svg viewBox="0 0 24 24"><path d="M2 20h2V9H2v11zm4 0h2V5H6v15zm4 0h2V12h-2v8zm4 0h2V2h-2v18zm4 0h2v-6h-2v6z"/></svg>199 </div>200 <div class="icon" title="wifi">201 <svg viewBox="0 0 24 24"><path d="M12 20l4-4H8l4 4zm0-6c3.9 0 7.4 1.3 10 3.5L22 19c-2.2-1.8-6-3-10-3s-7.8 1.2-10 3l-0-1.5C4.6 15.3 8.1 14 12 14zm0-5c5.5 0 10.2 1.8 13.8 4.7L24 15c-3.2-2.6-7.6-4.2-12-4.2S3.2 12.4 0 15l-1.8-1.3C1.8 10.8 6.5 9 12 9z"/></svg>202 </div>203 <div class="icon" title="battery">204 <svg viewBox="0 0 24 24"><path d="M16 6h2a2 2 0 012 2v8a2 2 0 01-2 2h-2v1h-2v-1H8a2 2 0 01-2-2V8a2 2 0 012-2h8zm0 2H8v8h8V8z"/></svg>205 </div>206 </div>207 </div>208 209 <!-- Header -->210 <div class="header">211 <div class="nav-row">212 <button class="close-btn" aria-label="Close">213 <svg viewBox="0 0 24 24"><path fill="#EDE7F6" d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/></svg>214 </button>215 <div class="save-pill">Save</div>216 </div>217 <input class="title-input" placeholder="Add title" />218 </div>219 220 <!-- Account -->221 <div class="account-row">222 <div class="avatar">C</div>223 <div class="account-text">224 <div class="account-line"><span class="blue-dot"></span><span>Events</span></div>225 <div class="email">dbwscratch.test.id4@gmail.com</div>226 </div>227 </div>228 229 <!-- Settings -->230 <div class="list">231 232 <div class="row">233 <div class="left">234 <svg width="60" height="60" viewBox="0 0 24 24"><path fill="#EDE7F6" d="M12 1a11 11 0 1011 11A11 11 0 0012 1zm0 2a9 9 0 11-9 9 9 9 0 019-9zm.5 4h-1.5v6l5 3 .8-1.3-4.3-2.5z"/></svg>235 </div>236 <div class="label">All-day</div>237 <div class="right">238 <div class="toggle"><span></span></div>239 </div>240 </div>241 242 <div class="row">243 <div class="left"></div>244 <div class="label">Mon, Jul 24, 2023</div>245 <div class="right">9:00 AM</div>246 </div>247 248 <div class="row">249 <div class="left"></div>250 <div class="label">Mon, Jul 24, 2023</div>251 <div class="right">10:00 AM</div>252 </div>253 254 <div class="row">255 <div class="left">256 <svg width="60" height="60" viewBox="0 0 24 24"><path fill="#EDE7F6" d="M12 2a10 10 0 1010 10A10 10 0 0012 2zm7.9 9h-3.3a8.6 8.6 0 00-1.4-4 8 8 0 014.7 4zM12 4a8 8 0 013.3 6H8.7A8 8 0 0112 4zM4.1 13h3.3a8.6 8.6 0 001.4 4 8 8 0 01-4.7-4zM12 20a8 8 0 01-3.3-6h6.6A8 8 0 0112 20zM15.2 13h4.7a8 8 0 01-4.7 4 8.5 8.5 0 000-4z"/></svg>257 </div>258 <div class="label">India Standard Time</div>259 </div>260 261 <div class="row">262 <div class="left">263 <svg width="60" height="60" viewBox="0 0 24 24"><path fill="#EDE7F6" d="M12 5V2L7 7l5 5V9c2.8 0 5 2.2 5 5a5 5 0 01-5 5H6v2h6a7 7 0 000-14z"/></svg>264 </div>265 <div class="label">Does not repeat</div>266 </div>267 268 <div class="row">269 <div class="left">270 <svg width="60" height="60" viewBox="0 0 24 24"><path fill="#EDE7F6" d="M12 12a5 5 0 10-5-5 5 5 0 005 5zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5z"/></svg>271 </div>272 <div class="label">Add people</div>273 </div>274 275 </div>276 277 <!-- Keyboard mock -->278 <div class="keyboard">279 <div class="kb-top">280 <div style="display:flex; gap:20px;">281 <div class="slot">▦</div>282 <div class="slot">😊</div>283 <div class="slot">GIF</div>284 <div class="slot">⚙</div>285 </div>286 <div style="display:flex; gap:20px;">287 <div class="slot">🌐</div>288 <div class="slot">🎨</div>289 <div class="slot">🎤</div>290 </div>291 </div>292 293 <div class="keys">294 <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>295 </div>296 <div class="row-gap"></div>297 <div class="keys keys2">298 <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>299 </div>300 <div class="row-gap"></div>301 <div class="keys keys3">302 <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><div class="key">⌫</div>303 </div>304 <div class="space-row">305 <div class="space key">?123</div>306 <div class="space key" style="grid-column: 2 / span 1;">,</div>307 <div class="space key" style="grid-column: 2 / span 1; visibility:hidden;"></div>308 <div class="space key" style="grid-column: 2 / span 1; visibility:hidden;"></div>309 </div>310 <div class="space-row">311 <div class="space key">,</div>312 <div class="space key mid"></div>313 <div class="space key">.</div>314 <div class="space key">✓</div>315 </div>316 </div>317 318 <div class="home-indicator"></div>319</div>320</body>321</html>