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>Translation Screen Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    color: #E0E0E0;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    padding: 30px 36px;26    box-sizing: border-box;27    display: flex;28    justify-content: space-between;29    align-items: center;30    color: #F5F5F5;31    font-weight: 500;32    font-size: 34px;33    letter-spacing: 0.5px;34  }35  .status-left { display: flex; align-items: center; gap: 18px; }36  .mini-square {37    width: 36px; height: 36px; border-radius: 6px; background: #E0E0E0;38  }39  .status-right { display: flex; align-items: center; gap: 28px; }40  .sb-icon svg { display: block; }41 42  /* Top controls */43  .top-controls {44    position: absolute;45    top: 150px;46    left: 36px;47    right: 36px;48    height: 80px;49    display: flex;50    justify-content: space-between;51    align-items: center;52  }53  .tc-left, .tc-right { display: flex; align-items: center; gap: 40px; }54  .icon-btn svg { width: 40px; height: 40px; stroke: #CFCFCF; fill: none; }55  .icon-btn.fill svg { fill: #CFCFCF; stroke: none; }56 57  /* Source block */58  .label {59    position: absolute;60    left: 60px;61    color: #BDBDBD;62    font-size: 40px;63  }64  .label.source { top: 260px; }65  .label.target { top: 920px; color: #7FE0D3; }66 67  .source-text {68    position: absolute;69    left: 60px;70    right: 180px;71    top: 340px;72    font-size: 96px;73    line-height: 1.15;74    color: #DADADA;75  }76  .divider {77    position: absolute;78    left: 180px;79    right: 180px;80    top: 620px;81    height: 2px;82    background: #2B2F2F;83  }84 85  /* Right-side utility icons for source */86  .right-utilities-top {87    position: absolute;88    top: 490px;89    right: 70px;90    display: flex;91    gap: 34px;92    align-items: center;93  }94  .util-icon svg {95    width: 44px; height: 44px;96    stroke: #7FE0D3;97    fill: none;98    stroke-width: 2.5;99  }100  .util-icon.fill svg { fill: #7FE0D3; stroke: none; }101 102  /* Target block */103  .target-text {104    position: absolute;105    right: 60px;106    top: 1000px;107    font-size: 92px;108    line-height: 1.2;109    color: #8DE7D8;110    text-align: right;111  }112  .right-utilities-bottom {113    position: absolute;114    top: 920px;115    right: 70px;116    display: flex;117    gap: 34px;118    align-items: center;119  }120 121  /* Offline translation */122  .offline {123    position: absolute;124    left: 60px;125    top: 1280px;126    display: flex;127    align-items: center;128    gap: 24px;129    color: #BDBDBD;130    font-size: 40px;131  }132  .offline .circle {133    width: 52px; height: 52px; border-radius: 26px; background: #2A2E2E;134    display: flex; align-items: center; justify-content: center;135  }136  .offline .circle svg { width: 28px; height: 28px; stroke: #BDBDBD; fill: none; stroke-width: 2.5; }137 138  /* FAB */139  .fab {140    position: absolute;141    right: 60px;142    bottom: 300px;143    background: #0E615B;144    color: #CFEFED;145    padding: 34px 44px;146    border-radius: 36px;147    box-shadow: 0 12px 20px rgba(0,0,0,0.45);148    display: flex;149    align-items: center;150    gap: 24px;151    font-size: 46px;152    letter-spacing: 0.2px;153  }154  .fab svg { width: 40px; height: 40px; stroke: #CFEFED; fill: none; stroke-width: 3; }155 156  /* Gesture pill */157  .gesture {158    position: absolute;159    left: 50%;160    transform: translateX(-50%);161    bottom: 120px;162    width: 360px;163    height: 12px;164    border-radius: 6px;165    background: #DADADA;166    opacity: 0.8;167  }168</style>169</head>170<body>171<div id="render-target">172 173  <!-- Status Bar -->174  <div class="status-bar">175    <div class="status-left">176      <div>10:13</div>177      <div>11°</div>178      <div class="mini-square"></div>179    </div>180    <div class="status-right">181      <div class="sb-icon">182        <!-- Wi-Fi -->183        <svg width="48" height="32" viewBox="0 0 48 32">184          <path d="M4 10 C14 2,34 2,44 10" stroke="#FFFFFF" stroke-width="3" fill="none"/>185          <path d="M10 16 C18 10,30 10,38 16" stroke="#FFFFFF" stroke-width="3" fill="none"/>186          <path d="M18 22 C22 18,26 18,30 22" stroke="#FFFFFF" stroke-width="3" fill="none"/>187          <circle cx="24" cy="26" r="3" fill="#FFFFFF"/>188        </svg>189      </div>190      <div class="sb-icon">191        <!-- Battery -->192        <svg width="56" height="28" viewBox="0 0 56 28">193          <rect x="2" y="4" width="46" height="20" rx="4" ry="4" stroke="#FFFFFF" stroke-width="3" fill="none"/>194          <rect x="6" y="8" width="34" height="12" fill="#FFFFFF"/>195          <rect x="50" y="10" width="6" height="8" fill="#FFFFFF"/>196        </svg>197      </div>198    </div>199  </div>200 201  <!-- Top Controls -->202  <div class="top-controls">203    <div class="tc-left">204      <!-- Back arrow -->205      <div class="icon-btn">206        <svg viewBox="0 0 32 32">207          <path d="M20 6 L8 16 L20 26" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>208        </svg>209      </div>210    </div>211    <div class="tc-right">212      <!-- Plus -->213      <div class="icon-btn">214        <svg viewBox="0 0 40 40">215          <path d="M20 8 L20 32 M8 20 L32 20" stroke-width="3.5" stroke-linecap="round"/>216        </svg>217      </div>218      <!-- History/clock -->219      <div class="icon-btn">220        <svg viewBox="0 0 40 40">221          <circle cx="20" cy="20" r="12" stroke-width="3"/>222          <path d="M20 12 L20 20 L26 20" stroke-width="3" stroke-linecap="round"/>223        </svg>224      </div>225      <!-- More (vertical dots) -->226      <div class="icon-btn fill">227        <svg viewBox="0 0 6 30">228          <circle cx="3" cy="5" r="3"/>229          <circle cx="3" cy="15" r="3"/>230          <circle cx="3" cy="25" r="3"/>231        </svg>232      </div>233    </div>234  </div>235 236  <!-- Source Language -->237  <div class="label source">English</div>238  <div class="source-text">My name is Charlie</div>239 240  <!-- Utilities near source text -->241  <div class="right-utilities-top">242    <!-- Chat bubble -->243    <div class="util-icon">244      <svg viewBox="0 0 44 44">245        <path d="M8 10 H32 A6 6 0 0 1 38 16 V26 A6 6 0 0 1 32 32 H20 L12 38 V32 H12 A6 6 0 0 1 8 26 V16 A6 6 0 0 1 14 10" stroke-linejoin="round"/>246      </svg>247    </div>248    <!-- Copy -->249    <div class="util-icon">250      <svg viewBox="0 0 44 44">251        <rect x="14" y="12" width="20" height="20" rx="3" ry="3"/>252        <rect x="10" y="8" width="20" height="20" rx="3" ry="3"/>253      </svg>254    </div>255    <!-- Speaker -->256    <div class="util-icon fill">257      <svg viewBox="0 0 44 44">258        <path d="M20 12 L12 18 H8 V26 H12 L20 32 Z"/>259        <path d="M25 16 C29 18,29 26,25 28" fill="none" stroke-width="2.5"/>260        <path d="M28 12 C34 16,34 28,28 32" fill="none" stroke-width="2.5"/>261      </svg>262    </div>263  </div>264 265  <div class="divider"></div>266 267  <!-- Target Language -->268  <div class="label target">Arabic</div>269 270  <!-- Utilities near target label -->271  <div class="right-utilities-bottom">272    <!-- Chat bubble -->273    <div class="util-icon">274      <svg viewBox="0 0 44 44">275        <path d="M8 10 H32 A6 6 0 0 1 38 16 V26 A6 6 0 0 1 32 32 H20 L12 38 V32 H12 A6 6 0 0 1 8 26 V16 A6 6 0 0 1 14 10" stroke-linejoin="round"/>276      </svg>277    </div>278    <!-- Copy -->279    <div class="util-icon">280      <svg viewBox="0 0 44 44">281        <rect x="14" y="12" width="20" height="20" rx="3" ry="3"/>282        <rect x="10" y="8" width="20" height="20" rx="3" ry="3"/>283      </svg>284    </div>285    <!-- Speaker -->286    <div class="util-icon fill">287      <svg viewBox="0 0 44 44">288        <path d="M20 12 L12 18 H8 V26 H12 L20 32 Z"/>289        <path d="M25 16 C29 18,29 26,25 28" fill="none" stroke-width="2.5"/>290        <path d="M28 12 C34 16,34 28,28 32" fill="none" stroke-width="2.5"/>291      </svg>292    </div>293  </div>294 295  <div class="target-text">اسمي تشارلي</div>296 297  <!-- Offline translation -->298  <div class="offline">299    <div class="circle">300      <svg viewBox="0 0 32 32">301        <path d="M16 6 V18 L10 14" stroke-linecap="round" stroke-linejoin="round"/>302        <circle cx="16" cy="16" r="13" stroke-width="2"/>303      </svg>304    </div>305    <div>Offline translation</div>306  </div>307 308  <!-- Floating Action Button -->309  <div class="fab">310    <svg viewBox="0 0 40 40">311      <path d="M20 8 L20 32 M8 20 L32 20" stroke-linecap="round"/>312    </svg>313    <div>New translation</div>314  </div>315 316  <!-- Gesture bar -->317  <div class="gesture"></div>318</div>319</body>320</html>