GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Reviews Screen</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; position:relative; overflow:hidden;10    background:#ffffff; color:#111;11  }12 13  /* Status bar */14  .status-bar{15    position:absolute; top:0; left:0; right:0; height:90px;16    display:flex; align-items:center; justify-content:space-between;17    padding:0 36px; font-size:34px; color:#222;18  }19  .sb-icons{ display:flex; align-items:center; gap:22px; }20  .dot, .square{21    width:22px; height:22px; background:#222; border-radius:50%;22  }23  .square{ border-radius:6px; }24  .tiny{ width:12px; height:12px; opacity:.6; }25 26  /* Close button */27  .close-btn{28    position:absolute; top:112px; right:36px; width:72px; height:72px;29    display:flex; align-items:center; justify-content:center;30    font-size:58px; color:#111; line-height:1;31  }32 33  /* Page header */34  .header{35    padding-top:150px;36    display:flex; flex-direction:column; align-items:center; gap:28px;37  }38  .header .title{39    font-weight:800; letter-spacing:1px; font-size:48px;40  }41 42  /* Stars */43  .stars{ display:flex; gap:28px; align-items:center; }44  .star{ width:80px; height:80px; }45  .star.small{ width:60px; height:60px; }46  .star svg{ width:100%; height:100%; display:block; }47  .divider{ height:1px; background:#ECECEC; margin:26px 0 6px; }48 49  /* Review list */50  .content{ padding:24px 48px 0 48px; }51  .review{ padding:24px 12px 32px 12px; }52  .review + .review{ border-top:1px solid #EFEFEF; }53  .rev-title{54    font-size:44px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;55    margin:8px 0 16px 0;56  }57  .rev-text{58    font-size:36px; line-height:1.4; color:#6f6f6f;59  }60  .recommend{61    margin-top:24px; display:flex; align-items:center; gap:16px; font-weight:800;62    color:#111; font-size:34px;63  }64  .check{65    width:44px; height:44px; background:#4CAF50; border-radius:50%;66    display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700;67    font-size:28px;68  }69  .meta{70    margin-top:22px; display:flex; align-items:center; gap:14px; color:#111;71    font-size:34px; letter-spacing:.2px;72  }73  .dot-sep{74    width:8px; height:8px; background:#999; border-radius:50%;75  }76 77  /* Row with stars and date */78  .row{79    display:flex; align-items:center; justify-content:space-between; margin-top:8px;80  }81  .date{82    color:#5a5a5a; font-size:34px;83  }84 85  /* Bottom gesture bar */86  .home-indicator{87    position:absolute; bottom:22px; left:50%; transform:translateX(-50%);88    width:360px; height:10px; background:#111; border-radius:8px; opacity:.85;89  }90</style>91</head>92<body>93<div id="render-target">94 95  <!-- Status bar -->96  <div class="status-bar">97    <div>5:15</div>98    <div class="sb-icons">99      <div class="square"></div>100      <div class="dot"></div>101      <div class="dot"></div>102      <div class="tiny"></div>103    </div>104  </div>105 106  <!-- Close button -->107  <div class="close-btn">×</div>108 109  <!-- Header with overall stars -->110  <div class="header">111    <div class="title">57 REVIEWS</div>112    <div class="stars">113      <div class="star">114        <svg viewBox="0 0 24 24" fill="#111"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.3 1.2-6.9-5-4.8 6.9-1L12 2z"/></svg>115      </div>116      <div class="star">117        <svg viewBox="0 0 24 24" fill="#111"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.3 1.2-6.9-5-4.8 6.9-1L12 2z"/></svg>118      </div>119      <div class="star">120        <svg viewBox="0 0 24 24" fill="#111"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.3 1.2-6.9-5-4.8 6.9-1L12 2z"/></svg>121      </div>122      <div class="star">123        <svg viewBox="0 0 24 24" fill="#111"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.3 1.2-6.9-5-4.8 6.9-1L12 2z"/></svg>124      </div>125      <div class="star">126        <svg viewBox="0 0 24 24" fill="#111"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.3 1.2-6.9-5-4.8 6.9-1L12 2z"/></svg>127      </div>128    </div>129  </div>130 131  <div class="divider" style="margin:18px 0 0;"></div>132 133  <!-- Reviews content -->134  <div class="content">135 136    <!-- Review 1 -->137    <div class="review">138      <div class="rev-title">More comfortable than meets the eye.</div>139      <div class="rev-text">140        I'm very happy with my purchase. I've had ankle surgery, and these are so comfortable.141        Wish they had more colors!142      </div>143      <div class="recommend">144        <div class="check">✓</div>145        RECOMMENDS THIS PRODUCT146      </div>147      <div class="meta">148        <strong>SHOPPINGGURU</strong>149        <div class="dot-sep"></div>150        <span>VERIFIED PURCHASER</span>151      </div>152    </div>153 154    <!-- Review 2 -->155    <div class="review">156      <div class="row">157        <div class="stars">158          <div class="star small">159            <svg viewBox="0 0 24 24" fill="#111"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.3 1.2-6.9-5-4.8 6.9-1L12 2z"/></svg>160          </div>161          <div class="star small"><svg viewBox="0 0 24 24" fill="#111"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.3 1.2-6.9-5-4.8 6.9-1L12 2z"/></svg></div>162          <div class="star small"><svg viewBox="0 0 24 24" fill="#111"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.3 1.2-6.9-5-4.8 6.9-1L12 2z"/></svg></div>163          <div class="star small"><svg viewBox="0 0 24 24" fill="#111"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.3 1.2-6.9-5-4.8 6.9-1L12 2z"/></svg></div>164          <div class="star small"><svg viewBox="0 0 24 24" fill="#111"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.3 1.2-6.9-5-4.8 6.9-1L12 2z"/></svg></div>165        </div>166        <div class="date">SEP 20, 2023</div>167      </div>168 169      <div class="rev-title">So comfy and cute</div>170      <div class="rev-text">171        Definitely recommend! They are comfortable and affordable172      </div>173      <div class="recommend">174        <div class="check">✓</div>175        RECOMMENDS THIS PRODUCT176      </div>177      <div class="meta">178        <strong>TTELLEZ</strong>179        <div class="dot-sep"></div>180        <span>VERIFIED PURCHASER</span>181      </div>182    </div>183 184    <!-- Review 3 -->185    <div class="review">186      <div class="row">187        <div class="stars">188          <div class="star small"><svg viewBox="0 0 24 24" fill="#111"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.3 1.2-6.9-5-4.8 6.9-1L12 2z"/></svg></div>189          <div class="star small"><svg viewBox="0 0 24 24" fill="#111"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.3 1.2-6.9-5-4.8 6.9-1L12 2z"/></svg></div>190          <div class="star small"><svg viewBox="0 0 24 24" fill="#111"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.3 1.2-6.9-5-4.8 6.9-1L12 2z"/></svg></div>191          <div class="star small"><svg viewBox="0 0 24 24" fill="#111"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.3 1.2-6.9-5-4.8 6.9-1L12 2z"/></svg></div>192          <div class="star small"><svg viewBox="0 0 24 24" fill="#111"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.3 1.2-6.9-5-4.8 6.9-1L12 2z"/></svg></div>193        </div>194        <div class="date">SEP 20, 2023</div>195      </div>196 197      <div class="rev-title">Awesome</div>198      <div class="rev-text">199        I love the design, the color, the comfort when you walk is amazing200      </div>201      <div class="recommend">202        <div class="check">✓</div>203        RECOMMENDS THIS PRODUCT204      </div>205      <div class="meta">206        <strong>ANALAURA</strong>207        <div class="dot-sep"></div>208        <span>VERIFIED PURCHASER</span>209      </div>210    </div>211 212  </div>213 214  <div class="home-indicator"></div>215</div>216</body>217</html>