GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>YalaToys - Category</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Inter", Arial, Helvetica, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #F6F7FC;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 18px;20    left: 36px;21    right: 36px;22    height: 60px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #1d1d1f;27    font-weight: 600;28    font-size: 40px;29    letter-spacing: 0.5px;30  }31  .status-icons {32    display: flex;33    align-items: center;34    gap: 18px;35  }36  .status-dot {37    width: 12px; height: 12px; background: #3C3C3C; border-radius: 50%;38  }39  .icon-small { width: 34px; height: 34px; }40 41  /* Logo row */42  .logo-row {43    position: absolute;44    top: 100px;45    left: 0;46    right: 0;47    height: 120px;48    display: flex;49    align-items: center;50    justify-content: center;51    pointer-events: none;52  }53  .logo-text {54    font-size: 92px;55    font-weight: 800;56    letter-spacing: 1px;57    display: flex;58    align-items: baseline;59    gap: 6px;60    pointer-events: auto;61  }62  .logo-text span { display: inline-block; }63  .c1 { color: #4A90E2; } /* y */64  .c2 { color: #8BC34A; } /* a */65  .c3 { color: #8E44AD; } /* l */66  .c4 { color: #F5A623; } /* a */67  .c5 { color: #7E57C2; } /* t */68  .c6 { color: #4FC3F7; } /* o */69  .c7 { color: #7CB342; } /* y */70  .c8 { color: #F06292; } /* s */71 72  /* Top right action buttons */73  .top-actions {74    position: absolute;75    top: 168px;76    right: 36px;77    display: flex;78    gap: 30px;79  }80  .action-btn {81    width: 112px;82    height: 112px;83    border-radius: 32px;84    display: flex;85    align-items: center;86    justify-content: center;87    box-shadow: 0 6px 14px rgba(0,0,0,0.08);88  }89  .btn-green { background: #82D36B; }90  .btn-purple { background: #6C5CE7; }91 92  /* Search bar */93  .search-wrapper {94    position: absolute;95    top: 250px;96    left: 36px;97    right: 36px;98    height: 120px;99    background: #FFFFFF;100    border-radius: 32px;101    border: 1px solid #E5E7EB;102    display: flex;103    align-items: center;104    padding: 0 32px;105    box-shadow: 0 8px 18px rgba(41,41,41,0.03);106  }107  .search-input {108    margin-left: 20px;109    font-size: 46px;110    color: #4B5563;111  }112 113  /* Content area */114  .content {115    position: absolute;116    top: 420px;117    left: 0;118    right: 0;119    bottom: 220px;120    padding: 0 36px;121    overflow: hidden;122  }123 124  /* Product card */125  .product-card {126    width: 720px;127    background: #FFFFFF;128    border-radius: 32px;129    box-shadow: 0 12px 22px rgba(0,0,0,0.06);130    border: 1px solid #ECECEC;131  }132  .product-image {133    position: relative;134    width: 100%;135    height: 560px;136    border-radius: 28px 28px 0 0;137    overflow: hidden;138  }139  .product-image .img-ph {140    width: 100%;141    height: 100%;142    background: linear-gradient(135deg, #F5D08E 0%, #F28B5E 100%);143    border-bottom: 1px solid #E0E0E0;144    display: flex;145    align-items: center;146    justify-content: center;147    color: rgba(0,0,0,0.55);148    font-weight: 700;149    font-size: 36px;150    text-align: center;151    padding: 0 26px;152  }153  .fav-badge {154    position: absolute;155    top: 22px;156    right: 22px;157    width: 120px;158    height: 120px;159    background: #FFFFFF;160    border-radius: 28px;161    box-shadow: 0 8px 16px rgba(0,0,0,0.08);162    display: flex;163    align-items: center;164    justify-content: center;165    border: 1px solid #EEE;166  }167  .product-info {168    padding: 30px 28px 36px 28px;169  }170  .product-title {171    font-size: 48px;172    line-height: 1.2;173    color: #1F2937;174    font-weight: 700;175    margin-bottom: 18px;176  }177  .product-price {178    color: #6C5CE7;179    font-size: 46px;180    font-weight: 800;181  }182 183  /* Bottom navigation */184  .bottom-nav {185    position: absolute;186    left: 0;187    right: 0;188    bottom: 0;189    height: 210px;190    background: #6C5CE7;191    border-top-left-radius: 46px;192    border-top-right-radius: 46px;193    box-shadow: 0 -8px 22px rgba(0,0,0,0.12);194  }195  .nav-items {196    position: absolute;197    bottom: 36px;198    left: 60px;199    right: 60px;200    display: flex;201    align-items: center;202    justify-content: space-between;203    color: #FFFFFF;204  }205  .nav-item {206    width: 160px;207    text-align: center;208    color: #FFFFFF;209    font-size: 40px;210  }211  .nav-item .label { margin-top: 10px; font-weight: 700; }212  .nav-item.active { color: #FFE066; }213 214  /* Floating category button */215  .fab {216    position: absolute;217    left: 50%;218    transform: translateX(-50%);219    bottom: 160px;220    width: 186px;221    height: 186px;222    background: #FFD23F;223    border-radius: 50%;224    box-shadow: 0 18px 32px rgba(0,0,0,0.22);225    border: 6px solid #F7F0C8;226    display: flex;227    align-items: center;228    justify-content: center;229  }230  .fab-inner {231    width: 118px;232    height: 118px;233    background: #FFDB5A;234    border-radius: 28px;235    display: grid;236    grid-template-columns: repeat(2, 1fr);237    gap: 18px;238    padding: 18px;239  }240  .grid-dot {241    background: #6C5CE7;242    border-radius: 18px;243  }244 245  /* Helpers: simple icon wrappers */246  .ico { display: inline-flex; align-items: center; justify-content: center; }247  .ico svg { display: block; }248</style>249</head>250<body>251<div id="render-target">252 253  <!-- Status Bar -->254  <div class="status-bar">255    <div>8:21</div>256    <div class="status-icons">257      <div class="status-dot"></div>258      <div class="ico icon-small" title="WiFi">259        <svg width="34" height="34" viewBox="0 0 24 24" fill="#333"><path d="M12 20.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM3.1 9.8a13 13 0 0 1 17.8 0l-1.9 2a10 10 0 0 0-14 0l-1.9-2zm3.7 4.1a8 8 0 0 1 10.4 0l-2 2a5.5 5.5 0 0 0-6.4 0l-2-2z"/></svg>260      </div>261      <div class="ico icon-small" title="Battery">262        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2"><rect x="2" y="7" width="18" height="10" rx="2"/><path d="M22 10v4"/></svg>263      </div>264    </div>265  </div>266 267  <!-- Logo -->268  <div class="logo-row">269    <div class="logo-text" aria-label="yalatoys logo">270      <span class="c1">y</span><span class="c2">a</span><span class="c3">l</span><span class="c4">a</span>271      <span class="c5">t</span><span class="c6">o</span><span class="c7">y</span><span class="c8">s</span>272    </div>273  </div>274 275  <!-- Top right action buttons -->276  <div class="top-actions">277    <div class="action-btn btn-green" title="Filter">278      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round">279        <path d="M4 7h12"/>280        <circle cx="18" cy="7" r="2.2" fill="#fff"/>281        <path d="M4 12h8"/>282        <circle cx="14" cy="12" r="2.2" fill="#fff"/>283        <path d="M4 17h6"/>284        <circle cx="12" cy="17" r="2.2" fill="#fff"/>285      </svg>286    </div>287    <div class="action-btn btn-purple" title="Notifications">288      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round">289        <path d="M12 22a2.5 2.5 0 0 0 2.5-2.5h-5A2.5 2.5 0 0 0 12 22z"/>290        <path d="M18 16V11a6 6 0 1 0-12 0v5l-2 2h16l-2-2z"/>291      </svg>292    </div>293  </div>294 295  <!-- Search Bar -->296  <div class="search-wrapper">297    <div class="ico" style="width:56px;height:56px;">298      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#6B7280" stroke-width="2.2">299        <circle cx="11" cy="11" r="7"/>300        <path d="M20 20l-3.5-3.5"/>301      </svg>302    </div>303    <div class="search-input">Bicycles</div>304  </div>305 306  <!-- Content -->307  <div class="content">308    <div class="product-card">309      <div class="product-image">310        <div class="img-ph">[IMG: Playground Bundle Value Set with bicycle and trampoline]</div>311        <div class="fav-badge">312          <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#6C5CE7" stroke-width="2.2">313            <path d="M12 21s-7-4.4-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 11c0 5.6-7 10-7 10z"/>314          </svg>315        </div>316      </div>317      <div class="product-info">318        <div class="product-title">Playground Bundle Value<br/>Set</div>319        <div class="product-price">BHD 2899.000</div>320      </div>321    </div>322  </div>323 324  <!-- Floating Category Button -->325  <div class="fab" aria-label="Category">326    <div class="fab-inner">327      <div class="grid-dot"></div>328      <div class="grid-dot"></div>329      <div class="grid-dot"></div>330      <div class="grid-dot"></div>331    </div>332  </div>333 334  <!-- Bottom Navigation -->335  <div class="bottom-nav">336    <div class="nav-items">337      <div class="nav-item">338        <div class="ico" style="width:72px;height:72px;margin:0 auto;">339          <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2">340            <path d="M3 10.5L12 3l9 7.5"/>341            <path d="M5 10v9h14v-9"/>342          </svg>343        </div>344        <div class="label">Home</div>345      </div>346      <div class="nav-item">347        <div class="ico" style="width:72px;height:72px;margin:0 auto;">348          <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2">349            <path d="M20 12.5l-8.5 8.5a2 2 0 0 1-2.8 0l-4.2-4.2a2 2 0 0 1 0-2.8L13 5.5l7 7z"/>350            <circle cx="7.5" cy="16.5" r="1.2" fill="#fff"/>351          </svg>352        </div>353        <div class="label">Offers</div>354      </div>355      <div class="nav-item active">356        <div class="ico" style="width:72px;height:72px;margin:0 auto;">357          <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#FFE066" stroke-width="2.2">358            <rect x="4" y="4" width="16" height="16" rx="3"/>359            <path d="M9 4v16M4 9h16"/>360          </svg>361        </div>362        <div class="label">Category</div>363      </div>364      <div class="nav-item">365        <div class="ico" style="width:72px;height:72px;margin:0 auto;">366          <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2">367            <path d="M6 6h15l-1.5 9H7.5L6 6z"/>368            <path d="M6 6l-1-2H2"/>369            <circle cx="9" cy="20" r="1.8" fill="#fff"/>370            <circle cx="18" cy="20" r="1.8" fill="#fff"/>371          </svg>372        </div>373        <div class="label">Cart</div>374      </div>375      <div class="nav-item">376        <div class="ico" style="width:72px;height:72px;margin:0 auto;">377          <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2">378            <circle cx="12" cy="7" r="4"/>379            <path d="M4 21a8 8 0 0 1 16 0"/>380          </svg>381        </div>382        <div class="label">Account</div>383      </div>384    </div>385  </div>386 387</div>388</body>389</html>