GD-ML/AndroidCode
13.4k
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: 24px; box-shadow: 0 6px 24px rgba(0,0,0,0.12);12 color: #0b2d5b;13 }14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; width: 100%; height: 90px;17 background: #0b2d5b; color: #fff; display: flex; align-items: center; padding: 0 32px; box-sizing: border-box;18 }19 .status-time { font-size: 38px; font-weight: 600; }20 .status-icons { margin-left: 24px; display: flex; align-items: center; gap: 16px; }21 .status-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }22 .icon-dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.9; }23 /* Ad strip */24 .ad-strip {25 position: absolute; top: 90px; left: 0; width: 100%; height: 220px; background: #ffffff;26 display: flex; align-items: center; gap: 18px; padding: 16px 16px; box-sizing: border-box;27 }28 .ad-card {29 width: 230px; height: 160px; background: #E0E0E0; border: 1px solid #BDBDBD;30 border-radius: 14px; display: flex; align-items: center; justify-content: center; position: relative;31 color: #757575; font-size: 24px; text-align: center;32 }33 .discount-badge {34 position: absolute; top: 8px; left: 8px; background: #ffffff; border: 1px solid #BDBDBD;35 border-radius: 10px; padding: 6px 10px; font-size: 22px; color: #333;36 }37 .ad-side {38 margin-left: auto; display: flex; align-items: center; gap: 16px;39 }40 .ad-logo {41 width: 140px; height: 160px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 14px;42 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;43 }44 .close-btn {45 width: 48px; height: 48px; border-radius: 50%; border: 2px solid #0b2d5b; color: #0b2d5b;46 display: flex; align-items: center; justify-content: center; font-size: 28px; background: #fff;47 }48 /* Header / title */49 .app-header {50 position: absolute; top: 310px; left: 0; width: 100%; height: 180px; background: #0b2d5b;51 color: #fff; box-sizing: border-box; padding: 20px 28px;52 }53 .header-row {54 display: flex; align-items: center; gap: 18px;55 }56 .app-icon {57 width: 62px; height: 62px; border-radius: 12px; background: rgba(255,255,255,0.12);58 display: flex; align-items: center; justify-content: center;59 border: 1px solid rgba(255,255,255,0.25);60 }61 .app-title { font-size: 42px; font-weight: 700; }62 .upgrade-pill {63 margin-left: auto; display: flex; align-items: center; gap: 10px;64 background: #1e4a86; padding: 8px 16px; border-radius: 999px; font-size: 24px;65 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);66 }67 .menu-dots {68 width: 40px; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; margin-left: 18px;69 }70 .menu-dots span { width: 6px; height: 6px; background: #fff; border-radius: 50%; display: block; opacity: 0.9; }71 /* Segmented control */72 .segmented {73 margin-top: 14px; width: 950px; height: 88px; background: #fff; border-radius: 44px; margin-left: 28px;74 display: flex; align-items: center; padding: 8px; box-sizing: border-box; gap: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.08);75 }76 .seg-item {77 flex: 1; height: 72px; border-radius: 36px; display: flex; align-items: center; justify-content: center; gap: 12px;78 font-size: 28px; color: #0b2d5b; background: transparent; border: none;79 }80 .seg-item.active { background: #123a73; color: #fff; font-weight: 600; }81 .seg-icon {82 width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;83 }84 /* Text areas */85 .panel {86 position: absolute; left: 24px; right: 24px; background: #fff; border-radius: 40px; border: 4px solid #d9d9d9;87 box-shadow: 0 6px 18px rgba(0,0,0,0.06); padding: 36px; box-sizing: border-box; color: #111;88 }89 .input-panel { top: 520px; height: 520px; }90 .output-panel { top: 1300px; height: 520px; }91 .panel p { font-size: 42px; line-height: 1.45; margin: 0; }92 /* Language row */93 .lang-row {94 position: absolute; top: 1070px; left: 24px; right: 24px; display: flex; align-items: center; justify-content: center; gap: 28px;95 }96 .pill {97 min-width: 300px; height: 92px; background: #123a73; color: #fff; border-radius: 46px; display: flex; align-items: center; justify-content: center;98 font-size: 32px; box-shadow: 0 6px 16px rgba(0,0,0,0.12); padding: 0 22px; box-sizing: border-box; position: relative;99 }100 .pill .caret {101 position: absolute; right: 22px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent;102 border-top: 14px solid #fff;103 }104 .swap-btn {105 width: 110px; height: 110px; background: #ffffff; border: 4px solid #123a73; border-radius: 50%;106 display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,0,0,0.12);107 }108 .action-row {109 position: absolute; top: 1184px; left: 24px; right: 24px; display: flex; align-items: center; justify-content: space-between;110 }111 .action-pill {112 width: 480px; height: 92px; background: #123a73; color: #fff; border-radius: 46px; display: flex; align-items: center; justify-content: center;113 font-size: 32px; box-shadow: 0 6px 16px rgba(0,0,0,0.12); gap: 14px;114 }115 /* Bottom actions */116 .bottom-actions {117 position: absolute; top: 1860px; left: 24px; right: 24px; display: flex; align-items: flex-end; justify-content: space-between;118 }119 .round-action {120 width: 210px; height: 210px; border-radius: 50%; background: #123a73; color: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column;121 box-shadow: 0 8px 18px rgba(0,0,0,0.14); gap: 14px;122 }123 .round-action span { font-size: 28px; }124 .round-action .ico { width: 52px; height: 52px; }125 /* Gesture bar */126 .gesture-bar {127 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);128 width: 340px; height: 10px; background: #000; border-radius: 6px; opacity: 0.85;129 }130</style>131</head>132<body>133<div id="render-target">134 <!-- Status Bar -->135 <div class="status-bar">136 <div class="status-time">8:23</div>137 <div class="status-icons">138 <div class="icon-dot"></div>139 <div class="icon-dot"></div>140 <div class="icon-dot"></div>141 <div class="icon-dot"></div>142 </div>143 <div class="status-right">144 <!-- Wi-Fi -->145 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">146 <path d="M2 9c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>147 <path d="M5 12c4-3 10-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>148 <path d="M8 15c3-2 5-2 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>149 <circle cx="12" cy="18" r="1.5" fill="#fff"/>150 </svg>151 <!-- Battery -->152 <svg width="40" height="24" viewBox="0 0 40 24" fill="none">153 <rect x="2" y="4" width="30" height="16" rx="3" stroke="#fff" stroke-width="2"/>154 <rect x="4" y="6" width="22" height="12" rx="2" fill="#fff"/>155 <rect x="34" y="8" width="4" height="8" rx="1" fill="#fff"/>156 </svg>157 </div>158 </div>159 160 <!-- Ad Strip -->161 <div class="ad-strip">162 <div class="ad-card">163 <div class="discount-badge">-65%</div>164 [IMG: Colorful Puma Shoe]165 </div>166 <div class="ad-card">167 <div class="discount-badge">-30%</div>168 [IMG: White Puma Sandal Sneaker]169 </div>170 <div class="ad-card">171 <div class="discount-badge">-30%</div>172 [IMG: Black/Red Puma Sneaker]173 </div>174 <div class="ad-card">175 <div class="discount-badge">-55%</div>176 [IMG: White/Blue Puma Sneaker]177 </div>178 <div class="ad-side">179 <div class="ad-logo">[IMG: PUMA Logo]</div>180 <div class="close-btn">×</div>181 </div>182 </div>183 184 <!-- Header -->185 <div class="app-header">186 <div class="header-row">187 <div class="app-icon">188 <!-- simple translator icon -->189 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">190 <rect x="2" y="2" width="9" height="9" rx="2" stroke="#fff" stroke-width="1.8"/>191 <rect x="13" y="13" width="9" height="9" rx="2" stroke="#fff" stroke-width="1.8"/>192 <path d="M5 8l2-6 2 6M4 6h6" stroke="#fff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>193 <path d="M17 14c0 3-2 5-5 6" stroke="#fff" stroke-width="1.6" stroke-linecap="round"/>194 </svg>195 </div>196 <div class="app-title">Language Translator</div>197 <div class="upgrade-pill">198 <span>🎁</span>199 <span>Upgrade</span>200 </div>201 <div class="menu-dots"><span></span><span></span><span></span></div>202 </div>203 204 <div class="segmented">205 <button class="seg-item active">206 <span class="seg-icon">207 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">208 <path d="M4 6h10M7 18h8M9 12h10" stroke="#fff" stroke-width="2" stroke-linecap="round"/>209 </svg>210 </span>211 Translator212 </button>213 <button class="seg-item">214 <span class="seg-icon">215 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">216 <rect x="3" y="5" width="18" height="14" rx="2" stroke="#0b2d5b" stroke-width="2"/>217 <circle cx="12" cy="12" r="4" stroke="#0b2d5b" stroke-width="2"/>218 </svg>219 </span>220 OCR221 </button>222 <button class="seg-item">223 <span class="seg-icon">224 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">225 <path d="M3 18l6-3 12 6V6L9 3 3 6v12z" stroke="#0b2d5b" stroke-width="2" stroke-linejoin="round"/>226 </svg>227 </span>228 Chat229 </button>230 </div>231 </div>232 233 <!-- Input Panel -->234 <div class="panel input-panel">235 <p>Hey, what's your good name</p>236 </div>237 238 <!-- Language selection row -->239 <div class="lang-row">240 <div class="pill">English<div class="caret"></div></div>241 <div class="swap-btn">242 <svg width="54" height="54" viewBox="0 0 24 24" fill="none">243 <path d="M7 7h10l-3-3M17 17H7l3 3" stroke="#123a73" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>244 </svg>245 </div>246 <div class="pill">Dutch<div class="caret"></div></div>247 </div>248 249 <!-- Action buttons -->250 <div class="action-row">251 <div class="action-pill">252 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">253 <path d="M3 12h18M12 3l-9 9 9 9" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>254 </svg>255 Translate256 </div>257 <div class="action-pill">258 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">259 <path d="M12 3a5 5 0 015 5v8a5 5 0 01-5 5 5 5 0 01-5-5V8a5 5 0 015-5z" stroke="#fff" stroke-width="2"/>260 <rect x="9" y="10" width="6" height="4" fill="#fff"/>261 </svg>262 Voice Translate263 </div>264 </div>265 266 <!-- Output Panel -->267 <div class="panel output-panel">268 <p>Hallo, wat is je goede naam</p>269 </div>270 271 <!-- Bottom Actions -->272 <div class="bottom-actions">273 <div class="round-action">274 <div class="ico">275 <svg width="52" height="52" viewBox="0 0 24 24" fill="none">276 <rect x="4" y="4" width="12" height="16" rx="2" stroke="#fff" stroke-width="2"/>277 <path d="M8 2h8v16" stroke="#fff" stroke-width="2"/>278 </svg>279 </div>280 <span>Copy</span>281 </div>282 <div class="round-action">283 <div class="ico">284 <svg width="52" height="52" viewBox="0 0 24 24" fill="none">285 <path d="M7 9a5 5 0 1010 0v6a5 5 0 11-10 0V9z" stroke="#fff" stroke-width="2"/>286 <rect x="9" y="11" width="6" height="2" fill="#fff"/>287 </svg>288 </div>289 <span>Speak</span>290 </div>291 <div class="round-action">292 <div class="ico">293 <svg width="52" height="52" viewBox="0 0 24 24" fill="none">294 <path d="M4 12l16 0M12 4l8 8-8 8" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>295 </svg>296 </div>297 <span>Share</span>298 </div>299 <div class="round-action">300 <div class="ico">301 <svg width="52" height="52" viewBox="0 0 24 24" fill="none">302 <path d="M6 6l12 12M18 6L6 18" stroke="#fff" stroke-width="2" stroke-linecap="round"/>303 </svg>304 </div>305 <span>Clear</span>306 </div>307 </div>308 309 <!-- Gesture Bar -->310 <div class="gesture-bar"></div>311</div>312</body>313</html>