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.0">6<title>Reviews Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #FFFFFF;13  }14 15  /* Top app bar */16  .status-bar {17    height: 70px;18    background: #153C8D;19    color: #fff;20    display: flex;21    align-items: center;22    padding: 0 32px;23    font-size: 32px;24  }25  .status-icons { margin-left: 24px; display: flex; gap: 14px; align-items: center; opacity: 0.9; }26  .top-bar {27    height: 180px;28    background: #153C8D;29    color: #fff;30    position: relative;31    padding: 0 32px;32    box-sizing: border-box;33  }34  .top-bar .back {35    position: absolute; left: 32px; top: 70px; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;36  }37  .top-bar .title {38    position: absolute; left: 120px; top: 78px; font-size: 56px; font-weight: 700;39  }40  .top-bar .info {41    position: absolute; right: 32px; top: 72px; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;42  }43 44  /* Content */45  .content { position: absolute; left: 0; right: 0; top: 250px; bottom: 0; padding: 24px 32px 220px; box-sizing: border-box; overflow: hidden; }46  .reply-card {47    position: relative;48    background: #EFEFEF;49    border-radius: 16px;50    padding: 36px 32px;51    margin: 24px 0;52  }53  .reply-card .notch {54    position: absolute; left: 50%; transform: translateX(-50%);55    top: -16px; width: 0; height: 0;56    border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 16px solid #EFEFEF;57  }58  .reply-header { display: flex; align-items: center; gap: 16px; color: #2b2b2b; font-weight: 700; font-size: 40px; }59  .reply-body { margin-top: 18px; color: #6c6c6c; font-size: 34px; line-height: 1.5; }60  .link { color: #1a73e8; font-size: 36px; margin-top: 18px; }61 62  .helpful { display: flex; align-items: center; gap: 16px; color: #1a73e8; font-size: 36px; margin: 24px 0 8px; }63  .divider { height: 1px; background: #E0E0E0; margin: 24px 0; }64 65  /* Reviewer section */66  .review-header { display: flex; align-items: center; justify-content: space-between; }67  .reviewer { display: flex; align-items: center; gap: 20px; }68  .avatar {69    width: 96px; height: 96px; background: #E0E0E0; border: 1px solid #BDBDBD;70    display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 10px; font-size: 22px;71  }72  .name-country { display: flex; flex-direction: column; }73  .name { font-size: 44px; font-weight: 700; color: #222; }74  .country { display: flex; align-items: center; gap: 10px; color: #6c6c6c; font-size: 34px; }75  .flag {76    width: 48px; height: 32px; background: #E0E0E0; border: 1px solid #BDBDBD;77    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 20px; border-radius: 4px;78  }79  .rating-pill {80    background: #153C8D; color: #fff; font-size: 40px; font-weight: 700;81    padding: 18px 22px; border-radius: 16px;82  }83 84  .date { color: #6c6c6c; font-size: 34px; margin-top: 18px; }85  .review-title { font-size: 52px; font-weight: 800; color: #1d1d1d; margin-top: 8px; }86 87  .review-point { display: flex; gap: 18px; align-items: flex-start; margin-top: 24px; }88  .face-icon { width: 54px; height: 54px; }89  .review-text { font-size: 36px; line-height: 1.6; color: #333; }90 91  /* Room card */92  .room-card {93    margin-top: 36px; border: 1px solid #E0E0E0; border-radius: 16px; padding: 18px; display: flex; align-items: center; gap: 18px;94  }95  .img-ph {96    width: 160px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;97    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; border-radius: 10px;98  }99  .room-info { flex: 1; }100  .room-title { font-size: 40px; font-weight: 700; color: #222; }101  .room-meta { font-size: 32px; color: #6c6c6c; margin-top: 6px; }102  .room-sub { font-size: 32px; color: #6c6c6c; margin-top: 4px; }103  .chevron { width: 40px; height: 40px; }104 105  /* Bottom button */106  .bottom-bar {107    position: absolute; left: 0; bottom: 60px; width: 100%;108    padding: 0 24px; box-sizing: border-box;109  }110  .cta {111    width: 100%; height: 160px; background: #153C8D; color: #fff; border-radius: 16px;112    display: flex; align-items: center; justify-content: center; font-size: 48px; font-weight: 700;113    box-shadow: 0 2px 6px rgba(0,0,0,0.2);114  }115  .home-indicator {116    position: absolute; left: 50%; transform: translateX(-50%);117    bottom: 12px; width: 280px; height: 12px; background: rgba(0,0,0,0.6); border-radius: 8px;118  }119</style>120</head>121<body>122<div id="render-target">123 124  <!-- Status bar -->125  <div class="status-bar">126    <div>8:45</div>127    <div class="status-icons">128      <!-- simple dots to mimic status -->129      <svg width="16" height="16"><circle cx="8" cy="8" r="6" fill="#fff" opacity="0.9"/></svg>130      <svg width="16" height="16"><circle cx="8" cy="8" r="6" fill="#fff" opacity="0.9"/></svg>131      <svg width="16" height="16"><circle cx="8" cy="8" r="6" fill="#fff" opacity="0.9"/></svg>132      <svg width="16" height="16"><circle cx="8" cy="8" r="6" fill="#fff" opacity="0.9"/></svg>133      <svg width="8" height="8"><circle cx="4" cy="4" r="3" fill="#fff"/></svg>134    </div>135    <div style="margin-left:auto; display:flex; align-items:center; gap:20px;">136      <!-- WiFi -->137      <svg width="40" height="26" viewBox="0 0 40 26">138        <path d="M4 8c8-6 24-6 32 0M10 13c6-4 14-4 20 0M16 18c4-2 8-2 12 0M20 23l4 4-8 0z" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>139      </svg>140      <!-- Battery -->141      <svg width="60" height="26" viewBox="0 0 60 26">142        <rect x="2" y="4" width="50" height="18" rx="3" ry="3" stroke="#fff" fill="none" stroke-width="2"/>143        <rect x="6" y="8" width="42" height="10" fill="#fff"/>144        <rect x="54" y="9" width="4" height="8" fill="#fff"/>145      </svg>146    </div>147  </div>148 149  <!-- App bar -->150  <div class="top-bar">151    <div class="back">152      <svg width="56" height="56" viewBox="0 0 24 24">153        <path d="M15 6l-6 6 6 6" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>154      </svg>155    </div>156    <div class="title">Reviews</div>157    <div class="info">158      <svg width="72" height="72" viewBox="0 0 24 24">159        <circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="2" fill="none"/>160        <rect x="11" y="10" width="2" height="7" fill="#fff"/>161        <circle cx="12" cy="7" r="1.4" fill="#fff"/>162      </svg>163    </div>164  </div>165 166  <!-- Main content -->167  <div class="content">168 169    <!-- Reply card -->170    <div class="reply-card">171      <div class="notch"></div>172      <div class="reply-header">173        <svg class="face-icon" viewBox="0 0 24 24">174          <path d="M3 7h14v10l-4-3H3z" stroke="#4c4c4c" fill="none" stroke-width="2"/>175          <path d="M17 9h4v10l-4-3z" stroke="#4c4c4c" fill="none" stroke-width="2"/>176        </svg>177        <div>Reply from: Sallés Hotel Pere IV</div>178      </div>179      <div class="reply-body">180        Dear Jay,<br>181        Thank you for taking the time to write your feedback re…182      </div>183      <div class="link">Show more</div>184    </div>185 186    <div class="helpful">187      <svg width="40" height="40" viewBox="0 0 24 24">188        <path d="M2 14h4v8H2zM6 14l6-10c.6-1 2 .2 1.6 1.2L12 9h6c1 0 2 1 1.8 2l-2 7c-.2 1-1 2-2 2H7v-6z" fill="none" stroke="#1a73e8" stroke-width="2" stroke-linejoin="round"/>189      </svg>190      <div>Helpful</div>191    </div>192 193    <div class="divider"></div>194 195    <!-- Reviewer header -->196    <div class="review-header">197      <div class="reviewer">198        <div class="avatar">[IMG: User Avatar]</div>199        <div class="name-country">200          <div class="name">Ben</div>201          <div class="country">202            <div class="flag">Flag</div>203            <span>Netherlands</span>204          </div>205        </div>206      </div>207      <div class="rating-pill">9.0</div>208    </div>209 210    <div class="date">Thu, 12 Oct 2023</div>211    <div class="review-title">Very nice and comfortable hotel</div>212 213    <!-- Positive point -->214    <div class="review-point">215      <svg class="face-icon" viewBox="0 0 24 24">216        <circle cx="12" cy="12" r="10" stroke="#2E7D32" stroke-width="2" fill="none"/>217        <circle cx="9" cy="10" r="1.5" fill="#2E7D32"/>218        <circle cx="15" cy="10" r="1.5" fill="#2E7D32"/>219        <path d="M7 14c2 3 8 3 10 0" stroke="#2E7D32" stroke-width="2" fill="none" stroke-linecap="round"/>220      </svg>221      <div class="review-text">222        The breakfast was very good and reasonably priced The room was very spacious and the bed was comfortable223        There were 2 usb sockets and one regular socket next to the bed The rooftop bar is a bit more pricy but the view is224        amazing225      </div>226    </div>227 228    <!-- Negative point -->229    <div class="review-point">230      <svg class="face-icon" viewBox="0 0 24 24">231        <circle cx="12" cy="12" r="10" stroke="#5a5a5a" stroke-width="2" fill="none"/>232        <circle cx="9" cy="10" r="1.5" fill="#5a5a5a"/>233        <circle cx="15" cy="10" r="1.5" fill="#5a5a5a"/>234        <path d="M7 16c2-3 8-3 10 0" stroke="#5a5a5a" stroke-width="2" fill="none" stroke-linecap="round"/>235      </svg>236      <div class="review-text">237        The location was comfortable for me to get to where I needed (walking distance). It was a walking distance to238        the city centre, but this does not seem to be the nicest part of the city. Still, the area felt safe, just not super nice.239      </div>240    </div>241 242    <!-- Room card -->243    <div class="room-card">244      <div class="img-ph">[IMG: Deluxe Double Room]</div>245      <div class="room-info">246        <div class="room-title">Deluxe Double Room with Spa Access</div>247        <div class="room-meta">3 nights • October 2023</div>248        <div class="room-sub">Group of friends</div>249      </div>250      <svg class="chevron" viewBox="0 0 24 24">251        <path d="M9 6l6 6-6 6" stroke="#9e9e9e" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>252      </svg>253    </div>254 255  </div>256 257  <!-- Bottom CTA -->258  <div class="bottom-bar">259    <div class="cta">Select rooms</div>260  </div>261  <div class="home-indicator"></div>262 263</div>264</body>265</html>