GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Reviews UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #FFFFFF;12 }13 14 /* Status bar */15 .statusbar {16 position: absolute; top: 0; left: 0; right: 0;17 height: 120px; background: #E5E5E5; color: #9E9E9E;18 display: flex; align-items: center; padding: 0 40px; font-size: 38px;19 }20 .statusbar .time { color: #757575; font-weight: 600; }21 .statusbar .icons { margin-left: auto; display: flex; align-items: center; gap: 28px; }22 23 /* Header */24 .header {25 position: absolute; top: 120px; left: 0; right: 0;26 height: 140px; background: #FFFFFF; border-bottom: 1px solid #E0E0E0;27 display: flex; align-items: center; padding: 0 32px; color: #424242;28 }29 .header .back {30 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin-right: 20px;31 }32 .header .title { font-size: 60px; font-weight: 600; }33 34 /* Rating summary */35 .summary {36 position: absolute; top: 260px; left: 0; right: 0;37 height: 420px; background: #FFFFFF; border-bottom: 1px solid #E0E0E0;38 display: flex; flex-direction: column; align-items: center; justify-content: center;39 color: #424242;40 }41 .summary .score { font-size: 100px; font-weight: 600; margin-bottom: 28px; }42 .summary .stars { display: flex; gap: 12px; margin-bottom: 24px; }43 .summary .count { color: #757575; font-size: 40px; letter-spacing: 2px; }44 45 /* Sort bar */46 .sortbar {47 position: absolute; top: 680px; left: 0; right: 0;48 height: 130px; border-top: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE;49 display: flex; align-items: center; padding: 0 40px; color: #616161; background: #FAFAFA;50 font-size: 44px;51 }52 .sortbar .left { display: flex; align-items: center; gap: 22px; }53 .sortbar .spacer { flex: 1; }54 .sortbar .right { display: flex; align-items: center; gap: 16px; color: #424242; font-weight: 600; }55 56 /* Review card */57 .card {58 position: absolute; left: 20px; right: 20px;59 background: #FFFFFF; border: 1px solid #E5E5E5; border-radius: 8px;60 padding: 36px 40px; color: #424242;61 }62 .card .title { font-size: 56px; font-weight: 700; margin-bottom: 8px; }63 .card .subtitle { font-size: 38px; color: #9E9E9E; margin-bottom: 28px; }64 .card .meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }65 .card .author { font-size: 42px; color: #616161; }66 .card .date { font-size: 36px; color: #9E9E9E; }67 .card .rating { display: flex; gap: 12px; margin-bottom: 22px; }68 .card .excerpt { font-size: 40px; color: #616161; line-height: 1.35; }69 70 /* Divider chevron */71 .divider {72 position: absolute; left: 0; right: 0;73 height: 70px; display: flex; align-items: center; justify-content: center;74 }75 .divider::before, .divider::after {76 content: ""; position: absolute; left: 0; right: 0; height: 1px; background: #E0E0E0;77 }78 .divider::before { top: 0; }79 .divider::after { bottom: 0; }80 81 /* Bottom gesture bar */82 .gesture {83 position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);84 width: 360px; height: 18px; background: #000000; border-radius: 20px; opacity: 0.75;85 }86 87 /* SVG helpers */88 .icon { display: inline-block; }89 .green { color: #7CB342; }90</style>91</head>92<body>93<div id="render-target">94 95 <!-- Status Bar -->96 <div class="statusbar">97 <div class="time">12:25</div>98 <div class="icons">99 <!-- simple round icons and search dot placeholders -->100 <svg class="icon" width="30" height="30"><circle cx="15" cy="15" r="12" fill="#BDBDBD"/></svg>101 <svg class="icon" width="30" height="30"><circle cx="15" cy="15" r="12" fill="#BDBDBD"/></svg>102 <svg class="icon" width="30" height="30"><circle cx="15" cy="15" r="12" fill="#BDBDBD"/></svg>103 <svg class="icon" width="36" height="36"><circle cx="16" cy="16" r="14" fill="none" stroke="#9E9E9E" stroke-width="3"/><line x1="26" y1="26" x2="34" y2="34" stroke="#9E9E9E" stroke-width="3"/></svg>104 <svg class="icon" width="40" height="28"><polygon points="2,26 38,26 20,2" fill="#BDBDBD"/></svg>105 <svg class="icon" width="22" height="28"><rect x="6" y="2" width="10" height="24" fill="#BDBDBD"/></svg>106 </div>107 </div>108 109 <!-- Header -->110 <div class="header">111 <div class="back">112 <svg width="48" height="48" viewBox="0 0 24 24">113 <path d="M15 18l-6-6 6-6" stroke="#424242" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>114 </svg>115 </div>116 <div class="title">Reviews</div>117 </div>118 119 <!-- Rating Summary -->120 <div class="summary">121 <div class="score">3.556</div>122 <div class="stars">123 <!-- 4 filled, 1 outline -->124 <svg width="56" height="56" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z" fill="#7CB342"/></svg>125 <svg width="56" height="56" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z" fill="#7CB342"/></svg>126 <svg width="56" height="56" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z" fill="#7CB342"/></svg>127 <svg width="56" height="56" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z" fill="#7CB342"/></svg>128 <svg width="56" height="56" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z" fill="none" stroke="#7CB342" stroke-width="2"/></svg>129 </div>130 <div class="count">9 REVIEWS</div>131 </div>132 133 <!-- Sort Bar -->134 <div class="sortbar">135 <div class="left">136 <svg width="48" height="48" viewBox="0 0 24 24">137 <path d="M3 5h18M6 11h12M10 17h8" stroke="#757575" stroke-width="2.4" stroke-linecap="round"/>138 </svg>139 <div>Sort by</div>140 </div>141 <div class="spacer"></div>142 <div class="right">143 <div>Most Recent</div>144 <svg width="36" height="36" viewBox="0 0 24 24">145 <path d="M6 9l6 6 6-6" stroke="#616161" stroke-width="2.5" fill="none" stroke-linecap="round"/>146 </svg>147 </div>148 </div>149 150 <!-- Review Card 1 -->151 <div class="card" style="top: 830px;">152 <div class="title">Broke my heart</div>153 <div class="subtitle">Audi A3 Sedan</div>154 <div class="meta">155 <div class="author">Dorothy</div>156 <div class="date">12/27/23</div>157 </div>158 <div class="rating">159 <!-- 1 filled, 4 outline -->160 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z" fill="#7CB342"/></svg>161 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z" fill="none" stroke="#7CB342" stroke-width="2"/></svg>162 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z" fill="none" stroke="#7CB342" stroke-width="2"/></svg>163 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z" fill="none" stroke="#7CB342" stroke-width="2"/></svg>164 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z" fill="none" stroke="#7CB342" stroke-width="2"/></svg>165 </div>166 <div class="excerpt">167 Buyer Beware: I love everything about my 2022 Audi A3—except the fact that the engine stopped...168 </div>169 </div>170 171 <!-- Divider -->172 <div class="divider" style="top: 1260px;">173 <svg width="60" height="60" viewBox="0 0 24 24">174 <path d="M6 10l6 6 6-6" stroke="#9E9E9E" stroke-width="2.4" fill="none" stroke-linecap="round"/>175 </svg>176 </div>177 178 <!-- Review Card 2 -->179 <div class="card" style="top: 1330px;">180 <div class="title">So disappointing and unreliable</div>181 <div class="subtitle">Audi A3 Sedan</div>182 <div class="meta">183 <div class="author">SeattleGuy</div>184 <div class="date">12/25/23</div>185 </div>186 <div class="rating">187 <!-- 3 filled, 2 outline (approx mid rating) -->188 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z" fill="#7CB342"/></svg>189 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z" fill="#7CB342"/></svg>190 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z" fill="#7CB342"/></svg>191 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z" fill="none" stroke="#7CB342" stroke-width="2"/></svg>192 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z" fill="none" stroke="#7CB342" stroke-width="2"/></svg>193 </div>194 <div class="excerpt">195 In less than 12 months and under 14k miles the gearbox needed complete replacement. This...196 </div>197 </div>198 199 <!-- Divider -->200 <div class="divider" style="top: 1760px;">201 <svg width="60" height="60" viewBox="0 0 24 24">202 <path d="M6 10l6 6 6-6" stroke="#9E9E9E" stroke-width="2.4" fill="none" stroke-linecap="round"/>203 </svg>204 </div>205 206 <!-- Review Card 3 -->207 <div class="card" style="top: 1830px;">208 <div class="title">Nice car let down by poor quality</div>209 <div class="subtitle">Audi A3 Sedan</div>210 <div class="meta">211 <div class="author">Ian</div>212 <div class="date">8/30/23</div>213 </div>214 <div class="rating">215 <!-- 1 filled, 4 outline -->216 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z" fill="#7CB342"/></svg>217 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z" fill="none" stroke="#7CB342" stroke-width="2"/></svg>218 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z" fill="none" stroke="#7CB342" stroke-width="2"/></svg>219 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z" fill="none" stroke="#7CB342" stroke-width="2"/></svg>220 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z" fill="none" stroke="#7CB342" stroke-width="2"/></svg>221 </div>222 <div class="excerpt">223 First the good things…. I bought this car primarily because I needed an all...224 </div>225 </div>226 227 <!-- Bottom gesture bar -->228 <div class="gesture"></div>229</div>230</body>231</html>