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>Dolls & doll play</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #ffffff;12  }13  /* Top App Bar */14  .app-bar {15    position: absolute; top: 0; left: 0; width: 100%; height: 220px;16    background: #1E56A6; color: #fff;17  }18  .app-bar .inner {19    position: absolute; bottom: 0; left: 0; right: 0; height: 140px;20    display: flex; align-items: center; justify-content: center;21  }22  .back-btn {23    position: absolute; left: 30px; bottom: 40px; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;24  }25  .app-title {26    font-size: 60px; font-weight: 700; letter-spacing: 0.2px;27  }28  /* Controls row */29  .controls {30    position: absolute; top: 220px; left: 0; right: 0; height: 150px;31    background: #fff; display: flex; align-items: center; justify-content: space-between;32    padding: 0 40px; box-sizing: border-box;33  }34  .control-btn {35    display: flex; align-items: center; gap: 24px;36    background: #fff; border: 2px solid #DADADA; border-radius: 24px;37    height: 96px; padding: 0 36px; font-size: 40px; color: #333;38    box-shadow: 0 2px 0 rgba(0,0,0,0.06);39  }40  .control-btn svg { width: 48px; height: 48px; }41  /* Product grid */42  .content {43    position: absolute; top: 370px; left: 0; right: 0; bottom: 250px;44    padding: 0 36px; box-sizing: border-box; overflow: hidden;45  }46  .grid {47    display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 36px;48  }49  .product-card { }50  .product-img {51    position: relative; width: 100%; height: 380px;52    background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center;53    color: #757575; font-size: 34px; text-align: center; padding: 20px; box-sizing: border-box;54  }55  .ribbon {56    position: absolute; left: 0; bottom: 0; width: 100%; height: 56px;57    background: #62D2C4; color: #fff; display: flex; align-items: center; justify-content: center;58    font-weight: 700; font-size: 34px;59  }60  .badge {61    position: absolute; left: 20px; top: 20px;62    background: #E53935; color: #fff; border-radius: 14px; padding: 12px 20px; font-size: 32px; font-weight: 700;63    box-shadow: 0 2px 0 rgba(0,0,0,0.08);64  }65  .title {66    margin-top: 22px; font-size: 40px; line-height: 1.2; color: #000;67  }68  .price {69    margin-top: 12px; font-size: 58px; font-weight: 800; color: #000;70  }71  .currency { font-weight: 900; letter-spacing: 0.5px; }72  /* Bottom nav */73  .home-indicator {74    position: absolute; bottom: 210px; left: 50%; transform: translateX(-50%);75    width: 360px; height: 16px; background: #D6D6D6; border-radius: 8px;76  }77  .bottom-nav {78    position: absolute; bottom: 0; left: 0; width: 100%; height: 210px;79    background: #1E56A6; display: flex; align-items: center; justify-content: space-around;80  }81  .nav-item { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; }82  .nav-item svg { width: 72px; height: 72px; }83  .accent { stroke: #FFD54F; fill: none; }84  .nav-icon { stroke: #ffffff; fill: none; opacity: 0.95; }85  .nav-fill { fill: #ffffff; }86</style>87</head>88<body>89<div id="render-target">90  <!-- Top Bar -->91  <div class="app-bar">92    <div class="inner">93      <div class="back-btn" aria-label="Back">94        <svg viewBox="0 0 24 24">95          <path d="M15 6l-6 6 6 6" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>96        </svg>97      </div>98      <div class="app-title">Dolls & doll play</div>99    </div>100  </div>101 102  <!-- Controls -->103  <div class="controls">104    <div class="control-btn">105      <span>Filter by</span>106      <svg viewBox="0 0 24 24">107        <path d="M4 6h16M8 12h8M10 18h4" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>108      </svg>109    </div>110    <div class="control-btn">111      <span>Sort by</span>112      <svg viewBox="0 0 24 24">113        <path d="M6 18h12M6 12h8M6 6h4" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>114        <path d="M15 5l3 3 3-3" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>115      </svg>116    </div>117  </div>118 119  <!-- Content -->120  <div class="content">121    <div class="grid">122      <!-- Product 1 -->123      <div class="product-card">124        <div class="product-img">125          <div>[IMG: Barbie Dream House Dollhouse with Pool]</div>126        </div>127        <div class="title">Barbie Dream House Dollhouse with Pool (75 Pieces)</div>128        <div class="price">2,149 <span class="currency">AED</span></div>129      </div>130 131      <!-- Product 2 -->132      <div class="product-card">133        <div class="product-img">134          <div>[IMG: Barbie Dining Set & Kitten Pet Room Playset]</div>135          <div class="ribbon">New In</div>136        </div>137        <div class="title">Barbie Dining Set & Kitten Pet Room Playset</div>138        <div class="price">449 <span class="currency">AED</span></div>139      </div>140 141      <!-- Product 3 -->142      <div class="product-card">143        <div class="product-img">144          <div class="badge">20% off</div>145          <div>[IMG: Barbie Dream Bedroom Playset with Doll]</div>146          <div class="ribbon">New In</div>147        </div>148        <div class="title">Barbie Dream Bedroom Playset with Doll</div>149        <div class="price">279 <span class="currency">AED</span></div>150      </div>151 152      <!-- Product 4 -->153      <div class="product-card">154        <div class="product-img">155          <div>[IMG: Barbie Confetti Bathtub Playset]</div>156        </div>157        <div class="title">Barbie Confetti Bathtub Playset</div>158        <div class="price">215 <span class="currency">AED</span></div>159      </div>160    </div>161  </div>162 163  <!-- Home indicator -->164  <div class="home-indicator"></div>165 166  <!-- Bottom Navigation -->167  <div class="bottom-nav">168    <div class="nav-item" aria-label="Home">169      <svg viewBox="0 0 24 24">170        <path class="accent" d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1v-5H9v5a1 1 0 0 1-1 1H3z" stroke-width="2" stroke-linejoin="round"/>171      </svg>172    </div>173    <div class="nav-item" aria-label="Search">174      <svg viewBox="0 0 24 24">175        <circle class="nav-icon" cx="11" cy="11" r="7" stroke-width="2"/>176        <path class="nav-icon" d="M20 20l-4-4" stroke-width="2" stroke-linecap="round"/>177      </svg>178    </div>179    <div class="nav-item" aria-label="Bag">180      <svg viewBox="0 0 24 24">181        <path class="nav-icon" d="M6 8h12l-1 12H7L6 8z" stroke-width="2" stroke-linejoin="round"/>182        <path class="nav-icon" d="M9 8V6a3 3 0 0 1 6 0v2" stroke-width="2"/>183      </svg>184    </div>185    <div class="nav-item" aria-label="Favorites">186      <svg viewBox="0 0 24 24">187        <path class="nav-icon" d="M12 20s-7-4.35-7-9a4.5 4.5 0 0 1 8-2.7A4.5 4.5 0 0 1 19 11c0 4.65-7 9-7 9z" stroke-width="2" stroke-linejoin="round"/>188      </svg>189    </div>190    <div class="nav-item" aria-label="Account">191      <svg viewBox="0 0 24 24">192        <circle class="nav-icon" cx="12" cy="8" r="4" stroke-width="2"/>193        <path class="nav-icon" d="M4 20a8 8 0 0 1 16 0" stroke-width="2" stroke-linecap="round"/>194      </svg>195    </div>196  </div>197</div>198</body>199</html>