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>IKEA Categories Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color:#1a1a1a; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16  /* Header */17  .topbar {18    height: 140px;19    padding: 0 40px;20    display: flex;21    align-items: center;22    justify-content: space-between;23  }24  .icon-btn {25    width: 56px;26    height: 56px;27  }28  .icon {29    width: 56px;30    height: 56px;31    stroke: #222;32    fill: none;33    stroke-width: 3.5;34  }35 36  /* Grid */37  .content {38    padding: 0 32px 220px; /* leave space for bottom bar */39  }40  .grid {41    display: grid;42    grid-template-columns: 1fr 1fr;43    grid-gap: 32px;44  }45 46  .tile-simple {47    background: #f1f1f1;48    border-radius: 10px;49    height: 200px;50    display: flex;51    align-items: center;52    padding-left: 36px;53    font-size: 44px;54    font-weight: 500;55  }56 57  .card {58    border-radius: 10px;59    overflow: hidden;60    background: transparent;61  }62  .card .img {63    height: 440px;64    background: #E0E0E0;65    border: 1px solid #BDBDBD;66    display: flex;67    justify-content: center;68    align-items: center;69    color: #757575;70    font-size: 32px;71    text-align: center;72  }73  .card .label {74    background: #f1f1f1;75    padding: 34px 30px;76    font-size: 42px;77    line-height: 1.2;78  }79 80  /* Bottom nav */81  .bottom-nav {82    position: absolute;83    bottom: 0;84    left: 0;85    width: 100%;86    height: 180px;87    border-top: 1px solid #e7e7e7;88    background: #ffffff;89    display: flex;90    align-items: center;91    justify-content: space-around;92    padding: 0 40px;93  }94  .bottom-item {95    display: flex;96    flex-direction: column;97    align-items: center;98    color: #4a4a4a;99    font-size: 28px;100    gap: 16px;101  }102  .nav-icon {103    width: 56px;104    height: 56px;105    stroke: #222;106    fill: none;107    stroke-width: 3.5;108  }109</style>110</head>111<body>112<div id="render-target">113  <!-- Header with profile and notifications -->114  <div class="topbar">115    <svg class="icon" viewBox="0 0 24 24" aria-label="Profile icon">116      <circle cx="12" cy="8" r="4"></circle>117      <path d="M4 20c0-4.418 3.582-6 8-6s8 1.582 8 6"></path>118    </svg>119    <svg class="icon" viewBox="0 0 24 24" aria-label="Bell icon">120      <path d="M18 9a6 6 0 10-12 0c0 6-2 7-2 7h16s-2-1-2-7"></path>121      <path d="M10 20a2 2 0 004 0"></path>122    </svg>123  </div>124 125  <!-- Content grid -->126  <div class="content">127    <div class="grid">128      <!-- Top simple tiles -->129      <div class="tile-simple">New at IKEA</div>130      <div class="tile-simple">Offers</div>131 132      <!-- Row 2 -->133      <div class="card">134        <div class="img">[IMG: Living room interior]</div>135        <div class="label">Furniture</div>136      </div>137      <div class="card">138        <div class="img">[IMG: Wardrobe storage]</div>139        <div class="label">Storage &amp;<br>organization</div>140      </div>141 142      <!-- Row 3 -->143      <div class="card">144        <div class="img">[IMG: Bed with mattress]</div>145        <div class="label">Beds &amp; mattresses</div>146      </div>147      <div class="card">148        <div class="img">[IMG: Kitchen cabinets]</div>149        <div class="label">Kitchen &amp;<br>appliances</div>150      </div>151 152      <!-- Row 4 -->153      <div class="card">154        <div class="img">[IMG: Home décor setup]</div>155        <div class="label">Home décor</div>156      </div>157      <div class="card">158        <div class="img">[IMG: Sofa and pillows]</div>159        <div class="label">Home textiles</div>160      </div>161    </div>162  </div>163 164  <!-- Bottom navigation bar -->165  <div class="bottom-nav">166    <div class="bottom-item">167      <svg class="nav-icon" viewBox="0 0 24 24" aria-label="Home icon">168        <path d="M3 10l9-7 9 7"></path>169        <path d="M5 10v10h14V10"></path>170      </svg>171    </div>172    <div class="bottom-item">173      <svg class="nav-icon" viewBox="0 0 24 24" aria-label="Search icon">174        <circle cx="11" cy="11" r="6"></circle>175        <path d="M20 20l-4-4"></path>176      </svg>177    </div>178    <div class="bottom-item">179      <svg class="nav-icon" viewBox="0 0 24 24" aria-label="Grid icon">180        <rect x="3" y="3" width="7" height="7"></rect>181        <rect x="14" y="3" width="7" height="7"></rect>182        <rect x="3" y="14" width="7" height="7"></rect>183        <rect x="14" y="14" width="7" height="7"></rect>184      </svg>185    </div>186    <div class="bottom-item">187      <svg class="nav-icon" viewBox="0 0 24 24" aria-label="Heart icon">188        <path d="M12 21s-7-4.5-9-8.5C1.5 9 4 6.5 7 7.5c2 .6 3 2.5 5 2.5s3-1.9 5-2.5c3-1 5.5 1.5 4 5-2 4-9 8.5-9 8.5z"></path>189      </svg>190    </div>191    <div class="bottom-item">192      <svg class="nav-icon" viewBox="0 0 24 24" aria-label="Bag icon">193        <path d="M6 7h12l-1 13H7L6 7z"></path>194        <path d="M9 7a3 3 0 016 0"></path>195      </svg>196    </div>197  </div>198</div>199</body>200</html>