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 Event Detail - Zoom Invitation</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #121212;14    color: #EDEDED;15    font-family: Roboto, Arial, Helvetica, sans-serif;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 100%;24    height: 88px;25    padding: 0 36px;26    box-sizing: border-box;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #BDBDBD;31    font-size: 30px;32  }33  .status-left, .status-right {34    display: flex;35    align-items: center;36    gap: 22px;37  }38  .sb-icon { width: 36px; height: 36px; opacity: 0.8; }39 40  /* Top app bar */41  .app-bar {42    position: absolute;43    top: 88px;44    left: 0;45    width: 100%;46    height: 92px;47    padding: 0 30px;48    box-sizing: border-box;49    display: flex;50    align-items: center;51    justify-content: space-between;52  }53  .app-actions {54    display: flex;55    align-items: center;56    gap: 30px;57  }58  .icon-btn {59    width: 48px;60    height: 48px;61    display: inline-flex;62    align-items: center;63    justify-content: center;64    border-radius: 24px;65    color: #EDEDED;66  }67  .icon-btn svg { width: 36px; height: 36px; }68 69  /* Content */70  .content {71    position: absolute;72    top: 200px;73    left: 0;74    width: 100%;75    padding: 0 52px 120px;76    box-sizing: border-box;77  }78  .title-row {79    display: flex;80    align-items: flex-start;81    gap: 26px;82  }83  .event-dot {84    width: 34px;85    height: 34px;86    border-radius: 6px;87    background: #4FC3F7; /* blue square indicator */88    margin-top: 18px;89    flex-shrink: 0;90  }91  .event-title {92    font-size: 52px;93    line-height: 64px;94    font-weight: 700;95    letter-spacing: 0.2px;96  }97  .sub-info {98    margin-top: 18px;99    font-size: 32px;100    color: #BDBDBD;101  }102 103  .block {104    margin-top: 44px;105    display: flex;106    align-items: flex-start;107    gap: 28px;108  }109  .block svg { width: 42px; height: 42px; color: #BDBDBD; flex-shrink: 0; }110 111  .link {112    color: #B39DDB;113    text-decoration: underline;114    font-size: 32px;115    word-break: break-all;116  }117 118  .bell-text, .plain-text {119    font-size: 32px;120    color: #E0E0E0;121  }122 123  .section {124    margin-top: 48px;125    font-size: 34px;126    color: #EDEDED;127    line-height: 1.5;128  }129  .section h3 {130    margin: 0 0 18px 0;131    font-size: 36px;132    font-weight: 700;133  }134 135  .footer {136    position: absolute;137    bottom: 80px;138    left: 0;139    width: 100%;140    padding: 0 52px;141    box-sizing: border-box;142    display: flex;143    align-items: center;144    gap: 28px;145    color: #E0E0E0;146    font-size: 32px;147  }148  .calendar-icon {149    width: 48px;150    height: 48px;151    color: #BDBDBD;152  }153</style>154</head>155<body>156<div id="render-target">157  <!-- Status Bar -->158  <div class="status-bar">159    <div class="status-left">160      <div>2:05</div>161      <!-- simple small icons -->162      <svg class="sb-icon" viewBox="0 0 24 24"><path fill="#BDBDBD" d="M3 4h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>163      <svg class="sb-icon" viewBox="0 0 24 24"><path fill="#BDBDBD" d="M12 2l4 7H8l4-7zm-8 9h16l-8 11-8-11z"/></svg>164    </div>165    <div class="status-right">166      <svg class="sb-icon" viewBox="0 0 24 24"><path fill="#BDBDBD" d="M12 3a9 9 0 100 18 9 9 0 000-18zm0 15a6 6 0 110-12 6 6 0 010 12z"/></svg>167      <svg class="sb-icon" viewBox="0 0 24 24"><path fill="#BDBDBD" d="M2 8l10-6 10 6v8a2 2 0 01-2 2H4a2 2 0 01-2-2V8z"/></svg>168      <svg class="sb-icon" viewBox="0 0 24 24"><path fill="#BDBDBD" d="M18 6.5c-1.9-1.6-4.4-2.5-7-2.5S6.9 4.9 5 6.5l-2-2C5.4 2.8 8.6 2 11 2s5.6.8 8 2.5l-2 2zM11 6c-2.1 0-4.1.7-5.7 2l-2-2C5.9 4.2 8.4 3.5 11 3.5S16.1 4.2 18.7 6l-2 2C15.1 6.7 13.1 6 11 6zm0 5c-1.3 0-2.6.4-3.7 1.2l-2-2C6.7 9.3 8.8 8.5 11 8.5s4.3.8 5.7 2.7l-2 2C13.6 11.4 12.3 11 11 11z"/></svg>169      <svg class="sb-icon" viewBox="0 0 24 24"><path fill="#BDBDBD" d="M16 4h2v16h-2zM4 8h10v12H4z"/></svg>170    </div>171  </div>172 173  <!-- App Bar -->174  <div class="app-bar">175    <div class="app-actions">176      <div class="icon-btn" aria-label="close">177        <svg viewBox="0 0 24 24"><path fill="#EDEDED" d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/></svg>178      </div>179    </div>180    <div class="app-actions">181      <div class="icon-btn" aria-label="edit">182        <svg viewBox="0 0 24 24"><path fill="#EDEDED" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>183      </div>184      <div class="icon-btn" aria-label="menu">185        <svg viewBox="0 0 24 24"><path fill="#EDEDED" d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4z"/></svg>186      </div>187    </div>188  </div>189 190  <!-- Content -->191  <div class="content">192    <div class="title-row">193      <div class="event-dot"></div>194      <div class="event-title">Zoom meeting invitation -<br>ABC</div>195    </div>196    <div class="sub-info">Tomorrow • 1:30 – 2:00 PM</div>197 198    <div class="block" style="margin-top:48px;">199      <!-- location/pin icon -->200      <svg viewBox="0 0 24 24"><path fill="#BDBDBD" d="M12 2a7 7 0 00-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 00-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z"/></svg>201      <div class="link">https://us05web.zoom.us/j/83912965774?pwd=KK3Kn03sl2dDEcms1GNVUV8ahbl8w4.1</div>202    </div>203 204    <div class="block" style="margin-top:36px;">205      <!-- bell icon -->206      <svg viewBox="0 0 24 24"><path fill="#BDBDBD" d="M12 22a2 2 0 002-2H10a2 2 0 002 2zm6-6V11a6 6 0 00-12 0v5l-2 2v1h16v-1l-2-2z"/></svg>207      <div class="bell-text">15 minutes before</div>208    </div>209 210    <div class="section" style="margin-top:52px;">211      Cerebra Research is inviting you to a scheduled Zoom meeting.212    </div>213 214    <div class="section" style="margin-top:64px;">215      <h3>Join Zoom Meeting</h3>216      <div class="link">https://us05web.zoom.us/j/83912965774?pwd=KK3Kn03sl2dDEcms1GNVUV8ahbl8w4.1</div>217    </div>218 219    <div class="section" style="margin-top:44px;">220      <div class="plain-text">Meeting ID: 839 1296 5774</div>221      <div class="plain-text" style="margin-top:8px;">Passcode: 20xVPi</div>222    </div>223  </div>224 225  <!-- Footer account info -->226  <div class="footer">227    <svg class="calendar-icon" viewBox="0 0 24 24"><path fill="#BDBDBD" d="M7 2h2v2h6V2h2v2h2a1 1 0 011 1v15a1 1 0 01-1 1H5a1 1 0 01-1-1V5a1 1 0 011-1h2V2zm12 6H5v10h14V8z"/></svg>228    <div>229      <div>Events</div>230      <div style="color:#BDBDBD; font-size:30px;">dbwscratch.test.id4@gmail.com</div>231    </div>232  </div>233</div>234</body>235</html>