GD-ML/AndroidCode
13.4k
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 Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #0E0E0E;15 color: #EDEDED;16 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";17 }18 19 .status-bar {20 height: 90px;21 padding: 0 40px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #fff;26 font-weight: 600;27 font-size: 38px;28 opacity: 0.9;29 }30 .status-left { display: flex; align-items: center; gap: 18px; }31 .status-right { display: flex; align-items: center; gap: 22px; }32 .sb-dot { width: 16px; height: 16px; border-radius: 50%; background: #fff; display: inline-block; opacity: 0.9; }33 .icon-mini {34 width: 34px; height: 34px; display: inline-block;35 }36 .battery {37 width: 48px; height: 24px; border: 3px solid #fff; border-radius: 5px; position: relative;38 }39 .battery::after {40 content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 12px; background: #fff; border-radius: 2px;41 }42 .battery .fill { position: absolute; top: 3px; left: 3px; height: 14px; width: 26px; background: #fff; border-radius: 2px; }43 44 .app-bar {45 height: 120px;46 padding: 0 34px;47 display: flex;48 align-items: center;49 justify-content: space-between;50 }51 .app-left, .app-right { display: flex; align-items: center; gap: 26px; }52 .icon-btn {53 width: 80px; height: 80px; border-radius: 16px;54 display: inline-flex; align-items: center; justify-content: center;55 color: #EDEDED;56 }57 .divider { height: 2px; background: #202020; margin: 2px 0; }58 .content { padding: 28px 48px 220px 48px; }59 60 /* Search */61 .search-wrap { margin-top: 18px; }62 .search-bar {63 height: 110px; border-radius: 56px; background: #171717; border: 2px solid #2A2A2A;64 display: flex; align-items: center; padding: 0 34px; color: #9E9E9E; font-size: 38px;65 }66 .search-bar svg { margin-right: 18px; opacity: 0.7; }67 .chips { margin-top: 26px; display: flex; gap: 28px; }68 .chip {69 padding: 22px 34px; border: 2px solid #3A3A3A; border-radius: 50px; color: #DADADA; font-size: 34px;70 display: inline-flex; align-items: center; gap: 18px; background: transparent;71 }72 73 /* Ratings summary */74 .ratings { margin-top: 44px; }75 .summary { display: flex; align-items: center; gap: 18px; font-size: 38px; color: #CFCFCF; }76 .dot { width: 28px; height: 28px; border-radius: 50%; background: #2F9C7A; display: inline-block; }77 .d-badge {78 width: 28px; height: 28px; border-radius: 50%;79 border: 3px solid #2F9C7A; color: #2F9C7A; font-weight: 700; font-size: 20px;80 display: inline-flex; align-items: center; justify-content: center; margin-left: 2px;81 }82 .bar-row {83 display: grid; grid-template-columns: 260px 1fr 90px; align-items: center;84 gap: 26px; margin-top: 26px; color: #C8C8C8; font-size: 38px;85 }86 .track {87 height: 30px; background: #3A3A3A; border-radius: 20px; position: relative; overflow: hidden;88 }89 .fill { position: absolute; top:0; left:0; height: 100%; background: #3FA380; border-radius: 20px; }90 .count { color: #9A9A9A; text-align: right; }91 92 .section-divider { height: 2px; background: #2A2A2A; margin: 36px 0 28px; }93 94 /* Review card */95 .review-card { margin-top: 24px; }96 .author-row { display: grid; grid-template-columns: 120px 1fr 80px; align-items: center; gap: 24px; }97 .avatar {98 width: 110px; height: 110px; border-radius: 50%;99 background: #E0E0E0; border: 1px solid #BDBDBD;100 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px; text-align: center; padding: 6px;101 }102 .author-name { font-size: 40px; font-weight: 700; color: #EDEDED; }103 .author-sub { font-size: 30px; color: #ABABAB; margin-top: 4px; }104 .kebab { width: 12px; height: 60px; display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }105 .kebab span { width: 8px; height: 8px; background: #8A8A8A; border-radius: 50%; display: block; margin: 6px auto; }106 107 .stars { margin-top: 18px; display: flex; gap: 10px; }108 .star-dot { width: 24px; height: 24px; background: #2F9C7A; border-radius: 50%; }109 .title { margin-top: 16px; font-size: 48px; font-weight: 800; color: #F3F3F3; }110 .meta { margin-top: 6px; font-size: 34px; color: #B7B7B7; }111 .review-text { margin-top: 18px; font-size: 36px; line-height: 1.5; color: #D9D9D9; }112 .read-more { margin-top: 14px; font-size: 38px; color: #FFFFFF; text-decoration: underline; }113 .written { margin-top: 34px; font-size: 30px; color: #9C9C9C; }114 115 .review-actions {116 margin-top: 18px; display: flex; justify-content: flex-end; align-items: center; gap: 18px; color: #BEBEBE; font-size: 34px;117 }118 .divider-long { height: 2px; background: #2A2A2A; margin: 40px 0; }119 120 /* Toast overlay */121 .toast {122 position: absolute; left: 50%; top: 980px; transform: translateX(-50%);123 width: 820px; background: rgba(10,10,10,0.92); border-radius: 40px;124 padding: 46px 40px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,0.6);125 }126 .toast .check {127 width: 42px; height: 42px; border-radius: 50%; border: 3px solid #EDEDED; display: inline-flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 16px;128 }129 .toast .msg { font-size: 44px; color: #FFFFFF; }130 .toast .msg a { color: #FFFFFF; text-decoration: underline; }131 .toast .view { margin-top: 30px; font-size: 40px; text-decoration: underline; color: #FFFFFF; }132 133 /* Bottom navigation */134 .bottom-nav {135 position: absolute; left: 0; right: 0; bottom: 0;136 height: 184px; background: #121212; border-top: 2px solid #1E1E1E;137 display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding-bottom: 24px;138 }139 .nav-item {140 display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #BEBEBE; font-size: 30px;141 position: relative;142 }143 .nav-item.active { color: #EDEDED; }144 .nav-item.active::before {145 content: ""; position: absolute; top: 0; width: 60%; height: 8px; background: #3FA380; border-radius: 6px;146 }147 .nav-icon { width: 56px; height: 56px; }148 149 /* Gesture bar */150 .gesture {151 position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);152 width: 240px; height: 12px; border-radius: 10px; background: #EDEDED; opacity: 0.92;153 }154</style>155</head>156<body>157<div id="render-target">158 159 <!-- Status bar -->160 <div class="status-bar">161 <div class="status-left">162 <span>12:31</span>163 <span class="sb-dot"></span>164 <span class="sb-dot"></span>165 <span class="sb-dot"></span>166 <span class="sb-dot"></span>167 <span style="color:#fff;">•</span>168 </div>169 <div class="status-right">170 <svg class="icon-mini" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">171 <path d="M2 8l4 4-4 4"></path>172 </svg>173 <svg class="icon-mini" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">174 <path d="M6 18L18 6"></path>175 <path d="M6 6l12 12"></path>176 </svg>177 <svg class="icon-mini" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">178 <path d="M2 12h6l3 6 3-12 3 6h4"></path>179 </svg>180 <div class="battery"><div class="fill"></div></div>181 </div>182 </div>183 184 <!-- App bar -->185 <div class="app-bar">186 <div class="app-left">187 <div class="icon-btn" aria-label="Back">188 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#DADADA" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">189 <path d="M15 19l-7-7 7-7"></path>190 </svg>191 </div>192 </div>193 <div class="app-right">194 <div class="icon-btn" aria-label="Share">195 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#CFCFCF" stroke-width="2.2" stroke-linecap="round">196 <circle cx="18" cy="5" r="3"></circle>197 <circle cx="6" cy="12" r="3"></circle>198 <circle cx="18" cy="19" r="3"></circle>199 <path d="M8.5 11l7-4"></path>200 <path d="M8.5 13l7 4"></path>201 </svg>202 </div>203 <div class="icon-btn" aria-label="Favorite">204 <svg width="44" height="44" viewBox="0 0 24 24" fill="#C54B4B" stroke="#C54B4B">205 <path d="M12 21s-7-4.35-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 11c0 5.65-7 10-7 10z"></path>206 </svg>207 </div>208 <div class="icon-btn" aria-label="Cart">209 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#DADADA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">210 <circle cx="9" cy="21" r="1.8"></circle>211 <circle cx="18" cy="21" r="1.8"></circle>212 <path d="M2 3h3l3.6 12.5a2 2 0 0 0 2 1.5h6.4a2 2 0 0 0 2-1.5L22 7H6"></path>213 </svg>214 </div>215 </div>216 </div>217 <div class="divider"></div>218 219 <div class="content">220 <div class="search-wrap">221 <div class="search-bar">222 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2">223 <circle cx="11" cy="11" r="7"></circle>224 <path d="M21 21l-4.3-4.3"></path>225 </svg>226 <span>Search reviews...</span>227 </div>228 <div class="chips">229 <div class="chip">230 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round">231 <path d="M3 6h8"></path>232 <path d="M3 12h14"></path>233 <path d="M3 18h10"></path>234 </svg>235 <span>Filters</span>236 </div>237 <div class="chip">English</div>238 </div>239 </div>240 241 <div class="section-divider"></div>242 243 <div class="ratings">244 <div class="summary">245 <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>246 <span class="d-badge">D</span>247 <span style="margin-left:16px;">56 reviews</span>248 </div>249 250 <div class="bar-row">251 <div>Excellent</div>252 <div class="track"><div class="fill" style="width: 78%;"></div></div>253 <div class="count">32</div>254 </div>255 <div class="bar-row">256 <div>Very good</div>257 <div class="track"><div class="fill" style="width: 54%;"></div></div>258 <div class="count">17</div>259 </div>260 <div class="bar-row">261 <div>Average</div>262 <div class="track"><div class="fill" style="width: 32%;"></div></div>263 <div class="count">5</div>264 </div>265 <div class="bar-row">266 <div>Poor</div>267 <div class="track"><div class="fill" style="width: 18%;"></div></div>268 <div class="count">2</div>269 </div>270 <div class="bar-row">271 <div>Terrible</div>272 <div class="track"><div class="fill" style="width: 0%;"></div></div>273 <div class="count">0</div>274 </div>275 276 <div class="section-divider"></div>277 </div>278 279 <!-- Review card -->280 <div class="review-card">281 <div class="author-row">282 <div class="avatar">[IMG: User Avatar]</div>283 <div>284 <div class="author-name">Lori A</div>285 <div class="author-sub">33 contributions</div>286 </div>287 <div class="kebab" aria-label="More">288 <span></span><span></span><span></span>289 </div>290 </div>291 292 <div class="stars">293 <div class="star-dot"></div>294 <div class="star-dot"></div>295 <div class="star-dot"></div>296 <div class="star-dot"></div>297 </div>298 299 <div class="title">Beauty comes in many forms</div>300 <div class="meta">Aug 2020</div>301 <div class="review-text">302 This renovated art gallery shares the passion and talents of Peace Countrys' finest artists.303 There is always works of art and a quant gift shop to p...304 </div>305 <div class="read-more">Read more ˅</div>306 <div class="written">Written 08/14/20</div>307 308 <div class="review-actions">309 <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#BEBEBE" stroke-width="2">310 <path d="M14 9V5a3 3 0 0 0-3-3l-4 8v10h10a3 3 0 0 0 3-3v-7h-6z"></path>311 </svg>312 <span>2</span>313 </div>314 315 <div class="divider-long"></div>316 </div>317 </div>318 319 <!-- Center toast -->320 <div class="toast">321 <div class="check">✓</div>322 <div class="msg">You created <a href="#">Dawson Creek Itinerary</a></div>323 <div class="view">View</div>324 </div>325 326 <!-- Bottom navigation -->327 <div class="bottom-nav">328 <div class="nav-item">329 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#BEBEBE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">330 <path d="M3 11l9-8 9 8"></path>331 <path d="M9 22V12h6v10"></path>332 </svg>333 <div>Explore</div>334 </div>335 <div class="nav-item active">336 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2">337 <circle cx="11" cy="11" r="7"></circle>338 <path d="M21 21l-4-4"></path>339 </svg>340 <div>Search</div>341 </div>342 <div class="nav-item">343 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#BEBEBE" stroke-width="2">344 <path d="M3 6h18"></path>345 <path d="M3 12h18"></path>346 <path d="M3 18h18"></path>347 </svg>348 <div>Plan</div>349 </div>350 <div class="nav-item">351 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#BEBEBE" stroke-width="2" stroke-linecap="round">352 <path d="M4 19h16"></path>353 <path d="M9 17V4h6v13"></path>354 </svg>355 <div>Review</div>356 </div>357 <div class="nav-item">358 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#BEBEBE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">359 <circle cx="12" cy="8" r="4"></circle>360 <path d="M4 22c2-4 6-6 8-6s6 2 8 6"></path>361 </svg>362 <div>Account</div>363 </div>364 </div>365 366 <div class="gesture"></div>367</div>368</body>369</html>