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>Language Translator UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #ffffff; border-radius: 0; box-shadow: none;12  }13  /* Top status bar */14  .status-bar {15    height: 110px; background: #0C2B66; color: #fff;16    display: flex; align-items: center; justify-content: space-between;17    padding: 0 36px; font-size: 40px; box-sizing: border-box;18  }19  .status-left, .status-right { display: flex; align-items: center; gap: 22px; }20  .status-dot { width: 16px; height: 16px; background: #fff; border-radius: 50%; opacity: 0.9; }21  /* Promo carousel */22  .promo-bar {23    background: #0C2B66; padding: 20px 24px 26px; box-sizing: border-box;24  }25  .promo-row {26    display: flex; gap: 22px; overflow: hidden;27  }28  .promo-item {29    width: 240px; height: 170px; background: #E0E0E0; border: 1px solid #BDBDBD;30    border-radius: 14px; position: relative; display: flex; justify-content: center; align-items: center;31    color: #757575; font-size: 28px;32  }33  .badge {34    position: absolute; top: 10px; left: 10px;35    background: #ffffff; color: #000; border: 1px solid #BDBDBD;36    border-radius: 12px; padding: 6px 12px; font-size: 30px;37  }38  .promo-controls {39    position: absolute; right: 24px; top: 164px; display: flex; gap: 12px;40  }41  .control-btn {42    width: 48px; height: 48px; border-radius: 50%; background: #e7f2ff;43    display: flex; align-items: center; justify-content: center; color: #0C2B66; font-weight: bold; border: 1px solid #9ec3ff;44  }45  /* Header area */46  .translator-header {47    background: #0C2B66; color: #fff; padding: 24px 30px 20px; box-sizing: border-box;48    display: flex; align-items: center; justify-content: space-between;49  }50  .header-left { display: flex; align-items: center; gap: 22px; }51  .app-title { font-size: 46px; font-weight: 700; letter-spacing: 0.3px; }52  .header-right { display: flex; align-items: center; gap: 22px; }53  .upgrade-pill {54    display: flex; align-items: center; gap: 10px; background: #ffffff; color: #0C2B66;55    padding: 10px 16px; border-radius: 24px; font-size: 28px; box-shadow: 0 0 0 3px rgba(255,255,255,0.15);56  }57  .kebab { width: 10px; height: 10px; display: inline-block; margin-left: 6px; }58  .kebab span { display: block; width: 8px; height: 8px; background: #fff; border-radius: 50%; margin: 6px 0; }59  /* Tabs */60  .tabs {61    background: #0C2B66; padding: 0 30px 24px; box-sizing: border-box;62  }63  .tabs-inner {64    background: #ffffff; border-radius: 50px; padding: 8px; display: flex; gap: 8px;65    box-shadow: 0 2px 0 rgba(0,0,0,0.1);66  }67  .tab {68    flex: 1; height: 94px; border-radius: 46px; display: flex; align-items: center; justify-content: center; gap: 14px;69    font-size: 34px; color: #0C2B66; font-weight: 600;70  }71  .tab.active { background: #0C2B66; color: #ffffff; }72  .tab svg { width: 40px; height: 40px; }73  /* Chat area */74  .chat-area {75    margin: 22px 26px; background: #ffffff; border: 5px solid #D0D0D0; border-radius: 46px;76    height: 820px; box-sizing: border-box; padding: 40px; font-size: 46px; color: #111;77    box-shadow: 0 10px 20px rgba(12,43,102,0.15) inset;78  }79  /* Language selection row */80  .language-row {81    display: flex; align-items: center; justify-content: space-between;82    padding: 0 26px; margin-top: 10px;83  }84  .lang-pill {85    background: #0C2B66; color: #fff; height: 120px; min-width: 360px; border-radius: 60px;86    display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 38px; font-weight: 600;87    padding: 0 28px; box-shadow: 0 2px 0 rgba(0,0,0,0.15);88  }89  .swap-btn {90    width: 120px; height: 120px; background: #0C2B66; color: #fff; border-radius: 60px;91    display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 0 rgba(0,0,0,0.15);92  }93  .swap-btn svg { width: 64px; height: 64px; }94  /* Action buttons */95  .action-row {96    display: flex; padding: 26px; gap: 26px;97  }98  .action-btn {99    flex: 1; height: 120px; background: #0C2B66; color: #fff; border-radius: 60px;100    display: flex; align-items: center; justify-content: center; gap: 18px; font-size: 40px; font-weight: 700;101    box-shadow: 0 2px 0 rgba(0,0,0,0.15);102  }103  .action-btn svg { width: 44px; height: 44px; }104  /* Keyboard placeholder */105  .keyboard {106    position: absolute; left: 0; bottom: 0; width: 100%; height: 900px;107    background: #121315; color: #cfd3d7; display: flex; align-items: flex-start; justify-content: center;108    border-top-left-radius: 18px; border-top-right-radius: 18px;109  }110  .keyboard-label {111    margin-top: 24px; font-size: 32px; opacity: 0.8; background: rgba(255,255,255,0.06);112    padding: 10px 18px; border-radius: 12px;113  }114</style>115</head>116<body>117<div id="render-target">118 119  <!-- Status bar -->120  <div class="status-bar">121    <div class="status-left">122      <div style="font-weight:700;">8:20</div>123      <div class="status-dot"></div>124      <div class="status-dot"></div>125      <div class="status-dot"></div>126      <div class="status-dot"></div>127    </div>128    <div class="status-right">129      <!-- signal icon -->130      <svg viewBox="0 0 24 24" width="44" height="44" fill="#fff"><path d="M2 18h2v2H2v-2zm4-4h2v6H6v-6zm4-4h2v10h-2V10zm4-4h2v14h-2V6zm4-4h2v18h-2V2z"/></svg>131      <!-- wifi icon -->132      <svg viewBox="0 0 24 24" width="44" height="44" fill="#fff"><path d="M12 20c1.1 0 2 .9 2 2h-4c0-1.1.9-2 2-2zm7-6c-3.9-3.9-10.1-3.9-14 0l1.4 1.4c3.1-3.1 8.1-3.1 11.3 0L19 14zm-3.5 3.5c-2.9-2.9-7.6-2.9-10.6 0l1.4 1.4c2.1-2.1 5.6-2.1 7.8 0l1.4-1.4z"/></svg>133      <!-- battery icon -->134      <svg viewBox="0 0 24 24" width="52" height="52" fill="#fff"><path d="M16 4H3c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h13c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm6 4h-2v6h2V8z"/></svg>135    </div>136  </div>137 138  <!-- Promo carousel -->139  <div class="promo-bar">140    <div class="promo-row">141      <div class="promo-item">142        [IMG: Puma Shoe 1]143        <div class="badge">-65%</div>144      </div>145      <div class="promo-item">146        [IMG: Puma Shoe 2]147        <div class="badge">-30%</div>148      </div>149      <div class="promo-item">150        [IMG: Puma Shoe 3]151        <div class="badge">-30%</div>152      </div>153      <div class="promo-item">154        [IMG: Puma Shoe 4]155        <div class="badge">-55%</div>156      </div>157    </div>158    <div class="promo-controls">159      <div class="control-btn">i</div>160      <div class="control-btn">X</div>161    </div>162  </div>163 164  <!-- Header -->165  <div class="translator-header">166    <div class="header-left">167      <!-- translator icon -->168      <svg viewBox="0 0 24 24" fill="#fff">169        <path d="M3 3h9v9H3V3zm12 0h6v6h-6V3zM6 6h3v3H6V6zM9 15l3-3h3l-3 3 3 3h-3l-3-3z"/>170      </svg>171      <div class="app-title">Language Translator</div>172    </div>173    <div class="header-right">174      <div class="upgrade-pill">175        <!-- gift icon -->176        <svg viewBox="0 0 24 24" fill="#0C2B66">177          <path d="M20 7h-2.4c.3-.5.4-1 .4-1.5C18 3.7 16.8 2 15 2c-1.4 0-2.6.9-3 2.2C11.6 2.9 10.4 2 9 2 7.2 2 6 3.7 6 5.5c0 .5.1 1 .4 1.5H4v4h16V7zm-9-3c.6 0 1 .4 1 1s-.4 1-1 1H8c-.6 0-1-.4-1-1s.4-1 1-1h3zm4 0c.6 0 1 .4 1 1s-.4 1-1 1h-2c-.6 0-1-.4-1-1s.4-1 1-1h2zM4 13v9h7v-9H4zm9 0v9h7v-9h-7z"/>178        </svg>179        Upgrade180      </div>181      <div class="kebab">182        <span></span><span></span><span></span>183      </div>184    </div>185  </div>186 187  <!-- Tabs -->188  <div class="tabs">189    <div class="tabs-inner">190      <div class="tab active">191        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 4h9v9H3V4zm12 0h6v6h-6V4zm-6 12l3-3h3l-3 3 3 3h-3l-3-3z"/></svg>192        Translator193      </div>194      <div class="tab">195        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M4 6h16v12H4V6zm8 11a3 3 0 100-6 3 3 0 000 6zm7-10H5v2h14V7z"/></svg>196        OCR197      </div>198      <div class="tab">199        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M4 4h16v12H7l-3 4V4z"/></svg>200        Chat201      </div>202    </div>203  </div>204 205  <!-- Chat area -->206  <div class="chat-area">207    Hello, what's your good name208  </div>209 210  <!-- Language selection -->211  <div class="language-row">212    <div class="lang-pill">213      English214      <svg viewBox="0 0 24 24" fill="#fff"><path d="M7 10l5 5 5-5H7z"/></svg>215    </div>216    <div class="swap-btn">217      <svg viewBox="0 0 24 24" fill="#fff"><path d="M7 7h11l-3-3 1.4-1.4L22 7l-5.6 4.4L15 10l3-3H7V7zm10 10H6l3 3-1.4 1.4L2 17l5.6-4.4L8 14l-3 3h12v0z"/></svg>218    </div>219    <div class="lang-pill">Dutch</div>220  </div>221 222  <!-- Action buttons -->223  <div class="action-row">224    <div class="action-btn">225      <svg viewBox="0 0 24 24" fill="#fff"><path d="M12 3l4 4H8l4-4zm-9 7h18v2H3v-2zm3 4h12v2H6v-2zm3 4h6v2H9v-2z"/></svg>226      Translate227    </div>228    <div class="action-btn">229      <svg viewBox="0 0 24 24" fill="#fff"><path d="M12 3a9 9 0 100 18 9 9 0 000-18zm-2 5h2v8h-2V8zm4 2h2v4h-2v-4z"/></svg>230      Voice Translate231    </div>232  </div>233 234  <!-- Keyboard placeholder -->235  <div class="keyboard">236    <div class="keyboard-label">[Device Keyboard]</div>237  </div>238 239</div>240</body>241</html>