GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Etsy Mobile Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000;15    border-radius: 0;16    box-shadow: none;17    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;18    color: #fff;19  }20 21  /* Status bar */22  .status-bar {23    height: 110px;24    background: #1c1c1c;25    display: flex;26    align-items: center;27    padding: 0 40px;28    font-weight: 600;29    font-size: 34px;30    letter-spacing: 0.3px;31  }32  .status-right {33    margin-left: auto;34    display: flex;35    gap: 24px;36    align-items: center;37  }38  .status-dot {39    width: 12px; height: 12px; background: #bdbdbd; border-radius: 50%;40  }41  .battery {42    width: 44px; height: 24px; border: 3px solid #fff; border-radius: 6px; position: relative;43  }44  .battery::after { content: ""; position: absolute; right: -10px; top: 6px; width: 6px; height: 12px; background: #fff; border-radius: 2px; }45  .battery-fill { position: absolute; left: 3px; top: 3px; height: 16px; width: 26px; background: #fff; }46 47  /* Search row */48  .search-row {49    height: 150px;50    background: #222;51    display: flex;52    align-items: center;53    padding: 0 40px;54    gap: 28px;55    border-bottom: 1px solid #2c2c2c;56  }57  .search-input {58    flex: 1;59    color: #cfcfcf;60    font-size: 40px;61  }62  .icon-btn {63    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 36px;64  }65  .icon {66    width: 56px; height: 56px; fill: none; stroke: #fff; stroke-width: 6px;67  }68 69  /* Banner */70  .banner {71    background: #5a78d6;72    height: 740px;73    padding: 60px 80px;74    text-align: center;75  }76  .banner .emblem {77    width: 220px; height: 220px; margin: 0 auto 40px auto; background: #e6ecff; border-radius: 110px;78    display: flex; align-items: center; justify-content: center;79  }80  .banner h1 {81    margin: 20px 0 12px 0;82    font-size: 64px;83    font-weight: 600;84  }85  .banner p {86    margin: 0 auto;87    font-size: 32px;88    color: #e9efff;89    max-width: 800px;90    line-height: 1.4;91  }92  .banner .cta {93    margin: 40px auto 0 auto;94    background: #fff;95    color: #111;96    border: none;97    font-size: 40px;98    font-weight: 600;99    height: 96px;100    padding: 0 44px;101    border-radius: 48px;102    display: inline-flex;103    align-items: center;104    justify-content: center;105  }106 107  /* Sections */108  .sections {109    background: #0f0f10;110    padding: 44px 40px 240px 40px; /* leave space above bottom nav */111  }112  .section-title {113    font-size: 50px;114    font-weight: 700;115    margin: 20px 0 24px 6px;116    display: flex;117    align-items: center;118    gap: 12px;119  }120  .grid {121    display: grid;122    grid-template-columns: 1fr 1fr;123    gap: 32px;124    margin-bottom: 34px;125  }126  .card {127    position: relative;128    background: #151515;129    border-radius: 28px;130    overflow: hidden;131    height: 360px;132    padding: 0;133  }134  .img-placeholder {135    width: 100%; height: 100%;136    background: #E0E0E0; border: 1px solid #BDBDBD;137    display: flex; justify-content: center; align-items: center;138    color: #757575; font-size: 36px;139  }140  .fav {141    position: absolute;142    top: 16px; right: 16px;143    width: 88px; height: 88px; border-radius: 44px;144    background: #fff;145    box-shadow: 0 4px 10px rgba(0,0,0,0.35);146    display: flex; align-items: center; justify-content: center;147  }148  .heart-icon {149    width: 44px; height: 44px; fill: none; stroke: #111; stroke-width: 6px;150  }151 152  /* Bottom nav */153  .bottom-nav {154    position: absolute;155    left: 0; right: 0; bottom: 0;156    height: 170px;157    background: #2b2b2b;158    border-top: 1px solid #3a3a3a;159    display: flex; align-items: center; justify-content: space-around;160    color: #eaeaea;161  }162  .nav-item {163    width: 180px; text-align: center;164    display: flex; flex-direction: column; align-items: center; gap: 14px;165    font-size: 32px;166  }167  .nav-icon {168    width: 60px; height: 60px; stroke: #fff; stroke-width: 6px; fill: none;169  }170 171  /* Arrow glyph spacing in titles */172  .arrow {173    width: 40px; height: 40px; stroke: #fff; stroke-width: 8px; fill: none;174  }175</style>176</head>177<body>178<div id="render-target">179 180  <!-- Status bar -->181  <div class="status-bar">182    9:49183    <div class="status-right">184      <div class="status-dot"></div>185      <div class="status-dot"></div>186      <div class="status-dot"></div>187      <div class="battery"><div class="battery-fill"></div></div>188    </div>189  </div>190 191  <!-- Search row -->192  <div class="search-row">193    <div class="icon-btn">194      <svg class="icon" viewBox="0 0 24 24">195        <circle cx="10" cy="10" r="7"></circle>196        <line x1="16" y1="16" x2="22" y2="22"></line>197      </svg>198    </div>199    <div class="search-input">Search for anything on Etsy</div>200    <div class="icon-btn">201      <svg class="icon" viewBox="0 0 24 24">202        <rect x="3" y="6" width="18" height="12" rx="2" ry="2"></rect>203        <circle cx="12" cy="12" r="3"></circle>204      </svg>205    </div>206  </div>207 208  <!-- Banner -->209  <div class="banner">210    <div class="emblem">211      <svg viewBox="0 0 120 120" width="120" height="120">212        <!-- Heart -->213        <path d="M60 86c-16-12-26-22-26-33 0-8 6-14 14-14 6 0 10 3 12 7 2-4 6-7 12-7 8 0 14 6 14 14 0 11-10 21-26 33z" fill="#111"></path>214        <!-- Hands (simple) -->215        <path d="M26 80c10-4 18-9 22-16" stroke="#111" stroke-width="6" fill="none" stroke-linecap="round"></path>216        <path d="M94 80c-10-4-18-9-22-16" stroke="#111" stroke-width="6" fill="none" stroke-linecap="round"></path>217      </svg>218    </div>219    <h1>Explore a world of inspiration</h1>220    <p>Sign in now to save your favorite items and get personalized recommendations</p>221    <button class="cta">Sign in</button>222  </div>223 224  <!-- Sections -->225  <div class="sections">226    <div class="section-title">227      <span>Modern farmhouse</span>228      <svg class="arrow" viewBox="0 0 24 24"><polyline points="8,4 16,12 8,20"></polyline></svg>229    </div>230    <div class="grid">231      <div class="card">232        <div class="img-placeholder">[IMG: Neutral curtains & stool]</div>233        <div class="fav">234          <svg class="heart-icon" viewBox="0 0 24 24">235            <path d="M12 21s-7-4.3-9-8.2C2 9 4.2 6.5 7 7.3c2 .6 3 2.6 5 4.2 2-1.6 3-3.6 5-4.2 2.8-.8 5 1.7 4 5.5-2 3.9-9 8.2-9 8.2z"></path>236          </svg>237        </div>238      </div>239      <div class="card">240        <div class="img-placeholder">[IMG: Artisan serving dish]</div>241        <div class="fav">242          <svg class="heart-icon" viewBox="0 0 24 24">243            <path d="M12 21s-7-4.3-9-8.2C2 9 4.2 6.5 7 7.3c2 .6 3 2.6 5 4.2 2-1.6 3-3.6 5-4.2 2.8-.8 5 1.7 4 5.5-2 3.9-9 8.2-9 8.2z"></path>244          </svg>245        </div>246      </div>247    </div>248 249    <div class="section-title">250      <span>Boho decor</span>251      <svg class="arrow" viewBox="0 0 24 24"><polyline points="8,4 16,12 8,20"></polyline></svg>252    </div>253    <div class="grid">254      <div class="card">255        <div class="img-placeholder">[IMG: Boho art print with snake]</div>256        <div class="fav">257          <svg class="heart-icon" viewBox="0 0 24 24">258            <path d="M12 21s-7-4.3-9-8.2C2 9 4.2 6.5 7 7.3c2 .6 3 2.6 5 4.2 2-1.6 3-3.6 5-4.2 2.8-.8 5 1.7 4 5.5-2 3.9-9 8.2-9 8.2z"></path>259          </svg>260        </div>261      </div>262      <div class="card">263        <div class="img-placeholder">[IMG: Boho sunburst print]</div>264        <div class="fav">265          <svg class="heart-icon" viewBox="0 0 24 24">266            <path d="M12 21s-7-4.3-9-8.2C2 9 4.2 6.5 7 7.3c2 .6 3 2.6 5 4.2 2-1.6 3-3.6 5-4.2 2.8-.8 5 1.7 4 5.5-2 3.9-9 8.2-9 8.2z"></path>267          </svg>268        </div>269      </div>270    </div>271 272    <div class="section-title">273      <span>Eclectic decor</span>274      <svg class="arrow" viewBox="0 0 24 24"><polyline points="8,4 16,12 8,20"></polyline></svg>275    </div>276  </div>277 278  <!-- Bottom navigation -->279  <div class="bottom-nav">280    <div class="nav-item">281      <svg class="nav-icon" viewBox="0 0 24 24">282        <path d="M3 11l9-8 9 8"></path>283        <path d="M5 11v9h14v-9"></path>284      </svg>285      <div>Home</div>286    </div>287    <div class="nav-item">288      <svg class="nav-icon" viewBox="0 0 24 24">289        <path d="M12 21s-7-4.3-9-8.2C2 9 4.2 6.5 7 7.3c2 .6 3 2.6 5 4.2 2-1.6 3-3.6 5-4.2 2.8-.8 5 1.7 4 5.5-2 3.9-9 8.2-9 8.2z"></path>290      </svg>291      <div>Favorites</div>292    </div>293    <div class="nav-item">294      <svg class="nav-icon" viewBox="0 0 24 24">295        <path d="M4 4h16v16H4z"></path>296        <path d="M4 12h16"></path>297      </svg>298      <div>Deals</div>299    </div>300    <div class="nav-item">301      <svg class="nav-icon" viewBox="0 0 24 24">302        <circle cx="12" cy="8" r="4"></circle>303        <path d="M4 22c2-5 6-6 8-6s6 1 8 6"></path>304      </svg>305      <div>You</div>306    </div>307    <div class="nav-item">308      <svg class="nav-icon" viewBox="0 0 24 24">309        <path d="M6 6h15l-2 10H7L6 6z"></path>310        <circle cx="9" cy="20" r="2"></circle>311        <circle cx="18" cy="20" r="2"></circle>312      </svg>313      <div>Cart</div>314    </div>315  </div>316 317</div>318</body>319</html>