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>Reviews Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: Arial, Helvetica, sans-serif;16    color: #212121;17  }18 19  /* Header */20  .header {21    position: relative;22    background: #143D8C;23    height: 260px;24    color: #fff;25  }26  .status-bar {27    height: 88px;28    display: flex;29    align-items: center;30    justify-content: space-between;31    padding: 0 36px;32    font-size: 40px;33    font-weight: 600;34    letter-spacing: 0.3px;35  }36  .status-icons {37    display: flex;38    align-items: center;39    gap: 28px;40  }41  .nav-bar {42    display: flex;43    align-items: center;44    justify-content: space-between;45    padding: 18px 28px 28px 28px;46  }47  .nav-left {48    display: flex;49    align-items: center;50    gap: 20px;51  }52  .title {53    font-size: 56px;54    font-weight: 700;55    color: #fff;56  }57  .icon-btn {58    width: 72px;59    height: 72px;60    border-radius: 36px;61    border: 2px solid rgba(255,255,255,0.9);62    display: flex;63    align-items: center;64    justify-content: center;65  }66 67  /* Content */68  .content {69    position: absolute;70    top: 260px;71    left: 0;72    right: 0;73    bottom: 0;74    padding: 0 36px 180px;75    overflow: hidden;76  }77 78  .reply-card {79    position: relative;80    background: #F1F1F1;81    border-radius: 24px;82    padding: 36px;83    margin-top: 48px;84    box-sizing: border-box;85  }86  .reply-card::before {87    content: "";88    position: absolute;89    top: -20px;90    left: 50%;91    transform: translateX(-50%);92    width: 0; height: 0;93    border-left: 20px solid transparent;94    border-right: 20px solid transparent;95    border-bottom: 20px solid #F1F1F1;96  }97  .reply-header {98    display: flex;99    align-items: center;100    gap: 18px;101    color: #333;102    font-size: 40px;103    font-weight: 700;104    margin-bottom: 16px;105  }106  .reply-text {107    color: #6d6d6d;108    font-size: 34px;109    line-height: 1.5;110    max-width: 900px;111  }112  .link {113    margin-top: 16px;114    color: #2467C0;115    font-size: 36px;116    font-weight: 600;117  }118 119  .helpful-row {120    display: flex;121    align-items: center;122    gap: 18px;123    margin-top: 42px;124    color: #2467C0;125    font-size: 38px;126    font-weight: 600;127  }128  .helpful-note {129    margin-top: 18px;130    color: #6d6d6d;131    font-size: 34px;132  }133  .divider {134    height: 1px;135    background: #E5E5E5;136    margin: 36px 0;137  }138 139  .reviewer {140    display: flex;141    align-items: center;142    justify-content: space-between;143  }144  .reviewer-left {145    display: flex;146    align-items: center;147    gap: 24px;148  }149  .avatar {150    width: 96px;151    height: 96px;152    border-radius: 48px;153    background: #E0E0E0;154    border: 1px solid #BDBDBD;155    display: flex;156    align-items: center;157    justify-content: center;158    color: #757575;159    font-size: 24px;160  }161  .reviewer-meta {162    display: flex;163    flex-direction: column;164    gap: 6px;165  }166  .reviewer-name {167    font-size: 42px;168    font-weight: 700;169    color: #222;170  }171  .reviewer-location {172    display: flex;173    align-items: center;174    gap: 12px;175    font-size: 34px;176    color: #555;177  }178  .flag {179    width: 56px;180    height: 36px;181    background: #E0E0E0;182    border: 1px solid #BDBDBD;183    display: flex;184    align-items: center;185    justify-content: center;186    color: #757575;187    font-size: 20px;188  }189  .score-badge {190    background: #143D8C;191    color: #fff;192    font-size: 40px;193    font-weight: 700;194    padding: 16px 24px;195    border-radius: 18px;196  }197 198  .date {199    margin-top: 28px;200    font-size: 34px;201    color: #666;202  }203  .review-title {204    margin-top: 10px;205    font-size: 48px;206    font-weight: 800;207    color: #222;208  }209 210  .pros-cons {211    margin-top: 28px;212    display: flex;213    flex-direction: column;214    gap: 26px;215  }216  .pc-item {217    display: flex;218    align-items: flex-start;219    gap: 22px;220    font-size: 36px;221    color: #333;222    line-height: 1.45;223  }224  .pc-icon {225    width: 56px;226    height: 56px;227  }228 229  .booking-card {230    margin-top: 34px;231    border: 1px solid #E5E5E5;232    border-radius: 18px;233    padding: 22px;234    display: flex;235    align-items: center;236    gap: 22px;237  }238  .room-thumb {239    width: 140px;240    height: 100px;241    background: #E0E0E0;242    border: 1px solid #BDBDBD;243    display: flex;244    align-items: center;245    justify-content: center;246    color: #757575;247    font-size: 26px;248  }249  .booking-info {250    flex: 1;251    display: flex;252    flex-direction: column;253    gap: 8px;254  }255  .booking-title {256    font-size: 40px;257    font-weight: 800;258    color: #222;259  }260  .booking-meta {261    font-size: 32px;262    color: #666;263  }264  .chevron {265    width: 40px;266    height: 40px;267  }268 269  .reply-card.secondary {270    margin-top: 48px;271  }272 273  /* CTA button */274  .cta {275    position: absolute;276    left: 24px;277    right: 24px;278    bottom: 120px;279    height: 130px;280    background: #2F6DB5;281    border-radius: 16px;282    display: flex;283    align-items: center;284    justify-content: center;285    color: #fff;286    font-size: 46px;287    font-weight: 800;288    box-shadow: 0 6px 12px rgba(0,0,0,0.1);289  }290 291  /* Home indicator */292  .home-indicator {293    position: absolute;294    bottom: 44px;295    left: 50%;296    transform: translateX(-50%);297    width: 360px;298    height: 14px;299    background: rgba(0,0,0,0.12);300    border-radius: 7px;301  }302</style>303</head>304<body>305<div id="render-target">306 307  <div class="header">308    <div class="status-bar">309      <div>8:45</div>310      <div class="status-icons">311        <!-- simple dots to emulate status icons -->312        <svg width="30" height="30"><circle cx="15" cy="15" r="6" fill="#fff"/></svg>313        <svg width="30" height="30"><circle cx="15" cy="15" r="6" fill="#fff"/></svg>314        <svg width="30" height="30"><circle cx="15" cy="15" r="6" fill="#fff"/></svg>315        <svg width="30" height="30"><circle cx="15" cy="15" r="6" fill="#fff"/></svg>316        <svg width="38" height="30" viewBox="0 0 38 30">317          <path d="M4 10 h20 a8 8 0 0 1 8 8 v4 h-28 z" fill="#fff"/>318        </svg>319        <svg width="26" height="30" viewBox="0 0 26 30">320          <rect x="6" y="4" width="14" height="22" rx="3" stroke="#fff" stroke-width="3" fill="none"/>321          <rect x="9" y="8" width="8" height="10" fill="#fff"/>322        </svg>323      </div>324    </div>325    <div class="nav-bar">326      <div class="nav-left">327        <svg width="60" height="60" viewBox="0 0 60 60">328          <path d="M36 12 L18 30 L36 48" stroke="#fff" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>329        </svg>330        <div class="title">Reviews</div>331      </div>332      <div class="icon-btn">333        <svg width="40" height="40" viewBox="0 0 40 40">334          <circle cx="20" cy="20" r="18" stroke="#fff" stroke-width="2" fill="none"/>335          <rect x="19" y="16" width="2" height="10" fill="#fff"/>336          <circle cx="20" cy="11" r="2" fill="#fff"/>337        </svg>338      </div>339    </div>340  </div>341 342  <div class="content">343    <!-- Reply card -->344    <div class="reply-card">345      <div class="reply-header">346        <svg width="52" height="52" viewBox="0 0 52 52">347          <path d="M8 38 v-16 a10 10 0 0 1 10-10 h16 a10 10 0 0 1 10 10 v16 h-20 l-8 8 v-8 z" stroke="#333" stroke-width="3" fill="none" stroke-linejoin="round"/>348        </svg>349        <div>Reply from: Sallés Hotel Pere IV</div>350      </div>351      <div class="reply-text">352        Dear Ben,<br>353        Thank you for taking a few minutes of your valuable time to share your experience with us.354      </div>355      <div class="link">Show more</div>356    </div>357 358    <div class="helpful-row">359      <svg class="pc-icon" viewBox="0 0 56 56">360        <path d="M10 32 h10 v14 h-10 z M22 32 l8-12 h8 a6 6 0 0 1 6 6 v4 a8 8 0 0 1 -8 8 h-14 z" fill="none" stroke="#2467C0" stroke-width="4" stroke-linejoin="round"/>361      </svg>362      Helpful363    </div>364    <div class="helpful-note">1 person found this review helpful</div>365 366    <div class="divider"></div>367 368    <div class="reviewer">369      <div class="reviewer-left">370        <div class="avatar">[IMG: Avatar]</div>371        <div class="reviewer-meta">372          <div class="reviewer-name">Peter</div>373          <div class="reviewer-location">374            <div class="flag">[IMG: Flag AU]</div>375            Australia376          </div>377        </div>378      </div>379      <div class="score-badge">8.0</div>380    </div>381 382    <div class="date">Fri, 6 Oct 2023</div>383    <div class="review-title">Very Good</div>384 385    <div class="pros-cons">386      <div class="pc-item">387        <svg class="pc-icon" viewBox="0 0 56 56">388          <circle cx="28" cy="28" r="24" fill="none" stroke="#39B54A" stroke-width="4"/>389          <path d="M18 30 c6 6 14 6 20 0" stroke="#39B54A" stroke-width="4" fill="none" stroke-linecap="round"/>390          <circle cx="20" cy="22" r="3" fill="#39B54A"/>391          <circle cx="36" cy="22" r="3" fill="#39B54A"/>392        </svg>393        <div>Nice hotel across all levels. Good location also.</div>394      </div>395      <div class="pc-item">396        <svg class="pc-icon" viewBox="0 0 56 56">397          <circle cx="28" cy="28" r="24" fill="none" stroke="#5F5F5F" stroke-width="4"/>398          <path d="M18 36 c6 -6 14 -6 20 0" stroke="#5F5F5F" stroke-width="4" fill="none" stroke-linecap="round"/>399          <circle cx="20" cy="22" r="3" fill="#5F5F5F"/>400          <circle cx="36" cy="22" r="3" fill="#5F5F5F"/>401        </svg>402        <div>Restaurant opens at 8pm. Should be earlier.</div>403      </div>404    </div>405 406    <div class="booking-card">407      <div class="room-thumb">[IMG: Deluxe Room]</div>408      <div class="booking-info">409        <div class="booking-title">Deluxe Double Room with Spa Access</div>410        <div class="booking-meta">2 nights • September 2023</div>411        <div class="booking-meta">Couple</div>412      </div>413      <svg class="chevron" viewBox="0 0 40 40">414        <path d="M14 10 L26 20 L14 30" stroke="#8A8A8A" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>415      </svg>416    </div>417 418    <!-- Second reply card -->419    <div class="reply-card secondary">420      <div class="reply-header">421        <svg width="52" height="52" viewBox="0 0 52 52">422          <path d="M8 38 v-16 a10 10 0 0 1 10-10 h16 a10 10 0 0 1 10 10 v16 h-20 l-8 8 v-8 z" stroke="#333" stroke-width="3" fill="none" stroke-linejoin="round"/>423        </svg>424        <div>Reply from: Sallés Hotel Pere IV</div>425      </div>426      <div class="reply-text">427        Dear Peter,<br>428        Thank you for commenting on your stay with us. We hope to see you again.429      </div>430      <div class="link">Show more</div>431    </div>432  </div>433 434  <div class="cta">Select rooms</div>435  <div class="home-indicator"></div>436</div>437</body>438</html>