GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Coolblue - Start</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:#0f1419; color:#ffffff;11  }12 13  /* Top status bar */14  .status-bar {15    height:80px; padding:0 32px;16    display:flex; align-items:center; justify-content:space-between;17    font-size:34px; color:#cfd8dc;18  }19  .status-icons { display:flex; gap:26px; align-items:center; }20  .dot { width:10px; height:10px; background:#cfd8dc; border-radius:50%; display:inline-block; }21 22  /* Header with logo and search */23  .header {24    padding:10px 28px 0 28px;25    position:relative;26  }27  .logo {28    width:180px; height:180px; background:#ff7a00; border-radius:50%;29    margin:0 auto 18px auto;30    display:flex; align-items:center; justify-content:center;31    font-weight:bold; text-align:center; line-height:1;32    color:#fff; font-size:44px;33    box-shadow:0 8px 18px rgba(0,0,0,0.35) inset;34  }35  .wishlist {36    position:absolute; right:36px; top:22px;37    width:72px; height:72px; display:flex; align-items:center; justify-content:center;38  }39  .search-bar {40    background:#27323c; border-radius:22px; height:112px;41    display:flex; align-items:center; padding:0 28px; gap:22px;42  }43  .search-input { color:#98a6b3; font-size:38px; flex:1; }44  .icon-btn {45    width:84px; height:84px; border-radius:16px; background:#1f2a33;46    display:flex; align-items:center; justify-content:center; border:1px solid #33414d;47  }48 49  /* Shipping strip */50  .shipping-strip {51    margin:18px 0 22px 0;52    padding:22px 32px;53    background:#0b1015;54    border-top:1px solid #1d2a35; border-bottom:1px solid #1d2a35;55    display:flex; align-items:center; gap:18px; font-size:34px;56  }57  .shipping-strip .time { color:#ff7a00; font-weight:700; }58  .shipping-strip .free { color:#ff7a00; font-weight:700; }59 60  /* Big hero banner */61  .hero {62    margin:0 28px; background:#1f73d1; border-radius:18px; overflow:hidden;63    padding:40px 36px 26px 36px;64  }65  .hero h1 {66    margin:8px 0 0 0; font-size:82px; letter-spacing:1px; color:#ffffff;67  }68  .hero .sub { margin-top:6px; font-size:48px; color:#d9ecff; }69  .pill {70    display:inline-block; padding:14px 22px; border-radius:14px; background:#ff7a00; color:#fff;71    font-size:34px; font-weight:700; margin-top:18px;72  }73  .hero .img {74    height:340px; margin:24px 0; border:1px solid #bdbdbd; background:#e0e0e0;75    color:#555; display:flex; align-items:center; justify-content:center;76  }77  .hero .link {78    color:#ffffff; display:flex; align-items:center; gap:12px; font-size:38px; margin-top:8px;79  }80 81  /* Scroll cards */82  .cards-row {83    display:flex; gap:24px; margin:26px 28px 0 28px; overflow:hidden;84  }85  .card {86    min-width:980px; background:#101821; border-radius:18px; border:1px solid #263544;87    padding:32px; color:#e6f0f7;88  }89  .card h3 { margin:0; font-size:48px; }90  .card .img {91    height:210px; margin-top:24px; background:#e0e0e0; border:1px solid #bdbdbd;92    color:#555; display:flex; align-items:center; justify-content:center;93  }94 95  /* Greetings */96  .greet {97    padding:36px 32px 18px 32px;98  }99  .greet .hi {100    font-size:72px; font-weight:800; letter-spacing:2px;101  }102  .greet .sub {103    font-size:46px; color:#c8d3dc; margin-top:12px;104  }105 106  .orders {107    padding:4px 32px 10px 32px; color:#dfe7ee;108  }109  .orders .title { font-size:54px; font-weight:800; }110  .orders .text { margin-top:12px; font-size:40px; color:#b9c6cf; }111  .orders .view {112    margin-top:18px; color:#7cc2ff; font-size:42px; display:flex; align-items:center; gap:14px;113  }114 115  /* Browse categories header */116  .row-head {117    padding:22px 32px; display:flex; align-items:center; justify-content:space-between;118  }119  .row-head .left { font-size:52px; font-weight:800; }120  .row-head .right { color:#7cc2ff; font-size:40px; }121 122  /* Bottom navigation */123  .bottom-nav {124    position:absolute; left:0; right:0; bottom:0; height:170px;125    background:#121a22; border-top:1px solid #243142;126    display:flex; justify-content:space-around; align-items:center;127    padding-bottom:10px;128  }129  .nav-item { display:flex; flex-direction:column; align-items:center; gap:10px; color:#cfd8dc; font-size:34px; }130  .nav-item.active { color:#5eb2ff; }131  .spacer-bottom { height:190px; } /* space for bottom nav */132  /* Simple utils */133  .muted { color:#9fb0bd; }134</style>135</head>136<body>137<div id="render-target">138 139  <!-- Status bar -->140  <div class="status-bar">141    <div>11:29</div>142    <div class="status-icons">143      <span class="dot"></span>144      <span class="dot"></span>145      <span class="dot"></span>146    </div>147  </div>148 149  <!-- Header -->150  <div class="header">151    <div class="wishlist" title="Wishlist">152      <!-- heart icon -->153      <svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">154        <path d="M12 21s-7-4.6-9.5-8.1A5.5 5.5 0 0 1 12 5.3a5.5 5.5 0 0 1 9.5 7.6C19 16.4 12 21 12 21z"/>155      </svg>156    </div>157    <div class="logo">cool<br>blue</div>158 159    <div class="search-bar">160      <!-- search icon -->161      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#9fb0bd" stroke-width="2">162        <circle cx="11" cy="11" r="7"></circle>163        <path d="M20 20l-3.5-3.5"></path>164      </svg>165      <div class="search-input">What are you looking for?</div>166      <div class="icon-btn" title="Scan">167        <!-- simple scan icon -->168        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#cfe2f0" stroke-width="2">169          <path d="M3 7V5a2 2 0 0 1 2-2h2"/>170          <path d="M21 7V5a2 2 0 0 0-2-2h-2"/>171          <path d="M21 17v2a2 2 0 0 1-2 2h-2"/>172          <path d="M3 17v2a2 2 0 0 0 2 2h2"/>173        </svg>174      </div>175    </div>176  </div>177 178  <!-- Shipping strip -->179  <div class="shipping-strip">180    <!-- truck icon -->181    <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#9fb0bd" stroke-width="2">182      <rect x="1" y="3" width="13" height="13"></rect>183      <path d="M14 8h5l3 3v5h-8z"></path>184      <circle cx="5.5" cy="19.5" r="2.5"></circle>185      <circle cx="18.5" cy="19.5" r="2.5"></circle>186    </svg>187    <div>Ordered before <span class="time">23:59</span>, delivered tomorrow for <span class="free">free</span></div>188  </div>189 190  <!-- Hero banner -->191  <div class="hero">192    <div class="pill">While supplies last</div>193    <h1>END OF YEAR DEALS.</h1>194    <div class="sub">Discountdown.</div>195 196    <div class="img">[IMG: Products collage - laptop, appliances, tree]</div>197 198    <div class="link">199      <!-- arrow icon -->200      <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">201        <path d="M5 12h14"></path>202        <path d="M13 5l7 7-7 7"></path>203      </svg>204      View all deals205    </div>206  </div>207 208  <!-- Cards row -->209  <div class="cards-row">210    <div class="card">211      <div class="pill" style="margin:0 0 16px 0;">While supplies last</div>212      <h3>End of Year Deals: view all deals on laptops.</h3>213      <div class="img">[IMG: Laptops with discount icons]</div>214    </div>215    <div class="card" style="opacity:.6;">216      <div class="pill" style="margin:0 0 16px 0;">While supplies last</div>217      <h3>End of Year Deals: all deals</h3>218      <div class="img">[IMG: Mixed products]</div>219    </div>220  </div>221 222  <!-- Greeting -->223  <div class="greet">224    <div class="hi">HI THERE.</div>225    <div class="sub">Appy to see you</div>226  </div>227 228  <!-- Orders section -->229  <div class="orders">230    <div class="title">Hi! Nice to see you again</div>231    <div class="text">View your last orders.</div>232    <div class="view">233      <!-- chevron -->234      <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#7cc2ff" stroke-width="2">235        <path d="M5 12h12"></path>236        <path d="M12 5l7 7-7 7"></path>237      </svg>238      View orders239    </div>240  </div>241 242  <!-- Browse categories -->243  <div class="row-head">244    <div class="left">Browse categories</div>245    <div class="right">View all</div>246  </div>247 248  <!-- Placeholder category tiles just to hint content -->249  <div style="display:flex; gap:22px; padding:0 32px;">250    <div style="flex:1; min-height:160px; background:#0e1821; border:1px solid #263544; border-radius:16px;"></div>251    <div style="flex:1; min-height:160px; background:#0e1821; border:1px solid #263544; border-radius:16px;"></div>252  </div>253 254  <div class="spacer-bottom"></div>255 256  <!-- Bottom navigation -->257  <div class="bottom-nav">258    <div class="nav-item active">259      <svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="#5eb2ff" stroke-width="2">260        <path d="M3 11l9-8 9 8"></path>261        <path d="M5 10v10h14V10"></path>262      </svg>263      <div>start</div>264    </div>265    <div class="nav-item">266      <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#cfd8dc" stroke-width="2">267        <circle cx="11" cy="11" r="7"></circle>268        <path d="M20 20l-3.5-3.5"></path>269      </svg>270      <div>search</div>271    </div>272    <div class="nav-item">273      <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#cfd8dc" stroke-width="2">274        <path d="M4 21V7l8-4 8 4v14"></path>275        <path d="M4 10h16"></path>276      </svg>277      <div>stores</div>278    </div>279    <div class="nav-item">280      <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#cfd8dc" stroke-width="2">281        <path d="M6 6h15l-2 10H7L6 6z"></path>282        <circle cx="9" cy="20" r="1.8"></circle>283        <circle cx="18" cy="20" r="1.8"></circle>284      </svg>285      <div>cart</div>286    </div>287    <div class="nav-item">288      <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#cfd8dc" stroke-width="2">289        <circle cx="12" cy="8" r="4"></circle>290        <path d="M4 22c1.5-4 6-6 8-6s6.5 2 8 6"></path>291      </svg>292      <div>profile</div>293    </div>294  </div>295 296</div>297</body>298</html>