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>UI Render - Name Input</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FFFFFF;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 100%;23 height: 100px;24 padding: 0 30px;25 box-sizing: border-box;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #000;30 font-size: 34px;31 }32 .status-right {33 display: flex;34 align-items: center;35 gap: 24px;36 color: #333;37 }38 .status-icon {39 width: 36px;40 height: 36px;41 display: inline-flex;42 align-items: center;43 justify-content: center;44 }45 .status-icon svg { width: 100%; height: 100%; }46 47 /* App bar */48 .app-bar {49 position: absolute;50 top: 100px;51 left: 0;52 width: 100%;53 height: 120px;54 border-bottom: 1px solid #EEEEEE;55 display: flex;56 align-items: center;57 padding: 0 24px;58 box-sizing: border-box;59 }60 .app-left { display: flex; align-items: center; gap: 18px; }61 .back-icon {62 width: 60px;63 height: 60px;64 }65 .back-icon svg { width: 100%; height: 100%; }66 .app-title {67 font-size: 44px;68 font-weight: 600;69 color: #222;70 }71 .app-ok {72 margin-left: auto;73 font-size: 36px;74 color: #1A1A1A;75 }76 77 /* Content */78 .content {79 position: absolute;80 top: 220px;81 left: 0;82 width: 100%;83 padding: 0 40px;84 box-sizing: border-box;85 }86 .field-label {87 font-size: 30px;88 color: #616161;89 margin-bottom: 16px;90 }91 .text-input {92 width: 1000px;93 padding-bottom: 12px;94 border-bottom: 4px solid #3F51B5;95 font-size: 56px;96 color: #222;97 }98 .helper-text {99 width: 1000px;100 margin-top: 30px;101 font-size: 30px;102 line-height: 1.45;103 color: #757575;104 }105 106 /* Keyboard */107 .keyboard {108 position: absolute;109 bottom: 60px;110 left: 0;111 width: 100%;112 height: 980px;113 background: #EEF2E8;114 box-sizing: border-box;115 padding: 16px 20px 24px;116 border-top: 1px solid #DADFD2;117 }118 .suggestions {119 height: 120px;120 display: flex;121 align-items: center;122 gap: 20px;123 padding: 0 8px;124 box-sizing: border-box;125 color: #2F2F2F;126 }127 .grid-key {128 width: 72px;129 height: 72px;130 border-radius: 18px;131 background: #CFE2C9;132 display: flex;133 align-items: center;134 justify-content: center;135 }136 .chip {137 padding: 18px 26px;138 border-radius: 28px;139 background: #FFFFFF;140 border: 1px solid #D9D9D9;141 font-size: 30px;142 color: #3A3A3A;143 }144 .divider {145 height: 44px;146 width: 2px;147 background: #C6C6C6;148 }149 150 .key-rows { margin-top: 8px; }151 .row {152 display: flex;153 align-items: center;154 justify-content: center;155 margin: 14px 0;156 gap: 10px;157 }158 .key {159 background: #FFFFFF;160 border: 1px solid #D8D8D8;161 border-radius: 20px;162 width: 90px;163 height: 110px;164 display: flex;165 align-items: center;166 justify-content: center;167 font-size: 40px;168 color: #333;169 box-shadow: 0 1px 0 rgba(0,0,0,0.05);170 }171 .key.wide { width: 120px; }172 .key.space { flex: 1; height: 110px; min-width: 300px; }173 .key.tint { background: #DCE7CD; border-color: #BBD1A8; }174 .key svg { width: 48px; height: 48px; }175 .row.top .key { width: 88px; }176 .row.middle .key { width: 96px; }177 .row.bottom .key { width: 98px; }178 179 /* Gesture bar */180 .gesture {181 position: absolute;182 bottom: 12px;183 left: 50%;184 transform: translateX(-50%);185 width: 300px;186 height: 10px;187 background: #9E9E9E;188 border-radius: 6px;189 }190</style>191</head>192<body>193<div id="render-target">194 <!-- Status Bar -->195 <div class="status-bar">196 <div class="status-left">1:44</div>197 <div class="status-right">198 <span class="status-icon">199 <!-- Vibration icon -->200 <svg viewBox="0 0 24 24">201 <rect x="7" y="4" width="10" height="16" rx="2" fill="#444"></rect>202 </svg>203 </span>204 <span class="status-icon">205 <!-- Pin icon -->206 <svg viewBox="0 0 24 24">207 <circle cx="12" cy="8" r="4" fill="#444"></circle>208 <rect x="11" y="12" width="2" height="8" fill="#444"></rect>209 </svg>210 </span>211 <span class="status-icon">212 <!-- Cast icon -->213 <svg viewBox="0 0 24 24">214 <rect x="3" y="5" width="18" height="12" rx="2" fill="none" stroke="#444" stroke-width="2"></rect>215 <path d="M3 17c3 0 5 2 6 4" stroke="#444" stroke-width="2" fill="none"></path>216 </svg>217 </span>218 <span class="status-icon">219 <!-- Globe icon -->220 <svg viewBox="0 0 24 24">221 <circle cx="12" cy="12" r="9" fill="none" stroke="#444" stroke-width="2"></circle>222 <path d="M3 12h18M12 3a18 18 0 0 1 0 18" stroke="#444" stroke-width="2" fill="none"></path>223 </svg>224 </span>225 <span class="status-icon">226 <!-- Dot -->227 <svg viewBox="0 0 24 24">228 <circle cx="12" cy="12" r="3" fill="#444"></circle>229 </svg>230 </span>231 <span class="status-icon">232 <!-- Wi-Fi -->233 <svg viewBox="0 0 24 24">234 <path d="M2 8c5-4 15-4 20 0" stroke="#444" stroke-width="2" fill="none"/>235 <path d="M5 12c4-3 10-3 14 0" stroke="#444" stroke-width="2" fill="none"/>236 <path d="M9 16c2-2 4-2 6 0" stroke="#444" stroke-width="2" fill="none"/>237 <circle cx="12" cy="18" r="1.8" fill="#444"></circle>238 </svg>239 </span>240 <span class="status-icon">241 <!-- Battery -->242 <svg viewBox="0 0 28 24">243 <rect x="2" y="6" width="20" height="12" rx="2" fill="none" stroke="#444" stroke-width="2"></rect>244 <rect x="23" y="9" width="3" height="6" rx="1" fill="#444"></rect>245 <rect x="4" y="8" width="14" height="8" fill="#444"></rect>246 </svg>247 </span>248 </div>249 </div>250 251 <!-- App Bar -->252 <div class="app-bar">253 <div class="app-left">254 <div class="back-icon">255 <svg viewBox="0 0 24 24">256 <path d="M15 5L7 12l8 7" stroke="#222" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>257 </svg>258 </div>259 <div class="app-title">Name</div>260 </div>261 <div class="app-ok">OK</div>262 </div>263 264 <!-- Content -->265 <div class="content">266 <div class="field-label">Name</div>267 <div class="text-input">Global</div>268 <div class="helper-text">269 Input your name in your native language or the language you're learning. Names cannot contain special symbols or emoji characters.270 </div>271 </div>272 273 <!-- Keyboard -->274 <div class="keyboard">275 <div class="suggestions">276 <div class="grid-key">277 <!-- 3x3 dots grid -->278 <svg viewBox="0 0 24 24">279 <g fill="#5F7D53">280 <circle cx="6" cy="6" r="2"></circle>281 <circle cx="12" cy="6" r="2"></circle>282 <circle cx="18" cy="6" r="2"></circle>283 <circle cx="6" cy="12" r="2"></circle>284 <circle cx="12" cy="12" r="2"></circle>285 <circle cx="18" cy="12" r="2"></circle>286 <circle cx="6" cy="18" r="2"></circle>287 <circle cx="12" cy="18" r="2"></circle>288 <circle cx="18" cy="18" r="2"></circle>289 </g>290 </svg>291 </div>292 <div class="chip">Global</div>293 <div class="divider"></div>294 <div class="chip">Globalization</div>295 <div class="divider"></div>296 <div class="chip">Globally</div>297 <div style="margin-left:auto" class="grid-key">298 <!-- Mic icon -->299 <svg viewBox="0 0 24 24">300 <rect x="9" y="5" width="6" height="10" rx="3" fill="#5F7D53"></rect>301 <path d="M6 11c0 4 12 4 12 0" stroke="#5F7D53" stroke-width="2" fill="none"/>302 <rect x="11" y="16" width="2" height="4" fill="#5F7D53"></rect>303 </svg>304 </div>305 </div>306 307 <div class="key-rows">308 <!-- Row 1 -->309 <div class="row top">310 <div class="key">q</div>311 <div class="key">w</div>312 <div class="key">e</div>313 <div class="key">r</div>314 <div class="key">t</div>315 <div class="key">y</div>316 <div class="key">u</div>317 <div class="key">i</div>318 <div class="key">o</div>319 <div class="key">p</div>320 <div class="key tint">321 <!-- Backspace -->322 <svg viewBox="0 0 24 24">323 <path d="M10 5L4 12l6 7h10V5H10z" fill="#4B5F3F"></path>324 <path d="M12 9l6 6M18 9l-6 6" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>325 </svg>326 </div>327 </div>328 329 <!-- Row 2 -->330 <div class="row middle">331 <div class="key">a</div>332 <div class="key">s</div>333 <div class="key">d</div>334 <div class="key">f</div>335 <div class="key">g</div>336 <div class="key">h</div>337 <div class="key">j</div>338 <div class="key">k</div>339 <div class="key">l</div>340 </div>341 342 <!-- Row 3 -->343 <div class="row bottom">344 <div class="key tint">345 <!-- Shift -->346 <svg viewBox="0 0 24 24">347 <path d="M12 4l8 8h-5v8H9v-8H4l8-8z" fill="#4B5F3F"></path>348 </svg>349 </div>350 <div class="key">z</div>351 <div class="key">x</div>352 <div class="key">c</div>353 <div class="key">v</div>354 <div class="key">b</div>355 <div class="key">n</div>356 <div class="key">m</div>357 <div class="key">.</div>358 <div class="key tint">359 <!-- Enter / check -->360 <svg viewBox="0 0 24 24">361 <path d="M5 13l4 4L19 7" stroke="#FFFFFF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>362 </svg>363 </div>364 </div>365 366 <!-- Bottom utility row -->367 <div class="row">368 <div class="key tint wide">?123</div>369 <div class="key wide">,</div>370 <div class="key wide">☺</div>371 <div class="key space"></div>372 <div class="key wide">.</div>373 <div class="key tint wide">374 <!-- Return check small -->375 <svg viewBox="0 0 24 24">376 <path d="M5 13l4 4L19 7" stroke="#FFFFFF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>377 </svg>378 </div>379 </div>380 </div>381 </div>382 383 <!-- Gesture bar -->384 <div class="gesture"></div>385</div>386</body>387</html>