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 - Date</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #000000;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 color: #FFFFFF;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 100%;25 height: 88px;26 padding: 20px 28px;27 box-sizing: border-box;28 display: flex;29 align-items: center;30 justify-content: space-between;31 color: #fff;32 font-weight: 600;33 letter-spacing: 0.2px;34 font-size: 34px;35 }36 .status-right {37 display: flex;38 align-items: center;39 gap: 22px;40 }41 .icon {42 width: 40px;43 height: 40px;44 }45 46 /* Top app bar */47 .app-bar {48 position: absolute;49 top: 88px;50 left: 0;51 width: 100%;52 height: 120px;53 box-sizing: border-box;54 padding: 10px 36px 0 36px;55 display: flex;56 align-items: center;57 justify-content: space-between;58 }59 .app-bar-left, .app-bar-right {60 display: flex;61 align-items: center;62 gap: 30px;63 }64 .app-title {65 display: flex;66 align-items: baseline;67 gap: 40px;68 margin-left: 10px;69 }70 .tab-active {71 font-size: 48px;72 font-weight: 700;73 color: #FFFFFF;74 position: relative;75 }76 .tab-inactive {77 font-size: 48px;78 font-weight: 700;79 color: #7A7A7A;80 }81 .tab-active::after {82 content: "";83 position: absolute;84 left: 0;85 bottom: -18px;86 width: 120px;87 height: 8px;88 background: #4B6BFF;89 border-radius: 4px;90 }91 92 /* Month header */93 .month-header {94 position: absolute;95 top: 230px;96 left: 36px;97 right: 36px;98 display: flex;99 align-items: center;100 gap: 16px;101 font-size: 50px;102 font-weight: 600;103 }104 .month-header .label {105 color: #DADADA;106 font-weight: 600;107 }108 .weekdays {109 position: absolute;110 top: 320px;111 left: 60px;112 right: 60px;113 display: grid;114 grid-template-columns: repeat(7, 1fr);115 font-size: 32px;116 color: #8C8C8C;117 }118 .weekdays div {119 text-align: center;120 }121 122 /* Calendar grid */123 .calendar {124 position: absolute;125 top: 380px;126 left: 60px;127 right: 60px;128 display: grid;129 grid-template-columns: repeat(7, 1fr);130 grid-auto-rows: 140px;131 gap: 12px;132 }133 .day {134 display: flex;135 align-items: center;136 justify-content: center;137 }138 .day.empty { opacity: 0; }139 .day .num {140 width: 96px;141 height: 96px;142 line-height: 96px;143 border-radius: 48px;144 text-align: center;145 font-size: 48px;146 color: #FFFFFF;147 font-weight: 700;148 }149 .day.selected-blue .num {150 background: #4B6BFF;151 color: #FFFFFF;152 }153 .day.selected-white .num {154 background: #FFFFFF;155 color: #4B6BFF;156 }157 .day .num.dim { color: #CFCFCF; }158 159 /* Bottom card */160 .options-card {161 position: absolute;162 left: 24px;163 right: 24px;164 bottom: 340px;165 background: #1F1F1F;166 border-radius: 24px;167 padding: 36px 32px;168 box-sizing: border-box;169 color: #EAEAEA;170 }171 .option-row {172 display: flex;173 align-items: center;174 justify-content: space-between;175 padding: 26px 8px;176 }177 .option-left {178 display: flex;179 align-items: center;180 gap: 26px;181 font-size: 42px;182 font-weight: 600;183 }184 .option-left .label-blue { color: #4B6BFF; }185 .option-right {186 display: flex;187 align-items: center;188 gap: 26px;189 font-size: 38px;190 font-weight: 600;191 }192 .option-right .val-blue { color: #4B6BFF; }193 .option-right .val-muted { color: #9A9A9A; }194 195 /* Bottom gesture pill */196 .gesture-pill {197 position: absolute;198 bottom: 32px;199 left: 50%;200 transform: translateX(-50%);201 width: 300px;202 height: 16px;203 background: #EDEDED;204 border-radius: 10px;205 opacity: 0.9;206 }207</style>208</head>209<body>210<div id="render-target">211 212 <!-- Status Bar -->213 <div class="status-bar">214 <div>2:00 M</div>215 <div class="status-right">216 <!-- WiFi -->217 <svg class="icon" viewBox="0 0 24 24" fill="#FFFFFF">218 <path d="M12 20a2 2 0 1 0 0.001-3.999A2 2 0 0 0 12 20zm-7-8a11 11 0 0 1 14 0l-1.5 1.5a8 8 0 0 0-11 0L5 12zm-3-4a16 16 0 0 1 20 0l-1.5 1.5a13 13 0 0 0-17 0L2 8z"/>219 </svg>220 <!-- Battery -->221 <svg class="icon" viewBox="0 0 24 24" fill="#FFFFFF">222 <path d="M18 6h1a2 2 0 0 1 2 2v1h1v6h-1v1a2 2 0 0 1-2 2h-1V6zm-14 2a2 2 0 0 1 2-2h10v14H6a2 2 0 0 1-2-2V8z"/>223 </svg>224 </div>225 </div>226 227 <!-- App Bar -->228 <div class="app-bar">229 <div class="app-bar-left">230 <!-- Close icon -->231 <svg class="icon" viewBox="0 0 24 24" fill="#FFFFFF">232 <path d="M18.3 5.7 12 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"/>233 </svg>234 <div class="app-title">235 <div class="tab-active">Date</div>236 <div class="tab-inactive">Duration</div>237 </div>238 </div>239 <div class="app-bar-right">240 <!-- Check icon -->241 <svg class="icon" viewBox="0 0 24 24" fill="#FFFFFF">242 <path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/>243 </svg>244 <!-- More (vertical dots) -->245 <svg class="icon" viewBox="0 0 24 24" fill="#FFFFFF">246 <circle cx="12" cy="5" r="2"></circle>247 <circle cx="12" cy="12" r="2"></circle>248 <circle cx="12" cy="19" r="2"></circle>249 </svg>250 </div>251 </div>252 253 <!-- Month header -->254 <div class="month-header">255 <div class="label">August</div>256 <!-- Back caret -->257 <svg class="icon" viewBox="0 0 24 24" fill="#DADADA">258 <path d="M15.5 19 8.5 12l7-7-1.5-1.5L5.5 12l8.5 8.5z"/>259 </svg>260 </div>261 262 <!-- Weekdays -->263 <div class="weekdays">264 <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>265 </div>266 267 <!-- Calendar grid -->268 <div class="calendar">269 <div class="day empty"><span class="num">0</span></div>270 <div class="day empty"><span class="num">0</span></div>271 272 <div class="day"><span class="num">1</span></div>273 <div class="day"><span class="num">2</span></div>274 <div class="day"><span class="num">3</span></div>275 <div class="day"><span class="num">4</span></div>276 <div class="day"><span class="num">5</span></div>277 278 <div class="day"><span class="num">6</span></div>279 <div class="day"><span class="num">7</span></div>280 <div class="day"><span class="num">8</span></div>281 <div class="day"><span class="num">9</span></div>282 <div class="day selected-white"><span class="num">10</span></div>283 <div class="day"><span class="num">11</span></div>284 <div class="day"><span class="num">12</span></div>285 286 <div class="day"><span class="num">13</span></div>287 <div class="day"><span class="num">14</span></div>288 <div class="day"><span class="num">15</span></div>289 <div class="day selected-blue"><span class="num">16</span></div>290 <div class="day"><span class="num">17</span></div>291 <div class="day"><span class="num">18</span></div>292 <div class="day"><span class="num">19</span></div>293 294 <div class="day"><span class="num">20</span></div>295 <div class="day"><span class="num">21</span></div>296 <div class="day"><span class="num">22</span></div>297 <div class="day"><span class="num">23</span></div>298 <div class="day"><span class="num">24</span></div>299 <div class="day"><span class="num">25</span></div>300 <div class="day"><span class="num">26</span></div>301 302 <div class="day"><span class="num">27</span></div>303 <div class="day"><span class="num">28</span></div>304 <div class="day"><span class="num">29</span></div>305 <div class="day"><span class="num">30</span></div>306 <div class="day"><span class="num">31</span></div>307 </div>308 309 <!-- Options card -->310 <div class="options-card">311 <div class="option-row">312 <div class="option-left">313 <!-- Clock icon -->314 <svg class="icon" viewBox="0 0 24 24" fill="#4B6BFF">315 <path d="M12 2a10 10 0 1 0 0.001 19.999A10 10 0 0 0 12 2zm1 5h-2v6l5 3 1-1.7-4-2.3V7z"/>316 </svg>317 <span class="label-blue">Set Time</span>318 </div>319 <div class="option-right">320 <span class="val-blue">09:00AM</span>321 <!-- X icon -->322 <svg class="icon" viewBox="0 0 24 24" fill="#4B6BFF">323 <path d="M18.3 5.7 12 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"/>324 </svg>325 </div>326 </div>327 328 <div class="option-row">329 <div class="option-left">330 <!-- Reminder bell icon -->331 <svg class="icon" viewBox="0 0 24 24" fill="#4B6BFF">332 <path d="M12 22a2.5 2.5 0 0 0 2.4-2H9.6A2.5 2.5 0 0 0 12 22zm8-6h-1V11a7 7 0 0 0-14 0v5H4l-1 2h20l-1-2z"/>333 </svg>334 <span class="label-blue">Set Reminder</span>335 </div>336 <div class="option-right">337 <span class="val-blue">On time</span>338 <!-- X icon -->339 <svg class="icon" viewBox="0 0 24 24" fill="#4B6BFF">340 <path d="M18.3 5.7 12 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"/>341 </svg>342 </div>343 </div>344 345 <div class="option-row">346 <div class="option-left">347 <!-- Repeat icon -->348 <svg class="icon" viewBox="0 0 24 24" fill="#9A9A9A">349 <path d="M7 7h8V4l4 4-4 4V9H7a4 4 0 0 0-4 4v1H1v-1a6 6 0 0 1 6-6zm10 10H9v3l-4-4 4-4v3h8a4 4 0 0 0 4-4v-1h2v1a6 6 0 0 1-6 6z"/>350 </svg>351 <span>Set Repeat</span>352 </div>353 <div class="option-right">354 <span class="val-muted">Never</span>355 <!-- chevron -->356 <svg class="icon" viewBox="0 0 24 24" fill="#9A9A9A">357 <path d="M9 6l6 6-6 6-1.4-1.4L12.2 12 7.6 7.4z"/>358 </svg>359 </div>360 </div>361 </div>362 363 <!-- Bottom gesture pill -->364 <div class="gesture-pill"></div>365</div>366</body>367</html>