GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Dark Calendar Day View</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }8  #render-target {9    width: 1440px;10    height: 3120px;11    position: relative;12    overflow: hidden;13    background: #131b13; /* deep, greenish-black */14    color: #d8e3d4;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    height: 120px;23    width: 100%;24    color: #e6f0e2;25    display: flex;26    align-items: center;27    padding: 0 48px;28    font-size: 42px;29    letter-spacing: 0.5px;30  }31  .status-right {32    margin-left: auto;33    display: flex;34    align-items: center;35    gap: 36px;36  }37  .icon-wifi, .icon-battery, .icon-dot {38    display: inline-flex;39    align-items: center;40    justify-content: center;41  }42  .icon-wifi svg, .icon-battery svg, .icon-dot svg {43    width: 56px; height: 56px;44    fill: none; stroke: #e6f0e2; stroke-width: 6;45  }46 47  /* App bar */48  .app-bar {49    position: absolute;50    top: 120px;51    left: 0;52    height: 210px;53    width: 100%;54    display: flex;55    align-items: center;56    padding: 0 48px;57    color: #e6f0e2;58  }59  .menu-btn {60    width: 92px; height: 92px; display: inline-flex; align-items: center; justify-content: center; margin-right: 32px;61  }62  .menu-btn svg { width: 72px; height: 72px; stroke: #e6f0e2; stroke-width: 10; }63  .title {64    font-size: 96px;65    font-weight: 500;66    display: inline-flex;67    align-items: center;68    gap: 18px;69  }70  .caret svg { width: 40px; height: 40px; fill: #e6f0e2; }71  .app-actions {72    margin-left: auto;73    display: flex;74    align-items: center;75    gap: 60px;76  }77  .icon-btn { width: 90px; height: 90px; display: inline-flex; align-items: center; justify-content: center; }78  .icon-btn svg { width: 72px; height: 72px; stroke: #e6f0e2; stroke-width: 8; fill: none; }79  .calendar-icon svg { stroke-width: 8; }80  .avatar {81    width: 120px; height: 120px; border-radius: 60px; background: #0b5c50; color: #e6f0e2;82    display: flex; align-items: center; justify-content: center; font-size: 72px; font-weight: 600;83  }84 85  /* Day label column */86  .day-column {87    position: absolute;88    left: 60px;89    top: 390px;90    color: #cdd7c9;91    text-align: left;92  }93  .weekday {94    font-size: 54px;95    opacity: 0.9;96  }97  .day-number {98    font-size: 144px;99    line-height: 1;100    margin-top: 12px;101    font-weight: 600;102  }103 104  /* Calendar grid */105  .calendar-grid {106    position: absolute;107    left: 260px;108    top: 520px;109    width: 1120px;110  }111  .hour-row {112    position: relative;113    height: 180px;114    border-top: 1px solid rgba(230,240,226,0.08);115  }116  .hour-row:last-child { border-bottom: 1px solid rgba(230,240,226,0.08); }117  .hour-time {118    position: absolute;119    left: -140px;120    top: -20px;121    font-size: 42px;122    color: rgba(230,240,226,0.65);123  }124  .fine-line {125    position: absolute;126    left: 0;127    right: 0;128    top: 90px;129    height: 1px;130    background: rgba(230,240,226,0.06);131  }132 133  /* Floating action button */134  .fab {135    position: absolute;136    right: 120px;137    bottom: 220px;138    width: 200px;139    height: 200px;140    border-radius: 48px;141    background: #3d4c3a;142    box-shadow: 0 14px 28px rgba(0,0,0,0.35);143    display: flex; align-items: center; justify-content: center;144  }145  .fab svg { width: 96px; height: 96px; stroke: #e6f0e2; stroke-width: 16; }146 147  /* Gesture pill */148  .gesture-pill {149    position: absolute;150    bottom: 90px;151    left: 50%;152    transform: translateX(-50%);153    width: 320px;154    height: 18px;155    background: rgba(255,255,255,0.85);156    border-radius: 12px;157  }158</style>159</head>160<body>161<div id="render-target">162 163  <!-- Status Bar -->164  <div class="status-bar">165    <div class="time">5:48</div>166    <div class="status-right">167      <!-- simple icons -->168      <span class="icon-dot">169        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#e6f0e2"/></svg>170      </span>171      <span class="icon-wifi">172        <svg viewBox="0 0 24 24">173          <path d="M2 8c5-4 15-4 20 0" />174          <path d="M6 12c3-2 9-2 12 0" />175          <path d="M10 16c1-.7 3-.7 4 0" />176          <circle cx="12" cy="19" r="1.6" fill="#e6f0e2" stroke="none"/>177        </svg>178      </span>179      <span class="icon-battery">180        <svg viewBox="0 0 30 18">181          <rect x="1" y="3" width="24" height="12" rx="2"></rect>182          <rect x="4" y="6" width="18" height="6" fill="#e6f0e2" stroke="none"></rect>183          <rect x="26" y="7" width="3" height="4" rx="1"></rect>184        </svg>185      </span>186    </div>187  </div>188 189  <!-- App Bar -->190  <div class="app-bar">191    <div class="menu-btn">192      <svg viewBox="0 0 24 24">193        <path d="M3 6h18M3 12h18M3 18h18" />194      </svg>195    </div>196    <div class="title">197      <span>September</span>198      <span class="caret">199        <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" /></svg>200      </span>201    </div>202    <div class="app-actions">203      <div class="icon-btn">204        <!-- search -->205        <svg viewBox="0 0 24 24">206          <circle cx="11" cy="11" r="6"></circle>207          <path d="M20 20l-4.5-4.5"></path>208        </svg>209      </div>210      <div class="icon-btn calendar-icon">211        <!-- calendar -->212        <svg viewBox="0 0 24 24">213          <rect x="3" y="5" width="18" height="16" rx="2"></rect>214          <path d="M3 9h18"></path>215          <path d="M7 3v4M17 3v4"></path>216          <rect x="14" y="12" width="3.2" height="3.2" fill="#9cc08f" stroke="none"></rect>217        </svg>218      </div>219      <div class="avatar">Q</div>220    </div>221  </div>222 223  <!-- Day label column -->224  <div class="day-column">225    <div class="weekday">Sun</div>226    <div class="day-number">24</div>227  </div>228 229  <!-- Calendar grid (hours) -->230  <div class="calendar-grid">231    <div class="hour-row"><span class="hour-time">8 AM</span><div class="fine-line"></div></div>232    <div class="hour-row"><span class="hour-time">9 AM</span><div class="fine-line"></div></div>233    <div class="hour-row"><span class="hour-time">10 AM</span><div class="fine-line"></div></div>234    <div class="hour-row"><span class="hour-time">11 AM</span><div class="fine-line"></div></div>235    <div class="hour-row"><span class="hour-time">12 PM</span><div class="fine-line"></div></div>236    <div class="hour-row"><span class="hour-time">1 PM</span><div class="fine-line"></div></div>237    <div class="hour-row"><span class="hour-time">2 PM</span><div class="fine-line"></div></div>238    <div class="hour-row"><span class="hour-time">3 PM</span><div class="fine-line"></div></div>239    <div class="hour-row"><span class="hour-time">4 PM</span><div class="fine-line"></div></div>240    <div class="hour-row"><span class="hour-time">5 PM</span><div class="fine-line"></div></div>241    <div class="hour-row"><span class="hour-time">6 PM</span><div class="fine-line"></div></div>242    <div class="hour-row"><span class="hour-time">7 PM</span><div class="fine-line"></div></div>243    <div class="hour-row"><span class="hour-time">8 PM</span><div class="fine-line"></div></div>244    <div class="hour-row"><span class="hour-time">9 PM</span><div class="fine-line"></div></div>245  </div>246 247  <!-- Floating Action Button -->248  <div class="fab">249    <svg viewBox="0 0 24 24">250      <path d="M12 5v14M5 12h14" />251    </svg>252  </div>253 254  <!-- Gesture pill -->255  <div class="gesture-pill"></div>256 257</div>258</body>259</html>