GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Calendar UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Helvetica Neue", Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #111314;12    color: #FFF;13  }14 15  /* Status bar */16  .status-bar {17    height: 90px;18    background: #1a1d1b;19    display: flex;20    align-items: center;21    padding: 0 40px;22    box-sizing: border-box;23    font-weight: 600;24  }25  .status-left { display: flex; align-items: center; gap: 24px; }26  .status-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }27  .status-text { font-size: 32px; color: #EDEDED; }28 29  /* Top app bar */30  .app-bar {31    height: 140px;32    background: #1a1d1b;33    display: flex;34    align-items: center;35    padding: 0 36px;36    box-sizing: border-box;37    border-bottom: 1px solid #222;38  }39  .menu-btn { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }40  .app-title {41    font-size: 52px; font-weight: 600; margin-left: 20px; display: flex; align-items: center; gap: 14px;42  }43  .app-actions { margin-left: auto; display: flex; align-items: center; gap: 40px; }44  .avatar {45    width: 70px; height: 70px; border-radius: 50%;46    background: #0e5b4d; display: flex; align-items: center; justify-content: center;47    font-weight: 700; font-size: 34px;48    border: 2px solid #0a3f35;49  }50 51  /* Content area */52  .content { background: #0E0F10; }53  .section { padding: 24px 36px; }54 55  /* Day row & event cards */56  .day-row {57    display: grid;58    grid-template-columns: 140px 1fr;59    gap: 24px;60    align-items: start;61    padding: 22px 36px;62  }63  .date-col { text-align: left; }64  .date-col .dow { font-size: 28px; color: #A1A4A7; }65  .date-col .num { font-size: 54px; font-weight: 700; color: #EDEDED; margin-top: 10px; }66 67  .event-card {68    background: #5AA5D6;69    border-radius: 32px;70    padding: 28px 36px;71    box-sizing: border-box;72  }73  .event-card.green { background: #3AA394; }74  .event-title { font-size: 38px; font-weight: 700; }75  .event-sub { font-size: 28px; color: #E7F2FF; margin-top: 8px; }76 77  .week-label {78    font-size: 28px; color: #A1A4A7; letter-spacing: 0.6px;79    padding: 16px 36px; margin-top: 10px;80  }81 82  /* Month banner */83  .month-banner { margin-top: 20px; }84  .month-heading {85    font-size: 58px; font-weight: 700; color: #000; margin: 24px 36px;86  }87  .illustration {88    margin: 0 0 30px 0;89    width: 100%; height: 380px;90    background: #E0E0E0; border: 1px solid #BDBDBD;91    display: flex; align-items: center; justify-content: center;92    color: #757575; font-size: 34px; font-weight: 600;93  }94 95  /* Floating action button */96  .fab {97    position: absolute; right: 36px; bottom: 360px;98    width: 150px; height: 150px; border-radius: 40px;99    background: #2D4F44;100    box-shadow: 0 8px 18px rgba(0,0,0,0.35);101    display: flex; align-items: center; justify-content: center;102  }103 104  /* Bottom handle */105  .bottom-handle {106    position: absolute; left: 50%; transform: translateX(-50%);107    bottom: 100px; width: 300px; height: 16px; border-radius: 10px;108    background: #E9E9E9; opacity: 0.9;109  }110 111  /* Simple icon styles */112  svg { display: block; }113  .icon { width: 44px; height: 44px; }114  .icon-lg { width: 56px; height: 56px; }115 116</style>117</head>118<body>119<div id="render-target">120 121  <!-- Status bar -->122  <div class="status-bar">123    <div class="status-left">124      <div class="status-text">11:49</div>125      <!-- Simple circular icon placeholders -->126      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#EDEDED"/></svg>127      <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2" fill="#EDEDED"/></svg>128    </div>129    <div class="status-right">130      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#EDEDED" stroke-width="2"/></svg>131      <svg class="icon" viewBox="0 0 24 24"><path d="M3 12h18" stroke="#EDEDED" stroke-width="2"/><path d="M12 3v18" stroke="#EDEDED" stroke-width="2"/></svg>132      <div class="status-text">100%</div>133    </div>134  </div>135 136  <!-- App bar -->137  <div class="app-bar">138    <div class="menu-btn">139      <!-- Hamburger -->140      <svg class="icon-lg" viewBox="0 0 24 24">141        <path d="M3 6h18M3 12h18M3 18h18" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>142      </svg>143    </div>144    <div class="app-title">145      <span>September</span>146      <!-- Dropdown arrow -->147      <svg class="icon" viewBox="0 0 24 24">148        <path d="M6 9l6 6 6-6" stroke="#EDEDED" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>149      </svg>150    </div>151    <div class="app-actions">152      <!-- Search -->153      <svg class="icon-lg" viewBox="0 0 24 24">154        <circle cx="10" cy="10" r="6" stroke="#EDEDED" stroke-width="2" fill="none"/>155        <path d="M14.5 14.5L21 21" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>156      </svg>157      <!-- Calendar icon -->158      <svg class="icon-lg" viewBox="0 0 24 24">159        <rect x="3" y="5" width="18" height="16" rx="2" fill="none" stroke="#EDEDED" stroke-width="2"/>160        <path d="M7 3v4M17 3v4M3 10h18" stroke="#EDEDED" stroke-width="2"/>161      </svg>162      <div class="avatar">K</div>163    </div>164  </div>165 166  <!-- Content -->167  <div class="content">168 169    <!-- Fri 29 -->170    <div class="day-row">171      <div class="date-col">172        <div class="dow">Fri</div>173        <div class="num">29</div>174      </div>175      <div class="event-card">176        <div class="event-title">Berlin Trip</div>177        <div class="event-sub">12 – 1 PM</div>178      </div>179    </div>180 181    <!-- Sat 30 -->182    <div class="day-row">183      <div class="date-col">184        <div class="dow">Sat</div>185        <div class="num">30</div>186      </div>187      <div class="event-card">188        <div class="event-title">Book events</div>189        <div class="event-sub">12 – 1 AM</div>190      </div>191    </div>192 193    <!-- Month banner October -->194    <div class="month-banner">195      <div class="month-heading" style="color:#111;">October 2023</div>196      <div class="illustration">[IMG: Autumn harvest illustration]</div>197    </div>198 199    <!-- Week label -->200    <div class="week-label">Oct 1 – 7</div>201 202    <!-- Sun 1 -->203    <div class="day-row">204      <div class="date-col">205        <div class="dow">Sun</div>206        <div class="num">1</div>207      </div>208      <div class="event-card">209        <div class="event-title">11:30 Lugano, Cassarina → Bogno, Ponte del M…</div>210        <div class="event-sub">2:56 – 3:58 PM at Parco Florida</div>211      </div>212    </div>213 214    <!-- Mon 2 -->215    <div class="day-row">216      <div class="date-col">217        <div class="dow">Mon</div>218        <div class="num">2</div>219      </div>220      <div class="event-card green">221        <div class="event-title">Mahatma Gandhi Jayanti</div>222      </div>223    </div>224 225    <!-- Week labels -->226    <div class="week-label">Oct 8 – 14</div>227    <div class="week-label" style="margin-top: 10px;">Oct 15 – 21</div>228 229    <!-- Sun 15 -->230    <div class="day-row">231      <div class="date-col">232        <div class="dow">Sun</div>233        <div class="num">15</div>234      </div>235      <div class="event-card green">236        <div class="event-title">First Day of Sharad Navratri</div>237      </div>238    </div>239 240    <!-- Fri 20 -->241    <div class="day-row">242      <div class="date-col">243        <div class="dow">Fri</div>244        <div class="num">20</div>245      </div>246      <div class="event-card green">247        <div class="event-title">First Day of Durga Puja Festivities</div>248      </div>249    </div>250 251    <!-- Sat 21 -->252    <div class="day-row" style="padding-bottom: 160px;">253      <div class="date-col">254        <div class="dow">Sat</div>255        <div class="num">21</div>256      </div>257      <div class="event-card green">258        <div class="event-title">Maha Saptami</div>259      </div>260    </div>261 262  </div>263 264  <!-- Floating action button -->265  <div class="fab">266    <svg viewBox="0 0 24 24" width="90" height="90">267      <path d="M12 5v14M5 12h14" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"/>268    </svg>269  </div>270 271  <!-- Bottom handle -->272  <div class="bottom-handle"></div>273 274</div>275</body>276</html>