GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>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; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 color: #111;17 }18 /* Status bar */19 .status-bar {20 height: 110px;21 padding: 0 36px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #111;26 font-weight: 600;27 box-sizing: border-box;28 }29 .status-time { font-size: 40px; letter-spacing: 1px; }30 .status-icons { display: flex; align-items: center; gap: 28px; }31 .icon { width: 52px; height: 52px; display: inline-block; }32 /* Header row with profile and bell */33 .header {34 height: 120px;35 padding: 0 36px;36 display: flex;37 align-items: center;38 justify-content: space-between;39 box-sizing: border-box;40 }41 .tabs-underline {42 padding: 0 36px;43 box-sizing: border-box;44 }45 .tabs-underline .line {46 height: 8px;47 background: #E0E0E0;48 border-radius: 4px;49 position: relative;50 overflow: hidden;51 }52 .tabs-underline .line::after {53 content: "";54 position: absolute;55 left: 0;56 top: 0;57 height: 100%;58 width: 180px;59 background: #111;60 border-radius: 4px;61 }62 /* Grid of category cards */63 .grid {64 padding: 28px 28px 0 28px;65 display: grid;66 grid-template-columns: 1fr 1fr;67 gap: 28px;68 box-sizing: border-box;69 }70 .card {71 background: #fff;72 border: 1px solid #EEE;73 }74 .card .img {75 width: 100%;76 height: 380px;77 background: #E0E0E0;78 border-bottom: 1px solid #BDBDBD;79 display: flex;80 align-items: center;81 justify-content: center;82 color: #757575;83 font-size: 34px;84 text-align: center;85 line-height: 1.2;86 }87 .card .caption {88 background: #F5F5F5;89 padding: 36px;90 font-size: 42px;91 }92 93 /* Bottom navigation */94 .bottom-nav {95 position: absolute;96 left: 0;97 right: 0;98 bottom: 44px;99 height: 160px;100 border-top: 1px solid #E0E0E0;101 background: #fff;102 display: flex;103 align-items: center;104 justify-content: space-around;105 box-sizing: border-box;106 }107 .nav-item {108 width: 120px;109 height: 120px;110 display: flex;111 align-items: center;112 justify-content: center;113 position: relative;114 }115 .nav-item .icon { width: 56px; height: 56px; }116 .badge {117 position: absolute;118 right: 16px;119 top: 12px;120 background: #1E73FF;121 color: #fff;122 width: 44px;123 height: 44px;124 border-radius: 22px;125 display: flex;126 align-items: center;127 justify-content: center;128 font-size: 28px;129 font-weight: 700;130 }131 132 /* Gesture pill */133 .gesture-pill {134 position: absolute;135 bottom: 10px;136 left: 50%;137 transform: translateX(-50%);138 width: 320px;139 height: 14px;140 background: #000;141 border-radius: 10px;142 opacity: 0.9;143 }144</style>145</head>146<body>147<div id="render-target">148 <!-- Status bar -->149 <div class="status-bar">150 <div class="status-time">11:10</div>151 <div class="status-icons">152 <!-- WiFi -->153 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">154 <path d="M5 12a14 14 0 0 1 14 0"></path>155 <path d="M8 15a9 9 0 0 1 8 0"></path>156 <path d="M11.5 18.5a3 3 0 0 1 3 0"></path>157 <circle cx="12" cy="20" r="1.3" fill="#444" stroke="none"></circle>158 </svg>159 <!-- Ring/notifications status -->160 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">161 <path d="M18 8a6 6 0 1 0-12 0v5l-2 3h16l-2-3V8"></path>162 <path d="M9 19a3 3 0 0 0 6 0"></path>163 </svg>164 <!-- Battery -->165 <svg class="icon" viewBox="0 0 26 24" fill="none">166 <rect x="2" y="6" width="18" height="12" rx="2" stroke="#444" stroke-width="2"></rect>167 <rect x="4.5" y="8.5" width="13" height="7" fill="#444"></rect>168 <rect x="21" y="9" width="3" height="6" rx="1" fill="#444"></rect>169 </svg>170 </div>171 </div>172 173 <!-- Header with profile left and bell right -->174 <div class="header">175 <!-- Profile icon -->176 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">177 <circle cx="12" cy="8" r="4"></circle>178 <path d="M4 20c2.5-4 13.5-4 16 0"></path>179 </svg>180 181 <!-- Spacer in middle -->182 <div style="flex:1"></div>183 184 <!-- Bell icon -->185 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">186 <path d="M18 8a6 6 0 1 0-12 0v5l-2 3h16l-2-3V8"></path>187 <path d="M9 19a3 3 0 0 0 6 0"></path>188 </svg>189 </div>190 191 <!-- Active underline -->192 <div class="tabs-underline">193 <div class="line"></div>194 </div>195 196 <!-- Grid of categories -->197 <div class="grid">198 <!-- Row 1 -->199 <div class="card">200 <div class="img">[IMG: Beige sofa in living room]</div>201 <div class="caption">New at IKEA</div>202 </div>203 <div class="card">204 <div class="img">[IMG: Dark kitchen island with stools]</div>205 <div class="caption">Offers</div>206 </div>207 208 <!-- Row 2 -->209 <div class="card">210 <div class="img">[IMG: Living room with white sofa]</div>211 <div class="caption">Furniture</div>212 </div>213 <div class="card">214 <div class="img">[IMG: Closet storage system]</div>215 <div class="caption">Storage & organization</div>216 </div>217 218 <!-- Row 3 -->219 <div class="card">220 <div class="img">[IMG: Bed with mattress and blanket]</div>221 <div class="caption">Beds & mattresses</div>222 </div>223 <div class="card">224 <div class="img">[IMG: White kitchen with cabinets]</div>225 <div class="caption">Kitchen & appliances</div>226 </div>227 </div>228 229 <!-- Bottom navigation -->230 <div class="bottom-nav">231 <!-- Home -->232 <div class="nav-item">233 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">234 <path d="M3 11l9-7 9 7"></path>235 <path d="M5 10v10h14V10"></path>236 </svg>237 </div>238 <!-- Search -->239 <div class="nav-item">240 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">241 <circle cx="11" cy="11" r="6"></circle>242 <path d="M20 20l-4-4"></path>243 </svg>244 </div>245 <!-- Grid / categories -->246 <div class="nav-item">247 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2">248 <rect x="3" y="3" width="7" height="7"></rect>249 <rect x="14" y="3" width="7" height="7"></rect>250 <rect x="3" y="14" width="7" height="7"></rect>251 <rect x="14" y="14" width="7" height="7"></rect>252 </svg>253 </div>254 <!-- Heart -->255 <div class="nav-item">256 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">257 <path d="M20.8 7.5a5.5 5.5 0 0 0-9.3-3.9L11.5 4l-0 0-0 0-0 0-0 0-0 0-0 0"></path>258 <path d="M3.2 7.5a5.5 5.5 0 0 1 9.3-3.9L12 4.3l-0.5-0.7"></path>259 <path d="M12 21s-7.5-4.6-9.2-9.2A5.5 5.5 0 0 1 12 6.4a5.5 5.5 0 0 1 9.2 5.4C19.5 16.4 12 21 12 21z"></path>260 </svg>261 </div>262 <!-- Cart -->263 <div class="nav-item" style="position: relative;">264 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">265 <circle cx="9" cy="20" r="1.8" fill="none"></circle>266 <circle cx="17" cy="20" r="1.8" fill="none"></circle>267 <path d="M5 6h2l2.2 9h8.3l1.7-7H7.4"></path>268 </svg>269 <div class="badge">1</div>270 </div>271 </div>272 273 <!-- Gesture bar -->274 <div class="gesture-pill"></div>275</div>276</body>277</html>