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>Language Translator UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #ffffff;15 border-radius: 24px;16 box-shadow: 0 20px 40px rgba(0,0,0,0.15);17 }18 19 /* Top status bar */20 .status-bar {21 position: absolute;22 top: 0; left: 0; right: 0;23 height: 80px;24 background: #0d2e6e;25 color: #fff;26 display: flex;27 align-items: center;28 padding: 0 24px;29 box-sizing: border-box;30 }31 .status-left { font-weight: 600; font-size: 34px; }32 .status-right {33 margin-left: auto;34 display: flex;35 align-items: center;36 gap: 18px;37 }38 .dot { width: 14px; height: 14px; background: #fff; border-radius: 50%; opacity: 0.9; }39 .icon {40 width: 32px; height: 32px;41 display: inline-flex; align-items: center; justify-content: center;42 }43 44 /* Product carousel */45 .ad-strip {46 position: absolute;47 top: 80px; left: 0; right: 0;48 height: 220px;49 background: #f7f7fb;50 padding: 18px 24px;51 box-sizing: border-box;52 display: flex;53 gap: 18px;54 align-items: center;55 }56 .ad-card {57 width: 230px; height: 180px;58 background: #fff;59 border-radius: 18px;60 box-shadow: 0 6px 14px rgba(0,0,0,0.08);61 position: relative;62 overflow: hidden;63 border: 1px solid #e6e6ea;64 }65 .ad-img {66 position: absolute; inset: 8px;67 display: flex; align-items: center; justify-content: center;68 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575; font-size: 28px;69 border-radius: 12px;70 }71 .discount {72 position: absolute; top: 10px; left: 10px;73 background: #000; color: #fff;74 padding: 8px 12px; border-radius: 12px; font-size: 26px; font-weight: 700;75 opacity: 0.9;76 }77 .ad-right {78 margin-left: auto;79 display: flex; align-items: center; gap: 18px;80 }81 .close-btn {82 width: 44px; height: 44px; border-radius: 50%;83 background: #e7efff; color: #0d2e6e;84 display: flex; align-items: center; justify-content: center;85 font-size: 28px; font-weight: 700;86 border: 1px solid #cdd7f7;87 }88 .brand-img {89 width: 120px; height: 80px;90 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;91 display: flex; align-items: center; justify-content: center; border-radius: 10px;92 }93 94 /* App header */95 .app-header {96 position: absolute;97 top: 300px; left: 0; right: 0;98 height: 130px;99 background: #0d2e6e;100 color: #fff;101 padding: 0 28px;102 display: flex;103 align-items: center;104 box-sizing: border-box;105 }106 .header-left { display: flex; align-items: center; gap: 18px; }107 .title { font-size: 44px; font-weight: 700; }108 .header-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }109 .badge-upgrade {110 background: #1a4399; padding: 10px 16px; border-radius: 18px;111 display: flex; align-items: center; gap: 10px; font-size: 26px;112 position: relative;113 }114 .kebab { width: 18px; height: 18px; position: relative; }115 .kebab:before, .kebab:after, .kebab i {116 content: ""; position: absolute; width: 6px; height: 6px; background: #fff; border-radius: 50%;117 left: 6px;118 }119 .kebab:before { top: 0; }120 .kebab i { top: 6px; }121 .kebab:after { top: 12px; }122 123 /* Tabs */124 .tabs {125 position: absolute;126 top: 430px; left: 24px; right: 24px;127 height: 96px;128 background: #ffffff;129 border-radius: 48px;130 border: 3px solid #c8d6ff;131 display: flex; align-items: center; padding: 6px;132 box-shadow: 0 8px 18px rgba(13,46,110,0.15);133 }134 .tab {135 flex: 1; height: 84px; border-radius: 42px;136 display: flex; align-items: center; justify-content: center; gap: 14px;137 color: #fff; font-size: 34px; font-weight: 700;138 }139 .tab svg { width: 38px; height: 38px; }140 .tab.active { background: #ffffff; color: #0d2e6e; border: 2px solid #c8d6ff; }141 .tab.inactive { background: #0d2e6e; }142 143 /* Message area */144 .message-area {145 position: absolute;146 top: 550px; left: 24px; right: 24px;147 height: 700px;148 background: #fff;149 border-radius: 40px;150 border: 6px solid #d9d9e2;151 box-shadow: inset 0 0 0 3px #edf0f7;152 padding: 40px;153 box-sizing: border-box;154 font-size: 42px;155 line-height: 1.4;156 color: #111;157 }158 .message-area .underline { text-decoration: underline; }159 160 /* Language selectors */161 .lang-row {162 position: absolute;163 top: 1270px; left: 24px; right: 24px;164 height: 108px;165 display: flex; align-items: center; justify-content: space-between;166 }167 .pill-btn {168 background: #0d2e6e; color: #fff; border-radius: 48px;169 height: 108px; width: 380px;170 display: flex; align-items: center; justify-content: center; gap: 16px;171 font-size: 36px; font-weight: 700;172 box-shadow: 0 8px 18px rgba(13,46,110,0.25);173 }174 .swap {175 width: 98px; height: 98px; border-radius: 50%;176 background: #0d2e6e; color: #fff;177 display: flex; align-items: center; justify-content: center;178 box-shadow: 0 8px 18px rgba(13,46,110,0.25);179 }180 181 /* Action buttons */182 .action-row {183 position: absolute;184 top: 1400px; left: 24px; right: 24px;185 height: 120px;186 display: flex; gap: 24px; justify-content: space-between;187 }188 .action {189 flex: 1;190 background: #0d2e6e; color: #fff; border-radius: 56px;191 display: flex; align-items: center; justify-content: center; gap: 16px;192 font-size: 38px; font-weight: 800;193 box-shadow: 0 8px 18px rgba(13,46,110,0.25);194 }195 196 /* Keyboard (simplified) */197 .keyboard {198 position: absolute;199 bottom: 0; left: 0; right: 0;200 height: 860px;201 background: #171717;202 color: #fff;203 padding: 26px;204 box-sizing: border-box;205 }206 .kb-top {207 height: 64px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;208 }209 .kb-suggestions {210 display: flex; gap: 24px; color: #cfcfcf; font-size: 32px;211 }212 .kb-grid {213 display: grid;214 grid-template-columns: repeat(10, 1fr);215 gap: 14px;216 margin-top: 18px;217 }218 .key {219 height: 110px; background: #2b2b2b; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 36px;220 }221 .key.wide { grid-column: span 3; }222 .key.space { grid-column: span 6; }223 .kb-bottom { margin-top: 18px; display: grid; grid-template-columns: 1.5fr 6fr 1.5fr; gap: 14px; }224 .kb-helper { height: 110px; background: #2b2b2b; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 34px; color: #d1d1d1; }225 .kb-navbar {226 position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);227 width: 300px; height: 10px; background: #cfcfcf; border-radius: 6px; opacity: 0.6;228 }229 230 /* Small helpers */231 .caret {232 width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 18px solid #fff; margin-left: 8px;233 }234 .caret.blue { border-top-color: #0d2e6e; }235</style>236</head>237<body>238<div id="render-target">239 240 <!-- Status bar -->241 <div class="status-bar">242 <div class="status-left">8:20</div>243 <div class="status-right">244 <div class="dot"></div>245 <div class="dot"></div>246 <div class="dot"></div>247 <div class="dot" style="opacity:.6;"></div>248 <div class="icon" aria-label="signal">249 <svg viewBox="0 0 24 24" fill="#fff">250 <rect x="2" y="14" width="3" height="8" rx="1"></rect>251 <rect x="7" y="10" width="3" height="12" rx="1"></rect>252 <rect x="12" y="6" width="3" height="16" rx="1"></rect>253 <rect x="17" y="2" width="3" height="20" rx="1"></rect>254 </svg>255 </div>256 <div class="icon" aria-label="wifi">257 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">258 <path d="M2 9c5-5 15-5 20 0"></path>259 <path d="M5 12c3-3 11-3 14 0"></path>260 <path d="M8 15c2-2 6-2 8 0"></path>261 <circle cx="12" cy="18" r="1.5" fill="#fff"></circle>262 </svg>263 </div>264 <div class="icon" aria-label="battery">265 <svg viewBox="0 0 28 28" fill="none" stroke="#fff" stroke-width="2">266 <rect x="2" y="6" width="20" height="12" rx="2"></rect>267 <rect x="4" y="8" width="14" height="8" fill="#fff"></rect>268 <rect x="23" y="10" width="3" height="6" rx="1" fill="#fff" stroke="none"></rect>269 </svg>270 </div>271 </div>272 </div>273 274 <!-- Product carousel -->275 <div class="ad-strip">276 <div class="ad-card">277 <div class="discount">-65%</div>278 <div class="ad-img">[IMG: Colorful Puma Shoe]</div>279 </div>280 <div class="ad-card">281 <div class="discount">-30%</div>282 <div class="ad-img">[IMG: White Puma Sandal]</div>283 </div>284 <div class="ad-card">285 <div class="discount">-30%</div>286 <div class="ad-img">[IMG: Black/White Sneaker]</div>287 </div>288 <div class="ad-card">289 <div class="discount">-55%</div>290 <div class="ad-img">[IMG: White Sneaker Blue/Red]</div>291 </div>292 <div class="ad-right" style="margin-left:auto;">293 <div class="close-btn">×</div>294 <div class="brand-img">[IMG: Puma Logo]</div>295 </div>296 </div>297 298 <!-- App header -->299 <div class="app-header">300 <div class="header-left">301 <div class="icon" style="width:54px;height:54px;">302 <svg viewBox="0 0 24 24" fill="#fff">303 <rect x="2" y="2" width="9" height="9" rx="2" opacity=".9"></rect>304 <rect x="13" y="13" width="9" height="9" rx="2" opacity=".9"></rect>305 <path d="M8 16l2-4h-4l2 4z" fill="#fff"></path>306 <path d="M14 8l4 0" stroke="#fff" stroke-width="2"></path>307 </svg>308 </div>309 <div class="title">Language Translator</div>310 </div>311 <div class="header-right">312 <div class="badge-upgrade">313 <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff">314 <rect x="3" y="8" width="18" height="12" rx="2"></rect>315 <rect x="3" y="6" width="8" height="4" rx="1"></rect>316 <rect x="13" y="6" width="8" height="4" rx="1"></rect>317 <rect x="10" y="10" width="4" height="10" fill="#1a4399"></rect>318 </svg>319 <span>Upgrade</span>320 </div>321 <div class="kebab"><i></i></div>322 </div>323 </div>324 325 <!-- Tabs -->326 <div class="tabs">327 <div class="tab active">328 <svg viewBox="0 0 24 24" fill="#0d2e6e">329 <rect x="2" y="2" width="9" height="9" rx="2"></rect>330 <rect x="13" y="13" width="9" height="9" rx="2"></rect>331 <path d="M8 16l2-4h-4l2 4z" fill="#0d2e6e"></path>332 </svg>333 <span>Translator</span>334 </div>335 <div class="tab inactive">336 <svg viewBox="0 0 24 24" fill="#fff">337 <rect x="3" y="5" width="18" height="14" rx="2"></rect>338 <rect x="8" y="9" width="8" height="6" rx="1" fill="#0d2e6e"></rect>339 </svg>340 <span>OCR</span>341 </div>342 <div class="tab inactive">343 <svg viewBox="0 0 24 24" fill="#fff">344 <path d="M4 5h16v10H8l-4 4V5z"></path>345 </svg>346 <span>Chat</span>347 </div>348 </div>349 350 <!-- Message area -->351 <div class="message-area">352 Hello, what's your good <span class="underline">name</span>353 </div>354 355 <!-- Language selection -->356 <div class="lang-row">357 <div class="pill-btn">English <span class="caret"></span></div>358 <div class="swap" aria-label="swap">359 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">360 <path d="M7 7h10M17 7l-3-3M17 7l-3 3"></path>361 <path d="M17 17H7M7 17l3-3M7 17l3 3"></path>362 </svg>363 </div>364 <div class="pill-btn">Dutch <span class="caret"></span></div>365 </div>366 367 <!-- Action buttons -->368 <div class="action-row">369 <div class="action">370 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff">371 <path d="M2 6h20v4H2zM2 12h14v4H2z"></path>372 </svg>373 <span>Translate</span>374 </div>375 <div class="action">376 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff">377 <rect x="8" y="4" width="8" height="12" rx="4"></rect>378 <path d="M12 16v4" stroke="#fff" stroke-width="2"></path>379 <rect x="9" y="20" width="6" height="2" rx="1" fill="#fff"></rect>380 </svg>381 <span>Voice Translate</span>382 </div>383 </div>384 385 <!-- Keyboard -->386 <div class="keyboard">387 <div class="kb-top">388 <div class="icon" style="color:#cfcfcf;">389 <svg viewBox="0 0 24 24" fill="#cfcfcf">390 <rect x="2" y="2" width="8" height="8" rx="2"></rect>391 <rect x="14" y="14" width="8" height="8" rx="2"></rect>392 </svg>393 </div>394 <div class="kb-suggestions">395 <span>name</span><span>names</span><span>🙂</span>396 </div>397 <div class="icon" style="color:#cfcfcf;">398 <svg viewBox="0 0 24 24" fill="#cfcfcf">399 <circle cx="12" cy="12" r="10"></circle>400 </svg>401 </div>402 </div>403 404 <div class="kb-grid">405 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>406 407 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key wide">⌫</div>408 409 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div><div class="key">.</div><div class="key">,</div><div class="key wide">↵</div>410 </div>411 412 <div class="kb-bottom">413 <div class="kb-helper">?123</div>414 <div class="kb-helper">Space</div>415 <div class="kb-helper">Mic</div>416 </div>417 <div class="kb-navbar"></div>418 </div>419 420</div>421</body>422</html>