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; color:#111; }8  #render-target{9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#ffffff;11  }12 13  /* Status bar */14  .status-bar{15    height:110px; padding:0 40px; display:flex; align-items:center; justify-content:space-between;16    color:#232323; font-weight:700; font-size:42px;17  }18  .status-icons{ display:flex; align-items:center; gap:26px; }19  .icon-dot{ width:16px; height:16px; background:#555; border-radius:50%; display:inline-block; }20  .icon-rect{ width:28px; height:22px; background:#777; border-radius:4px; display:inline-block; }21  .icon-signal{ width:34px; height:24px; border:3px solid #777; border-radius:5px; position:relative; }22  .icon-signal:after{ content:""; position:absolute; right:-10px; top:-6px; width:6px; height:6px; background:#777; border-radius:50%; }23 24  /* Header area */25  .close-btn{26    position:absolute; right:40px; top:120px; width:70px; height:70px; cursor:pointer;27    display:flex; align-items:center; justify-content:center;28  }29  .title-area{ padding:10px 60px 0 60px; text-align:center; }30  .title-area h1{ margin:8px 0 16px 0; font-size:46px; letter-spacing:1px; }31  .big-stars{ display:flex; justify-content:center; gap:30px; margin:8px 0 24px 0; }32  .star{ width:86px; height:86px; fill:#121212; }33 34  /* Recommendation strip */35  .recommend-strip{36    display:flex; align-items:center; gap:18px; padding:24px 60px; border-top:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6;37    font-weight:700; color:#1c1c1c; font-size:34px;38  }39  .check{ width:38px; height:38px; }40 41  /* Reviews */42  .content{ padding:10px 60px 120px; }43  .review{ padding:28px 0 46px 0; border-bottom:1px solid #efefef; }44  .review .user-row{ font-size:32px; color:#111; display:flex; align-items:center; gap:14px; font-weight:700; }45  .dot{ width:10px; height:10px; background:#888; border-radius:50%; display:inline-block; }46  .verified{ font-weight:600; color:#5a5a5a; }47  .stars-date{ display:flex; align-items:center; justify-content:space-between; margin:22px 0 12px 0; }48  .stars{ display:flex; gap:26px; }49  .star.small{ width:66px; height:66px; }50  .date{ color:#4f4f4f; font-size:32px; }51  .review h3{ margin:10px 0; font-size:42px; letter-spacing:0.5px; }52  .review p{ margin:10px 0; font-size:34px; line-height:1.5; color:#3a3a3a; }53  .recommend-inline{54    display:flex; align-items:center; gap:18px; margin:20px 0 10px 0; font-size:34px; font-weight:700; color:#1b1b1b;55  }56  .name-row{ display:flex; align-items:center; gap:14px; color:#222; font-weight:700; font-size:32px; margin-top:6px; }57 58  /* Bottom fading hint */59  .fade-bottom{60    position:absolute; left:0; bottom:0; width:100%; height:120px;61    background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1) 60%);62  }63</style>64</head>65<body>66<div id="render-target">67 68  <!-- Status bar -->69  <div class="status-bar">70    <div>5:15</div>71    <div class="status-icons">72      <span class="icon-rect"></span>73      <span class="icon-rect" style="border-radius:50%; width:28px; height:28px;"></span>74      <span class="icon-rect" style="width:28px; height:28px;"></span>75      <span class="icon-dot"></span>76      <div class="icon-signal"></div>77    </div>78  </div>79 80  <!-- Close button -->81  <div class="close-btn" aria-label="Close">82    <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="3" stroke-linecap="round">83      <line x1="4" y1="4" x2="20" y2="20"></line>84      <line x1="20" y1="4" x2="4" y2="20"></line>85    </svg>86  </div>87 88  <!-- Title and big stars -->89  <div class="title-area">90    <h1>57 REVIEWS</h1>91    <div class="big-stars">92      <svg class="star" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>93      <svg class="star" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>94      <svg class="star" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>95      <svg class="star" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>96      <svg class="star" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>97    </div>98  </div>99 100  <!-- Recommends strip -->101  <div class="recommend-strip">102    <svg class="check" viewBox="0 0 24 24" fill="#2ecc71"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm-1.1 14.2l-4.1-4.1 1.6-1.6 2.5 2.5 5.2-5.2 1.6 1.6-6.8 6.8z"/></svg>103    <span>RECOMMENDS THIS PRODUCT</span>104  </div>105 106  <!-- Reviews List -->107  <div class="content">108 109    <!-- Review 1 -->110    <div class="review">111      <div class="user-row">112        <span>G00000000DZ</span>113        <span class="dot"></span>114        <span class="verified">VERIFIED PURCHASER</span>115      </div>116 117      <div class="stars-date">118        <div class="stars">119          <svg class="star small" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>120          <svg class="star small" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>121          <svg class="star small" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>122          <svg class="star small" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>123          <svg class="star small" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>124        </div>125        <div class="date">AUG 30, 2023</div>126      </div>127 128      <h3>THIS ONE DEFINITELY STOLE MY HEART</h3>129      <p>Omg I’m in love with my shoes. I was concern if i should get size 8.5 witches my normal size or 9. With adidas I usually get size 9 but reading the reviews make me decide to stay with size 8.5. Thank God I did. Fit perfectly, so comfortable, and look amazing. Adidas is the most comfortable shoes I ever tried. I have multiple different shoes from different brand and adidas always the most comfortable shoes.</p>130 131      <div class="recommend-inline">132        <svg class="check" viewBox="0 0 24 24" fill="#2ecc71"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm-1.1 14.2l-4.1-4.1 1.6-1.6 2.5 2.5 5.2-5.2 1.6 1.6-6.8 6.8z"/></svg>133        <span>RECOMMENDS THIS PRODUCT</span>134      </div>135 136      <div class="name-row">137        <span>CLAUDIA.N</span>138        <span class="dot"></span>139        <span class="verified">VERIFIED PURCHASER</span>140      </div>141    </div>142 143    <!-- Review 2 -->144    <div class="review">145      <div class="stars-date">146        <div class="stars">147          <svg class="star small" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>148          <svg class="star small" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>149          <svg class="star small" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>150          <svg class="star small" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>151          <svg class="star small" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>152        </div>153        <div class="date">AUG 29, 2023</div>154      </div>155 156      <h3>BEST RUNNING SHOES EVER!</h3>157      <p>I finally found the best pair of running shoes!!! I love the pink and they are so supportive in every step so happy!</p>158 159      <div class="recommend-inline">160        <svg class="check" viewBox="0 0 24 24" fill="#2ecc71"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm-1.1 14.2l-4.1-4.1 1.6-1.6 2.5 2.5 5.2-5.2 1.6 1.6-6.8 6.8z"/></svg>161        <span>RECOMMENDS THIS PRODUCT</span>162      </div>163 164      <div class="name-row">165        <span>KRAY</span>166        <span class="dot"></span>167        <span class="verified">VERIFIED PURCHASER</span>168      </div>169    </div>170 171    <!-- Start of next review hint -->172    <div class="stars" style="margin-top:34px;">173      <svg class="star small" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>174      <svg class="star small" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>175      <svg class="star small" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>176      <svg class="star small" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>177      <svg class="star small" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>178    </div>179 180  </div>181 182  <div class="fade-bottom"></div>183</div>184</body>185</html>