GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>IKEA App Mock</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; position:relative; overflow:hidden;9    background:#ffffff; box-sizing:border-box;10  }11 12  /* Status bar */13  .status-bar {14    position:absolute; top:0; left:0; width:100%; height:70px;15    display:flex; align-items:center; justify-content:space-between;16    padding:0 30px; font-size:32px; color:#333;17  }18  .status-icons { display:flex; align-items:center; gap:20px; color:#666; }19  .dot { width:10px; height:10px; background:#666; border-radius:50%; display:inline-block; margin:0 8px; }20 21  /* Top app bar */22  .app-bar {23    position:absolute; top:90px; left:0; width:100%; padding:0 36px;24    display:flex; align-items:center; justify-content:space-between;25  }26  .icon-btn { width:56px; height:56px; border-radius:28px; display:flex; align-items:center; justify-content:center; color:#111; }27  .icon-btn svg { width:36px; height:36px; }28 29  /* Search */30  .search-row {31    position:absolute; top:170px; left:0; width:100%; padding:0 36px;32    display:flex; align-items:center; gap:24px;33  }34  .search-box {35    flex:1; height:100px; border:2px solid #d9d9d9; border-radius:50px;36    display:flex; align-items:center; gap:20px; padding:0 32px; color:#8a8a8a; font-size:36px;37  }38  .search-box svg { width:40px; height:40px; }39  .scan-btn {40    width:120px; height:120px; border-radius:60px; background:#111; color:#fff;41    display:flex; align-items:center; justify-content:center;42    box-shadow:0 6px 16px rgba(0,0,0,0.2);43  }44  .scan-btn svg { width:56px; height:56px; fill:#fff; }45 46  /* Banner card */47  .banner {48    position:absolute; top:330px; left:36px; width:1008px;49    border-radius:24px; overflow:hidden; box-shadow:0 10px 24px rgba(0,0,0,0.08);50    background:#f5f5f5;51  }52  .banner-img {53    width:100%; height:520px; background:#E0E0E0; border-bottom:1px solid #BDBDBD;54    display:flex; align-items:center; justify-content:center; color:#757575; font-size:36px;55  }56  .banner-content {57    background:#fff; padding:40px 36px 46px 36px;58  }59  .banner-title { font-size:54px; font-weight:700; color:#111; margin-bottom:20px; }60  .banner-desc { font-size:36px; color:#444; line-height:1.4; }61 62  /* Tabs section */63  .tabs {64    position:absolute; top:1040px; left:36px; width:1008px;65  }66  .tab-headers { display:flex; gap:80px; font-size:44px; font-weight:700; color:#222; }67  .tab-headers .inactive { color:#7b7b7b; font-weight:600; }68  .underline { width:180px; height:8px; background:#111; border-radius:4px; margin-top:18px; }69 70  /* Product grid */71  .grid {72    position:absolute; top:1200px; left:30px; width:1020px;73    display:flex; gap:24px;74  }75  .card {76    width:498px; border-radius:20px; overflow:hidden; background:#fff; box-shadow:0 8px 18px rgba(0,0,0,0.06);77    border:1px solid #eee;78  }79  .card-img {80    width:100%; height:600px; background:#E0E0E0; border-bottom:1px solid #BDBDBD;81    display:flex; align-items:center; justify-content:center; color:#757575; font-size:34px;82  }83  .card-title {84    padding:26px 26px 30px 26px; font-size:44px; color:#111; font-weight:700;85  }86 87  /* Bottom navigation */88  .bottom-nav {89    position:absolute; bottom:0; left:0; width:100%; height:160px; border-top:1px solid #e6e6e6;90    background:#fff; display:flex; align-items:center; justify-content:space-around;91  }92  .nav-item { display:flex; flex-direction:column; align-items:center; gap:14px; color:#444; font-size:28px; }93  .nav-item svg { width:56px; height:56px; fill:none; stroke:#444; stroke-width:3; }94  .nav-item.active svg { stroke:#111; }95  .nav-item.active { color:#111; }96 97  /* Small label under tabs (like subtle divider) */98  .divider {99    position:absolute; left:36px; top:1120px; width:240px; height:6px; background:#e0e0e0; border-radius:3px;100  }101 102</style>103</head>104<body>105<div id="render-target">106 107  <!-- Status bar -->108  <div class="status-bar">109    <div>1:13</div>110    <div class="status-icons">111      <span>87°</span>112      <span class="dot"></span>113      <!-- simple mail icon -->114      <svg viewBox="0 0 24 24" width="36" height="36">115        <path d="M3 5h18v14H3z" fill="none" stroke="#666" stroke-width="2"/>116        <path d="M3 7l9 6 9-6" fill="none" stroke="#666" stroke-width="2"/>117      </svg>118      <!-- wifi -->119      <svg viewBox="0 0 24 24" width="36" height="36">120        <path d="M2 8c5-4 15-4 20 0" stroke="#666" stroke-width="2" fill="none"/>121        <path d="M5 12c3-3 11-3 14 0" stroke="#666" stroke-width="2" fill="none"/>122        <path d="M9 16c2-2 4-2 6 0" stroke="#666" stroke-width="2" fill="none"/>123        <circle cx="12" cy="19" r="2" fill="#666"/>124      </svg>125      <!-- battery -->126      <svg viewBox="0 0 28 24" width="44" height="36">127        <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="none" stroke="#666" stroke-width="2"/>128        <rect x="4" y="8" width="14" height="8" fill="#666"/>129        <rect x="22" y="9" width="4" height="8" rx="1" ry="1" fill="#666"/>130      </svg>131    </div>132  </div>133 134  <!-- App bar -->135  <div class="app-bar">136    <div class="icon-btn">137      <!-- user icon -->138      <svg viewBox="0 0 24 24">139        <circle cx="12" cy="8" r="4" fill="none" stroke="#111" stroke-width="2"/>140        <path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="none" stroke="#111" stroke-width="2"/>141      </svg>142    </div>143    <div class="icon-btn">144      <!-- bell -->145      <svg viewBox="0 0 24 24">146        <path d="M6 17h12l-1.5-3V10a6.5 6.5 0 0 0-13 0v4l-1.5 3z" fill="none" stroke="#111" stroke-width="2"/>147        <circle cx="12" cy="20" r="2" fill="#111"/>148      </svg>149    </div>150  </div>151 152  <!-- Search -->153  <div class="search-row">154    <div class="search-box">155      <svg viewBox="0 0 24 24">156        <circle cx="11" cy="11" r="7" fill="none" stroke="#888" stroke-width="2"/>157        <path d="M20 20l-4-4" stroke="#888" stroke-width="2" fill="none"/>158      </svg>159      <span>What are you looking for?</span>160    </div>161    <div class="scan-btn" title="Scan">162      <svg viewBox="0 0 24 24">163        <path d="M4 7V4h3M20 7V4h-3M4 17v3h3M20 17v3h-3" stroke="#fff" stroke-width="2" fill="none"/>164        <rect x="7" y="7" width="10" height="10" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>165      </svg>166    </div>167  </div>168 169  <!-- Banner card -->170  <div class="banner">171    <div class="banner-img">[IMG: TV on blue wall and black media console]</div>172    <div class="banner-content">173      <div class="banner-title">New Lower Price</div>174      <div class="banner-desc">From storage to furniture, don’t miss these new lower prices!</div>175    </div>176  </div>177 178  <!-- Tabs -->179  <div class="tabs">180    <div class="tab-headers">181      <div>Products</div>182      <div class="inactive">Rooms</div>183    </div>184    <div class="underline"></div>185  </div>186 187  <!-- Product grid -->188  <div class="grid">189    <div class="card">190      <div class="card-img">[IMG: Cozy bedroom with shelves and green bed]</div>191      <div class="card-title">New at IKEA</div>192    </div>193    <div class="card">194      <div class="card-img">[IMG: Modern kitchen island and stools]</div>195      <div class="card-title">Offers</div>196    </div>197  </div>198 199  <!-- Divider hint under tabs -->200  <div class="divider"></div>201 202  <!-- Bottom nav bar -->203  <div class="bottom-nav">204    <div class="nav-item active">205      <svg viewBox="0 0 24 24">206        <path d="M3 11l9-7 9 7v9H3z" />207        <path d="M9 20v-6h6v6" />208      </svg>209      <div>Home</div>210    </div>211    <div class="nav-item">212      <svg viewBox="0 0 24 24">213        <circle cx="11" cy="11" r="7"/>214        <path d="M20 20l-4-4"/>215      </svg>216      <div>Search</div>217    </div>218    <div class="nav-item">219      <svg viewBox="0 0 24 24">220        <rect x="3" y="4" width="6" height="6"/>221        <rect x="13" y="4" width="8" height="6"/>222        <rect x="3" y="14" width="8" height="6"/>223        <rect x="15" y="14" width="6" height="6"/>224      </svg>225      <div>Browse</div>226    </div>227    <div class="nav-item">228      <svg viewBox="0 0 24 24">229        <path d="M12 21c-2 0-4-2-4-4h8c0 2-2 4-4 4z"/>230        <path d="M6 10a6 6 0 1 1 12 0v5H6z" />231      </svg>232      <div>Favorites</div>233    </div>234    <div class="nav-item">235      <svg viewBox="0 0 24 24">236        <path d="M6 6h15l-2 10H7L6 6z"/>237        <circle cx="9" cy="20" r="2"/>238        <circle cx="18" cy="20" r="2"/>239      </svg>240      <div>Cart</div>241    </div>242  </div>243 244</div>245</body>246</html>