GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Reception Reminder UI</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: #111a24;13    color: #ffffff;14  }15 16  /* Top system status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 92px;23    background: #182635;24    display: flex;25    align-items: center;26    padding: 0 32px;27    box-sizing: border-box;28    letter-spacing: 0.5px;29    font-size: 30px;30  }31  .status-left { display: flex; gap: 20px; align-items: center; }32  .status-right { margin-left: auto; display: flex; gap: 24px; align-items: center; opacity: 0.9; }33 34  /* App bar */35  .app-bar {36    position: absolute;37    top: 92px;38    left: 0;39    width: 1080px;40    height: 128px;41    background: #1f2c3e;42    display: flex;43    align-items: center;44    padding: 0 28px;45    box-sizing: border-box;46    border-bottom: 1px solid rgba(255,255,255,0.08);47  }48  .app-title {49    font-size: 44px;50    margin-left: 18px;51    font-weight: 600;52    color: #cfe0f9;53  }54  .app-bar .right-x {55    margin-left: auto;56    width: 56px;57    height: 56px;58    border-radius: 28px;59    display: grid;60    place-items: center;61    color: #d7e2f4;62    opacity: 0.9;63  }64 65  /* Content area */66  .content {67    position: absolute;68    top: 220px;69    left: 0;70    width: 1080px;71    height: 2180px;72    background: #0f1722;73  }74 75  .banner {76    margin: 24px 60px 0 60px;77    height: 140px;78    background: #E0E0E0;79    color: #555;80    border: 1px solid #BDBDBD;81    display: flex;82    align-items: center;83    justify-content: center;84    border-radius: 10px;85    font-size: 36px;86    letter-spacing: 0.5px;87  }88 89  .card {90    margin: 24px 0 0 0;91    padding: 28px 36px;92    background: #1a2738;93    border-top: 1px solid rgba(255,255,255,0.05);94    border-bottom: 1px solid rgba(255,255,255,0.05);95  }96  .item-row {97    display: flex;98    align-items: center;99  }100  .item-title {101    color: #ffffff;102    font-size: 48px;103    font-weight: 600;104  }105  .item-sub {106    color: #9eb4d1;107    margin-top: 12px;108    font-size: 30px;109  }110  .item-right {111    margin-left: auto;112    text-align: right;113  }114  .pill-time {115    color: #a7c4ff;116    font-size: 34px;117  }118  .star {119    color: #ff6b6b;120    font-size: 44px;121    margin-top: 16px;122  }123 124  /* Tabs bottom (behind overlay) */125  .bottom-tabs {126    position: absolute;127    bottom: 60px;128    left: 60px;129    right: 60px;130    display: flex;131    justify-content: space-between;132    color: #cfd8e8;133    font-weight: 700;134    letter-spacing: 1px;135    font-size: 36px;136  }137 138  /* Floating Action Button */139  .fab {140    position: absolute;141    right: 60px;142    bottom: 160px;143    width: 140px;144    height: 140px;145    border-radius: 70px;146    background: #0f1a2a;147    box-shadow: 0 10px 24px rgba(0,0,0,0.45);148    display: grid;149    place-items: center;150    border: 2px solid rgba(255,255,255,0.08);151    color: #d9e5ff;152    font-size: 76px;153  }154 155  /* Overlay modal */156  .overlay {157    position: absolute;158    inset: 0;159    background: rgba(0,0,0,0.55);160  }161  .modal {162    position: absolute;163    left: 90px;164    right: 90px;165    top: 760px;166    background: #e9eef9;167    color: #1a2a45;168    border-radius: 28px;169    overflow: hidden;170    box-shadow: 0 24px 60px rgba(0,0,0,0.6);171  }172  .modal-header {173    background: #2e466f;174    color: #d9e7ff;175    height: 120px;176    display: flex;177    align-items: center;178    justify-content: center;179    position: relative;180    font-size: 44px;181    font-weight: 600;182    letter-spacing: 1px;183  }184  .share-btn {185    position: absolute;186    right: 28px;187    top: 28px;188    width: 64px;189    height: 64px;190    display: grid;191    place-items: center;192    border-radius: 14px;193    color: #f4f8ff;194  }195  .modal-body {196    padding: 44px 48px 24px 48px;197    position: relative;198    font-size: 34px;199  }200  .title-row {201    display: flex;202    align-items: center;203    gap: 18px;204  }205  .modal-title {206    font-size: 64px;207    font-weight: 700;208    color: #132338;209  }210  .critical {211    margin-left: 20px;212    background: #d12a2a;213    color: #fff;214    border-radius: 16px;215    padding: 8px 18px;216    font-size: 30px;217    font-weight: 700;218  }219  .sub-hotel {220    font-size: 42px;221    margin-top: 20px;222    color: #1e3150;223  }224  .detail {225    margin-top: 36px;226    color: #263a5c;227    line-height: 1.6;228  }229  .detail b { color: #0e2443; }230  .kebab {231    position: absolute;232    right: 30px;233    bottom: 140px;234    color: #394d73;235  }236 237  .modal-actions {238    display: flex;239    background: #dbe3f3;240    padding: 22px 28px;241    gap: 70px;242    justify-content: space-around;243    border-top: 1px solid #c6d3ea;244  }245  .action {246    display: flex;247    align-items: center;248    gap: 16px;249    color: #1b2d4d;250    font-size: 36px;251    font-weight: 600;252  }253  .icon {254    width: 48px;255    height: 48px;256    display: inline-flex;257    align-items: center;258    justify-content: center;259  }260 261  /* Simple SVGs use currentColor */262  svg { width: 48px; height: 48px; fill: currentColor; }263 264</style>265</head>266<body>267<div id="render-target">268 269  <!-- Status bar -->270  <div class="status-bar">271    <div class="status-left">272      <span>8:11</span>273      <span style="opacity:0.8;">⬤⬜⬜⬜</span>274    </div>275    <div class="status-right">276      <span>◔</span>277      <span>▮▮▮</span>278      <span>◉</span>279    </div>280  </div>281 282  <!-- App bar -->283  <div class="app-bar">284    <div class="back">285      <svg viewBox="0 0 24 24"><path d="M15.5 4.5 7 12l8.5 7.5-1.5 1.5L4 12l10-9 1.5 1.5z"/></svg>286    </div>287    <div class="app-title">Reception</div>288    <div class="right-x">289      <svg viewBox="0 0 24 24"><path d="M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12 19 6.4z"/></svg>290    </div>291  </div>292 293  <!-- Content area behind overlay -->294  <div class="content">295    <div class="banner">[IMG: Blue Ad Banner]</div>296 297    <div class="card">298      <div class="item-row">299        <div>300          <div class="item-title">Reception</div>301          <div class="item-sub">06/21/2023 11:01 AM</div>302          <div class="item-sub">One Time</div>303        </div>304        <div class="item-right">305          <div class="pill-time">in 8 days</div>306          <div class="star">★</div>307        </div>308      </div>309    </div>310 311    <div class="bottom-tabs">312      <div>ACTIVE</div>313      <div>COMPLETED</div>314    </div>315 316    <div class="fab">+</div>317  </div>318 319  <!-- Overlay modal -->320  <div class="overlay"></div>321 322  <div class="modal">323    <div class="modal-header">324      in 8 days325      <div class="share-btn">326        <svg viewBox="0 0 24 24"><path d="M18 16.1c-.7 0-1.3.3-1.7.8L8.9 12.9c.1-.3.1-.6 0-.9l7.4-4.1c.5.5 1 .8 1.7.8 1.3 0 2.3-1 2.3-2.3S19.3 5 18 5s-2.3 1-2.3 2.3c0 .1 0 .3.1.4l-7.4 4.1c-.5-.5-1-.8-1.7-.8-1.3 0-2.3 1-2.3 2.3s1 2.3 2.3 2.3c.7 0 1.3-.3 1.7-.8l6.9 4c0 .1-.1.3-.1.5 0 1.2 1 2.2 2.3 2.2s2.3-1 2.3-2.3-1-2.3-2.3-2.3z"/></svg>327      </div>328    </div>329 330    <div class="modal-body">331      <div class="title-row">332        <div class="modal-title">Reception</div>333        <div class="critical">Critical</div>334      </div>335      <div class="sub-hotel">Hotel Leela</div>336 337      <div class="detail"><b>Repeat:</b> One Time</div>338      <div class="detail"><b>Scheduled for</b> 06/21/2023 11:01 AM</div>339 340      <div class="kebab">341        <svg viewBox="0 0 24 24"><path d="M12 5a2 2 0 110-4 2 2 0 010 4zm0 9a2 2 0 110-4 2 2 0 010 4zm0 9a2 2 0 110-4 2 2 0 010 4z"/></svg>342      </div>343    </div>344 345    <div class="modal-actions">346      <div class="action">347        <span class="icon">348          <svg viewBox="0 0 24 24"><path d="M18.3 5.7 12 12l6.3 6.3-1.4 1.4L9.2 12l7.7-7.7 1.4 1.4z"/></svg>349        </span>350        <span>Dismiss</span>351      </div>352      <div class="action">353        <span class="icon" style="color:#1f7a3f;">354          <svg viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.5L4 14.2 9 19l11-11-1.5-1.5L9 16.2z"/></svg>355        </span>356        <span>Complete</span>357      </div>358      <div class="action">359        <span class="icon">360          <svg viewBox="0 0 24 24"><path d="M3 17.3V21h3.7l10.9-10.9-3.7-3.7L3 17.3zM20.7 7.1c.4-.4.4-1 0-1.4l-2.4-2.4c-.4-.4-1-.4-1.4 0l-1.8 1.8 3.7 3.7 1.9-1.7z"/></svg>361        </span>362        <span>Edit</span>363      </div>364      <div class="action">365        <span class="icon" style="color:#a53131;">366          <svg viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>367        </span>368        <span>Delete</span>369      </div>370    </div>371  </div>372 373</div>374</body>375</html>