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; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 }14 15 .status-bar {16 height: 120px;17 padding: 0 36px;18 display: flex;19 align-items: center;20 justify-content: space-between;21 color: #666;22 font-size: 40px;23 }24 .status-center { display: flex; gap: 18px; align-items: center; }25 .dot { width: 14px; height: 14px; background: #9e9e9e; border-radius: 50%; display: inline-block; }26 27 .reviews { padding: 0 64px; }28 .review {29 padding-top: 32px;30 }31 .review-top {32 display: flex;33 justify-content: space-between;34 align-items: center;35 }36 .stars { display: flex; gap: 12px; }37 .star svg { width: 44px; height: 44px; }38 .star.fill path { fill: #000; }39 .star.outline path { fill: none; stroke: #777; stroke-width: 1.5; }40 41 .meta {42 color: #6f6f6f;43 font-size: 36px;44 }45 .title {46 margin-top: 22px;47 font-size: 56px;48 font-weight: 700;49 color: #111;50 letter-spacing: 0.2px;51 }52 .body {53 margin-top: 18px;54 font-size: 36px;55 color: #555;56 line-height: 1.5;57 }58 .divider {59 margin: 32px 0;60 height: 2px;61 background: #e4e4e4;62 }63 64 .gesture {65 position: absolute;66 bottom: 0;67 left: 0;68 width: 100%;69 height: 120px;70 display: flex;71 align-items: center;72 justify-content: center;73 background: #00000008;74 }75 .gesture .pill {76 width: 320px;77 height: 12px;78 background: #000;79 opacity: 0.6;80 border-radius: 12px;81 }82</style>83</head>84<body>85<div id="render-target">86 87 <!-- Minimal status bar -->88 <div class="status-bar">89 <div class="status-left">3:38</div>90 <div class="status-center">91 <div class="dot"></div>92 <div class="dot" style="opacity:.7;"></div>93 <div class="dot" style="opacity:.5;"></div>94 </div>95 <div class="status-right" style="display:flex; align-items:center; gap:16px;">96 <!-- simple battery icon -->97 <svg width="50" height="28" viewBox="0 0 50 28" fill="none">98 <rect x="2" y="4" width="40" height="20" rx="3" stroke="#777" stroke-width="3"></rect>99 <rect x="5" y="7" width="28" height="14" fill="#777"></rect>100 <rect x="44" y="9" width="6" height="10" rx="2" fill="#777"></rect>101 </svg>102 </div>103 </div>104 105 <div class="reviews">106 107 <!-- Review 1 -->108 <div class="review">109 <div class="review-top">110 <div class="stars">111 <div class="star fill">112 <svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg>113 </div>114 <div class="star fill">115 <svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg>116 </div>117 <div class="star fill">118 <svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg>119 </div>120 <div class="star fill">121 <svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg>122 </div>123 <div class="star fill">124 <svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg>125 </div>126 </div>127 <div class="meta">RENUKA · 07/07/2022</div>128 </div>129 <div class="title">EXCELLENT</div>130 <div class="body">EXCELLENT</div>131 <div class="divider"></div>132 </div>133 134 <!-- Review 2 -->135 <div class="review">136 <div class="review-top">137 <div class="stars">138 <div class="star fill"><svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg></div>139 <div class="star fill"><svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg></div>140 <div class="star fill"><svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg></div>141 <div class="star fill"><svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg></div>142 <div class="star fill"><svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg></div>143 </div>144 <div class="meta">Mahesh · 05/03/2022</div>145 </div>146 <div class="title">It's a excellent lock</div>147 <div class="body">It's a excellent lock</div>148 <div class="divider"></div>149 </div>150 151 <!-- Review 3 -->152 <div class="review">153 <div class="review-top">154 <div class="stars">155 <div class="star fill"><svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg></div>156 <div class="star fill"><svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg></div>157 <div class="star fill"><svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg></div>158 <div class="star fill"><svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg></div>159 <div class="star outline"><svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg></div>160 </div>161 <div class="meta">Geneviève · 04/12/2022</div>162 </div>163 <div class="title">Smaller and not as sturdy</div>164 <div class="body">Smaller and not as sturdy as expected, but overall usefull<br>for use as deterrent.</div>165 <div class="divider"></div>166 </div>167 168 <!-- Review 4 -->169 <div class="review">170 <div class="review-top">171 <div class="stars">172 <div class="star fill"><svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg></div>173 <div class="star fill"><svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg></div>174 <div class="star fill"><svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg></div>175 <div class="star fill"><svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg></div>176 <div class="star outline"><svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg></div>177 </div>178 <div class="meta">Na Y. · 01/24/2022</div>179 </div>180 <div class="title">small and convenient to use</div>181 <div class="body">small and convenient to use</div>182 <div class="divider"></div>183 </div>184 185 <!-- Review 5 -->186 <div class="review">187 <div class="review-top">188 <div class="stars">189 <div class="star fill"><svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg></div>190 <div class="star fill"><svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg></div>191 <div class="star fill"><svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg></div>192 <div class="star fill"><svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg></div>193 <div class="star fill"><svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg></div>194 </div>195 <div class="meta">Maxwell · 09/28/2021</div>196 </div>197 <div class="title">Great little lock</div>198 <div class="body">Excellent device. smooth, easy to set and it works.</div>199 <div class="divider"></div>200 </div>201 202 <!-- Review 6 -->203 <div class="review">204 <div class="review-top">205 <div class="stars">206 <div class="star fill"><svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg></div>207 <div class="star fill"><svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg></div>208 <div class="star fill"><svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg></div>209 <div class="star fill"><svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg></div>210 <div class="star fill"><svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01z"/></svg></div>211 </div>212 </div>213 <div class="title">Good</div>214 <div class="body">Good</div>215 </div>216 217 </div>218 219 <!-- Gesture bar -->220 <div class="gesture">221 <div class="pill"></div>222 </div>223 224</div>225</body>226</html>