GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Etsy Mobile Mock</title>5<style>6 body { margin:0; padding:0; background:transparent; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#121212; color:#FFFFFF; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;10 }11 12 /* Status bar */13 .status-bar {14 height:90px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;15 color:#EDEDED; font-weight:600; font-size:32px;16 }17 .status-right { display:flex; align-items:center; gap:22px; }18 .status-icon svg { width:42px; height:42px; fill:#EDEDED; }19 20 /* Search */21 .search-row { padding:8px 32px 24px; }22 .search-box {23 height:112px; border-radius:20px; background:#1E1E1E; display:flex; align-items:center;24 padding:0 24px; color:#BDBDBD; font-size:40px; gap:24px;25 }26 .search-box .spacer { flex:1; }27 .icon-btn svg { width:56px; height:56px; fill:#DADADA; }28 29 /* Section titles */30 .section-title {31 padding:8px 32px; font-size:44px; font-weight:700; display:flex; align-items:center; gap:18px;32 }33 .section-title .arrow { color:#9AA7FF; font-size:40px; }34 35 /* Categories */36 .categories { padding:26px 32px 16px; display:flex; gap:36px; }37 .cat {38 width:316px;39 }40 .cat .circle {41 width:316px; height:316px; border-radius:50%;42 background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center;43 color:#757575; font-size:34px; text-align:center; padding:20px;44 }45 .cat .label {46 margin-top:22px; font-size:42px; line-height:1.1; color:#FFFFFF; font-weight:700;47 }48 .all-categories {49 padding:8px 32px 24px; color:#7EA6FF; font-size:40px; font-weight:700;50 }51 52 /* Videos */53 .videos-section-title { padding:20px 32px 12px; font-size:52px; font-weight:800; }54 .videos { padding:12px 32px; display:flex; gap:28px; }55 .video-card {56 width:320px; height:560px; border-radius:28px; position:relative; overflow:hidden;57 background:#1E1E1E;58 }59 .video-card.large { width:360px; height:640px; }60 .video-img {61 position:absolute; inset:0; background:#E0E0E0; border:1px solid #BDBDBD;62 display:flex; align-items:center; justify-content:center; color:#757575; font-size:32px; padding:18px; text-align:center;63 }64 .video-overlay {65 position:absolute; bottom:18px; left:18px; display:flex; align-items:center; gap:12px; color:#FFFFFF; font-size:36px; font-weight:700;66 background:rgba(0,0,0,0.0);67 }68 .star svg { width:34px; height:34px; fill:#FFD54F; }69 .play-btn {70 position:absolute; right:18px; bottom:18px; width:78px; height:78px; border-radius:50%;71 background:#FFFFFF; display:flex; align-items:center; justify-content:center;72 }73 .play-btn svg { width:40px; height:40px; fill:#121212; }74 .video-caption {75 position:absolute; bottom:120px; left:20px; right:20px; color:#FFFFFF; font-size:36px; font-weight:800; line-height:1.2;76 text-shadow: 0 2px 6px rgba(0,0,0,0.6);77 }78 79 /* Editors pick banner */80 .editors-banner-wrap { padding:28px 32px; }81 .editors-banner {82 width:1016px; height:360px; border-radius:26px; background:#1E1E1E; position:relative; overflow:hidden;83 }84 .editors-banner .tag {85 position:absolute; top:20px; left:20px; font-size:42px; font-weight:700; background:rgba(255,255,255,0.08);86 padding:10px 16px; border-radius:20px;87 }88 .editors-banner .img {89 position:absolute; inset:0; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:36px;90 }91 92 /* Bottom nav */93 .bottom-nav {94 position:absolute; bottom:0; left:0; right:0; height:160px; background:#1C1C1C; border-top:1px solid #2A2A2A;95 display:flex; align-items:center; justify-content:space-around;96 }97 .nav-item { display:flex; flex-direction:column; align-items:center; gap:12px; color:#FFFFFF; }98 .nav-item svg { width:60px; height:60px; fill:#FFFFFF; }99 .nav-label { font-size:36px; }100 .dot {101 position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%; background:#FF8A65;102 }103 104 /* Small helper */105 .muted { color:#BDBDBD; }106</style>107</head>108<body>109<div id="render-target">110 111 <!-- Status Bar -->112 <div class="status-bar">113 <div class="status-left">9:08</div>114 <div class="status-right">115 <span class="status-icon">116 <!-- Cellular -->117 <svg viewBox="0 0 24 24"><path d="M2 22h3v-6H2v6zm5 0h3v-10H7v10zm5 0h3V8h-3v14zm5 0h3V2h-3v20z"/></svg>118 </span>119 <span class="status-icon">120 <!-- WiFi -->121 <svg viewBox="0 0 24 24"><path d="M12 18.5l2.5 2.5-2.5 2.5-2.5-2.5L12 18.5z" opacity=".0"/><path d="M2 8c2.7-2.1 6.1-3.5 10-3.5S19.3 5.9 22 8l-1.8 2.1C17.9 7.8 15.1 7 12 7s-5.9.8-8.2 3.1L2 8z"/><path d="M5 12c2-1.6 4.2-2.5 7-2.5s5 .9 7 2.5l-1.7 2c-1.9-1.2-3.7-1.8-5.3-1.8s-3.4.6-5.3 1.8L5 12z"/><circle cx="12" cy="18" r="2"/></svg>122 </span>123 <span class="status-icon">124 <!-- Cloud -->125 <svg viewBox="0 0 24 24"><path d="M7 18h10a4 4 0 0 0 0-8h-.4A6 6 0 0 0 5 9.5 4.5 4.5 0 0 0 7 18z"/></svg>126 </span>127 <span class="status-icon">128 <!-- Signal/Battery -->129 <svg viewBox="0 0 24 24"><path d="M17 6h2v2h2v8h-2v2h-2z"/><rect x="3" y="6" width="12" height="12" rx="2" ry="2"/></svg>130 </span>131 </div>132 </div>133 134 <!-- Search -->135 <div class="search-row">136 <div class="search-box">137 <!-- Magnifier -->138 <span class="icon-btn">139 <svg viewBox="0 0 24 24"><path d="M10 4a6 6 0 1 1 0 12 6 6 0 0 1 0-12zm0 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM21 21l-5.2-5.2 1.4-1.4L22.4 19.6z"/></svg>140 </span>141 <span class="muted">Search for anything on Etsy</span>142 <span class="spacer"></span>143 <!-- Camera -->144 <span class="icon-btn">145 <svg viewBox="0 0 24 24"><path d="M9 4l2-2h6l2 2h3v16H2V4h7zm3 4a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm0 3a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"/></svg>146 </span>147 </div>148 </div>149 150 <!-- Recommended categories -->151 <div class="section-title">152 <div>Recommended categories</div>153 <div class="arrow">→</div>154 </div>155 156 <div class="categories">157 <div class="cat">158 <div class="circle">[IMG: Loafers - Black Leather Shoes]</div>159 <div class="label">Loafers & Slip Ons</div>160 </div>161 <div class="cat">162 <div class="circle">[IMG: Oxfords & Wingtips - Black Dress Shoes]</div>163 <div class="label">Oxfords &<br>Wingtips</div>164 </div>165 <div class="cat">166 <div class="circle">[IMG: Sneakers - Personalized White Shoes with Flowers]</div>167 <div class="label">Sneakers &<br>Athletic Shoes</div>168 </div>169 </div>170 171 <div class="all-categories">All categories</div>172 173 <!-- Most-loved videos -->174 <div class="videos-section-title">Most-loved videos</div>175 <div class="videos">176 <!-- Left video -->177 <div class="video-card">178 <div class="video-img">[IMG: Pink Slime / Resin Close-up]</div>179 <div class="video-overlay">180 <span>4.9</span>181 <span class="star">182 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-1z"/></svg>183 </span>184 </div>185 <div class="play-btn">186 <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>187 </div>188 </div>189 190 <!-- Center video -->191 <div class="video-card large">192 <div class="video-img">[IMG: Person standing in white tee and ripped jeans]</div>193 <div class="video-caption">What people think when<br>I say I make clay earrings</div>194 <div class="video-overlay">195 <span>4.9</span>196 <span class="star">197 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-1z"/></svg>198 </span>199 </div>200 <div class="play-btn">201 <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>202 </div>203 </div>204 205 <!-- Right video -->206 <div class="video-card">207 <div class="video-img">[IMG: Strawberry Candle Jar]</div>208 <div class="video-overlay">209 <span>4.9</span>210 <span class="star">211 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-1z"/></svg>212 </span>213 </div>214 <div class="play-btn">215 <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>216 </div>217 </div>218 </div>219 220 <!-- Editors' Picks -->221 <div class="editors-banner-wrap">222 <div class="editors-banner">223 <div class="tag">Editors’ Picks</div>224 <div class="img">[IMG: Minimal home decor arrangement with candles and vases]</div>225 </div>226 </div>227 228 <!-- Bottom Navigation -->229 <div class="bottom-nav">230 <div class="nav-item">231 <svg viewBox="0 0 24 24"><path d="M12 3l9 8v10h-6v-6H9v6H3V11z"/></svg>232 <div class="nav-label">Home</div>233 </div>234 <div class="nav-item">235 <svg viewBox="0 0 24 24"><path d="M12 21s-6.6-4.7-9.3-7.4A6 6 0 0 1 12 5a6 6 0 0 1 9.3 8.6C18.6 16.3 12 21 12 21z"/></svg>236 <div class="nav-label">Favorites</div>237 </div>238 <div class="nav-item" style="position:relative;">239 <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V11a6 6 0 0 0-12 0v5l-2 2v1h18v-1l-2-2z"/></svg>240 <div class="dot"></div>241 <div class="nav-label">Updates</div>242 </div>243 <div class="nav-item">244 <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5z"/></svg>245 <div class="nav-label">You</div>246 </div>247 <div class="nav-item">248 <svg viewBox="0 0 24 24"><path d="M7 4h13l-1.8 9.1A3 3 0 0 1 15.3 16H9.2a3 3 0 0 1-2.9-2.3L4 6H2V4h5zm3 16a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>249 <div class="nav-label">Cart</div>250 </div>251 </div>252 253</div>254</body>255</html>