GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Reviews & Ratings UI</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;10    position: relative; overflow: hidden;11    background: #ffffff;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; right: 0;17    height: 140px; background: #222;18    color: #fff; font-size: 36px;19    display: flex; align-items: center; justify-content: space-between;20    padding: 0 40px;21  }22  .status-left { display: flex; align-items: center; gap: 22px; }23  .status-dot { width: 18px; height: 18px; background: #aaa; border-radius: 50%; opacity: 0.8; }24  .status-right { display: flex; align-items: center; gap: 20px; }25  .icon-wifi, .icon-battery {26    width: 42px; height: 28px;27    border: 2px solid #fff; border-radius: 4px; position: relative;28  }29  .icon-wifi:before {30    content: ""; position: absolute; left: 8px; right: 8px; top: 6px; bottom: 6px;31    border-top: 2px solid #fff; border-left: 2px solid transparent; border-right: 2px solid transparent;32  }33  .icon-battery:after {34    content: ""; position: absolute; right: -10px; top: 6px; width: 6px; height: 16px; background: #fff; border-radius: 2px;35  }36 37  /* Title bar */38  .title-bar {39    position: absolute; top: 140px; left: 0; right: 0;40    height: 120px; background: #fff; border-bottom: 1px solid #e6e6e6;41    display: flex; align-items: center; padding: 0 32px; gap: 24px;42  }43  .back-btn {44    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;45  }46  .title-text { font-size: 48px; font-weight: 700; color: #111; }47 48  /* Content list */49  .content {50    position: absolute; top: 260px; left: 0; right: 0; bottom: 140px;51    overflow-y: auto;52  }53  .review {54    padding: 34px 36px;55    border-bottom: 1px solid #eee;56    display: flex; gap: 30px; align-items: flex-start;57  }58  .review-body { flex: 1; }59  .review-top {60    display: flex; align-items: center; gap: 28px; margin-bottom: 18px;61  }62  .rating-chip {63    display: inline-flex; align-items: center; gap: 16px;64    padding: 14px 18px; border: 1px solid #e3e3e3; border-radius: 24px;65    background: #fff;66    font-weight: 700; color: #1a1a1a; font-size: 40px;67  }68  .rating-chip svg { width: 44px; height: 44px; }69  .review-title { font-size: 44px; font-weight: 800; color: #0f2347; }70  .review-text { font-size: 38px; color: #333; margin: 8px 0 18px; line-height: 1.35; }71  .review-meta { font-size: 34px; color: #7a879b; }72 73  .thumb {74    width: 150px; height: 150px;75    background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 6px;76    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; text-align: center;77    flex-shrink: 0;78  }79 80  /* Bottom gesture bar */81  .gesture-area {82    position: absolute; left: 0; right: 0; bottom: 0;83    height: 140px; background: #000;84    display: flex; align-items: center; justify-content: center;85  }86  .home-indicator {87    width: 420px; height: 16px; background: #bdbdbd; border-radius: 10px;88  }89</style>90</head>91<body>92<div id="render-target">93 94  <!-- Status Bar -->95  <div class="status-bar">96    <div class="status-left">97      <div>11:51</div>98      <div class="status-dot"></div>99      <div class="status-dot"></div>100      <div class="status-dot"></div>101      <div class="status-dot"></div>102    </div>103    <div class="status-right">104      <div class="icon-wifi"></div>105      <div class="icon-battery"></div>106    </div>107  </div>108 109  <!-- Title Bar -->110  <div class="title-bar">111    <div class="back-btn">112      <svg viewBox="0 0 24 24" width="56" height="56" fill="#111">113        <path d="M15.5 4.5L7 12l8.5 7.5-1.8 2L3.5 12l10.2-9.5 1.8 2z"></path>114      </svg>115    </div>116    <div class="title-text">Reviews & Ratings</div>117  </div>118 119  <!-- Content -->120  <div class="content">121 122    <!-- Partial previous review stub -->123    <div class="review">124      <div class="review-body">125        <div class="review-top">126          <div class="rating-chip">127            <svg viewBox="0 0 24 24">128              <polygon points="12,2 15.1,8.3 22,9.3 17,14 18.2,21 12,17.7 5.8,21 7,14 2,9.3 8.9,8.3" fill="#FFD54F"></polygon>129            </svg>130            <span>4.0</span>131          </div>132          <div class="review-title">problem</div>133        </div>134        <div class="review-meta">Verified buyer - 27 Mar, 2023</div>135      </div>136      <div class="thumb">[IMG: Purple/Black Shoe]</div>137    </div>138 139    <!-- Review 1 -->140    <div class="review">141      <div class="review-body">142        <div class="review-top">143          <div class="rating-chip">144            <svg viewBox="0 0 24 24">145              <polygon points="12,2 15.1,8.3 22,9.3 17,14 18.2,21 12,17.7 5.8,21 7,14 2,9.3 8.9,8.3" fill="#FFD54F"></polygon>146            </svg>147            <span>4.0</span>148          </div>149          <div class="review-title">Superb</div>150        </div>151        <div class="review-text">Very good</div>152        <div class="review-meta">Verified buyer - 18 Jan, 2023</div>153      </div>154      <div class="thumb">[IMG: Black/Purple Shoe]</div>155    </div>156 157    <!-- Review 2 -->158    <div class="review">159      <div class="review-body">160        <div class="review-top">161          <div class="rating-chip">162            <svg viewBox="0 0 24 24">163              <polygon points="12,2 15.1,8.3 22,9.3 17,14 18.2,21 12,17.7 5.8,21 7,14 2,9.3 8.9,8.3" fill="#FFD54F"></polygon>164            </svg>165            <span>3.0</span>166          </div>167          <div class="review-title">All good</div>168        </div>169        <div class="review-text">170          Looking wise it is good you can improve its material quality as per your cost. You are charging almost 3K for the product but 3K only for the look is not justified it's quality171        </div>172        <div class="review-meta">Verified buyer - 11 May, 2023</div>173      </div>174      <div class="thumb">[IMG: Grey/White High-top Shoe]</div>175    </div>176 177    <!-- Review 3 -->178    <div class="review">179      <div class="review-body">180        <div class="review-top">181          <div class="rating-chip">182            <svg viewBox="0 0 24 24">183              <polygon points="12,2 15.1,8.3 22,9.3 17,14 18.2,21 12,17.7 5.8,21 7,14 2,9.3 8.9,8.3" fill="#FFD54F"></polygon>184            </svg>185            <span>2.0</span>186          </div>187        </div>188        <div class="review-meta">Verified buyer - 28 Mar, 2023</div>189      </div>190      <div class="thumb">[IMG: White Sneaker]</div>191    </div>192 193    <!-- Review 4 -->194    <div class="review">195      <div class="review-body">196        <div class="review-top">197          <div class="rating-chip">198            <svg viewBox="0 0 24 24">199              <polygon points="12,2 15.1,8.3 22,9.3 17,14 18.2,21 12,17.7 5.8,21 7,14 2,9.3 8.9,8.3" fill="#FFD54F"></polygon>200            </svg>201            <span>2.0</span>202          </div>203        </div>204        <div class="review-meta">Verified buyer - 26 Feb, 2023</div>205      </div>206      <div class="thumb">[IMG: White Sneaker]</div>207    </div>208 209    <!-- Review 5 -->210    <div class="review">211      <div class="review-body">212        <div class="review-top">213          <div class="rating-chip">214            <svg viewBox="0 0 24 24">215              <polygon points="12,2 15.1,8.3 22,9.3 17,14 18.2,21 12,17.7 5.8,21 7,14 2,9.3 8.9,8.3" fill="#FFD54F"></polygon>216            </svg>217            <span>2.0</span>218          </div>219        </div>220        <div class="review-meta">Verified buyer - 23 Jan, 2023</div>221      </div>222      <div class="thumb">[IMG: Black/Purple Shoe Pair]</div>223    </div>224 225    <!-- Review 6 -->226    <div class="review">227      <div class="review-body">228        <div class="review-top">229          <div class="rating-chip">230            <svg viewBox="0 0 24 24">231              <polygon points="12,2 15.1,8.3 22,9.3 17,14 18.2,21 12,17.7 5.8,21 7,14 2,9.3 8.9,8.3" fill="#FFD54F"></polygon>232            </svg>233            <span>1.0</span>234          </div>235        </div>236        <div class="review-meta">Verified buyer - 22 Jun, 2023</div>237      </div>238      <div class="thumb">[IMG: Navy Sneaker]</div>239    </div>240 241    <!-- Review 7 -->242    <div class="review">243      <div class="review-body">244        <div class="review-top">245          <div class="rating-chip">246            <svg viewBox="0 0 24 24">247              <polygon points="12,2 15.1,8.3 22,9.3 17,14 18.2,21 12,17.7 5.8,21 7,14 2,9.3 8.9,8.3" fill="#FFD54F"></polygon>248            </svg>249            <span>1.0</span>250          </div>251        </div>252        <div class="review-meta">Verified buyer - 27 Mar, 2023</div>253      </div>254      <div class="thumb">[IMG: Blue Sneaker]</div>255    </div>256 257  </div>258 259  <!-- Gesture area -->260  <div class="gesture-area">261    <div class="home-indicator"></div>262  </div>263 264</div>265</body>266</html>