GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Donald Duck Listing</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#ffffff;11    border-radius:20px;12  }13  /* Header */14  .app-header {15    position:absolute; left:0; top:0; width:100%;16    background:#1d4fa3; color:#fff;17    height:220px;18    box-sizing:border-box;19  }20  .status-bar {21    height:70px; display:flex; align-items:center; justify-content:space-between;22    padding:0 40px; font-size:34px; letter-spacing:0.5px;23  }24  .status-icons { display:flex; gap:22px; align-items:center; }25  .status-dot { width:12px; height:12px; background:#fff; border-radius:50%; opacity:0.9; }26  .title-row {27    position:absolute; left:0; right:0; top:70px; height:150px;28    display:flex; align-items:center; justify-content:center;29  }30  .back-btn {31    position:absolute; left:30px; top:100px; width:70px; height:70px;32    display:flex; align-items:center; justify-content:center;33  }34  .header-title { font-size:56px; font-weight:700; }35  /* Filter row */36  .controls {37    position:absolute; top:220px; left:0; right:0;38    padding:30px 30px; display:flex; justify-content:space-between; align-items:center;39    box-sizing:border-box;40    background:#fff;41  }42  .pill {43    background:#ffffff; color:#000; border-radius:22px;44    box-shadow:0 2px 6px rgba(0,0,0,0.12);45    padding:24px 28px; display:flex; align-items:center; gap:18px;46    font-size:40px; font-weight:600; border:1px solid #e5e7eb;47  }48  .pill svg { width:44px; height:44px; }49  /* Product grid */50  .content {51    position:absolute; top:340px; left:0; right:0; bottom:180px;52    padding:14px 24px 220px;53    box-sizing:border-box;54    overflow:hidden;55  }56  .grid { display:flex; flex-wrap:wrap; gap:36px 36px; }57  .card {58    width:486px;59    position:relative;60  }61  .img {62    width:100%; height:420px; background:#E0E0E0;63    border:1px solid #BDBDBD; border-radius:8px;64    display:flex; align-items:center; justify-content:center;65    color:#757575; font-size:36px; text-align:center; padding:0 18px; box-sizing:border-box;66  }67  .badge {68    position:absolute; left:18px; top:8px;69    background:#d83b41; color:#fff; padding:14px 22px; font-size:36px; font-weight:700;70    border-radius:14px;71  }72  .title {73    margin-top:18px; font-size:40px; line-height:1.2; color:#111; font-weight:700;74  }75  .subtitle { font-size:36px; line-height:1.25; color:#333; }76  .price-row { margin-top:10px; display:flex; align-items:flex-end; gap:16px; }77  .old { font-size:34px; color:#6b7280; text-decoration:line-through; }78  .price { font-size:46px; color:#e46a2c; font-weight:800; }79  .black-price { font-size:46px; color:#000; font-weight:800; }80  /* Bottom navigation */81  .bottom-nav {82    position:absolute; left:0; right:0; bottom:0; height:180px;83    background:#1d4fa3; display:flex; align-items:center; justify-content:space-around;84    padding:0 40px; box-sizing:border-box;85    color:#fff;86  }87  .nav-item { width:120px; height:120px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }88  .nav-item svg { width:66px; height:66px; fill:none; stroke:#fff; stroke-width:4; }89</style>90</head>91<body>92<div id="render-target">93  <!-- Header -->94  <div class="app-header">95    <div class="status-bar">96      <div>8:17</div>97      <div class="status-icons">98        <!-- mock app status icons -->99        <svg viewBox="0 0 24 24" width="32" height="32" fill="#fff"><circle cx="12" cy="12" r="9"/></svg>100        <svg viewBox="0 0 24 24" width="32" height="32" fill="#fff"><rect x="3" y="5" width="18" height="14" rx="3"/></svg>101        <div class="status-dot"></div>102        <svg viewBox="0 0 24 24" width="32" height="32" fill="#fff"><path d="M3 19h18v2H3zM4 17h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H4a3 3 0 0 0-3 3v7a3 3 0 0 0 3 3z"/></svg>103        <svg viewBox="0 0 24 24" width="32" height="32" fill="#fff"><path d="M7 20h10c.6 0 1-.4 1-1V7c0-.6-.4-1-1-1H7c-.6 0-1 .4-1 1v12c0 .6.4 1 1 1z"/><path d="M16 3h2v3h-2z" fill="#fff"/></svg>104      </div>105    </div>106    <div class="title-row">107      <div class="back-btn">108        <svg viewBox="0 0 24 24" width="52" height="52" fill="#fff">109          <path d="M15.5 19L8 12l7.5-7" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>110        </svg>111      </div>112      <div class="header-title">Donald duck</div>113    </div>114  </div>115 116  <!-- Controls -->117  <div class="controls">118    <div class="pill">119      <span>Filter by</span>120      <svg viewBox="0 0 24 24">121        <path d="M3 5h18M7 12h10M10 19h4" stroke="#1d4fa3" stroke-width="2" fill="none" stroke-linecap="round"/>122      </svg>123    </div>124    <div class="pill">125      <span>Sort by</span>126      <svg viewBox="0 0 24 24">127        <path d="M6 5v14M6 5l-3 3M6 5l3 3M14 5h7M12 12h9M10 19h11" stroke="#1d4fa3" stroke-width="2" fill="none" stroke-linecap="round"/>128      </svg>129    </div>130  </div>131 132  <!-- Content -->133  <div class="content">134    <div class="grid">135      <!-- Card 1 -->136      <div class="card">137        <div class="badge">16% off</div>138        <div class="img">[IMG: LEGO BrickHeadz Donald Duck figure]</div>139        <div class="title">LEGO Disney BrickHeadz</div>140        <div class="subtitle">Donald Duck (90 Pieces)</div>141        <div class="price-row">142          <div class="old">82.8 AED</div>143        </div>144        <div class="price">69 AED</div>145      </div>146 147      <!-- Card 2 -->148      <div class="card">149        <div class="img">[IMG: Hauck Swift X Canopy - Donald Duck pattern]</div>150        <div class="title">Hauck - Stroller Accessory -</div>151        <div class="subtitle">Swift X Canopy - Donald Duck</div>152        <div class="black-price">249 AED</div>153      </div>154 155      <!-- Card 3 -->156      <div class="card">157        <div class="img">[IMG: LEGO Disney Mickey Mouse & Donald Duck Farm set]</div>158        <div class="title">LEGO Disney Mickey Mouse</div>159        <div class="subtitle">Donald Duck Farm (118 Pieces)</div>160        <div class="black-price">149 AED</div>161      </div>162 163      <!-- Card 4 -->164      <div class="card">165        <div class="badge" style="left:28px; top:-12px;">32% off</div>166        <div class="img">[IMG: LEGO Disney Mickey and Friends Castle Defenders set]</div>167        <div class="title">LEGO Disney Mickey and</div>168        <div class="subtitle">Friends Castle Defenders (215)</div>169        <div class="price-row">170          <div class="old">235 AED</div>171        </div>172        <div class="price">159 AED</div>173      </div>174 175      <!-- Partial next item (bottom-left thumbnail) -->176      <div class="card">177        <div class="img" style="height:260px;">[IMG: Disney Puzzle Box (104 pcs)]</div>178      </div>179    </div>180  </div>181 182  <!-- Bottom Navigation -->183  <div class="bottom-nav">184    <div class="nav-item">185      <svg viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v10H3z"/><path d="M9 21v-6h6v6" stroke="#fff"/></svg>186    </div>187    <div class="nav-item">188      <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"/><path d="M20 20l-4.5-4.5" stroke="#fff"/></svg>189    </div>190    <div class="nav-item">191      <svg viewBox="0 0 24 24"><path d="M7 7h14v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2z"/><path d="M7 7V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2" stroke="#fff"/></svg>192    </div>193    <div class="nav-item">194      <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.35-7-10a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 19 11c0 5.65-7 10-7 10z" stroke="#fff"/></svg>195    </div>196    <div class="nav-item">197      <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 22c1.5-4 5-6 8-6s6.5 2 8 6" stroke="#fff"/></svg>198    </div>199  </div>200</div>201</body>202</html>