GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1440, initial-scale=1.0">6<title>User Reviews UI</title>7<style>8 body{margin:0;padding:0;background:transparent;font-family:Arial, Helvetica, sans-serif;}9 #render-target{10 width:1440px;height:3120px;position:relative;overflow:hidden;11 background:#f5f5f5;color:#3f3f3f;12 }13 14 /* Status bar */15 .statusbar{16 position:absolute;top:0;left:0;width:100%;height:120px;17 background:#7a7a7a;color:#fff;display:flex;align-items:center;justify-content:space-between;18 padding:0 40px;box-sizing:border-box;font-weight:600;font-size:46px;19 }20 .status-icons{display:flex;gap:28px;align-items:center;}21 .status-dot{width:14px;height:14px;background:#fff;border-radius:50%;}22 .status-pill{width:58px;height:18px;background:#fff;border-radius:10px;opacity:.9;}23 24 /* Tabs */25 .tabs{26 position:absolute;top:120px;left:0;width:100%;height:160px;background:#ffffff;27 border-bottom:1px solid #e3e3e3;display:flex;align-items:flex-end;gap:90px;padding:0 40px 0 40px;28 box-sizing:border-box;29 }30 .tab{31 padding:40px 0 36px 0;font-size:46px;font-weight:700;color:#7a7a7a;text-transform:uppercase;32 }33 .tab.active{color:#09a89a;border-bottom:10px solid #09a89a;}34 35 /* Metrics */36 .metrics{37 position:absolute;top:280px;left:0;width:100%;background:#ffffff;38 padding:40px 40px 10px 40px;box-sizing:border-box;39 }40 .metric-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;row-gap:40px;}41 .metric-item{display:flex;align-items:center;gap:28px;}42 .score{43 width:128px;height:128px;border-radius:50%;border:12px solid #11b7a3;display:flex;align-items:center;justify-content:center;44 font-weight:800;color:#11b7a3;font-size:46px;position:relative;background:#fff;45 }46 .metric-label{font-size:50px;color:#5a5a5a;font-weight:700;}47 .metrics-divider{margin-top:40px;height:24px;background:#f5f5f5;border-top:1px solid #e6e6e6;border-bottom:1px solid #e6e6e6;}48 49 /* Reviews header */50 .reviews-header{51 position:absolute;top:760px;left:0;width:100%;background:#ffffff;display:flex;justify-content:space-between;align-items:center;52 padding:40px;box-sizing:border-box;border-bottom:1px solid #e5e5e5;53 }54 .reviews-title{font-size:54px;font-weight:800;color:#3f3f3f;}55 .filter{56 display:flex;align-items:center;gap:24px;background:#f9f9f9;border:1px solid #d9d9d9;border-radius:20px;padding:28px 34px;57 font-size:46px;color:#5a5a5a;font-weight:700;58 }59 .chev{width:36px;height:36px;}60 .chev path{stroke:#666;stroke-width:8;fill:none;stroke-linecap:round;stroke-linejoin:round;}61 62 /* Review card */63 .review{64 position:absolute;left:0;width:100%;background:#ffffff;padding:40px;box-sizing:border-box;border-bottom:1px solid #e6e6e6;65 }66 .r1{top:940px;}67 .r2{top:1660px;}68 .review-title{font-size:56px;font-weight:800;margin-bottom:18px;color:#3a3a3a;}69 .stars{display:flex;gap:18px;margin:12px 0 18px 0;}70 .star{width:48px;height:48px;}71 .star path{fill:#0db1a3;}72 .meta{font-size:40px;color:#9a9a9a;margin-bottom:26px;}73 .meta span.sep{margin:0 20px;color:#c5c5c5;}74 .review-text{font-size:44px;color:#686868;line-height:1.45;max-width:1260px;}75 .read-more{color:#287bd6;font-weight:700;float:right;margin-top:18px;font-size:46px;text-decoration:none;}76 .helpful{display:flex;justify-content:space-between;align-items:center;margin-top:40px;}77 .helpful .label{font-size:42px;color:#7a7a7a;}78 .votes{display:flex;gap:40px;align-items:center;}79 .vote{display:flex;align-items:center;gap:16px;color:#7a7a7a;font-size:42px;}80 .thumb{width:52px;height:52px;}81 .thumb path{stroke:#7a7a7a;stroke-width:8;fill:none;stroke-linecap:round;stroke-linejoin:round;}82 83 /* Bottom sticky bar */84 .cta-bar{85 position:absolute;bottom:120px;left:0;width:100%;height:180px;background:#ffffff;border-top:1px solid #e6e6e6;display:flex;86 }87 .cta{88 flex:1;display:flex;align-items:center;justify-content:center;font-size:54px;font-weight:800;89 }90 .cta.left{color:#09a89a;}91 .cta.right{background:#e73c21;color:#ffffff;}92 .home-indicator{93 position:absolute;bottom:40px;left:50%;transform:translateX(-50%);width:320px;height:18px;background:#000;border-radius:9px;opacity:.18;94 }95</style>96</head>97<body>98<div id="render-target">99 100 <!-- Status bar -->101 <div class="statusbar">102 <div>3:32</div>103 <div class="status-icons">104 <div class="status-pill"></div>105 <div class="status-pill" style="width:34px;"></div>106 <div class="status-pill" style="width:34px;"></div>107 <div class="status-pill" style="width:34px;"></div>108 <div class="status-dot"></div>109 <div class="status-pill" style="width:36px;"></div>110 </div>111 </div>112 113 <!-- Tabs -->114 <div class="tabs">115 <div class="tab active">User Review</div>116 <div class="tab">Expert Review</div>117 <div class="tab">Videos</div>118 <div class="tab">News</div>119 </div>120 121 <!-- Metrics section -->122 <div class="metrics">123 <div class="metric-grid">124 <div class="metric-item">125 <div class="score">4.7</div>126 <div class="metric-label">Exterior</div>127 </div>128 <div class="metric-item">129 <div class="score">4.6</div>130 <div class="metric-label">Comfort</div>131 </div>132 <div class="metric-item">133 <div class="score">4.7</div>134 <div class="metric-label">Performance</div>135 </div>136 <div class="metric-item">137 <div class="score">4.3</div>138 <div class="metric-label">Fuel Economy</div>139 </div>140 <div class="metric-item">141 <div class="score">4.6</div>142 <div class="metric-label">Value For Money</div>143 </div>144 </div>145 <div class="metrics-divider"></div>146 </div>147 148 <!-- Reviews header -->149 <div class="reviews-header">150 <div class="reviews-title">All Reviews (157)</div>151 <div class="filter">152 <div>Latest</div>153 <svg class="chev" viewBox="0 0 24 24">154 <path d="M4 8 L12 16 L20 8"></path>155 </svg>156 </div>157 </div>158 159 <!-- Review card 1 -->160 <div class="review r1">161 <div class="review-title">Mahindra Scorpio</div>162 <div class="stars">163 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L14.9 9.2 L22 9.2 L16 13.8 L18.3 21.5 L12 16.9 L5.7 21.5 L8 13.8 L2 9.2 L9.1 9.2 Z"/></svg>164 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L14.9 9.2 L22 9.2 L16 13.8 L18.3 21.5 L12 16.9 L5.7 21.5 L8 13.8 L2 9.2 L9.1 9.2 Z"/></svg>165 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L14.9 9.2 L22 9.2 L16 13.8 L18.3 21.5 L12 16.9 L5.7 21.5 L8 13.8 L2 9.2 L9.1 9.2 Z"/></svg>166 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L14.9 9.2 L22 9.2 L16 13.8 L18.3 21.5 L12 16.9 L5.7 21.5 L8 13.8 L2 9.2 L9.1 9.2 Z"/></svg>167 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L14.9 9.2 L22 9.2 L16 13.8 L18.3 21.5 L12 16.9 L5.7 21.5 L8 13.8 L2 9.2 L9.1 9.2 Z"/></svg>168 </div>169 <div class="meta">9 days ago <span class="sep">|</span> Nilesh Thakur</div>170 <div class="review-text">171 Very good at driving with soft Hands, just like to chill in the forest with Mahindra Scorpio. The fill it gives with fa...172 </div>173 <a class="read-more" href="#">Read More</a>174 <div class="helpful">175 <div class="label">Was this review helpful?</div>176 <div class="votes">177 <div class="vote">178 <svg class="thumb" viewBox="0 0 24 24"><path d="M6 21 L6 10 M9 12 L12 4 L18 4 C19.5 4 20 5.5 19 7 L17 12 V21 H9"></path></svg>179 <div>3</div>180 </div>181 <div class="vote">182 <svg class="thumb" viewBox="0 0 24 24"><path d="M6 3 L6 14 M9 12 L12 20 L18 20 C19.5 20 20 18.5 19 17 L17 12 V3 H9"></path></svg>183 <div>2</div>184 </div>185 </div>186 </div>187 </div>188 189 <!-- Review card 2 -->190 <div class="review r2">191 <div class="review-title">Mahindra Scorpio</div>192 <div class="stars">193 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L14.9 9.2 L22 9.2 L16 13.8 L18.3 21.5 L12 16.9 L5.7 21.5 L8 13.8 L2 9.2 L9.1 9.2 Z"/></svg>194 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L14.9 9.2 L22 9.2 L16 13.8 L18.3 21.5 L12 16.9 L5.7 21.5 L8 13.8 L2 9.2 L9.1 9.2 Z"/></svg>195 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L14.9 9.2 L22 9.2 L16 13.8 L18.3 21.5 L12 16.9 L5.7 21.5 L8 13.8 L2 9.2 L9.1 9.2 Z"/></svg>196 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L14.9 9.2 L22 9.2 L16 13.8 L18.3 21.5 L12 16.9 L5.7 21.5 L8 13.8 L2 9.2 L9.1 9.2 Z"/></svg>197 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L14.9 9.2 L22 9.2 L16 13.8 L18.3 21.5 L12 16.9 L5.7 21.5 L8 13.8 L2 9.2 L9.1 9.2 Z"/></svg>198 </div>199 <div class="meta">10 days ago <span class="sep">|</span> Saikumar</div>200 <div class="review-text">201 No cons all over this SUV is super in the performance and comfort I like the car and drive short amount of distance...202 </div>203 <a class="read-more" href="#">Read More</a>204 <div class="helpful">205 <div class="label">Was this review helpful?</div>206 <div class="votes">207 <div class="vote">208 <svg class="thumb" viewBox="0 0 24 24"><path d="M6 21 L6 10 M9 12 L12 4 L18 4 C19.5 4 20 5.5 19 7 L17 12 V21 H9"></path></svg>209 <div>2</div>210 </div>211 <div class="vote">212 <svg class="thumb" viewBox="0 0 24 24"><path d="M6 3 L6 14 M9 12 L12 20 L18 20 C19.5 20 20 18.5 19 17 L17 12 V3 H9"></path></svg>213 <div>1</div>214 </div>215 </div>216 </div>217 </div>218 219 <!-- Bottom CTA bar and home indicator -->220 <div class="cta-bar">221 <div class="cta left">Contact Dealer</div>222 <div class="cta right">Get January Offers</div>223 </div>224 <div class="home-indicator"></div>225 226</div>227</body>228</html>