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>Mobile UI - Snooze Reminder</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }9 10  /* Root render target */11  #render-target {12    width: 1080px;13    height: 2400px;14    position: relative;15    overflow: hidden;16    border-radius: 56px;17    background: #0b0f14;18    box-shadow: 0 20px 60px rgba(0,0,0,0.4);19    color: #fff;20  }21 22  /* Wallpaper placeholder */23  .wallpaper {24    position: absolute;25    inset: 0;26    background: #E0E0E0;27    border: 1px solid #BDBDBD;28    color: #757575;29    display: flex;30    align-items: center;31    justify-content: center;32    font-size: 28px;33    letter-spacing: 0.5px;34  }35  .scrim {36    position: absolute;37    inset: 0;38    background: rgba(0,0,0,0.35);39  }40 41  /* Status text */42  .status-row {43    position: absolute;44    top: 32px;45    left: 40px;46    right: 40px;47    height: 48px;48    display: flex;49    align-items: center;50    gap: 10px;51    opacity: 0.9;52    font-size: 26px;53  }54  .status-dot {55    width: 18px; height: 18px; border-radius: 50%; background: #b7f; margin-right: 6px;56  }57 58  /* Notification card */59  .notif-card {60    position: absolute;61    top: 110px;62    left: 36px;63    right: 36px;64    background: #ffffff;65    color: #2c2c2c;66    border-radius: 36px;67    box-shadow: 0 18px 40px rgba(0,0,0,0.35);68    padding: 28px 28px 32px 28px;69  }70  .notif-header {71    display: flex;72    align-items: center;73  }74  .app-icon {75    width: 64px; height: 64px; border-radius: 50%;76    background: #2962FF;77    display: grid; place-items: center;78    color: #fff;79    margin-right: 18px;80    flex: 0 0 auto;81  }82  .app-icon svg { width: 34px; height: 34px; }83  .notif-title {84    font-size: 34px;85    font-weight: 700;86    letter-spacing: 0.2px;87    color: #1b1b1b;88  }89  .notif-sub {90    font-size: 28px;91    color: #777;92    margin-left: 8px;93  }94  .chevron-wrap {95    margin-left: auto;96    width: 56px; height: 56px; border-radius: 28px;97    background: #F1F1F6;98    display: grid; place-items: center;99  }100  .chevron-wrap svg { width: 26px; height: 26px; fill: #40424a; }101 102  .notif-actions {103    display: flex;104    gap: 20px;105    margin-top: 26px;106    padding-left: 82px; /* align under text (after icon) */107  }108  .pill-btn {109    padding: 18px 38px;110    border-radius: 26px;111    background: #ECEAF5;112    color: #2f2f3a;113    font-weight: 700;114    letter-spacing: 1px;115    font-size: 24px;116  }117 118  /* Snooze sheet */119  .sheet {120    position: absolute;121    left: 36px;122    right: 36px;123    top: 720px;124    border-radius: 28px;125    overflow: hidden;126    box-shadow: 0 26px 60px rgba(0,0,0,0.55);127  }128  .sheet-head {129    background: #3f5875;130    padding: 28px 28px 22px;131    text-align: center;132    color: #d9e3ef;133  }134  .sheet-head .label {135    font-size: 34px;136    opacity: 0.9;137  }138  .sheet-head .value {139    margin-top: 6px;140    font-size: 66px;141    font-weight: 800;142    color: #ffffff;143  }144  .sheet-body {145    background: #e9edf6;146    color: #2a3440;147    padding: 24px 26px 20px;148  }149 150  .grid {151    display: grid;152    grid-template-columns: repeat(5, 1fr);153    gap: 26px 10px;154    margin-top: 8px;155  }156  .cell {157    text-align: center;158    padding: 16px 6px;159  }160  .cell .num {161    font-size: 48px;162    font-weight: 800;163    color: #243244;164  }165  .cell .unit {166    margin-top: 6px;167    font-size: 26px;168    color: #5c6b7c;169  }170 171  .sheet-footer {172    display: flex;173    align-items: center;174    justify-content: space-between;175    margin-top: 26px;176    padding: 4px 8px 6px;177  }178  .edit-icon {179    width: 48px; height: 48px; border-radius: 8px;180    border: 2px solid #6b7b8b;181    display: grid; place-items: center;182    color: #4a5a6a;183  }184  .edit-icon svg { width: 24px; height: 24px; fill: #4a5a6a; }185  .footer-actions {186    display: flex; gap: 42px; align-items: center;187    font-size: 30px;188  }189  .link {190    color: #395a7a;191    font-weight: 600;192  }193 194  /* Dock icons (subtle, background feel) */195  .dock {196    position: absolute;197    bottom: 250px;198    left: 90px;199    right: 90px;200    display: flex;201    justify-content: space-between;202    opacity: 0.9;203  }204  .dock .icon {205    width: 140px; height: 140px; background: rgba(255,255,255,0.12);206    border-radius: 50%;207    display: grid; place-items: center;208    backdrop-filter: blur(2px);209    border: 1px solid rgba(255,255,255,0.18);210    color: rgba(255,255,255,0.9);211    font-size: 22px;212  }213 214  /* Search pill (approx) */215  .search-pill {216    position: absolute;217    bottom: 140px;218    left: 90px;219    right: 90px;220    height: 96px;221    background: rgba(255,255,255,0.16);222    border: 1px solid rgba(255,255,255,0.2);223    border-radius: 48px;224    display: flex;225    align-items: center;226    padding: 0 28px;227    color: rgba(255,255,255,0.92);228    font-size: 28px;229    gap: 14px;230  }231  .search-dot {232    width: 36px; height: 36px; border-radius: 50%; background: #4285F4;233    box-shadow: 12px 0 0 #EA4335, 24px 0 0 #FBBC05, 36px 0 0 #34A853;234    margin-right: 18px;235  }236 237  /* Home indicator */238  .home-indicator {239    position: absolute;240    left: 50%;241    bottom: 34px;242    transform: translateX(-50%);243    width: 230px; height: 10px;244    border-radius: 8px;245    background: rgba(255,255,255,0.9);246  }247</style>248</head>249<body>250  <div id="render-target">251    <div class="wallpaper">[IMG: Home wallpaper]</div>252    <div class="scrim"></div>253 254    <div class="status-row">255      <div class="status-dot"></div>256      <div>Reminder</div>257    </div>258 259    <!-- Notification card -->260    <div class="notif-card">261      <div class="notif-header">262        <div class="app-icon" aria-hidden="true">263          <!-- Simple reminder/bell icon -->264          <svg viewBox="0 0 24 24">265            <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zM18 16v-5c0-3.07-1.63-5.64-4.5-6.32V4a1.5 1.5 0 10-3 0v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>266          </svg>267        </div>268        <div style="display:flex; align-items:baseline; gap:6px; flex:1 1 auto;">269          <div class="notif-title">[Snooze] VCA Virtual Meet</div>270          <div class="notif-sub">• now</div>271        </div>272        <div class="chevron-wrap" aria-hidden="true">273          <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>274        </div>275      </div>276 277      <div class="notif-actions">278        <div class="pill-btn">SNOOZE</div>279        <div class="pill-btn">DISMISS</div>280      </div>281    </div>282 283    <!-- Snooze sheet -->284    <div class="sheet">285      <div class="sheet-head">286        <div class="label">Snooze duration</div>287        <div class="value">10 minutes</div>288      </div>289      <div class="sheet-body">290        <div class="grid">291          <div class="cell">292            <div class="num">5</div>293            <div class="unit">Min</div>294          </div>295          <div class="cell">296            <div class="num">10</div>297            <div class="unit">Min</div>298          </div>299          <div class="cell">300            <div class="num">15</div>301            <div class="unit">Min</div>302          </div>303          <div class="cell">304            <div class="num">30</div>305            <div class="unit">Min</div>306          </div>307          <div class="cell">308            <div class="num">45</div>309            <div class="unit">Min</div>310          </div>311 312          <div class="cell">313            <div class="num">1</div>314            <div class="unit">Hour</div>315          </div>316          <div class="cell">317            <div class="num">2</div>318            <div class="unit">Hour</div>319          </div>320          <div class="cell">321            <div class="num">3</div>322            <div class="unit">Hour</div>323          </div>324          <div class="cell">325            <div class="num">6</div>326            <div class="unit">Hour</div>327          </div>328          <div class="cell">329            <div class="num">1</div>330            <div class="unit">Day</div>331          </div>332        </div>333 334        <div class="sheet-footer">335          <div class="edit-icon" title="Custom">336            <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1.003 1.003 0 000-1.42l-2.34-2.34a1.003 1.003 0 00-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82z"/></svg>337          </div>338          <div class="footer-actions">339            <div class="link">Dismiss</div>340            <div class="link">Snooze</div>341          </div>342        </div>343      </div>344    </div>345 346    <!-- Dock icons to mimic home screen -->347    <div class="dock">348      <div class="icon">Phone</div>349      <div class="icon">Messages</div>350      <div class="icon">Chrome</div>351      <div class="icon">Camera</div>352    </div>353 354    <div class="search-pill">355      <div class="search-dot" aria-hidden="true"></div>356      Search357    </div>358 359    <div class="home-indicator"></div>360  </div>361</body>362</html>