GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Calendar UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #1d1a22; color: #efeaf7;12  }13 14  /* Status bar */15  .status-bar {16    height: 90px;17    padding: 0 40px;18    display: flex;19    align-items: center;20    justify-content: space-between;21    color: #cfc7da;22    font-weight: 600;23    font-size: 34px;24  }25  .sb-icons { display: flex; align-items: center; gap: 28px; }26  .sb-icon {27    width: 32px; height: 32px; border-radius: 6px;28    background: #50485a;29  }30 31  /* App bar */32  .app-bar {33    height: 120px; border-bottom: 1px solid #2a2431;34    display: flex; align-items: center; justify-content: space-between;35    padding: 0 40px;36  }37  .app-left { display: flex; align-items: center; gap: 26px; }38  .hamburger { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; }39  .month-title { font-size: 48px; font-weight: 600; letter-spacing: 0.5px; }40  .month-title svg { vertical-align: middle; margin-left: 12px; }41  .app-right { display: flex; align-items: center; gap: 40px; }42  .icon-btn { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; background: #2b2433; border-radius: 14px; }43  .avatar {44    width: 76px; height: 76px; border-radius: 50%;45    background: #4aa696; display: flex; align-items: center; justify-content: center;46    font-weight: 700; font-size: 38px; color: #0b1a15;47  }48 49  /* Content area */50  .content { padding: 20px 0 140px 0; }51  .event-row {52    display: flex; align-items: center;53    padding: 18px 40px;54  }55  .day-col {56    width: 140px; text-align: left; color: #cfc7da;57  }58  .day-name { font-size: 30px; }59  .day-num  { font-size: 46px; font-weight: 700; margin-top: 6px; }60  .event-col { flex: 1; }61  .pill {62    width: 880px; min-height: 96px;63    border-radius: 44px; padding: 28px 34px;64    display: flex; align-items: center; color: #fff; font-size: 36px; font-weight: 600;65  }66  .blue { background: #77a8e6; }67  .purple { background: #a56cce; }68  .subtext { font-size: 28px; font-weight: 500; opacity: 0.95; margin-left: 12px; }69 70  .week-label {71    color: #b6aec2; font-size: 30px; padding: 16px 40px; margin-top: 6px;72  }73 74  /* Illustration banner */75  .illustration {76    margin: 18px 0 26px 0;77    padding: 0 40px;78  }79  .illustration-title {80    font-size: 52px; font-weight: 700; margin: 24px 0 22px 40px;81  }82  .img-placeholder {83    width: 1000px; height: 420px;84    background: #E0E0E0; border: 1px solid #BDBDBD;85    color: #757575; display: flex; align-items: center; justify-content: center;86    border-radius: 18px; margin: 0 auto;87  }88 89  /* Floating action button */90  .fab {91    position: absolute; right: 40px; bottom: 220px;92    width: 160px; height: 160px; border-radius: 40px;93    background: #3b3243; display: flex; align-items: center; justify-content: center;94    box-shadow: 0 10px 20px rgba(0,0,0,0.5);95  }96  .fab span { font-size: 90px; color: #fff; line-height: 1; }97 98  /* Simple utility for small calendar labels before groups */99  .group-label { padding: 12px 40px; color: #b6aec2; font-size: 30px; }100</style>101</head>102<body>103<div id="render-target">104 105  <!-- Top system status bar -->106  <div class="status-bar">107    <div>2:11</div>108    <div class="sb-icons">109      <div class="sb-icon"></div>110      <div class="sb-icon"></div>111      <div class="sb-icon"></div>112      <div class="sb-icon"></div>113    </div>114  </div>115 116  <!-- App header -->117  <div class="app-bar">118    <div class="app-left">119      <div class="hamburger">120        <svg width="44" height="44" viewBox="0 0 24 24" fill="#cfc7da">121          <path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"></path>122        </svg>123      </div>124      <div class="month-title">125        July126        <svg width="28" height="28" viewBox="0 0 24 24" fill="#cfc7da">127          <path d="M7 10l5 5 5-5z"></path>128        </svg>129      </div>130    </div>131    <div class="app-right">132      <div class="icon-btn">133        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#cfc7da" stroke-width="2">134          <circle cx="11" cy="11" r="7"></circle>135          <path d="M21 21l-4.3-4.3"></path>136        </svg>137      </div>138      <div class="icon-btn">139        <svg width="34" height="34" viewBox="0 0 24 24" fill="#cfc7da">140          <path d="M7 3h2v2H7zM15 3h2v2h-2z"></path>141          <path d="M5 6h14v14H5z"></path>142          <path d="M7 10h10v2H7zM7 14h6v2H7z"></path>143        </svg>144      </div>145      <div class="avatar">C</div>146    </div>147  </div>148 149  <!-- Content -->150  <div class="content">151 152    <!-- Wed 26 -->153    <div class="event-row">154      <div class="day-col">155        <div class="day-name">Wed</div>156        <div class="day-num">26</div>157      </div>158      <div class="event-col">159        <div class="pill blue">160          <div>Zoom meeting invitation - ABC</div>161        </div>162        <div class="subtext">1:30 – 2:00 PM at https://us05web.zoom.us/j/...</div>163      </div>164    </div>165 166    <!-- Sat 29 -->167    <div class="event-row">168      <div class="day-col">169        <div class="day-name">Sat</div>170        <div class="day-num">29</div>171      </div>172      <div class="event-col">173        <div class="pill purple">Muharram/Ashura</div>174      </div>175    </div>176 177    <div class="week-label">Jul 30 – Aug 5</div>178 179    <!-- August banner -->180    <div class="illustration">181      <div class="illustration-title">August 2023</div>182      <div class="img-placeholder">[IMG: August scenic illustration with sailboat, sun and trees]</div>183    </div>184 185    <div class="group-label">Aug 6 – 12</div>186    <div class="group-label">Aug 13 – 19</div>187 188    <!-- Tue 15 -->189    <div class="event-row">190      <div class="day-col">191        <div class="day-name">Tue</div>192        <div class="day-num">15</div>193      </div>194      <div class="event-col">195        <div class="pill purple">Independence Day</div>196      </div>197    </div>198 199    <!-- Wed 16 -->200    <div class="event-row">201      <div class="day-col">202        <div class="day-name">Wed</div>203        <div class="day-num">16</div>204      </div>205      <div class="event-col">206        <div class="pill purple">Parsi New Year</div>207      </div>208    </div>209 210    <div class="group-label">Aug 20 – 26</div>211 212    <!-- Sun 20 -->213    <div class="event-row">214      <div class="day-col">215        <div class="day-name">Sun</div>216        <div class="day-num">20</div>217      </div>218      <div class="event-col">219        <div class="pill purple">Vinayaka Chathurthi</div>220      </div>221    </div>222 223    <div class="group-label">Aug 27 – Sep 2</div>224 225    <!-- Tue 29 -->226    <div class="event-row">227      <div class="day-col">228        <div class="day-name">Tue</div>229        <div class="day-num">29</div>230      </div>231      <div class="event-col">232        <div class="pill purple">Onam</div>233      </div>234    </div>235 236    <!-- Wed 30 (partially visible) -->237    <div class="event-row">238      <div class="day-col">239        <div class="day-name">Wed</div>240        <div class="day-num">30</div>241      </div>242      <div class="event-col">243        <div class="pill purple">Raksha Bandhan (Rakhi)</div>244      </div>245    </div>246 247  </div>248 249  <!-- Floating action button -->250  <div class="fab"><span>+</span></div>251 252</div>253</body>254</html>