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 Scheduler UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #000000; color: #FFFFFF;13 font-family: Arial, Helvetica, sans-serif;14 }15 16 .status-bar {17 position: absolute; top: 24px; left: 40px; right: 40px;18 height: 48px; display: flex; align-items: center; justify-content: space-between;19 font-size: 32px; color: #E0E0E0;20 }21 .status-icons { display: flex; align-items: center; gap: 24px; }22 .status-icon { width: 36px; height: 36px; opacity: 0.9; }23 24 .appbar {25 position: absolute; top: 96px; left: 32px; right: 32px;26 height: 120px; display: flex; align-items: center; justify-content: space-between;27 }28 .left-actions, .right-actions { display: flex; align-items: center; gap: 36px; }29 .app-title { display: flex; align-items: baseline; gap: 36px; }30 .tab { font-size: 54px; font-weight: 700; letter-spacing: 0.5px; }31 .tab.inactive { color: #7A7A7A; font-weight: 700; }32 .underline {33 position: absolute; top: 190px; left: 180px; width: 120px; height: 6px;34 background: #3D5AFE; border-radius: 3px;35 }36 .icon-btn { width: 54px; height: 54px; }37 38 .month-bar {39 position: absolute; top: 240px; left: 40px; right: 40px;40 height: 70px; display: flex; align-items: center; gap: 16px;41 font-size: 42px; font-weight: 600;42 }43 .month-bar .label { color: #FFFFFF; }44 .month-bar .chevron { width: 40px; height: 40px; opacity: 0.8; }45 46 .weekday-row {47 position: absolute; top: 330px; left: 40px; right: 40px;48 display: grid; grid-template-columns: repeat(7, 1fr); gap: 28px;49 color: #9E9E9E; font-size: 28px; text-align: center;50 }51 52 .calendar {53 position: absolute; top: 400px; left: 40px; right: 40px;54 display: grid; grid-template-columns: repeat(7, 1fr); gap: 28px;55 }56 .day {57 height: 120px; display: flex; align-items: center; justify-content: center;58 font-size: 44px; color: #E0E0E0;59 }60 .empty { opacity: 0.0; }61 .day .chip {62 width: 104px; height: 104px; border-radius: 52px;63 display: flex; align-items: center; justify-content: center;64 }65 .selected-blue .chip { background: #3D5AFE; color: #FFFFFF; font-weight: 700; }66 .selected-white .chip { background: #FFFFFF; color: #3D5AFE; font-weight: 700; }67 .day.dim { color: #9E9E9E; }68 69 .sheet {70 position: absolute; left: 24px; right: 24px; bottom: 320px;71 background: #1F1F1F; border-radius: 28px; padding: 32px 32px 24px 32px;72 box-shadow: 0 12px 24px rgba(0,0,0,0.45);73 }74 .sheet-row {75 display: flex; align-items: center; justify-content: space-between;76 padding: 18px 8px; border-radius: 12px;77 }78 .row-left { display: flex; align-items: center; gap: 24px; }79 .row-title { font-size: 40px; }80 .row-title.primary { color: #3D5AFE; }81 .row-value { font-size: 36px; color: #B0C1FF; }82 .row-value.muted { color: #9E9E9E; }83 .sheet .divider { height: 18px; }84 .round-icon { width: 56px; height: 56px; }85 .action-x { width: 42px; height: 42px; opacity: 0.85; margin-left: 20px; }86 .chevron-right { width: 36px; height: 36px; opacity: 0.8; margin-left: 20px; }87 88 .gesture {89 position: absolute; left: 50%; transform: translateX(-50%);90 bottom: 56px; width: 300px; height: 10px; background: #E0E0E0; border-radius: 8px; opacity: 0.85;91 }92</style>93</head>94<body>95<div id="render-target">96 97 <!-- Status bar -->98 <div class="status-bar">99 <div>2:01</div>100 <div class="status-icons">101 <!-- Simple Wi-Fi icon -->102 <svg class="status-icon" viewBox="0 0 24 24">103 <path d="M12 20c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z" fill="#FFFFFF"/>104 <path d="M2 8c5.5-4.5 14.5-4.5 20 0" stroke="#FFFFFF" stroke-width="2" fill="none" opacity="0.8"/>105 <path d="M5 11c3.9-3.2 10.1-3.2 14 0" stroke="#FFFFFF" stroke-width="2" fill="none" opacity="0.8"/>106 <path d="M8 14c2.3-1.9 5.7-1.9 8 0" stroke="#FFFFFF" stroke-width="2" fill="none" opacity="0.8"/>107 </svg>108 <!-- Battery icon -->109 <svg class="status-icon" viewBox="0 0 24 24">110 <rect x="2" y="6" width="18" height="12" rx="2" fill="none" stroke="#FFFFFF" stroke-width="2"/>111 <rect x="4" y="8" width="12" height="8" fill="#FFFFFF"/>112 <rect x="20" y="10" width="2" height="4" fill="#FFFFFF"/>113 </svg>114 </div>115 </div>116 117 <!-- App bar -->118 <div class="appbar">119 <div class="left-actions">120 <!-- Close icon -->121 <svg class="icon-btn" viewBox="0 0 24 24">122 <path d="M6 6L18 18M18 6L6 18" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>123 </svg>124 <div class="app-title">125 <div class="tab">Date</div>126 <div class="tab inactive">Duration</div>127 </div>128 </div>129 <div class="right-actions">130 <!-- Check icon -->131 <svg class="icon-btn" viewBox="0 0 24 24">132 <path d="M4 13l5 5L20 7" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>133 </svg>134 <!-- More (kebab) icon -->135 <svg class="icon-btn" viewBox="0 0 24 24">136 <circle cx="12" cy="5" r="2" fill="#FFFFFF"/>137 <circle cx="12" cy="12" r="2" fill="#FFFFFF"/>138 <circle cx="12" cy="19" r="2" fill="#FFFFFF"/>139 </svg>140 </div>141 </div>142 <div class="underline"></div>143 144 <!-- Month bar -->145 <div class="month-bar">146 <div class="label">August</div>147 <svg class="chevron" viewBox="0 0 24 24">148 <path d="M15 6L9 12l6 6" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>149 </svg>150 </div>151 152 <!-- Weekday headers -->153 <div class="weekday-row">154 <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>155 </div>156 157 <!-- Calendar grid -->158 <div class="calendar">159 <!-- First week: pad Sun/Mon -->160 <div class="day empty"></div>161 <div class="day empty"></div>162 <div class="day"><div class="chip">1</div></div>163 <div class="day"><div class="chip">2</div></div>164 <div class="day"><div class="chip">3</div></div>165 <div class="day"><div class="chip">4</div></div>166 <div class="day"><div class="chip">5</div></div>167 168 <!-- second week -->169 <div class="day"><div class="chip">6</div></div>170 <div class="day"><div class="chip">7</div></div>171 <div class="day"><div class="chip">8</div></div>172 <div class="day"><div class="chip">9</div></div>173 <div class="day selected-white"><div class="chip">10</div></div>174 <div class="day"><div class="chip">11</div></div>175 <div class="day"><div class="chip">12</div></div>176 177 <!-- third week -->178 <div class="day"><div class="chip">13</div></div>179 <div class="day"><div class="chip">14</div></div>180 <div class="day"><div class="chip">15</div></div>181 <div class="day"><div class="chip">16</div></div>182 <div class="day"><div class="chip">17</div></div>183 <div class="day"><div class="chip">18</div></div>184 <div class="day"><div class="chip">19</div></div>185 186 <!-- fourth week -->187 <div class="day selected-blue"><div class="chip">20</div></div>188 <div class="day"><div class="chip">21</div></div>189 <div class="day"><div class="chip">22</div></div>190 <div class="day"><div class="chip">23</div></div>191 <div class="day"><div class="chip">24</div></div>192 <div class="day"><div class="chip">25</div></div>193 <div class="day"><div class="chip">26</div></div>194 195 <!-- fifth week -->196 <div class="day"><div class="chip">27</div></div>197 <div class="day"><div class="chip">28</div></div>198 <div class="day"><div class="chip">29</div></div>199 <div class="day"><div class="chip">30</div></div>200 <div class="day"><div class="chip">31</div></div>201 <div class="day empty"></div>202 <div class="day empty"></div>203 </div>204 205 <!-- Bottom sheet -->206 <div class="sheet">207 <!-- Row: Set Time -->208 <div class="sheet-row">209 <div class="row-left">210 <svg class="round-icon" viewBox="0 0 24 24">211 <circle cx="12" cy="12" r="10" fill="#3D5AFE"/>212 <path d="M12 6v6l4 2" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" fill="none"/>213 </svg>214 <div class="row-title primary">Set Time</div>215 </div>216 <div style="display:flex; align-items:center;">217 <div class="row-value">09:00AM</div>218 <svg class="action-x" viewBox="0 0 24 24">219 <path d="M6 6L18 18M18 6L6 18" stroke="#3D5AFE" stroke-width="2" stroke-linecap="round"/>220 </svg>221 </div>222 </div>223 224 <!-- Row: Set Reminder -->225 <div class="sheet-row">226 <div class="row-left">227 <svg class="round-icon" viewBox="0 0 24 24">228 <path d="M7 6l2-2m6 2l-2-2" stroke="#3D5AFE" stroke-width="2" fill="none" stroke-linecap="round"/>229 <path d="M12 7a6 6 0 016 6v3H6v-3a6 6 0 016-6z" fill="#3D5AFE"/>230 <rect x="10" y="18" width="4" height="2" fill="#3D5AFE"/>231 </svg>232 <div class="row-title primary">Set Reminder</div>233 </div>234 <div style="display:flex; align-items:center;">235 <div class="row-value">On time</div>236 <svg class="action-x" viewBox="0 0 24 24">237 <path d="M6 6L18 18M18 6L6 18" stroke="#3D5AFE" stroke-width="2" stroke-linecap="round"/>238 </svg>239 </div>240 </div>241 242 <!-- Row: Set Repeat -->243 <div class="sheet-row">244 <div class="row-left">245 <svg class="round-icon" viewBox="0 0 24 24">246 <path d="M6 8H4l3-3 3 3H8a6 6 0 016 6" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round"/>247 <path d="M18 16h2l-3 3-3-3h2a6 6 0 01-6-6" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round"/>248 </svg>249 <div class="row-title">Set Repeat</div>250 </div>251 <div style="display:flex; align-items:center;">252 <div class="row-value muted">Never</div>253 <svg class="chevron-right" viewBox="0 0 24 24">254 <path d="M9 6l6 6-6 6" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>255 </svg>256 </div>257 </div>258 </div>259 260 <!-- Gesture bar -->261 <div class="gesture"></div>262 263</div>264</body>265</html>