GD-ML/AndroidCode
13.4k
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>Night Repair Serum - UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Helvetica Neue", Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FFFFFF;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0; left: 0; right: 0;21 height: 120px;22 background: #000000;23 color: #ffffff;24 display: flex;25 align-items: center;26 justify-content: space-between;27 padding: 0 36px;28 box-sizing: border-box;29 font-size: 40px;30 letter-spacing: 0.5px;31 }32 .sb-right {33 display: flex;34 align-items: center;35 gap: 24px;36 }37 .icon {38 display: inline-flex;39 align-items: center;40 justify-content: center;41 }42 .icon svg { width: 42px; height: 42px; fill: none; stroke: #ffffff; stroke-width: 2.5; }43 44 /* Header / search area */45 .header {46 position: absolute;47 top: 120px;48 left: 0; right: 0;49 padding: 50px 50px 30px;50 box-sizing: border-box;51 background: #ffffff;52 }53 .title-row {54 position: relative;55 padding-right: 140px; /* leave space for close icon */56 }57 .title {58 font-size: 64px;59 line-height: 1.2;60 color: #7C7C7C;61 font-weight: 300;62 margin: 0 0 28px 0;63 }64 .search-underline {65 height: 3px;66 background: #2F3351;67 opacity: 0.65;68 }69 .close-btn {70 position: absolute;71 top: 8px;72 right: 24px;73 }74 .close-btn svg { width: 52px; height: 52px; stroke: #1F1F1F; stroke-width: 3.5; }75 .mic-btn {76 position: absolute;77 right: 100px;78 top: 90px;79 }80 .mic-btn svg { width: 42px; height: 42px; stroke: #3A3A3A; stroke-width: 2.8; }81 82 .results-info {83 margin-top: 36px;84 font-size: 40px;85 color: #222;86 }87 88 /* Carousel / product area */89 .carousel {90 position: absolute;91 top: 430px;92 left: 0; right: 0;93 height: 880px;94 background: #E7EBF0;95 box-sizing: border-box;96 }97 .badge {98 position: absolute;99 top: 30px; left: 30px;100 font-weight: 700;101 font-size: 40px;102 color: #121212;103 }104 .product-img {105 position: absolute;106 left: 50%;107 bottom: 120px;108 transform: translateX(-50%);109 width: 480px;110 height: 640px;111 background: #E0E0E0;112 border: 1px solid #BDBDBD;113 display: flex;114 align-items: center;115 justify-content: center;116 color: #757575;117 font-size: 32px;118 text-align: center;119 }120 .carousel .edge {121 position: absolute;122 bottom: 0; left: 0; right: 0;123 height: 6px;124 background: #D1D5DB;125 }126 .nav-pad {127 position: absolute;128 top: 240px;129 width: 150px;130 height: 390px;131 background: rgba(255,255,255,0.7);132 display: flex;133 align-items: center;134 justify-content: center;135 }136 .nav-pad.left { left: 0; }137 .nav-pad.right { right: 0; }138 .nav-pad svg { width: 56px; height: 56px; stroke: #2B2B2B; stroke-width: 3.5; fill: none; }139 140 /* CTA button */141 .cta-wrap {142 position: absolute;143 top: 1320px;144 left: 0; right: 0;145 padding: 30px 32px 0;146 box-sizing: border-box;147 }148 .cta {149 width: 100%;150 background: #0D1732;151 color: #ffffff;152 text-align: center;153 padding: 36px 20px;154 font-size: 46px;155 letter-spacing: 2px;156 font-weight: 700;157 }158 159 /* Dark link bar */160 .link-bar {161 position: absolute;162 top: 1445px;163 left: 0; right: 0;164 height: 120px;165 background: #0D1732;166 color: #E8ECF8;167 display: flex;168 align-items: center;169 justify-content: space-around;170 font-size: 36px;171 letter-spacing: 1px;172 text-transform: uppercase;173 box-sizing: border-box;174 padding: 0 30px;175 }176 .link-bar .item {177 flex: 1;178 text-align: center;179 position: relative;180 }181 .link-bar .item + .item::before {182 content: "";183 position: absolute;184 left: 0; top: 25%;185 width: 1px; height: 50%;186 background: rgba(255,255,255,0.25);187 }188 189 /* Suggestions row above keyboard */190 .suggestions {191 position: absolute;192 top: 1565px;193 left: 0; right: 0;194 height: 90px;195 display: flex;196 align-items: center;197 gap: 24px;198 padding: 0 24px;199 box-sizing: border-box;200 border-bottom: 1px solid #DADAE6;201 background: #FFFFFF;202 }203 .suggestions .pill {204 font-size: 40px;205 color: #3A3A3A;206 }207 .suggestions .divider {208 color: #9AA0A6;209 font-size: 40px;210 }211 .suggestions .icon svg { width: 44px; height: 44px; stroke: #6C6C6C; }212 213 /* Keyboard mock */214 .keyboard {215 position: absolute;216 top: 1655px;217 left: 0; right: 0;218 height: 640px;219 background: #F3EFF7;220 box-sizing: border-box;221 padding: 24px 18px 16px;222 }223 .row {224 display: flex;225 justify-content: center;226 gap: 16px;227 margin-bottom: 22px;228 }229 .key {230 background: #FFFFFF;231 width: 88px;232 height: 110px;233 border-radius: 24px;234 box-shadow: 0 1px 0 rgba(0,0,0,0.08);235 font-size: 42px;236 color: #2B2B2B;237 display: flex;238 align-items: center;239 justify-content: center;240 }241 .wide { width: 180px; }242 .space { flex: 1; min-width: 420px; }243 .accent {244 background: #E0DAF2;245 color: #3A2D8D;246 }247 .bottom-bar {248 position: absolute;249 bottom: 24px;250 left: 50%;251 transform: translateX(-50%);252 width: 200px;253 height: 10px;254 background: #BDBDBD;255 border-radius: 6px;256 }257</style>258</head>259<body>260<div id="render-target">261 262 <!-- Status bar -->263 <div class="status-bar">264 <div>10:54</div>265 <div class="sb-right">266 <div class="icon" title="Network">267 <svg viewBox="0 0 24 24">268 <path d="M2 18l10-10 10 10" />269 <circle cx="12" cy="18" r="2" fill="#ffffff" />270 </svg>271 </div>272 <div class="icon" title="Signal">273 <svg viewBox="0 0 24 24">274 <rect x="3" y="14" width="3" height="6" fill="#ffffff"></rect>275 <rect x="8" y="11" width="3" height="9" fill="#ffffff"></rect>276 <rect x="13" y="8" width="3" height="12" fill="#ffffff"></rect>277 <rect x="18" y="5" width="3" height="15" fill="#ffffff"></rect>278 </svg>279 </div>280 <div class="icon" title="Battery">281 <svg viewBox="0 0 26 24">282 <rect x="2" y="5" width="18" height="14" rx="2" ry="2" stroke="#ffffff"></rect>283 <rect x="4" y="7" width="14" height="10" fill="#ffffff"></rect>284 <rect x="21" y="9" width="3" height="6" rx="1" ry="1" fill="#ffffff"></rect>285 </svg>286 </div>287 </div>288 </div>289 290 <!-- Header with search title -->291 <div class="header">292 <div class="title-row">293 <h1 class="title">Night Repair Serum</h1>294 <div class="search-underline"></div>295 296 <div class="mic-btn">297 <svg viewBox="0 0 24 24">298 <rect x="8" y="4" width="8" height="12" rx="4" ry="4"></rect>299 <path d="M6 11c0 4 12 4 12 0" />300 <path d="M12 16v4" />301 </svg>302 </div>303 304 <div class="close-btn" aria-label="Close">305 <svg viewBox="0 0 24 24">306 <path d="M4 4L20 20M20 4L4 20"></path>307 </svg>308 </div>309 </div>310 <div class="results-info">Showing 4 of 26 results.</div>311 </div>312 313 <!-- Carousel product block -->314 <div class="carousel">315 <div class="badge">Best Seller</div>316 317 <div class="nav-pad left">318 <svg viewBox="0 0 24 24">319 <path d="M14 4L6 12l8 8"></path>320 </svg>321 </div>322 323 <div class="nav-pad right">324 <svg viewBox="0 0 24 24">325 <path d="M10 4l8 8-8 8"></path>326 </svg>327 </div>328 329 <div class="product-img">[IMG: Estée Lauder Serum Bottle]</div>330 331 <div class="edge"></div>332 </div>333 334 <!-- CTA button -->335 <div class="cta-wrap">336 <div class="cta">SEE ALL RESULTS</div>337 </div>338 339 <!-- Link bar -->340 <div class="link-bar">341 <div class="item">Live Chat</div>342 <div class="item">Join Loyalty</div>343 <div class="item">Offers</div>344 </div>345 346 <!-- Suggestions row above keyboard -->347 <div class="suggestions">348 <div class="icon">349 <svg viewBox="0 0 24 24">350 <rect x="3" y="3" width="6" height="6" stroke="#6C6C6C"></rect>351 <rect x="15" y="3" width="6" height="6" stroke="#6C6C6C"></rect>352 <rect x="3" y="15" width="6" height="6" stroke="#6C6C6C"></rect>353 <rect x="15" y="15" width="6" height="6" stroke="#6C6C6C"></rect>354 </svg>355 </div>356 <div class="pill">Serum</div>357 <div class="divider">|</div>358 <div class="pill">Serums</div>359 <div style="flex:1;"></div>360 <div class="icon">361 <svg viewBox="0 0 24 24">362 <rect x="8" y="4" width="8" height="12" rx="4" ry="4"></rect>363 <path d="M6 11c0 4 12 4 12 0" />364 <path d="M12 16v4" />365 </svg>366 </div>367 </div>368 369 <!-- Keyboard mock -->370 <div class="keyboard">371 <div class="row">372 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>373 </div>374 <div class="row">375 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>376 </div>377 <div class="row">378 <div class="key accent">⇧</div>379 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>380 <div class="key accent">⌫</div>381 </div>382 <div class="row">383 <div class="key wide accent">?123</div>384 <div class="key accent">,</div>385 <div class="key accent">☺</div>386 <div class="key space"></div>387 <div class="key accent">.</div>388 <div class="key wide accent">↗</div>389 </div>390 <div class="bottom-bar"></div>391 </div>392 393</div>394</body>395</html>