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>Dictionary UI - Disaster</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: #0f171c;15 color: #e9edf0;16 font-family: "Segoe UI", Arial, sans-serif;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0; left: 0; right: 0;23 height: 120px;24 background: #2c4f63;25 color: #fff;26 display: flex;27 align-items: center;28 padding: 0 32px;29 box-sizing: border-box;30 font-size: 36px;31 }32 .status-left { flex: 1; }33 .status-right {34 display: flex; align-items: center; gap: 26px; font-size: 0;35 }36 .status-icon {37 width: 42px; height: 42px;38 }39 40 /* Top search area */41 .topbar {42 position: absolute;43 top: 120px; left: 0; right: 0;44 height: 160px;45 display: flex; align-items: center;46 padding: 0 36px;47 box-sizing: border-box;48 gap: 26px;49 }50 .hamburger {51 width: 72px; height: 72px; fill: none; stroke: #fff; stroke-width: 10;52 }53 .search-field {54 flex: 1;55 height: 110px;56 background: #1f262b;57 border-radius: 24px;58 display: flex;59 align-items: center;60 padding: 0 28px;61 box-sizing: border-box;62 gap: 22px;63 }64 .search-icon { width: 48px; height: 48px; fill: none; stroke: #cfd8dc; stroke-width: 8; }65 .search-placeholder {66 font-size: 44px; color: #cfd8dc; opacity: 0.9;67 }68 .mic-btn {69 width: 66px; height: 66px; fill: none; stroke: #cfd8dc; stroke-width: 8;70 }71 72 /* Promo banner */73 .promo {74 position: absolute;75 top: 280px; left: 0; right: 0;76 height: 120px;77 background: #0a0f12;78 display: flex; align-items: center; justify-content: center;79 color: #fff; font-size: 44px; font-weight: 600;80 letter-spacing: 0.2px;81 }82 .promo .chevron {83 width: 36px; height: 36px; margin-left: 20px; fill: none; stroke: #fff; stroke-width: 8;84 }85 .promo .close {86 position: absolute; right: 32px;87 width: 52px; height: 52px; fill: none; stroke: #6ea1ba; stroke-width: 8;88 }89 .float-up {90 position: absolute;91 top: 286px; left: 30px;92 width: 94px; height: 94px;93 border-radius: 48px;94 border: 4px solid #fff;95 display: flex; align-items: center; justify-content: center;96 }97 .float-up svg { width: 50px; height: 50px; fill: none; stroke: #fff; stroke-width: 10; }98 99 /* Word header */100 .word-hero {101 position: absolute;102 top: 400px; left: 0; right: 0;103 height: 420px;104 background: linear-gradient(0deg, #a35428, #c96a2e);105 display: flex; flex-direction: column;106 align-items: center; justify-content: center;107 color: #fff;108 }109 .word-title {110 font-family: Georgia, "Times New Roman", serif;111 font-size: 116px;112 font-weight: 700;113 margin-bottom: 40px;114 }115 .hero-icons {116 display: flex; gap: 80px;117 }118 .circle-icon {119 width: 120px; height: 120px;120 border-radius: 60px;121 border: 6px solid #fff;122 display: flex; align-items: center; justify-content: center;123 }124 .circle-icon svg { width: 68px; height: 68px; fill: none; stroke: #fff; stroke-width: 10; }125 126 /* Content area */127 .content {128 position: absolute;129 top: 820px; left: 0; right: 0; bottom: 0;130 padding: 40px 38px 280px;131 box-sizing: border-box;132 background: #12181d;133 color: #e9edf0;134 line-height: 1.45;135 }136 .pos {137 color: #c77233; font-size: 54px; font-weight: 700; margin-bottom: 24px;138 }139 .section-head {140 color: #9fc2d3; font-size: 56px; font-weight: 800; margin: 8px 0 28px;141 }142 .sense {143 display: flex; gap: 24px; margin-bottom: 22px; align-items: flex-start;144 }145 .sense .num {146 font-size: 56px; font-weight: 800; color: #e9edf0; margin-top: 4px;147 }148 .sense-text {149 flex: 1; font-size: 44px; color: #dfe5e8;150 }151 .example {152 font-style: italic; color: #9fc2d3; font-size: 42px; margin: 16px 0 34px;153 }154 .label {155 color: #a6bcc9; font-weight: 800; font-size: 48px; margin: 30px 0 12px;156 }157 .links {158 font-size: 44px; color: #a6c9d8;159 }160 .links a {161 color: #a6c9d8; text-decoration: underline; margin-right: 16px;162 }163 164 /* Bottom tabs */165 .tabs {166 position: absolute;167 left: 0; right: 0;168 bottom: 240px;169 height: 120px;170 background: #8b512b;171 display: flex; justify-content: center; align-items: center;172 gap: 140px;173 color: #fff;174 font-size: 52px; font-weight: 700;175 }176 .tabs .active {177 position: relative;178 }179 .tabs .active::after {180 content: "";181 position: absolute;182 left: 0; right: 0; bottom: -16px;183 height: 6px; background: #fff;184 }185 186 /* Ad strip */187 .ad-strip {188 position: absolute;189 left: 0; right: 0; bottom: 120px;190 height: 160px;191 background: #0f1418;192 display: flex; gap: 20px; padding: 16px 20px; box-sizing: border-box;193 }194 .ad-item {195 flex: 1; height: 128px;196 background: #E0E0E0; border: 1px solid #BDBDBD;197 display: flex; justify-content: center; align-items: center;198 color: #757575; font-size: 36px; text-align: center; padding: 0 10px;199 }200 201 /* Home pill */202 .home-pill {203 position: absolute;204 bottom: 42px; left: 50%;205 transform: translateX(-50%);206 width: 300px; height: 16px; border-radius: 10px;207 background: #8a9096; opacity: 0.6;208 }209</style>210</head>211<body>212<div id="render-target">213 214 <!-- Status Bar -->215 <div class="status-bar">216 <div class="status-left">11:25</div>217 <div class="status-right">218 <!-- Simple status icons -->219 <svg class="status-icon" viewBox="0 0 24 24">220 <circle cx="12" cy="12" r="10" stroke="#fff" fill="none" stroke-width="2"></circle>221 <path d="M12 6v6l4 2" stroke="#fff" fill="none" stroke-width="2"></path>222 </svg>223 <svg class="status-icon" viewBox="0 0 24 24">224 <path d="M4 18h16M6 14h12M8 10h8M10 6h4" stroke="#fff" fill="none" stroke-width="2"></path>225 </svg>226 <svg class="status-icon" viewBox="0 0 24 24">227 <path d="M7 20h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3z" stroke="#fff" fill="none" stroke-width="2"></path>228 <rect x="9" y="8" width="6" height="8" fill="#fff"></rect>229 </svg>230 </div>231 </div>232 233 <!-- Top search bar -->234 <div class="topbar">235 <svg class="hamburger" viewBox="0 0 100 100">236 <path d="M12 24h76M12 50h76M12 76h76"></path>237 </svg>238 <div class="search-field">239 <svg class="search-icon" viewBox="0 0 24 24">240 <circle cx="10" cy="10" r="6"></circle>241 <path d="M15 15l6 6"></path>242 </svg>243 <div class="search-placeholder">Search</div>244 <div style="margin-left:auto;">245 <svg class="mic-btn" viewBox="0 0 24 24">246 <rect x="8" y="4" width="8" height="12" rx="4"></rect>247 <path d="M6 12c0 4 12 4 12 0M12 16v4M9 20h6"></path>248 </svg>249 </div>250 </div>251 </div>252 253 <!-- Promo banner -->254 <div class="promo">255 <span>Supercharge Your Dictionary</span>256 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 4l8 8-8 8"></path></svg>257 <svg class="close" viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"></path></svg>258 </div>259 <div class="float-up">260 <svg viewBox="0 0 24 24"><path d="M12 18V6M6 10l6-6 6 6"></path></svg>261 </div>262 263 <!-- Word hero -->264 <div class="word-hero">265 <div class="word-title">disaster</div>266 <div class="hero-icons">267 <div class="circle-icon">268 <!-- bookmark -->269 <svg viewBox="0 0 24 24">270 <path d="M6 4h12v16l-6-4-6 4z"></path>271 </svg>272 </div>273 <div class="circle-icon">274 <!-- share -->275 <svg viewBox="0 0 24 24">276 <circle cx="6" cy="12" r="3"></circle>277 <circle cx="18" cy="6" r="3"></circle>278 <circle cx="18" cy="18" r="3"></circle>279 <path d="M8.7 10.9L15.3 7.1M8.7 13.1L15.3 16.9"></path>280 </svg>281 </div>282 </div>283 </div>284 285 <!-- Content -->286 <div class="content">287 <div class="pos">noun</div>288 <div class="section-head">Synonyms & Antonyms</div>289 290 <div class="sense">291 <div class="num">1</div>292 <div class="sense-text">a sudden violent event that brings about great loss or destruction</div>293 </div>294 <div class="example">// hurricanes are natural disasters</div>295 296 <div class="label">Synonyms</div>297 <div class="links">298 <a href="#">apocalypse</a>,299 <a href="#">calamity</a>,300 <a href="#">cataclysm</a>,301 <a href="#">catastrophe</a>,302 <a href="#">debacle</a>303 <span style="color:#a6c9d8;">(also <a href="#">débâcle</a>)</span>,304 <a href="#">tragedy</a>305 </div>306 307 <div class="label" style="margin-top:40px;">Related Words</div>308 <div class="links">309 <a href="#">bloodbath</a>,310 <a href="#">collapse</a>,311 <a href="#">crash</a>,312 <a href="#">meltdown</a>,313 <a href="#">Armageddon</a>,314 <a href="#">doomsday</a>,315 <a href="#">end-time</a>,316 <a href="#">convulsion</a>,317 <a href="#">paroxysm</a>,318 <a href="#">upheaval</a>319 </div>320 </div>321 322 <!-- Bottom tabs -->323 <div class="tabs">324 <div>Dictionary</div>325 <div class="active">Thesaurus</div>326 </div>327 328 <!-- Ad strip -->329 <div class="ad-strip">330 <div class="ad-item">[IMG: Ad - Retail Brand]</div>331 <div class="ad-item">[IMG: Ad - Sale Banner]</div>332 <div class="ad-item">[IMG: Ad - Offer 50% Off]</div>333 </div>334 335 <!-- Home indicator pill -->336 <div class="home-pill"></div>337 338</div>339</body>340</html>