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>Search - Birthday</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #D8DEE8;15 color: #2b2b2b;16 }17 18 /* Top app bar */19 .topbar {20 width: 100%;21 background: #3E556D;22 color: #fff;23 padding-top: 16px;24 }25 .status-bar {26 height: 56px;27 padding: 0 32px;28 display: flex;29 align-items: center;30 justify-content: space-between;31 font-size: 32px;32 opacity: 0.95;33 }34 .icons {35 display: flex;36 align-items: center;37 gap: 22px;38 }39 .search-row {40 padding: 14px 24px 10px 16px;41 display: flex;42 align-items: center;43 gap: 18px;44 }45 .search-text {46 flex: 1;47 font-size: 44px;48 color: #E9EDF3;49 letter-spacing: 0.2px;50 }51 .chip-row {52 display: flex;53 gap: 20px;54 padding: 16px 20px 22px 20px;55 }56 .chip {57 padding: 18px 28px;58 border-radius: 18px;59 border: 2px solid #2E4357;60 color: #D7DFE7;61 font-size: 30px;62 background: #3E556D;63 }64 .chip.active {65 border-color: #F3D86A;66 color: #F3D86A;67 box-shadow: inset 0 0 0 1px rgba(243,216,106,0.15);68 }69 70 /* Ad banner placeholder */71 .ad-banner {72 margin: 10px 34px;73 height: 160px;74 background: #E0E0E0;75 border: 1px solid #BDBDBD;76 border-radius: 6px;77 display: flex;78 align-items: center;79 justify-content: center;80 color: #757575;81 font-size: 28px;82 }83 84 /* Content list */85 .content {86 background: #D8DEE8;87 }88 .list-item {89 padding: 34px;90 border-top: 1px solid rgba(0,0,0,0.06);91 border-bottom: 1px solid rgba(0,0,0,0.06);92 background: #D8DEE8;93 }94 .item-header {95 display: flex;96 align-items: flex-start;97 justify-content: space-between;98 }99 .item-title {100 font-size: 46px;101 color: #2F3A44;102 margin-bottom: 8px;103 }104 .item-sub {105 font-size: 30px;106 color: #6A737B;107 line-height: 1.3;108 }109 .item-meta {110 font-size: 30px;111 color: #6A737B;112 margin-left: 20px;113 white-space: nowrap;114 margin-top: 6px;115 }116 117 /* Tabs */118 .tabs {119 display: flex;120 justify-content: space-around;121 padding: 28px 0 10px;122 background: #D8DEE8;123 }124 .tab {125 font-size: 32px;126 letter-spacing: 1px;127 color: #2F3A44;128 }129 .tab.active {130 font-weight: 700;131 position: relative;132 }133 .tab.active::after {134 content: "";135 position: absolute;136 left: 0; right: 0; bottom: -6px;137 margin: auto;138 width: 90%;139 height: 5px;140 background: #2F3A44;141 border-radius: 2px;142 }143 144 /* Floating Action Button */145 .fab {146 position: absolute;147 right: 56px;148 bottom: 780px; /* just above keyboard */149 width: 140px;150 height: 140px;151 background: #3E556D;152 border-radius: 50%;153 box-shadow: 0 12px 24px rgba(0,0,0,0.25);154 display: flex;155 align-items: center;156 justify-content: center;157 }158 159 /* Keyboard placeholder */160 .keyboard {161 position: absolute;162 left: 0;163 right: 0;164 bottom: 36px;165 height: 800px;166 background: #1E1B1A;167 padding: 20px 22px;168 box-sizing: border-box;169 color: #EAD8C8;170 }171 .kb-suggestions {172 display: flex;173 align-items: center;174 gap: 28px;175 color: #EAD8C8;176 font-size: 34px;177 margin-bottom: 18px;178 opacity: 0.9;179 }180 .kb-row {181 display: grid;182 grid-template-columns: repeat(10, 1fr);183 gap: 12px;184 margin: 12px 0;185 }186 .key {187 height: 94px;188 background: #2B2726;189 border-radius: 14px;190 display: flex;191 align-items: center;192 justify-content: center;193 color: #E6D8CF;194 font-size: 36px;195 }196 .kb-bottom {197 display: grid;198 grid-template-columns: 1.2fr 1fr 4fr 1fr 1.2fr;199 gap: 12px;200 margin-top: 12px;201 }202 203 /* Home indicator */204 .home-indicator {205 position: absolute;206 bottom: 10px;207 left: 50%;208 transform: translateX(-50%);209 width: 360px;210 height: 10px;211 background: #E6E6E6;212 border-radius: 5px;213 opacity: 0.9;214 }215 216 /* Helpers for tiny icon strokes */217 svg { display: block; }218</style>219</head>220<body>221<div id="render-target">222 <div class="topbar">223 <div class="status-bar">224 <div>11:38</div>225 <div class="icons">226 <!-- WiFi -->227 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-label="wifi">228 <path d="M2 8a15 15 0 0 1 20 0"></path>229 <path d="M5 12a10 10 0 0 1 14 0"></path>230 <path d="M8.5 16a6 6 0 0 1 7 0"></path>231 <circle cx="12" cy="20" r="1.5" fill="#fff" stroke="none"></circle>232 </svg>233 <!-- Battery -->234 <svg width="52" height="40" viewBox="0 0 28 18" aria-label="battery">235 <rect x="1" y="4" width="22" height="10" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="2"></rect>236 <rect x="3" y="6" width="14" height="6" fill="#ffffff"></rect>237 <rect x="23" y="7" width="3" height="4" fill="#ffffff"></rect>238 </svg>239 </div>240 </div>241 242 <div class="search-row">243 <!-- Back Arrow -->244 <svg width="56" height="56" viewBox="0 0 24 24" stroke="#FFFFFF" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-label="back">245 <path d="M15 18l-6-6 6-6"></path>246 </svg>247 <div class="search-text">birthday</div>248 <!-- Close X -->249 <svg width="56" height="56" viewBox="0 0 24 24" stroke="#FFFFFF" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-label="clear">250 <path d="M6 6l12 12M18 6l-12 12"></path>251 </svg>252 </div>253 254 <div class="chip-row">255 <div class="chip active">All</div>256 <div class="chip">Critical</div>257 <div class="chip">Important</div>258 <div class="chip">Favorites</div>259 <div class="chip">Optional</div>260 </div>261 </div>262 263 <div class="ad-banner">[IMG: Ad Banner / Map Directions]</div>264 265 <div class="content">266 <div class="list-item">267 <div class="item-header">268 <div>269 <div class="item-title">Kiran´s birthday</div>270 <div class="item-sub">08/18/2023 8:00 PM</div>271 <div class="item-sub">Every Day</div>272 </div>273 <div class="item-meta">in 8 days</div>274 </div>275 </div>276 277 <div class="tabs">278 <div class="tab active">ACTIVE</div>279 <div class="tab">COMPLETED</div>280 </div>281 </div>282 283 <!-- Floating Action Button -->284 <div class="fab" aria-label="add">285 <svg width="64" height="64" viewBox="0 0 24 24" stroke="#FFFFFF" stroke-width="2.5" fill="none" stroke-linecap="round">286 <path d="M12 5v14M5 12h14"></path>287 </svg>288 </div>289 290 <!-- Keyboard placeholder -->291 <div class="keyboard">292 <div class="kb-suggestions">birthday | Birthday | 🎈 | 🎂</div>293 <div class="kb-row">294 <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>295 </div>296 <div class="kb-row">297 <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><div class="key">⌫</div>298 </div>299 <div class="kb-row">300 <div class="key">⇧</div><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><div class="key">.</div><div class="key">↵</div>301 </div>302 <div class="kb-bottom">303 <div class="key">?123</div>304 <div class="key">,</div>305 <div class="key">space</div>306 <div class="key">.</div>307 <div class="key">🔍</div>308 </div>309 </div>310 311 <div class="home-indicator"></div>312</div>313</body>314</html>