GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, height=2400, initial-scale=1.0">6<title>Calendar List Mock</title>7<style>8  html, body { margin: 0; padding: 0; background: transparent; }9  * { box-sizing: border-box; font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif; }10 11  #render-target {12    position: relative;13    overflow: hidden;14    width: 1080px;15    height: 2400px;16    background: #f2f4f6;17    color: #263238;18  }19 20  /* Status bar */21  .status-bar {22    height: 110px;23    background: #e3e6e4;24    padding: 0 36px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #3b4447;29    font-weight: 500;30    letter-spacing: 0.5px;31  }32  .status-right {33    display: flex;34    align-items: center;35    gap: 28px;36  }37  .icon { width: 44px; height: 44px; fill: #4a5156; }38 39  /* App bar */40  .app-bar {41    height: 150px;42    background: #e3e6e4;43    display: flex;44    align-items: center;45    padding: 0 36px;46    gap: 28px;47    border-bottom-left-radius: 26px;48    border-bottom-right-radius: 26px;49  }50  .title {51    font-size: 56px;52    font-weight: 500;53    color: #2f3a3f;54    letter-spacing: 0.2px;55  }56  .spacer { flex: 1; }57  .circle-avatar {58    width: 80px; height: 80px; border-radius: 50%;59    background: #5aa7ab; color: #fff;60    display: flex; align-items: center; justify-content: center;61    font-weight: 700; font-size: 40px;62  }63 64  /* Content area */65  .content {66    padding: 30px 36px 140px 36px;67  }68  .day-row {69    display: flex;70    gap: 28px;71    align-items: flex-start;72    margin-bottom: 28px;73  }74  .left-date {75    width: 150px;76    text-align: center;77    color: #6c7a80;78  }79  .left-date .dow {80    font-size: 30px;81    margin-bottom: 10px;82    font-weight: 600;83  }84  .left-date .circle-day {85    width: 96px; height: 96px; line-height: 96px;86    margin: 0 auto;87    border-radius: 50%;88    background: #6a7d39; color: #fff;89    font-weight: 800; font-size: 44px;90  }91  .left-date .num {92    font-size: 52px; font-weight: 700; color: #37474f;93  }94 95  .right-col { flex: 1; }96 97  .hint {98    font-size: 40px;99    color: #6a747a;100    margin-top: 26px;101  }102 103  .week-label {104    color: #8b969b;105    font-size: 32px;106    margin: 32px 0 20px 178px; /* aligns with right column */107  }108 109  .event-pill {110    background: #6ea99e;111    color: #fff;112    padding: 30px 36px;113    border-radius: 40px;114    font-size: 40px;115    font-weight: 700;116    width: 770px;117  }118  .event-blue {119    background: #7ea6df;120    color: #0b2b3b;121    font-weight: 800;122  }123  .event-blue .sub {124    display: block;125    font-weight: 600;126    color: #173245;127    margin-top: 6px;128    font-size: 36px;129  }130 131  .image-card {132    width: 770px;133    height: 280px;134    background: #E0E0E0;135    border: 1px solid #BDBDBD;136    border-radius: 36px;137    position: relative;138    overflow: hidden;139    box-shadow: 0 2px 0 rgba(0,0,0,0.05) inset;140  }141  .img-label {142    position: absolute;143    top: 12px; left: 16px;144    font-size: 26px; color: #757575;145    background: rgba(255,255,255,0.8);146    padding: 6px 10px; border-radius: 8px;147  }148  .img-event-text {149    position: absolute;150    left: 36px; bottom: 26px;151    color: #ffffff;152    font-size: 44px;153    font-weight: 700;154    text-shadow: 0 2px 4px rgba(0,0,0,0.25);155  }156 157  .month-hero {158    width: 100%;159    height: 360px;160    border-radius: 26px;161    margin: 24px 0 20px 0;162    background: #E0E0E0;163    border: 1px solid #BDBDBD;164    position: relative;165    overflow: hidden;166  }167  .month-hero .hero-label {168    position: absolute; left: 30px; top: 24px;169    font-size: 64px; font-weight: 700; color: #2f3a3f;170  }171  .month-hero .hero-img-text {172    position: absolute; right: 24px; bottom: 16px;173    color: #757575; font-size: 30px;174    background: rgba(255,255,255,0.9);175    padding: 6px 10px; border-radius: 10px;176  }177 178  /* FAB */179  .fab {180    position: absolute;181    right: 44px;182    bottom: 400px;183    width: 148px; height: 148px;184    background: #f6d6e8;185    border-radius: 32px;186    box-shadow: 0 10px 18px rgba(0,0,0,0.18);187    display: flex; align-items: center; justify-content: center;188  }189  .fab span {190    font-size: 80px; color: #2e2e2e; line-height: 0; font-weight: 400;191  }192 193  /* Home indicator */194  .home-indicator {195    position: absolute;196    left: 50%;197    transform: translateX(-50%);198    bottom: 70px;199    width: 380px; height: 12px;200    border-radius: 8px;201    background: #a9b0b4;202  }203 204  /* Small helpers */205  .icon-btn { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }206  .calendar-icon {207    width: 64px; height: 64px; border-radius: 10px; border: 2px solid #4a5156;208    position: relative; display: inline-flex; align-items: center; justify-content: center;209  }210  .calendar-icon::after {211    content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 12px; background: #4a5156;212  }213  .calendar-dot {214    width: 12px; height: 12px; background: #66a67a; border-radius: 50%;215  }216</style>217</head>218<body>219<div id="render-target">220 221  <!-- Status Bar -->222  <div class="status-bar">223    <div class="time">5:11</div>224    <div class="status-right">225      <!-- Simple signal/wifi -->226      <svg class="icon" viewBox="0 0 24 24"><path d="M2 9a16 16 0 0 1 20 0l-2 2a13 13 0 0 0-16 0L2 9zm4 4a10 10 0 0 1 12 0l-2 2a7 7 0 0 0-8 0l-2-2zm6 6 3 3h-6l3-3z"/></svg>227      <!-- Battery -->228      <svg class="icon" viewBox="0 0 24 24"><path d="M16 7h2a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2v2H6a2 2 0 0 1-2-2V7h12z"/></svg>229    </div>230  </div>231 232  <!-- App Bar -->233  <div class="app-bar">234    <div class="icon-btn">235      <svg class="icon" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>236    </div>237    <div class="title">September238      <svg class="icon" viewBox="0 0 24 24" style="width:38px;height:38px;vertical-align:middle;fill:#4a5156;margin-left:8px;"><path d="M7 9l5 6 5-6z"/></svg>239    </div>240    <div class="spacer"></div>241    <div class="icon-btn">242      <svg class="icon" viewBox="0 0 24 24"><path d="M10 3a7 7 0 1 1 0 14 7 7 0 0 1 0-14zm9 16-5-5"/></svg>243    </div>244    <div class="icon-btn">245      <div class="calendar-icon">246        <div class="calendar-dot"></div>247      </div>248    </div>249    <div class="circle-avatar">N</div>250  </div>251 252  <!-- Content -->253  <div class="content">254 255    <!-- Sat 23 -->256    <div class="day-row">257      <div class="left-date">258        <div class="dow">Sat</div>259        <div class="circle-day">23</div>260      </div>261      <div class="right-col">262        <div class="hint">Nothing planned. Tap to create.</div>263      </div>264    </div>265 266    <div class="week-label">Sep 24 – 30</div>267 268    <!-- Thu 28 -->269    <div class="day-row">270      <div class="left-date">271        <div class="dow">Thu</div>272        <div class="num">28</div>273      </div>274      <div class="right-col">275        <div class="event-pill">Milad un-Nabi/Id-e-Milad</div>276      </div>277    </div>278 279    <!-- Sat 30 -->280    <div class="day-row" style="margin-top: 10px;">281      <div class="left-date">282        <div class="dow">Sat</div>283        <div class="num">30</div>284      </div>285      <div class="right-col">286        <div class="image-card">287          <div class="img-label">[IMG: Bicycle with hills illustration]</div>288          <div class="img-event-text">cycling event in my neighborhood</div>289        </div>290        <div style="height: 20px;"></div>291        <div class="event-pill event-blue">292          EMPLOYMENT FAIR293          <span class="sub">1 – 2 PM</span>294        </div>295      </div>296    </div>297 298    <!-- October hero -->299    <div class="month-hero">300      <div class="hero-label">October 2023</div>301      <div class="hero-img-text">[IMG: Autumn field illustration]</div>302    </div>303 304    <div class="week-label">Oct 1 – 7</div>305 306    <!-- Mon 2 -->307    <div class="day-row">308      <div class="left-date">309        <div class="dow">Mon</div>310        <div class="num">2</div>311      </div>312      <div class="right-col">313        <div class="event-pill">Mahatma Gandhi Jayanti</div>314      </div>315    </div>316 317    <div class="week-label">Oct 8 – 14</div>318    <div class="week-label">Oct 15 – 21</div>319 320    <!-- Sun 15 -->321    <div class="day-row">322      <div class="left-date">323        <div class="dow">Sun</div>324        <div class="num">15</div>325      </div>326      <div class="right-col">327        <div class="event-pill" style="padding-right:170px;">First Day of Sharad Navratri</div>328      </div>329    </div>330 331  </div>332 333  <!-- Floating Action Button -->334  <div class="fab"><span>+</span></div>335 336  <!-- Home indicator -->337  <div class="home-indicator"></div>338</div>339</body>340</html>