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: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #121315;15    border-radius: 28px;16    box-shadow: 0 20px 60px rgba(0,0,0,0.35);17    color: #EAEAEA;18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 100%;26    height: 92px;27    padding: 0 36px;28    box-sizing: border-box;29    display: flex;30    align-items: center;31    justify-content: space-between;32    color: #DADADA;33    font-size: 34px;34    letter-spacing: 0.5px;35  }36  .status-right {37    display: flex;38    align-items: center;39    gap: 18px;40  }41  .status-dot {42    width: 16px; height: 16px; background: #DADADA; border-radius: 50%;43  }44  .status-icon {45    width: 30px; height: 30px; border: 2px solid #DADADA; border-radius: 6px;46  }47 48  /* Top toolbar */49  .toolbar {50    position: absolute;51    top: 92px;52    left: 0;53    width: 100%;54    height: 120px;55    padding: 0 36px;56    box-sizing: border-box;57    display: flex;58    align-items: center;59    justify-content: space-between;60  }61  .toolbar-left {62    display: flex;63    align-items: center;64    gap: 12px;65  }66  .toolbar-right {67    display: flex;68    align-items: center;69    gap: 48px;70  }71  .icon {72    width: 48px;73    height: 48px;74  }75  .icon svg { width: 100%; height: 100%; }76  .icon path, .icon circle, .icon line, .icon rect {77    stroke: #C9CED6;78    stroke-width: 2.5;79    fill: none;80    stroke-linecap: round;81    stroke-linejoin: round;82  }83 84  /* Content */85  .content {86    position: absolute;87    top: 212px;88    left: 0;89    right: 0;90    bottom: 0;91    padding: 0 60px;92    box-sizing: border-box;93  }94 95  .label-row {96    display: flex;97    align-items: center;98    justify-content: space-between;99    color: #9FB5FF;100    font-size: 40px;101    margin-top: 36px;102    margin-bottom: 24px;103  }104  .label-actions {105    display: flex;106    align-items: center;107    gap: 36px;108  }109  .label-actions .icon path,110  .label-actions .icon circle,111  .label-actions .icon line,112  .label-actions .icon rect {113    stroke: #96B2FF;114  }115 116  .big-text {117    font-size: 84px;118    line-height: 1.18;119    color: #EDEDED;120    letter-spacing: 0.2px;121    margin: 24px 0 54px 0;122  }123 124  .divider {125    height: 2px;126    background: #28313A;127    width: 70%;128    margin-bottom: 54px;129  }130 131  .translated {132    font-size: 84px;133    line-height: 1.18;134    color: #AFC6FF;135    letter-spacing: 0.2px;136    margin-top: 36px;137  }138 139  /* Floating button */140  .floating-btn {141    position: absolute;142    right: 72px;143    bottom: 320px;144    height: 144px;145    padding: 0 64px;146    background: #1E4679;147    color: #EAF0FF;148    border-radius: 40px;149    display: flex;150    align-items: center;151    gap: 28px;152    box-shadow: 0 18px 35px rgba(0,0,0,0.45);153    font-size: 46px;154    font-weight: 600;155    letter-spacing: 0.3px;156  }157  .floating-btn .icon path, .floating-btn .icon line { stroke: #EAF0FF; }158 159  /* Bottom pill */160  .home-pill {161    position: absolute;162    bottom: 54px;163    left: 50%;164    transform: translateX(-50%);165    width: 520px;166    height: 12px;167    background: #E3E3E3;168    border-radius: 8px;169    opacity: 0.85;170  }171</style>172</head>173<body>174<div id="render-target">175 176  <!-- Status bar -->177  <div class="status-bar">178    <div class="status-left">8:18</div>179    <div class="status-right">180      <div class="status-dot"></div>181      <div class="status-dot"></div>182      <div class="status-dot"></div>183      <div class="status-dot"></div>184      <div class="status-dot"></div>185      <div class="status-icon"></div>186    </div>187  </div>188 189  <!-- Toolbar -->190  <div class="toolbar">191    <div class="toolbar-left">192      <div class="icon">193        <svg viewBox="0 0 24 24">194          <path d="M14 4 L6 12 L14 20"></path>195          <line x1="6" y1="12" x2="22" y2="12"></line>196        </svg>197      </div>198    </div>199    <div class="toolbar-right">200      <div class="icon">201        <svg viewBox="0 0 24 24">202          <line x1="12" y1="4" x2="12" y2="20"></line>203          <line x1="4" y1="12" x2="20" y2="12"></line>204        </svg>205      </div>206      <div class="icon">207        <svg viewBox="0 0 24 24">208          <circle cx="12" cy="12" r="8"></circle>209          <line x1="12" y1="12" x2="12" y2="7"></line>210          <line x1="12" y1="12" x2="16" y2="14"></line>211        </svg>212      </div>213      <div class="icon">214        <svg viewBox="0 0 24 24">215          <circle cx="12" cy="5" r="2"></circle>216          <circle cx="12" cy="12" r="2"></circle>217          <circle cx="12" cy="19" r="2"></circle>218        </svg>219      </div>220    </div>221  </div>222 223  <!-- Content -->224  <div class="content">225 226    <!-- English section -->227    <div class="label-row">228      <div>English</div>229      <div class="label-actions">230        <div class="icon">231          <svg viewBox="0 0 24 24">232            <rect x="7" y="7" width="10" height="10" rx="2"></rect>233            <rect x="3" y="3" width="10" height="10" rx="2"></rect>234          </svg>235        </div>236        <div class="icon">237          <svg viewBox="0 0 24 24">238            <polygon points="5,9 12,5 12,19 5,15"></polygon>239            <rect x="14" y="9" width="4" height="6" rx="1"></rect>240          </svg>241        </div>242      </div>243    </div>244 245    <div class="big-text">Hey, my name is Mohan.</div>246 247    <div class="divider"></div>248 249    <!-- Spanish section -->250    <div class="label-row" style="margin-top: 18px;">251      <div>Spanish</div>252      <div class="label-actions">253        <div class="icon">254          <svg viewBox="0 0 24 24">255            <rect x="3" y="4" width="16" height="12" rx="3"></rect>256            <polygon points="7,16 7,21 11,16"></polygon>257          </svg>258        </div>259        <div class="icon">260          <svg viewBox="0 0 24 24">261            <rect x="7" y="7" width="10" height="10" rx="2"></rect>262            <rect x="3" y="3" width="10" height="10" rx="2"></rect>263          </svg>264        </div>265        <div class="icon">266          <svg viewBox="0 0 24 24">267            <polygon points="5,9 12,5 12,19 5,15"></polygon>268            <rect x="14" y="9" width="4" height="6" rx="1"></rect>269          </svg>270        </div>271      </div>272    </div>273 274    <div class="translated">Hola, mi nombre es Mohan.</div>275 276  </div>277 278  <!-- Floating action button -->279  <div class="floating-btn">280    <div class="icon" style="width:54px;height:54px;">281      <svg viewBox="0 0 24 24">282        <line x1="12" y1="4" x2="12" y2="20"></line>283        <line x1="4" y1="12" x2="20" y2="12"></line>284      </svg>285    </div>286    <div>New translation</div>287  </div>288 289  <!-- Bottom home pill -->290  <div class="home-pill"></div>291 292</div>293</body>294</html>