GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Calendar UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #0d1419; /* dark app background */13    color: #e9f0f7;14    font-family: "Arial", sans-serif;15  }16 17  /* Status bar */18  .status-bar {19    height: 90px;20    padding: 0 28px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #dfe6ed;25    font-size: 36px;26    letter-spacing: 0.5px;27  }28  .status-right {29    display: flex;30    align-items: center;31    gap: 22px;32  }33  .status-icon {34    width: 36px;35    height: 36px;36  }37 38  /* Top app bar */39  .top-bar {40    height: 120px;41    display: flex;42    align-items: center;43    padding: 0 32px;44    gap: 22px;45  }46  .icon-btn {47    width: 74px;48    height: 74px;49    border-radius: 12px;50    display: flex;51    align-items: center;52    justify-content: center;53  }54  .icon-svg { width: 44px; height: 44px; fill: #b2c0cc; }55  .month-title {56    font-size: 60px;57    font-weight: 600;58    flex: 1;59  }60  .month-title small {61    display: inline-block;62    margin-left: 14px;63    vertical-align: middle;64  }65  .avatar {66    width: 86px;67    height: 86px;68    background: #8b6f63;69    border-radius: 50%;70    display: flex;71    align-items: center;72    justify-content: center;73    font-weight: 700;74    font-size: 46px;75    color: #f2f2f2;76  }77 78  /* Content list */79  .content {80    padding: 10px 36px 140px 36px;81  }82  .day-row {83    display: flex;84    align-items: center;85    gap: 26px;86    margin-top: 18px;87  }88  .day-col {89    width: 120px;90    text-align: center;91    color: #a7b5c4;92    font-size: 34px;93    line-height: 28px;94  }95  .day-col .daynum {96    width: 86px;97    height: 86px;98    border-radius: 50%;99    background: #9cc4ff;100    color: #0d1419;101    font-weight: 700;102    font-size: 42px;103    display: inline-flex;104    align-items: center;105    justify-content: center;106    margin-top: 4px;107  }108  .day-info {109    font-size: 40px;110    color: #cfd8e3;111  }112  .week-label {113    color: #98a7b6;114    font-size: 30px;115    margin: 38px 0 18px 146px;116  }117 118  .pill {119    background: #5ea597; /* teal pill color */120    color: #ffffff;121    border-radius: 38px;122    padding: 26px 34px;123    font-size: 40px;124    width: 870px;125    margin-left: 146px;126    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);127  }128 129  /* October banner */130  .month-banner {131    position: relative;132    margin: 40px 0 18px 0;133    height: 500px;134    border-radius: 18px;135    overflow: hidden;136  }137  .banner-img {138    position: absolute;139    inset: 0;140    background: #E0E0E0;141    border: 1px solid #BDBDBD;142    display: flex;143    align-items: center;144    justify-content: center;145    color: #757575;146    font-size: 36px;147  }148  .banner-title {149    position: absolute;150    top: 40px;151    left: 36px;152    font-size: 56px;153    font-weight: 700;154    color: #231c12;155    background: rgba(255,255,255,0.86);156    padding: 10px 18px;157    border-radius: 12px;158  }159 160  .section-range {161    color: #9db0c1;162    font-size: 32px;163    margin: 30px 0 16px 36px;164  }165 166  .event-row {167    display: flex;168    align-items: center;169    gap: 26px;170    margin: 18px 0;171  }172  .left-date {173    width: 120px;174    text-align: center;175    color: #a7b5c4;176    font-size: 34px;177  }178  .left-date .num {179    font-size: 52px;180    color: #d7e0ea;181    font-weight: 600;182  }183  .fab {184    position: absolute;185    width: 160px;186    height: 160px;187    border-radius: 36px;188    right: 36px;189    bottom: 420px;190    background: #3a4750;191    display: flex;192    align-items: center;193    justify-content: center;194    box-shadow: 0 8px 24px rgba(0,0,0,0.4);195  }196  .fab .plus {197    width: 84px;198    height: 84px;199    border: 4px solid #cfe5f6;200    border-radius: 8px;201    position: relative;202  }203  .fab .plus::before,204  .fab .plus::after {205    content: "";206    position: absolute;207    background: #cfe5f6;208  }209  .fab .plus::before {210    width: 6px; height: 68px; left: 50%; top: 8px; transform: translateX(-50%);211  }212  .fab .plus::after {213    width: 68px; height: 6px; left: 8px; top: 50%; transform: translateY(-50%);214  }215 216  /* Gesture bar */217  .gesture {218    position: absolute;219    bottom: 22px;220    left: 50%;221    transform: translateX(-50%);222    width: 460px;223    height: 10px;224    border-radius: 6px;225    background: #b9c2cb;226    opacity: 0.6;227  }228</style>229</head>230<body>231<div id="render-target">232 233  <!-- Status bar -->234  <div class="status-bar">235    <div>12:51</div>236    <div class="status-right">237      <!-- simple status icons -->238      <svg class="status-icon" viewBox="0 0 24 24">239        <path fill="#cfd8e3" d="M3 18h18v2H3zM6 14h12v2H6zM10 10h4v2h-4z"></path>240      </svg>241      <svg class="status-icon" viewBox="0 0 24 24">242        <path fill="#cfd8e3" d="M12 3a9 9 0 0 0-9 9h2a7 7 0 0 1 14 0h2a9 9 0 0 0-9-9zm0 6a3 3 0 0 0-3 3h2a1 1 0 0 1 2 0h2a3 3 0 0 0-3-3z"></path>243      </svg>244      <svg class="status-icon" viewBox="0 0 24 24">245        <path fill="#cfd8e3" d="M6 18h12a2 2 0 0 0 2-2V8h-2V6h-3V4H9v2H6v2H4v8a2 2 0 0 0 2 2zm0-10h12v8H6V8z"></path>246      </svg>247    </div>248  </div>249 250  <!-- App top bar -->251  <div class="top-bar">252    <div class="icon-btn">253      <svg class="icon-svg" viewBox="0 0 24 24">254        <path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"></path>255      </svg>256    </div>257    <div class="month-title">September258      <small>259        <svg class="icon-svg" viewBox="0 0 24 24">260          <path d="M7 10l5 5 5-5z"></path>261        </svg>262      </small>263    </div>264    <div class="icon-btn">265      <svg class="icon-svg" viewBox="0 0 24 24">266        <circle cx="11" cy="11" r="7" fill="none" stroke="#b2c0cc" stroke-width="2"></circle>267        <path d="M20 20l-4-4" stroke="#b2c0cc" stroke-width="2" fill="none"></path>268      </svg>269    </div>270    <div class="icon-btn">271      <svg class="icon-svg" viewBox="0 0 24 24">272        <path d="M6 5h2V3h2v2h4V3h2v2h2v14H6V5zm2 6h8v6H8v-6z" fill="#b2c0cc"></path>273      </svg>274    </div>275    <div class="avatar">I</div>276  </div>277 278  <!-- Main content -->279  <div class="content">280    <!-- Sat 23 -->281    <div class="day-row">282      <div class="day-col">283        Sat284        <div class="daynum">23</div>285      </div>286      <div class="day-info">Nothing planned. Tap to create.</div>287    </div>288 289    <!-- Week label and long event -->290    <div class="week-label">Sep 24 – 30</div>291    <div class="pill">Milad un-Nabi/Id-e-Milad</div>292 293    <!-- October banner with illustration placeholder -->294    <div class="month-banner">295      <div class="banner-img">[IMG: Autumn harvest illustration]</div>296      <div class="banner-title">October 2023</div>297    </div>298 299    <div class="section-range">Oct 1 – 7</div>300    <div class="event-row">301      <div class="left-date">302        Mon<br><span class="num">2</span>303      </div>304      <div class="pill">Mahatma Gandhi Jayanti</div>305    </div>306 307    <div class="section-range">Oct 8 – 14</div>308    <div class="section-range">Oct 15 – 21</div>309    <div class="event-row">310      <div class="left-date">311        Sun<br><span class="num">15</span>312      </div>313      <div class="pill">First Day of Sharad Navratri</div>314    </div>315 316    <div class="event-row">317      <div class="left-date">318        Fri<br><span class="num">20</span>319      </div>320      <div class="pill">First Day of Durga Puja Festivities</div>321    </div>322 323    <div class="event-row">324      <div class="left-date">325        Sat<br><span class="num">21</span>326      </div>327      <div class="pill">Maha Saptami</div>328    </div>329 330    <div class="section-range" style="margin-top: 22px;">Oct 22 – 28</div>331    <div class="event-row">332      <div class="left-date">333        Sun<br><span class="num">22</span>334      </div>335      <div class="pill">Maha Ashtami</div>336    </div>337  </div>338 339  <!-- Floating Action Button -->340  <div class="fab">341    <div class="plus"></div>342  </div>343 344  <!-- Gesture bar -->345  <div class="gesture"></div>346</div>347</body>348</html>