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>Mobile UI Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: "Roboto", Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #ffffff;20  }21 22  /* Global helpers */23  .row { display: flex; align-items: center; }24  .spacer { flex: 1; }25  .screen-padding { padding: 0 40px; }26 27  /* Status bar */28  .status-bar {29    height: 120px;30    padding: 32px 40px 0 40px;31    color: #1f1f1f;32    font-weight: 600;33    font-size: 40px;34  }35  .status-right { gap: 28px; }36  .mini-icon { width: 44px; height: 44px; }37 38  /* Search / header */39  .header {40    padding: 10px 40px 24px 40px;41  }42  .back-btn {43    width: 80px;44    height: 80px;45    display: flex;46    align-items: center;47    justify-content: center;48    margin-right: 20px;49  }50  .search-wrap {51    flex: 1;52    height: 96px;53    background: #f1f3f4;54    border-radius: 24px;55    box-shadow: 0 1px 0 rgba(0,0,0,0.08);56    padding: 0 28px;57  }58  .search-input {59    color: #80868b;60    font-size: 36px;61  }62  .cart-area {63    margin-left: 24px;64    position: relative;65    width: 80px;66    height: 80px;67    display: flex; align-items: center; justify-content: center;68  }69  .badge {70    position: absolute;71    right: -2px;72    top: -2px;73    width: 44px;74    height: 44px;75    background: #e53935;76    color: #fff;77    border-radius: 50%;78    font-size: 28px;79    display: flex; align-items: center; justify-content: center;80    box-shadow: 0 2px 6px rgba(0,0,0,0.2);81  }82 83  /* Big product image placeholder */84  .hero {85    margin: 8px 40px 0 40px;86    height: 920px;87    background: #E0E0E0;88    border: 1px solid #BDBDBD;89    border-radius: 12px;90    display: flex;91    align-items: center;92    justify-content: center;93    color: #757575;94    font-size: 40px;95    text-align: center;96  }97 98  /* Spacer to mimic white area */99  .white-gap {100    height: 180px;101  }102 103  /* Promo card */104  .promo-card {105    margin: 0 40px;106    background: #f5f6f7;107    border-radius: 40px;108    padding: 60px 60px 40px 60px;109    position: relative;110  }111  .promo-title {112    font-size: 54px;113    font-weight: 700;114    color: #333;115    line-height: 1.2;116  }117  .promo-img {118    margin-top: 40px;119    height: 280px;120    background: #E0E0E0;121    border: 1px solid #BDBDBD;122    border-radius: 18px;123    display: flex;124    align-items: center;125    justify-content: center;126    color: #757575;127    font-size: 34px;128  }129  .brand-sticker {130    position: absolute;131    right: -20px;132    bottom: -40px;133    width: 140px;134    height: 140px;135    background: #E0E0E0;136    border: 1px solid #BDBDBD;137    border-radius: 50%;138    display: flex;139    align-items: center; justify-content: center;140    color: #757575;141    font-size: 26px;142    box-shadow: 0 8px 24px rgba(0,0,0,0.16);143  }144 145  /* Bottom action bar */146  .bottom-bar {147    position: absolute;148    left: 0; right: 0; bottom: 100px;149    padding: 0 32px;150  }151  .bar-inner {152    background: #fff;153    border-top-left-radius: 26px;154    border-top-right-radius: 26px;155    box-shadow: 0 -6px 18px rgba(0,0,0,0.08);156    padding: 24px;157  }158  .cta-row { display: flex; gap: 20px; }159 160  .cta {161    height: 120px;162    border-radius: 18px;163    display: flex; align-items: center; justify-content: center;164    font-size: 40px;165    font-weight: 600;166    color: #333;167    border: 2px solid #e0e0e0;168    background: #fff;169  }170  .cta.cart {171    width: 220px;172    gap: 16px;173  }174  .cta.emi {175    flex: 1;176  }177  .cta.buy {178    width: 360px;179    background: #ffcf33;180    border: 0;181    color: #1f1f1f;182  }183 184  /* Gesture bar */185  .gesture {186    position: absolute;187    bottom: 28px;188    left: 50%;189    transform: translateX(-50%);190    width: 360px;191    height: 16px;192    background: #dcdcdc;193    border-radius: 12px;194  }195</style>196</head>197<body>198<div id="render-target">199 200  <!-- Status bar -->201  <div class="status-bar row">202    <div>10:35</div>203    <div style="width: 18px;"></div>204    <div class="mini-icon" style="border-radius:50%; background:#eee;"></div>205    <div class="spacer"></div>206    <div class="row status-right">207      <!-- WiFi icon -->208      <svg class="mini-icon" viewBox="0 0 24 24">209        <path d="M12 18.5c.9 0 1.5.7 1.5 1.5S12.9 21.5 12 21.5 10.5 20.8 10.5 20s.6-1.5 1.5-1.5z" fill="#444"/>210        <path d="M3 10c5.7-4.8 12.3-4.8 18 0" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>211        <path d="M6 13.5c3.9-3.3 8.1-3.3 12 0" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>212        <path d="M9 17c2.3-1.9 4.7-1.9 7 0" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>213      </svg>214      <!-- Battery icon -->215      <svg class="mini-icon" viewBox="0 0 24 24">216        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#444" stroke-width="2"/>217        <rect x="21" y="10" width="2" height="4" fill="#444"/>218        <rect x="4" y="8" width="12" height="8" fill="#444"/>219      </svg>220    </div>221  </div>222 223  <!-- Header with back, search, mic, cart -->224  <div class="header row">225    <div class="back-btn">226      <svg width="48" height="48" viewBox="0 0 24 24">227        <path d="M15 5l-7 7 7 7" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>228      </svg>229    </div>230    <div class="search-wrap row">231      <!-- magnifier icon -->232      <svg width="44" height="44" viewBox="0 0 24 24">233        <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/>234        <path d="M20 20l-4.2-4.2" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>235      </svg>236      <div class="search-input">Search for products</div>237      <div class="spacer"></div>238      <!-- mic icon -->239      <svg width="44" height="44" viewBox="0 0 24 24">240        <rect x="9" y="4" width="6" height="10" rx="3" fill="#777"/>241        <path d="M5 10c0 4 3 7 7 7s7-3 7-7" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>242        <path d="M12 17v4" stroke="#777" stroke-width="2" stroke-linecap="round"/>243      </svg>244    </div>245    <div class="cart-area">246      <!-- cart icon -->247      <svg width="48" height="48" viewBox="0 0 24 24">248        <path d="M3 5h3l2 10h9l2-7H7" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>249        <circle cx="10" cy="20" r="2" fill="#222"/>250        <circle cx="18" cy="20" r="2" fill="#222"/>251      </svg>252      <div class="badge">1</div>253    </div>254  </div>255 256  <!-- Hero product image -->257  <div class="hero">[IMG: Close-up of pink smartphone camera with large "15" backdrop]</div>258 259  <div class="white-gap"></div>260 261  <!-- Promo card with text and image -->262  <div class="promo-card">263    <div class="promo-title">Dynamic Island<br/>stays on top of it all.</div>264    <div class="promo-img">[IMG: Phone feature illustration]</div>265    <div class="brand-sticker">[IMG: Brand badge]</div>266  </div>267 268  <!-- Bottom action bar -->269  <div class="bottom-bar">270    <div class="bar-inner">271      <div class="cta-row">272        <div class="cta cart">273          <svg width="48" height="48" viewBox="0 0 24 24" style="margin-right:6px;">274            <path d="M3 5h3l2 10h9l2-7H7" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>275            <circle cx="10" cy="20" r="2" fill="#222"/>276            <circle cx="18" cy="20" r="2" fill="#222"/>277          </svg>278          <svg width="32" height="32" viewBox="0 0 24 24">279            <path d="M12 5v14M5 12h14" stroke="#222" stroke-width="2" stroke-linecap="round"/>280          </svg>281        </div>282        <div class="cta emi">Pay with EMI</div>283        <div class="cta buy">Buy now</div>284      </div>285    </div>286  </div>287 288  <!-- Gesture bar -->289  <div class="gesture"></div>290</div>291</body>292</html>