GD-ML/AndroidCode

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: #0f1b21;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #e6edf0;17  }18 19  /* Status bar */20  .status-bar {21    height: 96px;22    padding: 0 36px;23    background: #2f4e5c;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #d7e3ea;28    font-size: 40px;29    letter-spacing: 1px;30  }31  .status-right {32    display: flex;33    gap: 28px;34    align-items: center;35  }36  .status-icon { width: 44px; height: 44px; opacity: 0.9; }37 38  /* App bar */39  .appbar {40    height: 140px;41    background: #2f4e5c;42    display: flex;43    align-items: center;44    padding: 0 32px;45    gap: 24px;46    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.06);47  }48  .hamburger {49    width: 72px; height: 72px;50    display: grid; place-items: center;51  }52  .search-wrap {53    flex: 1;54    position: relative;55  }56  .search-box {57    height: 100px;58    background: #1f2931;59    border-radius: 20px;60    display: flex;61    align-items: center;62    padding: 0 32px 0 96px;63    color: #a9b7c0;64    font-size: 44px;65    box-shadow: 0 2px 0 rgba(0,0,0,0.2) inset;66  }67  .search-icon {68    position: absolute; left: 30px; top: 50%; transform: translateY(-50%);69    width: 52px; height: 52px; opacity: 0.8;70  }71  .mic {72    width: 72px; height: 72px; display: grid; place-items: center;73  }74 75  /* Promo banner */76  .promo {77    height: 120px;78    background: #0d1215;79    display: flex;80    align-items: center;81    padding: 0 28px 0 24px;82    gap: 24px;83    color: #ffffff;84    border-top: 1px solid rgba(255,255,255,0.06);85    border-bottom: 1px solid rgba(255,255,255,0.06);86  }87  .promo .circle {88    width: 88px; height: 88px; border-radius: 44px;89    border: 2px solid #fff; display: grid; place-items: center;90  }91  .promo-text {92    flex: 1;93    font-size: 44px;94    font-weight: 600;95    letter-spacing: 0.2px;96  }97  .promo-actions {98    display: flex; align-items: center; gap: 32px;99  }100  .icon-32 { width: 64px; height: 64px; }101 102  /* Hero word section */103  .hero {104    background: linear-gradient(180deg, #2f5f6e 0%, #204a57 100%);105    padding: 80px 40px 52px;106    text-align: center;107  }108  .hero .word {109    font-family: Georgia, "Times New Roman", serif;110    font-size: 144px;111    color: #ffffff;112    font-weight: 700;113    letter-spacing: 1px;114    margin: 20px 0 40px;115  }116  .hero .actions {117    display: flex;118    justify-content: center;119    gap: 48px;120  }121  .circle-outline {122    width: 120px; height: 120px;123    border-radius: 60px;124    border: 3px solid rgba(255,255,255,0.95);125    display: grid; place-items: center;126  }127  .circle-outline svg { width: 64px; height: 64px; fill: none; stroke: #fff; stroke-width: 3; }128 129  /* Content section */130  .content {131    background: #0f171b;132    padding: 56px 56px 0;133  }134  .pos {135    font-family: Georgia, "Times New Roman", serif;136    font-weight: 700;137    color: #6f90a1;138    font-size: 72px;139    margin-bottom: 10px;140  }141  .pron {142    display: flex;143    align-items: center;144    gap: 18px;145    font-size: 48px;146    color: #b7c6cc;147  }148  .pron .bold { color: #ffffff; font-weight: 600; }149  .small-muted { color: #b7c6cc; font-style: italic; font-size: 42px; margin-top: 16px; }150  .section-title {151    font-size: 72px;152    color: #8fb0be;153    font-weight: 800;154    margin: 44px 0 12px;155  }156  .defs { margin-top: 12px; }157  .def {158    display: flex;159    gap: 24px;160    margin: 28px 0;161    line-height: 1.5;162    color: #e7eef2;163    font-size: 52px;164  }165  .def-num {166    color: #a7c1cd;167    font-weight: 800;168    width: 56px;169  }170  .def a { color: #8fbad0; text-decoration: underline; }171  .example {172    color: #a7c1cd;173    font-style: italic;174    margin-top: 8px;175    font-size: 48px;176  }177 178  /* Bottom tabs and ad */179  .tabs {180    position: relative;181    background: #2f5a6c;182    height: 116px;183    margin-top: 44px;184    display: flex;185    align-items: flex-end;186    padding: 0 40px;187    gap: 60px;188  }189  .tab {190    color: #e9f2f6;191    font-size: 56px;192    padding-bottom: 18px;193    position: relative;194    opacity: 0.9;195  }196  .tab.active {197    font-weight: 700;198  }199  .tab.active::after {200    content: "";201    position: absolute;202    left: 0; right: 0; bottom: 0;203    height: 8px; background: #e9f2f6; border-radius: 4px;204  }205  .ad {206    height: 180px;207    background: #E0E0E0;208    border: 1px solid #BDBDBD;209    color: #757575;210    display: flex;211    justify-content: center;212    align-items: center;213    font-size: 44px;214  }215 216  /* Gesture bar */217  .gesture {218    position: absolute;219    bottom: 24px; left: 50%;220    transform: translateX(-50%);221    width: 320px; height: 12px;222    background: #d9dde0;223    border-radius: 8px;224    opacity: 0.7;225  }226</style>227</head>228<body>229<div id="render-target">230  <!-- Status bar -->231  <div class="status-bar">232    <div>11:25</div>233    <div class="status-right">234      <!-- simple status icons -->235      <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">236        <path d="M3 18h18M6 14h12M9 10h6M12 6h0"></path>237      </svg>238      <svg class="status-icon" viewBox="0 0 24 24" fill="currentColor">239        <path d="M2 18a10 10 0 0 1 20 0h-3a7 7 0 0 0-14 0H2z"></path>240      </svg>241      <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">242        <path d="M4 10h16v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V10z"></path>243        <path d="M8 10V6a4 4 0 0 1 8 0v4"></path>244      </svg>245      <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">246        <rect x="4" y="6" width="16" height="12" rx="2"></rect>247        <path d="M22 10v4"></path>248      </svg>249    </div>250  </div>251 252  <!-- App bar with search -->253  <div class="appbar">254    <div class="hamburger">255      <svg viewBox="0 0 24 24" width="56" height="56" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round">256        <path d="M3 6h18M3 12h18M3 18h18"></path>257      </svg>258    </div>259    <div class="search-wrap">260      <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="#b8c8d0" stroke-width="2">261        <circle cx="11" cy="11" r="7"></circle>262        <path d="M21 21l-4.3-4.3"></path>263      </svg>264      <div class="search-box">Search</div>265    </div>266    <div class="mic">267      <svg viewBox="0 0 24 24" width="56" height="56" fill="none" stroke="#fff" stroke-width="2">268        <rect x="9" y="3" width="6" height="11" rx="3"></rect>269        <path d="M5 11a7 7 0 0 0 14 0M12 18v3"></path>270      </svg>271    </div>272  </div>273 274  <!-- Promo banner -->275  <div class="promo">276    <div class="circle">277      <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round">278        <path d="M12 6v8"></path>279        <path d="M8 10l4-4 4 4"></path>280      </svg>281    </div>282    <div class="promo-text">Supercharge Your Dictionary</div>283    <div class="promo-actions">284      <svg class="icon-32" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">285        <path d="M9 6l6 6-6 6"></path>286      </svg>287      <svg class="icon-32" viewBox="0 0 24 24" fill="none" stroke="#b8c8d0" stroke-width="2">288        <path d="M6 6l12 12M18 6L6 18"></path>289      </svg>290    </div>291  </div>292 293  <!-- Hero -->294  <div class="hero">295    <div class="word">disaster</div>296    <div class="actions">297      <div class="circle-outline">298        <svg viewBox="0 0 24 24">299          <path d="M6 3h12v18l-6-4-6 4V3z"></path>300        </svg>301      </div>302      <div class="circle-outline">303        <svg viewBox="0 0 24 24">304          <circle cx="18" cy="5" r="3"></circle>305          <circle cx="6" cy="12" r="3"></circle>306          <circle cx="18" cy="19" r="3"></circle>307          <path d="M8.8 10.7l5.4-3.4M8.8 13.3l5.4 3.4" stroke-linecap="round"></path>308        </svg>309      </div>310    </div>311  </div>312 313  <!-- Content -->314  <div class="content">315    <div class="pos">noun</div>316    <div class="pron">317      di·sas·ter | \ di-ˈza-stər , -ˈsa- \318      <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#cfe0e6" stroke-width="2">319        <path d="M4 8h5l7-4v16l-7-4H4z"></path>320      </svg>321      <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#cfe0e6" stroke-width="2">322        <path d="M4 8h5l7-4v16l-7-4H4z"></path>323      </svg>324    </div>325    <div class="small-muted">plural <span class="bold">disasters</span></div>326 327    <div class="section-title">Definition</div>328 329    <div class="defs">330      <div class="def">331        <div class="def-num">1</div>332        <div>333          : a sudden <a href="#">calamitous</a> event bringing great damage, loss, or destruction334          <div class="example">// natural disasters</div>335        </div>336      </div>337 338      <div class="def">339        <div class="def-num">2</div>340        <div>341          : someone or something that is very bad: such as342          <div style="display:flex; gap:18px; margin-top:14px;">343            <div class="def-num" style="width:auto;">a</div>344            <div>: someone or something that is extremely unsuccessful345              <div class="example">// The wedding reception was a complete disaster.</div>346            </div>347          </div>348        </div>349      </div>350    </div>351 352    <!-- Tabs -->353    <div class="tabs">354      <div class="tab active">Dictionary</div>355      <div class="tab">Thesaurus</div>356    </div>357 358    <!-- Ad placeholder -->359    <div class="ad">[IMG: Horizontal Advertisement Banner]</div>360 361    <div style="height: 280px;"></div>362  </div>363 364  <!-- Gesture bar -->365  <div class="gesture"></div>366</div>367</body>368</html>