GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Calendar Event 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: #121017; color: #EDE7F6;10  }11 12  /* Top status bar */13  .status-bar {14    position: absolute; top: 0; left: 0; width: 100%; height: 110px;15    padding: 0 32px; box-sizing: border-box;16    display: flex; align-items: center; justify-content: space-between;17    color: #EDE7F6; font-weight: 600; font-size: 36px;18  }19  .status-icons { display: flex; align-items: center; gap: 22px; }20  .status-icons svg { width: 36px; height: 36px; fill: none; stroke: #D0C8E8; stroke-width: 2.5; opacity: 0.8; }21 22  /* Header */23  .header {24    position: absolute; top: 110px; left: 0; width: 100%; padding: 30px 36px 24px;25    box-sizing: border-box;26    border-bottom: 1px solid #2A2633;27  }28  .header-top {29    display: flex; align-items: center; justify-content: space-between;30    margin-bottom: 24px;31  }32  .close-btn {33    width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;34    color: #D8D0F0; font-size: 44px; line-height: 1;35  }36  .save-pill {37    background: #C6ACFF; color: #1B1526; padding: 18px 34px; border-radius: 40px;38    font-weight: 700; font-size: 32px;39  }40  .title {41    font-size: 64px; font-weight: 700; letter-spacing: 0.5px;42  }43 44  /* Content */45  .content {46    position: absolute; top: 250px; left: 0; right: 0; bottom: 0;47    padding: 8px 0 80px; overflow: hidden;48  }49  .section {50    padding: 32px 40px; box-sizing: border-box;51    border-bottom: 1px solid #2A2633;52  }53  .row {54    display: flex; align-items: center; justify-content: space-between;55    padding: 22px 0;56  }57  .left {58    display: flex; align-items: center; gap: 28px;59  }60  .icon {61    width: 54px; height: 54px; display: flex; align-items: center; justify-content: center;62    border-radius: 50%;63    background: #1C1824; border: 1px solid #2F2A38;64  }65  .icon svg { width: 28px; height: 28px; stroke: #BFB6D9; fill: none; stroke-width: 2.2; }66  .primary { font-size: 36px; }67  .secondary { font-size: 30px; color: #B8B1C9; }68  .value { font-size: 34px; color: #EDE7F6; }69 70  /* Account row */71  .avatar {72    width: 72px; height: 72px; border-radius: 50%; background: #D97E95; color: #2B1720;73    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 38px;74  }75  .calendar-dot {76    width: 16px; height: 16px; background: #4FA8FF; border-radius: 50%; margin-right: 10px;77  }78 79  /* Toggle */80  .toggle {81    width: 164px; height: 76px; border-radius: 40px; background: #2A2535;82    position: relative;83  }84  .toggle::before {85    content: ""; width: 64px; height: 64px; border-radius: 50%;86    background: #8B819E; position: absolute; top: 6px; left: 10px;87    box-shadow: inset 0 0 0 2px #6E6486;88  }89 90  /* Button */91  .chip {92    display: inline-block; padding: 18px 28px; border-radius: 18px;93    background: #2A2535; color: #C9BFE4; font-size: 32px; font-weight: 600;94    border: 1px solid #3A3446; margin-top: 18px;95  }96 97  /* X icon (dismiss) */98  .x-small {99    width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center;100    color: #D3CBE6; font-size: 40px; background: transparent; border: 1px solid #3A3446;101  }102 103  /* Placeholder image style (for complex logos) */104  .img-placeholder {105    width: 72px; height: 54px; background: #E0E0E0; border: 1px solid #BDBDBD;106    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;107    border-radius: 8px;108  }109 110  /* Footer shadow hint (just to fill bottom) */111  .bottom-fade {112    position: absolute; bottom: 0; left: 0; width: 100%; height: 120px;113    background: linear-gradient(to bottom, rgba(18,16,23,0), rgba(18,16,23,0.85));114  }115</style>116</head>117<body>118<div id="render-target">119 120  <!-- Status Bar -->121  <div class="status-bar">122    <div>8:40</div>123    <div class="status-icons">124      <!-- simple icons resembling status indicators -->125      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><path d="M12 6v6l4 2"></path></svg>126      <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="3"></rect><path d="M7 10h10"></path></svg>127      <svg viewBox="0 0 24 24"><circle cx="6" cy="12" r="2"></circle><circle cx="12" cy="12" r="2"></circle><circle cx="18" cy="12" r="2"></circle></svg>128      <svg viewBox="0 0 24 24"><path d="M2 12h20"></path><path d="M14 5l7 7-7 7"></path></svg>129      <svg viewBox="0 0 24 24"><path d="M6 18h12M4 6h16"></path></svg>130    </div>131  </div>132 133  <!-- Header -->134  <div class="header">135    <div class="header-top">136      <div class="close-btn">✕</div>137      <div class="save-pill">Save</div>138    </div>139    <div class="title">Transport</div>140  </div>141 142  <!-- Content -->143  <div class="content">144 145    <!-- Account / Calendar -->146    <div class="section">147      <div class="row">148        <div class="left">149          <div class="avatar">C</div>150          <div>151            <div class="primary" style="display:flex; align-items:center;">152              <span class="calendar-dot"></span>153              Events154            </div>155            <div class="secondary">dbwscratch.test.id4@gmail.com</div>156          </div>157        </div>158      </div>159    </div>160 161    <!-- Time section -->162    <div class="section">163      <div class="row">164        <div class="left">165          <div class="icon">166            <!-- clock icon -->167            <svg viewBox="0 0 24 24">168              <circle cx="12" cy="12" r="9"></circle>169              <path d="M12 7v6l4 2"></path>170            </svg>171          </div>172          <div class="primary">All-day</div>173        </div>174        <div class="toggle"></div>175      </div>176 177      <div class="row">178        <div class="left">179          <div style="width:54px;"></div>180          <div class="secondary">Tue, Jul 25, 2023</div>181        </div>182        <div class="value">9:00 AM</div>183      </div>184 185      <div class="row">186        <div class="left">187          <div style="width:54px;"></div>188          <div class="secondary">Tue, Jul 25, 2023</div>189        </div>190        <div class="value">10:00 AM</div>191      </div>192 193      <div class="row">194        <div class="left">195          <div class="icon">196            <!-- globe icon -->197            <svg viewBox="0 0 24 24">198              <circle cx="12" cy="12" r="9"></circle>199              <path d="M3 12h18M12 3v18M6 6c3 2 9 2 12 0M6 18c3-2 9-2 12 0"></path>200            </svg>201          </div>202          <div class="primary">India Standard Time</div>203        </div>204      </div>205 206      <div class="row">207        <div class="left">208          <div class="icon">209            <!-- repeat icon -->210            <svg viewBox="0 0 24 24">211              <path d="M7 7h8l-2-2M17 17H9l2 2"></path>212              <path d="M7 7a6 6 0 0 0-4 5M17 17a6 6 0 0 0 4-5" opacity="0.6"></path>213            </svg>214          </div>215          <div class="primary">Does not repeat</div>216        </div>217      </div>218    </div>219 220    <!-- People -->221    <div class="section">222      <div class="row">223        <div class="left">224          <div class="icon">225            <!-- people icon -->226            <svg viewBox="0 0 24 24">227              <circle cx="9" cy="9" r="3"></circle>228              <circle cx="16" cy="11" r="3"></circle>229              <path d="M4 19c0-3 4-5 7-5s7 2 7 5" opacity="0.7"></path>230            </svg>231          </div>232          <div class="primary">Add people</div>233        </div>234      </div>235      <div class="chip">View schedules</div>236    </div>237 238    <!-- Google Meet -->239    <div class="section">240      <div class="row">241        <div class="left">242          <div class="img-placeholder">Meet</div>243          <div>244            <div class="primary">Google Meet</div>245            <div class="secondary">Video conferencing details added</div>246          </div>247        </div>248        <div class="x-small">✕</div>249      </div>250    </div>251 252    <!-- Location -->253    <div class="section">254      <div class="row">255        <div class="left">256          <div class="icon">257            <!-- location pin -->258            <svg viewBox="0 0 24 24">259              <path d="M12 21s-6-6-6-10a6 6 0 1 1 12 0c0 4-6 10-6 10z"></path>260              <circle cx="12" cy="11" r="2.5"></circle>261            </svg>262          </div>263          <div class="primary">Add location</div>264        </div>265      </div>266    </div>267 268    <!-- Notification -->269    <div class="section">270      <div class="row">271        <div class="left">272          <div class="icon">273            <!-- bell -->274            <svg viewBox="0 0 24 24">275              <path d="M6 10a6 6 0 0 1 12 0v5l2 2H4l2-2z"></path>276              <path d="M10 19a2 2 0 0 0 4 0" opacity="0.8"></path>277            </svg>278          </div>279          <div class="primary">30 minutes before</div>280        </div>281        <div class="x-small">✕</div>282      </div>283      <div class="row" style="padding-top:0;">284        <div class="left">285          <div style="width:54px;"></div>286          <div class="primary" style="font-weight:600; color:#C9BFE4;">Add notification</div>287        </div>288      </div>289    </div>290 291    <!-- Default color (simple placeholder) -->292    <div class="section">293      <div class="row">294        <div class="left">295          <div class="icon">296            <svg viewBox="0 0 24 24">297              <rect x="4" y="4" width="16" height="16" rx="3"></rect>298            </svg>299          </div>300          <div class="primary">Default color</div>301        </div>302        <div class="value" style="width:360px; height:18px; background:#D0C9F0; border-radius:10px;"></div>303      </div>304    </div>305 306  </div>307 308  <div class="bottom-fade"></div>309</div>310</body>311</html>