GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Reviews Modal UI</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#ffffff;11 color:#111;12 }13 /* Status bar */14 .status-bar {15 height:120px;16 padding:0 40px;17 display:flex; align-items:center; justify-content:space-between;18 font-size:42px; color:#444;19 border-bottom:1px solid #e9e9e9;20 }21 .status-icons { display:flex; gap:26px; align-items:center; }22 .icon-dot { width:16px; height:16px; background:#666; border-radius:50%; display:inline-block; }23 .top-close {24 position:absolute; right:36px; top:28px;25 width:84px; height:84px; display:flex; align-items:center; justify-content:center;26 }27 .top-close svg { width:44px; height:44px; stroke:#111; stroke-width:8; }28 /* Header */29 .header-area {30 padding:40px 40px 20px 40px;31 text-align:center;32 }33 .title { font-size:54px; font-weight:700; letter-spacing:1px; }34 .stars-row { margin-top:24px; display:flex; justify-content:center; gap:24px; }35 .star svg { width:64px; height:64px; }36 .divider { height:32px; border-bottom:1px solid #eee; }37 /* Reviews list */38 .content { padding:20px 40px 140px 40px; }39 .review { padding:36px 0; border-bottom:1px solid #efefef; }40 .review .meta {41 display:flex; justify-content:space-between; align-items:center;42 font-size:40px; color:#111;43 }44 .name { font-weight:700; }45 .verified { color:#777; font-weight:500; margin-left:10px; }46 .dot { width:10px; height:10px; background:#888; border-radius:50%; display:inline-block; margin:0 12px; transform:translateY(-6px); }47 .date { color:#666; font-size:38px; }48 .rating-row { margin:26px 0; display:flex; gap:22px; align-items:center; }49 .review-title { font-size:46px; font-weight:800; letter-spacing:0.5px; margin-bottom:18px; }50 .review-text { font-size:40px; line-height:1.38; color:#333; }51 .recommend {52 margin-top:26px; display:flex; align-items:center; gap:18px; font-size:40px; font-weight:700; color:#173a19;53 }54 .check {55 width:52px; height:52px; border-radius:50%; background:#3dbb5f;56 display:flex; align-items:center; justify-content:center;57 }58 .check svg { width:32px; height:32px; fill:none; stroke:#fff; stroke-width:6; }59 /* Bottom handle */60 .home-indicator {61 position:absolute; bottom:24px; left:50%; transform:translateX(-50%);62 width:640px; height:18px; border-radius:9px; background:#00000020;63 }64</style>65</head>66<body>67<div id="render-target">68 69 <!-- Status bar -->70 <div class="status-bar">71 <div>5:15</div>72 <div class="status-icons">73 <span class="icon-dot" style="border-radius:6px; width:28px; height:28px;"></span>74 <span class="icon-dot"></span>75 <span class="icon-dot"></span>76 <span class="icon-dot"></span>77 <span class="icon-dot"></span>78 </div>79 <div class="top-close">80 <svg viewBox="0 0 24 24">81 <line x1="4" y1="4" x2="20" y2="20"></line>82 <line x1="20" y1="4" x2="4" y2="20"></line>83 </svg>84 </div>85 </div>86 87 <!-- Header -->88 <div class="header-area">89 <div class="title">57 REVIEWS</div>90 <div class="stars-row">91 <div class="star">92 <svg viewBox="0 0 24 24" fill="#000"><path d="M12 2l3.1 6.3 7 1-5 4.8 1.2 6.9L12 18l-6.3 3 1.2-6.9-5-4.8 7-1z"/></svg>93 </div>94 <div class="star">95 <svg viewBox="0 0 24 24" fill="#000"><path d="M12 2l3.1 6.3 7 1-5 4.8 1.2 6.9L12 18l-6.3 3 1.2-6.9-5-4.8 7-1z"/></svg>96 </div>97 <div class="star">98 <svg viewBox="0 0 24 24" fill="#000"><path d="M12 2l3.1 6.3 7 1-5 4.8 1.2 6.9L12 18l-6.3 3 1.2-6.9-5-4.8 7-1z"/></svg>99 </div>100 <div class="star">101 <svg viewBox="0 0 24 24" fill="#000"><path d="M12 2l3.1 6.3 7 1-5 4.8 1.2 6.9L12 18l-6.3 3 1.2-6.9-5-4.8 7-1z"/></svg>102 </div>103 <div class="star">104 <svg viewBox="0 0 24 24" fill="#000"><path d="M12 2l3.1 6.3 7 1-5 4.8 1.2 6.9L12 18l-6.3 3 1.2-6.9-5-4.8 7-1z"/></svg>105 </div>106 </div>107 </div>108 109 <div class="divider"></div>110 111 <!-- Content -->112 <div class="content">113 114 <!-- Green recommend badge (global banner in screenshot) -->115 <div class="recommend" style="margin-bottom:24px;">116 <div class="check">117 <svg viewBox="0 0 24 24"><path d="M5 13l4 4 10-10"/></svg>118 </div>119 <span>RECOMMENDS THIS PRODUCT</span>120 </div>121 122 <!-- Review 1 -->123 <div class="review">124 <div class="meta">125 <div>126 <span class="name">ANALAURA</span>127 <span class="dot"></span>128 <span class="verified">VERIFIED PURCHASER</span>129 </div>130 </div>131 132 <div class="rating-row">133 <div class="star"><svg viewBox="0 0 24 24" fill="#000"><path d="M12 2l3.1 6.3 7 1-5 4.8 1.2 6.9L12 18l-6.3 3 1.2-6.9-5-4.8 7-1z"/></svg></div>134 <div class="star"><svg viewBox="0 0 24 24" fill="#000"><path d="M12 2l3.1 6.3 7 1-5 4.8 1.2 6.9L12 18l-6.3 3 1.2-6.9-5-4.8 7-1z"/></svg></div>135 <div class="star"><svg viewBox="0 0 24 24" fill="#000"><path d="M12 2l3.1 6.3 7 1-5 4.8 1.2 6.9L12 18l-6.3 3 1.2-6.9-5-4.8 7-1z"/></svg></div>136 <div class="star"><svg viewBox="0 0 24 24" fill="#000"><path d="M12 2l3.1 6.3 7 1-5 4.8 1.2 6.9L12 18l-6.3 3 1.2-6.9-5-4.8 7-1z"/></svg></div>137 <div class="star"><svg viewBox="0 0 24 24" fill="#000"><path d="M12 2l3.1 6.3 7 1-5 4.8 1.2 6.9L12 18l-6.3 3 1.2-6.9-5-4.8 7-1z"/></svg></div>138 <div class="date">SEP 16, 2023</div>139 </div>140 141 <div class="review-title">BOUNCY</div>142 <div class="review-text">143 So cushioned when you run. Love them. Bought the<br>144 wrong size, just a tad too big.145 </div>146 147 <div class="recommend">148 <div class="check">149 <svg viewBox="0 0 24 24"><path d="M5 13l4 4 10-10"/></svg>150 </div>151 <span>RECOMMENDS THIS PRODUCT</span>152 </div>153 </div>154 155 <!-- Review 2 -->156 <div class="review">157 <div class="meta">158 <div>159 <span class="name">AMANDA116</span>160 <span class="dot"></span>161 <span class="verified">VERIFIED PURCHASER</span>162 </div>163 </div>164 165 <div class="rating-row">166 <div class="star"><svg viewBox="0 0 24 24" fill="#000"><path d="M12 2l3.1 6.3 7 1-5 4.8 1.2 6.9L12 18l-6.3 3 1.2-6.9-5-4.8 7-1z"/></svg></div>167 <div class="star"><svg viewBox="0 0 24 24" fill="#000"><path d="M12 2l3.1 6.3 7 1-5 4.8 1.2 6.9L12 18l-6.3 3 1.2-6.9-5-4.8 7-1z"/></svg></div>168 <div class="star"><svg viewBox="0 0 24 24" fill="#000"><path d="M12 2l3.1 6.3 7 1-5 4.8 1.2 6.9L12 18l-6.3 3 1.2-6.9-5-4.8 7-1z"/></svg></div>169 <div class="star"><svg viewBox="0 0 24 24" fill="#000"><path d="M12 2l3.1 6.3 7 1-5 4.8 1.2 6.9L12 18l-6.3 3 1.2-6.9-5-4.8 7-1z"/></svg></div>170 <div class="star"><svg viewBox="0 0 24 24" fill="#000"><path d="M12 2l3.1 6.3 7 1-5 4.8 1.2 6.9L12 18l-6.3 3 1.2-6.9-5-4.8 7-1z"/></svg></div>171 <div class="date">SEP 7, 2023</div>172 </div>173 174 <div class="review-title">NO REGRETS!</div>175 <div class="review-text">176 True to size fit. Very comfortable and the color was a<br>177 big hit everywhere!178 </div>179 180 <div class="recommend">181 <div class="check">182 <svg viewBox="0 0 24 24"><path d="M5 13l4 4 10-10"/></svg>183 </div>184 <span>RECOMMENDS THIS PRODUCT</span>185 </div>186 </div>187 188 <!-- Review 3 -->189 <div class="review" style="border-bottom:none;">190 <div class="meta">191 <div>192 <span class="name">EDDIE356</span>193 <span class="dot"></span>194 <span class="verified">VERIFIED PURCHASER</span>195 </div>196 </div>197 198 <div class="rating-row">199 <div class="star"><svg viewBox="0 0 24 24" fill="#000"><path d="M12 2l3.1 6.3 7 1-5 4.8 1.2 6.9L12 18l-6.3 3 1.2-6.9-5-4.8 7-1z"/></svg></div>200 <div class="star"><svg viewBox="0 0 24 24" fill="#000"><path d="M12 2l3.1 6.3 7 1-5 4.8 1.2 6.9L12 18l-6.3 3 1.2-6.9-5-4.8 7-1z"/></svg></div>201 <div class="star"><svg viewBox="0 0 24 24" fill="#000"><path d="M12 2l3.1 6.3 7 1-5 4.8 1.2 6.9L12 18l-6.3 3 1.2-6.9-5-4.8 7-1z"/></svg></div>202 <div class="star"><svg viewBox="0 0 24 24" fill="#000"><path d="M12 2l3.1 6.3 7 1-5 4.8 1.2 6.9L12 18l-6.3 3 1.2-6.9-5-4.8 7-1z"/></svg></div>203 <div class="star"><svg viewBox="0 0 24 24" fill="#000"><path d="M12 2l3.1 6.3 7 1-5 4.8 1.2 6.9L12 18l-6.3 3 1.2-6.9-5-4.8 7-1z"/></svg></div>204 <div class="date">SEP 4, 2023</div>205 </div>206 207 <div class="review-title">BEST SHOES FOR NURSES</div>208 <div class="review-text">209 My feet do not hurt after a 12 hour shift! These shoes<br>210 are amazing. My only complaint is the ground feels so<br>211 hard when I take them off. Please come out with new212 </div>213 </div>214 215 </div>216 217 <!-- Bottom iOS/Android home indicator -->218 <div class="home-indicator"></div>219 220</div>221</body>222</html>