GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Comfort Works Custom Slipcovers - Reviews</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background:#212121; color:#ffffff;13 }14 15 /* Status bar */16 .statusbar {17 position:absolute; top:0; left:0; width:100%; height:96px;18 background:#131313; display:flex; align-items:center; justify-content:space-between;19 padding:0 40px; box-sizing:border-box; font-size:40px; letter-spacing:0.5px;20 }21 .status-icons { display:flex; align-items:center; gap:26px; }22 .status-icon {23 width:30px; height:30px; border-radius:50%; background:#e0e0e0; opacity:0.85;24 }25 .battery {26 width:42px; height:22px; border:2px solid #e0e0e0; border-radius:4px; position:relative;27 }28 .battery::after {29 content:""; position:absolute; right:-6px; top:7px; width:6px; height:8px; background:#e0e0e0; border-radius:2px;30 }31 .battery-fill { position:absolute; left:2px; top:2px; right:8px; bottom:2px; background:#e0e0e0; }32 33 /* App bar */34 .appbar {35 position:absolute; top:96px; left:0; width:100%; height:120px;36 background:#343434; display:flex; align-items:center; box-sizing:border-box;37 padding:0 30px;38 }39 .back-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; margin-right:24px; }40 .app-title { font-size:44px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }41 42 /* Content area */43 .content {44 position:absolute; top:216px; left:0; width:100%; bottom:0;45 box-sizing:border-box; padding:0 40px;46 }47 .divider { height:2px; background:#3b3b3b; width:100%; margin:24px 0; }48 .review { margin-bottom:30px; }49 .review-header { display:flex; align-items:flex-start; }50 .avatar {51 width:120px; height:120px; border-radius:60px;52 background:#E0E0E0; border:1px solid #BDBDBD;53 display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px;54 margin-right:28px;55 }56 .info .name { font-size:40px; font-weight:700; }57 .info .role { font-size:28px; color:#b0b0b0; margin-top:6px; }58 .rating { margin-left:auto; text-align:right; }59 .stars { display:flex; gap:10px; justify-content:flex-end; }60 .date { font-size:28px; color:#b0b0b0; margin-top:8px; }61 .review-text { font-size:36px; line-height:1.38; color:#eaeaea; margin-top:20px; }62 .read-more { color:#00c2a6; font-size:32px; font-weight:700; margin-top:22px; }63 .like-row { display:flex; align-items:center; gap:18px; margin-top:26px; color:#eaeaea; font-size:34px; }64 .like-row .count { color:#eaeaea; }65 .mid-divider { height:2px; background:#3b3b3b; width:100%; margin:36px 0; }66 67 /* View all link */68 .view-all { text-align:center; color:#00c2a6; font-size:34px; font-weight:800; letter-spacing:1px; margin:40px 0; }69 70 /* List section */71 .section-spacer { height:36px; background:#0c0c0c; margin:6px 0 0; }72 .list { margin-top:8px; background:#2a2a2a; border-top:2px solid #121212; }73 .list-row {74 display:flex; align-items:center; justify-content:space-between;75 padding:28px 40px; border-bottom:2px solid #3b3b3b;76 color:#fff; font-size:36px;77 }78 .left-cell { display:flex; align-items:center; gap:24px; }79 .list-icon {80 width:60px; height:60px; display:flex; align-items:center; justify-content:center;81 border-radius:6px; border:2px solid #bdbdbd; color:#757575; background:#E0E0E0; font-size:24px;82 }83 .right-cell { display:flex; align-items:center; gap:20px; color:#b0b0b0; }84 .chev { width:28px; height:28px; border-right:4px solid #b0b0b0; border-top:4px solid #b0b0b0; transform:rotate(45deg); }85 86 /* Send message CTA */87 .cta {88 position:absolute; left:60px; right:60px; bottom:160px;89 background:#00c2a6; color:#0f3c35; height:140px; border-radius:14px;90 display:flex; align-items:center; justify-content:center; gap:24px;91 font-size:40px; font-weight:700;92 box-shadow:0 6px 20px rgba(0,0,0,0.5);93 }94 .cta svg { fill:#0f3c35; }95 96 /* Bottom gesture pill */97 .gesture {98 position:absolute; bottom:60px; left:50%; transform:translateX(-50%);99 width:300px; height:14px; border-radius:14px; background:#d7d7d7; opacity:0.9;100 }101 102 /* SVG sizing helper */103 .icon-32 { width:38px; height:38px; }104 .icon-28 { width:32px; height:32px; }105</style>106</head>107<body>108<div id="render-target">109 110 <!-- Status bar -->111 <div class="statusbar">112 <div>10:41</div>113 <div class="status-icons">114 <div class="status-icon"></div>115 <div class="status-icon"></div>116 <div class="status-icon"></div>117 <div class="status-icon"></div>118 <div class="status-icon"></div>119 <div class="battery"><div class="battery-fill"></div></div>120 </div>121 </div>122 123 <!-- App bar -->124 <div class="appbar">125 <div class="back-btn">126 <svg class="icon-32" viewBox="0 0 24 24">127 <path d="M15 18L9 12l6-6" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>128 </svg>129 </div>130 <div class="app-title">Comfort Works Custom Slipcovers</div>131 </div>132 133 <!-- Content -->134 <div class="content">135 136 <div class="divider"></div>137 138 <!-- Review 1 -->139 <div class="review">140 <div class="review-header">141 <div class="avatar">[IMG: User Avatar]</div>142 <div class="info">143 <div class="name">HU-450115508</div>144 <div class="role">Client</div>145 </div>146 <div class="rating">147 <div class="stars">148 <!-- five filled stars -->149 <svg class="icon-28" viewBox="0 0 24 24"><path d="M12 17.3L18.2 21l-1.6-7L22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.8L5.8 21z" fill="#f4c542"/></svg>150 <svg class="icon-28" viewBox="0 0 24 24"><path d="M12 17.3L18.2 21l-1.6-7L22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.8L5.8 21z" fill="#f4c542"/></svg>151 <svg class="icon-28" viewBox="0 0 24 24"><path d="M12 17.3L18.2 21l-1.6-7L22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.8L5.8 21z" fill="#f4c542"/></svg>152 <svg class="icon-28" viewBox="0 0 24 24"><path d="M12 17.3L18.2 21l-1.6-7L22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.8L5.8 21z" fill="#f4c542"/></svg>153 <svg class="icon-28" viewBox="0 0 24 24"><path d="M12 17.3L18.2 21l-1.6-7L22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.8L5.8 21z" fill="#f4c542"/></svg>154 </div>155 <div class="date">Nov 4, 2023</div>156 </div>157 </div>158 <div class="review-text">159 I have found you to be an excellent communicator. Our covers arrived on time and fitted our unit perfectly. As we have other chairs we will be back for160 </div>161 <div class="read-more">READ MORE</div>162 <div class="like-row">163 <svg class="icon-32" viewBox="0 0 24 24">164 <path d="M3 21v-9h4v9H3zm18-10c0-.6-.4-1-1-1h-6l1-4c0-.7-.3-1.5-1.2-1.5H12l-3 6v9h9c.6 0 1-.4 1-1l2-6v-1z" fill="none" stroke="#ffffff" stroke-width="1.8" stroke-linejoin="round"/>165 </svg>166 <div>Like <span class="count">(1)</span></div>167 </div>168 </div>169 170 <div class="mid-divider"></div>171 172 <!-- Review 2 -->173 <div class="review">174 <div class="review-header">175 <div class="avatar">[IMG: User Avatar]</div>176 <div class="info">177 <div class="name">Martine Allars</div>178 <div class="role">Client</div>179 </div>180 <div class="rating">181 <div class="stars">182 <!-- one filled, four outlined -->183 <svg class="icon-28" viewBox="0 0 24 24"><path d="M12 17.3L18.2 21l-1.6-7L22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.8L5.8 21z" fill="#f4c542"/></svg>184 <svg class="icon-28" viewBox="0 0 24 24"><path d="M12 17.3L18.2 21l-1.6-7L22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.8L5.8 21z" fill="none" stroke="#777" stroke-width="1.6"/></svg>185 <svg class="icon-28" viewBox="0 0 24 24"><path d="M12 17.3L18.2 21l-1.6-7L22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.8L5.8 21z" fill="none" stroke="#777" stroke-width="1.6"/></svg>186 <svg class="icon-28" viewBox="0 0 24 24"><path d="M12 17.3L18.2 21l-1.6-7L22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.8L5.8 21z" fill="none" stroke="#777" stroke-width="1.6"/></svg>187 <svg class="icon-28" viewBox="0 0 24 24"><path d="M12 17.3L18.2 21l-1.6-7L22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.8L5.8 21z" fill="none" stroke="#777" stroke-width="1.6"/></svg>188 </div>189 <div class="date">Oct 25, 2023</div>190 </div>191 </div>192 <div class="review-text">193 I was so excited about ordering my two EKTORP sofa covers in claw-proof velvet. At almost $1200 AUD it was a big investment but after six months of194 </div>195 <div class="read-more">READ MORE</div>196 <div class="like-row">197 <svg class="icon-32" viewBox="0 0 24 24">198 <path d="M3 21v-9h4v9H3zm18-10c0-.6-.4-1-1-1h-6l1-4c0-.7-.3-1.5-1.2-1.5H12l-3 6v9h9c.6 0 1-.4 1-1l2-6v-1z" fill="none" stroke="#ffffff" stroke-width="1.8" stroke-linejoin="round"/>199 </svg>200 <div>Like</div>201 </div>202 </div>203 204 <div class="divider"></div>205 206 <div class="view-all">VIEW ALL 624 REVIEWS</div>207 208 <div class="section-spacer"></div>209 210 <!-- Lower list -->211 <div class="list">212 <div class="list-row">213 <div class="left-cell">214 <div class="list-icon">[IMG]</div>215 <div>Ideabooks</div>216 </div>217 <div class="right-cell">218 <div>4</div>219 <div class="chev"></div>220 </div>221 </div>222 <div class="list-row">223 <div class="left-cell">224 <div class="list-icon">[IMG]</div>225 <div>Posts</div>226 </div>227 <div class="right-cell">228 <div class="chev"></div>229 </div>230 </div>231 </div>232 233 </div>234 235 <!-- CTA button -->236 <div class="cta">237 <svg viewBox="0 0 24 24" width="48" height="48">238 <path d="M2 6h20v12H2z" fill="none" stroke="#0f3c35" stroke-width="2"/>239 <path d="M2 6l10 7 10-7" fill="none" stroke="#0f3c35" stroke-width="2" stroke-linecap="round"/>240 </svg>241 <div>Send Message</div>242 </div>243 244 <!-- Gesture pill -->245 <div class="gesture"></div>246 247</div>248</body>249</html>