GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Calendar Event Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #121215;13    color: #F1F3F4;14  }15 16  /* Status bar */17  .statusbar {18    height: 110px;19    padding: 0 38px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #C7C9CC;24    font-size: 34px;25    letter-spacing: 1px;26  }27  .status-icons { display: flex; align-items: center; gap: 26px; }28  .dot { width: 14px; height: 14px; background: #C7C9CC; border-radius: 50%; }29 30  /* Top action row */31  .top-actions {32    position: relative;33    padding: 10px 38px 0 38px;34    height: 130px;35    display: flex;36    align-items: center;37  }38  .close-btn {39    width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;40  }41  .close-btn svg { width: 40px; height: 40px; fill: none; stroke: #C7C9CC; stroke-width: 6; }42  .save-chip {43    position: absolute;44    right: 38px; top: 18px;45    background: #D9B7F2;46    color: #1F0F26;47    font-weight: 700;48    padding: 22px 36px;49    border-radius: 38px;50    font-size: 34px;51  }52 53  /* Title */54  .title {55    padding: 18px 38px 26px 38px;56    font-size: 64px;57    line-height: 80px;58    font-weight: 700;59  }60 61  /* Rows */62  .section {63    border-top: 1px solid #1F1F22;64    border-bottom: 1px solid #1F1F22;65  }66  .row {67    display: flex;68    align-items: center;69    padding: 32px 38px;70    border-bottom: 1px solid #1F1F22;71  }72  .row:last-child { border-bottom: none; }73  .icon {74    width: 74px; height: 74px; margin-right: 26px;75    display: flex; align-items: center; justify-content: center;76  }77  .avatar {78    width: 74px; height: 74px; border-radius: 50%;79    background: #D98594; color: #1A1A1A; font-weight: 700;80    display: flex; align-items: center; justify-content: center;81    font-size: 40px; margin-right: 26px;82  }83  .row-title { font-size: 40px; }84  .row-sub { color: #AAB0B6; font-size: 30px; margin-top: 8px; }85  .grow { flex: 1; }86  .right { color: #EDEDED; font-size: 40px; }87 88  .blue-dot {89    width: 14px; height: 14px; border-radius: 50%; background: #4FC3F7; display: inline-block; margin-right: 12px;90  }91 92  /* Toggle switch (off) */93  .switch {94    width: 170px; height: 86px; border-radius: 50px;95    background: #2A2A2E;96    position: relative;97  }98  .switch::after {99    content: "";100    position: absolute;101    right: 6px; top: 6px;102    width: 74px; height: 74px; border-radius: 50%;103    background: #7B7B84;104  }105 106  /* Small pill button */107  .pill {108    margin-left: 24px;109    font-size: 32px;110    padding: 14px 26px;111    border-radius: 22px;112    background: #1F1F25;113    border: 1px solid #303036;114    color: #C6C8CC;115  }116 117  /* Multiline note / location */118  .multiline {119    color: #E5E6EA; font-size: 36px; line-height: 54px;120  }121 122  .faded { color: #B5B8BE; }123 124  .x-small svg { width: 44px; height: 44px; fill: none; stroke: #B5B8BE; stroke-width: 5; }125 126  /* Icon SVG defaults */127  .icon svg { width: 46px; height: 46px; fill: none; stroke: #C7C9CC; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }128 129</style>130</head>131<body>132<div id="render-target">133 134  <!-- Status bar -->135  <div class="statusbar">136    <div>2:06</div>137    <div class="status-icons">138      <div class="dot"></div>139      <div class="dot"></div>140      <div class="dot"></div>141      <div class="dot"></div>142    </div>143  </div>144 145  <!-- Actions row with Save -->146  <div class="top-actions">147    <div class="close-btn">148      <svg viewBox="0 0 24 24"><path d="M4 4 L20 20 M20 4 L4 20"/></svg>149    </div>150    <div class="save-chip">Save</div>151  </div>152 153  <!-- Title -->154  <div class="title">155    Zoom meeting invitation -<br>ABC156  </div>157 158  <div class="section">159 160    <!-- Account row -->161    <div class="row">162      <div class="avatar">C</div>163      <div class="grow">164        <div class="row-title">165          <span class="blue-dot"></span>Events166        </div>167        <div class="row-sub">dbwscratch.test.id4@gmail.com</div>168      </div>169    </div>170 171    <!-- All-day row -->172    <div class="row">173      <div class="icon">174        <svg viewBox="0 0 24 24"><path d="M7 2v4M17 2v4M3 9h18M5 5h14M4 9v11h16V9"/></svg>175      </div>176      <div class="grow row-title">All-day</div>177      <div class="switch"></div>178    </div>179 180    <!-- Start date/time -->181    <div class="row">182      <div class="icon">183        <svg viewBox="0 0 24 24"><path d="M12 7v6l4 2"/></svg>184      </div>185      <div class="grow row-title">Tue, Jul 25, 2023</div>186      <div class="right">1:30 PM</div>187    </div>188 189    <!-- End date/time -->190    <div class="row">191      <div class="icon">192        <svg viewBox="0 0 24 24"><path d="M12 7v6l4 2"/></svg>193      </div>194      <div class="grow row-title">Tue, Jul 25, 2023</div>195      <div class="right">2:00 PM</div>196    </div>197 198    <!-- Time zone -->199    <div class="row">200      <div class="icon">201        <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20a10 10 0 1 0 0-20zM2 12h20M12 2c3 3 3 17 0 20"/></svg>202      </div>203      <div class="row-title">India Standard Time</div>204    </div>205 206    <!-- Repeat -->207    <div class="row">208      <div class="icon">209        <svg viewBox="0 0 24 24"><path d="M3 7h11l-2-2m2 12H5l2 2M21 12a7 7 0 0 1-7 7M10 5a7 7 0 0 1 11 7"/></svg>210      </div>211      <div class="row-title">Does not repeat</div>212    </div>213 214    <!-- Add people -->215    <div class="row">216      <div class="icon">217        <svg viewBox="0 0 24 24"><path d="M16 11a4 4 0 1 0-8 0a4 4 0 0 0 8 0zM4 20c0-3 4-5 8-5s8 2 8 5"/></svg>218      </div>219      <div class="grow row-title">Add people</div>220      <div class="pill">View schedules</div>221    </div>222 223    <!-- Add video conferencing -->224    <div class="row">225      <div class="icon">226        <svg viewBox="0 0 24 24"><path d="M3 7h12v10H3zM15 10l6-3v10l-6-3z"/></svg>227      </div>228      <div class="row-title">Add video conferencing</div>229    </div>230 231    <!-- Location / Notes with zoom link -->232    <div class="row" style="align-items:flex-start;">233      <div class="icon" style="margin-top:6px;">234        <svg viewBox="0 0 24 24"><path d="M12 21s7-7 7-11a7 7 0 1 0-14 0c0 4 7 11 7 11zM12 11a3 3 0 1 1 0-6a3 3 0 0 1 0 6z"/></svg>235      </div>236      <div class="grow multiline">237        https://us05web.zoom.us/j/83912965774?pwd=KK3Kn03sl2dDEcms1GNVUV8ahbl8w4.1238      </div>239    </div>240 241    <!-- Notification -->242    <div class="row">243      <div class="icon">244        <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zM18 16V11a6 6 0 1 0-12 0v5l-2 2h16l-2-2z"/></svg>245      </div>246      <div class="grow row-title">15 minutes before</div>247      <div class="x-small">248        <svg viewBox="0 0 24 24"><path d="M5 5L19 19M19 5L5 19"/></svg>249      </div>250    </div>251 252  </div>253 254</div>255</body>256</html>