GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Reviews</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: linear-gradient(180deg, #bde8dd 0%, #d2f0e8 20%, #ffffff 20%);11  }12 13  /* Header */14  .top-header {15    position:absolute; left:0; top:0; width:1080px; height:220px;16    padding:24px 24px 0 24px;17  }18  .status-row {19    height:40px; display:flex; align-items:center; justify-content:flex-end; color:#2b2b2b; font-size:30px;20  }21 22  .search-row {23    margin-top:20px;24    display:flex; align-items:center;25  }26  .back-btn {27    width:80px; height:80px; display:flex; align-items:center; justify-content:center;28  }29  .search-bar {30    flex:1;31    height:100px; background:#ffffff; border-radius:16px;32    box-shadow: 0 1px 0 rgba(0,0,0,0.08) inset;33    display:flex; align-items:center; padding:0 24px;34    border:1px solid #dcdcdc;35  }36  .search-icon { width:40px; height:40px; margin-right:16px; }37  .search-text { flex:1; color:#222; font-size:40px; }38  .camera-icon { width:60px; height:60px; }39 40  /* Tabs */41  .tabs {42    position:absolute; top:220px; left:0; width:1080px; height:120px;43    background:#ffffff; border-top-left-radius:18px; border-top-right-radius:18px;44    display:flex; align-items:center; justify-content:space-between;45    padding:0 30px; border-bottom:1px solid #e6e6e6;46  }47  .tab-item {48    font-size:42px; color:#666;49  }50  .tab-item.active { color:#c5531d; font-weight:bold; }51  .tab-underline {52    position:absolute; bottom:0; left:380px; width:180px; height:10px; background:#e67a3a; border-radius:6px;53  }54  .up-icon { width:54px; height:54px; }55 56  /* Content */57  .content {58    position:absolute; top:340px; left:0; width:1080px; bottom:200px; overflow-y:auto;59    background:#ffffff;60  }61  .section {62    padding:40px 40px 20px 40px;63  }64  .title { font-size:56px; color:#222; font-weight:700; margin-bottom:20px; }65  .rating-row { display:flex; align-items:center; font-size:42px; color:#333; }66  .stars { color:#f6a11a; font-size:44px; margin-right:16px; }67  .subtle { color:#666; font-size:36px; margin-top:6px; }68 69  .divider { height:1px; background:#eee; margin:30px 0; }70 71  /* Top review block */72  .review-header { font-size:48px; font-weight:700; margin:10px 0 30px 0; }73  .review-card { display:flex; }74  .avatar {75    width:110px; height:110px; border-radius:55px; border:1px solid #cfcfcf;76    background:#E0E0E0; display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px;77    margin-right:24px;78  }79  .review-body { flex:1; }80  .review-name { font-size:42px; color:#222; margin-top:6px; }81  .review-stars { color:#f6a11a; font-size:44px; margin:12px 0; }82  .review-title { font-size:46px; font-weight:700; margin:8px 0 6px 0; }83  .review-meta { color:#757575; font-size:34px; }84  .review-meta .bold { font-weight:600; color:#333; }85  .review-text {86    font-size:40px; color:#333; line-height:1.45; margin-top:18px;87  }88 89  .actions { display:flex; align-items:center; justify-content:space-between; margin-top:30px; }90  .pill {91    padding:28px 34px; border:1px solid #d5d5d5; border-radius:22px; font-size:40px; color:#222; background:#fafafa;92  }93  .share {94    margin-left:20px; display:flex; align-items:center; font-size:40px; color:#333;95  }96  .share svg { width:40px; height:40px; margin-right:14px; }97  .report { font-size:40px; color:#333; }98 99  .see-more {100    margin-top:30px; padding:40px; border-top:1px solid #eee; border-bottom:1px solid #eee;101    display:flex; align-items:center; justify-content:space-between; font-size:44px; color:#222;102  }103  .chev { width:44px; height:44px; }104 105  /* Review buttons */106  .big-btn {107    margin:26px 40px; padding:40px; border:1px solid #dcdcdc; border-radius:22px; font-size:44px; color:#222;108    display:flex; align-items:center; justify-content:space-between; background:#fafafa;109  }110  .big-btn .arrow { width:46px; height:46px; }111 112  /* Bottom navigation */113  .bottom-nav {114    position:absolute; left:0; bottom:0; width:1080px; height:160px;115    background:#ffffff; border-top:1px solid #e6e6e6;116    display:flex; align-items:center; justify-content:space-around;117  }118  .nav-item { display:flex; flex-direction:column; align-items:center; font-size:30px; color:#222; }119  .nav-icon { width:64px; height:64px; }120  .badge {121    position:absolute; top:-8px; right:-10px; background:#ff7a00; color:#fff; font-size:26px; padding:2px 10px; border-radius:18px;122  }123</style>124</head>125<body>126<div id="render-target">127 128  <!-- Header -->129  <div class="top-header">130    <div class="status-row">10:55 ⦿ ▮ ▮</div>131 132    <div class="search-row">133      <div class="back-btn">134        <svg class="nav-icon" viewBox="0 0 24 24">135          <path d="M15 18l-6-6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>136        </svg>137      </div>138      <div class="search-bar">139        <svg class="search-icon" viewBox="0 0 24 24">140          <circle cx="10" cy="10" r="7" stroke="#666" stroke-width="2" fill="none"/>141          <path d="M21 21l-5-5" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>142        </svg>143        <div class="search-text">sofa gray colour</div>144        <svg class="camera-icon" viewBox="0 0 24 24">145          <rect x="3" y="6" width="18" height="13" rx="2" ry="2" stroke="#666" stroke-width="2" fill="none"/>146          <path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" stroke="#666" stroke-width="2" fill="none"/>147          <path d="M9 6l2-2h2l2 2" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>148        </svg>149      </div>150    </div>151  </div>152 153  <!-- Tabs -->154  <div class="tabs">155    <div class="tab-item">Details</div>156    <div class="tab-item active">Reviews</div>157    <svg class="up-icon" viewBox="0 0 24 24">158      <path d="M12 8l6 6H6z" fill="#333"/>159    </svg>160    <div class="tab-underline"></div>161  </div>162 163  <!-- Content -->164  <div class="content">165    <div class="section">166      <div class="title">Customer reviews</div>167      <div class="rating-row">168        <div class="stars">★★★★★</div>169        <div style="font-size:44px; margin-right:14px;">5 out of 5</div>170        <svg class="chev" viewBox="0 0 24 24">171          <path d="M9 6l6 6-6 6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>172        </svg>173      </div>174      <div class="subtle">2 global ratings</div>175 176      <div class="divider"></div>177 178      <div class="review-header">Top review from India</div>179 180      <div class="review-card">181        <div class="avatar">[IMG: User Avatar]</div>182        <div class="review-body">183          <div class="review-name">Pankaj</div>184          <div class="review-stars">★★★★★</div>185          <div class="review-title">Best sofa for my home</div>186          <div class="review-meta">Reviewed in India on 13 March 2022</div>187          <div class="review-meta"><span class="bold">Colour:</span> Black</div>188          <div class="review-text">189            It's a complete vale for money.<br><br>190            It's a happy to buy this and price based sofa.<br>191            We buy this and get easy to used and foam density and quality of sofa is valueable.192          </div>193 194          <div class="actions">195            <div style="display:flex; align-items:center;">196              <div class="pill">Helpful</div>197              <div class="share">198                <svg viewBox="0 0 24 24">199                  <path d="M18 8a3 3 0 1 0-2.9-3.7L8.5 8.2a3 3 0 0 0 0 3.6l6.6 3.9A3 3 0 1 0 17 14.2l-6.7-4" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>200                </svg>201                Share202              </div>203            </div>204            <div class="report">Report</div>205          </div>206        </div>207      </div>208 209      <div class="see-more">210        <div>See more reviews</div>211        <svg class="chev" viewBox="0 0 24 24">212          <path d="M9 6l6 6-6 6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>213        </svg>214      </div>215 216      <div class="big-btn">217        <div>Create a video review</div>218        <svg class="arrow" viewBox="0 0 24 24">219          <path d="M9 6l6 6-6 6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>220        </svg>221      </div>222 223      <div class="big-btn">224        <div>Write a review</div>225        <svg class="arrow" viewBox="0 0 24 24">226          <path d="M9 6l6 6-6 6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>227        </svg>228      </div>229 230    </div>231  </div>232 233  <!-- Bottom navigation -->234  <div class="bottom-nav">235    <div class="nav-item">236      <svg class="nav-icon" viewBox="0 0 24 24">237        <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" stroke="#333" stroke-width="2" fill="none" stroke-linejoin="round"/>238        <path d="M9 22v-6h6v6" stroke="#333" stroke-width="2" fill="none"/>239      </svg>240    </div>241    <div class="nav-item">242      <svg class="nav-icon" viewBox="0 0 24 24">243        <circle cx="12" cy="8" r="4" stroke="#333" stroke-width="2" fill="none"/>244        <path d="M4 22c0-4 4-7 8-7s8 3 8 7" stroke="#333" stroke-width="2" fill="none"/>245      </svg>246    </div>247    <div class="nav-item">248      <svg class="nav-icon" viewBox="0 0 24 24">249        <rect x="3" y="3" width="7" height="7" stroke="#333" stroke-width="2" fill="none"/>250        <rect x="14" y="3" width="7" height="7" stroke="#333" stroke-width="2" fill="none"/>251        <rect x="3" y="14" width="7" height="7" stroke="#333" stroke-width="2" fill="none"/>252        <rect x="14" y="14" width="7" height="7" stroke="#333" stroke-width="2" fill="none"/>253      </svg>254    </div>255    <div class="nav-item" style="position:relative;">256      <svg class="nav-icon" viewBox="0 0 24 24">257        <path d="M6 6h15l-2 10H7L6 6z" stroke="#333" stroke-width="2" fill="none"/>258        <circle cx="9" cy="20" r="2" stroke="#333" stroke-width="2" fill="none"/>259        <circle cx="17" cy="20" r="2" stroke="#333" stroke-width="2" fill="none"/>260      </svg>261      <div class="badge">0</div>262    </div>263    <div class="nav-item">264      <svg class="nav-icon" viewBox="0 0 24 24">265        <path d="M3 6h18M3 12h18M3 18h18" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>266      </svg>267    </div>268  </div>269 270</div>271</body>272</html>