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>Reviews UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #FFFFFF;12  }13 14  /* Header / App bar */15  .statusbar {16    background: #123B7F;17    color: #fff;18    height: 120px;19    padding: 0 48px;20    display: flex;21    align-items: center;22    font-size: 40px;23    letter-spacing: 0.5px;24  }25  .status-icons { margin-left: 24px; opacity: 0.9; font-size: 42px; }26  .appbar {27    background: #123B7F;28    height: 170px;29    display: flex;30    align-items: center;31    padding: 0 36px;32    color: #fff;33    box-sizing: border-box;34  }35  .appbar .title {36    font-weight: 700;37    font-size: 56px;38    margin-left: 24px;39  }40  .appbar .spacer { flex: 1; }41  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }42 43  /* Content */44  .content {45    padding: 36px 48px 220px 48px; /* bottom padding for button overlap */46    color: #212121;47    font-size: 40px;48    line-height: 1.4;49  }50  .proscons { margin-top: 28px; }51  .pc-row { display: flex; align-items: flex-start; margin-bottom: 32px; }52  .pc-row svg { margin-right: 24px; flex-shrink: 0; }53  .muted { color: #555; }54 55  /* Room card */56  .room-card {57    border: 1px solid #E0E0E0;58    border-radius: 18px;59    padding: 24px;60    display: flex;61    align-items: center;62    margin: 32px 0;63    box-shadow: 0 2px 0 rgba(0,0,0,0.04);64  }65  .room-img {66    width: 220px; height: 160px;67    background: #E0E0E0;68    border: 1px solid #BDBDBD;69    display: flex; align-items: center; justify-content: center;70    color: #757575; font-size: 32px;71    border-radius: 10px;72    margin-right: 28px;73  }74  .room-info { flex: 1; }75  .room-title { font-size: 42px; font-weight: 700; margin-bottom: 10px; }76  .room-meta { color: #666; font-size: 34px; }77  .chev {78    width: 56px; height: 56px;79    margin-left: 16px;80    opacity: 0.7;81  }82 83  .helpful {84    display: flex; align-items: center; color: #1565C0; font-weight: 600;85    margin: 8px 0 28px;86    font-size: 40px;87  }88  .divider { height: 1px; background: #E5E5E5; margin: 36px 0; }89 90  /* Reviewer header */91  .review-header {92    display: flex; align-items: center; margin-top: 6px;93  }94  .avatar {95    width: 92px; height: 92px; border-radius: 50%;96    background: #E0E0E0; border: 1px solid #BDBDBD;97    display: flex; align-items: center; justify-content: center;98    color: #555; font-weight: 700; font-size: 40px; margin-right: 22px;99  }100  .flag {101    width: 80px; height: 52px; background: #E0E0E0; border: 1px solid #BDBDBD;102    display: inline-flex; align-items: center; justify-content: center;103    color: #757575; font-size: 24px; border-radius: 6px; margin-left: 10px;104  }105  .reviewer-name { font-size: 44px; font-weight: 700; }106  .country { color: #666; font-size: 36px; }107  .rating-badge {108    margin-left: auto;109    background: #1565C0; color: #fff;110    font-weight: 700; font-size: 42px;111    width: 120px; height: 90px; border-radius: 16px;112    display: flex; align-items: center; justify-content: center;113  }114 115  .date { color: #666; font-size: 36px; margin-top: 22px; }116  .headline { font-size: 48px; font-weight: 800; margin: 8px 0 22px; }117 118  /* Bottom button */119  .bottom-bar {120    position: absolute; left: 0; right: 0; bottom: 24px;121    padding: 0 24px;122  }123  .cta {124    background: #2E6CC5; color: #fff; text-align: center;125    font-size: 48px; font-weight: 700;126    height: 120px; line-height: 120px; border-radius: 12px;127    box-shadow: 0 2px 0 rgba(0,0,0,0.12);128  }129 130  /* Simple home indicator (visual only) */131  .home-indicator {132    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);133    width: 300px; height: 14px; background: #000; opacity: 0.15; border-radius: 7px;134    margin-bottom: 6px;135  }136</style>137</head>138<body>139<div id="render-target">140 141  <!-- Status bar -->142  <div class="statusbar">143    <div>8:45</div>144    <div class="status-icons">• • • • •</div>145    <div class="spacer"></div>146  </div>147 148  <!-- App bar -->149  <div class="appbar">150    <div class="icon-btn">151      <svg width="64" height="64" viewBox="0 0 32 32">152        <path d="M20 6 L8 16 L20 26" stroke="#fff" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>153      </svg>154    </div>155    <div class="title">Reviews</div>156    <div class="spacer"></div>157    <div class="icon-btn">158      <svg width="64" height="64" viewBox="0 0 32 32">159        <circle cx="16" cy="16" r="13" stroke="#fff" stroke-width="3" fill="none"></circle>160        <rect x="15" y="8" width="2" height="8" fill="#fff"></rect>161        <circle cx="16" cy="22.5" r="1.8" fill="#fff"></circle>162      </svg>163    </div>164  </div>165 166  <!-- Main content -->167  <div class="content">168 169    <div class="proscons">170      <div class="pc-row">171        <svg width="72" height="72" viewBox="0 0 40 40">172          <circle cx="20" cy="20" r="17" stroke="#2EA84A" stroke-width="3" fill="none"></circle>173          <circle cx="14" cy="16" r="2" fill="#2EA84A"></circle>174          <circle cx="26" cy="16" r="2" fill="#2EA84A"></circle>175          <path d="M12 24 C16 28,24 28,28 24" stroke="#2EA84A" stroke-width="3" fill="none" stroke-linecap="round"></path>176        </svg>177        <div>Breakfast was nice. The location nice as well.</div>178      </div>179 180      <div class="pc-row">181        <svg width="72" height="72" viewBox="0 0 40 40">182          <circle cx="20" cy="20" r="17" stroke="#333" stroke-width="3" fill="none"></circle>183          <circle cx="14" cy="16" r="2" fill="#333"></circle>184          <circle cx="26" cy="16" r="2" fill="#333"></circle>185          <path d="M12 26 C16 22,24 22,28 26" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round"></path>186        </svg>187        <div class="muted">Swim caps was mentioned as mandatory in the pool area, but many didn’t used them. Cleaning changed all towels every day even though they where not left on the floor. It was mentioned that they take care of environment and save water, so they recommend to reuse towels, but they changed all towels every day. It’s not climate responsibility in our opinionn.</div>188      </div>189    </div>190 191    <div class="room-card">192      <div class="room-img">[IMG: Deluxe Room]</div>193      <div class="room-info">194        <div class="room-title">Deluxe Family Room with SPA Access</div>195        <div class="room-meta">5 nights • October 2023<br>Family</div>196      </div>197      <svg class="chev" viewBox="0 0 24 24">198        <path d="M8 4 L16 12 L8 20" stroke="#777" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>199      </svg>200    </div>201 202    <div class="helpful">203      <svg width="48" height="48" viewBox="0 0 32 32">204        <path d="M8 18 v10 h-4 v-10 h4 M12 18 c4-8 4-8 8-8 v16 h-12" fill="none" stroke="#1565C0" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"></path>205      </svg>206      <span style="margin-left: 20px;">Helpful</span>207    </div>208 209    <div class="divider"></div>210 211    <div class="review-header">212      <div class="avatar">J</div>213      <div>214        <div class="reviewer-name">Jay</div>215        <div class="country"><span class="flag">[UK]</span> United Kingdom</div>216      </div>217      <div class="rating-badge">7.0</div>218    </div>219 220    <div class="date">Sun, 15 Oct 2023</div>221    <div class="headline">Nice. Would stay again</div>222 223    <div class="pc-row">224      <svg width="72" height="72" viewBox="0 0 40 40">225        <circle cx="20" cy="20" r="17" stroke="#2EA84A" stroke-width="3" fill="none"></circle>226        <circle cx="14" cy="16" r="2" fill="#2EA84A"></circle>227        <circle cx="26" cy="16" r="2" fill="#2EA84A"></circle>228        <path d="M12 24 C16 28,24 28,28 24" stroke="#2EA84A" stroke-width="3" fill="none" stroke-linecap="round"></path>229      </svg>230      <div>Nice surroundings. Nice spa.</div>231    </div>232 233    <div class="pc-row">234      <svg width="72" height="72" viewBox="0 0 40 40">235        <circle cx="20" cy="20" r="17" stroke="#333" stroke-width="3" fill="none"></circle>236        <circle cx="14" cy="16" r="2" fill="#333"></circle>237        <circle cx="26" cy="16" r="2" fill="#333"></circle>238        <path d="M12 26 C16 22,24 22,28 26" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round"></path>239      </svg>240      <div class="muted">Small bedroom.</div>241    </div>242 243    <div class="room-card">244      <div class="room-img">[IMG: 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">2 nights • October 2023<br>Solo traveler</div>248      </div>249      <svg class="chev" viewBox="0 0 24 24">250        <path d="M8 4 L16 12 L8 20" stroke="#777" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>251      </svg>252    </div>253 254  </div>255 256  <!-- Bottom CTA -->257  <div class="bottom-bar">258    <div class="cta">Select rooms</div>259  </div>260 261  <div class="home-indicator"></div>262 263</div>264</body>265</html>