GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>ZARA - Mobile Mock</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Arial, Helvetica, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #000;19    color: #fff;20  }21 22  /* Status bar */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    right: 0;28    height: 110px;29    padding: 0 36px;30    display: flex;31    align-items: center;32    justify-content: space-between;33    font-weight: 600;34    color: #eaeaea;35    font-size: 40px;36    box-sizing: border-box;37  }38  .status-right {39    display: flex;40    gap: 26px;41    align-items: center;42  }43  .icon {44    display: inline-flex;45    width: 44px;46    height: 44px;47    align-items: center;48    justify-content: center;49  }50 51  /* Hero/video area */52  .hero {53    position: absolute;54    top: 110px;55    left: 0;56    width: 1080px;57    bottom: 190px; /* leaves space for bottom bar */58    background: #000;59  }60  .hero-media {61    position: absolute;62    inset: 0 0 0 0;63    display: flex;64    align-items: center;65    justify-content: center;66  }67  .hero-media > .img {68    width: 1080px;69    height: 100%;70    background: #E0E0E0;71    border: 1px solid #BDBDBD;72    color: #757575;73    display: flex;74    align-items: center;75    justify-content: center;76    text-align: center;77    padding: 20px;78    box-sizing: border-box;79    font-size: 38px;80    line-height: 1.3;81  }82 83  /* ZARA wordmark overlay */84  .brand-overlay {85    position: absolute;86    top: 110px;87    left: 30px;88    right: 30px;89    height: 420px;90    pointer-events: none;91  }92  .brand-overlay .wordmark {93    font-size: 270px;94    letter-spacing: -10px;95    font-weight: 700;96    color: #fff;97    line-height: 0.8;98    mix-blend-mode: normal;99  }100 101  /* Search bar overlay */102  .search-overlay {103    position: absolute;104    left: 40px;105    right: 40px;106    bottom: 255px;107    height: 110px;108    display: flex;109    border: 2px solid rgba(255,255,255,0.85);110    border-radius: 6px;111    overflow: hidden;112    box-sizing: border-box;113    background: rgba(0,0,0,0.15);114    backdrop-filter: blur(1px);115  }116  .search-input {117    flex: 1;118    display: flex;119    align-items: center;120    padding: 0 28px;121    color: rgba(255,255,255,0.85);122    font-size: 36px;123  }124  .search-btn {125    width: 260px;126    border-left: 2px solid rgba(255,255,255,0.85);127    display: flex;128    align-items: center;129    justify-content: center;130    color: #ffffff;131    font-size: 36px;132    letter-spacing: 1px;133  }134 135  /* Mute icon */136  .mute {137    position: absolute;138    right: 38px;139    bottom: 392px;140    width: 56px;141    height: 56px;142    display: flex;143    align-items: center;144    justify-content: center;145    opacity: 0.9;146  }147 148  /* Bottom navigation */149  .bottom-bar {150    position: absolute;151    left: 0;152    right: 0;153    bottom: 0;154    height: 190px;155    background: #ffffff;156    color: #222;157    display: flex;158    border-top: 1px solid #e6e6e6;159  }160  .tab {161    flex: 1;162    display: flex;163    flex-direction: column;164    align-items: center;165    justify-content: center;166    font-size: 38px;167    letter-spacing: 1px;168  }169  .tab .underline {170    margin-top: 8px;171    width: 24px;172    height: 6px;173    background: #111;174    border-radius: 3px;175  }176  .home-indicator {177    position: absolute;178    bottom: 22px;179    left: 50%;180    transform: translateX(-50%);181    width: 340px;182    height: 10px;183    background: #9f9f9f;184    border-radius: 8px;185    opacity: 0.6;186  }187</style>188</head>189<body>190<div id="render-target">191  <!-- Status bar -->192  <div class="status-bar">193    <div class="time">11:02</div>194    <div class="status-right">195      <!-- Do not disturb / ring icon -->196      <span class="icon">197        <svg width="34" height="34" viewBox="0 0 24 24" fill="none">198          <circle cx="12" cy="12" r="8.5" stroke="#eaeaea" stroke-width="2"/>199          <rect x="5" y="11" width="14" height="2" fill="#eaeaea"/>200        </svg>201      </span>202      <!-- WiFi -->203      <span class="icon">204        <svg width="34" height="34" viewBox="0 0 24 24" fill="none">205          <path d="M2 8c5-4 15-4 20 0" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>206          <path d="M5 12c3-3 11-3 14 0" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>207          <path d="M8 16c2-2 6-2 8 0" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>208          <circle cx="12" cy="19" r="1.5" fill="#eaeaea"/>209        </svg>210      </span>211      <!-- Battery -->212      <span class="icon" style="width:60px;">213        <svg width="54" height="28" viewBox="0 0 54 28" fill="none">214          <rect x="1" y="5" width="44" height="18" rx="3" stroke="#eaeaea" stroke-width="2"/>215          <rect x="4" y="8" width="37" height="12" rx="2" fill="#eaeaea"/>216          <rect x="47" y="9" width="6" height="10" rx="2" fill="#eaeaea"/>217        </svg>218      </span>219      <span style="font-size:32px; color:#eaeaea;">100%</span>220    </div>221  </div>222 223  <!-- Hero / video -->224  <div class="hero">225    <div class="hero-media">226      <div class="img">[IMG: Fashion video still on black background with model and stylist]</div>227    </div>228  </div>229 230  <!-- Brand overlay -->231  <div class="brand-overlay">232    <div class="wordmark">ZARA</div>233  </div>234 235  <!-- Mute icon -->236  <div class="mute">237    <svg width="56" height="56" viewBox="0 0 24 24" fill="none">238      <path d="M4 10v4h4l5 4V6l-5 4H4z" stroke="#ffffff" stroke-width="2" fill="none" stroke-linejoin="round"/>239      <path d="M16 9l4 6M20 9l-4 6" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>240    </svg>241  </div>242 243  <!-- Search overlay -->244  <div class="search-overlay">245    <div class="search-input"> </div>246    <div class="search-btn">247      <svg width="36" height="36" viewBox="0 0 24 24" fill="none" style="margin-right:10px">248        <circle cx="11" cy="11" r="7" stroke="#fff" stroke-width="2"/>249        <path d="M20 20l-4.2-4.2" stroke="#fff" stroke-width="2" stroke-linecap="round"/>250      </svg>251      SEARCH252    </div>253  </div>254 255  <!-- Bottom navigation -->256  <div class="bottom-bar">257    <div class="tab">258      HOME259      <div class="underline"></div>260    </div>261    <div class="tab">MENU</div>262    <div class="tab">ACCOUNT</div>263    <div class="tab">BASKET (0)</div>264    <div class="home-indicator"></div>265  </div>266</div>267</body>268</html>