GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Generated UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 }14 15 /* Top status bar */16 .status-bar {17 height: 120px;18 padding: 24px 32px;19 display: flex;20 align-items: center;21 justify-content: space-between;22 color: #333;23 font-size: 36px;24 }25 .status-right {26 display: flex;27 align-items: center;28 gap: 24px;29 color: #666;30 font-size: 30px;31 }32 .icon { width: 40px; height: 40px; }33 .battery {34 display: flex;35 align-items: center;36 gap: 8px;37 }38 39 /* Header */40 .header {41 height: 120px;42 border-bottom: 1px solid #ececec;43 display: flex;44 align-items: center;45 padding: 0 28px;46 gap: 18px;47 }48 .back-btn {49 width: 64px;50 height: 64px;51 display: flex;52 align-items: center;53 justify-content: center;54 border-radius: 16px;55 }56 .title {57 font-size: 48px;58 color: #111;59 font-weight: 600;60 }61 62 /* Path section */63 .path-section {64 padding: 28px 32px 24px 32px;65 border-bottom: 1px solid #eeeeee;66 }67 .path-label {68 color: #8c8c8c;69 font-size: 34px;70 margin-bottom: 18px;71 }72 .path-row {73 display: flex;74 align-items: center;75 justify-content: space-between;76 }77 .path-text {78 font-size: 42px;79 color: #222;80 }81 82 /* File input area */83 .file-area {84 padding: 30px 32px 16px 32px;85 }86 .file-line {87 display: flex;88 align-items: flex-end;89 gap: 20px;90 }91 .name-highlight {92 display: inline-block;93 background: #dfe7ff;94 color: #1f3fb7;95 padding: 16px 12px;96 border-radius: 8px;97 font-size: 40px;98 }99 .underline {100 width: 700px;101 border-bottom: 6px solid #4e6cff;102 margin-top: 8px;103 }104 .ext {105 display: flex;106 align-items: center;107 gap: 10px;108 font-size: 38px;109 color: #333;110 }111 112 /* Buttons */113 .actions {114 padding: 24px 32px;115 display: flex;116 gap: 36px;117 }118 .btn {119 height: 120px;120 border-radius: 18px;121 display: flex;122 align-items: center;123 justify-content: center;124 font-size: 42px;125 font-weight: 600;126 }127 .btn-encrypt {128 flex: 0 0 380px;129 background: #f4f4f4;130 color: #5a5a5a;131 border: 1px solid #e6e6e6;132 }133 .btn-save {134 flex: 1;135 background: #4f72ff;136 color: #fff;137 box-shadow: 0 6px 16px rgba(79,114,255,0.28);138 }139 140 /* Spacer before keyboard */141 .spacer {142 height: 620px;143 }144 145 /* Keyboard */146 .keyboard {147 position: absolute;148 bottom: 0;149 left: 0;150 width: 1080px;151 height: 950px;152 background: #fbe7df;153 border-top: 1px solid #f1d6cf;154 padding: 24px 22px;155 box-sizing: border-box;156 }157 .kb-top-icons {158 display: flex;159 align-items: center;160 gap: 32px;161 padding: 10px 8px 16px 8px;162 }163 .iconBtn {164 width: 76px; height: 76px;165 border-radius: 18px;166 background: #ffffff;167 border: 1px solid #e7cfc8;168 display: flex; align-items: center; justify-content: center;169 color: #444; font-size: 28px;170 box-shadow: 0 2px 4px rgba(0,0,0,0.04);171 }172 173 .keys-row {174 display: flex;175 justify-content: space-between;176 padding: 10px 6px;177 margin-top: 6px;178 }179 .key {180 width: 92px;181 height: 108px;182 background: #ffffff;183 border-radius: 26px;184 box-shadow: 0 2px 4px rgba(0,0,0,0.06);185 display: flex; align-items: center; justify-content: center;186 font-size: 40px; color: #333;187 }188 .key.medium { width: 120px; }189 .key.wide { width: 640px; }190 .key.backspace { width: 120px; }191 .gesture-bar {192 position: absolute;193 bottom: 22px;194 left: 50%;195 transform: translateX(-50%);196 width: 560px;197 height: 12px;198 background: #c9c9c9;199 border-radius: 6px;200 }201 .check-btn {202 width: 120px;203 height: 120px;204 background: #f5b7aa;205 color: #ffffff;206 border-radius: 40px;207 display: flex; align-items: center; justify-content: center;208 font-size: 48px;209 box-shadow: inset 0 0 0 1px #e5a39a;210 }211 212 /* Small helper icons */213 .chevron-right, .chevron-left, .chevron-down { width: 40px; height: 40px; }214</style>215</head>216<body>217<div id="render-target">218 219 <!-- Status Bar -->220 <div class="status-bar">221 <div>9:43</div>222 <div class="status-right">223 <!-- Do-not-disturb icon -->224 <svg class="icon" viewBox="0 0 24 24">225 <circle cx="12" cy="12" r="10" fill="none" stroke="#666" stroke-width="2"></circle>226 <rect x="6" y="11" width="12" height="2" fill="#666"></rect>227 </svg>228 <!-- Wi-Fi icon -->229 <svg class="icon" viewBox="0 0 24 24">230 <path d="M2 8c5-5 15-5 20 0" fill="none" stroke="#666" stroke-width="2"></path>231 <path d="M5 12c4-4 10-4 14 0" fill="none" stroke="#666" stroke-width="2"></path>232 <circle cx="12" cy="16" r="2" fill="#666"></circle>233 </svg>234 <!-- Battery -->235 <div class="battery">236 <svg class="icon" viewBox="0 0 24 24">237 <rect x="2" y="6" width="18" height="12" fill="none" stroke="#666" stroke-width="2"></rect>238 <rect x="20" y="10" width="2" height="4" fill="#666"></rect>239 <rect x="4" y="8" width="12" height="8" fill="#8bc34a"></rect>240 </svg>241 <span>88%</span>242 </div>243 </div>244 </div>245 246 <!-- Header -->247 <div class="header">248 <div class="back-btn">249 <svg class="chevron-left" viewBox="0 0 24 24">250 <path d="M15 5 L8 12 L15 19" fill="none" stroke="#333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>251 </svg>252 </div>253 <div class="title">Save</div>254 </div>255 256 <!-- Path Section -->257 <div class="path-section">258 <div class="path-label">Path</div>259 <div class="path-row">260 <div class="path-text">WPS Cloud/My Cloud</div>261 <svg class="chevron-right" viewBox="0 0 24 24">262 <path d="M9 5 L16 12 L9 19" fill="none" stroke="#666" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>263 </svg>264 </div>265 </div>266 267 <!-- File Input Area -->268 <div class="file-area">269 <div class="file-line">270 <div>271 <div class="name-highlight">Meeting Agenda-WPS Office</div>272 <div class="underline"></div>273 </div>274 <div class="ext">275 <span>.docx</span>276 <svg class="chevron-down" viewBox="0 0 24 24">277 <path d="M6 9 L12 15 L18 9" fill="none" stroke="#666" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>278 </svg>279 </div>280 </div>281 </div>282 283 <!-- Action Buttons -->284 <div class="actions">285 <div class="btn btn-encrypt">Encrypt</div>286 <div class="btn btn-save">Save</div>287 </div>288 289 <!-- Spacer to push keyboard to bottom -->290 <div class="spacer"></div>291 292 <!-- Keyboard -->293 <div class="keyboard">294 <div class="kb-top-icons">295 <div class="iconBtn">▦</div>296 <div class="iconBtn">🙂</div>297 <div class="iconBtn" style="font-weight:700;">GIF</div>298 <div class="iconBtn">G</div>299 <div class="iconBtn">300 <svg viewBox="0 0 24 24" width="28" height="28">301 <circle cx="12" cy="12" r="9" fill="none" stroke="#666" stroke-width="2"></circle>302 <path d="M12 7 L12 12 L16 14" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"></path>303 </svg>304 </div>305 <div class="iconBtn">306 <svg viewBox="0 0 24 24" width="28" height="28">307 <circle cx="12" cy="12" r="6" fill="none" stroke="#666" stroke-width="2"></circle>308 <rect x="10.5" y="4" width="3" height="4" fill="#666"></rect>309 </svg>310 </div>311 <div class="iconBtn">312 <svg viewBox="0 0 24 24" width="28" height="28">313 <path d="M12 4 L12 15" stroke="#666" stroke-width="2"></path>314 <path d="M8 9 C8 12, 16 12, 16 9" stroke="#666" stroke-width="2" fill="none"></path>315 <circle cx="12" cy="18" r="2" fill="#666"></circle>316 </svg>317 </div>318 </div>319 320 <!-- Row 1 -->321 <div class="keys-row">322 <div class="key">q</div>323 <div class="key">w</div>324 <div class="key">e</div>325 <div class="key">r</div>326 <div class="key">t</div>327 <div class="key">y</div>328 <div class="key">u</div>329 <div class="key">i</div>330 <div class="key">o</div>331 <div class="key">p</div>332 </div>333 334 <!-- Row 2 -->335 <div class="keys-row">336 <div class="key">a</div>337 <div class="key">s</div>338 <div class="key">d</div>339 <div class="key">f</div>340 <div class="key">g</div>341 <div class="key">h</div>342 <div class="key">j</div>343 <div class="key">k</div>344 <div class="key">l</div>345 </div>346 347 <!-- Row 3 -->348 <div class="keys-row">349 <div class="key medium">⇧</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 backspace">⌫</div>358 </div>359 360 <!-- Row 4 -->361 <div class="keys-row">362 <div class="key medium">?123</div>363 <div class="key medium">,</div>364 <div class="key medium">🙂</div>365 <div class="key wide"></div>366 <div class="key medium">.</div>367 <div class="key medium">↵</div>368 <div class="check-btn">✓</div>369 </div>370 371 <div class="gesture-bar"></div>372 </div>373 374</div>375</body>376</html>