GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Calendar Event</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: #121212;13 color: #EDEDED;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 85px;23 padding: 18px 28px;24 box-sizing: border-box;25 color: #CFCFCF;26 font-size: 34px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 }31 .status-left { display: flex; align-items: center; gap: 18px; }32 .status-right { display: flex; align-items: center; gap: 18px; }33 .dot { width: 8px; height: 8px; background: #9E9E9E; border-radius: 50%; display: inline-block; }34 35 /* App header */36 .app-header {37 position: absolute;38 top: 85px;39 left: 0;40 width: 1080px;41 height: 180px;42 padding: 22px 28px;43 box-sizing: border-box;44 display: flex;45 align-items: center;46 gap: 24px;47 }48 .icon-btn {49 width: 70px;50 height: 70px;51 border-radius: 70px;52 display: flex;53 align-items: center;54 justify-content: center;55 color: #D0C9D9;56 background: transparent;57 }58 .title-input {59 flex: 1;60 font-size: 70px;61 font-weight: 600;62 color: #EDE0FF;63 border: none;64 background: transparent;65 outline: none;66 }67 .save-pill {68 background: #C9A6FF;69 color: #1A1325;70 padding: 22px 34px;71 border-radius: 38px;72 font-weight: 700;73 font-size: 42px;74 }75 76 /* Account block */77 .account-row {78 position: absolute;79 top: 265px;80 left: 0;81 width: 1080px;82 height: 120px;83 padding: 0 32px;84 display: flex;85 align-items: center;86 gap: 22px;87 box-sizing: border-box;88 }89 .account-avatar {90 width: 78px;91 height: 78px;92 border-radius: 50%;93 background: #CF6679;94 display: flex;95 align-items: center;96 justify-content: center;97 font-weight: 700;98 color: #1E1E1E;99 }100 .account-text { display: flex; flex-direction: column; }101 .account-text .label { color: #C0C0FF; font-size: 42px; font-weight: 700; }102 .account-text .email { color: #A8A8A8; font-size: 36px; }103 104 /* Divider */105 .divider { height: 1px; background: #2B2B2B; margin: 12px 0; }106 107 /* Detail rows */108 .details {109 position: absolute;110 top: 400px;111 left: 0;112 width: 1080px;113 padding-bottom: 24px;114 }115 .detail-row {116 display: flex;117 align-items: center;118 justify-content: space-between;119 padding: 34px 32px;120 box-sizing: border-box;121 height: 130px;122 border-bottom: 1px solid #232323;123 }124 .detail-left {125 display: flex;126 align-items: center;127 gap: 26px;128 font-size: 44px;129 }130 .detail-right {131 color: #D9D9D9;132 font-size: 44px;133 }134 .subtext { color: #AAAAAA; font-size: 38px; }135 136 /* Simple icons */137 .ic {138 width: 54px; height: 54px; display: inline-block;139 }140 141 /* Switch */142 .switch {143 width: 180px;144 height: 88px;145 background: #3A353E;146 border-radius: 44px;147 padding: 8px;148 box-sizing: border-box;149 display: flex;150 justify-content: flex-start;151 align-items: center;152 }153 .switch::after {154 content: "";155 width: 72px; height: 72px; border-radius: 50%;156 background: #8D8697;157 display: block;158 }159 160 /* Suggestion chips and keyboard */161 .keyboard {162 position: absolute;163 left: 0;164 bottom: 0;165 width: 1080px;166 height: 870px;167 background: #1B1B1B;168 border-top-left-radius: 22px;169 border-top-right-radius: 22px;170 box-shadow: 0 -6px 18px rgba(0,0,0,0.6);171 }172 .suggestions {173 height: 110px;174 display: flex;175 align-items: center;176 gap: 22px;177 padding: 0 26px;178 background: #1B1B1B;179 border-bottom: 1px solid #2A2A2A;180 }181 .chip {182 padding: 16px 26px;183 background: #2B2B2B;184 color: #EAEAEA;185 border-radius: 30px;186 font-size: 40px;187 }188 .chip.mic { width: 70px; height: 70px; padding: 0; display: flex; align-items: center; justify-content: center; }189 190 .keys {191 padding: 20px 18px 22px;192 box-sizing: border-box;193 }194 .row {195 display: flex;196 justify-content: center;197 gap: 18px;198 margin: 18px 0;199 }200 .key {201 background: #2B2B2B;202 color: #EDEDED;203 min-width: 88px;204 height: 120px;205 border-radius: 22px;206 display: flex;207 align-items: center;208 justify-content: center;209 font-size: 54px;210 box-shadow: inset 0 -3px 0 rgba(0,0,0,0.25);211 }212 .key.wide { min-width: 150px; }213 .space { flex: 1; min-width: 440px; }214 .enter { background: #C9A6FF; color: #1D132B; }215 .delete { min-width: 140px; }216</style>217</head>218<body>219<div id="render-target">220 221 <!-- Status Bar -->222 <div class="status-bar">223 <div class="status-left">224 <div>8:38</div>225 <span class="dot"></span>226 <span class="dot"></span>227 <span class="dot"></span>228 </div>229 <div class="status-right">230 <span style="font-size:30px;">Wi‑Fi</span>231 <span style="font-size:30px;">▮▮▮</span>232 <span style="font-size:30px;">🔋</span>233 </div>234 </div>235 236 <!-- App Header -->237 <div class="app-header">238 <div class="icon-btn">239 <!-- simple X icon -->240 <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="#C9B6FF" stroke-width="2">241 <path d="M4 4L20 20M20 4L4 20"></path>242 </svg>243 </div>244 <input class="title-input" value="Transport" />245 <div class="save-pill">Save</div>246 </div>247 248 <!-- Account Row -->249 <div class="account-row">250 <div class="account-avatar">C</div>251 <div class="account-text">252 <div class="label">253 <svg width="22" height="22" viewBox="0 0 24 24" style="vertical-align: middle;">254 <circle cx="12" cy="12" r="8" fill="#6FA2FF"></circle>255 </svg>256 <span style="margin-left:10px;">Events</span>257 </div>258 <div class="email">dbwscratch.test.id4@gmail.com</div>259 </div>260 </div>261 262 <div class="details">263 264 <div class="detail-row">265 <div class="detail-left">266 <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="#C9C9C9" stroke-width="2">267 <circle cx="12" cy="12" r="8"></circle>268 <path d="M12 6v6l4 2"></path>269 </svg>270 <div>All-day</div>271 </div>272 <div class="detail-right">273 <div class="switch"></div>274 </div>275 </div>276 277 <div class="detail-row">278 <div class="detail-left">279 <div style="width:54px;height:54px;"></div>280 <div class="subtext">Mon, Jul 24, 2023</div>281 </div>282 <div class="detail-right">9:00 AM</div>283 </div>284 285 <div class="detail-row">286 <div class="detail-left">287 <div style="width:54px;height:54px;"></div>288 <div class="subtext">Mon, Jul 24, 2023</div>289 </div>290 <div class="detail-right">10:00 AM</div>291 </div>292 293 <div class="detail-row">294 <div class="detail-left">295 <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="#C9C9C9" stroke-width="2">296 <circle cx="12" cy="12" r="8"></circle>297 <path d="M2 12h20M12 2a10 10 0 0 1 0 20M12 2a10 10 0 0 0 0 20"></path>298 </svg>299 <div>India Standard Time</div>300 </div>301 <div class="detail-right"></div>302 </div>303 304 <div class="detail-row">305 <div class="detail-left">306 <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="#C9C9C9" stroke-width="2">307 <path d="M4 4v6h6"></path>308 <path d="M20 20v-6h-6"></path>309 <path d="M4 10a8 8 0 0 0 16 0"></path>310 </svg>311 <div>Does not repeat</div>312 </div>313 <div class="detail-right"></div>314 </div>315 316 <div class="detail-row">317 <div class="detail-left">318 <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="#C9C9C9" stroke-width="2">319 <circle cx="12" cy="8" r="4"></circle>320 <path d="M6 22c0-3.3 3-6 6-6s6 2.7 6 6"></path>321 <path d="M18 10l3 3M6 10l-3 3"></path>322 </svg>323 <div>Add people</div>324 </div>325 <div class="detail-right"></div>326 </div>327 328 </div>329 330 <!-- Keyboard -->331 <div class="keyboard">332 <div class="suggestions">333 <div class="chip">Transport</div>334 <div class="chip">Transportation</div>335 <div class="chip">Transporter</div>336 <div class="chip mic">337 <svg width="36" height="36" viewBox="0 0 24 24" fill="#EDEDED">338 <path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3z"></path>339 <path d="M19 11a7 7 0 0 1-14 0M12 18v4"></path>340 </svg>341 </div>342 </div>343 344 <div class="keys">345 <div class="row">346 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>347 <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>348 <div class="key">o</div><div class="key">p</div>349 </div>350 <div class="row" style="padding:0 60px;">351 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>352 <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>353 </div>354 <div class="row" style="padding:0 120px;">355 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>356 <div class="key">b</div><div class="key">n</div><div class="key">m</div>357 <div class="key delete">⌫</div>358 </div>359 <div class="row">360 <div class="key wide">?123</div>361 <div class="key wide">,</div>362 <div class="key wide">😊</div>363 <div class="key space space"> </div>364 <div class="key wide">.</div>365 <div class="key enter">✓</div>366 </div>367 </div>368 </div>369 370</div>371</body>372</html>