GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Calendar UI</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: Arial, Helvetica, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #1f2127; /* dark app background */18    color: #DDE3EA;19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 90px;28    background: #24262d;29    color: #cfd5dc;30    display: flex;31    align-items: center;32    padding: 0 36px;33    box-sizing: border-box;34    letter-spacing: 0.5px;35    font-size: 34px;36  }37  .status-right {38    margin-left: auto;39    display: flex;40    align-items: center;41    gap: 22px;42  }43  .icon-mini {44    width: 36px;45    height: 24px;46    border-radius: 4px;47    background: #3a3d45;48  }49 50  /* App bar */51  .app-bar {52    position: absolute;53    top: 90px;54    left: 0;55    width: 1080px;56    height: 160px;57    background: #23252b;58    display: flex;59    align-items: center;60    padding: 0 40px;61    box-sizing: border-box;62    border-bottom: 1px solid #2f3239;63  }64  .hamburger {65    width: 64px;66    height: 64px;67    margin-right: 28px;68  }69  .title {70    font-size: 60px;71    font-weight: 600;72    display: flex;73    align-items: center;74    gap: 12px;75  }76  .chevron {77    width: 30px;78    height: 30px;79    fill: #B7BFC8;80  }81  .app-actions {82    margin-left: auto;83    display: flex;84    align-items: center;85    gap: 40px;86  }87  .app-icon {88    width: 64px;89    height: 64px;90  }91  .avatar {92    width: 84px;93    height: 84px;94    border-radius: 50%;95    background: #58B7BD;96    display: flex;97    align-items: center;98    justify-content: center;99    color: #ffffff;100    font-weight: 700;101    font-size: 40px;102  }103 104  /* Timeline */105  .timeline {106    position: absolute;107    top: 250px; /* status + app bar */108    left: 0;109    width: 1080px;110    height: 2150px;111    box-sizing: border-box;112    background: #1f2127;113  }114 115  .day-column-line {116    position: absolute;117    top: 0;118    left: 120px;119    width: 2px;120    height: 2150px;121    background: #2e3138;122    opacity: 0.9;123  }124 125  .day-label {126    position: absolute;127    top: 10px;128    left: 36px;129    color: #cfd5dc;130    text-align: center;131    width: 120px;132    font-size: 38px;133    line-height: 1.1;134  }135  .day-label .date {136    display: block;137    font-size: 60px;138    font-weight: 700;139    margin-top: 10px;140  }141 142  .hour-row {143    position: relative;144    height: 150px;145    border-top: 1px solid #2e3138;146    box-sizing: border-box;147  }148  .hour-label {149    position: absolute;150    top: -16px;151    left: 24px;152    width: 120px;153    color: #b8bec6;154    font-size: 36px;155  }156  .hour-line {157    position: absolute;158    left: 120px;159    right: 0;160    height: 1px;161    background: #2e3138;162    top: 0;163  }164 165  /* Floating action button */166  .fab {167    position: absolute;168    right: 46px;169    bottom: 120px;170    width: 170px;171    height: 170px;172    background: #3b3f47;173    border-radius: 40px;174    box-shadow: 0 10px 20px rgba(0,0,0,0.35);175    display: flex;176    align-items: center;177    justify-content: center;178  }179  .fab svg {180    width: 86px;181    height: 86px;182    fill: #cfd5dc;183  }184</style>185</head>186<body>187<div id="render-target">188 189  <!-- Status bar -->190  <div class="status-bar">191    <div>6:53</div>192    <div class="status-right">193      <div class="icon-mini"></div>194      <div class="icon-mini"></div>195      <div class="icon-mini"></div>196    </div>197  </div>198 199  <!-- App bar -->200  <div class="app-bar">201    <svg class="hamburger" viewBox="0 0 64 64">202      <rect x="6" y="10" width="52" height="8" fill="#B7BFC8"></rect>203      <rect x="6" y="28" width="52" height="8" fill="#B7BFC8"></rect>204      <rect x="6" y="46" width="52" height="8" fill="#B7BFC8"></rect>205    </svg>206 207    <div class="title">September208      <svg class="chevron" viewBox="0 0 24 24">209        <path d="M6 9l6 6 6-6" />210      </svg>211    </div>212 213    <div class="app-actions">214      <svg class="app-icon" viewBox="0 0 24 24">215        <circle cx="10" cy="10" r="3" fill="#B7BFC8"></circle>216        <rect x="2" y="2" width="20" height="20" rx="4" ry="4" fill="none" stroke="#B7BFC8" stroke-width="2"></rect>217      </svg>218      <svg class="app-icon" viewBox="0 0 24 24">219        <rect x="3" y="4" width="18" height="16" rx="2" ry="2" fill="none" stroke="#B7BFC8" stroke-width="2"></rect>220        <rect x="3" y="4" width="18" height="3" fill="#B7BFC8"></rect>221        <rect x="7" y="10" width="4" height="4" fill="#B7BFC8"></rect>222        <rect x="13" y="10" width="4" height="4" fill="#B7BFC8"></rect>223      </svg>224      <div class="avatar">V</div>225    </div>226  </div>227 228  <!-- Timeline -->229  <div class="timeline">230    <div class="day-column-line"></div>231    <div class="day-label">Fri <span class="date">29</span></div>232 233    <div class="hour-row">234      <div class="hour-line"></div>235      <div class="hour-label">8 AM</div>236    </div>237    <div class="hour-row">238      <div class="hour-line"></div>239      <div class="hour-label">9 AM</div>240    </div>241    <div class="hour-row">242      <div class="hour-line"></div>243      <div class="hour-label">10 AM</div>244    </div>245    <div class="hour-row">246      <div class="hour-line"></div>247      <div class="hour-label">11 AM</div>248    </div>249    <div class="hour-row">250      <div class="hour-line"></div>251      <div class="hour-label">12 PM</div>252    </div>253    <div class="hour-row">254      <div class="hour-line"></div>255      <div class="hour-label">1 PM</div>256    </div>257    <div class="hour-row">258      <div class="hour-line"></div>259      <div class="hour-label">2 PM</div>260    </div>261    <div class="hour-row">262      <div class="hour-line"></div>263      <div class="hour-label">3 PM</div>264    </div>265    <div class="hour-row">266      <div class="hour-line"></div>267      <div class="hour-label">4 PM</div>268    </div>269    <div class="hour-row">270      <div class="hour-line"></div>271      <div class="hour-label">5 PM</div>272    </div>273    <div class="hour-row">274      <div class="hour-line"></div>275      <div class="hour-label">6 PM</div>276    </div>277    <div class="hour-row">278      <div class="hour-line"></div>279      <div class="hour-label">7 PM</div>280    </div>281  </div>282 283  <!-- Floating Add Button -->284  <div class="fab">285    <svg viewBox="0 0 100 100">286      <rect x="44" y="18" width="12" height="64"></rect>287      <rect x="18" y="44" width="64" height="12"></rect>288    </svg>289  </div>290 291</div>292</body>293</html>