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;font-family: Arial, Helvetica, sans-serif;}7  #render-target{8    width:1080px;height:2400px;position:relative;overflow:hidden;9    background:#17151b;color:#fff;10  }11  /* Status bar */12  .status-bar{13    height:70px;background:#1f1c23;color:#cfcbd6;14    display:flex;align-items:center;justify-content:space-between;15    padding:0 24px;font-size:28px;letter-spacing:0.5px;16  }17  .status-icons{display:flex;gap:18px;align-items:center;}18  .icon{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;color:#cfcbd6;}19  /* Top app bar */20  .app-bar{21    height:120px;background:#1f1c23;display:flex;align-items:center;22    padding:0 28px;box-sizing:border-box;border-bottom:1px solid #221f27;23  }24  .left-actions{display:flex;align-items:center;gap:28px;}25  .title{font-size:58px;font-weight:600;}26  .title .month{margin-right:12px;}27  .down-arrow{28    display:inline-block;width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:18px solid #cfcbd6;margin-left:6px;transform:translateY(-8px);29  }30  .right-actions{margin-left:auto;display:flex;align-items:center;gap:28px;}31  .avatar{32    width:76px;height:76px;border-radius:50%;background:#46a585;display:flex;align-items:center;justify-content:center;33    font-weight:700;color:#0e392d;34  }35  /* Content area */36  .content{padding:22px 24px 120px 24px;}37  .event-row{display:flex;gap:20px;align-items:flex-start;margin:22px 0;}38  .date-box{width:130px;text-align:left;padding-left:8px;}39  .dow{color:#cfcbd6;font-size:30px;margin-bottom:6px;}40  .date{font-size:56px;font-weight:700;color:#fff;}41  .event-pill{42    flex:1;border-radius:32px;padding:28px 36px;box-sizing:border-box;43    display:flex;flex-direction:column;gap:8px;min-height:90px;44  }45  .pill-blue{background:#6ea3d8;}46  .pill-purple{background:#9b5bb4;}47  .event-title{font-size:44px;font-weight:600;color:#fff;}48  .event-time{font-size:32px;color:#e8e8e8;}49  .week-label{color:#a19aac;font-size:30px;margin:28px 0 10px 160px;}50  .separator{height:24px;}51  .month-banner-title{font-size:56px;font-weight:700;margin:28px 0;color:#fff;padding-left:24px;}52  .img-placeholder{53    width:100%;height:520px;background:#E0E0E0;border:1px solid #BDBDBD;54    display:flex;align-items:center;justify-content:center;color:#757575;border-radius:8px;55  }56  /* Section titles for date ranges */57  .range{color:#a19aac;font-size:32px;margin:28px 0 10px 24px;}58  /* Floating action button */59  .fab{60    position:absolute;right:42px;bottom:42px;width:150px;height:150px;border-radius:28px;61    background:#3b3341;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 20px rgba(0,0,0,0.4);62  }63  .fab svg{width:80px;height:80px;fill:none;stroke:#ffffff;stroke-width:16;}64  /* Small calendar icon styling */65  .calendar-label{font-size:28px;color:#cfcbd6;margin-left:160px;margin-top:4px;}66</style>67</head>68<body>69<div id="render-target">70 71  <!-- Status bar -->72  <div class="status-bar">73    <div>8:43</div>74    <div class="status-icons">75      <!-- simple signal icon -->76      <svg class="icon" viewBox="0 0 24 24">77        <rect x="2" y="17" width="3" height="5" fill="#cfcbd6"/>78        <rect x="7" y="14" width="3" height="8" fill="#cfcbd6"/>79        <rect x="12" y="11" width="3" height="11" fill="#cfcbd6"/>80        <rect x="17" y="8" width="3" height="14" fill="#cfcbd6"/>81      </svg>82      <!-- wifi -->83      <svg class="icon" viewBox="0 0 24 24">84        <path d="M2 8c5-4 15-4 20 0" stroke="#cfcbd6" stroke-width="2" fill="none"/>85        <path d="M5 12c4-3 10-3 14 0" stroke="#cfcbd6" stroke-width="2" fill="none"/>86        <path d="M9 16c2-2 4-2 6 0" stroke="#cfcbd6" stroke-width="2" fill="none"/>87        <circle cx="12" cy="19" r="1.5" fill="#cfcbd6"/>88      </svg>89      <!-- battery -->90      <svg class="icon" viewBox="0 0 24 24">91        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#cfcbd6" fill="none" stroke-width="2"/>92        <rect x="4" y="8" width="10" height="8" fill="#cfcbd6"/>93        <rect x="21" y="10" width="2" height="4" fill="#cfcbd6"/>94      </svg>95    </div>96  </div>97 98  <!-- App bar -->99  <div class="app-bar">100    <div class="left-actions">101      <!-- hamburger -->102      <svg width="48" height="48" viewBox="0 0 24 24">103        <path d="M3 6h18M3 12h18M3 18h18" stroke="#cfcbd6" stroke-width="2" fill="none" stroke-linecap="round"/>104      </svg>105      <div class="title">106        <span class="month">July</span>107        <span class="down-arrow"></span>108      </div>109    </div>110    <div class="right-actions">111      <!-- search -->112      <svg width="52" height="52" viewBox="0 0 24 24">113        <circle cx="11" cy="11" r="6" stroke="#cfcbd6" stroke-width="2" fill="none"/>114        <path d="M20 20l-4.5-4.5" stroke="#cfcbd6" stroke-width="2" fill="none" stroke-linecap="round"/>115      </svg>116      <!-- calendar -->117      <svg width="52" height="52" viewBox="0 0 24 24">118        <rect x="3" y="5" width="18" height="16" rx="2" ry="2" stroke="#cfcbd6" stroke-width="2" fill="none"/>119        <path d="M3 9h18" stroke="#cfcbd6" stroke-width="2" />120        <path d="M7 2v6M17 2v6" stroke="#cfcbd6" stroke-width="2" />121      </svg>122      <div class="avatar">C</div>123    </div>124  </div>125 126  <!-- Main content -->127  <div class="content">128 129    <!-- July events -->130    <div class="event-row">131      <div class="date-box">132        <div class="dow">Tue</div>133        <div class="date">25</div>134      </div>135      <div class="event-pill pill-blue">136        <div class="event-title">Transport</div>137        <div class="event-time">2 – 3 PM</div>138      </div>139    </div>140 141    <div class="event-row">142      <div class="date-box">143        <div class="dow">Sat</div>144        <div class="date">29</div>145      </div>146      <div class="event-pill pill-purple">147        <div class="event-title">Muharram/Ashura</div>148      </div>149    </div>150 151    <div class="week-label">Jul 30 – Aug 5</div>152 153    <div class="separator"></div>154 155    <!-- August banner -->156    <div class="month-banner-title">August 2023</div>157    <div class="img-placeholder">[IMG: Scenic illustration for August]</div>158 159    <!-- Date ranges -->160    <div class="range">Aug 6 – 12</div>161    <div class="range">Aug 13 – 19</div>162 163    <!-- Aug 15 -->164    <div class="event-row">165      <div class="date-box">166        <div class="dow">Tue</div>167        <div class="date">15</div>168      </div>169      <div class="event-pill pill-purple">170        <div class="event-title">Independence Day</div>171      </div>172    </div>173 174    <!-- Aug 16 -->175    <div class="event-row">176      <div class="date-box">177        <div class="dow">Wed</div>178        <div class="date">16</div>179      </div>180      <div class="event-pill pill-purple">181        <div class="event-title">Parsi New Year</div>182      </div>183    </div>184 185    <div class="range">Aug 20 – 26</div>186 187    <!-- Aug 20 -->188    <div class="event-row">189      <div class="date-box">190        <div class="dow">Sun</div>191        <div class="date">20</div>192      </div>193      <div class="event-pill pill-purple">194        <div class="event-title">Vinayaka Chathurthi</div>195      </div>196    </div>197 198    <div class="range">Aug 27 – Sep 2</div>199 200    <!-- Aug 29 -->201    <div class="event-row">202      <div class="date-box">203        <div class="dow">Tue</div>204        <div class="date">29</div>205      </div>206      <div class="event-pill pill-purple">207        <div class="event-title">Onam</div>208      </div>209    </div>210 211    <!-- Aug 30 -->212    <div class="event-row">213      <div class="date-box">214        <div class="dow">Wed</div>215        <div class="date">30</div>216      </div>217      <div class="event-pill pill-purple">218        <div class="event-title">Raksha Bandhan (Rakni)</div>219      </div>220    </div>221 222  </div>223 224  <!-- Floating action button -->225  <div class="fab">226    <svg viewBox="0 0 100 100">227      <path d="M50 20v60M20 50h60"/>228    </svg>229  </div>230 231</div>232</body>233</html>