GD-ML/AndroidCode

1<html lang="en">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;9    position: relative; overflow: hidden;10    background: #0f1714; color: #E8F1ED;11  }12 13  /* Top status bar */14  .statusbar {15    height: 100px;16    padding: 0 32px;17    display: flex; align-items: center; justify-content: space-between;18    color: #cfe0d8; font-weight: 600; letter-spacing: 0.3px;19  }20  .status-icons { display: flex; align-items: center; gap: 26px; }21  .dot { width: 10px; height: 10px; background:#cfe0d8; border-radius:50%; opacity:0.4; }22  .icon-battery, .icon-signal {23    width: 34px; height: 22px; border: 2px solid #cfe0d8; border-radius: 4px; position: relative;24  }25  .icon-battery::after { content:''; position:absolute; right:-6px; top:6px; width:6px; height:10px; background:#cfe0d8; border-radius:2px; }26  .icon-signal { border: none; }27  .icon-signal::before { content:''; position:absolute; right:0; bottom:0; width:22px; height:16px; border-left:3px solid #cfe0d8; border-bottom:3px solid #cfe0d8; transform:skewX(-18deg); }28 29  /* Header */30  .header {31    height: 120px; padding: 0 32px;32    display: flex; align-items: center; justify-content: space-between;33  }34  .left-head { display:flex; align-items:center; gap:26px; }35  .hamburger { width: 54px; height: 54px; border-radius: 6px; display:flex; align-items:center; justify-content:center; }36  .hamburger svg { width: 38px; height: 38px; }37  .month-title { font-size: 54px; font-weight: 700; color: #d9efe2; }38  .month-title small { font-size: 42px; opacity:0.8; margin-left:10px; }39  .right-head { display:flex; align-items:center; gap:28px; }40  .icon-btn { width: 60px; height: 60px; border-radius: 12px; display:flex; align-items:center; justify-content:center; }41  .avatar { width: 70px; height: 70px; border-radius: 50%; background:#b89386; display:flex; align-items:center; justify-content:center; color:#2b1c17; font-weight:700; font-size:40px; }42 43  /* Content area */44  .content { padding: 10px 32px 140px 32px; }45  .timeline { display:flex; }46  .day-block { display:flex; margin-top: 26px; }47  .day-left { width: 140px; display:flex; flex-direction:column; align-items:center; }48  .dow { font-size: 34px; color:#cfe0d8; opacity:0.85; margin-bottom:10px; }49  .date-circle { width: 82px; height: 82px; border-radius:50%; background:#bfe5b7; color:#1f3a2f; display:flex; align-items:center; justify-content:center; font-size:40px; font-weight:700; }50 51  .events { width: 876px; margin-left: 30px; }52 53  /* Pills */54  .pill {55    width: 876px; border-radius: 28px; padding: 28px 34px;56    margin-bottom: 22px; font-size: 44px; font-weight: 700;57  }58  .pill .time { display:block; font-size:34px; font-weight:500; opacity:0.9; margin-top:8px; }59  .pill.blue { background:#6fa3e5; color:#0c1a1b; }60  .pill.purple { background:#7f88ff; color:#0c1a1b; }61  .pill.dark { background:#1d2623; color:#bdcec8; font-weight:600; display:flex; align-items:center; gap:16px; }62  .check-circle {63    width:40px; height:40px; border:3px solid #cfe0d8; border-radius:50%; position:relative;64  }65  .check-circle::after { content:''; position:absolute; left:10px; top:6px; width:16px; height:26px; border-right:4px solid #cfe0d8; border-bottom:4px solid #cfe0d8; transform:rotate(40deg); }66 67  /* Divider line under day */68  .thin-line { height: 6px; background:#cfe0d8; border-radius: 3px; width: 280px; margin: 8px 0 12px 174px; opacity:0.35; }69 70  /* Section label */71  .section-range { color:#9bb3ab; font-size:32px; letter-spacing:1px; margin:26px 0 18px 170px; }72 73  /* Cards */74  .card {75    width: 876px; border-radius: 28px; overflow:hidden; background:#16211e;76    margin-bottom: 22px; border: 1px solid rgba(255,255,255,0.08);77    display:flex; align-items:center;78  }79  .card .text { padding: 30px 34px; flex:1; }80  .card .title { font-size: 48px; font-weight: 800; margin-bottom: 6px; }81  .card .time { font-size: 34px; opacity:0.92; }82  .card .img {83    width: 340px; height: 220px; background:#E0E0E0; border:1px solid #BDBDBD;84    display:flex; align-items:center; justify-content:center; color:#757575;85  }86 87  /* All-day teal pill */88  .pill.teal { background:#58b0a4; color:#0b1a18; }89 90  /* Meeting & pet care same style as blue */91  .pill.blue.small, .pill.blue.medium { font-size: 44px; }92  .pill.blue.small .time, .pill.blue.medium .time { font-size:34px; }93 94  /* Bottom banner */95  .month-banner {96    width: 1080px; height: 360px; background:#F1D79D; color:#5f4e2e;97    position:absolute; bottom:0; left:0; display:flex; align-items:center;98    padding: 20px 32px; box-sizing:border-box;99  }100  .banner-text { font-size: 64px; font-weight: 800; margin-right: 24px; }101  .banner-img {102    flex:1; height: 300px; background:#E0E0E0; border:1px solid #BDBDBD;103    display:flex; align-items:center; justify-content:center; color:#757575;104  }105 106  /* Floating action button */107  .fab {108    position:absolute; bottom:40px; right:40px;109    width: 144px; height: 144px; background:#2d4b3f; border-radius: 36px;110    display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,0.5);111  }112  .fab span { font-size: 96px; color:#e7f4ef; line-height:0; }113 114  /* Simple icons */115  .icon svg { width:40px; height:40px; fill:none; stroke:#cfe0d8; stroke-width:4; }116  .calendar-icon { width:44px; height:44px; }117</style>118</head>119<body>120<div id="render-target">121 122  <!-- Status bar -->123  <div class="statusbar">124    <div style="display:flex; align-items:center; gap:18px;">125      <div style="font-size:46px;">9:54</div>126      <div class="status-icons">127        <div class="dot"></div>128        <div class="dot"></div>129        <div class="dot"></div>130        <div class="dot"></div>131      </div>132    </div>133    <div class="status-icons">134      <div class="icon-signal"></div>135      <div class="icon-battery"></div>136    </div>137  </div>138 139  <!-- Header -->140  <div class="header">141    <div class="left-head">142      <div class="hamburger icon">143        <svg viewBox="0 0 24 24">144          <path d="M3 6h18M3 12h18M3 18h18"/>145        </svg>146      </div>147      <div class="month-title">September <small>▼</small></div>148    </div>149    <div class="right-head">150      <div class="icon-btn icon">151        <svg viewBox="0 0 24 24">152          <circle cx="10" cy="10" r="7"></circle>153          <path d="M15 15l6 6"></path>154        </svg>155      </div>156      <div class="icon-btn icon calendar-icon">157        <svg viewBox="0 0 24 24">158          <rect x="3" y="5" width="18" height="16" rx="2"></rect>159          <path d="M3 9h18M7 3v4M17 3v4"></path>160        </svg>161      </div>162      <div class="avatar">C</div>163    </div>164  </div>165 166  <!-- Content -->167  <div class="content">168 169    <!-- Day: Sat 23 -->170    <div class="day-block">171      <div class="day-left">172        <div class="dow">Sat</div>173        <div class="date-circle">23</div>174      </div>175      <div class="events">176        <div class="pill blue">Meet</div>177        <div class="pill purple"><span style="display:flex; align-items:center; gap:18px;">178          <span class="check-circle"></span>179          <span>Sport</span>180        </span></div>181        <div class="pill dark"><span class="check-circle"></span> 1 pending task</div>182      </div>183    </div>184    <div class="thin-line"></div>185 186    <!-- Range label -->187    <div class="section-range">Sep 24 – 30</div>188 189    <!-- Day: Mon 25 -->190    <div class="day-block">191      <div class="day-left">192        <div class="dow">Mon</div>193        <div class="date-circle" style="background:#bfe5b7;">25</div>194      </div>195      <div class="events">196        <div class="card">197          <div class="text">198            <div class="title">Basketball match</div>199            <span class="time">6:30 – 7:30 PM</span>200          </div>201          <div class="img">[IMG: Basketball graphic]</div>202        </div>203      </div>204    </div>205 206    <!-- Day: Thu 28 -->207    <div class="day-block" style="margin-top:20px;">208      <div class="day-left">209        <div class="dow">Thu</div>210        <div class="date-circle">28</div>211      </div>212      <div class="events">213        <div class="pill teal">Milad un-Nabi/Id-e-Milad</div>214      </div>215    </div>216 217    <!-- Day: Fri 29 -->218    <div class="day-block" style="margin-top:24px;">219      <div class="day-left">220        <div class="dow">Fri</div>221        <div class="date-circle">29</div>222      </div>223      <div class="events">224        <div class="card">225          <div class="text">226            <div class="title">Dinner out</div>227          </div>228          <div class="img">[IMG: Dinner illustration]</div>229        </div>230 231        <div class="pill blue">232          Meeting233          <span class="time">5:30 – 6:30 PM</span>234        </div>235 236        <div class="pill blue">237          Pet care238          <span class="time">7 – 8 PM</span>239        </div>240      </div>241    </div>242 243  </div>244 245  <!-- Bottom banner for October -->246  <div class="month-banner">247    <div class="banner-text">October 2023</div>248    <div class="banner-img">[IMG: Autumn harvest banner]</div>249  </div>250 251  <!-- Floating action button -->252  <div class="fab"><span>+</span></div>253 254</div>255</body>256</html>