GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Item - Reviews</title>5<style>6  body { margin:0; padding:0; background: transparent; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,Helvetica,sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#0f1114; color:#fff;10  }11  .content{ position:absolute; left:0; top:0; width:100%; height:100%; overflow-y:auto; }12  /* Status bar */13  .status-bar{ height:80px; display:flex; align-items:center; padding:0 36px; color:#eaeaea; font-weight:600; font-size:30px; }14  .status-right{ margin-left:auto; display:flex; align-items:center; gap:22px; }15  .sb-icon{ width:34px; height:22px; background:#9aa0a6; border-radius:4px; }16  .battery{ width:42px; height:24px; border:2px solid #9aa0a6; border-radius:4px; position:relative; }17  .battery:after{ content:""; position:absolute; right:-10px; top:6px; width:6px; height:12px; background:#9aa0a6; border-radius:2px; }18  .battery .level{ position:absolute; left:2px; top:2px; height:16px; width:28px; background:#9aa0a6; }19  /* Header */20  .header{ height:120px; display:flex; align-items:center; padding:0 28px; border-bottom:1px solid #1f2328; }21  .back{ width:72px; height:72px; display:flex; align-items:center; justify-content:center; margin-right:14px; }22  .title{ font-size:50px; font-weight:700; letter-spacing:0.2px; }23  .actions{ margin-left:auto; display:flex; gap:22px; }24  .icon-bubble{ width:88px; height:88px; border-radius:44px; background:#1a1d21; display:flex; align-items:center; justify-content:center; }25  .icon-bubble svg{ fill:#d7d7d7; }26  /* Ratings filter */27  .filter-row{ padding:26px 32px 12px 32px; display:flex; align-items:center; }28  .filter-pill{ margin-left:auto; display:flex; align-items:center; gap:14px; border:1px solid #2a2e34; color:#eaeef2; background:#13161a; padding:18px 22px; border-radius:48px; font-size:34px; }29  /* Reviews */30  .section{ padding:18px 32px; }31  .review{ padding:22px 0 26px 0; border-bottom:1px solid #262a2f; }32  .user-row{ display:flex; align-items:center; gap:16px; color:#c8ffc8; font-size:30px; }33  .user-row .name{ color:#c8ffc8; font-weight:700; }34  .user-row .meta{ color:#a8afbd; font-weight:500; }35  .green-plus{ width:46px; height:46px; border-radius:50%; background:#2bbf60; display:flex; align-items:center; justify-content:center; }36  .green-plus:before, .green-plus:after{37    content:""; position:absolute; background:#0f1114;38  }39  .green-plus{ position:relative; }40  .green-plus:before{ width:20px; height:4px; }41  .green-plus:after{ width:4px; height:20px; }42  .review p{ margin:18px 0 0 0; font-size:36px; line-height:56px; color:#e6e8ea; }43  /* CTA button */44  .cta{ display:flex; justify-content:center; padding:40px 32px; }45  .pill-btn{ width:940px; text-align:center; padding:30px 24px; border-radius:60px; border:2px solid #4078ff; color:#c9dcff; font-size:42px; font-weight:700; }46  /* Frequently bought together */47  .freq{ padding:12px 32px; display:flex; align-items:center; }48  .freq h2{ font-size:58px; margin:12px 0; font-weight:800; letter-spacing:0.2px; }49  .see-all{ margin-left:auto; border:1px solid #2a2e34; color:#eaeef2; background:#13161a; padding:18px 28px; border-radius:46px; font-size:36px; }50  /* Bottom nav */51  .bottom-nav{ position:absolute; left:0; bottom:0; width:100%; height:160px; background:#0d0f12; border-top:1px solid #23262b; display:flex; justify-content:space-around; align-items:center; }52  .nav-item{ display:flex; flex-direction:column; align-items:center; gap:12px; color:#cfd3d8; font-size:28px; }53  .nav-item .nav-icon{ width:92px; height:92px; border-radius:46px; background:#1a1d21; display:flex; align-items:center; justify-content:center; }54  .nav-item.active .nav-icon{ background:#243a63; }55  .nav-item.active{ color:#81a7ff; }56  /* helper */57  .spacer{ height:32px; }58</style>59</head>60<body>61<div id="render-target">62  <div class="content">63    <!-- Status bar -->64    <div class="status-bar">65      <div>1:33</div>66      <div class="status-right">67        <div class="sb-icon"></div>68        <div class="sb-icon" style="width:28px;"></div>69        <div class="battery"><div class="level"></div></div>70      </div>71    </div>72 73    <!-- Header -->74    <div class="header">75      <div class="back">76        <svg width="44" height="44" viewBox="0 0 24 24">77          <path d="M15.5 19L8 12l7.5-7 1.5 1.5L11 12l6 5.5z"></path>78        </svg>79      </div>80      <div class="title">Item</div>81      <div class="actions">82        <div class="icon-bubble">83          <svg width="36" height="36" viewBox="0 0 24 24">84            <path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm8.5 2.5L15 17"></path>85          </svg>86        </div>87        <div class="icon-bubble">88          <svg width="36" height="36" viewBox="0 0 24 24">89            <path d="M7 7h10l1 9H6l1-9zm3 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm6 2a2 2 0 1 0 .001-4.001A2 2 0 0 0 16 21zM8 5l2-2h4l2 2"></path>90          </svg>91        </div>92        <div class="icon-bubble">93          <svg width="36" height="36" viewBox="0 0 24 24">94            <path d="M15 8v-4l6 6-6 6v-4H5V8z"></path>95          </svg>96        </div>97        <div class="icon-bubble">98          <svg width="36" height="36" viewBox="0 0 24 24">99            <circle cx="12" cy="5" r="2"></circle>100            <circle cx="12" cy="12" r="2"></circle>101            <circle cx="12" cy="19" r="2"></circle>102          </svg>103        </div>104      </div>105    </div>106 107    <!-- Filter row -->108    <div class="filter-row">109      <div style="font-size:28px; color:#8a909a;"> </div>110      <div class="filter-pill">111        <span>All ratings</span>112        <svg width="28" height="28" viewBox="0 0 24 24">113          <path fill="#cdd1d6" d="M7 10l5 5 5-5z"></path>114        </svg>115      </div>116    </div>117 118    <!-- Reviews -->119    <div class="section">120      <div class="review">121        <div class="user-row">122          <div class="green-plus"></div>123          <div class="name">7***0 (11)</div>124          <div class="meta">• Past 6 months</div>125        </div>126        <p>i absolutely love it. i had a kindle keyboard that unfortunately couldn’t be brought back to life, so i bought this one. i was scared that the touch screen would be really slow, but it’s not. (it’s not like an ipad touch screen, of course; but it’s much better than i expected). it’s small, so it fits everywhere, and the refurbishing was done really well. it looks like any other kindle. very happy with my purchase.</p>127      </div>128 129      <div class="review">130        <div class="user-row">131          <div class="green-plus"></div>132          <div class="name">a***8 (1)</div>133          <div class="meta">• Past 6 months</div>134        </div>135        <p>This item arrived earlier than expected which was a nice surprise. Other than that, the actual kindle was in very good condition and securely wrapped to avoid damage. The battery was good and it works exactly as described. Very happy with this purchase.</p>136      </div>137 138      <div class="review">139        <div class="user-row">140          <div class="green-plus"></div>141          <div class="name">-***e (35)</div>142          <div class="meta">• Past 6 months</div>143        </div>144        <p>Refurbished kindle had minor scratches and blemishes as expected but functions perfectly. Seller was quick to ship out the item and had it packaged nicely.</p>145      </div>146    </div>147 148    <!-- CTA -->149    <div class="cta">150      <div class="pill-btn">See all feedback</div>151    </div>152 153    <!-- Frequently bought together -->154    <div class="freq">155      <h2>Frequently bought together</h2>156      <div class="see-all">See all →</div>157    </div>158 159    <div class="spacer"></div>160  </div>161 162  <!-- Bottom navigation -->163  <div class="bottom-nav">164    <div class="nav-item">165      <div class="nav-icon">166        <svg width="40" height="40" viewBox="0 0 24 24">167          <path fill="#cfd3d8" d="M12 3l9 8h-3v8h-4v-5H10v5H6v-8H3z"></path>168        </svg>169      </div>170      <div>Home</div>171    </div>172    <div class="nav-item">173      <div class="nav-icon">174        <svg width="40" height="40" viewBox="0 0 24 24">175          <circle cx="12" cy="8" r="4" fill="#cfd3d8"></circle>176          <path d="M4 21c0-4 4-7 8-7s8 3 8 7" fill="#cfd3d8"></path>177        </svg>178      </div>179      <div>My eBay</div>180    </div>181    <div class="nav-item active">182      <div class="nav-icon">183        <svg width="40" height="40" viewBox="0 0 24 24">184          <path fill="#c9dcff" d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm9 3-5-5"></path>185        </svg>186      </div>187      <div>Search</div>188    </div>189    <div class="nav-item">190      <div class="nav-icon">191        <svg width="40" height="40" viewBox="0 0 24 24">192          <path fill="#cfd3d8" d="M12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2zm7-6V8a7 7 0 1 0-14 0v8l-2 2v2h18v-2z"></path>193        </svg>194      </div>195      <div>Inbox</div>196    </div>197    <div class="nav-item">198      <div class="nav-icon">199        <svg width="40" height="40" viewBox="0 0 24 24">200          <path fill="#cfd3d8" d="M20 6l-4 0-2-2H6L4 6v14h16V6zm-4 5H8v-2h8v2z"></path>201        </svg>202      </div>203      <div>Selling</div>204    </div>205  </div>206</div>207</body>208</html>