GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Calendar Event - Mock UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }7  #render-target {8    width: 1080px; height: 2400px; position: relative; overflow: hidden;9    background: #121215; color: #EEE;10  }11  /* Top status bar */12  .status-bar {13    position: absolute; top: 0; left: 0; width: 100%; height: 96px;14    display: flex; align-items: center; justify-content: space-between;15    padding: 0 40px; box-sizing: border-box; color: #EDEDED; font-size: 36px;16  }17  .status-icons { display: flex; gap: 22px; align-items: center; }18  .dot { width: 12px; height: 12px; background: #EDEDED; border-radius: 50%; opacity: .8; }19  .signal { width: 28px; height: 28px; border: 2px solid #EDEDED; border-radius: 5px; opacity: .8; }20  .battery {21    width: 42px; height: 22px; border: 2px solid #EDEDED; border-radius: 4px; position: relative;22  }23  .battery::after { content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #EDEDED; border-radius: 2px; }24  .battery .level { position: absolute; right: 2px; top: 2px; width: 26px; height: 16px; background: #EDEDED; }25  /* App bar */26  .app-bar {27    position: absolute; top: 96px; left: 0; width: 100%; height: 140px;28    display: flex; align-items: center; justify-content: space-between;29    padding: 0 34px; box-sizing: border-box;30  }31  .icon-btn { width: 64px; height: 64px; border-radius: 32px; display: flex; align-items: center; justify-content: center; }32  .icon-btn svg { width: 42px; height: 42px; fill: #C7C3CF; }33  .chevron {34    position: absolute; top: 132px; left: 50%; transform: translateX(-50%);35    width: 84px; height: 14px; border-radius: 7px; background: #2A2930;36  }37  .save-btn {38    background: #CDA9F4; color: #251B36; font-weight: 600; padding: 18px 34px;39    border-radius: 34px; font-size: 36px;40  }41  /* Title */42  .title {43    position: absolute; top: 220px; left: 48px; right: 48px;44    font-size: 68px; font-weight: 500; color: #EDE7F7;45  }46  /* Divider and content */47  .section { position: absolute; left: 0; width: 100%; }48  .list { top: 320px; }49  .row {50    display: flex; align-items: center; gap: 30px;51    padding: 36px 48px; box-sizing: border-box; border-top: 1px solid #1C1C22;52    color: #EAEAF2;53  }54  .row:first-child { border-top: none; }55  .r-icon {56    width: 60px; height: 60px; border-radius: 50%; background: #2B2B32; display: flex;57    align-items: center; justify-content: center;58  }59  .r-icon svg { width: 40px; height: 40px; fill: #B7B7C5; }60  .row .label { font-size: 42px; }61  .row .value { margin-left: auto; font-size: 40px; color: #D7D7E4; }62  .sub {63    padding: 10px 48px 28px 156px; box-sizing: border-box; color: #B9B7C6; font-size: 36px;64    display: flex; justify-content: space-between; align-items: center;65  }66  .sub .right { color: #EEE; }67  .calendar-account {68    display: flex; align-items: center; gap: 24px;69  }70  .avatar {71    width: 72px; height: 72px; border-radius: 36px; background: #C76B7B; color: #1A1A1A;72    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 40px;73  }74  .blue-dot { width: 22px; height: 22px; border-radius: 50%; background: #4AB1FF; margin-left: 10px; }75  .email { font-size: 32px; color: #A7A5B6; }76  /* Toggle switch */77  .toggle {78    margin-left: auto; width: 172px; height: 78px; border-radius: 40px; background: #2E2E37; position: relative;79    box-shadow: inset 0 0 0 2px #3B3B47;80  }81  .toggle .knob {82    position: absolute; right: 8px; top: 8px; width: 62px; height: 62px; border-radius: 50%; background: #9A98A5;83  }84  /* Pill button */85  .pill {86    padding: 20px 36px; border-radius: 34px; font-size: 36px;87    border: 2px solid #7C6AC3; color: #C6B8FF; background: rgba(124,106,195,0.15);88  }89  /* Meet row */90  .meet-icon {91    width: 70px; height: 50px; position: relative;92  }93  .meet-icon div { position: absolute; }94  .meet-icon .g { left: 0; top: 0; width: 30px; height: 50px; background: #1A73E8; }95  .meet-icon .y { left: 30px; top: 0; width: 40px; height: 25px; background: #FBBC04; }96  .meet-icon .g2 { left: 30px; top: 25px; width: 40px; height: 25px; background: #34A853; }97  .close-x {98    width: 54px; height: 54px; border: 2px solid #8F8F9A; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-left: auto;99  }100  .close-x svg { width: 36px; height: 36px; stroke: #A8A6B6; stroke-width: 5; fill: none; }101  /* Notification chip */102  .notif-chip { font-size: 40px; color: #EDEDED; }103  /* Additional subtle separator */104  .thin-line { height: 1px; background: #1C1C22; margin: 0 0; }105  /* Default color row bottom preview */106  .color-dot { width: 22px; height: 22px; border-radius: 50%; background: #4AB1FF; margin-right: 20px; }107</style>108</head>109<body>110<div id="render-target">111 112  <!-- Status bar -->113  <div class="status-bar">114    <div>8:36</div>115    <div class="status-icons">116      <div class="dot"></div>117      <div class="signal"></div>118      <div class="dot"></div>119      <div class="dot"></div>120      <div class="battery"><div class="level"></div></div>121    </div>122  </div>123 124  <!-- App bar -->125  <div class="app-bar">126    <div class="icon-btn">127      <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19" stroke="#C7C3CF" stroke-width="2" fill="none"/></svg>128    </div>129    <div class="save-btn">Save</div>130  </div>131  <div class="chevron"></div>132 133  <!-- Title -->134  <div class="title">Add title</div>135 136  <!-- Content List -->137  <div class="section list">138 139    <!-- Calendar account -->140    <div class="row" style="padding-top: 24px;">141      <div class="avatar">C</div>142      <div>143        <div class="label" style="display:flex; align-items:center; gap:16px;">144          <span>Events</span><span class="blue-dot"></span>145        </div>146        <div class="email">dbwscratch.test.id4@gmail.com</div>147      </div>148    </div>149 150    <!-- All-day toggle -->151    <div class="row">152      <div class="r-icon">153        <svg viewBox="0 0 24 24"><path d="M12 7v5l4 2" stroke="#B7B7C5" stroke-width="2" fill="none" stroke-linecap="round"/></svg>154      </div>155      <div class="label">All-day</div>156      <div class="toggle">157        <div class="knob"></div>158      </div>159    </div>160 161    <!-- Start date -->162    <div class="row">163      <div class="label" style="margin-left: 112px; font-size:40px; color:#B9B7C6;">Mon, Jul 24, 2023</div>164      <div class="value">9:00 AM</div>165    </div>166 167    <!-- End date -->168    <div class="row">169      <div class="label" style="margin-left: 112px; font-size:40px; color:#B9B7C6;">Mon, Jul 24, 2023</div>170      <div class="value">10:00 AM</div>171    </div>172 173    <!-- Time zone -->174    <div class="row">175      <div class="r-icon">176        <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20a10 10 0 1 0 0-20zM12 7v5l4 2" stroke="#B7B7C5" stroke-width="2" fill="none"/></svg>177      </div>178      <div class="label">India Standard Time</div>179    </div>180 181    <!-- Does not repeat -->182    <div class="row">183      <div class="r-icon">184        <svg viewBox="0 0 24 24"><path d="M4 4h8v4H6v8H4V4zm16 16h-8v-4h6V8h2v12z" fill="#B7B7C5"/></svg>185      </div>186      <div class="label">Does not repeat</div>187    </div>188 189    <!-- Add people -->190    <div class="row">191      <div class="r-icon">192        <svg viewBox="0 0 24 24"><path d="M12 12a4 4 0 1 0 0-8a4 4 0 1 0 0 8zm-8 8c0-4 4-6 8-6s8 2 8 6" stroke="#B7B7C5" stroke-width="2" fill="none"/></svg>193      </div>194      <div class="label">Add people</div>195      <div class="pill" style="margin-left:auto;">View schedules</div>196    </div>197 198    <!-- Google Meet -->199    <div class="row">200      <div class="meet-icon">201        <div class="g"></div>202        <div class="y"></div>203        <div class="g2"></div>204      </div>205      <div style="display:flex; flex-direction:column;">206        <div class="label">Google Meet</div>207        <div class="email" style="margin-top:8px;">Video conferencing details added</div>208      </div>209      <div class="close-x">210        <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/></svg>211      </div>212    </div>213 214    <!-- Add location -->215    <div class="row">216      <div class="r-icon">217        <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4a2 2 0 1 1 0 4z" fill="#B7B7C5"/></svg>218      </div>219      <div class="label">Add location</div>220    </div>221 222    <!-- Notification -->223    <div class="row">224      <div class="r-icon">225        <svg viewBox="0 0 24 24"><path d="M12 2l6 6v6a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3V8l6-6zm-2 18a2 2 0 1 0 4 0" stroke="#B7B7C5" stroke-width="2" fill="none"/></svg>226      </div>227      <div class="notif-chip">30 minutes before</div>228      <div class="close-x" style="margin-left:auto;">229        <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/></svg>230      </div>231    </div>232 233    <!-- Add notification -->234    <div class="row">235      <div style="width:60px; height:60px;"></div>236      <div class="label">Add notification</div>237    </div>238 239    <!-- Default color preview (partial at bottom) -->240    <div class="row">241      <div class="color-dot"></div>242      <div class="label" style="font-size:40px; color:#B9B7C6;">Default color</div>243    </div>244 245  </div>246</div>247</body>248</html>