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 - Disaster</title>7<style>8 body { margin:0; padding:0; background: transparent; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #274d5a;15 color: #ffffff;16 font-family: "Segoe UI", Arial, sans-serif;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0; left: 0;23 width: 100%;24 height: 90px;25 background: rgba(15, 48, 58, 0.85);26 display: flex;27 align-items: center;28 justify-content: space-between;29 padding: 0 32px;30 box-sizing: border-box;31 font-size: 36px;32 letter-spacing: 1px;33 }34 .status-right {35 display: flex;36 align-items: center;37 gap: 24px;38 }39 .icon {40 width: 48px; height: 48px;41 }42 43 /* Header with search */44 .app-header {45 position: relative;46 margin-top: 90px;47 background: #1f4c5a;48 padding: 26px 32px 24px;49 box-sizing: border-box;50 }51 .header-row {52 display: flex;53 align-items: center;54 gap: 24px;55 }56 .hamburger {57 width: 64px; height: 64px;58 }59 .mic {60 width: 64px; height: 64px;61 margin-left: auto;62 }63 .search {64 flex: 1;65 height: 96px;66 background: #1f2326;67 border-radius: 24px;68 display: flex;69 align-items: center;70 padding: 0 24px;71 gap: 20px;72 box-shadow: inset 0 0 0 1px #333;73 }74 .search span {75 color: #cfd8dc;76 font-size: 38px;77 }78 79 /* Promo bar */80 .promo {81 background: #0e1a1f;82 height: 120px;83 display: flex;84 align-items: center;85 padding: 0 24px;86 box-sizing: border-box;87 border-top: 1px solid rgba(255,255,255,0.08);88 border-bottom: 1px solid rgba(255,255,255,0.08);89 }90 .promo-left {91 width: 96px; height: 96px;92 border-radius: 48px;93 border: 2px solid #ffffff;94 display: flex;95 align-items: center;96 justify-content: center;97 margin-right: 24px;98 }99 .promo-text {100 font-size: 40px;101 font-weight: 600;102 letter-spacing: 0.5px;103 }104 .promo-right {105 margin-left: auto;106 display: flex;107 align-items: center;108 gap: 28px;109 }110 .vline {111 width: 2px; height: 64px; background: rgba(255,255,255,0.25);112 }113 114 /* Hero word */115 .hero {116 background: linear-gradient(180deg, #1e5666 0%, #154b5a 100%);117 padding: 90px 32px 64px;118 box-sizing: border-box;119 text-align: center;120 }121 .word {122 font-size: 120px;123 font-weight: 700;124 margin: 0 0 36px;125 letter-spacing: 1px;126 }127 .hero-actions {128 display: flex;129 justify-content: center;130 gap: 40px;131 }132 .action-circle {133 width: 100px; height: 100px;134 border-radius: 50%;135 border: 3px solid #e7f2f5;136 display: flex;137 align-items: center;138 justify-content: center;139 }140 .action-circle svg { width: 54px; height: 54px; }141 142 /* Content */143 .content {144 background: #0f1214;145 padding: 48px 40px 220px;146 box-sizing: border-box;147 color: #e9eff2;148 line-height: 1.55;149 }150 .section-title {151 color: #87b6c4;152 font-size: 64px;153 font-weight: 700;154 margin: 16px 0 24px;155 }156 .pos {157 color: #87b6c4;158 font-size: 64px;159 font-weight: 700;160 margin: 0 0 16px;161 }162 .pron {163 font-size: 40px;164 color: #b5d0d8;165 display: flex;166 align-items: center;167 gap: 16px;168 flex-wrap: wrap;169 }170 .audio {171 width: 56px; height: 56px;172 border-radius: 28px;173 border: 2px solid #cfe3e8;174 display: inline-flex;175 align-items: center;176 justify-content: center;177 margin: 0 6px;178 }179 .italic { font-style: italic; font-size: 40px; color: #dfe8ea; }180 .underline { color: #8dc2cf; text-decoration: underline; }181 .def-number {182 font-size: 48px;183 color: #e8f4f7;184 font-weight: 700;185 margin: 32px 0 10px;186 display: flex;187 align-items: baseline;188 gap: 8px;189 }190 .def {191 font-size: 44px;192 color: #dbe6ea;193 margin: 0 0 18px 0;194 }195 .example {196 color: #a7bec5;197 font-size: 42px;198 margin: 8px 0 18px 34px;199 }200 .letter {201 font-size: 46px;202 font-weight: 700;203 color: #e8f4f7;204 margin-top: 14px;205 }206 207 /* Bottom tabs */208 .tabs {209 position: absolute;210 bottom: 64px;211 left: 0;212 width: 100%;213 background: #1e5666;214 height: 120px;215 display: flex;216 align-items: center;217 padding: 0 60px;218 box-sizing: border-box;219 gap: 60px;220 border-top: 1px solid rgba(255,255,255,0.12);221 }222 .tab {223 font-size: 44px;224 color: #cfe3e8;225 position: relative;226 padding-bottom: 10px;227 }228 .tab.active { color: #ffffff; }229 .tab.active::after {230 content: "";231 position: absolute; left: 0; bottom: 0;232 width: 100%; height: 6px; background: #cfe3e8; border-radius: 3px;233 }234 235 /* Home pill */236 .home-pill {237 position: absolute;238 bottom: 16px; left: 50%;239 transform: translateX(-50%);240 width: 220px; height: 16px;241 background: #e8e8e8;242 border-radius: 12px;243 opacity: 0.9;244 }245</style>246</head>247<body>248<div id="render-target">249 250 <!-- Status bar -->251 <div class="status-bar">252 <div>11:23</div>253 <div class="status-right">254 <!-- Simple app icons placeholders -->255 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">256 <circle cx="12" cy="12" r="10"></circle>257 <path d="M7 12h10"></path>258 </svg>259 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">260 <rect x="3" y="7" width="18" height="10" rx="2"></rect>261 </svg>262 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">263 <path d="M3 17l7-7 4 4 7-7"></path>264 </svg>265 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">266 <circle cx="17" cy="7" r="2"></circle>267 <circle cx="7" cy="12" r="2"></circle>268 <circle cx="17" cy="17" r="2"></circle>269 </svg>270 <!-- Wi-Fi -->271 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">272 <path d="M2 8c5-5 15-5 20 0"></path>273 <path d="M5 11c4-4 10-4 14 0"></path>274 <path d="M8 14c3-3 5-3 8 0"></path>275 <circle cx="12" cy="18" r="1.5" fill="#fff"></circle>276 </svg>277 <!-- Battery -->278 <svg class="icon" viewBox="0 0 28 24" fill="none" stroke="#fff" stroke-width="2">279 <rect x="2" y="6" width="20" height="12" rx="2"></rect>280 <rect x="4" y="8" width="14" height="8" fill="#fff"></rect>281 <rect x="22" y="9" width="4" height="6" rx="1"></rect>282 </svg>283 </div>284 </div>285 286 <!-- Header with search -->287 <div class="app-header">288 <div class="header-row">289 <!-- Hamburger -->290 <svg class="hamburger" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">291 <path d="M3 6h18M3 12h18M3 18h18"></path>292 </svg>293 294 <div class="search">295 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#d0d6da" stroke-width="2">296 <circle cx="10" cy="10" r="6"></circle>297 <path d="M21 21l-5.5-5.5"></path>298 </svg>299 <span>Search</span>300 </div>301 302 <!-- Microphone -->303 <svg class="mic" viewBox="0 0 24 24" fill="none" stroke="#d0d6da" stroke-width="2">304 <rect x="9" y="4" width="6" height="10" rx="3"></rect>305 <path d="M5 10v2a7 7 0 0 0 14 0v-2M12 20v-3"></path>306 </svg>307 </div>308 </div>309 310 <!-- Promo bar -->311 <div class="promo">312 <div class="promo-left">313 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">314 <path d="M12 16V8"></path>315 <path d="M8 12l4-4 4 4"></path>316 </svg>317 </div>318 <div class="promo-text">Supercharge Your Dictionary</div>319 <div class="promo-right">320 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">321 <path d="M9 6l6 6-6 6"></path>322 </svg>323 <div class="vline"></div>324 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#b9ced3" stroke-width="2">325 <path d="M6 6l12 12M18 6l-12 12"></path>326 </svg>327 </div>328 </div>329 330 <!-- Hero word -->331 <div class="hero">332 <h1 class="word">disaster</h1>333 <div class="hero-actions">334 <div class="action-circle">335 <!-- Bookmark icon -->336 <svg viewBox="0 0 24 24" fill="none" stroke="#e7f2f5" stroke-width="2">337 <path d="M6 3h12v18l-6-4-6 4z"></path>338 </svg>339 </div>340 <div class="action-circle">341 <!-- Share icon -->342 <svg viewBox="0 0 24 24" fill="none" stroke="#e7f2f5" stroke-width="2">343 <circle cx="6" cy="12" r="2"></circle>344 <circle cx="18" cy="6" r="2"></circle>345 <circle cx="18" cy="18" r="2"></circle>346 <path d="M8 12l8-6M8 12l8 6"></path>347 </svg>348 </div>349 </div>350 </div>351 352 <!-- Content -->353 <div class="content">354 <div class="pos">noun</div>355 356 <div class="pron">357 di·sas·ter | \ di-'za-stər , 'sa- \358 <span class="audio">359 <svg viewBox="0 0 24 24" fill="none" stroke="#cfe3e8" stroke-width="2">360 <path d="M4 9v6l5-3V9z"></path>361 <path d="M14 10c2 0 3 1 3 2s-1 2-3 2"></path>362 </svg>363 </span>364 <span class="audio">365 <svg viewBox="0 0 24 24" fill="none" stroke="#cfe3e8" stroke-width="2">366 <path d="M4 9v6l5-3V9z"></path>367 <path d="M14 10c2 0 3 1 3 2s-1 2-3 2"></path>368 </svg>369 </span>370 </div>371 372 <div class="italic">plural <b>disasters</b></div>373 374 <div class="section-title">Definition</div>375 376 <div class="def-number">1 <span class="def">: a sudden <span class="underline">calamitous</span> event bringing great damage, loss, or destruction</span></div>377 <div class="example">// <span class="underline">natural disasters</span></div>378 379 <div class="def-number">2 <span class="def">: someone or something that is very bad: such as</span></div>380 381 <div class="letter">a <span class="def">: someone or something that is extremely unsuccessful</span></div>382 <div class="example">// The wedding reception was a complete <i>disaster</i>.</div>383 <div class="example">// Brilliant at <span class="underline">maths</span> and languages, she was a <i>disaster</i> in physical …</div>384 </div>385 386 <!-- Bottom tabs -->387 <div class="tabs">388 <div class="tab active">Dictionary</div>389 <div class="tab">Thesaurus</div>390 </div>391 392 <div class="home-pill"></div>393</div>394</body>395</html>