GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Calendar Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0f1418;13    color: #ffffff;14  }15 16  /* Status bar */17  .statusbar {18    height: 90px;19    background: #111a21;20    display: flex;21    align-items: center;22    justify-content: space-between;23    padding: 0 32px;24    box-sizing: border-box;25    color: #dfe7ef;26    font-weight: 600;27    letter-spacing: 1px;28  }29  .sb-right {30    display: flex;31    align-items: center;32    gap: 18px;33  }34  .sb-icon {35    width: 26px; height: 26px;36    opacity: 0.85;37  }38 39  /* App bar */40  .appbar {41    height: 130px;42    background: #121a21;43    display: flex;44    align-items: center;45    justify-content: space-between;46    padding: 0 36px;47    box-sizing: border-box;48    border-bottom: 1px solid #1c252d;49  }50  .left-controls {51    display: flex;52    align-items: center;53    gap: 28px;54  }55  .app-title {56    font-size: 56px;57    font-weight: 700;58  }59  .dropdown {60    display: inline-flex;61    align-items: center;62    gap: 10px;63  }64  .app-actions {65    display: flex;66    align-items: center;67    gap: 34px;68  }69  .icon-btn svg { fill: #c9d4dc; }70  .avatar {71    width: 70px; height: 70px; border-radius: 50%;72    background: #3b4650;73    display: flex; align-items: center; justify-content: center;74    font-weight: 700; color: #dfe7ef;75  }76 77  /* Content */78  .content {79    padding: 24px 40px 200px 40px;80    box-sizing: border-box;81  }82  .week-label {83    color: #8fa1ad;84    font-size: 30px;85    margin: 22px 0 14px 140px;86  }87  .day-row {88    display: flex;89    gap: 30px;90    margin: 30px 0;91    align-items: flex-start;92  }93  .date-col {94    width: 120px;95    text-align: center;96  }97  .day-label {98    color: #8fa1ad;99    font-size: 30px;100    margin-bottom: 10px;101  }102  .date-circle {103    width: 90px; height: 90px; border-radius: 50%;104    background: #89a7ff;105    display: flex; align-items: center; justify-content: center;106    color: #0b2138; font-size: 42px; font-weight: 800;107    margin: 0 auto;108  }109  .date-number {110    color: #cbd6df; font-size: 42px; font-weight: 700;111    margin-top: 26px;112  }113  .event-area {114    flex: 1;115  }116  .subtle-text {117    color: #cbd6df;118    font-size: 36px;119  }120 121  /* Event card (image placeholder) */122  .event-card {123    width: 880px;124    height: 250px;125    border-radius: 30px;126    overflow: hidden;127    position: relative;128    background: #E0E0E0;129    border: 1px solid #BDBDBD;130    display: flex; align-items: center; justify-content: center;131    color: #757575;132  }133  .event-card .overlay {134    position: absolute; left: 0; right: 0; bottom: 0;135    padding: 24px 28px;136    background: rgba(18, 26, 33, 0.35);137    color: #ffffff;138  }139  .event-title {140    font-size: 42px; font-weight: 800; margin-bottom: 8px;141  }142  .event-time {143    font-size: 34px; opacity: 0.95;144  }145 146  /* Holiday pill */147  .pill {148    width: 880px;149    min-height: 120px;150    border-radius: 36px;151    background: #5c9f94;152    display: flex; align-items: center;153    padding: 28px 36px;154    box-sizing: border-box;155    font-size: 44px; font-weight: 800;156    color: #ffffff;157  }158 159  /* September banner */160  .month-banner {161    margin-top: 40px;162    height: 420px;163    border-radius: 20px;164    background: #f3e3be;165    color: #2a2a2a;166    position: relative;167    overflow: hidden;168  }169  .month-banner h2 {170    margin: 40px;171    font-size: 58px;172    font-weight: 800;173  }174  .banner-illustration {175    position: absolute; left: 40px; right: 40px; bottom: 24px; height: 200px;176    background: rgba(0,0,0,0.06);177    border: 1px dashed rgba(0,0,0,0.15);178    display: flex; align-items: center; justify-content: center;179    color: rgba(20,20,20,0.6);180    font-weight: 600;181  }182 183  /* Floating action button */184  .fab {185    position: absolute;186    right: 56px;187    bottom: 180px;188    width: 160px; height: 160px;189    border-radius: 32px;190    background: #2b3a42;191    box-shadow: 0 10px 24px rgba(0,0,0,0.45);192    display: flex; align-items: center; justify-content: center;193  }194  .fab-plus {195    width: 82px; height: 82px;196    border-radius: 50%;197    background: #3b4d55;198    display: flex; align-items: center; justify-content: center;199    color: #ffffff; font-size: 90px; line-height: 70px;200  }201 202  /* Small helpers for compact dates where circle isn't used */203  .date-col.small .date-number { margin-top: 12px; }204</style>205</head>206<body>207<div id="render-target">208 209  <!-- Status bar -->210  <div class="statusbar">211    <div>2:58</div>212    <div class="sb-right">213      <!-- simple placeholder icons -->214      <svg class="sb-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#c9d4dc"/></svg>215      <svg class="sb-icon" viewBox="0 0 24 24"><rect x="3" y="8" width="18" height="8" fill="#c9d4dc"/></svg>216      <svg class="sb-icon" viewBox="0 0 24 24"><path d="M3 18h18v2H3zM3 12h12v2H3zM3 6h6v2H3z" fill="#c9d4dc"/></svg>217      <svg class="sb-icon" viewBox="0 0 24 24"><path d="M4 18h16l-8-12z" fill="#c9d4dc"/></svg>218      <svg class="sb-icon" viewBox="0 0 24 24"><rect x="5" y="4" width="14" height="16" rx="2" fill="#c9d4dc"/></svg>219    </div>220  </div>221 222  <!-- App bar -->223  <div class="appbar">224    <div class="left-controls">225      <div class="icon-btn">226        <svg width="42" height="42" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>227      </div>228      <div class="dropdown">229        <div class="app-title">August</div>230        <svg width="24" height="24" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z" fill="#c9d4dc"/></svg>231      </div>232    </div>233    <div class="app-actions">234      <div class="icon-btn">235        <svg width="42" height="42" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4.5-4.5" stroke="#c9d4dc" stroke-width="2" stroke-linecap="round"/></svg>236      </div>237      <div class="icon-btn">238        <svg width="42" height="42" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M7 5v-2M17 5v-2" stroke="#c9d4dc" stroke-width="2" stroke-linecap="round"/></svg>239      </div>240      <div class="avatar">C</div>241    </div>242  </div>243 244  <!-- Main content -->245  <div class="content">246 247    <!-- Sat 5 -->248    <div class="day-row">249      <div class="date-col">250        <div class="day-label">Sat</div>251        <div class="date-circle">5</div>252      </div>253      <div class="event-area">254        <div class="subtle-text">Nothing planned. Tap to create.</div>255      </div>256    </div>257 258    <!-- Week label -->259    <div class="week-label">Aug 6 – 12</div>260 261    <!-- Mon 7 with card -->262    <div class="day-row">263      <div class="date-col small">264        <div class="day-label">Mon</div>265        <div class="date-number">7</div>266      </div>267      <div class="event-area">268        <div class="event-card">269          <div>[IMG: Abstract yoga mats banner]</div>270          <div class="overlay">271            <div class="event-title">FITNESS WITH YOGA</div>272            <div class="event-time">12:00 – 12:30 PM</div>273          </div>274        </div>275      </div>276    </div>277 278    <!-- Week label -->279    <div class="week-label">Aug 13 – 19</div>280 281    <!-- Tue 15 holiday -->282    <div class="day-row">283      <div class="date-col small">284        <div class="day-label">Tue</div>285        <div class="date-number">15</div>286      </div>287      <div class="event-area">288        <div class="pill">Independence Day</div>289      </div>290    </div>291 292    <!-- Wed 16 holiday -->293    <div class="day-row">294      <div class="date-col small">295        <div class="day-label">Wed</div>296        <div class="date-number">16</div>297      </div>298      <div class="event-area">299        <div class="pill">Parsi New Year</div>300      </div>301    </div>302 303    <!-- Week label -->304    <div class="week-label">Aug 20 – 26</div>305 306    <!-- Sun 20 holiday -->307    <div class="day-row">308      <div class="date-col small">309        <div class="day-label">Sun</div>310        <div class="date-number">20</div>311      </div>312      <div class="event-area">313        <div class="pill">Vinayaka Chathurthi</div>314      </div>315    </div>316 317    <!-- Week label -->318    <div class="week-label">Aug 27 – Sep 2</div>319 320    <!-- Tue 29 holiday -->321    <div class="day-row">322      <div class="date-col small">323        <div class="day-label">Tue</div>324        <div class="date-number">29</div>325      </div>326      <div class="event-area">327        <div class="pill">Onam</div>328      </div>329    </div>330 331    <!-- Wed 30 holiday -->332    <div class="day-row">333      <div class="date-col small">334        <div class="day-label">Wed</div>335        <div class="date-number">30</div>336      </div>337      <div class="event-area">338        <div class="pill">Raksha Bandhan (Rakhi)</div>339      </div>340    </div>341 342    <!-- September banner -->343    <div class="month-banner">344      <h2>September 2023</h2>345      <div class="banner-illustration">[IMG: Soft autumn illustration area]</div>346    </div>347 348  </div>349 350  <!-- Floating action button -->351  <div class="fab">352    <div class="fab-plus">+</div>353  </div>354 355</div>356</body>357</html>