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; height: 2400px;10    position: relative; overflow: hidden;11    background: #f2f2f2;12    border-radius: 0;13  }14 15  /* Colors */16  :root{17    --navy:#0b2a58;18    --navy-2:#0a2f60;19    --light:#e6e6e6;20    --panel:#d9d9d9;21    --panel-border:#b7b7b7;22    --shadow: 0 6px 0 rgba(0,0,0,0.08), 0 12px 16px rgba(0,0,0,0.06);23    --tab-shadow: 0 8px 0 rgba(0,0,0,0.08), 0 16px 18px rgba(0,0,0,0.06);24  }25 26  /* Status bar */27  .status-bar{28    position:absolute; top:0; left:0; width:100%; height:110px;29    background: var(--navy);30    color:#a7bdd6; font-weight:600; letter-spacing:0.5px;31  }32  .status-bar .time{33    position:absolute; left:40px; top:28px; font-size:42px; color:#bcd0e6;34  }35 36  /* Ad banner */37  .ad-banner{38    position:absolute; left:0; top:110px; width:100%; height:160px;39    background:#ececec; border-top:1px solid #d0d0d0; border-bottom:1px solid #d0d0d0;40  }41  .ad-banner .text{42    position:absolute; left:36px; top:40px; right:300px;43    font-size:36px; color:#2f2f2f;44  }45  .ad-banner .cta{46    position:absolute; right:40px; top:38px; width:240px; height:84px;47    background:#1477f2; color:#fff; border-radius:14px;48    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:34px;49  }50 51  /* App header */52  .app-header{53    position:absolute; top:270px; left:0; width:100%; height:140px;54    background: var(--navy); color:#fff; box-shadow: var(--shadow);55  }56  .app-header .left{57    position:absolute; left:36px; top:40px; display:flex; align-items:center;58  }59  .app-header .title{60    font-size:48px; font-weight:700; margin-left:18px;61  }62  .app-header .right{63    position:absolute; right:36px; top:30px; display:flex; align-items:center; gap:22px;64  }65  .badge-img{66    width:160px; height:80px; background:#E0E0E0; border:1px solid #BDBDBD;67    display:flex; align-items:center; justify-content:center; color:#757575; border-radius:12px;68    font-size:30px;69  }70  .kebab{ width:40px; height:40px; }71  .kebab circle{ fill:#d7e4f6; }72 73  /* Tabs */74  .tabs{75    position:absolute; top:410px; left:32px; width:1016px; height:120px;76    background: var(--navy-2); border-radius:60px; box-shadow: var(--tab-shadow);77    display:flex; align-items:center; padding:0 16px; gap:10px;78  }79  .tab{80    height:96px; border-radius:48px; display:flex; align-items:center; gap:16px;81    padding:0 34px; color:#fff; font-size:40px; font-weight:700;82  }83  .tab svg{ width:56px; height:56px; }84  .tab.active{ background:#dfe8f7; color:var(--navy-2); }85  .tab.spacer{ flex:1; }86  .tab.simple{ background:transparent; }87 88  /* Text areas */89  .panel{90    position:absolute; left:32px; width:1016px; background:var(--panel);91    border:4px solid var(--panel-border); border-radius:54px; box-shadow: var(--shadow);92    color:#3d3d3d; font-size:56px;93    padding:36px;94  }95  .panel.top{ top:540px; height:550px; }96  .panel.bottom{ top:1560px; height:550px; }97 98  /* Language select row */99  .lang-row{100    position:absolute; top:1130px; left:32px; width:1016px; display:flex; align-items:center; justify-content:center; gap:40px;101  }102  .pill{103    height:110px; width:390px; background:var(--navy-2); color:#fff; border-radius:54px;104    box-shadow: var(--shadow); display:flex; align-items:center; justify-content:center;105    font-size:44px; font-weight:700; gap:22px;106  }107  .pill .caret{ width:30px; height:30px; }108  .swap{109    width:120px; height:120px; background:var(--navy-2); border-radius:60px; box-shadow: var(--shadow);110    display:flex; align-items:center; justify-content:center;111  }112  .swap svg{ width:60px; height:60px; }113 114  /* Action buttons */115  .action-row{116    position:absolute; top:1270px; left:32px; width:1016px; display:flex; align-items:center; justify-content:space-between;117  }118  .action{119    height:110px; width:480px; background:var(--navy-2); color:#fff; border-radius:54px;120    box-shadow: var(--shadow); display:flex; align-items:center; justify-content:center; gap:20px;121    font-size:44px; font-weight:700;122  }123  .action svg{ width:54px; height:54px; }124 125  /* Bottom toolbar */126  .toolbar{127    position:absolute; left:0; bottom:120px; width:100%; height:260px;128    display:flex; align-items:flex-start; justify-content:space-evenly;129  }130  .tool{131    display:flex; flex-direction:column; align-items:center; gap:18px;132  }133  .tool .btn{134    width:150px; height:150px; background:var(--navy-2); border-radius:75px; box-shadow: var(--shadow);135    display:flex; align-items:center; justify-content:center;136  }137  .tool svg{ width:70px; height:70px; }138  .tool label{ font-size:36px; color:#193a6d; }139  /* Bottom safe area */140  .safe{141    position:absolute; left:0; bottom:0; width:100%; height:120px; background:#000;142  }143  .home-indicator{144    position:absolute; bottom:36px; left:50%; transform:translateX(-50%);145    width:300px; height:14px; background:#eaeaea; border-radius:8px;146  }147</style>148</head>149<body>150<div id="render-target">151 152  <!-- Status bar -->153  <div class="status-bar">154    <div class="time">8:19</div>155  </div>156 157  <!-- Ad banner -->158  <div class="ad-banner">159    <div class="text">Shop Your Favorite Styles at great discounts on PUMA.com</div>160    <div class="cta">SHOP NOW</div>161  </div>162 163  <!-- App header -->164  <div class="app-header">165    <div class="left">166      <!-- Language icon -->167      <svg viewBox="0 0 32 32">168        <path d="M4 28 L12 6 L20 28 M8 18 H16" stroke="#d7e4f6" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>169        <rect x="22" y="8" width="8" height="14" rx="2" ry="2" fill="none" stroke="#d7e4f6" stroke-width="3"></rect>170      </svg>171      <div class="title">Language Translator</div>172    </div>173    <div class="right">174      <div class="badge-img">[IMG: Upgrade Badge]</div>175      <!-- kebab menu -->176      <svg class="kebab" viewBox="0 0 24 24">177        <circle cx="12" cy="5" r="3"></circle>178        <circle cx="12" cy="12" r="3"></circle>179        <circle cx="12" cy="19" r="3"></circle>180      </svg>181    </div>182  </div>183 184  <!-- Tabs -->185  <div class="tabs">186    <div class="tab active">187      <svg viewBox="0 0 32 32">188        <path d="M4 28 L12 6 L20 28 M8 18 H16" stroke="#0a2f60" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>189      </svg>190      <span>Translator</span>191    </div>192    <div class="tab spacer"></div>193    <div class="tab simple">194      <svg viewBox="0 0 32 32">195        <rect x="4" y="6" width="24" height="18" rx="3" ry="3" fill="none" stroke="#fff" stroke-width="3"></rect>196        <circle cx="16" cy="15" r="5" fill="none" stroke="#fff" stroke-width="3"></circle>197      </svg>198      <span>OCR</span>199    </div>200    <div class="tab simple">201      <svg viewBox="0 0 32 32">202        <path d="M6 8 h16 a4 4 0 0 1 4 4 v7 a4 4 0 0 1 -4 4 H13 l-7 5 v-9 a4 4 0 0 1 -4 -4 v-3 a4 4 0 0 1 4 -4z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"></path>203      </svg>204      <span>Chat</span>205    </div>206  </div>207 208  <!-- Text area top -->209  <div class="panel top">210    <div style="margin-top:120px; font-size:64px; color:#3b3b3b;">English</div>211  </div>212 213  <!-- Language selection row -->214  <div class="lang-row">215    <div class="pill">216      <span>English</span>217      <svg class="caret" viewBox="0 0 24 24">218        <path d="M4 9 L12 16 L20 9" fill="#fff"></path>219      </svg>220    </div>221    <div class="swap">222      <svg viewBox="0 0 32 32">223        <path d="M6 10 H22 M18 6 L22 10 L18 14" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>224        <path d="M26 22 H10 M14 18 L10 22 L14 26" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>225      </svg>226    </div>227    <div class="pill">228      <span>Dutch</span>229      <svg class="caret" viewBox="0 0 24 24">230        <path d="M4 9 L12 16 L20 9" fill="#fff"></path>231      </svg>232    </div>233  </div>234 235  <!-- Action buttons -->236  <div class="action-row">237    <div class="action">238      <svg viewBox="0 0 32 32">239        <path d="M4 28 L12 6 L20 28 M8 18 H16" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>240      </svg>241      <span>Translate</span>242    </div>243    <div class="action">244      <svg viewBox="0 0 32 32">245        <rect x="12" y="6" width="8" height="14" rx="4" ry="4" fill="none" stroke="#fff" stroke-width="3"></rect>246        <path d="M16 20 v6" stroke="#fff" stroke-width="3" stroke-linecap="round"></path>247      </svg>248      <span>Voice Translate</span>249    </div>250  </div>251 252  <!-- Text area bottom -->253  <div class="panel bottom">254    <div style="margin-top:120px; font-size:64px; color:#3b3b3b;">Dutch</div>255  </div>256 257  <!-- Bottom toolbar -->258  <div class="toolbar">259    <div class="tool">260      <div class="btn">261        <svg viewBox="0 0 32 32">262          <rect x="8" y="4" width="16" height="22" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="3"></rect>263          <path d="M12 10 H20 M12 14 H20 M12 18 H18" stroke="#fff" stroke-width="3" stroke-linecap="round"></path>264        </svg>265      </div>266      <label>Copy</label>267    </div>268    <div class="tool">269      <div class="btn">270        <svg viewBox="0 0 32 32">271          <path d="M6 20 V12 L14 8 V24 L6 20 Z" fill="none" stroke="#fff" stroke-width="3" stroke-linejoin="round"></path>272          <path d="M18 14 C22 16, 22 16, 18 18 M20 12 C26 15, 26 17, 20 20" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>273        </svg>274      </div>275      <label>Speak</label>276    </div>277    <div class="tool">278      <div class="btn">279        <svg viewBox="0 0 32 32">280          <circle cx="8" cy="20" r="3" fill="#fff"></circle>281          <circle cx="24" cy="8" r="3" fill="#fff"></circle>282          <circle cx="24" cy="24" r="3" fill="#fff"></circle>283          <path d="M10 20 L22 8 M10 20 L22 24" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"></path>284        </svg>285      </div>286      <label>Share</label>287    </div>288    <div class="tool">289      <div class="btn">290        <svg viewBox="0 0 32 32">291          <path d="M8 8 L24 24 M24 8 L8 24" stroke="#fff" stroke-width="3" stroke-linecap="round"></path>292        </svg>293      </div>294      <label>Clear</label>295    </div>296  </div>297 298  <!-- Bottom safe area -->299  <div class="safe">300    <div class="home-indicator"></div>301  </div>302 303</div>304</body>305</html>