GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Reviews Screen</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#ffffff;11  }12  /* Status bar */13  .status-bar {14    height:110px;15    padding:0 36px;16    display:flex;17    align-items:center;18    justify-content:space-between;19    color:#222;20    font-weight:600;21    font-size:40px;22  }23  .status-left, .status-right { display:flex; align-items:center; gap:28px; }24  .status-icon {25    width:36px; height:36px; border-radius:8px; background:#e6e6e6; border:1px solid #cfcfcf;26  }27  .status-right .wifi { width:44px; height:32px; border:2px solid #333; border-top-left-radius:14px; border-top-right-radius:14px; border-bottom:none; position:relative; }28  .status-right .battery {29    width:74px; height:36px; border:2px solid #333; border-radius:6px; position:relative;30  }31  .battery::after {32    content:""; position:absolute; right:-10px; top:10px; width:8px; height:16px; background:#333; border-radius:2px;33  }34  .battery::before {35    content:""; position:absolute; left:2px; top:2px; bottom:2px; right:2px; background:#333;36  }37  /* Header title */38  .title-area { text-align:center; padding:20px 36px 10px; position:relative; }39  .title-area h1 { margin:0; font-size:46px; letter-spacing:1px; }40  .close-btn {41    position:absolute; right:34px; top:10px; width:60px; height:60px; display:flex; align-items:center; justify-content:center;42    color:#111;43  }44  .close-btn svg { width:40px; height:40px; }45  .stars-large, .stars-small { display:flex; gap:26px; align-items:center; }46  .stars-large { justify-content:center; padding:14px 0 26px; }47  .stars-large svg { width:64px; height:64px; }48  .divider { height:2px; background:#efefef; margin:18px 0 8px; }49  /* Review blocks */50  .review { padding:34px 44px; }51  .top-row { display:flex; align-items:center; justify-content:space-between; }52  .stars-small svg { width:54px; height:54px; }53  .date { color:#666; font-size:34px; }54  .headline { font-size:42px; font-weight:700; margin:26px 0 12px; color:#111; }55  .body-text { font-size:34px; line-height:1.45; color:#5f5f5f; }56  .recommend {57    margin-top:26px; display:flex; align-items:center; gap:18px; color:#1b5e20; font-weight:700; font-size:34px;58  }59  .check-ico { width:40px; height:40px; border-radius:50%; background:#4CAF50; display:flex; align-items:center; justify-content:center; }60  .check-ico svg { width:26px; height:26px; fill:#fff; }61  .verified { margin-top:24px; color:#6f6f6f; font-size:32px; }62  .verified .dot { margin:0 10px; color:#b0b0b0; }63  .section-sep { height:2px; background:#efefef; margin:18px 0; }64  /* Bottom home indicator */65  .home-indicator {66    position:absolute; bottom:34px; left:50%; transform:translateX(-50%);67    width:520px; height:16px; background:#000; border-radius:12px; opacity:0.85;68  }69  /* Star icon style */70  .star path { fill:#111; }71</style>72</head>73<body>74<div id="render-target">75  <!-- Status bar -->76  <div class="status-bar">77    <div class="status-left">78      <div>5:15</div>79      <div class="status-icon"></div>80      <div class="status-icon"></div>81      <div class="status-icon"></div>82      <div class="status-icon"></div>83    </div>84    <div class="status-right">85      <div class="wifi"></div>86      <div class="battery"></div>87    </div>88  </div>89 90  <!-- Title and overall rating -->91  <div class="title-area">92    <h1>57 REVIEWS</h1>93    <div class="stars-large">94      <!-- 5 large stars -->95      <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>96      <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>97      <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>98      <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>99      <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>100    </div>101    <div class="close-btn">102      <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19" stroke="#111" stroke-width="2" stroke-linecap="round"/></svg>103    </div>104  </div>105  <div class="divider"></div>106 107  <!-- Review 1 -->108  <div class="review">109    <div class="top-row">110      <div class="stars-small">111        <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>112        <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>113        <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>114        <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>115        <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>116      </div>117      <div class="date">SEP 4, 2023</div>118    </div>119    <div class="headline">BEST SHOES FOR NURSES</div>120    <div class="body-text">121      My feet do not hurt after a 12 hour shift! These shoes are amazing. My only complaint is the ground feels so hard when I take them off. Please come out with new flashier colors :)122    </div>123    <div class="recommend">124      <div class="check-ico">125        <svg viewBox="0 0 24 24"><path d="M20 6l-11 11-5-5" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>126      </div>127      <div>RECOMMENDS THIS PRODUCT</div>128    </div>129    <div class="verified">130      <strong>RNRN</strong><span class="dot"> · </span>VERIFIED PURCHASER131    </div>132  </div>133 134  <div class="section-sep"></div>135 136  <!-- Review 2 -->137  <div class="review">138    <div class="top-row">139      <div class="stars-small">140        <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>141        <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>142        <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>143        <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>144        <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>145      </div>146      <div class="date">AUG 31, 2023</div>147    </div>148    <div class="headline">GREAT SHOE FOR ALMOST EVERYDAY ACTIVITIES</div>149    <div class="body-text">150      Would recommend the shoe due to its good price and quality compared to the price151    </div>152    <div class="recommend">153      <div class="check-ico">154        <svg viewBox="0 0 24 24"><path d="M20 6l-11 11-5-5" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>155      </div>156      <div>RECOMMENDS THIS PRODUCT</div>157    </div>158    <div class="verified">159      <strong>GOOOOOOOODZ</strong><span class="dot"> · </span>VERIFIED PURCHASER160    </div>161  </div>162 163  <div class="section-sep"></div>164 165  <!-- Review 3 -->166  <div class="review">167    <div class="top-row">168      <div class="stars-small">169        <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>170        <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>171        <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>172        <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>173        <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>174      </div>175      <div class="date">AUG 30, 2023</div>176    </div>177    <div class="headline">THIS ONE DEFINITELY STOLE MY HEART</div>178    <div class="body-text">179      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.180    </div>181  </div>182 183  <div class="home-indicator"></div>184</div>185</body>186</html>