GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Booking UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #111; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Header */18  .header {19    position: relative;20    width: 100%;21    height: 520px;22    background: #0A3A8A; /* deep booking blue */23    color: #fff;24  }25  .status-bar {26    position: absolute;27    top: 22px;28    left: 28px;29    right: 28px;30    height: 50px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    font-weight: 600;35    font-size: 36px;36    opacity: 0.95;37  }38  .status-icons {39    display: flex;40    align-items: center;41    gap: 16px;42  }43  .status-dot { width: 10px; height: 10px; background: #cfe1ff; border-radius: 50%; opacity: 0.8; }44  .status-rect { width: 34px; height: 22px; border: 2px solid #cfe1ff; border-radius: 4px; }45  .brand {46    position: absolute;47    top: 120px;48    left: 0; right: 0;49    text-align: center;50    font-size: 76px;51    font-weight: 800;52    letter-spacing: 0.5px;53  }54  .header-actions {55    position: absolute;56    top: 120px;57    right: 32px;58    display: flex;59    gap: 28px;60  }61  .action-circle {62    width: 80px; height: 80px;63    border: 2px solid rgba(255,255,255,0.8);64    border-radius: 50%;65    display: flex; align-items: center; justify-content: center;66  }67  .badge {68    position: absolute;69    top: -6px; right: -6px;70    background: #E53935;71    color: #fff;72    width: 44px; height: 44px; border-radius: 50%;73    font-size: 28px; font-weight: 700;74    display: flex; align-items: center; justify-content: center;75    box-shadow: 0 2px 0 rgba(0,0,0,0.2);76  }77 78  /* Tabs */79  .tabs {80    position: absolute;81    bottom: 36px;82    left: 32px; right: 32px;83    display: flex;84    align-items: center;85    gap: 40px;86  }87  .tab {88    color: #dbe7ff;89    display: flex; align-items: center; gap: 16px;90    font-size: 40px; font-weight: 700;91    padding: 18px 28px;92    border-radius: 48px;93  }94  .tab.active {95    border: 2px solid #ffffff;96    color: #ffffff;97  }98  .tab svg { stroke: #ffffff; }99 100  /* Search card */101  .search-card {102    margin: 24px 32px 0 32px;103    background: #fff;104    border: 8px solid #E9AD38; /* golden mustard */105    border-radius: 28px;106    box-shadow: 0 10px 20px rgba(0,0,0,0.15);107    overflow: hidden;108  }109  .sc-row {110    display: flex; align-items: center;111    padding: 30px 32px;112    font-size: 38px;113    color: #222;114    gap: 22px;115  }116  .divider { border-top: 6px solid #E9AD38; }117  .sc-row svg { width: 48px; height: 48px; stroke: #222; }118  .search-btn {119    background: #2E61E8;120    color: #fff;121    text-align: center;122    font-size: 44px; font-weight: 800;123    padding: 34px 20px;124  }125 126  /* Sections */127  .section {128    padding: 40px 32px 0 32px;129  }130  .section h2 {131    margin: 24px 0;132    font-size: 56px;133    font-weight: 800;134    color: #111;135  }136  .cards-row {137    display: flex; gap: 28px;138  }139  .card {140    flex: 1;141    min-width: 480px;142    border-radius: 28px;143    background: #fff;144    box-shadow: 0 8px 18px rgba(0,0,0,0.1);145  }146  .card.blue {147    background: #0A3A8A;148    color: #fff;149    padding: 36px;150  }151  .card.outlined {152    border: 3px solid #2E61E8;153    padding: 36px;154  }155  .genius-title {156    font-size: 56px; font-weight: 800;157    margin-bottom: 16px;158  }159  .genius-dot {160    display: inline-block;161    width: 16px; height: 16px; background: #FFD347; border-radius: 50%;162    margin-right: 8px; vertical-align: middle;163  }164  .card.outlined h3 {165    font-size: 44px; font-weight: 800; color: #000; margin: 0 0 12px 0;166  }167  .card.outlined p {168    font-size: 34px; color: #333; margin: 0;169  }170 171  /* Continue search list card */172  .list-card {173    margin-top: 24px;174    background: #fff;175    border-radius: 28px;176    box-shadow: 0 8px 18px rgba(0,0,0,0.12);177    padding: 26px;178    display: flex; align-items: center; gap: 24px;179  }180  .img-ph {181    width: 132px; height: 132px;182    background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 16px;183    display: flex; align-items: center; justify-content: center;184    color: #757575; font-size: 28px; text-align: center; padding: 8px;185  }186  .list-title { font-size: 42px; font-weight: 800; }187  .list-sub { font-size: 32px; color: #666; margin-top: 6px; }188 189  /* Bottom navigation */190  .bottom-nav {191    position: absolute;192    bottom: 64px;193    left: 0; right: 0;194    height: 170px;195    background: #fff;196    border-top: 2px solid #e5e5e5;197    display: flex; align-items: center; justify-content: space-around;198  }199  .bn-item {200    width: 25%;201    display: flex; flex-direction: column; align-items: center; justify-content: center;202    gap: 14px;203    color: #333;204    font-size: 28px;205    font-weight: 600;206  }207  .bn-item.active { color: #2E61E8; }208  .bn-icon svg { width: 56px; height: 56px; stroke: currentColor; }209  .profile-badge {210    width: 64px; height: 64px; border-radius: 50%;211    border: 5px solid #3DB5A3; color: #333;212    display: flex; align-items: center; justify-content: center;213    font-weight: 800;214  }215 216  .home-indicator {217    position: absolute;218    bottom: 16px;219    left: 50%; transform: translateX(-50%);220    width: 280px; height: 12px; background: #cfcfcf; border-radius: 6px;221  }222</style>223</head>224<body>225<div id="render-target">226 227  <!-- Header -->228  <div class="header">229    <div class="status-bar">230      <div>2:48</div>231      <div class="status-icons">232        <div class="status-rect"></div>233        <div class="status-rect" style="width: 40px;"></div>234