GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Calendar Day View</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2160px;11    position: relative; overflow: hidden;12    background: #201912; color: #EADFCF;13    font-family: Roboto, Arial, sans-serif;14    border-radius: 28px;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute; top: 0; left: 0; right: 0;20    height: 110px; background: #2C2219; color: #F4E8D8;21    display: flex; align-items: center; justify-content: space-between;22    padding: 0 36px; box-sizing: border-box;23  }24  .status-left { font-size: 42px; font-weight: 500; letter-spacing: 0.5px; }25  .status-right { display: flex; align-items: center; gap: 26px; }26  .status-icon svg { width: 42px; height: 42px; fill: none; stroke: #F4E8D8; stroke-width: 3; }27  .battery { display: flex; align-items: center; gap: 12px; font-size: 34px; }28  .battery svg { width: 52px; height: 32px; }29 30  /* App bar */31  .app-bar {32    position: absolute; top: 110px; left: 0; right: 0;33    height: 160px; background: #2C2219; color: #F4E8D8;34    display: flex; align-items: center; justify-content: space-between;35    padding: 0 36px; box-sizing: border-box;36    border-bottom: 1px solid #4A3B2F;37  }38  .app-left { display: flex; align-items: center; gap: 32px; }39  .title {40    font-size: 58px; font-weight: 600; letter-spacing: 0.5px;41    display: flex; align-items: center; gap: 18px;42  }43  .app-right { display: flex; align-items: center; gap: 44px; }44  .icon-btn { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; }45  .icon-btn svg { width: 56px; height: 56px; stroke: #F4E8D8; stroke-width: 3; fill: none; }46  .avatar {47    width: 88px; height: 88px; border-radius: 44px;48    background: #0EA47B; display: flex; align-items: center; justify-content: center;49    color: #083B31; font-size: 52px; font-weight: 700;50  }51 52  /* Calendar area */53  .calendar {54    position: absolute;55    top: 270px; /* status(110) + app(160) */56    left: 0; right: 0;57    height: 1720px; /* remaining before bottom bar */58    background: #1D1610;59  }60 61  .day-label {62    position: absolute; left: 24px; top: 8px;63    width: 130px; color: #CBB79E; text-align: left;64    font-weight: 600;65  }66  .day-label .dow { font-size: 44px; }67  .day-label .date { font-size: 56px; margin-top: 6px; }68 69  .time-labels {70    position: absolute; left: 24px; top: 140px; width: 140px;71    color: #B89E86;72  }73  .time-labels div { height: 180px; display: flex; align-items: flex-start; }74  .time-labels span { font-size: 36px; }75 76  .grid {77    position: absolute; left: 160px; right: 0; top: 0; bottom: 0;78    box-sizing: border-box;79  }80  .hour-row {81    height: 180px; position: relative;82    border-top: 1px solid #3E3227;83  }84  .hour-row:last-child { border-bottom: 1px solid #3E3227; }85  .hour-row::before {86    content: ""; position: absolute; left: 0; right: 0; top: 0;87    height: 1px; background: #3E3227;88  }89 90  /* Event card */91  .event {92    position: absolute; left: 188px; /* inside right pane with some margin */93    width: 750px; height: 160px;94    background: #68A8E5; color: #FFFFFF;95    border-radius: 28px;96    padding: 24px 28px; box-sizing: border-box;97    box-shadow: 0 6px 12px rgba(0,0,0,0.25);98  }99  .event .title { font-size: 46px; font-weight: 700; color: #FFFFFF; }100  .event .detail { margin-top: 10px; font-size: 32px; line-height: 1.35; color: #EAF2FF; }101  /* Position the event around 1 PM */102  .event.at-1pm { top: 180px; } /* starts one hour down from 12 PM */103 104  /* Floating action button */105  .fab {106    position: absolute; right: 88px; bottom: 220px;107    width: 160px; height: 160px; background: #5A452B;108    border-radius: 40px; box-shadow: 0 12px 24px rgba(0,0,0,0.35);109    display: flex; align-items: center; justify-content: center;110    color: #F1D9B6; font-size: 110px; font-weight: 600;111  }112 113  /* Bottom navigation / gesture area */114  .bottom-bar {115    position: absolute; left: 0; right: 0; bottom: 0;116    height: 160px; background: #14100D;117    display: flex; align-items: center; justify-content: center;118  }119  .bottom-content {120    width: 92%; display: flex; align-items: center; justify-content: space-between;121  }122  .back-icon svg { width: 64px; height: 64px; stroke: #C9B8A0; stroke-width: 3; fill: none; }123  .gesture-pill {124    width: 160px; height: 26px; background: #A7A7A7; border-radius: 16px;125  }126</style>127</head>128<body>129<div id="render-target">130  <!-- Status bar -->131  <div class="status-bar">132    <div class="status-left">12:50</div>133    <div class="status-right">134      <div class="status-icon">135        <!-- Do Not Disturb icon -->136        <svg viewBox="0 0 24 24">137          <circle cx="12" cy="12" r="9"></circle>138          <line x1="6" y1="12" x2="18" y2="12"></line>139        </svg>140      </div>141      <div class="status-icon">142        <!-- Upload icon -->143        <svg viewBox="0 0 24 24">144          <path d="M12 5v10"></path>145          <path d="M8 9l4-4 4 4"></path>146          <path d="M5 19h14"></path>147        </svg>148      </div>149      <div class="battery">150        <svg viewBox="0 0 28 16">151          <rect x="1" y="2" width="22" height="12" rx="2" ry="2" stroke="#F4E8D8"></rect>152          <rect x="24" y="5" width="3" height="6" rx="1" ry="1" fill="#F4E8D8"></rect>153          <rect x="3" y="4" width="18" height="8" fill="#F4E8D8"></rect>154        </svg>155        <span>100%</span>156      </div>157    </div>158  </div>159 160  <!-- App bar -->161  <div class="app-bar">162    <div class="app-left">163      <div class="icon-btn">164        <!-- Hamburger -->165        <svg viewBox="0 0 24 24">166          <line x1="3" y1="6" x2="21" y2="6"></line>167          <line x1="3" y1="12" x2="21" y2="12"></line>168          <line x1="3" y1="18" x2="21" y2="18"></line>169        </svg>170      </div>171      <div class="title">172        June173        <!-- Dropdown arrow -->174        <svg viewBox="0 0 24 24">175          <polyline points="6,9 12,15 18,9" stroke="#F4E8D8" stroke-width="3" fill="none"></polyline>176        </svg>177      </div>178    </div>179    <div class="app-right">180      <div class="icon-btn">181        <!-- Search -->182        <svg viewBox="0 0 24 24">183          <circle cx="11" cy="11" r="6"></circle>184          <line x1="16" y1="16" x2="21" y2="21"></line>185        </svg>186      </div>187      <div class="icon-btn">188        <!-- Calendar icon -->189        <svg viewBox="0 0 24 24">190          <rect x="4" y="6" width="16" height="14" rx="2" ry="2"></rect>191          <line x1="4" y1="10" x2="20" y2="10"></line>192          <circle cx="9" cy="14" r="2"></circle>193        </svg>194      </div>195      <div class="avatar">C</div>196    </div>197  </div>198 199  <!-- Calendar grid -->200  <div class="calendar">201    <div class="day-label">202      <div class="dow">Mon</div>203      <div class="date">19</div>204    </div>205 206    <div class="time-labels">207      <div><span>12 PM</span></div>208      <div><span>1 PM</span></div>209      <div><span>2 PM</span></div>210      <div><span>3 PM</span></div>211      <div><span>4 PM</span></div>212      <div><span>5 PM</span></div>213      <div><span>6 PM</span></div>214      <div><span>7 PM</span></div>215      <div><span>8 PM</span></div>216      <div><span>9 PM</span></div>217    </div>218 219    <div class="grid">220      <div class="hour-row"></div>221      <div class="hour-row"></div>222      <div class="hour-row"></div>223      <div class="hour-row"></div>224      <div class="hour-row"></div>225      <div class="hour-row"></div>226      <div class="hour-row"></div>227      <div class="hour-row"></div>228      <div class="hour-row"></div>229      <div class="hour-row"></div>230    </div>231 232    <!-- Event block starting around 1 PM -->233    <div class="event at-1pm">234      <div class="title">birthday party</div>235      <div class="detail">236        Pullman New Delhi Aerocity, Asset No 02, GMR Hospitality District, IGI Rd, Aerocity, New Delhi237      </div>238    </div>239  </div>240 241  <!-- Floating action button -->242  <div class="fab">+</div>243 244  <!-- Bottom navigation / gesture area -->245  <div class="bottom-bar">246    <div class="bottom-content">247      <div class="back-icon">248        <svg viewBox="0 0 24 24">249          <polyline points="15,6 9,12 15,18"></polyline>250        </svg>251      </div>252      <div class="gesture-pill"></div>253      <div style="width:64px;"></div>254    </div>255  </div>256</div>257</body>258</html>