GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Render</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; position:relative; overflow:hidden;9    background:#ffffff; color:#222;10  }11 12  /* Status bar */13  .status {14    height:110px; padding:0 36px; display:flex; align-items:center; gap:22px;15    font-size:42px; color:#2b2b2b;16  }17  .status .icons { margin-left:auto; display:flex; align-items:center; gap:32px; }18  .dot { width:12px; height:12px; background:#444; border-radius:50%; display:inline-block; }19 20  /* Divider */21  .divider { height:1px; background:#e6e6e6; width:100%; }22 23  /* Reviews section */24  .section { padding:36px; }25  .star-row { display:flex; align-items:center; gap:16px; }26  .star-row .title { font-size:46px; font-weight:700; }27  .stars { display:flex; gap:8px; }28  .star { width:40px; height:40px; }29  .subtext { color:#6c6c6c; font-size:36px; margin:12px 0 24px; }30  .review-text { font-size:40px; line-height:1.45; margin-top:18px; color:#222; }31 32  .review-media { display:flex; align-items:center; gap:24px; margin:28px 0; }33  .img-ph {34    width:140px; height:140px; background:#E0E0E0; border:1px solid #BDBDBD;35    display:flex; justify-content:center; align-items:center; color:#757575; font-size:28px;36  }37  .author { font-size:38px; color:#333; }38 39  .actions { display:flex; align-items:center; gap:24px; margin-top:22px; }40  .chip {41    display:flex; align-items:center; gap:16px; border:1px solid #d9d9d9;42    padding:18px 26px; border-radius:60px; font-size:36px; color:#333;43  }44  .chip svg { width:36px; height:36px; }45  .vp-row { display:flex; align-items:center; gap:18px; color:#4a4a4a; font-size:34px; margin-top:26px; }46  .vp-row svg { width:34px; height:34px; }47  .more {48    position:absolute; right:36px; top:0; transform:translateY(6px);49  }50  .card { position:relative; padding-bottom:30px; }51  .card + .card { margin-top:40px; }52 53  /* Link row */54  .link-row {55    display:flex; align-items:center; justify-content:space-between;56    padding:34px 36px; font-size:42px; border-top:1px solid #eee; border-bottom:1px solid #eee;57    color:#111; font-weight:600;58  }59 60  /* Q&A */61  .qa-header { display:flex; align-items:center; justify-content:space-between; padding:36px; }62  .qa-title { font-size:48px; font-weight:700; }63  .search {64    width:420px; height:92px; border:1px solid #dcdcdc; border-radius:14px;65    display:flex; align-items:center; gap:16px; padding:0 20px; font-size:36px; color:#666;66  }67  .qa { padding:0 36px 140px; }68  .qa .q, .qa .a { font-size:42px; margin:20px 0; }69  .author-name { font-size:40px; color:#666; margin-top:20px; }70  .qa .actions { margin-top:20px; }71 72  /* Floating app icon */73  .floating {74    position:absolute; right:36px; bottom:180px;75    width:140px; height:140px; border-radius:70px; background:#2563eb;76    box-shadow:0 10px 20px rgba(0,0,0,0.2);77    display:flex; align-items:center; justify-content:center;78    border:8px solid #ffd54f;79  }80  .floating span { font-size:72px; color:#fff; font-weight:800; }81 82  /* Bottom bar */83  .bottom-bar {84    position:absolute; left:0; bottom:0; width:100%; height:150px;85    background:#ffcc00; display:flex; align-items:center; justify-content:center;86    font-size:56px; font-weight:800; color:#1b1b1b;87    box-shadow:0 -6px 12px rgba(0,0,0,0.05);88  }89</style>90</head>91<body>92<div id="render-target">93 94  <!-- Status Bar -->95  <div class="status">96    <div>10:55</div>97    <div class="dot"></div>98    <div class="dot"></div>99    <div class="dot"></div>100    <div class="icons">101      <div class="dot"></div>102      <div class="dot"></div>103      <div class="dot"></div>104    </div>105  </div>106 107  <div class="divider"></div>108 109  <!-- Reviews Section -->110  <div class="section">111 112    <!-- Card 1 -->113    <div class="card">114      <div class="star-row">115        <div class="stars">116          <!-- 5 green stars -->117          <svg class="star" viewBox="0 0 24 24"><path fill="#22c55e" d="M12 2l3 6 6 .9-4.5 4 1.1 6.1L12 16l-5.6 3.9 1.1-6.1L3 8.9l6-.9z"/></svg>118          <svg class="star" viewBox="0 0 24 24"><path fill="#22c55e" d="M12 2l3 6 6 .9-4.5 4 1.1 6.1L12 16l-5.6 3.9 1.1-6.1L3 8.9l6-.9z"/></svg>119          <svg class="star" viewBox="0 0 24 24"><path fill="#22c55e" d="M12 2l3 6 6 .9-4.5 4 1.1 6.1L12 16l-5.6 3.9 1.1-6.1L3 8.9l6-.9z"/></svg>120          <svg class="star" viewBox="0 0 24 24"><path fill="#22c55e" d="M12 2l3 6 6 .9-4.5 4 1.1 6.1L12 16l-5.6 3.9 1.1-6.1L3 8.9l6-.9z"/></svg>121          <svg class="star" viewBox="0 0 24 24"><path fill="#22c55e" d="M12 2l3 6 6 .9-4.5 4 1.1 6.1L12 16l-5.6 3.9 1.1-6.1L3 8.9l6-.9z"/></svg>122        </div>123        <div class="title">Terrific</div>124      </div>125      <div class="subtext">Review for: Color Black</div>126      <div class="review-text">127        Awesome quality product. Very light weight and dpi is working perfectly. Best product at this price.128        Range is also very good. Loved this129      </div>130 131      <div class="review-media">132        <div class="img-ph">[IMG: Black Wireless Mouse]</div>133      </div>134 135      <div class="author">Akash Mukh..., Kolkata</div>136 137      <div class="actions">138        <div class="chip">139          <svg viewBox="0 0 24 24"><path fill="#666" d="M2 14h4v8h4l6-12V2H6L2 8v6z"/></svg>140          Helpful for 10141        </div>142        <div class="chip">143          <svg viewBox="0 0 24 24"><path fill="#666" d="M21 6h-18v10h4v4l6-4h8z"/></svg>144          4145        </div>146      </div>147 148      <div class="vp-row">149        <svg viewBox="0 0 24 24"><path fill="#10b981" d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z"/></svg>150        Verified Purchase · Jul, 2022151      </div>152 153      <div class="more">154        <svg width="36" height="80" viewBox="0 0 6 20">155          <circle cx="3" cy="3" r="2" fill="#929292"></circle>156          <circle cx="3" cy="10" r="2" fill="#929292"></circle>157          <circle cx="3" cy="17" r="2" fill="#929292"></circle>158        </svg>159      </div>160    </div>161 162    <!-- Card 2 -->163    <div class="card">164      <div class="star-row">165        <div class="stars">166          <svg class="star" viewBox="0 0 24 24"><path fill="#22c55e" d="M12 2l3 6 6 .9-4.5 4 1.1 6.1L12 16l-5.6 3.9 1.1-6.1L3 8.9l6-.9z"/></svg>167          <svg class="star" viewBox="0 0 24 24"><path fill="#22c55e" d="M12 2l3 6 6 .9-4.5 4 1.1 6.1L12 16l-5.6 3.9 1.1-6.1L3 8.9l6-.9z"/></svg>168          <svg class="star" viewBox="0 0 24 24"><path fill="#22c55e" d="M12 2l3 6 6 .9-4.5 4 1.1 6.1L12 16l-5.6 3.9 1.1-6.1L3 8.9l6-.9z"/></svg>169          <svg class="star" viewBox="0 0 24 24"><path fill="#22c55e" d="M12 2l3 6 6 .9-4.5 4 1.1 6.1L12 16l-5.6 3.9 1.1-6.1L3 8.9l6-.9z"/></svg>170          <svg class="star" viewBox="0 0 24 24"><path fill="#22c55e" d="M12 2l3 6 6 .9-4.5 4 1.1 6.1L12 16l-5.6 3.9 1.1-6.1L3 8.9l6-.9z"/></svg>171        </div>172        <div class="title">Just wow!</div>173      </div>174      <div class="subtext">Review for: Color Black</div>175      <div class="review-text">176        Awesome product, DPI works perfectly, its mini size is perfect for my son hand of age 12 year.177        In this range its good. best product in this price.178      </div>179 180      <div class="author">Meenakshi P..., Ghaziabad</div>181 182      <div class="actions">183        <div class="chip">184          <svg viewBox="0 0 24 24"><path fill="#666" d="M2 14h4v8h4l6-12V2H6L2 8v6z"/></svg>185          Helpful for 7186        </div>187        <div class="chip">188          <svg viewBox="0 0 24 24"><path fill="#666" d="M21 6h-18v10h4v4l6-4h8z"/></svg>189          3190        </div>191      </div>192 193      <div class="vp-row">194        <svg viewBox="0 0 24 24"><path fill="#10b981" d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z"/></svg>195        Verified Purchase · Jul, 2022196      </div>197 198      <div class="more">199        <svg width="36" height="80" viewBox="0 0 6 20">200          <circle cx="3" cy="3" r="2" fill="#929292"></circle>201          <circle cx="3" cy="10" r="2" fill="#929292"></circle>202          <circle cx="3" cy="17" r="2" fill="#929292"></circle>203        </svg>204      </div>205    </div>206 207  </div>208 209  <!-- Reviews link row -->210  <div class="link-row">211    <div>All 315 reviews</div>212    <svg width="36" height="36" viewBox="0 0 24 24"><path fill="#777" d="M9 6l6 6-6 6z"/></svg>213  </div>214 215  <!-- Q&A Header -->216  <div class="qa-header">217    <div class="qa-title">Questions and Answers</div>218    <div class="search">219      <svg width="42" height="42" viewBox="0 0 24 24"><path fill="#777" d="M10 2a8 8 0 1 0 4.9 14.4l5.1 5.1 1.4-1.4-5.1-5.1A8 8 0 0 0 10 2z"/></svg>220      Search221    </div>222  </div>223 224  <!-- Q&A Content -->225  <div class="qa">226    <div class="q"><span style="font-weight:700;">Q:</span> Don't we get battery along with mouse?</div>227    <div class="a"><span style="font-weight:700;">A:</span> No.</div>228    <div class="author-name">ANIL</div>229 230    <div class="actions">231      <div class="chip">232        <svg viewBox="0 0 24 24"><path fill="#666" d="M2 14h4v8h4l6-12V2H6L2 8v6z"/></svg>233        Helpful for 3234      </div>235      <div class="chip">236        <svg viewBox="0 0 24 24"><path fill="#666" d="M21 6h-18v10h4v4l6-4h8z"/></svg>237        1238      </div>239    </div>240  </div>241 242  <!-- Floating Flipkart icon -->243  <div class="floating"><span>f</span></div>244 245  <!-- Bottom Buy Now -->246  <div class="bottom-bar">Buy now</div>247 248</div>249</body>250</html>