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>Calendar - Dark</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #000000;15 }16 17 /* Status bar */18 .statusbar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 110px;24 padding: 0 36px;25 box-sizing: border-box;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #FFFFFF;30 font-weight: 600;31 font-size: 40px;32 opacity: 0.95;33 }34 .status-icons {35 display: flex;36 align-items: center;37 gap: 22px;38 }39 .status-dot { width: 18px; height: 18px; background: #FFFFFF; border-radius: 50%; opacity: 0.8; }40 .status-shape {41 width: 44px; height: 44px; border-radius: 10px; border: 3px solid #FFFFFF; opacity: 0.9;42 }43 44 /* App bar */45 .appbar {46 position: absolute;47 top: 110px;48 left: 0;49 width: 1080px;50 height: 120px;51 padding: 0 36px;52 box-sizing: border-box;53 display: flex;54 align-items: center;55 justify-content: space-between;56 color: #FFFFFF;57 }58 .appbar-left, .appbar-right { display: flex; align-items: center; gap: 32px; }59 .icon-btn {60 width: 60px; height: 60px;61 display: inline-flex; align-items: center; justify-content: center;62 }63 .icon { width: 42px; height: 42px; fill: none; stroke: #FFFFFF; stroke-width: 6; }64 65 /* Tabs */66 .tabs {67 position: absolute;68 top: 220px;69 left: 36px;70 width: calc(100% - 72px);71 height: 100px;72 display: flex;73 align-items: center;74 gap: 48px;75 }76 .tab {77 font-size: 56px;78 font-weight: 700;79 color: #FFFFFF;80 opacity: 0.9;81 position: relative;82 }83 .tab.inactive { color: #777777; opacity: 1; }84 .tab.active::after {85 content: "";86 position: absolute;87 left: 0; bottom: -18px;88 width: 120px; height: 8px;89 background: #FF8C00; border-radius: 4px;90 }91 92 /* Month Header */93 .month-header {94 position: absolute;95 top: 330px;96 left: 36px;97 width: calc(100% - 72px);98 display: flex;99 align-items: center;100 justify-content: space-between;101 color: #BDBDBD;102 font-size: 48px;103 font-weight: 600;104 letter-spacing: 0.5px;105 }106 .month-left { display: flex; align-items: center; gap: 14px; }107 .month-arrow { width: 32px; height: 32px; stroke: #BDBDBD; stroke-width: 6; fill: none; }108 109 /* Weekdays */110 .weekdays {111 position: absolute;112 top: 410px;113 left: 36px;114 width: calc(100% - 72px);115 display: grid;116 grid-template-columns: repeat(7, 1fr);117 color: #8E8E8E;118 font-size: 34px;119 font-weight: 600;120 padding: 0 6px;121 box-sizing: border-box;122 }123 .weekday { text-align: center; }124 125 /* Calendar grid */126 .calendar {127 position: absolute;128 top: 480px;129 left: 36px;130 width: calc(100% - 72px);131 display: grid;132 grid-template-columns: repeat(7, 1fr);133 grid-auto-rows: 150px;134 gap: 6px;135 box-sizing: border-box;136 }137 .cell {138 display: flex; align-items: center; justify-content: center;139 }140 .day {141 width: 110px; height: 110px; border-radius: 55px;142 display: flex; align-items: center; justify-content: center;143 font-size: 48px; font-weight: 700; color: #FFFFFF;144 }145 .day.normal { background: transparent; }146 .day.orange { background: #FF8C00; color: #FFFFFF; }147 .day.white { background: #FFFFFF; color: #FF8C00; }148 .empty { }149 150 /* Bottom card */151 .options-card {152 position: absolute;153 left: 24px;154 right: 24px;155 top: 1160px;156 background: #1F1F1F;157 border-radius: 26px;158 box-shadow: 0 6px 20px rgba(0,0,0,0.6);159 padding: 34px 36px;160 color: #FFFFFF;161 }162 .row {163 display: flex; align-items: center; justify-content: space-between;164 padding: 26px 8px;165 border-bottom: 1px solid rgba(255,255,255,0.06);166 }167 .row:last-child { border-bottom: none; }168 .left { display: flex; align-items: center; gap: 26px; }169 .label { font-size: 46px; font-weight: 600; }170 .label.muted { color: #B0B0B0; font-weight: 600; }171 .value { font-size: 44px; font-weight: 700; color: #FF8C00; }172 .value.muted { color: #9E9E9E; }173 .circle-icon {174 width: 60px; height: 60px;175 border-radius: 50%;176 background: rgba(255,140,0,0.12);177 display: flex; align-items: center; justify-content: center;178 }179 .svg-orange { stroke: #FF8C00; fill: none; stroke-width: 6; }180 .svg-grey { stroke: #9E9E9E; fill: none; stroke-width: 6; }181 .end-actions { display: flex; align-items: center; gap: 24px; }182 183 /* Gesture bar */184 .gesture {185 position: absolute;186 bottom: 36px;187 left: 50%;188 transform: translateX(-50%);189 width: 300px; height: 18px; border-radius: 9px;190 background: #E6E6E6;191 opacity: 0.9;192 }193</style>194</head>195<body>196<div id="render-target">197 198 <!-- Status bar (simplified) -->199 <div class="statusbar">200 <div>2:54</div>201 <div class="status-icons">202 <div class="status-dot"></div>203 <div class="status-dot" style="opacity:0.6;"></div>204 <div class="status-shape"></div>205 </div>206 </div>207 208 <!-- App bar -->209 <div class="appbar">210 <div class="appbar-left">211 <div class="icon-btn">212 <svg class="icon" viewBox="0 0 24 24">213 <path d="M5 5 L19 19 M5 19 L19 5"></path>214 </svg>215 </div>216 </div>217 <div class="appbar-right">218 <div class="icon-btn">219 <svg class="icon" viewBox="0 0 24 24">220 <path d="M5 13 L10 18 L19 7"></path>221 </svg>222 </div>223 <div class="icon-btn">224 <svg class="icon" viewBox="0 0 24 24" style="stroke:#FFFFFF; fill:#FFFFFF;">225 <circle cx="12" cy="5" r="2.2"></circle>226 <circle cx="12" cy="12" r="2.2"></circle>227 <circle cx="12" cy="19" r="2.2"></circle>228 </svg>229 </div>230 </div>231 </div>232 233 <!-- Tabs -->234 <div class="tabs">235 <div class="tab active">Date</div>236 <div class="tab inactive">Duration</div>237 </div>238 239 <!-- Month Header -->240 <div class="month-header">241 <div class="month-left">242 <div style="color:#D0D0D0;">August</div>243 <svg class="month-arrow" viewBox="0 0 24 24">244 <path d="M15 6 L9 12 L15 18"></path>245 </svg>246 </div>247 <!-- Spacer for alignment -->248 <div style="width: 120px;"></div>249 </div>250 251 <!-- Weekdays -->252 <div class="weekdays">253 <div class="weekday">Sun</div>254 <div class="weekday">Mon</div>255 <div class="weekday">Tue</div>256 <div class="weekday">Wed</div>257 <div class="weekday">Thu</div>258 <div class="weekday">Fri</div>259 <div class="weekday">Sat</div>260 </div>261 262 <!-- Calendar Grid -->263 <div class="calendar">264 <!-- Row 1 -->265 <div class="cell empty"></div>266 <div class="cell empty"></div>267 <div class="cell"><div class="day normal">1</div></div>268 <div class="cell"><div class="day normal">2</div></div>269 <div class="cell"><div class="day normal">3</div></div>270 <div class="cell"><div class="day normal">4</div></div>271 <div class="cell"><div class="day normal">5</div></div>272 273 <!-- Row 2 -->274 <div class="cell"><div class="day normal">6</div></div>275 <div class="cell"><div class="day normal">7</div></div>276 <div class="cell"><div class="day normal">8</div></div>277 <div class="cell"><div class="day normal">9</div></div>278 <div class="cell"><div class="day normal">10</div></div>279 <div class="cell"><div class="day white">11</div></div>280 <div class="cell"><div class="day normal">12</div></div>281 282 <!-- Row 3 -->283 <div class="cell"><div class="day orange">13</div></div>284 <div class="cell"><div class="day normal">14</div></div>285 <div class="cell"><div class="day normal">15</div></div>286 <div class="cell"><div class="day normal">16</div></div>287 <div class="cell"><div class="day normal">17</div></div>288 <div class="cell"><div class="day normal">18</div></div>289 <div class="cell"><div class="day normal">19</div></div>290 291 <!-- Row 4 -->292 <div class="cell"><div class="day normal">20</div></div>293 <div class="cell"><div class="day normal">21</div></div>294 <div class="cell"><div class="day normal">22</div></div>295 <div class="cell"><div class="day normal">23</div></div>296 <div class="cell"><div class="day normal">24</div></div>297 <div class="cell"><div class="day normal">25</div></div>298 <div class="cell"><div class="day normal">26</div></div>299 300 <!-- Row 5 -->301 <div class="cell"><div class="day normal">27</div></div>302 <div class="cell"><div class="day normal">28</div></div>303 <div class="cell"><div class="day normal">29</div></div>304 <div class="cell"><div class="day normal">30</div></div>305 <div class="cell"><div class="day normal">31</div></div>306 <div class="cell empty"></div>307 <div class="cell empty"></div>308 </div>309 310 <!-- Options card -->311 <div class="options-card">312 <!-- Set Time -->313 <div class="row">314 <div class="left">315 <div class="circle-icon">316 <svg class="svg-orange" viewBox="0 0 24 24" width="40" height="40">317 <circle cx="12" cy="12" r="8"></circle>318 <path d="M12 7 L12 12 L16 14"></path>319 </svg>320 </div>321 <div class="label" style="color:#FF8C00;">Set Time</div>322 </div>323 <div class="end-actions">324 <div class="value">06:00PM</div>325 <div class="icon-btn">326 <svg viewBox="0 0 24 24" width="40" height="40" class="svg-orange">327 <path d="M5 5 L19 19 M5 19 L19 5"></path>328 </svg>329 </div>330 </div>331 </div>332 333 <!-- Set Reminder -->334 <div class="row">335 <div class="left">336 <div class="circle-icon">337 <svg class="svg-orange" viewBox="0 0 24 24" width="40" height="40">338 <path d="M12 5 C9 5 7 7 7 10 V14 H5 V16 H19 V14 H17 V10 C17 7 15 5 12 5 Z"></path>339 <circle cx="12" cy="18" r="1.8" fill="#FF8C00"></circle>340 </svg>341 </div>342 <div class="label" style="color:#FF8C00;">Set Reminder</div>343 </div>344 <div class="end-actions">345 <div class="value">On time</div>346 <div class="icon-btn">347 <svg viewBox="0 0 24 24" width="40" height="40" class="svg-orange">348 <path d="M5 5 L19 19 M5 19 L19 5"></path>349 </svg>350 </div>351 </div>352 </div>353 354 <!-- Set Repeat -->355 <div class="row">356 <div class="left">357 <div class="circle-icon" style="background: rgba(255,255,255,0.08);">358 <svg class="svg-grey" viewBox="0 0 24 24" width="40" height="40">359 <path d="M6 8 H10 L8 6 M14 16 H18 L16 18"></path>360 <path d="M8 6 C6 7 5 9 5 12 C5 15 7 17 10 18 M16 18 C18 17 19 15 19 12 C19 9 17 7 14 6"></path>361 </svg>362 </div>363 <div class="label muted">Set Repeat</div>364 </div>365 <div class="end-actions">366 <div class="value muted">Never</div>367 <svg viewBox="0 0 24 24" width="40" height="40" class="svg-grey" style="margin-left:8px;">368 <path d="M9 6 L15 12 L9 18"></path>369 </svg>370 </div>371 </div>372 </div>373 374 <!-- Gesture bar -->375 <div class="gesture"></div>376</div>377</body>378</html>