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>UI Render</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13    color: #222;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #ffffff;21  }22 23  /* Top system status bar */24  .status-bar {25    height: 120px;26    background: #9E9E9E;27    color: #fff;28    display: flex;29    align-items: center;30    padding: 0 40px;31    font-size: 40px;32    letter-spacing: 0.5px;33  }34  .status-spacer {35    flex: 1;36  }37  .status-icon {38    width: 42px;39    height: 42px;40    margin-left: 22px;41    border-radius: 4px;42    background: rgba(255,255,255,0.6);43  }44 45  /* App bar */46  .app-bar {47    height: 180px;48    background: #fff;49    display: flex;50    align-items: center;51    padding: 0 40px;52    border-bottom: 1px solid #eee;53  }54  .app-left, .app-right {55    display: flex;56    align-items: center;57  }58  .app-left {59    flex: 1;60  }61  .icon-btn {62    width: 84px;63    height: 84px;64    display: flex;65    align-items: center;66    justify-content: center;67    border-radius: 42px;68  }69  .icon-btn svg {70    width: 48px;71    height: 48px;72    stroke: #333;73    fill: none;74    stroke-width: 4;75  }76  .heart svg {77    fill: none;78    stroke: #E64A62;79  }80  .share svg {81    stroke: #333;82  }83 84  /* Content area */85  .content {86    position: absolute;87    left: 0;88    right: 0;89    top: 300px; /* status + app bar */90    bottom: 380px; /* make room for bottom bar + safe area */91    overflow-y: auto;92    -webkit-overflow-scrolling: touch;93    padding: 0 48px;94  }95  .divider {96    height: 1px;97    background: #E5E5E5;98    margin: 40px 0 0 0;99  }100  .section {101    padding: 48px 0;102  }103  .h1 {104    font-size: 72px;105    font-weight: 700;106    margin: 32px 0 24px 0;107    line-height: 1.1;108  }109  .subhead {110    font-size: 44px;111    font-weight: 600;112    margin: 8px 0 20px 0;113  }114  .body {115    font-size: 40px;116    color: #555;117    line-height: 1.5;118    margin-bottom: 28px;119  }120 121  /* Outline button */122  .outline-btn {123    display: inline-flex;124    align-items: center;125    justify-content: center;126    height: 140px;127    padding: 0 48px;128    border: 2px solid #CBCBCB;129    border-radius: 28px;130    font-size: 44px;131    font-weight: 600;132    color: #222;133    background: #fff;134    box-shadow: 0 0 0 1px rgba(0,0,0,0.02);135  }136 137  /* Host header */138  .host-header {139    display: flex;140    align-items: center;141    justify-content: space-between;142  }143  .host-title {144    font-size: 64px;145    font-weight: 700;146    line-height: 1.2;147    margin: 0 0 12px 0;148  }149  .host-sub {150    font-size: 38px;151    color: #777;152    margin-bottom: 36px;153  }154  .avatar {155    width: 140px;156    height: 140px;157    border-radius: 70px;158    background: #E0E0E0;159    border: 1px solid #BDBDBD;160    display: flex;161    align-items: center;162    justify-content: center;163    color: #757575;164    font-size: 26px;165    text-align: center;166  }167 168  /* Feature rows */169  .feature-row {170    display: flex;171    align-items: center;172    margin: 26px 0;173  }174  .feature-icon {175    width: 64px;176    height: 64px;177    margin-right: 24px;178    display: inline-flex;179    align-items: center;180    justify-content: center;181  }182  .feature-icon svg {183    width: 64px;184    height: 64px;185  }186  .feature-text {187    font-size: 44px;188    color: #222;189  }190 191  /* Contact button */192  .contact-btn {193    display: flex;194    align-items: center;195    justify-content: center;196    height: 140px;197    border: 2px solid #CBCBCB;198    border-radius: 28px;199    font-size: 44px;200    font-weight: 600;201    color: #222;202    background: #fff;203    margin: 40px 0 40px 0;204  }205 206  /* Bottom price bar */207  .bottom-bar {208    position: absolute;209    left: 0;210    right: 0;211    bottom: 140px; /* above safe area */212    height: 240px;213    background: #fff;214    border-top: 1px solid #eee;215    box-shadow: 0 -6px 24px rgba(0,0,0,0.06);216    display: flex;217    align-items: center;218    padding: 0 48px;219  }220  .price-left {221    flex: 1;222  }223  .price {224    font-size: 52px;225    font-weight: 700;226    margin-bottom: 12px;227  }228  .price small {229    font-weight: 400;230  }231  .link {232    font-size: 40px;233    color: #757575;234    text-decoration: underline;235  }236  .cta {237    height: 140px;238    width: 420px;239    border-radius: 24px;240    background: #FF385C;241    color: #fff;242    font-size: 46px;243    font-weight: 700;244    display: flex;245    align-items: center;246    justify-content: center;247  }248 249  /* Safe area / home indicator */250  .safe-area {251    position: absolute;252    left: 0;253    right: 0;254    bottom: 0;255    height: 140px;256    background: #000;257    display: flex;258    align-items: center;259    justify-content: center;260  }261  .home-pill {262    width: 300px;263    height: 18px;264    border-radius: 9px;265    background: #fff;266    opacity: 0.9;267  }268</style>269</head>270<body>271<div id="render-target">272 273  <!-- System status bar -->274  <div class="status-bar">275    <div>12:53</div>276    <div class="status-spacer"></div>277    <div class="status-icon"></div>278    <div class="status-icon"></div>279    <div class="status-icon"></div>280  </div>281 282  <!-- App bar -->283  <div class="app-bar">284    <div class="app-left">285      <button class="icon-btn" aria-label="Back" style="border:none;background:transparent;">286        <svg viewBox="0 0 24 24">287          <path d="M15 6 L9 12 L15 18" />288        </svg>289      </button>290    </div>291    <div class="app-right">292      <button class="icon-btn share" aria-label="Share" style="border:none;background:transparent;margin-right:8px;">293        <svg viewBox="0 0 24 24">294          <circle cx="6" cy="12" r="2"></circle>295          <circle cx="18" cy="6" r="2"></circle>296          <circle cx="18" cy="18" r="2"></circle>297          <path d="M8 12 L16 7" />298          <path d="M8 12 L16 17" />299        </svg>300      </button>301      <button class="icon-btn heart" aria-label="Save" style="border:none;background:transparent;">302        <svg viewBox="0 0 24 24">303          <path d="M12 20 C12 20 5 15 4 10 C3 6 6 4 8.8 4 C10.5 4 12 5.2 12 6.3 C12 5.2 13.5 4 15.2 4 C18 4 21 6 20 10 C19 15 12 20 12 20 Z"/>304        </svg>305      </button>306    </div>307  </div>308 309  <!-- Scrollable content -->310  <div class="content">311    <div class="divider"></div>312 313    <div class="section">314      <div class="h1">Accessibility</div>315      <div class="subhead">Access providers</div>316      <div class="body">Free admission for people assisting guests with disabilities</div>317      <button class="outline-btn">Show all feature details</button>318    </div>319 320    <div class="divider"></div>321 322    <div class="section">323      <div class="host-header">324        <div>325          <div class="host-title">Meet your Host, Kristina</div>326          <div class="host-sub">Host on Airbnb since 2018</div>327        </div>328        <div class="avatar">[IMG: Host Avatar]</div>329      </div>330 331      <div class="feature-row">332        <div class="feature-icon">333          <svg viewBox="0 0 24 24" fill="#111">334            <path d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 6.9 1-5 4.9 1.2 6.9z"></path>335          </svg>336        </div>337        <div class="feature-text">298 Reviews</div>338      </div>339 340      <div class="feature-row">341        <div class="feature-icon">342          <svg viewBox="0 0 24 24">343            <path d="M12 2 L19 6 V12 C19 16 16 19 12 22 C8 19 5 16 5 12 V6 L12 2 Z" fill="#111"></path>344            <path d="M8 12 L11 15 L16 10" stroke="#fff" stroke-width="2" fill="none"></path>345          </svg>346        </div>347        <div class="feature-text">Identity verified</div>348      </div>349 350      <div class="body">351        I grew up with French Alpine goats, and my boyfriend, Adrian, grew up on Bowen Island. We love all aspects of the outdoors, and would love to share this passion for fun and adventure with you!352      </div>353 354      <div class="contact-btn">Contact host</div>355    </div>356 357    <div style="height: 120px;"></div>358  </div>359 360  <!-- Bottom price bar -->361  <div class="bottom-bar">362    <div class="price-left">363      <div class="price">From $41 <small>/ person</small></div>364      <div class="link">Show all prices</div>365    </div>366    <div class="cta">Show dates</div>367  </div>368 369  <!-- Safe area / home indicator -->370  <div class="safe-area">371    <div class="home-pill"></div>372  </div>373 374</div>375</body>376</html>