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>Toys App Mock</title>6<style>7  body{ margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target{9    position:relative;10    width:1080px;11    height:2400px;12    overflow:hidden;13    background:#ffffff;14    border-radius:0;15  }16 17  /* Top blue system bar */18  .status-bar{19    position:absolute;20    top:0; left:0; right:0;21    height:120px;22    background:#234e9b; /* deep blue */23    color:#fff;24    display:flex;25    align-items:center;26    padding:0 40px;27    box-sizing:border-box;28  }29  .status-time{30    font-weight:700;31    font-size:42px;32    letter-spacing:1px;33  }34  .status-icons{35    margin-left:auto;36    display:flex; align-items:center; gap:28px;37  }38  .status-icons svg{ width:44px; height:44px; fill:none; stroke:#ffffff; stroke-width:3; }39 40  /* Tabs / header */41  .tab-bar{42    position:absolute; top:120px; left:0; right:0;43    height:170px;44    background:#ffffff;45    display:flex; align-items:flex-end;46    padding:0 40px 30px 40px;47    box-sizing:border-box;48    gap:70px;49    border-bottom:1px solid #e6e6e6;50  }51  .tab{52    font-size:60px;53    color:#505b7a;54  }55  .tab.active{56    color:#0f3b91;57    font-weight:700;58    position:relative;59  }60  .tab.active::after{61    content:"";62    position:absolute; left:0; right:0; bottom:-22px;63    margin:auto;64    width:140px; height:14px; border-radius:8px;65    background:#0f3b91;66  }67 68  /* Offer banner */69  .offer{70    position:absolute; top:290px; left:0; right:0;71    height:120px; display:flex; align-items:center;72    padding:0 40px; box-sizing:border-box; gap:26px;73    background:#ffffff;74  }75  .offer-icon{76    width:80px; height:80px; border-radius:16px;77    background:#e9f0ff; border:1px solid #d8e2ff;78    display:flex; align-items:center; justify-content:center;79  }80  .offer-text{81    font-size:44px; color:#1a2a52;82  }83  .offer-text b{ color:#0f3b91; }84 85  /* Carousel placeholder */86  .carousel{87    position:absolute; top:410px; left:24px; right:24px;88    height:980px;89    border:1px solid #BDBDBD;90    background:#E0E0E0;91    border-radius:18px;92    display:flex; align-items:center; justify-content:center;93    text-align:center; color:#555; font-size:54px; padding:20px; box-sizing:border-box;94  }95 96  /* Dots */97  .dots{98    position:absolute; top:1408px; left:0; right:0;99    height:50px; display:flex; align-items:center; justify-content:center; gap:34px;100  }101  .dot{102    width:26px; height:26px; border-radius:50%;103    background:#c9c9c9;104  }105  .dot.active{ background:#2a9b98; }106 107  /* Feature tiles */108  .tiles{109    position:absolute; top:1510px; left:0; right:0;110    display:flex; gap:24px; padding:0 24px;111    box-sizing:border-box;112  }113  .tile{114    flex:1; background:#ffffff; border-radius:28px;115    box-shadow:0 4px 12px rgba(0,0,0,0.06);116    padding:50px 40px 40px; box-sizing:border-box;117    min-height:430px;118    display:flex; flex-direction:column; align-items:center; text-align:center;119  }120  .tile-illus{121    width:200px; height:180px; border-radius:32px;122    background:#f1eaff; display:flex; align-items:center; justify-content:center;123    margin-bottom:30px; border:1px solid #e3dafc;124  }125  .tile-illus.store{ background:#f4f8df; border-color:#e8f1bf; }126  .tile-title{127    font-size:64px; font-weight:700; color:#141b2e; line-height:1.15;128    margin-bottom:14px;129  }130  .tile-sub{ font-size:44px; color:#39405e; }131 132  /* Bottom nav */133  .bottom-nav{134    position:absolute; bottom:0; left:0; right:0;135    height:180px; background:#234e9b;136    display:flex; align-items:center; justify-content:space-around;137    padding-bottom:8px;138  }139  .nav-item{ display:flex; flex-direction:column; align-items:center; gap:12px; color:#fff; font-size:32px; }140  .nav-item svg{ width:78px; height:78px; stroke-width:6; fill:none; }141  .nav-item.active svg{ stroke:#f1d33b; }142  .nav-item.active{ color:#f1d33b; }143</style>144</head>145<body>146<div id="render-target">147 148  <!-- Status bar -->149  <div class="status-bar">150    <div class="status-time">11:13</div>151    <div class="status-icons">152      <!-- mail/bell simple dot -->153      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" fill="#ffffff"/></svg>154      <!-- location/cloud simple -->155      <svg viewBox="0 0 24 24"><path d="M4 15h16M8 10c0-3 2-5 4-5s4 2 4 5c0 3-4 8-4 8s-4-5-4-8z"/></svg>156      <!-- wifi -->157      <svg viewBox="0 0 24 24"><path d="M2 8c5-5 15-5 20 0M5 11c4-4 10-4 14 0M8 14c3-3 7-3 10 0M11 18h2"/></svg>158      <!-- battery -->159      <svg viewBox="0 0 28 24"><rect x="2" y="6" width="20" height="12" rx="2" ry="2" stroke="#fff"/><rect x="4" y="8" width="16" height="8" fill="#fff" stroke="#fff"/><rect x="22" y="9" width="4" height="6" fill="#fff" stroke="#fff"/></svg>160    </div>161  </div>162 163  <!-- Tabs -->164  <div class="tab-bar">165    <div class="tab active">Home</div>166    <div class="tab">New toys</div>167    <div class="tab">Best offers</div>168  </div>169 170  <!-- Offer banner -->171  <div class="offer">172    <div class="offer-icon">173      <svg width="48" height="48" viewBox="0 0 24 24" stroke="#0f3b91" fill="none" stroke-width="2">174        <rect x="3" y="2" width="18" height="20" rx="2"></rect>175        <rect x="7" y="5" width="10" height="1.8" fill="#0f3b91" stroke="none"></rect>176        <circle cx="12" cy="18" r="1.6" fill="#0f3b91" stroke="none"></circle>177      </svg>178    </div>179    <div class="offer-text">Use code: <b>APP10</b> & get 10% Off. T&Cs apply</div>180  </div>181 182  <!-- Carousel image placeholder -->183  <div class="carousel">[IMG: Purple promo banner – Geoffrey’s Toy Carnival, Up to 60% off, fun-filled adventures, giraffe and crayons]</div>184 185  <!-- Dots -->186  <div class="dots">187    <div class="dot active"></div>188    <div class="dot"></div>189    <div class="dot"></div>190    <div class="dot"></div>191    <div class="dot"></div>192    <div class="dot"></div>193    <div class="dot"></div>194    <div class="dot"></div>195  </div>196 197  <!-- Feature tiles -->198  <div class="tiles">199    <div class="tile">200      <div class="tile-illus">201        <!-- gift box icon -->202        <svg viewBox="0 0 24 24" width="120" height="120" stroke="#5a48d6" fill="none" stroke-width="2">203          <rect x="4" y="9" width="16" height="11" rx="2"></rect>204          <path d="M4 9h16M12 9v11M7 6c0 2 5 2 5 0s-5-2-5 0zm10 0c0 2-5 2-5 0s5-2 5 0z"/>205          <circle cx="12" cy="14" r="1.4" fill="#5a48d6" stroke="none"/>206        </svg>207      </div>208      <div class="tile-title">Find the perfect</div>209      <div class="tile-sub">Use our gift finder!</div>210    </div>211 212    <div class="tile">213      <div class="tile-illus store">214        <!-- store icon -->215        <svg viewBox="0 0 24 24" width="120" height="120" stroke="#5a7c3d" fill="none" stroke-width="2">216          <path d="M3 9l2-4h14l2 4M4 9h16v11H4z"></path>217          <path d="M8 20v-6h8v6"></path>218          <path d="M4 9c0 2 2 3 4 3s4-1 4-3c0 2 2 3 4 3s4-1 4-3"></path>219        </svg>220      </div>221      <div class="tile-title">Store Locator</div>222      <div class="tile-sub">Find the nearest store!</div>223    </div>224  </div>225 226  <!-- Bottom navigation -->227  <div class="bottom-nav">228    <div class="nav-item active">229      <svg viewBox="0 0 24 24">230        <path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z" stroke="#f1d33b"/>231      </svg>232    </div>233    <div class="nav-item">234      <svg viewBox="0 0 24 24" stroke="#ffffff">235        <circle cx="11" cy="11" r="7"></circle>236        <path d="M20 20l-4-4"></path>237      </svg>238    </div>239    <div class="nav-item">240      <svg viewBox="0 0 24 24" stroke="#ffffff">241        <path d="M6 7h12l-1 12H7L6 7z"></path>242        <path d="M9 7V5a3 3 0 0 1 6 0v2"></path>243      </svg>244    </div>245    <div class="nav-item">246      <svg viewBox="0 0 24 24" stroke="#ffffff">247        <path d="M12 21s-7-5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5-7 10-7 10z"></path>248      </svg>249    </div>250    <div class="nav-item">251      <svg viewBox="0 0 24 24" stroke="#ffffff">252        <circle cx="12" cy="8" r="4"></circle>253        <path d="M4 22c0-4 4-7 8-7s8 3 8 7"></path>254      </svg>255    </div>256  </div>257 258</div>259</body>260</html>