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>Translation UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #121212; color: #FFFFFF;13 }14 15 /* Status bar */16 .status-bar {17 height: 110px;18 display: flex;19 align-items: center;20 justify-content: space-between;21 padding: 0 36px;22 color: #EAEAEA;23 font-size: 34px;24 border-bottom: 1px solid #1d1d1d;25 }26 .status-left, .status-right { display: flex; align-items: center; gap: 28px; }27 .mini-square { width: 24px; height: 24px; background: #fff; border-radius: 4px; }28 29 /* Header */30 .header {31 height: 150px;32 display: flex;33 align-items: center;34 padding: 0 24px;35 border-bottom: 1px solid #1d1d1d;36 }37 .back-btn { width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; }38 .lang-row { display: flex; align-items: center; justify-content: center; gap: 36px; width: calc(100% - 100px); }39 .lang {40 color: #CFCFCF; font-size: 42px; display: flex; align-items: center; gap: 10px;41 }42 .swap {43 width: 92px; height: 92px; border-radius: 46px;44 border: 2px solid #3A3A3A; display: flex; justify-content: center; align-items: center;45 background: #1b1b1b;46 }47 48 /* Input area */49 .input-area {50 padding: 30px 36px 24px 36px;51 border-bottom: 1px solid #1d1d1d;52 }53 .input-top { display: flex; align-items: center; gap: 24px; }54 .speaker-btn {55 width: 72px; height: 72px; border-radius: 36px;56 background: #1b1b1b; border: 1px solid #2a2a2a;57 display: flex; justify-content: center; align-items: center;58 }59 .input-text {60 flex: 1;61 font-size: 44px; color: #EDEDED;62 }63 .clear-btn { width: 64px; height: 64px; display: flex; justify-content: center; align-items: center; }64 65 .honor-row {66 display: flex; align-items: center; justify-content: flex-end;67 gap: 18px; padding-top: 14px; color: #CFCFCF; font-size: 32px;68 }69 .toggle {70 width: 110px; height: 56px; border-radius: 28px;71 background: #27C261; position: relative; border: 1px solid #1f7e43;72 }73 .toggle::after {74 content: ""; width: 48px; height: 48px; border-radius: 24px; background: #fff;75 position: absolute; right: 4px; top: 4px;76 }77 78 /* Translation */79 .translation {80 padding: 28px 36px 0 36px;81 }82 .kr-text {83 font-size: 120px; line-height: 150px; color: #FFFFFF; letter-spacing: -1px;84 margin-top: 20px;85 }86 .romanization { color: #9E9E9E; font-size: 42px; margin-top: 14px; }87 88 /* Feedback buttons */89 .feedback {90 display: flex; gap: 26px; padding: 28px 36px;91 }92 .pill {93 display: inline-flex; align-items: center; gap: 14px;94 padding: 16px 30px; border-radius: 36px;95 border: 2px solid #3A3A3A; color: #EDEDED; font-size: 36px; background: #151515;96 }97 98 /* Dictionary card */99 .card {100 margin: 22px 28px;101 background: #181818; border: 1px solid #2A2A2A; border-radius: 24px;102 padding: 26px 26px 20px 26px;103 }104 .card-header {105 display: flex; align-items: center; gap: 16px; margin-bottom: 10px;106 }107 .word { color: #20C05A; font-size: 44px; font-weight: 700; }108 .small-icon {109 width: 44px; height: 44px; border-radius: 22px; background: #1b1b1b; border: 1px solid #2a2a2a;110 display: flex; justify-content: center; align-items: center;111 }112 .badge {113 display: inline-block; padding: 6px 14px; border-radius: 14px; border: 1px solid #3A3A3A;114 color: #CFCFCF; font-size: 26px; margin: 8px 0 18px 0;115 }116 .defs { color: #D0D0D0; font-size: 34px; line-height: 52px; }117 .defs .num { color: #A5A5A5; margin-right: 8px; }118 .thin-divider { height: 1px; background: #252525; margin: 18px 0; }119 120 /* Bottom actions */121 .bottom-actions {122 display: flex; justify-content: space-around; align-items: center;123 padding: 22px 24px 40px 24px; color: #EDEDED;124 }125 .action-btn {126 width: 86px; height: 86px; border-radius: 20px;127 display: flex; justify-content: center; align-items: center;128 background: #1b1b1b; border: 1px solid #2a2a2a;129 }130 131 /* Home indicator */132 .home-indicator {133 position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);134 width: 220px; height: 10px; background: #EDEDED; border-radius: 6px; opacity: 0.8;135 }136 137 /* Helpers */138 .muted { color: #BDBDBD; }139</style>140</head>141<body>142<div id="render-target">143 <!-- Status bar -->144 <div class="status-bar">145 <div class="status-left">146 <div>10:12</div>147 <div class="muted">11°</div>148 <div class="mini-square"></div>149 </div>150 <div class="status-right">151 <!-- Wi-Fi -->152 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">153 <path d="M2 8c4-3 16-3 20 0" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>154 <path d="M5 11c3-2 11-2 14 0" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>155 <path d="M8 14c2-1 6-1 8 0" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>156 <circle cx="12" cy="17" r="1.6" fill="#EDEDED"/>157 </svg>158 <!-- Battery -->159 <svg width="48" height="40" viewBox="0 0 28 16" fill="none">160 <rect x="1" y="3" width="22" height="10" rx="2" stroke="#EDEDED" stroke-width="2"/>161 <rect x="3" y="5" width="18" height="6" rx="1" fill="#EDEDED"/>162 <rect x="24" y="6" width="3" height="4" rx="1" fill="#EDEDED"/>163 </svg>164 </div>165 </div>166 167 <!-- Header -->168 <div class="header">169 <div class="back-btn">170 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">171 <path d="M15 6l-6 6 6 6" stroke="#EDEDED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>172 </svg>173 </div>174 <div class="lang-row">175 <div class="lang">176 <span>English</span>177 <svg width="20" height="20" viewBox="0 0 24 24" fill="none">178 <path d="M6 9l6 6 6-6" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>179 </svg>180 </div>181 <div class="swap">182 <svg width="46" height="46" viewBox="0 0 24 24" fill="none">183 <path d="M7 8h10l-3-3" stroke="#EDEDED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>184 <path d="M17 16H7l3 3" stroke="#EDEDED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>185 </svg>186 </div>187 <div class="lang">188 <span>Korean</span>189 <svg width="20" height="20" viewBox="0 0 24 24" fill="none">190 <path d="M6 9l6 6 6-6" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>191 </svg>192 </div>193 </div>194 </div>195 196 <!-- Input area -->197 <div class="input-area">198 <div class="input-top">199 <div class="speaker-btn">200 <svg width="32" height="32" viewBox="0 0 24 24" fill="none">201 <path d="M4 9h4l4-3v12l-4-3H4z" fill="#EDEDED"/>202 <path d="M16 8c1.7 1.5 1.7 5.5 0 7" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>203 <path d="M18.5 6c3 3 3 9 0 12" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>204 </svg>205 </div>206 <div class="input-text">I am fond of spicy food</div>207 <div class="clear-btn">208 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">209 <path d="M6 6l12 12M18 6L6 18" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round"/>210 </svg>211 </div>212 </div>213 <div class="honor-row">214 <div>Honorific</div>215 <div class="toggle"></div>216 </div>217 </div>218 219 <!-- Translation block -->220 <div class="translation">221 <div class="speaker-btn" style="margin-bottom: 24px;">222 <svg width="32" height="32" viewBox="0 0 24 24" fill="none">223 <path d="M4 9h4l4-3v12l-4-3H4z" fill="#EDEDED"/>224 <path d="M16 8c1.7 1.5 1.7 5.5 0 7" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>225 <path d="M18.5 6c3 3 3 9 0 12" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>226 </svg>227 </div>228 <div class="kr-text">저는 매운 음식<br>을 좋아합니다</div>229 <div class="romanization">joneun maeun eumsigeul joahamnida</div>230 </div>231 232 <!-- Feedback buttons -->233 <div class="feedback">234 <div class="pill">235 <svg width="30" height="30" viewBox="0 0 24 24" fill="none">236 <path d="M8 11h4V6l5 5v7H8z" fill="#EDEDED"/>237 <path d="M6 11v7" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>238 </svg>239 <span>Good</span>240 </div>241 <div class="pill">242 <svg width="30" height="30" viewBox="0 0 24 24" fill="none">243 <path d="M4 5h16v10H12l-3 3v-3H4z" stroke="#EDEDED" stroke-width="2" stroke-linejoin="round"/>244 </svg>245 <span>Awkward</span>246 </div>247 </div>248 249 <!-- Dictionary card -->250 <div class="card">251 <div class="card-header">252 <div class="word">fond</div>253 <div class="small-icon">254 <svg width="18" height="18" viewBox="0 0 24 24" fill="none">255 <path d="M4 9h4l4-3v12l-4-3H4z" fill="#EDEDED"/>256 </svg>257 </div>258 <div class="small-icon">259 <svg width="18" height="18" viewBox="0 0 24 24" fill="none">260 <path d="M12 5v14M5 12h14" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>261 </svg>262 </div>263 </div>264 <div class="badge">ADJ.</div>265 <div class="defs">266 <div><span class="num">1.</span> 좋아하는 ((of))</div>267 <div><span class="num">2.</span> 정다운, 다정한 (tender)</div>268 <div><span class="num">3.</span> <사람이> 너무 귀여워하는, 응석을 받아 주는</div>269 </div>270 <div class="thin-divider"></div>271 <div class="card-header" style="margin-bottom: 4px;">272 <div class="word">fond</div>273 <div class="small-icon">274 <svg width="18" height="18" viewBox="0 0 24 24" fill="none">275 <path d="M4 9h4l4-3v12l-4-3H4z" fill="#EDEDED"/>276 </svg>277 </div>278 <div class="small-icon">279 <svg width="18" height="18" viewBox="0 0 24 24" fill="none">280 <path d="M12 5v14M5 12h14" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>281 </svg>282 </div>283 </div>284 <div style="height: 40px;"></div>285 </div>286 287 <!-- Bottom actions -->288 <div class="bottom-actions">289 <div class="action-btn">290 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">291 <rect x="5" y="4" width="14" height="16" rx="2" stroke="#EDEDED" stroke-width="2"/>292 <path d="M8 8h8M8 12h8M8 16h8" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>293 </svg>294 </div>295 <div class="action-btn">296 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">297 <path d="M4 12h9l-3-3M13 12l-3 3" stroke="#EDEDED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>298 <path d="M17 5v14" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>299 </svg>300 </div>301 <div class="action-btn">302 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">303 <path d="M12 17.3l-6 3.2 1.1-6.5-4.7-4.5 6.5-.9L12 2l3.1 6.6 6.5.9-4.7 4.5 1.1 6.5z" stroke="#EDEDED" stroke-width="2" stroke-linejoin="round"/>304 </svg>305 </div>306 <div class="action-btn">307 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">308 <path d="M4 9l5-5M20 9l-5-5M4 15l5 5M20 15l-5 5" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>309 </svg>310 </div>311 </div>312 313 <!-- Home indicator -->314 <div class="home-indicator"></div>315</div>316</body>317</html>