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>UI Render</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #0B0D0C;15    color: #E7EAE6;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    background: #0B0D0C;26    display: flex;27    align-items: center;28    padding: 0 40px;29    box-sizing: border-box;30    color: #D9D9D9;31    font-size: 40px;32    letter-spacing: 0.5px;33  }34  .status-right {35    margin-left: auto;36    display: flex;37    align-items: center;38    gap: 26px;39  }40  .status-icon { display: inline-flex; align-items: center; justify-content: center; }41 42  /* App bar */43  .app-bar {44    position: absolute;45    top: 120px;46    left: 0;47    width: 1080px;48    height: 120px;49    background: #111413;50    display: flex;51    align-items: center;52    padding: 0 40px;53    box-sizing: border-box;54    color: #DDE2DD;55  }56  .app-left, .app-right { display: flex; align-items: center; gap: 30px; }57  .app-title {58    font-size: 56px;59    font-weight: 600;60    letter-spacing: 0.5px;61  }62  .dropdown-caret {63    width: 22px;64    height: 22px;65    border-right: 4px solid #DDE2DD;66    border-bottom: 4px solid #DDE2DD;67    transform: rotate(45deg);68    margin-left: 10px;69  }70 71  /* Background content (calendar) */72  .illustration {73    position: absolute;74    top: 240px;75    left: 0;76    width: 1080px;77    height: 420px;78    background: #E0E0E0;79    border: 1px solid #BDBDBD;80    display: flex;81    align-items: center;82    justify-content: center;83    color: #757575;84  }85  .calendar-list {86    position: absolute;87    top: 700px;88    left: 0;89    width: 1080px;90    padding: 30px 40px 200px;91    box-sizing: border-box;92    color: #A5ABA4;93  }94  .week-range {95    font-size: 38px;96    margin: 30px 0 20px;97    color: #B0B6AF;98  }99  .day-row {100    display: grid;101    grid-template-columns: 150px 1fr;102    align-items: center;103    gap: 20px;104    margin-bottom: 30px;105  }106  .day-label {107    color: #B0B6AF;108    font-size: 40px;109  }110  .event-pill {111    background: #1E4F49;112    color: #DDE2DD;113    height: 110px;114    border-radius: 60px;115    display: flex;116    align-items: center;117    padding: 0 40px;118    font-size: 42px;119  }120 121  /* Floating action */122  .fab {123    position: absolute;124    right: 40px;125    bottom: 220px;126    width: 150px;127    height: 150px;128    border-radius: 36px;129    background: #2A2F2A;130    display: flex;131    align-items: center;132    justify-content: center;133    box-shadow: 0 8px 24px rgba(0,0,0,0.45);134  }135  .fab-plus {136    font-size: 90px;137    color: #CFE3DA;138    line-height: 1;139  }140 141  /* Navigation handle */142  .nav-handle {143    position: absolute;144    bottom: 40px;145    left: 50%;146    transform: translateX(-50%);147    width: 280px;148    height: 20px;149    background: #EAEAEA;150    border-radius: 12px;151    opacity: 0.8;152  }153 154  /* Modal sheet */155  .overlay {156    position: absolute;157    top: 230px;158    left: 40px;159    width: 1000px;160    background: rgba(0,0,0,0.35);161    border-radius: 40px;162    padding: 0 0 40px;163    box-sizing: border-box;164  }165  .sheet {166    margin: 0 10px;167    background: #2E3530;168    border-radius: 40px;169    box-shadow: 0 20px 40px rgba(0,0,0,0.6);170    overflow: hidden;171  }172  .sheet-header {173    position: relative;174    padding: 40px 40px 20px;175    text-align: center;176    font-size: 62px;177    font-weight: 700;178    color: #F2F4F1;179  }180  .close-btn {181    position: absolute;182    left: 30px;183    top: 34px;184    width: 60px;185    height: 60px;186    border-radius: 50%;187    display: flex;188    align-items: center;189    justify-content: center;190    color: #E7EAE6;191  }192 193  .section {194    border-top: 1px solid #3A403A;195    padding: 26px 36px;196  }197  .row {198    display: flex;199    align-items: center;200    gap: 26px;201    padding: 24px 0;202    color: #E7EAE6;203  }204  .avatar {205    width: 72px;206    height: 72px;207    background: #E0E0E0;208    border: 1px solid #BDBDBD;209    border-radius: 50%;210    display: flex;211    align-items: center;212    justify-content: center;213    color: #757575;214    font-size: 16px;215    text-align: center;216    padding: 6px;217    box-sizing: border-box;218  }219  .user-info {220    flex: 1;221  }222  .user-name { font-size: 42px; font-weight: 600; }223  .user-mail { font-size: 34px; color: #C4C9C3; margin-top: 6px; }224 225  .manage-btn {226    margin-top: 22px;227    border: 2px solid #AEB5AE;228    color: #E7EAE6;229    border-radius: 20px;230    padding: 22px 26px;231    display: inline-block;232    font-size: 38px;233  }234 235  .item-icon {236    width: 48px; height: 48px;237    display: inline-flex; align-items: center; justify-content: center;238    color: #CFE3DA;239    flex: 0 0 auto;240  }241  .item-text { flex: 1; font-size: 40px; }242  .warning-dot {243    width: 40px; height: 40px;244    background: #F3C74D;245    border-radius: 50%;246    flex: 0 0 auto;247  }248 249  .footer {250    border-top: 1px solid #3A403A;251    padding: 28px 36px;252    display: flex;253    justify-content: center;254    gap: 26px;255    color: #D5D9D4;256    font-size: 36px;257  }258</style>259</head>260<body>261<div id="render-target">262 263  <!-- Status Bar -->264  <div class="status-bar">265    <div>3:51</div>266    <div class="status-right">267      <!-- Simple glyphs representing status icons -->268      <div class="status-icon">269        <svg width="40" height="40" viewBox="0 0 24 24"><path d="M2 18h20M6 12h12M10 6h4" stroke="#D9D9D9" stroke-width="2" fill="none" stroke-linecap="round"/></svg>270      </div>271      <div class="status-icon">272        <svg width="40" height="40" viewBox="0 0 24 24"><path d="M2 8l10-6 10 6v8a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z" stroke="#D9D9D9" stroke-width="2" fill="none"/></svg>273      </div>274      <div class="status-icon">275        <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#D9D9D9" stroke-width="2" fill="none"/></svg>276      </div>277      <div class="status-icon">278        <svg width="40" height="40" viewBox="0 0 24 24"><path d="M20 6v12M4 10v8" stroke="#D9D9D9" stroke-width="2" fill="none"/></svg>279      </div>280      <div class="status-icon">281        <svg width="44" height="44" viewBox="0 0 24 24"><path d="M19 7l-1-3h-4l-1 3H7v13h10V7z" stroke="#D9D9D9" stroke-width="2" fill="none"/></svg>282      </div>283      <div class="status-icon">284        <svg width="44" height="44" viewBox="0 0 24 24"><path d="M6 12l5 5 7-9" stroke="#D9D9D9" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>285      </div>286    </div>287  </div>288 289  <!-- App Bar -->290  <div class="app-bar">291    <div class="app-left">292      <!-- Hamburger -->293      <svg width="64" height="64" viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18" stroke="#DDE2DD" stroke-width="2" stroke-linecap="round" fill="none"/></svg>294      <div class="app-title">August</div>295      <div class="dropdown-caret"></div>296    </div>297    <div class="app-right">298      <!-- Search -->299      <svg width="64" height="64" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#DDE2DD" stroke-width="2" fill="none"/><path d="M21 21l-5-5" stroke="#DDE2DD" stroke-width="2" stroke-linecap="round"/></svg>300      <!-- Calendar icon -->301      <svg width="64" height="64" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2" stroke="#DDE2DD" stroke-width="2" fill="none"/><path d="M7 3v4M17 3v4M3 10h18" stroke="#DDE2DD" stroke-width="2"/></svg>302      <!-- User avatar placeholder -->303      <div class="avatar" style="width:64px;height:64px;">[IMG: Avatar]</div>304    </div>305  </div>306 307  <!-- Background Calendar Content -->308  <div class="illustration">[IMG: Calendar Illustration]</div>309 310  <div class="calendar-list">311    <div class="week-range">Sep 3 – 9</div>312    <div class="day-row">313      <div class="day-label">Wed 6</div>314      <div class="event-pill">Janmashtami (Smarta)</div>315    </div>316    <div class="day-row">317      <div class="day-label">Thu 7</div>318      <div class="event-pill">Janmashtami</div>319    </div>320 321    <div class="week-range" style="margin-top:60px;">Sep 10 – 16</div>322    <div class="week-range" style="margin-top:40px;">Sep 17 – 23</div>323  </div>324 325  <!-- Floating Action Button -->326  <div class="fab"><div class="fab-plus">+</div></div>327 328  <!-- Modal Overlay - Google Account sheet -->329  <div class="overlay">330    <div class="sheet">331      <div class="sheet-header">332        <div class="close-btn">333          <svg width="38" height="38" viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19" stroke="#E7EAE6" stroke-width="2" stroke-linecap="round"/></svg>334        </div>335        Google336      </div>337 338      <div class="section">339        <div class="row">340          <div class="avatar">[IMG: User Avatar]</div>341          <div class="user-info">342            <div class="user-name">Cole2 Dbwpersonatest</div>343            <div class="user-mail">cole2dbwpersonatest2@gmail.com</div>344            <div class="manage-btn">Manage your Google Account</div>345          </div>346        </div>347      </div>348 349      <div class="section">350        <div class="row">351          <!-- Shield icon -->352          <div class="item-icon">353            <svg width="36" height="36" viewBox="0 0 24 24"><path d="M12 3l7 3v6c0 5-3.5 7.5-7 9-3.5-1.5-7-4-7-9V6l7-3z" stroke="#CFE3DA" stroke-width="2" fill="none"/></svg>354          </div>355          <div class="item-text">Recommended actions</div>356          <div class="warning-dot"></div>357        </div>358      </div>359 360      <div class="section">361        <div class="row">362          <div class="avatar">[IMG: User Avatar]</div>363          <div class="user-info">364            <div class="user-name">Cerebra Research</div>365            <div class="user-mail">dbwscratch.test.id3@gmail.com</div>366          </div>367        </div>368      </div>369 370      <div class="section">371        <div class="row">372          <!-- Person plus icon -->373          <div class="item-icon">374            <svg width="36" height="36" viewBox="0 0 24 24"><circle cx="9" cy="9" r="4" stroke="#CFE3DA" stroke-width="2" fill="none"/><path d="M2 22c2-4 6-5 10-5" stroke="#CFE3DA" stroke-width="2" fill="none"/><path d="M17 8v6M14 11h6" stroke="#CFE3DA" stroke-width="2" stroke-linecap="round"/></svg>375          </div>376          <div class="item-text">Add another account</div>377        </div>378      </div>379 380      <div class="section">381        <div class="row">382          <!-- Settings person icon -->383          <div class="item-icon">384            <svg width="36" height="36" viewBox="0 0 24 24"><circle cx="9" cy="8" r="4" stroke="#CFE3DA" stroke-width="2" fill="none"/><path d="M2 21c2-4 6-5 10-5" stroke="#CFE3DA" stroke-width="2" fill="none"/><path d="M19 12l2 1-1 2 1 2-2 1-1 2-2-1-2 1-1-2-2-1 1-2-1-2 2-1 1-2 2 1 2-1 1 2z" stroke="#CFE3DA" stroke-width="1.5" fill="none"/></svg>385          </div>386          <div class="item-text">Manage accounts on this device</div>387        </div>388      </div>389 390      <div class="footer">391        <div>Privacy Policy</div>392        <div>•</div>393        <div>Terms of Service</div>394      </div>395    </div>396  </div>397 398  <!-- Bottom navigation handle -->399  <div class="nav-handle"></div>400 401</div>402</body>403</html>