GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1440, initial-scale=1.0">6<title>Calendar - September</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1440px; height: 3120px;11    position: relative; overflow: hidden;12    background: #0d120d;13    color: #d7e7d2;14  }15 16  /* Status bar (minimal) */17  .statusbar {18    height: 100px;19    padding: 0 40px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #e8f2e4;24    font-size: 36px;25    letter-spacing: 1px;26    opacity: 0.85;27  }28  .status-icons { display: flex; align-items: center; gap: 28px; }29  .dot { width: 10px; height: 10px; background: #e8f2e4; border-radius: 50%; display: inline-block; opacity: 0.85; }30 31  /* Header */32  .header {33    height: 220px;34    display: flex;35    align-items: center;36    padding: 0 40px;37    gap: 36px;38  }39  .title {40    font-size: 96px;41    font-weight: 500;42    letter-spacing: 0.5px;43    margin-right: auto;44  }45  .header-actions { display: flex; align-items: center; gap: 40px; }46  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }47  .avatar {48    width: 84px; height: 84px; border-radius: 50%;49    background: #0f3a2f; color: #d7e7d2;50    display: flex; align-items: center; justify-content: center;51    font-size: 44px; font-weight: 600;52  }53 54  /* Weekday header */55  .weekdays {56    padding: 10px 20px 0 20px;57    margin: 0 20px;58    display: grid;59    grid-template-columns: repeat(7, 1fr);60    color: #98a89a;61    font-size: 38px;62    text-align: center;63  }64  .weekdays div:nth-child(7) { color: #78a06f; } /* Saturday accent */65 66  /* Calendar grid */67  .calendar-grid {68    margin: 14px 0 0 0;69    display: grid;70    grid-template-columns: repeat(7, 1fr);71    grid-template-rows: repeat(6, 420px);72    border-top: 1px solid #243024;73    border-bottom: 1px solid #243024;74  }75  .cell {76    border-right: 1px solid #243024;77    border-left: 1px solid #243024;78    border-bottom: 1px solid #243024;79    position: relative;80    padding: 36px;81  }82  .date {83    font-size: 54px;84    color: #d7e7d2;85  }86  .date.dim { color: #9aa79b; } /* previous/next month */87  .date.active {88    position: absolute;89    right: 36px; top: 36px;90    width: 110px; height: 110px;91    border-radius: 55px;92    background: #629b5f;93    color: #0d120d;94    display: flex; align-items: center; justify-content: center;95    font-weight: 700;96  }97 98  /* Floating action button */99  .fab {100    position: absolute;101    right: 120px; bottom: 220px;102    width: 200px; height: 200px;103    background: #2f3f32;104    border-radius: 48px;105    box-shadow: 0 12px 32px rgba(0,0,0,0.4);106    display: flex; align-items: center; justify-content: center;107  }108  .fab span {109    font-size: 120px; line-height: 1; color: #e5f0e5;110    margin-top: -6px;111  }112 113  /* Home pill */114  .home-pill {115    position: absolute;116    bottom: 80px; left: 50%; transform: translateX(-50%);117    width: 420px; height: 18px; border-radius: 12px;118    background: #f2f2f2; opacity: 0.85;119  }120 121  /* SVG colors */122  svg { fill: none; }123  .icon-stroke { stroke: #d7e7d2; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }124  .icon-fill { fill: #d7e7d2; }125</style>126</head>127<body>128<div id="render-target">129 130  <!-- Status bar -->131  <div class="statusbar">132    <div>5:49</div>133    <div class="status-icons">134      <!-- Simple placeholders for status icons -->135      <svg width="48" height="48"><circle cx="24" cy="24" r="10" class="icon-stroke"></circle></svg>136      <svg width="48" height="48"><rect x="6" y="14" width="36" height="20" class="icon-stroke"></rect></svg>137      <svg width="48" height="48"><polygon points="8,36 24,12 40,36" class="icon-stroke"></polygon></svg>138      <div class="dot"></div>139      <svg width="48" height="48"><path d="M8 30h28c0 6-6 10-14 10s-14-4-14-10z" class="icon-stroke"></path></svg>140    </div>141  </div>142 143  <!-- Header -->144  <div class="header">145    <div class="icon-btn">146      <!-- Hamburger -->147      <svg width="72" height="72">148        <rect x="12" y="18" width="48" height="6" class="icon-fill"></rect>149        <rect x="12" y="33" width="48" height="6" class="icon-fill"></rect>150        <rect x="12" y="48" width="48" height="6" class="icon-fill"></rect>151      </svg>152    </div>153    <div class="title">September</div>154    <div class="header-actions">155      <!-- Search -->156      <div class="icon-btn">157        <svg width="72" height="72">158          <circle cx="30" cy="30" r="18" class="icon-stroke"></circle>159          <line x1="44" y1="44" x2="60" y2="60" class="icon-stroke"></line>160        </svg>161      </div>162      <!-- Calendar icon -->163      <div class="icon-btn">164        <svg width="72" height="72">165          <rect x="14" y="22" width="44" height="36" class="icon-stroke"></rect>166          <line x1="14" y1="30" x2="58" y2="30" class="icon-stroke"></line>167          <line x1="24" y1="16" x2="24" y2="26" class="icon-stroke"></line>168          <line x1="48" y1="16" x2="48" y2="26" class="icon-stroke"></line>169        </svg>170      </div>171      <!-- Avatar -->172      <div class="avatar">Q</div>173    </div>174  </div>175 176  <!-- Weekdays -->177  <div class="weekdays">178    <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>179  </div>180 181  <!-- Calendar grid -->182  <div class="calendar-grid">183    <!-- Row 1: Aug 27-31, Sep 1-2 -->184    <div class="cell"><span class="date dim">27</span></div>185    <div class="cell"><span class="date dim">28</span></div>186    <div class="cell"><span class="date dim">29</span></div>187    <div class="cell"><span class="date dim">30</span></div>188    <div class="cell"><span class="date dim">31</span></div>189    <div class="cell"><span class="date">1</span></div>190    <div class="cell"><span class="date">2</span></div>191 192    <!-- Row 2 -->193    <div class="cell"><span class="date">3</span></div>194    <div class="cell"><span class="date">4</span></div>195    <div class="cell"><span class="date">5</span></div>196    <div class="cell"><span class="date">6</span></div>197    <div class="cell"><span class="date">7</span></div>198    <div class="cell"><span class="date">8</span></div>199    <div class="cell"><span class="date">9</span></div>200 201    <!-- Row 3 -->202    <div class="cell"><span class="date">10</span></div>203    <div class="cell"><span class="date">11</span></div>204    <div class="cell"><span class="date">12</span></div>205    <div class="cell"><span class="date">13</span></div>206    <div class="cell"><span class="date">14</span></div>207    <div class="cell"><span class="date">15</span></div>208    <div class="cell"><span class="date">16</span></div>209 210    <!-- Row 4 -->211    <div class="cell"><span class="date">17</span></div>212    <div class="cell"><span class="date">18</span></div>213    <div class="cell"><span class="date">19</span></div>214    <div class="cell"><span class="date">20</span></div>215    <div class="cell"><span class="date">21</span></div>216    <div class="cell"><span class="date">22</span></div>217    <div class="cell"><span class="date active">23</span></div>218 219    <!-- Row 5 -->220    <div class="cell"><span class="date">24</span></div>221    <div class="cell"><span class="date">25</span></div>222    <div class="cell"><span class="date">26</span></div>223    <div class="cell"><span class="date">27</span></div>224    <div class="cell"><span class="date">28</span></div>225    <div class="cell"><span class="date">29</span></div>226    <div class="cell"><span class="date">30</span></div>227 228    <!-- Row 6: Oct 1-7 -->229    <div class="cell"><span class="date dim">1</span></div>230    <div class="cell"><span class="date dim">2</span></div>231    <div class="cell"><span class="date dim">3</span></div>232    <div class="cell"><span class="date dim">4</span></div>233    <div class="cell"><span class="date dim">5</span></div>234    <div class="cell"><span class="date dim">6</span></div>235    <div class="cell"><span class="date dim">7</span></div>236  </div>237 238  <!-- Floating action button -->239  <div class="fab"><span>+</span></div>240 241  <!-- Home pill -->242  <div class="home-pill"></div>243</div>244</body>245</html>