GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Language Translator UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Top status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    background: #0b2e5e;24    color: #fff;25    display: flex;26    align-items: center;27    padding: 0 36px;28    box-sizing: border-box;29    font-weight: 600;30    letter-spacing: 0.5px;31  }32  .status-bar .time { font-size: 42px; }33  .status-icons {34    margin-left: auto;35    display: flex;36    align-items: center;37    gap: 28px;38  }39  .dot { width: 12px; height: 12px; background: #fff; border-radius: 50%; opacity: 0.85; }40  .icon-wifi, .icon-battery {41    width: 48px; height: 32px;42  }43 44  /* Ad banner */45  .ad-banner {46    position: absolute;47    top: 120px;48    left: 0;49    width: 1080px;50    height: 150px;51    background: #ffffff;52    border-bottom: 1px solid #e6e6e6;53    box-sizing: border-box;54    display: flex;55    align-items: center;56    padding: 0 28px;57    gap: 24px;58  }59  .ad-close {60    width: 40px; height: 40px; border-radius: 50%;61    border: 2px solid #4fc3f7;62    display: flex; justify-content: center; align-items: center; color: #4fc3f7; font-weight: 700;63    font-size: 28px;64  }65  .ad-text { flex: 1; color: #2f2f2f; font-size: 34px; }66  .ad-btn {67    background: #0b63b4;68    color: #fff;69    padding: 24px 40px;70    border-radius: 16px;71    font-size: 36px;72    font-weight: 700;73    box-shadow: 0 4px 10px rgba(0,0,0,0.15);74  }75 76  /* App header */77  .app-header {78    position: absolute;79    top: 270px;80    left: 0;81    width: 1080px;82    height: 170px;83    background: #0b2e5e;84    color: #fff;85    display: flex;86    align-items: center;87    padding: 0 36px;88    box-sizing: border-box;89    gap: 24px;90  }91  .header-icon {92    width: 110px;93    height: 110px;94    border-radius: 18px;95    background: rgba(255,255,255,0.12);96    display: flex; align-items: center; justify-content: center;97    border: 2px solid rgba(255,255,255,0.25);98  }99  .header-title {100    font-size: 52px; font-weight: 700;101  }102  .header-right {103    margin-left: auto; display: flex; align-items: center; gap: 20px;104  }105  .upgrade-img {106    width: 140px; height: 90px; background: #E0E0E0; border: 1px solid #BDBDBD;107    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; border-radius: 12px;108  }109  .menu-dot {110    width: 14px; height: 14px; background: #fff; border-radius: 50%; margin: 6px 0;111  }112  .menu {113    display: flex; flex-direction: column; align-items: center; justify-content: center;114    width: 40px;115  }116 117  /* Tabs */118  .tabs {119    position: absolute;120    top: 440px;121    left: 40px;122    width: 1000px;123    height: 120px;124    background: #0b2e5e;125    border-radius: 60px;126    box-shadow: 0 10px 18px rgba(0,0,0,0.25);127    display: flex; align-items: center; padding: 10px; box-sizing: border-box;128    gap: 10px;129  }130  .tab {131    flex: 1;132    height: 100%;133    border-radius: 56px;134    color: #fff;135    display: flex; align-items: center; justify-content: center; gap: 16px;136    font-size: 38px; font-weight: 600;137  }138  .tab.selected {139    background: #ffffff;140    color: #0b2e5e;141    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1);142  }143  .tab .tab-icon { width: 46px; height: 46px; }144 145  /* Text areas */146  .text-area {147    position: absolute;148    left: 40px;149    width: 1000px;150    height: 660px;151    background: #fff;152    border: 4px solid #cfcfcf;153    border-radius: 50px;154    box-shadow: 0 8px 18px rgba(0,0,0,0.08);155    padding: 36px;156    box-sizing: border-box;157    color: #6b6b6b;158    font-size: 48px;159  }160  .text-top { top: 590px; }161  .text-bottom { top: 1400px; }162 163  /* Language selection row */164  .lang-row {165    position: absolute;166    top: 1280px;167    left: 40px;168    width: 1000px;169    display: flex; align-items: center; justify-content: space-between;170  }171  .pill {172    background: #0b2e5e;173    color: #fff;174    border-radius: 60px;175    height: 120px;176    padding: 0 44px;177    display: flex; align-items: center; gap: 22px;178    font-size: 40px; font-weight: 600;179    box-shadow: 0 10px 18px rgba(0,0,0,0.2);180  }181  .pill.small {182    width: 220px; justify-content: center; padding: 0;183    border-radius: 60px;184  }185  .dropdown-arrow {186    width: 30px; height: 30px;187  }188 189  /* Action buttons row */190  .action-row {191    position: absolute;192    top: 1410px;193    left: 40px;194    width: 1000px;195    display: flex; align-items: center; justify-content: space-between;196  }197  .action-btn {198    width: 480px; height: 120px;199    background: #0b2e5e; color: #fff; border-radius: 60px;200    display: flex; align-items: center; justify-content: center; gap: 22px;201    font-size: 40px; font-weight: 700;202    box-shadow: 0 10px 18px rgba(0,0,0,0.2);203  }204  .action-btn .icon { width: 48px; height: 48px; }205 206  /* Bottom utilities */207  .util-row {208    position: absolute;209    bottom: 180px;210    left: 40px;211    width: 1000px;212    display: flex; justify-content: space-between; align-items: center;213  }214  .util {215    width: 200px;216    display: flex; flex-direction: column; align-items: center; gap: 16px;217    color: #0b2e5e; font-weight: 700; font-size: 36px;218  }219  .util .circle {220    width: 160px; height: 160px; background: #0b2e5e; color: #fff; border-radius: 80px;221    box-shadow: 0 10px 18px rgba(0,0,0,0.2);222    display: flex; align-items: center; justify-content: center;223  }224  .util .circle svg { width: 70px; height: 70px; }225 226  /* Bottom system bar */227  .system-bar {228    position: absolute;229    bottom: 0;230    left: 0;231    width: 1080px;232    height: 110px;233    background: #000;234    display: flex; align-items: center; justify-content: center;235  }236  .home-indicator {237    width: 220px; height: 16px; background: #eaeaea; border-radius: 10px;238  }239</style>240</head>241<body>242<div id="render-target">243 244  <!-- Status bar -->245  <div class="status-bar">246    <div class="time">8:19</div>247    <div class="status-icons">248      <div class="dot"></div>249      <div class="dot"></div>250      <div class="dot"></div>251      <div class="dot"></div>252      <!-- Wifi -->253      <svg class="icon-wifi" viewBox="0 0 24 24" fill="none">254        <path d="M2 9c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>255        <path d="M5 12c4-3 10-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>256        <path d="M8 15c3-2 5-2 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>257        <circle cx="12" cy="18" r="2" fill="#fff"/>258      </svg>259      <!-- Battery -->260      <svg class="icon-battery" viewBox="0 0 26 14" fill="none">261        <rect x="1" y="2" width="20" height="10" rx="2" stroke="#fff" stroke-width="2"></rect>262        <rect x="3" y="4" width="16" height="6" rx="1" fill="#fff"></rect>263        <rect x="22" y="5" width="3" height="4" rx="1" fill="#fff"></rect>264      </svg>265    </div>266  </div>267 268  <!-- Ad banner -->269  <div class="ad-banner">270    <div class="ad-close">×</div>271    <div class="ad-text">Shop Your Favorite Styles at great discounts on PUMA.com</div>272    <div class="ad-btn">SHOP NOW</div>273  </div>274 275  <!-- App header -->276  <div class="app-header">277    <div class="header-icon">278      <svg class="tab-icon" viewBox="0 0 24 24" fill="none">279        <rect x="2" y="3" width="12" height="16" rx="2" stroke="#fff" stroke-width="2"></rect>280        <path d="M16 8h6m-6 4h6m-6 4h6" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>281        <path d="M6 8h4M6 12h4M6 16h4" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>282      </svg>283    </div>284    <div class="header-title">Language Translator</div>285    <div class="header-right">286      <div class="upgrade-img">[IMG: Upgrade Gift]</div>287      <div class="menu">288        <div class="menu-dot"></div>289        <div class="menu-dot"></div>290        <div class="menu-dot"></div>291      </div>292    </div>293  </div>294 295  <!-- Tabs -->296  <div class="tabs">297    <div class="tab selected">298      <svg class="tab-icon" viewBox="0 0 24 24" fill="none">299        <rect x="2" y="3" width="9" height="14" rx="2" stroke="#0b2e5e" stroke-width="2"></rect>300        <path d="M13 7h9M13 11h9M13 15h9" stroke="#0b2e5e" stroke-width="2" stroke-linecap="round"></path>301      </svg>302      Translator303    </div>304    <div class="tab">305      <svg class="tab-icon" viewBox="0 0 24 24" fill="none">306        <rect x="3" y="4" width="14" height="14" rx="2" stroke="#fff" stroke-width="2"></rect>307        <path d="M17 7l4-2v14l-4-2" stroke="#fff" stroke-width="2" stroke-linejoin="round"></path>308        <circle cx="10" cy="11" r="3" stroke="#fff" stroke-width="2"></circle>309      </svg>310      OCR311    </div>312    <div class="tab">313      <svg class="tab-icon" viewBox="0 0 24 24" fill="none">314        <path d="M3 5h18v10H12l-4 4v-4H3z" stroke="#fff" stroke-width="2" stroke-linejoin="round"></path>315      </svg>316      Chat317    </div>318  </div>319 320  <!-- Top text area -->321  <div class="text-area text-top">English</div>322 323  <!-- Language selection row -->324  <div class="lang-row">325    <div class="pill">326      English327      <svg class="dropdown-arrow" viewBox="0 0 24 24" fill="none">328        <path d="M5 9l7 7 7-7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>329      </svg>330    </div>331    <div class="pill small">332      <svg viewBox="0 0 24 24" fill="none" width="64" height="64">333        <path d="M7 7h8M15 7l2 2M17 17H9M9 17l-2-2" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>334      </svg>335    </div>336    <div class="pill">337      Dutch338      <svg class="dropdown-arrow" viewBox="0 0 24 24" fill="none">339        <path d="M5 9l7 7 7-7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>340      </svg>341    </div>342  </div>343 344  <!-- Action buttons -->345  <div class="action-row">346    <div class="action-btn">347      <svg class="icon" viewBox="0 0 24 24" fill="none">348        <path d="M4 4h9l7 7v9H4z" stroke="#fff" stroke-width="2"></path>349        <path d="M9 10h6M9 14h6" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>350      </svg>351      Translate352    </div>353    <div class="action-btn">354      <svg class="icon" viewBox="0 0 24 24" fill="none">355        <path d="M12 4a6 6 0 016 6v3a6 6 0 11-12 0V10a6 6 0 016-6z" stroke="#fff" stroke-width="2"></path>356        <path d="M12 18v3" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>357      </svg>358      Voice Translate359    </div>360  </div>361 362  <!-- Bottom text area -->363  <div class="text-area text-bottom">Dutch</div>364 365  <!-- Bottom utilities -->366  <div class="util-row">367    <div class="util">368      <div class="circle">369        <svg viewBox="0 0 24 24" fill="none">370          <rect x="5" y="4" width="14" height="16" rx="2" stroke="#fff" stroke-width="2"></rect>371          <path d="M9 4v4h8" stroke="#fff" stroke-width="2" stroke-linejoin="round"></path>372        </svg>373      </div>374      <div>Copy</div>375    </div>376    <div class="util">377      <div class="circle">378        <svg viewBox="0 0 24 24" fill="none">379          <path d="M4 8h4l6-4v16l-6-4H4z" stroke="#fff" stroke-width="2" stroke-linejoin="round"></path>380        </svg>381      </div>382      <div>Speak</div>383    </div>384    <div class="util">385      <div class="circle">386        <svg viewBox="0 0 24 24" fill="none">387          <circle cx="6" cy="12" r="3" stroke="#fff" stroke-width="2"></circle>388          <circle cx="18" cy="6" r="3" stroke="#fff" stroke-width="2"></circle>389          <circle cx="18" cy="18" r="3" stroke="#fff" stroke-width="2"></circle>390          <path d="M9 11l6-4M9 13l6 4" stroke="#fff" stroke-width="2"></path>391        </svg>392      </div>393      <div>Share</div>394    </div>395    <div class="util">396      <div class="circle">397        <svg viewBox="0 0 24 24" fill="none">398          <path d="M5 5l14 14M19 5L5 19" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>399        </svg>400      </div>401      <div>Clear</div>402    </div>403  </div>404 405  <!-- System bar -->406  <div class="system-bar">407    <div class="home-indicator"></div>408  </div>409 410</div>411</body>412</html>