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 Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #0f1418;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 color: #e9edf0;17 }18 19 /* Top gradient header area */20 .header {21 position: absolute;22 top: 0;23 left: 0;24 width: 1080px;25 height: 660px;26 background: linear-gradient(180deg, #2e5467 0%, #274c5e 60%, #234655 100%);27 }28 29 /* Status bar */30 .status-bar {31 height: 96px;32 padding: 0 32px;33 display: flex;34 align-items: center;35 justify-content: space-between;36 color: #d8e3ea;37 font-weight: 600;38 letter-spacing: 0.5px;39 }40 .status-left { font-size: 36px; }41 .status-right {42 display: flex;43 align-items: center;44 gap: 28px;45 }46 .status-dot {47 width: 12px; height: 12px; background: #cdd7dd; border-radius: 50%;48 display: inline-block;49 }50 .status-icon {51 width: 42px; height: 24px; border: 3px solid #cdd7dd; border-radius: 6px; position: relative;52 }53 .status-icon::after { content: ""; position: absolute; right: -8px; top: 8px; width: 6px; height: 8px; background: #cdd7dd; border-radius: 2px; }54 .battery {55 width: 50px; height: 26px; border: 3px solid #cdd7dd; border-radius: 6px; position: relative;56 }57 .battery::after { content: ""; position: absolute; right: -8px; top: 7px; width: 6px; height: 12px; background: #cdd7dd; border-radius: 2px; }58 .battery-fill { position: absolute; left: 3px; top: 3px; height: 18px; width: 30px; background: #cdd7dd; border-radius: 3px; }59 60 /* Search row */61 .search-row {62 margin: 16px 32px 0 32px;63 display: flex;64 align-items: center;65 gap: 24px;66 }67 .icon-btn {68 width: 80px; height: 80px; border-radius: 12px; display: flex; align-items: center; justify-content: center;69 }70 .menu-btn svg, .mic-btn svg { fill: none; stroke: #cfd8dc; stroke-width: 8; }71 .search-box {72 flex: 1;73 height: 100px;74 background: #1e2328;75 border-radius: 20px;76 box-shadow: inset 0 0 0 2px rgba(0,0,0,0.35);77 display: flex;78 align-items: center;79 padding: 0 28px;80 gap: 22px;81 color: #cfd8dc;82 font-size: 42px;83 }84 .search-box .placeholder { color: #aebbc4; }85 .search-box svg { stroke: #cfd8dc; stroke-width: 10; fill: none; }86 87 /* Promo banner */88 .promo {89 margin-top: 24px;90 width: 1080px;91 height: 120px;92 background: #0c0f12;93 display: flex;94 align-items: center;95 justify-content: space-between;96 color: #ffffff;97 padding: 0 28px;98 box-sizing: border-box;99 }100 .promo-left {101 display: flex;102 align-items: center;103 gap: 24px;104 }105 .circle-outline {106 width: 74px; height: 74px; border: 3px solid #ffffff; border-radius: 50%;107 display: flex; align-items: center; justify-content: center;108 }109 .promo-text { font-size: 46px; font-weight: 600; }110 .promo-right { display: flex; align-items: center; gap: 26px; }111 .promo-chevron, .promo-close { width: 56px; height: 56px; }112 113 /* Word hero */114 .hero {115 width: 1080px;116 padding-top: 40px;117 text-align: center;118 color: #e9edf0;119 }120 .word {121 font-family: "Georgia", "Times New Roman", serif;122 font-size: 152px;123 font-weight: 700;124 letter-spacing: 1px;125 }126 .hero-icons {127 margin-top: 26px;128 display: flex;129 justify-content: center;130 gap: 50px;131 }132 .circle-icon {133 width: 110px; height: 110px; border: 4px solid #cfe0ea; border-radius: 50%;134 display: flex; align-items: center; justify-content: center;135 }136 .circle-icon svg { stroke: #cfe0ea; stroke-width: 10; fill: none; }137 138 /* Definition section */139 .content {140 position: absolute;141 top: 660px;142 left: 0;143 width: 1080px;144 background: #0f1317;145 color: #e9edf0;146 padding: 40px 44px 0 44px;147 box-sizing: border-box;148 }149 .pos {150 font-family: "Georgia", serif;151 font-size: 64px;152 font-weight: 700;153 color: #7fa0b4;154 margin-bottom: 12px;155 }156 .pron {157 font-size: 44px;158 color: #c7d3db;159 display: flex;160 align-items: center;161 gap: 16px;162 }163 .audio {164 width: 54px; height: 54px; border-radius: 50%; border: 3px solid #c7d3db;165 display: inline-flex; align-items: center; justify-content: center;166 }167 .audio svg { stroke: #c7d3db; stroke-width: 8; fill: none; }168 .plural {169 font-size: 42px;170 color: #bfcbd2;171 font-style: italic;172 margin-top: 18px;173 }174 .plural b { color: #ffffff; font-style: normal; }175 .section-title {176 margin-top: 34px;177 font-size: 64px;178 font-weight: 700;179 color: #7fa0b4;180 }181 .def-list {182 margin-top: 24px;183 font-size: 46px;184 line-height: 1.55;185 color: #e9edf0;186 }187 .def-list .num { color: #e9edf0; font-weight: 700; margin-right: 12px; }188 .def-list a { color: #87adc0; text-decoration: underline; }189 .example {190 color: #9fb3be; font-style: italic;191 }192 .indent { margin-left: 54px; }193 194 /* Bottom tabs */195 .tabs {196 position: absolute;197 bottom: 230px;198 left: 0;199 width: 1080px;200 height: 120px;201 background: #284d61;202 display: flex;203 align-items: center;204 justify-content: center;205 gap: 120px;206 color: #dbe6ed;207 font-size: 52px;208 font-weight: 600;209 }210 .tab {211 position: relative;212 padding-bottom: 16px;213 }214 .tab.active::after {215 content: "";216 position: absolute;217 left: 0; right: 0; bottom: 0;218 height: 8px;219 background: #a5c1d1;220 border-radius: 4px;221 }222 223 /* Ad banner */224 .ad {225 position: absolute;226 bottom: 120px;227 left: 40px;228 width: 1000px;229 height: 160px;230 background: #E0E0E0;231 border: 1px solid #BDBDBD;232 display: flex;233 align-items: center;234 justify-content: center;235 color: #757575;236 font-size: 44px;237 font-weight: 600;238 }239 240 /* System nav bar */241 .sys-nav {242 position: absolute;243 bottom: 0;244 left: 0;245 width: 1080px;246 height: 110px;247 background: #0a0d10;248 display: flex;249 align-items: center;250 justify-content: center;251 }252 .gesture {253 width: 240px; height: 12px; background: #6a7177; border-radius: 8px;254 }255</style>256</head>257<body>258<div id="render-target">259 260 <div class="header">261 <!-- Status bar -->262 <div class="status-bar">263 <div class="status-left">11:24</div>264 <div class="status-right">265 <span class="status-dot"></span>266 <div class="status-icon"></div>267 <div class="status-icon" style="border-radius:50%"></div>268 <div class="battery"><div class="battery-fill"></div></div>269 </div>270 </div>271 272 <!-- Search row -->273 <div class="search-row">274 <div class="icon-btn menu-btn">275 <svg viewBox="0 0 100 100" width="60" height="60">276 <path d="M15 25h70M15 50h70M15 75h70"/>277 </svg>278 </div>279 <div class="search-box">280 <svg viewBox="0 0 100 100" width="64" height="64">281 <circle cx="42" cy="42" r="26"></circle>282 <path d="M62 62l24 24"/>283 </svg>284 <span class="placeholder">Search</span>285 </div>286 <div class="icon-btn mic-btn">287 <svg viewBox="0 0 100 100" width="60" height="60">288 <rect x="35" y="20" width="30" height="40" rx="15"></rect>289 <path d="M20 50c0 20 60 20 60 0M50 70v15M35 85h30"/>290 </svg>291 </div>292 </div>293 294 <!-- Promo banner -->295 <div class="promo">296 <div class="promo-left">297 <div class="circle-outline">298 <svg viewBox="0 0 100 100" width="60" height="60">299 <path d="M50 70V30M50 30l-18 18M50 30l18 18" stroke="#ffffff" stroke-width="8" fill="none"/>300 </svg>301 </div>302 <div class="promo-text">Supercharge Your Dictionary</div>303 </div>304 <div class="promo-right">305 <svg class="promo-chevron" viewBox="0 0 100 100">306 <path d="M35 20l30 30-30 30" stroke="#ffffff" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"/>307 </svg>308 <svg class="promo-close" viewBox="0 0 100 100">309 <path d="M25 25l50 50M75 25l-50 50" stroke="#5b8296" stroke-width="10" fill="none" stroke-linecap="round"/>310 </svg>311 </div>312 </div>313 314 <!-- Word hero -->315 <div class="hero">316 <div class="word">disaster</div>317 <div class="hero-icons">318 <div class="circle-icon">319 <svg viewBox="0 0 100 100" width="60" height="60">320 <path d="M35 20h30v60l-15-12-15 12z"/>321 </svg>322 </div>323 <div class="circle-icon">324 <svg viewBox="0 0 100 100" width="60" height="60">325 <circle cx="30" cy="60" r="8"></circle>326 <circle cx="50" cy="40" r="8"></circle>327 <circle cx="70" cy="60" r="8"></circle>328 <path d="M36 55l8-10M56 50l8 10" />329 </svg>330 </div>331 </div>332 </div>333 </div>334 335 <!-- Content definitions -->336 <div class="content">337 <div class="pos">noun</div>338 <div class="pron">339 di·sas·ter | \ di-ˈza-stər , ˈsa- \340 <span class="audio">341 <svg viewBox="0 0 100 100" width="38" height="38">342 <path d="M30 35h15l15-10v50l-15-10H30z"></path>343 </svg>344 </span>345 <span class="audio">346 <svg viewBox="0 0 100 100" width="38" height="38">347 <path d="M30 35h15l15-10v50l-15-10H30z"></path>348 </svg>349 </span>350 </div>351 <div class="plural">plural <b>disasters</b></div>352 353 <div class="section-title">Definition</div>354 355 <div class="def-list">356 <div>357 <span class="num">1</span>358 : a sudden <a href="#">calamitous</a> event bringing great damage, loss, or destruction359 <div class="example indent">// natural disasters</div>360 </div>361 362 <div style="margin-top: 26px;">363 <span class="num">2</span>364 : someone or something that is very bad: such as365 <div class="indent">366 <div>367 <span class="num" style="font-weight:600">a</span>368 : someone or something that is extremely unsuccessful369 </div>370 <div class="example indent">// The wedding reception was a complete <b>disaster</b>.</div>371 </div>372 </div>373 </div>374 </div>375 376 <!-- Bottom tabs -->377 <div class="tabs">378 <div class="tab active">Dictionary</div>379 <div class="tab">Thesaurus</div>380 </div>381 382 <!-- Ad banner placeholder -->383 <div class="ad">[IMG: Ad Banner - SALE]</div>384 385 <!-- System nav -->386 <div class="sys-nav"><div class="gesture"></div></div>387</div>388</body>389</html>