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 Event Detail Mock</title>7<style>8  * { box-sizing: border-box; }9  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; color: #212121; }10 11  /* Root render target */12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #ffffff;18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 100%;26    height: 140px;27    background: #0b5d74;28    color: #ffffff;29    display: flex;30    align-items: center;31    justify-content: space-between;32    padding: 0 48px;33    font-size: 42px;34    letter-spacing: 0.5px;35  }36  .status-icons {37    display: flex;38    align-items: center;39    gap: 28px;40  }41  .status-icons svg { width: 46px; height: 46px; }42 43  /* Large header background */44  .header {45    position: absolute;46    top: 140px;47    left: 0;48    width: 100%;49    height: 560px;50    background: #06a6ef;51  }52 53  /* Floating action buttons */54  .fab {55    position: absolute;56    width: 120px;57    height: 120px;58    border-radius: 50%;59    background: #0b5d74;60    display: flex;61    align-items: center;62    justify-content: center;63    color: #ffffff;64    box-shadow: 0 6px 14px rgba(0,0,0,0.25);65  }66  .fab svg { width: 60px; height: 60px; }67 68  .fab.close { left: 60px; top: 270px; }69  .fab.edit { right: 210px; top: 270px; }70  .fab.more { right: 60px; top: 270px; }71 72  /* White content card */73  .card {74    position: absolute;75    left: 0;76    right: 0;77    top: 560px;78    bottom: 0;79    background: #ffffff;80    border-top-left-radius: 48px;81    border-top-right-radius: 48px;82    box-shadow: 0 -2px 0 rgba(0,0,0,0.05), 0 -6px 18px rgba(0,0,0,0.08);83    padding: 56px 64px 140px 64px;84  }85 86  /* Title block */87  .title-row {88    display: flex;89    align-items: center;90    gap: 28px;91  }92  .color-dot {93    width: 44px;94    height: 44px;95    border-radius: 10px;96    background: #6eb6f4;97  }98  .event-title {99    font-size: 64px;100    font-weight: 500;101    color: #1b1b1b;102  }103  .event-sub {104    margin-left: 72px;105    margin-top: 18px;106    font-size: 38px;107    color: #37474F;108  }109 110  /* Sections */111  .section {112    margin-top: 56px;113  }114  .row {115    display: flex;116    align-items: flex-start;117    gap: 28px;118  }119  .row .icon {120    width: 64px;121    height: 64px;122    display: inline-flex;123    align-items: center;124    justify-content: center;125    color: #546E7A;126  }127 128  .meet-block {129    position: relative;130    padding-right: 120px;131  }132  .meet-title {133    font-size: 44px;134    color: #455A64;135    font-weight: 600;136    margin-bottom: 12px;137  }138  .meet-link {139    font-size: 34px;140    color: #6b7a85;141  }142  .share-btn {143    position: absolute;144    right: 0;145    top: 4px;146    width: 80px;147    height: 80px;148    display: flex;149    align-items: center;150    justify-content: center;151    color: #607D8B;152  }153  .share-btn svg { width: 48px; height: 48px; }154 155  .reminders {156    margin-left: 92px;157    font-size: 42px;158    color: #212121;159    line-height: 1.7;160  }161 162  .calendar-name {163    font-size: 44px;164    color: #212121;165    margin-bottom: 8px;166  }167  .calendar-email {168    font-size: 34px;169    color: #6b7a85;170  }171 172  /* Bottom gesture bar */173  .home-indicator {174    position: absolute;175    bottom: 30px;176    left: 50%;177    transform: translateX(-50%);178    width: 300px;179    height: 12px;180    background: #8f8f8f;181    border-radius: 8px;182    opacity: 0.8;183  }184</style>185</head>186<body>187<div id="render-target">188 189  <!-- Status bar -->190  <div class="status-bar">191    <div>10:32</div>192    <div class="status-icons">193      <!-- WiFi -->194      <svg viewBox="0 0 24 24" fill="#ffffff" aria-hidden="true">195        <path d="M12 18.5c.8 0 1.5.7 1.5 1.5S12.8 21.5 12 21.5 10.5 20.8 10.5 20 11.2 18.5 12 18.5zM2 8.5c5.5-4 14.5-4 20 0l-2 2.1c-4.5-3.2-11.5-3.2-16 0L2 8.5zm4 4c3.8-2.7 10.2-2.7 14 0l-2 2c-2.7-1.9-7.3-1.9-10 0l-2-2zm4 4c2-1.4 6-1.4 8 0l-2 2c-1-.7-3-.7-4 0l-2-2z"/>196      </svg>197      <!-- Battery -->198      <svg viewBox="0 0 24 24" fill="#ffffff" aria-hidden="true">199        <path d="M16 7H5c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zm5 3h-1v4h1c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1z"/>200      </svg>201    </div>202  </div>203 204  <!-- Header -->205  <div class="header"></div>206 207  <!-- Floating action buttons -->208  <div class="fab close" aria-label="Close">209    <svg viewBox="0 0 24 24">210      <path d="M6 6l12 12M18 6L6 18" stroke="#ffffff" stroke-width="2.6" stroke-linecap="round"/>211    </svg>212  </div>213  <div class="fab edit" aria-label="Edit">214    <svg viewBox="0 0 24 24">215      <path d="M3 17.25V21h3.75L17.8 9.95l-3.75-3.75L3 17.25z" fill="#ffffff"/>216      <path d="M20.7 7.05c.4-.4.4-1.05 0-1.45l-2.3-2.3c-.4-.4-1.05-.4-1.45 0l-1.6 1.6 3.75 3.75 1.6-1.6z" fill="#ffffff"/>217    </svg>218  </div>219  <div class="fab more" aria-label="More">220    <svg viewBox="0 0 24 24">221      <circle cx="12" cy="5" r="2.2" fill="#ffffff"/>222      <circle cx="12" cy="12" r="2.2" fill="#ffffff"/>223      <circle cx="12" cy="19" r="2.2" fill="#ffffff"/>224    </svg>225  </div>226 227  <!-- Content card -->228  <div class="card">229    <!-- Title -->230    <div class="title-row">231      <div class="color-dot"></div>232      <div class="event-title">Xyz Birthday</div>233    </div>234    <div class="event-sub">Thursday, Jun 22 • 10:00 – 11:00 AM</div>235 236    <!-- Google Meet -->237    <div class="section">238      <div class="row meet-block">239        <div class="icon">240          <!-- Simple video camera icon -->241          <svg viewBox="0 0 24 24" width="64" height="64" aria-hidden="true">242            <rect x="3" y="6" width="12" height="12" rx="2" fill="#34A853"/>243            <path d="M15 9l6-3v12l-6-3V9z" fill="#EA4335"/>244          </svg>245        </div>246        <div style="flex:1;">247          <div class="meet-title">Join with Google Meet</div>248          <div class="meet-link">meet.google.com/unw-wmya-rmz</div>249        </div>250        <div class="share-btn" title="Share">251          <svg viewBox="0 0 24 24">252            <path d="M18 8a3 3 0 10-2.8-4h.01A3 3 0 0018 8zM6 14a3 3 0 10-2.8 4H3.2A3 3 0 006 14zm12 0a3 3 0 10-2.2 5 3 3 0 002.2-5zM8.7 13l6.6-3.5M8.7 15.5l6.6 3.5" stroke="#607D8B" stroke-width="2.2" fill="none" stroke-linecap="round"/>253          </svg>254        </div>255      </div>256    </div>257 258    <!-- Reminders -->259    <div class="section row">260      <div class="icon">261        <!-- Bell icon -->262        <svg viewBox="0 0 24 24">263          <path d="M12 22a2.5 2.5 0 002.5-2.5h-5A2.5 2.5 0 0012 22zM18 16V11a6 6 0 10-12 0v5l-2 2h16l-2-2z" fill="#616161"/>264        </svg>265      </div>266      <div class="reminders">267        <div>15 minutes before</div>268        <div>30 minutes before</div>269      </div>270    </div>271 272    <!-- Calendar -->273    <div class="section row">274      <div class="icon">275        <!-- Calendar icon -->276        <svg viewBox="0 0 24 24">277          <path d="M7 2h2v3H7V2zm8 0h2v3h-2V2zM4 5h16a2 2 0 012 2v13a2 2 0 01-2 2H4a2 2 0 01-2-2V7a2 2 0 012-2zm0 5h16v10H4V10z" fill="#616161"/>278        </svg>279      </div>280      <div>281        <div class="calendar-name">Events</div>282        <div class="calendar-email">dbwscratch.test.id8@gmail.com</div>283      </div>284    </div>285  </div>286 287  <!-- Home indicator -->288  <div class="home-indicator"></div>289</div>290</body>291</html>