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; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    height: 120px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #212121;25    font-size: 34px;26  }27  .sb-left { display: flex; align-items: center; gap: 18px; }28  .sb-right { display: flex; align-items: center; gap: 22px; }29  .sb-icon { width: 40px; height: 40px; }30 31  /* Header with back */32  .header {33    position: relative;34    padding: 12px 48px 0 48px;35  }36  .back-btn {37    width: 72px;38    height: 72px;39    display: flex;40    align-items: center;41    justify-content: center;42    margin-left: -8px;43  }44  .rating {45    margin-top: 8px;46    display: flex;47    align-items: center;48    gap: 22px;49    font-weight: 800;50    color: #1F1F1F;51    font-size: 64px;52  }53  .rating svg { width: 54px; height: 54px; }54 55  /* Search bar */56  .search {57    margin: 28px 48px 8px 48px;58    height: 104px;59    border: 1px solid #D6D6D6;60    border-radius: 52px;61    display: flex;62    align-items: center;63    padding: 0 32px;64    color: #8A8A8A;65    font-size: 36px;66    box-shadow: 0 0 0 0 rgba(0,0,0,0);67  }68  .search svg { width: 44px; height: 44px; margin-right: 22px; }69 70  /* Reviews list */71  .reviews { padding: 12px 48px 160px 48px; }72  .review {73    margin-top: 54px;74  }75  .review-header {76    display: flex;77    align-items: center;78    gap: 26px;79  }80  .avatar {81    width: 96px;82    height: 96px;83    background: #E0E0E0;84    border: 1px solid #BDBDBD;85    border-radius: 50%;86    display: flex;87    align-items: center;88    justify-content: center;89    color: #757575;90    font-size: 20px;91    text-align: center;92  }93  .meta {94    display: flex;95    flex-direction: column;96  }97  .name {98    font-size: 44px;99    font-weight: 700;100    color: #2B2B2B;101    line-height: 1.1;102  }103  .date {104    margin-top: 6px;105    font-size: 32px;106    color: #7A7A7A;107  }108  .review-text {109    margin-left: 122px; /* avatar (96) + gap (26) */110    margin-top: 24px;111    font-size: 36px;112    line-height: 1.6;113    color: #2C2C2C;114  }115 116  /* Gesture bar */117  .gesture {118    position: absolute;119    bottom: 32px;120    left: 50%;121    transform: translateX(-50%);122    width: 320px;123    height: 10px;124    background: #000000;125    border-radius: 8px;126    opacity: 0.9;127  }128</style>129</head>130<body>131<div id="render-target">132 133  <!-- Status bar -->134  <div class="status-bar">135    <div class="sb-left">136      <span>12:52</span>137      <span style="font-weight:600;">N</span>138      <span>P</span>139      <span style="font-weight:600;">S</span>140      <span>•</span>141    </div>142    <div class="sb-right">143      <!-- Signal -->144      <svg class="sb-icon" viewBox="0 0 24 24">145        <path d="M2 18h2v2H2zm4-4h2v6H6zm4-4h2v10h-2zm4-4h2v14h-2zm4-6h2v20h-2z" fill="#4A4A4A"/>146      </svg>147      <!-- Wi-Fi -->148      <svg class="sb-icon" viewBox="0 0 24 24">149        <path d="M12 18.5l-2.2-2.2a3.2 3.2 0 0 1 4.4 0L12 18.5z" fill="#4A4A4A"/>150        <path d="M3 9c5.9-5 12.1-5 18 0" stroke="#4A4A4A" stroke-width="2" fill="none" stroke-linecap="round"/>151        <path d="M6 12c3.7-3.1 8.3-3.1 12 0" stroke="#4A4A4A" stroke-width="2" fill="none" stroke-linecap="round"/>152      </svg>153      <!-- Battery -->154      <svg class="sb-icon" viewBox="0 0 26 24">155        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#4A4A4A" fill="none" stroke-width="2"/>156        <rect x="4" y="8" width="12" height="8" fill="#4A4A4A"/>157        <rect x="20" y="9" width="4" height="6" rx="1" fill="#4A4A4A"/>158      </svg>159    </div>160  </div>161 162  <!-- Header with back and rating -->163  <div class="header">164    <div class="back-btn">165      <svg viewBox="0 0 24 24">166        <path d="M15.5 4l-8 8 8 8" stroke="#333" stroke-width="2.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>167      </svg>168    </div>169    <div class="rating">170      <svg viewBox="0 0 24 24">171        <path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.5 5.8 21l1.2-6.8-5-4.9 6.9-1z" fill="#111"/>172      </svg>173      <span>4.98 (298 reviews)</span>174    </div>175  </div>176 177  <!-- Search bar -->178  <div class="search">179    <svg viewBox="0 0 24 24">180      <circle cx="11" cy="11" r="7" stroke="#8A8A8A" stroke-width="2" fill="none"/>181      <path d="M16.5 16.5L22 22" stroke="#8A8A8A" stroke-width="2" stroke-linecap="round"/>182    </svg>183    <span>Search</span>184  </div>185 186  <!-- Reviews -->187  <div class="reviews">188 189    <!-- Review 1 -->190    <div class="review">191      <div class="review-header">192        <div class="avatar">[IMG: User Avatar]</div>193        <div class="meta">194          <div class="name">Reem</div>195          <div class="date">December 2023</div>196        </div>197      </div>198      <div class="review-text">199        This tour was so fun I highly recommend! The location is beautiful and the goats are adorable.200        The host was super nice and thoughtful, would recommend! 🥰201      </div>202    </div>203 204    <!-- Review 2 -->205    <div class="review">206      <div class="review-header">207        <div class="avatar">[IMG: User Avatar]</div>208        <div class="meta">209          <div class="name">Sahibajot</div>210          <div class="date">November 2023</div>211        </div>212      </div>213      <div class="review-text">214        So much fun! We really enjoyed our time with Pickles, Peanut and Kristina, walking around beautiful215        Grafton Lake — very picturesque. Definitely an experience to remember.216      </div>217    </div>218 219    <!-- Review 3 -->220    <div class="review">221      <div class="review-header">222        <div class="avatar">[IMG: User Avatar]</div>223        <div class="meta">224          <div class="name">샘</div>225          <div class="date">November 2023</div>226        </div>227      </div>228      <div class="review-text">229        wonderful experience~! it was adventurous to take a ferry and go all the way to bowen island.230        peanut and puckle were lovely, and lilly (doggy) was the sweetest ever. we ended up playing more231        with lilly, but that’s ok. still fun and pleasant enough~232      </div>233    </div>234 235    <!-- Review 4 -->236    <div class="review">237      <div class="review-header">238        <div class="avatar">[IMG: User Avatar]</div>239        <div class="meta">240          <div class="name">Jen</div>241          <div class="date">November 2023</div>242        </div>243      </div>244    </div>245 246  </div>247 248  <!-- Gesture bar -->249  <div class="gesture"></div>250</div>251</body>252</html>