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>ZARA 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: #ffffff;15    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;16    color: #111;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    height: 110px;25    width: 100%;26    display: flex;27    align-items: center;28    padding: 0 40px;29    box-sizing: border-box;30    color: #555;31    font-size: 34px;32    letter-spacing: 0.2px;33  }34  .status-left,35  .status-right {36    display: flex;37    align-items: center;38    gap: 22px;39  }40  .status-left .time { font-weight: 600; color: #3d3d3d; }41  .status-center { flex: 1; display: flex; align-items: center; gap: 16px; justify-content: center; color: #666; font-size: 28px; }42  .status-dot {43    width: 10px; height: 10px; background: #777; border-radius: 50%;44  }45 46  /* Brand header */47  .brand-header {48    position: absolute;49    top: 110px;50    left: 0;51    width: 100%;52    height: 250px;53  }54  .gold-brush {55    position: absolute;56    left: 120px;57    right: 120px;58    top: 40px;59    height: 90px;60    background: linear-gradient(90deg, #6a5325, #c6a454, #8d6b2b, #e0c372, #7b5c26);61    opacity: 0.45;62    border-radius: 90px;63    transform: skewX(-8deg);64  }65  .zara-logo {66    position: absolute;67    left: 0; right: 0;68    bottom: 10px;69    text-align: center;70    font-family: "Times New Roman", Georgia, serif;71    font-size: 170px;72    font-weight: 700;73    letter-spacing: -6px;74    line-height: 1;75    color: #000;76  }77  .stores-link {78    position: absolute;79    right: 48px;80    top: 20px;81    font-size: 34px;82    letter-spacing: 2px;83    color: #111;84  }85 86  /* Hero banner */87  .hero {88    position: absolute;89    left: 0;90    right: 0;91    top: 360px;92    bottom: 260px; /* leaves room for bottom nav + gesture bar */93  }94  .hero-card {95    width: 1000px;96    height: 1600px;97    margin: 0 auto;98    background: #E0E0E0;99    border: 1px solid #BDBDBD;100    border-radius: 10px;101    box-sizing: border-box;102    display: flex;103    align-items: center;104    justify-content: center;105    color: #757575;106    font-size: 30px;107    text-align: center;108    transform: rotate(-2deg);109    position: relative;110    overflow: hidden;111  }112  .hero-label {113    position: absolute;114    left: 50%;115    bottom: 200px;116    transform: translateX(-50%);117    color: #ffffff;118    font-size: 96px;119    font-family: cursive;120    text-shadow: 0 3px 8px rgba(0,0,0,0.35);121    white-space: nowrap;122  }123 124  /* Bottom navigation */125  .bottom-nav {126    position: absolute;127    left: 0;128    right: 0;129    bottom: 100px;130    height: 160px;131    border-top: 1px solid #E5E5E5;132    background: #ffffff;133    display: flex;134    align-items: center;135    justify-content: space-around;136    box-sizing: border-box;137    padding: 0 40px;138  }139  .nav-item {140    display: flex;141    flex-direction: column;142    align-items: center;143    gap: 12px;144    color: #222;145    font-size: 28px;146  }147  .nav-center {148    font-size: 36px;149    letter-spacing: 2px;150    font-weight: 500;151  }152  .bag {153    position: relative;154  }155  .bag-badge {156    position: absolute;157    top: -6px;158    right: -6px;159    width: 34px;160    height: 34px;161    border: 1px solid #222;162    border-radius: 6px;163    display: flex;164    align-items: center;165    justify-content: center;166    font-size: 22px;167    color: #222;168    background: #fff;169  }170 171  /* Gesture pill */172  .gesture-pill {173    position: absolute;174    left: 50%;175    bottom: 26px;176    transform: translateX(-50%);177    width: 230px;178    height: 12px;179    background: #BDBDBD;180    border-radius: 8px;181  }182 183  /* Simple SVG styling */184  svg { display: block; }185</style>186</head>187<body>188<div id="render-target">189 190  <!-- Status bar -->191  <div class="status-bar">192    <div class="status-left">193      <div class="time">8:13</div>194    </div>195    <div class="status-center">196      <span>B</span><span>N</span><span>M</span><span>M</span><span class="status-dot"></span>197    </div>198    <div class="status-right">199      <!-- Wi‑Fi -->200      <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#555" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">201        <path d="M3 8.5c5.5-4.7 12.5-4.7 18 0"></path>202        <path d="M6.5 12c3.8-3.2 7.2-3.2 10.9 0"></path>203        <path d="M10.5 15.5c1.6-1.3 3.4-1.3 5 0"></path>204        <circle cx="12" cy="18.5" r="1.2" fill="#555" stroke="none"></circle>205      </svg>206      <!-- Battery -->207      <svg viewBox="0 0 28 18" width="42" height="26" fill="none" stroke="#555" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">208        <rect x="1" y="3" width="22" height="12" rx="2"></rect>209        <rect x="3" y="5" width="18" height="8" fill="#555" stroke="none"></rect>210        <rect x="24" y="6" width="3" height="6" rx="1"></rect>211      </svg>212    </div>213  </div>214 215  <!-- Brand header -->216  <div class="brand-header">217    <div class="gold-brush"></div>218    <div class="zara-logo">ZARA</div>219    <div class="stores-link">STORES</div>220  </div>221 222  <!-- Hero banner -->223  <div class="hero">224    <div class="hero-card">225      <div>[IMG: Outdoor fashion banner — person standing on balcony among trees]</div>226      <div class="hero-label">Massimo Dutti</div>227    </div>228  </div>229 230  <!-- Bottom navigation -->231  <div class="bottom-nav">232    <div class="nav-item">233      <svg viewBox="0 0 24 24" width="46" height="46" fill="none" stroke="#222" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">234        <path d="M3 10.5l9-7 9 7"></path>235        <path d="M5.5 10.5V20h13V10.5"></path>236        <path d="M9.5 20V14h5v6"></path>237      </svg>238    </div>239    <div class="nav-item">240      <svg viewBox="0 0 24 24" width="46" height="46" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">241        <circle cx="11" cy="11" r="6"></circle>242        <path d="M20 20l-4.5-4.5"></path>243      </svg>244    </div>245    <div class="nav-item nav-center">MENU</div>246    <div class="nav-item">247      <svg viewBox="0 0 24 24" width="46" height="46" fill="none" stroke="#222" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">248        <circle cx="12" cy="8" r="3.5"></circle>249        <path d="M4.5 20c1.8-3.6 5.1-5 7.5-5s5.7 1.4 7.5 5"></path>250      </svg>251    </div>252    <div class="nav-item bag">253      <svg viewBox="0 0 24 24" width="46" height="46" fill="none" stroke="#222" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">254        <path d="M6 8h12l-1 12H7L6 8z"></path>255        <path d="M9 8V6.5a3 3 0 0 1 6 0V8"></path>256      </svg>257      <div class="bag-badge">0</div>258    </div>259  </div>260 261  <!-- Gesture pill -->262  <div class="gesture-pill"></div>263 264</div>265</body>266</html>