GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Calendar Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #F4F6F8;14    color: #2F3A44;15  }16 17  /* Status bar */18  .status-bar {19    height: 88px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #5f6b77;25    font-size: 34px;26    letter-spacing: 0.5px;27  }28  .status-icons {29    display: flex;30    align-items: center;31    gap: 20px;32  }33  .icon { width: 44px; height: 44px; fill: #5f6b77; }34 35  /* App bar */36  .app-bar {37    height: 136px;38    padding: 0 32px;39    display: flex;40    align-items: center;41    gap: 24px;42  }43  .hamburger { width: 60px; height: 60px; fill: #39434d; opacity: 0.9; }44  .month-title {45    font-size: 64px;46    font-weight: 500;47    color: #2b333a;48    flex: 1;49  }50  .app-actions {51    display: flex;52    align-items: center;53    gap: 28px;54  }55  .avatar {56    width: 80px;57    height: 80px;58    background: #6BB1B7;59    color: #ffffff;60    border-radius: 50%;61    display: flex; align-items: center; justify-content: center;62    font-weight: 700;63    font-size: 40px;64  }65 66  /* Weekday header */67  .weekdays {68    display: grid;69    grid-template-columns: repeat(7, 1fr);70    height: 88px;71    padding: 0 8px;72    align-items: center;73    color: #6d7782;74    font-size: 28px;75    border-top: 1px solid #E1E6EF;76    border-bottom: 1px solid #E1E6EF;77  }78  .weekdays div {79    text-align: center;80  }81  .weekdays div:last-child { color: #778B48; }82 83  /* Calendar grid */84  .grid {85    display: grid;86    grid-template-columns: repeat(7, 1fr);87    grid-template-rows: repeat(6, 340px);88    position: relative;89  }90  .day {91    position: relative;92    border-right: 1px solid #E1E6EF;93    border-bottom: 1px solid #E1E6EF;94    padding: 18px 18px 0 18px;95  }96  .day:nth-child(7n) { border-right: none; }97  .num {98    position: absolute;99    top: 18px;100    right: 18px;101    font-size: 40px;102    color: #3b454f;103  }104  .num.faded { color: #9AA5B1; }105  .num.dot {106    right: 12px;107    top: 12px;108  }109  .num-highlight {110    position: absolute;111    top: 12px;112    right: 12px;113    width: 64px;114    height: 64px;115    background: #6B7D35;116    color: #fff;117    border-radius: 50%;118    display: flex; align-items: center; justify-content: center;119    font-size: 36px;120    font-weight: 600;121  }122 123  /* Event pills */124  .event {125    display: inline-block;126    background: #93B8AE;127    color: #ffffff;128    padding: 14px 22px;129    border-radius: 18px;130    font-size: 28px;131    line-height: 1;132    margin-top: 68px;133  }134  .event + .event { margin-top: 10px; }135  .event.blue {136    background: #6F97D7;137  }138 139  /* Floating action button */140  .fab {141    position: absolute;142    right: 64px;143    bottom: 300px;144    width: 170px;145    height: 170px;146    background: #F5CFE3;147    border-radius: 44px;148    box-shadow: 0 18px 40px rgba(0,0,0,0.18), 0 8px 18px rgba(0,0,0,0.12);149    display: flex; align-items: center; justify-content: center;150  }151  .fab .plus {152    width: 72px; height: 72px; fill: #1C1C1C;153  }154 155  /* Gesture bar */156  .gesture {157    position: absolute;158    bottom: 32px;159    left: 50%;160    transform: translateX(-50%);161    width: 420px;162    height: 14px;163    background: #A5AEB8;164    border-radius: 10px;165    opacity: 0.85;166  }167</style>168</head>169<body>170<div id="render-target">171 172  <!-- Status bar -->173  <div class="status-bar">174    <div>5:32</div>175    <div class="status-icons">176      <!-- Network (simple) -->177      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">178        <path d="M2 18h2v2H2v-2zm4-4h2v6H6v-6zm4-4h2v10h-2V10zm4-4h2v14h-2V6zm4-2h2v16h-2V4z"/>179      </svg>180      <!-- Battery -->181      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">182        <rect x="2" y="7" width="18" height="10" rx="2" ry="2"></rect>183        <rect x="21" y="10" width="2" height="4"></rect>184        <rect x="4" y="9" width="14" height="6" fill="#F4F6F8"></rect>185      </svg>186    </div>187  </div>188 189  <!-- App bar -->190  <div class="app-bar">191    <svg class="hamburger" viewBox="0 0 24 24" aria-hidden="true">192      <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/>193    </svg>194    <div class="month-title">September</div>195    <div class="app-actions">196      <!-- Search -->197      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">198        <path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 14 15.5l.27.28v.79L20 21l1-1-5.5-5.5zM6.5 11A4.5 4.5 0 1 1 11 15.5 4.5 4.5 0 0 1 6.5 11z"/>199      </svg>200      <!-- Calendar icon -->201      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">202        <path d="M7 2h2v2h6V2h2v2h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h3V2zm14 8H3v10a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V10z"/>203      </svg>204      <div class="avatar">N</div>205    </div>206  </div>207 208  <!-- Weekday header -->209  <div class="weekdays">210    <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>211  </div>212 213  <!-- Calendar grid (September starting on Friday) -->214  <div class="grid">215    <!-- Row 1: Aug 27-31, Sep 1-2 -->216    <div class="day"><div class="num faded">27</div></div>217    <div class="day"><div class="num faded">28</div></div>218    <div class="day">219      <div class="num faded">29</div>220      <div class="event">Onam</div>221    </div>222    <div class="day">223      <div class="num faded">30</div>224      <div class="event">Raksha Bar</div>225    </div>226    <div class="day"><div class="num faded">31</div></div>227    <div class="day"><div class="num">1</div></div>228    <div class="day"><div class="num">2</div></div>229 230    <!-- Row 2: Sep 3-9 -->231    <div class="day"><div class="num">3</div></div>232    <div class="day"><div class="num">4</div></div>233    <div class="day"><div class="num">5</div></div>234    <div class="day">235      <div class="num">6</div>236      <div class="event">Janmashta</div>237    </div>238    <div class="day">239      <div class="num">7</div>240      <div class="event">Janmashta</div>241    </div>242    <div class="day"><div class="num">8</div></div>243    <div class="day"><div class="num">9</div></div>244 245    <!-- Row 3: Sep 10-16 -->246    <div class="day"><div class="num">10</div></div>247    <div class="day"><div class="num">11</div></div>248    <div class="day"><div class="num">12</div></div>249    <div class="day"><div class="num">13</div></div>250    <div class="day"><div class="num">14</div></div>251    <div class="day"><div class="num">15</div></div>252    <div class="day"><div class="num">16</div></div>253 254    <!-- Row 4: Sep 17-23 -->255    <div class="day"><div class="num">17</div></div>256    <div class="day"><div class="num">18</div></div>257    <div class="day">258      <div class="num">19</div>259      <div class="event">Ganesh Ch</div>260    </div>261    <div class="day"><div class="num">20</div></div>262    <div class="day"><div class="num">21</div></div>263    <div class="day"><div class="num">22</div></div>264    <div class="day">265      <div class="num-highlight">23</div>266    </div>267 268    <!-- Row 5: Sep 24-30 -->269    <div class="day"><div class="num">24</div></div>270    <div class="day"><div class="num">25</div></div>271    <div class="day"><div class="num">26</div></div>272    <div class="day"><div class="num">27</div></div>273    <div class="day">274      <div class="num">28</div>275      <div class="event">Milad un-N</div>276    </div>277    <div class="day"><div class="num">29</div></div>278    <div class="day">279      <div class="num">30</div>280      <div class="event blue">cycling eve</div>281      <div class="event blue">EMPLOYME</div>282    </div>283 284    <!-- Row 6: Oct 1-7 -->285    <div class="day"><div class="num faded">1</div></div>286    <div class="day">287      <div class="num faded">2</div>288      <div class="event">Mahatma G</div>289    </div>290    <div class="day"><div class="num faded">3</div></div>291    <div class="day"><div class="num faded">4</div></div>292    <div class="day"><div class="num faded">5</div></div>293    <div class="day"><div class="num faded">6</div></div>294    <div class="day"><div class="num faded">7</div></div>295  </div>296 297  <!-- Floating Action Button -->298  <div class="fab">299    <svg class="plus" viewBox="0 0 24 24" aria-hidden="true">300      <path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z"/>301    </svg>302  </div>303 304  <!-- Gesture bar -->305  <div class="gesture"></div>306 307</div>308</body>309</html>