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</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: Arial, Helvetica, sans-serif;16 color: #000;17 }18 19 /* Status bar */20 .statusbar {21 height: 120px;22 padding: 0 40px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #333;27 }28 .status-left { font-size: 42px; font-weight: 600; letter-spacing: 0.5px; }29 .status-right { display: flex; align-items: center; gap: 26px; }30 .icon-square {31 width: 38px; height: 38px; background: #BDBDBD; border-radius: 6px;32 }33 .status-dot { width: 12px; height: 12px; background: #757575; border-radius: 50%; }34 .icon-wifi, .icon-battery {35 width: 46px; height: 34px;36 }37 38 /* Content */39 .content { padding: 20px 60px 100px 60px; }40 .lead {41 font-size: 42px;42 color: #333;43 line-height: 1.4;44 margin: 24px 0 28px 0;45 }46 .divider {47 height: 2px;48 background: #E0E0E0;49 margin: 26px 0;50 }51 52 /* Review items */53 .review { padding-bottom: 22px; }54 .review .header {55 display: flex;56 align-items: center;57 justify-content: space-between;58 margin-top: 6px;59 }60 .stars { display: flex; align-items: center; gap: 10px; }61 .star { width: 44px; height: 44px; }62 .star.filled path { fill: #000; }63 .star.empty path { fill: none; stroke: #888; stroke-width: 2; }64 .meta {65 font-size: 32px;66 color: #666;67 }68 .title {69 font-size: 46px;70 font-weight: 700;71 margin: 24px 0 14px 0;72 letter-spacing: 0.3px;73 }74 .body {75 font-size: 34px;76 color: #555;77 line-height: 1.6;78 }79 80 /* Bottom home indicator */81 .home-indicator {82 position: absolute;83 bottom: 24px;84 left: 50%;85 transform: translateX(-50%);86 width: 260px;87 height: 16px;88 background: #000;89 border-radius: 10px;90 opacity: 0.25;91 }92</style>93</head>94<body>95<div id="render-target">96 <!-- Status Bar -->97 <div class="statusbar">98 <div class="status-left">3:38</div>99 <div class="status-right">100 <div class="icon-square"></div>101 <div class="icon-square"></div>102 <!-- small call icon -->103 <svg class="icon-wifi" viewBox="0 0 24 16">104 <path d="M4 6c4-4 12-4 16 0l-2 2c-3-3-9-3-12 0L4 6zm4 5c2-2 6-2 8 0l-2 2c-1-1-3-1-4 0L8 11zm4 5l-3-3h6l-3 3z" fill="#757575"/>105 </svg>106 <div class="status-dot"></div>107 <!-- battery -->108 <svg class="icon-battery" viewBox="0 0 26 14">109 <rect x="1" y="2" width="20" height="10" rx="2" fill="none" stroke="#555" stroke-width="2"/>110 <rect x="3" y="4" width="15" height="6" fill="#555"/>111 <rect x="22" y="5" width="3" height="4" rx="1" fill="#555"/>112 </svg>113 </div>114 </div>115 116 <div class="content">117 <div class="lead">Super design and very comfortable in locking</div>118 <div class="divider"></div>119 120 <!-- Review 1 -->121 <div class="review">122 <div class="header">123 <div class="stars">124 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 6h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z"/></svg>125 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 6h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z"/></svg>126 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 6h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z"/></svg>127 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 6h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z"/></svg>128 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 6h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z"/></svg>129 </div>130 <div class="meta">Anjali · 08/21/2022</div>131 </div>132 <div class="title">Nice</div>133 <div class="body">Nice</div>134 </div>135 136 <div class="divider"></div>137 138 <!-- Review 2 -->139 <div class="review">140 <div class="header">141 <div class="stars">142 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 6h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z"/></svg>143 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 6h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z"/></svg>144 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 6h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z"/></svg>145 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 6h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z"/></svg>146 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 6h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z"/></svg>147 </div>148 <div class="meta">RENUKA · 07/07/2022</div>149 </div>150 <div class="title">EXCELLENT</div>151 <div class="body">EXCELLENT</div>152 </div>153 154 <div class="divider"></div>155 156 <!-- Review 3 -->157 <div class="review">158 <div class="header">159 <div class="stars">160 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 6h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z"/></svg>161 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 6h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z"/></svg>162 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 6h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z"/></svg>163 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 6h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z"/></svg>164 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 6h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z"/></svg>165 </div>166 <div class="meta">Mahesh · 05/03/2022</div>167 </div>168 <div class="title">It's a excellent lock</div>169 <div class="body">It's a excellent lock</div>170 </div>171 172 <div class="divider"></div>173 174 <!-- Review 4 -->175 <div class="review">176 <div class="header">177 <div class="stars">178 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 6h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z"/></svg>179 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 6h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z"/></svg>180 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 6h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z"/></svg>181 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 6h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z"/></svg>182 <svg class="star empty" viewBox="0 0 24 24"><path d="M12 2l3 6h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z"/></svg>183 </div>184 <div class="meta">Geneviève · 04/12/2022</div>185 </div>186 <div class="title">Smaller and not as sturdy</div>187 <div class="body">Smaller and not as sturdy as expected, but overall useful for use as deterrent.</div>188 </div>189 190 <div class="divider"></div>191 192 <!-- Review 5 -->193 <div class="review">194 <div class="header">195 <div class="stars">196 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 6h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z"/></svg>197 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 6h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z"/></svg>198 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 6h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z"/></svg>199 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 6h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z"/></svg>200 <svg class="star empty" viewBox="0 0 24 24"><path d="M12 2l3 6h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z"/></svg>201 </div>202 <div class="meta">Na Y. · 01/24/2022</div>203 </div>204 <div class="title">small and convenient to use</div>205 <div class="body">small and convenient to use</div>206 </div>207 208 <div class="divider"></div>209 210 <!-- Review 6 -->211 <div class="review">212 <div class="header">213 <div class="stars">214 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 6h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z"/></svg>215 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 6h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z"/></svg>216 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 6h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z"/></svg>217 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 6h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z"/></svg>218 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 2l3 6h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z"/></svg>219 </div>220 <div class="meta">Maxwell · 09/28/2021</div>221 </div>222 <div class="title">Great little lock</div>223 <div class="body">Sturdy and easy to use.</div>224 </div>225 </div>226 227 <div class="home-indicator"></div>228</div>229</body>230</html>