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 Mock</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9 #render-target{10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#ffffff; color:#102a43;12 }13 14 /* Top status bar */15 .status-bar{16 position:absolute; left:0; top:0; width:100%; height:100px;17 background:#0c2f57; color:#fff; display:flex; align-items:center; justify-content:space-between;18 padding:0 36px; box-sizing:border-box; font-weight:600;19 }20 .status-left{font-size:38px; letter-spacing:1px;}21 .status-right{display:flex; gap:26px; align-items:center;}22 .dot{width:10px; height:10px; background:#fff; border-radius:50%;}23 .icon-signal, .icon-battery{width:44px; height:28px; display:inline-block; border:2px solid #fff; border-radius:4px;}24 .icon-battery::after{content:''; position:absolute; width:6px; height:14px; right:12px; top:44px; background:#fff; border-radius:2px;}25 26 /* Ad banner */27 .ad-banner{28 position:absolute; left:0; top:100px; width:100%; height:160px; background:#fff;29 border-bottom:1px solid #e0e0e0; box-sizing:border-box; display:flex; align-items:center; padding:0 24px; gap:24px;30 }31 .ad-close{width:44px; height:44px; border-radius:50%; border:2px solid #bdbdbd; color:#777; display:flex; align-items:center; justify-content:center; font-size:28px;}32 .ad-img{33 flex:1; height:110px; background:#E0E0E0; border:1px solid #BDBDBD;34 display:flex; align-items:center; justify-content:center; color:#757575; font-size:32px; border-radius:8px;35 }36 .ad-cta{37 background:#0b7cff; color:#fff; padding:22px 36px; border-radius:14px; font-weight:700; font-size:34px;38 }39 40 /* App header */41 .app-header{42 position:absolute; top:260px; left:0; width:100%; height:160px; background:#0c2f57; color:#fff;43 display:flex; align-items:center; padding:0 28px; box-sizing:border-box; gap:24px;44 box-shadow:0 2px 0 rgba(0,0,0,0.1);45 }46 .app-icon{47 width:96px; height:96px; border-radius:18px; background:#123c78; display:flex; align-items:center; justify-content:center;48 border:2px solid rgba(255,255,255,0.2);49 }50 .app-title{ font-size:48px; font-weight:700; flex:1; }51 .upgrade-badge{52 background:#fff; color:#0c2f57; padding:16px 24px; border-radius:22px; font-weight:700; font-size:30px;53 }54 .kebab{ width:64px; height:64px; display:flex; align-items:center; justify-content:center; }55 .kebab svg{ fill:#fff; }56 57 /* Tabs */58 .tabs-wrapper{59 position:absolute; top:420px; left:24px; right:24px; height:110px;60 display:flex; gap:18px;61 }62 .tab{63 background:#0c2f57; color:#fff; border-radius:28px; padding:22px 28px; display:flex; align-items:center; gap:16px;64 font-size:34px; font-weight:700; box-shadow:0 6px 0 rgba(12,47,87,0.35) inset;65 }66 .tab.active{ background:#ffffff; color:#0c2f57; border:3px solid #0c2f57; box-shadow:none; }67 .tab svg{ width:40px; height:40px; }68 .tab.active svg path{ fill:#0c2f57; }69 70 /* Text area card */71 .card{72 position:absolute; top:550px; left:24px; right:24px; height:720px; background:#fff;73 border:6px solid #d3d3d3; border-radius:48px; box-sizing:border-box; padding:36px 28px;74 }75 .placeholder-text{ color:#4a4a4a; font-size:46px; }76 77 /* Language row */78 .lang-row{79 position:absolute; top:1290px; left:0; width:100%; display:flex; justify-content:space-between; align-items:center;80 padding:0 24px; box-sizing:border-box;81 }82 .pill{83 min-width:300px; height:120px; background:#0c2f57; color:#fff; border-radius:60px;84 display:flex; align-items:center; justify-content:center; gap:18px; font-size:40px; font-weight:700;85 box-shadow:0 10px 0 rgba(12,47,87,0.25) inset;86 }87 .down{ width:0; height:0; border-left:12px solid transparent; border-right:12px solid transparent; border-top:16px solid #fff; }88 89 .swap{90 width:120px; height:120px; background:#0c2f57; border-radius:60px; display:flex; align-items:center; justify-content:center;91 box-shadow:0 10px 0 rgba(12,47,87,0.25) inset;92 }93 .swap svg{ width:58px; height:58px; fill:#fff; }94 95 /* Action buttons */96 .actions{97 position:absolute; top:1430px; left:24px; right:24px; display:flex; gap:24px;98 }99 .action{100 flex:1; height:120px; background:#0c2f57; color:#fff; border-radius:36px; display:flex; align-items:center; justify-content:center; gap:16px; font-size:38px; font-weight:800;101 box-shadow:0 10px 0 rgba(12,47,87,0.25) inset;102 }103 .action svg{ width:44px; height:44px; fill:#fff; }104 105 /* Keyboard mock */106 .keyboard{107 position:absolute; left:0; bottom:0; width:100%; height:820px; background:#0f0f12; border-top:1px solid #1f1f25;108 padding:24px; box-sizing:border-box;109 }110 .kb-row{ display:flex; gap:16px; margin-bottom:18px; }111 .key{112 flex:1; height:110px; background:#25262b; border-radius:18px; color:#e7e7ea; display:flex; align-items:center; justify-content:center; font-size:42px; font-weight:600;113 }114 .key.small{ flex:0 0 120px; }115 .key.wide{ flex:2; }116 .key.space{ flex:5; }117 .kb-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }118 .kb-top .key.small{ background:#2b2c31; }119 .gesture-bar{120 position:absolute; bottom:18px; left:50%; transform:translateX(-50%);121 width:300px; height:10px; background:#d8d8d8; border-radius:6px; opacity:0.8;122 }123</style>124</head>125<body>126<div id="render-target">127 128 <!-- Status bar -->129 <div class="status-bar">130 <div class="status-left">8:19</div>131 <div class="status-right">132 <div class="dot"></div><div class="dot"></div><div class="dot"></div>133 <div class="icon-signal"></div>134 <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff"><path d="M12 2a9 9 0 0 0-9 9v5l-2 3h22l-2-3v-5a9 9 0 0 0-9-9z"/></svg>135 <div class="icon-battery"></div>136 </div>137 </div>138 139 <!-- Ad banner -->140 <div class="ad-banner">141 <div class="ad-close">×</div>142 <div class="ad-img">[IMG: Ad Banner]</div>143 <div class="ad-cta">SHOP NOW</div>144 </div>145 146 <!-- App header -->147 <div class="app-header">148 <div class="app-icon">149 <svg viewBox="0 0 24 24" width="64" height="64">150 <path fill="#fff" d="M3 5h10v14H3zM13 5h8v4h-8zM13 11h8v8h-8z"/>151 </svg>152 </div>153 <div class="app-title">Language Translator</div>154 <div class="upgrade-badge">Upgrade</div>155 <div class="kebab">156 <svg viewBox="0 0 24 24" width="28" height="28"><path d="M12 5a2 2 0 110-4 2 2 0 010 4zm0 11a2 2 0 110-4 2 2 0 010 4zm0 7a2 2 0 110-4 2 2 0 010 4z"/></svg>157 </div>158 </div>159 160 <!-- Tabs -->161 <div class="tabs-wrapper">162 <div class="tab active">163 <svg viewBox="0 0 24 24"><path fill="#0c2f57" d="M3 5h10v14H3zM15 5h6v4h-6zM15 11h6v8h-6z"/></svg>164 <span>Translator</span>165 </div>166 <div class="tab">167 <svg viewBox="0 0 24 24"><path fill="#fff" d="M3 3h18v14H3zM7 19h10v2H7z"/></svg>168 <span>OCR</span>169 </div>170 <div class="tab">171 <svg viewBox="0 0 24 24"><path fill="#fff" d="M4 4h16v10H7l-3 3z"/></svg>172 <span>Chat</span>173 </div>174 </div>175 176 <!-- Text area card -->177 <div class="card">178 <div class="placeholder-text">English</div>179 </div>180 181 <!-- Language selection -->182 <div class="lang-row">183 <div class="pill">184 <svg viewBox="0 0 24 24" width="38" height="38"><path fill="#fff" d="M3 5h10v14H3zM15 5h6v4h-6z"/></svg>185 <span>English</span>186 <div class="down"></div>187 </div>188 <div class="swap">189 <svg viewBox="0 0 24 24"><path d="M7 7h8l-2-2 1-1 4 4-4 4-1-1 2-2H7V7zm10 6H9l2 2-1 1-4-4 4-4 1 1-2 2h8v2z"/></svg>190 </div>191 <div class="pill">192 <span>Dutch</span>193 <div class="down"></div>194 </div>195 </div>196 197 <!-- Actions -->198 <div class="actions">199 <div class="action">200 <svg viewBox="0 0 24 24"><path d="M3 5h10v14H3zM15 5h6v4h-6zM15 11h6v8h-6z"/></svg>201 Translate202 </div>203 <div class="action">204 <svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 00-9 9v5l-2 3h22l-2-3v-5a9 9 0 00-9-9z"/></svg>205 Voice Translate206 </div>207 </div>208 209 <!-- Keyboard mock -->210 <div class="keyboard">211 <div class="kb-top">212 <div class="key small">◧</div>213 <div class="key small">😊</div>214 <div class="key small">GIF</div>215 <div class="key small">⚙</div>216 <div class="key small">G</div>217 <div class="key small">🎨</div>218 <div class="key small">🎤</div>219 </div>220 221 <div class="kb-row">222 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>223 </div>224 <div class="kb-row">225 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>226 </div>227 <div class="kb-row">228 <div class="key small">↑</div>229 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>230 <div class="key small">⌫</div>231 </div>232 <div class="kb-row">233 <div class="key small">?123</div>234 <div class="key small">,</div>235 <div class="key small">☺</div>236 <div class="key space">space</div>237 <div class="key small">.</div>238 <div class="key small">↵</div>239 </div>240 <div class="gesture-bar"></div>241 </div>242 243</div>244</body>245</html>