GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Reviews Screen Mock</title>6<style>7 body { margin:0; padding:0; background:transparent; }8 #render-target {9 width:1080px; height:2400px;10 position:relative; overflow:hidden;11 background:#0f0f0f; color:#eaeaea;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13 }14 .status-bar {15 position:absolute; top:0; left:0; right:0;16 height:110px; padding:24px 36px 0 36px;17 color:#fff; font-size:36px;18 display:flex; align-items:center; justify-content:space-between;19 }20 .status-left { letter-spacing:1px; }21 .status-right svg { margin-left:26px; opacity:0.9; }22 .header {23 position:absolute; top:110px; left:0; right:0;24 height:120px; padding:0 36px;25 display:flex; align-items:center; justify-content:space-between;26 }27 .icon-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; }28 .divider { position:absolute; left:36px; right:36px; height:2px; background:#2a2a2a; }29 .divider.top1 { top:230px; }30 .search-area { position:absolute; top:260px; left:36px; right:36px; }31 .search-box {32 height:120px; border-radius:60px;33 background:#2a2a2a; border:2px solid #3a3a3a;34 display:flex; align-items:center; padding:0 40px;35 color:#bcbcbc; font-size:40px;36 }37 .search-box svg { margin-right:24px; }38 .chips { margin-top:36px; display:flex; gap:24px; }39 .chip {40 padding:24px 36px; border-radius:50px; font-size:36px;41 border:2px solid #3a3a3a; color:#eaeaea; background:#191919;42 display:inline-flex; align-items:center; gap:18px;43 }44 .chip.outlined { border-color:#eaeaea; }45 .divider.top2 { top:540px; }46 .summary { position:absolute; top:580px; left:36px; right:36px; }47 .stars { display:flex; align-items:center; gap:18px; }48 .star-dot { width:32px; height:32px; background:#22d6a2; border-radius:50%; }49 .star-dot.grey { background:#444; color:#bbb; font-size:22px; display:flex; align-items:center; justify-content:center; }50 .summary h4 { margin:20px 0 28px; font-size:40px; font-weight:600; color:#ddd; }51 .ratings { margin-top:12px; }52 .rating-row {53 display:flex; align-items:center; gap:24px; margin:18px 0;54 font-size:36px; color:#ddd;55 }56 .rating-row .label { width:240px; }57 .bar { flex:1; height:30px; background:#4a4a4a; border-radius:18px; overflow:hidden; }58 .bar .fill { height:100%; background:#61e4bf; border-radius:18px; }59 .rating-row .value { width:80px; text-align:right; color:#bfbfbf; }60 .divider.mid { top:980px; }61 .review-card { position:absolute; top:1020px; left:36px; right:36px; }62 .user-row { display:flex; align-items:center; justify-content:space-between; }63 .user-info { display:flex; align-items:center; gap:28px; }64 .avatar {65 width:110px; height:110px; border-radius:55px;66 background:#E0E0E0; border:1px solid #BDBDBD;67 display:flex; align-items:center; justify-content:center;68 color:#757575; font-size:24px;69 }70 .name { font-size:44px; font-weight:700; }71 .meta { font-size:30px; color:#bcbcbc; margin-top:6px; }72 .more-btn { width:60px; height:60px; display:flex; align-items:center; justify-content:center; }73 .green-dots { display:flex; gap:14px; margin-top:32px; }74 .green-dots .dot { width:30px; height:30px; border-radius:50%; background:#22d6a2; }75 .title { margin-top:22px; font-size:46px; font-weight:800; color:#f2f2f2; }76 .date { margin-top:10px; font-size:34px; color:#cfcfcf; }77 .body-text { margin-top:20px; font-size:36px; line-height:54px; color:#dddddd; }78 .read-more { margin-top:20px; font-size:38px; font-weight:700; color:#eaeaea; }79 .written { margin-top:26px; font-size:32px; color:#bdbdbd; }80 .actions { margin-top:26px; display:flex; justify-content:flex-end; align-items:center; gap:14px; font-size:34px; color:#eaeaea; }81 .divider.bottom-review { top:1760px; }82 .bottom-nav {83 position:absolute; left:0; right:0; bottom:110px; height:180px; background:#151515;84 border-top:1px solid #2a2a2a; display:flex;85 }86 .bottom-nav .highlight {87 position:absolute; top:0; left:216px; width:216px; height:6px; background:#61e4bf; border-radius:3px;88 }89 .nav-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#bcbcbc; font-size:30px; gap:16px; }90 .nav-item.active { color:#eaeaea; }91 .home-indicator {92 position:absolute; bottom:34px; left:50%; transform:translateX(-50%);93 width:280px; height:12px; background:#e6e6e6; border-radius:6px; opacity:0.85;94 }95 /* SVG helpers */96 svg { fill:none; stroke:#eaeaea; stroke-width:3; }97 .accent svg { stroke:#61e4bf; }98</style>99</head>100<body>101<div id="render-target">102 103 <!-- Status Bar -->104 <div class="status-bar">105 <div class="status-left">12:27</div>106 <div class="status-right">107 <!-- simple status icons -->108 <svg width="32" height="32"><circle cx="16" cy="16" r="6" fill="#fff"/></svg>109 <svg width="32" height="32"><circle cx="16" cy="16" r="6" fill="#fff"/></svg>110 <svg width="32" height="32"><circle cx="16" cy="16" r="6" fill="#fff"/></svg>111 <svg width="32" height="32"><circle cx="16" cy="16" r="6" fill="#fff"/></svg>112 <svg width="8" height="32"><circle cx="4" cy="16" r="3" fill="#fff"/></svg>113 <svg width="32" height="32"><path d="M6 10 l20 0 m-20 6 l14 0 m-14 6 l10 0" /></svg>114 <svg width="40" height="32"><path d="M6 6 l28 0 l0 20 l-28 0 z"/><path d="M10 10 l20 0" /><path d="M10 16 l20 0" /></svg>115 <svg width="32" height="32"><rect x="6" y="6" width="20" height="20" stroke="#fff"/><rect x="12" y="12" width="8" height="12" fill="#fff"/></svg>116 </div>117 </div>118 119 <!-- Header -->120 <div class="header">121 <div class="icon-btn">122 <svg width="60" height="60"><path d="M38 12 L20 30 L38 48" stroke-linecap="round" stroke-linejoin="round"/></svg>123 </div>124 <div style="display:flex; gap:36px;">125 <div class="icon-btn">126 <!-- share -->127 <svg width="60" height="60">128 <circle cx="16" cy="30" r="6"/><circle cx="44" cy="18" r="6"/><circle cx="44" cy="42" r="6"/>129 <path d="M22 30 L38 20 M22 30 L38 40" />130 </svg>131 </div>132 <div class="icon-btn">133 <!-- heart -->134 <svg width="60" height="60">135 <path d="M30 46 C14 36 10 26 16 20 C20 16 26 18 30 22 C34 18 40 16 44 20 C50 26 46 36 30 46" stroke-linejoin="round"/>136 </svg>137 </div>138 <div class="icon-btn">139 <!-- cart -->140 <svg width="60" height="60">141 <path d="M12 16 L48 16 L44 32 L20 32 L16 20 Z" />142 <circle cx="22" cy="40" r="5"/><circle cx="40" cy="40" r="5"/>143 </svg>144 </div>145 </div>146 </div>147 148 <div class="divider top1"></div>149 150 <!-- Search -->151 <div class="search-area">152 <div class="search-box">153 <svg width="56" height="56">154 <circle cx="22" cy="22" r="16"/><path d="M36 36 L54 54" />155 </svg>156 <span>Search reviews...</span>157 </div>158 <div class="chips">159 <div class="chip">160 <svg width="44" height="44"><path d="M6 12 L38 12 M6 22 L28 22 M6 32 L20 32" /></svg>161 <span>Filters</span>162 </div>163 <div class="chip outlined">164 <svg width="44" height="44"><circle cx="22" cy="22" r="18"/><path d="M22 10 L22 34 M10 22 L34 22" /></svg>165 <span>English</span>166 </div>167 </div>168 </div>169 170 <div class="divider top2"></div>171 172 <!-- Summary -->173 <div class="summary">174 <div class="stars">175 <div class="star-dot"></div>176 <div class="star-dot"></div>177 <div class="star-dot"></div>178 <div class="star-dot"></div>179 <div class="star-dot grey">D</div>180 <div style="font-size:40px; margin-left:20px;">56 reviews</div>181 </div>182 183 <div class="ratings">184 <div class="rating-row">185 <div class="label">Excellent</div>186 <div class="bar"><div class="fill" style="width:68%;"></div></div>187 <div class="value">32</div>188 </div>189 <div class="rating-row">190 <div class="label">Very good</div>191 <div class="bar"><div class="fill" style="width:48%;"></div></div>192 <div class="value">17</div>193 </div>194 <div class="rating-row">195 <div class="label">Average</div>196 <div class="bar"><div class="fill" style="width:20%;"></div></div>197 <div class="value">5</div>198 </div>199 <div class="rating-row">200 <div class="label">Poor</div>201 <div class="bar"><div class="fill" style="width:12%;"></div></div>202 <div class="value">2</div>203 </div>204 <div class="rating-row">205 <div class="label">Terrible</div>206 <div class="bar"><div class="fill" style="width:0%;"></div></div>207 <div class="value">0</div>208 </div>209 </div>210 </div>211 212 <div class="divider mid"></div>213 214 <!-- Review Card -->215 <div class="review-card">216 <div class="user-row">217 <div class="user-info">218 <div class="avatar">[IMG: User Avatar]</div>219 <div>220 <div class="name">Lori A</div>221 <div class="meta">33 contributions</div>222 </div>223 </div>224 <div class="more-btn">225 <svg width="12" height="54">226 <circle cx="6" cy="10" r="4" /><circle cx="6" cy="27" r="4" /><circle cx="6" cy="44" r="4" />227 </svg>228 </div>229 </div>230 231 <div class="green-dots">232 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>233 </div>234 235 <div class="title">Beauty comes in many forms</div>236 <div class="date">Aug 2020</div>237 <div class="body-text">238 This renovated art gallery shares the passion and talents of Peace Countrys' finest artists. There is always works of art and a quant gift shop to p...239 </div>240 <div class="read-more">Read more ▼</div>241 <div class="written">Written 08/14/20</div>242 243 <div class="actions">244 <span style="font-size:40px;">👍</span>245 <span>2</span>246 </div>247 </div>248 249 <div class="divider bottom-review"></div>250 251 <!-- Bottom Navigation -->252 <div class="bottom-nav">253 <div class="highlight"></div>254 <div class="nav-item">255 <svg width="60" height="60"><path d="M12 30 L30 14 L48 30 L48 48 L12 48 Z" /></svg>256 <div>Explore</div>257 </div>258 <div class="nav-item active">259 <svg width="60" height="60"><circle cx="26" cy="26" r="18"/><path d="M40 40 L56 56" /></svg>260 <div>Search</div>261 </div>262 <div class="nav-item">263 <svg width="60" height="60"><path d="M30 46 C14 36 10 26 16 20 C20 16 26 18 30 22 C34 18 40 16 44 20 C50 26 46 36 30 46" /></svg>264 <div>Plan</div>265 </div>266 <div class="nav-item">267 <svg width="60" height="60"><path d="M12 12 L48 12 L48 48 L12 48 Z" /><path d="M20 24 L40 24" /><path d="M20 34 L40 34" /></svg>268 <div>Review</div>269 </div>270 <div class="nav-item">271 <svg width="60" height="60"><circle cx="30" cy="22" r="12"/><path d="M12 52 C12 40 48 40 48 52 Z" /></svg>272 <div>Account</div>273 </div>274 </div>275 276 <div class="home-indicator"></div>277 278</div>279</body>280</html>