GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Amazon Reviews Mock</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#ffffff; border-radius:0;11 }12 /* Header / search area */13 .header {14 height:260px;15 background: linear-gradient(180deg, #9ad9d2 0%, #8fd1cc 50%, #8ed0cb 100%);16 color:#0a3b37;17 position:relative;18 padding:20px 24px 0 24px;19 box-sizing:border-box;20 }21 .statusbar {22 display:flex; align-items:center; justify-content:space-between;23 color:#0a3b37; font-weight:600;24 }25 .status-right { display:flex; gap:22px; align-items:center; }26 .dot { width:16px; height:16px; background:#0a3b37; border-radius:50%; opacity:0.8; }27 .back-btn {28 position:absolute; left:20px; top:104px; width:80px; height:80px; display:flex; align-items:center; justify-content:center;29 }30 .search-wrap {31 position:absolute; left:120px; right:24px; top:96px;32 background:#fff; border-radius:36px; height:100px; box-shadow:0 2px 0 rgba(0,0,0,0.05);33 display:flex; align-items:center; padding:0 28px; box-sizing:border-box;34 }35 .search-input { flex:1; color:#5b5b5b; font-size:40px; }36 .search-icons { display:flex; gap:24px; align-items:center; }37 /* Content area */38 .content { padding:28px; background:#fff; }39 .line { height:1px; background:#e6e6e6; margin:8px 0 24px; }40 .review-text { font-size:42px; line-height:62px; color:#222; margin-bottom:24px; }41 .actions { display:flex; align-items:center; gap:28px; margin-bottom:28px; }42 .chip {43 padding:18px 28px; border:1px solid #d5d5d5; border-radius:28px; font-size:38px; color:#333; background:#fafafa;44 }45 .action-inline { display:flex; align-items:center; gap:16px; color:#333; font-size:38px; }46 .report { margin-left:auto; font-size:40px; color:#444; }47 /* Review cards */48 .review-card { margin-top:24px; }49 .user-row { display:flex; align-items:center; gap:20px; margin-bottom:8px; }50 .avatar { width:84px; height:84px; border-radius:50%; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px; }51 .user-name { font-size:42px; color:#111; font-weight:600; }52 .stars { display:flex; gap:8px; margin:14px 0; }53 .verified { color:#c65a00; background:#ffe9d1; border-radius:18px; padding:8px 16px; font-size:34px; margin-left:12px; }54 .title { font-size:52px; font-weight:700; color:#111; margin:12px 0 8px; }55 .meta { color:#666; font-size:36px; margin-bottom:18px; }56 .body { color:#222; font-size:42px; line-height:62px; }57 .images-row { display:flex; gap:24px; margin-top:24px; }58 .img-ph {59 width:480px; height:420px; background:#E0E0E0; border:1px solid #BDBDBD;60 display:flex; justify-content:center; align-items:center; color:#757575; font-size:34px;61 }62 /* Bottom nav */63 .bottom-nav {64 position:absolute; bottom:0; left:0; right:0; height:160px; border-top:1px solid #e5e5e5; background:#fff;65 display:flex; align-items:center; justify-content:space-around;66 }67 .nav-item { display:flex; flex-direction:column; align-items:center; gap:12px; color:#111; font-size:36px; }68 /* Small icon sizing */69 svg { display:block; }70</style>71</head>72<body>73<div id="render-target">74 <div class="header">75 <div class="statusbar">76 <div style="font-size:40px;">9:57</div>77 <div class="status-right">78 <div class="dot"></div>79 <div class="dot" style="opacity:0.6;"></div>80 <div class="dot" style="opacity:0.45;"></div>81 <div class="dot" style="opacity:0.3;"></div>82 <div>83 <!-- signal icon -->84 <svg width="46" height="36" viewBox="0 0 24 24"><path fill="#0a3b37" d="M3 20h2V8H3v12zm4 0h2V4H7v16zm4 0h2V12h-2v8zm4 0h2V2h-2v18z"/></svg>85 </div>86 <div>87 <!-- battery icon -->88 <svg width="56" height="36" viewBox="0 0 24 24"><path fill="#0a3b37" d="M16 6h2v12h-2V6z"/><path fill="#0a3b37" d="M2 7h13v10H2V7zm-1 0a1 1 0 0 1 1-1h13a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V7z"/></svg>89 </div>90 </div>91 </div>92 93 <div class="back-btn">94 <!-- back arrow -->95 <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#133b36" d="M15.5 19l-7-7 7-7 1.5 1.5L11.5 12l5.5 5.5z"/></svg>96 </div>97 98 <div class="search-wrap">99 <svg width="48" height="48" viewBox="0 0 24 24" style="margin-right:16px;"><path fill="#4c4c4c" d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 16 6.5a6.5 6.5 0 0 0-1.5 4.09l.27.28v.79l5 5L20.5 19l-5-5zm-6 0A4.5 4.5 0 1 1 13 9.5 4.5 4.5 0 0 1 9.5 14z"/></svg>100 <div class="search-input">Search Amazon.in</div>101 <div class="search-icons">102 <!-- camera -->103 <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#4c4c4c" d="M20 5h-3.6l-1.2-1.5A2 2 0 0 0 13.7 3H10.3a2 2 0 0 0-1.5.5L7.6 5H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm-8 13a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/></svg>104 <!-- mic -->105 <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#4c4c4c" d="M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V22h2v-4.08A7 7 0 0 0 19 11h-2z"/></svg>106 </div>107 </div>108 </div>109 110 <div class="content">111 <div class="line"></div>112 113 <div class="review-text">114 One sky product is a very good brand and one sky clothes is very comfortable to wear and colour quality is very good. one sky brand has become my favourite brand 👍👍👍115 </div>116 117 <div class="actions">118 <div class="chip">Helpful</div>119 <div class="action-inline">120 <!-- share icon -->121 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#333" d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a3.27 3.27 0 0 0 0-1.39l7.02-4.05A2.99 2.99 0 1 0 14 5a2.99 2.99 0 0 0 .09.73L7.06 9.78a3 3 0 1 0 0 4.44l7.03 4.05A3 3 0 1 0 18 16.08z"/></svg>122 <span>Share</span>123 </div>124 <div class="report">Report</div>125 </div>126 127 <div class="review-card">128 <div class="user-row">129 <div class="avatar">Avatar</div>130 <div class="user-name">PATEL CHIRAG JIVRAJBHAI</div>131 </div>132 <div class="stars">133 <!-- 5 orange stars -->134 <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#ff9e00" d="M12 17.3l-6.18 3.25 1.18-6.88L1 8.9l6.9-1L12 1.6l4.1 6.3 6.9 1-5 4.77 1.18 6.88z"/></svg>135 <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#ff9e00" d="M12 17.3l-6.18 3.25 1.18-6.88L1 8.9l6.9-1L12 1.6l4.1 6.3 6.9 1-5 4.77 1.18 6.88z"/></svg>136 <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#ff9e00" d="M12 17.3l-6.18 3.25 1.18-6.88L1 8.9l6.9-1L12 1.6l4.1 6.3 6.9 1-5 4.77 1.18 6.88z"/></svg>137 <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#ff9e00" d="M12 17.3l-6.18 3.25 1.18-6.88L1 8.9l6.9-1L12 1.6l4.1 6.3 6.9 1-5 4.77 1.18 6.88z"/></svg>138 <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#ff9e00" d="M12 17.3l-6.18 3.25 1.18-6.88L1 8.9l6.9-1L12 1.6l4.1 6.3 6.9 1-5 4.77 1.18 6.88z"/></svg>139 <span class="verified">Verified Purchase</span>140 </div>141 <div class="title">Comfortable with Perfect fit</div>142 <div class="meta">Reviewed in India on 2 June 2023</div>143 <div class="meta">Size: M | Color: Black</div>144 <div class="body">145 The material is really nice quality, the track feels comfortable and the colour gives a classy look. Worth the price. Packaging was good and delivered on time. Would recommend.146 </div>147 148 <div class="actions" style="margin-top:24px;">149 <div class="chip">Helpful</div>150 <div class="action-inline">151 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#333" d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a3.27 3.27 0 0 0 0-1.39l7.02-4.05A2.99 2.99 0 1 0 14 5a2.99 2.99 0 0 0 .09.73L7.06 9.78a3 3 0 1 0 0 4.44l7.03 4.05A3 3 0 1 0 18 16.08z"/></svg>152 <span>Share</span>153 </div>154 <div class="report">Report</div>155 </div>156 </div>157 158 <div class="review-card">159 <div class="user-row" style="margin-top:16px;">160 <div class="avatar">Avatar</div>161 <div class="user-name">Uday K</div>162 </div>163 <div class="stars">164 <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#ff9e00" d="M12 17.3l-6.18 3.25 1.18-6.88L1 8.9l6.9-1L12 1.6l4.1 6.3 6.9 1-5 4.77 1.18 6.88z"/></svg>165 <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#ff9e00" d="M12 17.3l-6.18 3.25 1.18-6.88L1 8.9l6.9-1L12 1.6l4.1 6.3 6.9 1-5 4.77 1.18 6.88z"/></svg>166 <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#ff9e00" d="M12 17.3l-6.18 3.25 1.18-6.88L1 8.9l6.9-1L12 1.6l4.1 6.3 6.9 1-5 4.77 1.18 6.88z"/></svg>167 <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#ff9e00" d="M12 17.3l-6.18 3.25 1.18-6.88L1 8.9l6.9-1L12 1.6l4.1 6.3 6.9 1-5 4.77 1.18 6.88z"/></svg>168 <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#ff9e00" d="M12 17.3l-6.18 3.25 1.18-6.88L1 8.9l6.9-1L12 1.6l4.1 6.3 6.9 1-5 4.77 1.18 6.88z"/></svg>169 <span class="verified">Verified Purchase</span>170 </div>171 <div class="title">Best for winter ❄️</div>172 <div class="meta">Reviewed in India on 15 June 2023</div>173 <div class="meta">Size: M | Color: Black | Height: 5'10"</div>174 175 <div class="images-row">176 <div class="img-ph">[IMG: One Sky Track Pant - Tag Closeup]</div>177 <div class="img-ph">[IMG: Fabric / Label Closeup]</div>178 </div>179 </div>180 </div>181 182 <div class="bottom-nav">183 <div class="nav-item">184 <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#111" d="M12 3l9 8h-3v9H6v-9H3l9-8z"/></svg>185 <div>Home</div>186 </div>187 <div class="nav-item">188 <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#111" d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4.4 0-8 2.2-8 5v2h16v-2c0-2.8-3.6-5-8-5z"/></svg>189 <div>You</div>190 </div>191 <div class="nav-item">192 <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#111" d="M12 2l7 7h-5v13H10V9H5l7-7z"/></svg>193 <div>More</div>194 </div>195 <div class="nav-item">196 <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#111" d="M7 6h13l-1.5 9h-12L5 4H2V2h3l2 16h12v2H7z"/></svg>197 <div>Cart</div>198 </div>199 <div class="nav-item">200 <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#111" d="M3 5h18v2H3V5zm0 6h18v2H3v-2zm0 6h18v2H3v-2z"/></svg>201 <div>Menu</div>202 </div>203 </div>204</div>205</body>206</html>