GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Boombox UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #eef1f7;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 80px;22 background: #24364e;23 color: #ffffff;24 display: flex;25 align-items: center;26 padding: 0 24px;27 box-sizing: border-box;28 font-size: 28px;29 }30 .status-bar .left { flex: 1; }31 .status-bar .right { display: flex; gap: 22px; align-items: center; }32 33 /* App bar */34 .app-bar {35 position: absolute;36 top: 80px;37 left: 0;38 width: 1080px;39 height: 140px;40 background: #2e405f;41 color: #ffffff;42 display: flex;43 align-items: center;44 padding: 0 24px;45 box-sizing: border-box;46 }47 .app-bar .title {48 font-size: 42px;49 margin-left: 18px;50 letter-spacing: 0.5px;51 }52 .app-bar .spacer { flex: 1; }53 54 /* Ad banner */55 .ad-banner {56 position: absolute;57 top: 220px;58 left: 0;59 width: 1080px;60 height: 160px;61 background: #E0E0E0;62 border-top: 1px solid #c9c9c9;63 border-bottom: 1px solid #c9c9c9;64 display: flex;65 align-items: center;66 justify-content: center;67 color: #757575;68 box-sizing: border-box;69 }70 71 /* Content area */72 .content {73 position: absolute;74 top: 380px;75 left: 0;76 width: 1080px;77 height: 880px;78 background: #e9edf5;79 }80 .reminder-card {81 margin: 24px;82 padding: 26px;83 background: #f5f7fc;84 border-radius: 14px;85 box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset;86 position: relative;87 }88 .reminder-title {89 font-size: 48px;90 color: #1f2a3a;91 margin-bottom: 18px;92 }93 .reminder-info {94 font-size: 32px;95 color: #596273;96 line-height: 44px;97 }98 .right-info {99 position: absolute;100 right: 26px;101 top: 36px;102 display: flex;103 align-items: center;104 gap: 18px;105 }106 .right-info .days {107 font-size: 32px;108 color: #6a7282;109 }110 .star-icon {111 width: 44px;112 height: 44px;113 }114 115 /* Tabs */116 .tabs {117 position: absolute;118 bottom: 1040px;119 left: 0;120 width: 1080px;121 height: 100px;122 display: flex;123 align-items: center;124 justify-content: space-between;125 padding: 0 140px;126 box-sizing: border-box;127 color: #2e405f;128 background: #eef1f7;129 border-top: 1px solid #d8dce6;130 }131 .tab {132 font-size: 34px;133 letter-spacing: 0.8px;134 }135 .tab.active {136 font-weight: 700;137 position: relative;138 }139 .tab.active::after {140 content: "";141 position: absolute;142 left: 0;143 bottom: -16px;144 width: 100%;145 height: 6px;146 background: #2e405f;147 border-radius: 3px;148 }149 .tab.inactive { color: #8b93a3; }150 151 /* Floating Action Button */152 .fab {153 position: absolute;154 right: 40px;155 bottom: 1180px;156 width: 150px;157 height: 150px;158 background: #2e405f;159 border-radius: 50%;160 box-shadow: 0 10px 20px rgba(0,0,0,0.25);161 display: flex;162 align-items: center;163 justify-content: center;164 }165 .fab svg { width: 70px; height: 70px; }166 167 /* Keyboard */168 .keyboard {169 position: absolute;170 bottom: 0;171 left: 0;172 width: 1080px;173 height: 1040px;174 background: #ebeaf0;175 box-shadow: 0 -2px 6px rgba(0,0,0,0.08);176 }177 .kb-suggest {178 height: 120px;179 background: #f3f3f8;180 display: flex;181 align-items: center;182 padding: 0 28px;183 box-sizing: border-box;184 color: #2e405f;185 font-size: 42px;186 border-bottom: 1px solid #d7d7de;187 justify-content: center;188 gap: 20px;189 }190 .kb-row {191 display: flex;192 gap: 18px;193 padding: 26px 28px;194 box-sizing: border-box;195 justify-content: center;196 }197 .key {198 width: 92px;199 height: 120px;200 background: #ffffff;201 border-radius: 20px;202 box-shadow: inset 0 0 0 1px #d8d8df;203 display: flex;204 align-items: center;205 justify-content: center;206 font-size: 46px;207 color: #1f2a3a;208 }209 .key.wide { width: 140px; }210 .space { width: 520px; }211 .circle-btn {212 width: 120px;213 height: 120px;214 border-radius: 60px;215 background: #dcdcef;216 display: flex;217 align-items: center;218 justify-content: center;219 color: #2e405f;220 font-size: 38px;221 box-shadow: inset 0 0 0 1px #c7c7d4;222 }223 .key.small { font-size: 38px; }224</style>225</head>226<body>227<div id="render-target">228 229 <!-- Status Bar -->230 <div class="status-bar">231 <div class="left">8:25</div>232 <div class="right">233 <!-- Simple status icons -->234 <svg width="34" height="24">235 <rect x="2" y="8" width="18" height="10" fill="#ffffff" opacity="0.8"></rect>236 <rect x="22" y="10" width="8" height="6" fill="#ffffff" opacity="0.8"></rect>237 </svg>238 <svg width="30" height="24">239 <path d="M2 20 L28 20 L15 4 Z" fill="none" stroke="#fff" stroke-width="2"></path>240 </svg>241 <svg width="34" height="24">242 <rect x="2" y="6" width="24" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect>243 <rect x="26" y="10" width="6" height="4" fill="#fff"></rect>244 </svg>245 </div>246 </div>247 248 <!-- App Bar -->249 <div class="app-bar">250 <!-- Back arrow -->251 <svg width="44" height="44">252 <path d="M30 8 L12 22 L30 36" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>253 </svg>254 <div class="title">Boombox</div>255 <div class="spacer"></div>256 <!-- Close icon -->257 <svg width="40" height="40">258 <path d="M8 8 L32 32 M32 8 L8 32" stroke="#fff" stroke-width="4" stroke-linecap="round"></path>259 </svg>260 </div>261 262 <!-- Ad Banner Placeholder -->263 <div class="ad-banner">264 [IMG: Ad Banner - Luxury Decorative Lighting]265 </div>266 267 <!-- Content Area -->268 <div class="content">269 <div class="reminder-card">270 <div class="reminder-title">Boombox</div>271 <div class="reminder-info">06/26/2023 10:15 AM</div>272 <div class="reminder-info">Every Month</div>273 274 <div class="right-info">275 <div class="days">in 13 days</div>276 <svg class="star-icon" viewBox="0 0 24 24">277 <path d="M12 2 L15 9 L22 9 L17 14 L19 21 L12 17 L5 21 L7 14 L2 9 L9 9 Z" fill="#5b64cc"></path>278 </svg>279 </div>280 </div>281 </div>282 283 <!-- Tabs -->284 <div class="tabs">285 <div class="tab active">ACTIVE</div>286 <div class="tab inactive">COMPLETED</div>287 </div>288 289 <!-- Floating Action Button -->290 <div class="fab">291 <svg viewBox="0 0 24 24">292 <path d="M12 5 L12 19 M5 12 L19 12" stroke="#fff" stroke-width="3" stroke-linecap="round"></path>293 </svg>294 </div>295 296 <!-- Keyboard -->297 <div class="keyboard">298 <div class="kb-suggest">299 <!-- Left small chevron -->300 <svg width="40" height="40" style="position:absolute; left:18px;">301 <circle cx="20" cy="20" r="20" fill="#dcdcef"></circle>302 <path d="M24 10 L14 20 L24 30" stroke="#2e405f" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>303 </svg>304 Boombox305 <svg width="40" height="40" style="position:absolute; right:18px;">306 <path d="M20 8 C24 8 27 11 27 15 L27 19 C27 23 24 26 20 26 C16 26 13 23 13 19 L13 15 C13 11 16 8 20 8 Z" fill="none" stroke="#2e405f" stroke-width="2"></path>307 <rect x="18" y="26" width="4" height="8" fill="#2e405f"></rect>308 </svg>309 </div>310 311 <div class="kb-row">312 <div class="key">q</div>313 <div class="key">w</div>314 <div class="key">e</div>315 <div class="key">r</div>316 <div class="key">t</div>317 <div class="key">y</div>318 <div class="key">u</div>319 <div class="key">i</div>320 <div class="key">o</div>321 <div class="key">p</div>322 </div>323 324 <div class="kb-row" style="padding-left: 78px; padding-right: 78px;">325 <div class="key">a</div>326 <div class="key">s</div>327 <div class="key">d</div>328 <div class="key">f</div>329 <div class="key">g</div>330 <div class="key">h</div>331 <div class="key">j</div>332 <div class="key">k</div>333 <div class="key">l</div>334 </div>335 336 <div class="kb-row" style="padding-left: 160px; padding-right: 160px;">337 <div class="key">z</div>338 <div class="key">x</div>339 <div class="key">c</div>340 <div class="key">v</div>341 <div class="key">b</div>342 <div class="key">n</div>343 <div class="key">m</div>344 </div>345 346 <div class="kb-row">347 <div class="circle-btn">?123</div>348 <div class="key small">,</div>349 <div class="circle-btn">😊</div>350 <div class="key space"></div>351 <div class="key small">.</div>352 <div class="circle-btn">353 <svg width="44" height="44">354 <path d="M8 10 L36 10 L36 34 L8 34 Z M12 14 L12 30 L32 22 Z" fill="#2e405f"></path>355 </svg>356 </div>357 </div>358 </div>359 360 <!-- Ad placeholder explanation on card top area to match screenshot -->361 <div style="position:absolute; top:220px; right:40px;">362 <!-- Right pointing ad caret represented lightly -->363 </div>364 365</div>366</body>367</html>