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>Dark Recipe Discover UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #191a1f;15 border-radius: 28px;16 box-shadow: 0 20px 60px rgba(0,0,0,0.35);17 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif;18 color: #f5f5f7;19 }20 21 /* Status bar */22 .status-bar {23 position: absolute;24 top: 0;25 left: 0;26 width: 100%;27 height: 90px;28 padding: 0 32px;29 display: flex;30 align-items: center;31 justify-content: space-between;32 color: #ffffff;33 font-weight: 600;34 }35 .status-left { display: flex; align-items: center; gap: 18px; }36 .status-right { display: flex; align-items: center; gap: 22px; }37 .badge {38 font-size: 28px;39 opacity: 0.9;40 }41 .icon-wifi, .icon-battery, .icon-carrier {42 width: 42px; height: 42px;43 }44 .icon-wifi path { stroke: #fff; stroke-width: 6; fill: none; opacity: 0.9; }45 .icon-battery rect { stroke: #fff; stroke-width: 6; fill: none; opacity: 0.9; }46 .icon-battery .fill { fill: #fff; }47 .icon-carrier path { fill: #fff; opacity: 0.9; }48 49 /* Top action/search */50 .top-area {51 position: absolute;52 top: 90px;53 left: 0;54 width: 100%;55 padding: 24px 48px 0;56 }57 .back-and-search {58 display: flex;59 align-items: center;60 gap: 28px;61 }62 .back-btn {63 width: 60px; height: 60px;64 }65 .back-btn path { stroke: #ff3b74; stroke-width: 8; fill: none; stroke-linecap: round; stroke-linejoin: round; }66 .search-field {67 flex: 1;68 height: 98px;69 border-radius: 50px;70 border: 2px solid #3a3b41;71 background: #222329;72 display: flex;73 align-items: center;74 padding: 0 34px;75 }76 .search-icon {77 width: 40px; height: 40px; margin-right: 20px;78 }79 .search-icon circle, .search-icon line { stroke: #9aa0a6; stroke-width: 6; fill: none; }80 .placeholder-text {81 color: #9aa0a6;82 font-size: 34px;83 }84 85 /* Content sections */86 .content {87 position: absolute;88 top: 220px;89 left: 0;90 width: 100%;91 padding: 0 48px;92 }93 .section-title {94 margin-top: 40px;95 font-size: 46px;96 font-weight: 800;97 letter-spacing: 0.2px;98 }99 100 .card-grid {101 margin-top: 26px;102 display: grid;103 grid-template-columns: repeat(2, 1fr);104 gap: 30px;105 }106 .card {107 background: #2a2b31;108 border: 2px solid #34353c;109 height: 250px;110 border-radius: 22px;111 padding: 28px;112 display: flex;113 align-items: center;114 gap: 24px;115 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);116 }117 .emoji {118 width: 72px;119 height: 72px;120 border-radius: 50%;121 background: #3a3b41;122 display: flex;123 align-items: center;124 justify-content: center;125 font-size: 42px;126 }127 .card-title {128 font-size: 40px;129 font-weight: 800;130 }131 132 /* Recent chip (partially visible above keyboard) */133 .recent-wrapper {134 margin-top: 44px;135 position: relative;136 height: 180px;137 }138 .chip {139 position: absolute;140 top: 80px;141 left: 0;142 background: #e0356b;143 color: #fff;144 height: 100px;145 width: 360px;146 border-radius: 28px;147 display: flex;148 align-items: center;149 justify-content: center;150 font-size: 40px;151 font-weight: 800;152 box-shadow: 0 10px 30px rgba(224,53,107,0.35);153 }154 155 /* Bottom navigation */156 .bottom-nav {157 position: absolute;158 bottom: 960px; /* sits above keyboard */159 left: 0;160 width: 100%;161 height: 180px;162 background: rgba(27,28,33,0.9);163 border-top: 2px solid #30323a;164 display: flex;165 align-items: center;166 justify-content: space-around;167 padding: 20px 0;168 }169 .nav-item {170 width: 200px;171 text-align: center;172 color: #b7bac1;173 }174 .nav-item .label {175 margin-top: 12px;176 font-size: 28px;177 font-weight: 700;178 }179 .nav-item svg { width: 60px; height: 60px; }180 .nav-item svg path, .nav-item svg circle, .nav-item svg rect, .nav-item svg line {181 stroke: #b7bac1; fill: none; stroke-width: 6;182 }183 .nav-item.active { color: #ffffff; }184 .nav-item.active svg path, .nav-item.active svg circle, .nav-item.active svg rect, .nav-item.active svg line {185 stroke: #ff3b74;186 }187 .active-indicator {188 position: absolute;189 left: 80px;190 top: -25px;191 width: 220px;192 height: 50px;193 background: #ff3b74;194 border-radius: 28px 28px 0 0;195 opacity: 0.9;196 }197 198 /* Keyboard */199 .keyboard {200 position: absolute;201 bottom: 0;202 left: 0;203 width: 100%;204 height: 960px;205 background: #131314;206 border-top: 2px solid #2a2b31;207 padding: 40px 32px 80px;208 }209 .kb-top-row {210 display: flex;211 gap: 32px;212 margin-bottom: 30px;213 }214 .kb-key {215 flex: 1;216 height: 120px;217 background: #242427;218 border-radius: 18px;219 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);220 display: flex;221 align-items: center;222 justify-content: center;223 color: #e8dcc7;224 font-size: 44px;225 font-weight: 700;226 }227 .kb-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 22px; margin-bottom: 22px; }228 .kb-row .kb-key { height: 130px; }229 .kb-row.short { grid-template-columns: 1.2fr repeat(7, 1fr) 1.2fr; }230 .kb-actions {231 display: grid;232 grid-template-columns: 1.2fr 1.2fr 6fr 1.2fr 1.2fr;233 gap: 22px;234 margin-top: 24px;235 }236 .kb-key.special { background: #d9be7a; color: #1e1e21; font-weight: 800; }237 .kb-key.icon {238 color: #f1e9dd;239 font-size: 36px;240 }241 242 /* Home indicator */243 .home-indicator {244 position: absolute;245 bottom: 20px;246 left: 50%;247 transform: translateX(-50%);248 width: 220px;249 height: 10px;250 background: #ffffff;251 border-radius: 6px;252 opacity: 0.7;253 }254</style>255</head>256<body>257<div id="render-target">258 259 <!-- Status Bar -->260 <div class="status-bar">261 <div class="status-left">262 <div class="badge" style="font-size:40px;">10:44</div>263 <div class="badge">60°</div>264 </div>265 <div class="status-right">266 <svg class="icon-carrier" viewBox="0 0 24 24">267 <path d="M2 18h4V6H2zm8 0h4V10h-4zm8 0h4V2h-4z"></path>268 </svg>269 <svg class="icon-wifi" viewBox="0 0 24 24">270 <path d="M2 8c10-8 20 0 20 0"></path>271 <path d="M6 12c6-5 12 0 12 0"></path>272 <path d="M10 16c2-2 4 0 4 0"></path>273 </svg>274 <svg class="icon-battery" viewBox="0 0 34 20">275 <rect x="1" y="1" width="28" height="18" rx="3"></rect>276 <rect class="fill" x="4" y="5" width="20" height="10" rx="2"></rect>277 <rect x="30" y="6" width="3" height="8" rx="1" class="fill"></rect>278 </svg>279 </div>280 </div>281 282 <!-- Top area: Back + Search -->283 <div class="top-area">284 <div class="back-and-search">285 <svg class="back-btn" viewBox="0 0 48 48">286 <path d="M34 8 L16 24 L34 40"></path>287 </svg>288 <div class="search-field">289 <svg class="search-icon" viewBox="0 0 48 48">290 <circle cx="20" cy="20" r="12"></circle>291 <line x1="30" y1="30" x2="44" y2="44"></line>292 </svg>293 <div class="placeholder-text">Search recipes</div>294 </div>295 </div>296 </div>297 298 <!-- Main content -->299 <div class="content">300 <div class="section-title">Popular</div>301 302 <div class="card-grid">303 <div class="card">304 <div class="emoji">🍲</div>305 <div class="card-title">Easy Dinner</div>306 </div>307 <div class="card">308 <div class="emoji">🍜</div>309 <div class="card-title">5 Ingredients<br>or Less</div>310 </div>311 312 <div class="card">313 <div class="emoji">🕓</div>314 <div class="card-title">Under 30<br>Minutes</div>315 </div>316 <div class="card">317 <div class="emoji">🍗</div>318 <div class="card-title">Chicken</div>319 </div>320 321 <div class="card">322 <div class="emoji">💵</div>323 <div class="card-title">Affordable</div>324 </div>325 <div class="card">326 <div class="emoji">🍪</div>327 <div class="card-title">Desserts</div>328 </div>329 </div>330 331 <div class="section-title" style="margin-top:40px;">Recent</div>332 <div class="recent-wrapper">333 <div class="chip">Desserts</div>334 </div>335 </div>336 337 <!-- Bottom Navigation -->338 <div class="bottom-nav">339 <div class="active-indicator"></div>340 <div class="nav-item active">341 <svg viewBox="0 0 48 48">342 <circle cx="20" cy="20" r="12"></circle>343 <line x1="30" y1="30" x2="44" y2="44"></line>344 </svg>345 <div class="label">Discover</div>346 </div>347 <div class="nav-item">348 <svg viewBox="0 0 56 56">349 <rect x="8" y="20" width="28" height="18" rx="4"></rect>350 <path d="M36 24 Q44 26 44 30 Q44 34 36 36" stroke-linecap="round"></path>351 </svg>352 <div class="label">Community</div>353 </div>354 <div class="nav-item">355 <svg viewBox="0 0 56 56">356 <rect x="8" y="16" width="40" height="22" rx="4"></rect>357 <circle cx="18" cy="44" r="4"></circle>358 <circle cx="38" cy="44" r="4"></circle>359 </svg>360 <div class="label">My Cart</div>361 </div>362 <div class="nav-item">363 <svg viewBox="0 0 56 56">364 <circle cx="28" cy="18" r="10"></circle>365 <path d="M10 46 Q28 34 46 46" stroke-linecap="round"></path>366 </svg>367 <div class="label">Profile</div>368 </div>369 </div>370 371 <!-- Keyboard -->372 <div class="keyboard">373 <div class="kb-top-row">374 <div class="kb-key icon">▦</div>375 <div class="kb-key icon">☺</div>376 <div class="kb-key icon">GIF</div>377 <div class="kb-key icon">⚙</div>378 <div class="kb-key icon">G↔</div>379 <div class="kb-key icon">🎨</div>380 <div class="kb-key icon">🎤</div>381 </div>382 383 <div class="kb-row">384 <div class="kb-key">q</div><div class="kb-key">w</div><div class="kb-key">e</div><div class="kb-key">r</div><div class="kb-key">t</div>385 <div class="kb-key">y</div><div class="kb-key">u</div><div class="kb-key">i</div><div class="kb-key">o</div><div class="kb-key">p</div>386 </div>387 <div class="kb-row">388 <div class="kb-key">a</div><div class="kb-key">s</div><div class="kb-key">d</div><div class="kb-key">f</div><div class="kb-key">g</div>389 <div class="kb-key">h</div><div class="kb-key">j</div><div class="kb-key">k</div><div class="kb-key">l</div><div class="kb-key">⌫</div>390 </div>391 <div class="kb-row short">392 <div class="kb-key">⇧</div>393 <div class="kb-key">z</div><div class="kb-key">x</div><div class="kb-key">c</div><div class="kb-key">v</div>394 <div class="kb-key">b</div><div class="kb-key">n</div><div class="kb-key">m</div>395 <div class="kb-key">.</div>396 <div class="kb-key special">✓</div>397 </div>398 <div class="kb-actions">399 <div class="kb-key">?123</div>400 <div class="kb-key">,</div>401 <div class="kb-key">space</div>402 <div class="kb-key">🙂</div>403 <div class="kb-key">.</div>404 </div>405 </div>406 407 <div class="home-indicator"></div>408</div>409</body>410</html>