GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Mobile UI - Amazon Reviews</title>5<style>6 body { margin:0; padding:0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:#222; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#f7f7f7;10 }11 /* Top gradient header area */12 .top-gradient {13 position:absolute; left:0; top:0; width:100%; height:300px;14 background: linear-gradient(180deg, #bfe7e2 0%, #cfead9 100%);15 }16 /* Status bar */17 .status-bar {18 position:absolute; top:20px; left:0; width:100%; height:60px; display:flex; align-items:center; padding:0 28px; color:#1a1a1a; font-size:36px;19 }20 .status-left { display:flex; align-items:center; gap:24px; }21 .status-right { margin-left:auto; display:flex; align-items:center; gap:26px; }22 .status-dot { width:12px; height:12px; background:#1a1a1a; border-radius:50%; }23 /* Search bar */24 .search-row {25 position:absolute; top:90px; left:28px; right:28px; display:flex; align-items:center;26 gap:24px;27 }28 .icon-btn {29 width:64px; height:64px; border-radius:32px; display:flex; align-items:center; justify-content:center;30 }31 .search-bar {32 flex:1; height:98px; background:#fff; border-radius:20px; box-shadow: 0 2px 0 rgba(0,0,0,0.08) inset;33 display:flex; align-items:center; padding:0 28px; gap:22px; border:1px solid #e0e0e0;34 font-size:38px; color:#444;35 }36 .search-text { flex:1; color:#222; }37 .camera-btn { width:72px; height:72px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:#f5f5f5; border:1px solid #ddd; }38 /* Tabs */39 .tabs {40 position:absolute; top:210px; left:0; width:100%; padding:0 28px; height:110px; display:flex; align-items:flex-end; gap:44px;41 }42 .tab {43 font-size:42px; color:#555; padding-bottom:22px;44 }45 .tab.active { color:#e56a00; font-weight:600; border-bottom:8px solid #e56a00; }46 .scroll-up {47 margin-left:auto; display:flex; align-items:center; justify-content:center;48 width:90px; height:90px; border-radius:18px; background:#eaf7f2; border:1px solid #d6e6de;49 }50 51 /* Content */52 .content {53 position:absolute; top:320px; left:0; right:0; bottom:180px; overflow-y:auto; padding:0 28px 40px 28px;54 }55 .section { margin-top:36px; }56 .section h2 {57 font-size:54px; font-weight:700; margin:12px 0 18px 0;58 }59 .rating-row { display:flex; align-items:center; gap:20px; font-size:44px; color:#333; }60 .stars { display:flex; gap:8px; }61 .star svg { width:44px; height:44px; }62 .subtext { font-size:40px; color:#666; margin-top:12px; }63 64 /* video/image grids */65 .cards-row { display:flex; gap:28px; }66 .thumb {67 width:324px; height:540px; border-radius:26px; overflow:hidden; position:relative; background:#fff; border:1px solid #e4e4e4;68 display:flex; align-items:center; justify-content:center;69 }70 .thumb .image {71 position:absolute; left:0; top:0; width:100%; height:100%;72 background:#E0E0E0; border:0; display:flex; justify-content:center; align-items:center; color:#757575; font-size:36px; text-align:center; padding:0 10px;73 }74 .thumb .overlay {75 position:absolute; bottom:0; left:0; right:0; height:120px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);76 display:flex; align-items:flex-end; padding:18px 20px; gap:16px; color:#fff;77 }78 .overlay .stars { gap:6px; }79 .duration { margin-left:auto; font-size:34px; background:rgba(0,0,0,0.45); padding:4px 10px; border-radius:12px; }80 81 .images-grid { display:flex; gap:28px; margin-top:12px; }82 .img-card {83 width:514px; height:540px; border-radius:22px; background:#fff; border:1px solid #e4e4e4; overflow:hidden; position:relative;84 }85 .img-card .image {86 position:absolute; inset:0;87 background:#E0E0E0; border:0; display:flex; justify-content:center; align-items:center; color:#757575; font-size:36px;88 }89 90 /* Bottom navigation */91 .bottom-nav {92 position:absolute; left:0; right:0; bottom:0; height:160px; background:#fff; border-top:1px solid #e6e6e6;93 display:flex; align-items:center; justify-content:space-around;94 }95 .nav-item { display:flex; flex-direction:column; align-items:center; justify-content:center; color:#333; gap:12px; font-size:34px; }96 .nav-item .icon { width:72px; height:72px; border-radius:20px; display:flex; align-items:center; justify-content:center; }97 .nav-item.active { color:#1a8b72; }98 .home-bar {99 position:absolute; left:300px; right:300px; bottom:20px; height:12px; background:#bfbfbf; border-radius:8px;100 }101</style>102</head>103<body>104<div id="render-target">105 106 <div class="top-gradient"></div>107 108 <!-- Status Bar -->109 <div class="status-bar">110 <div class="status-left">111 <div>11:52</div>112 <div>☀️ 15°</div>113 <div>📧</div>114 <div class="status-dot"></div>115 </div>116 <div class="status-right">117 <div>📶</div>118 <div>119 <!-- Battery icon -->120 <svg width="36" height="22"><rect x="1" y="4" width="30" height="14" rx="3" ry="3" fill="#222"/><rect x="33" y="8" width="3" height="6" fill="#222"/></svg>121 </div>122 </div>123 </div>124 125 <!-- Search Row -->126 <div class="search-row">127 <div class="icon-btn">128 <!-- Back Arrow -->129 <svg width="48" height="48" viewBox="0 0 24 24">130 <path d="M15 18l-6-6 6-6" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>131 </svg>132 </div>133 <div class="search-bar">134 <!-- Magnifier -->135 <svg width="42" height="42" viewBox="0 0 24 24">136 <circle cx="11" cy="11" r="7" stroke="#555" stroke-width="2" fill="none"/>137 <line x1="21" y1="21" x2="16.5" y2="16.5" stroke="#555" stroke-width="2"/>138 </svg>139 <div class="search-text">nike shoes for men</div>140 <div class="camera-btn">141 <!-- Camera icon -->142 <svg width="40" height="40" viewBox="0 0 24 24">143 <rect x="3" y="6" width="18" height="12" rx="2" fill="#777"/>144 <rect x="9" y="3" width="6" height="4" rx="1" fill="#777"/>145 <circle cx="12" cy="12" r="4" fill="#fff"/>146 </svg>147 </div>148 </div>149 </div>150 151 <!-- Tabs -->152 <div class="tabs">153 <div class="tab">Details</div>154 <div class="tab">Compare</div>155 <div class="tab active">Reviews</div>156 <div class="scroll-up">157 <!-- Up arrow -->158 <svg width="40" height="40" viewBox="0 0 24 24">159 <path d="M6 15l6-6 6 6" fill="none" stroke="#2a6b5a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>160 </svg>161 </div>162 </div>163 164 <!-- Content Area -->165 <div class="content">166 167 <div class="section">168 <h2>Customer reviews</h2>169 <div class="rating-row">170 <div class="stars">171 <span class="star">172 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5.1 5 1.2 7-6.2-3.6-6.2 3.6 1.2-7-5.1-5 7-1z" fill="#f28c28"/></svg>173 </span>174 <span class="star">175 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5.1 5 1.2 7-6.2-3.6-6.2 3.6 1.2-7-5.1-5 7-1z" fill="#f28c28"/></svg>176 </span>177 <span class="star">178 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5.1 5 1.2 7-6.2-3.6-6.2 3.6 1.2-7-5.1-5 7-1z" fill="#f28c28"/></svg>179 </span>180 <span class="star">181 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5.1 5 1.2 7-6.2-3.6-6.2 3.6 1.2-7-5.1-5 7-1z" fill="#f28c28"/></svg>182 </span>183 <span class="star">184 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5.1 5 1.2 7-6.2-3.6-6.2 3.6 1.2-7-5.1-5 7-1z" fill="#ddd"/></svg>185 </span>186 </div>187 <div>4.1 out of 5</div>188 <div style="margin-left:auto;">189 <!-- chevron -->190 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="#888" stroke-width="2"/></svg>191 </div>192 </div>193 <div class="subtext">289 global ratings</div>194 </div>195 196 <div class="section">197 <h2>Reviews with videos</h2>198 <div class="cards-row">199 <div class="thumb">200 <div class="image">[IMG: Video Review]</div>201 <div class="overlay">202 <div class="stars">203 <svg viewBox="0 0 24 24" width="36" height="36"><path d="M12 2l3.1 6.6 7 1-5.1 5 1.2 7-6.2-3.6-6.2 3.6 1.2-7-5.1-5 7-1z" fill="#f28c28"/></svg>204 <svg viewBox="0 0 24 24" width="36" height="36"><path d="M12 2l3.1 6.6 7 1-5.1 5 1.2 7-6.2-3.6-6.2 3.6 1.2-7-5.1-5 7-1z" fill="#f28c28"/></svg>205 <svg viewBox="0 0 24 24" width="36" height="36"><path d="M12 2l3.1 6.6 7 1-5.1 5 1.2 7-6.2-3.6-6.2 3.6 1.2-7-5.1-5 7-1z" fill="#f28c28"/></svg>206 <svg viewBox="0 0 24 24" width="36" height="36"><path d="M12 2l3.1 6.6 7 1-5.1 5 1.2 7-6.2-3.6-6.2 3.6 1.2-7-5.1-5 7-1z" fill="#f28c28"/></svg>207 <svg viewBox="0 0 24 24" width="36" height="36"><path d="M12 2l3.1 6.6 7 1-5.1 5 1.2 7-6.2-3.6-6.2 3.6 1.2-7-5.1-5 7-1z" fill="#ddd"/></svg>208 </div>209 <div class="duration">0:23</div>210 </div>211 </div>212 <div class="thumb">213 <div class="image">[IMG: Video Review - Shoes]</div>214 <div class="overlay">215 <div class="stars">216 <svg viewBox="0 0 24 24" width="36" height="36"><path d="M12 2l3.1 6.6 7 1-5.1 5 1.2 7-6.2-3.6-6.2 3.6 1.2-7-5.1-5 7-1z" fill="#f28c28"/></svg>217 <svg viewBox="0 0 24 24" width="36" height="36"><path d="M12 2l3.1 6.6 7 1-5.1 5 1.2 7-6.2-3.6-6.2 3.6 1.2-7-5.1-5 7-1z" fill="#f28c28"/></svg>218 <svg viewBox="0 0 24 24" width="36" height="36"><path d="M12 2l3.1 6.6 7 1-5.1 5 1.2 7-6.2-3.6-6.2 3.6 1.2-7-5.1-5 7-1z" fill="#f28c28"/></svg>219 <svg viewBox="0 0 24 24" width="36" height="36"><path d="M12 2l3.1 6.6 7 1-5.1 5 1.2 7-6.2-3.6-6.2 3.6 1.2-7-5.1-5 7-1z" fill="#f28c28"/></svg>220 <svg viewBox="0 0 24 24" width="36" height="36"><path d="M12 2l3.1 6.6 7 1-5.1 5 1.2 7-6.2-3.6-6.2 3.6 1.2-7-5.1-5 7-1z" fill="#ddd"/></svg>221 </div>222 <div class="duration">0:03</div>223 </div>224 </div>225 <div class="thumb">226 <div class="image">[IMG: Video Review]</div>227 <div class="overlay">228 <div class="stars">229 <svg viewBox="0 0 24 24" width="36" height="36"><path d="M12 2l3.1 6.6 7 1-5.1 5 1.2 7-6.2-3.6-6.2 3.6 1.2-7-5.1-5 7-1z" fill="#f28c28"/></svg>230 <svg viewBox="0 0 24 24" width="36" height="36"><path d="M12 2l3.1 6.6 7 1-5.1 5 1.2 7-6.2-3.6-6.2 3.6 1.2-7-5.1-5 7-1z" fill="#f28c28"/></svg>231 <svg viewBox="0 0 24 24" width="36" height="36"><path d="M12 2l3.1 6.6 7 1-5.1 5 1.2 7-6.2-3.6-6.2 3.6 1.2-7-5.1-5 7-1z" fill="#f28c28"/></svg>232 <svg viewBox="0 0 24 24" width="36" height="36"><path d="M12 2l3.1 6.6 7 1-5.1 5 1.2 7-6.2-3.6-6.2 3.6 1.2-7-5.1-5 7-1z" fill="#f28c28"/></svg>233 <svg viewBox="0 0 24 24" width="36" height="36"><path d="M12 2l3.1 6.6 7 1-5.1 5 1.2 7-6.2-3.6-6.2 3.6 1.2-7-5.1-5 7-1z" fill="#ddd"/></svg>234 </div>235 <div class="duration">0:29</div>236 </div>237 </div>238 </div>239 </div>240 241 <div class="section">242 <h2>Reviews with images</h2>243 <div class="images-grid">244 <div class="img-card">245 <div class="image">[IMG: Close-up Nike Shoe]</div>246 </div>247 <div class="img-card">248 <div class="image">[IMG: Nike Logo & Sole]</div>249 </div>250 </div>251 </div>252 253 </div>254 255 <!-- Bottom Navigation -->256 <div class="bottom-nav">257 <div class="nav-item active">258 <div class="icon">259 <!-- Home icon -->260 <svg width="46" height="46" viewBox="0 0 24 24">261 <path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-6v-6H10v6H4a1 1 0 0 1-1-1z" fill="#1a8b72"/>262 </svg>263 </div>264 <div>Home</div>265 </div>266 <div class="nav-item">267 <div class="icon">268 <!-- User icon -->269 <svg width="46" height="46" viewBox="0 0 24 24">270 <circle cx="12" cy="8" r="4" fill="#777"/>271 <path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="#777"/>272 </svg>273 </div>274 <div>You</div>275 </div>276 <div class="nav-item">277 <div class="icon">278 <!-- Refresh icon -->279 <svg width="46" height="46" viewBox="0 0 24 24">280 <path d="M4 12a8 8 0 0 1 14-4" fill="none" stroke="#777" stroke-width="2"/>281 <path d="M18 6v5h5" fill="none" stroke="#777" stroke-width="2"/>282 <path d="M20 12a8 8 0 0 1-14 4" fill="none" stroke="#777" stroke-width="2"/>283 <path d="M6 18v-5H1" fill="none" stroke="#777" stroke-width="2"/>284 </svg>285 </div>286 <div>More</div>287 </div>288 <div class="nav-item">289 <div class="icon">290 <!-- Cart icon -->291 <svg width="46" height="46" viewBox="0 0 24 24">292 <circle cx="9" cy="20" r="2" fill="#777"/>293 <circle cx="17" cy="20" r="2" fill="#777"/>294 <path d="M3 4h3l2 10h9l2-8H7" fill="none" stroke="#777" stroke-width="2"/>295 </svg>296 </div>297 <div>Cart</div>298 </div>299 <div class="nav-item">300 <div class="icon">301 <!-- Menu icon -->302 <svg width="46" height="46" viewBox="0 0 24 24">303 <rect x="4" y="6" width="16" height="2" fill="#777"/>304 <rect x="4" y="11" width="16" height="2" fill="#777"/>305 <rect x="4" y="16" width="16" height="2" fill="#777"/>306 </svg>307 </div>308 <div>Menu</div>309 </div>310 <div class="home-bar"></div>311 </div>312 313</div>314</body>315</html>