GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>UI Render</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #2c1a17; /* deep brown */14 color: #f9e1db;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 110px;24 padding: 0 32px;25 box-sizing: border-box;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #ffffff;30 font-weight: 600;31 }32 .status-icons {33 display: flex;34 align-items: center;35 gap: 22px;36 }37 .status-bar .time { font-size: 38px; letter-spacing: 0.5px; }38 .icon { width: 36px; height: 36px; display: inline-block; }39 .battery {40 display: flex;41 align-items: center;42 gap: 10px;43 font-size: 30px;44 }45 .battery-icon { width: 48px; height: 28px; }46 47 /* Top sheet / rename field */48 .top-sheet {49 position: absolute;50 top: 110px;51 left: 0;52 width: 1080px;53 height: 520px;54 background: #4a322e;55 border-bottom-left-radius: 64px;56 border-bottom-right-radius: 64px;57 box-shadow: 0 12px 40px rgba(0,0,0,0.35);58 }59 .top-sheet .inner {60 position: absolute;61 inset: 0;62 padding: 40px;63 box-sizing: border-box;64 }65 .close-btn {66 position: absolute;67 left: 36px;68 top: 40px;69 width: 48px;70 height: 48px;71 background: transparent;72 border: none;73 cursor: default;74 }75 .close-btn svg { width: 48px; height: 48px; }76 .save-btn {77 position: absolute;78 right: 36px;79 top: 48px;80 font-size: 42px;81 color: #f2a79a;82 font-weight: 600;83 }84 .input-title {85 position: absolute;86 left: 36px;87 bottom: 80px;88 font-size: 96px;89 line-height: 1;90 color: #f8d1c8;91 font-weight: 500;92 letter-spacing: 0.5px;93 display: flex;94 align-items: center;95 gap: 10px;96 }97 .caret {98 display: inline-block;99 width: 4px;100 height: 92px;101 background: #f4b7ad;102 border-radius: 2px;103 transform: translateY(6px);104 }105 106 /* Content area beneath sheet */107 .content {108 position: absolute;109 top: 630px;110 left: 0;111 width: 1080px;112 bottom: 900px; /* leaves space for keyboard */113 }114 .center-line {115 position: absolute;116 left: 540px;117 top: 80px;118 bottom: 160px;119 width: 4px;120 background: rgba(255,255,255,0.08);121 border-radius: 2px;122 }123 .mini-wave {124 position: absolute;125 left: 520px;126 top: 380px;127 width: 44px;128 height: 20px;129 background: rgba(255,255,255,0.12);130 border-radius: 2px;131 }132 .dots {133 position: absolute;134 left: 60px;135 right: 60px;136 bottom: 120px;137 display: flex;138 gap: 18px;139 align-items: center;140 justify-content: space-between;141 }142 .dot {143 width: 10px;144 height: 10px;145 background: rgba(255,255,255,0.12);146 border-radius: 50%;147 }148 .bar {149 width: 18px;150 height: 32px;151 background: rgba(255,255,255,0.18);152 border-radius: 6px;153 }154 155 /* Keyboard */156 .keyboard {157 position: absolute;158 left: 0;159 bottom: 0;160 width: 1080px;161 height: 900px;162 background: #fee6dc;163 border-top-left-radius: 22px;164 border-top-right-radius: 22px;165 box-shadow: 0 -6px 20px rgba(0,0,0,0.25);166 }167 .suggestions {168 height: 120px;169 background: #f6d6cf;170 display: flex;171 align-items: center;172 padding: 0 26px;173 box-sizing: border-box;174 gap: 26px;175 color: #6b3e36;176 font-size: 36px;177 }178 .chip { color: #6b3e36; }179 .divider {180 width: 1px;181 height: 38px;182 background: #d7b7af;183 }184 .app-switch, .mic {185 width: 68px;186 height: 68px;187 border-radius: 34px;188 background: #f7b8aa;189 display: flex;190 align-items: center;191 justify-content: center;192 }193 .suggestions .mic { margin-left: auto; }194 195 .keys {196 padding: 24px;197 box-sizing: border-box;198 display: flex;199 flex-direction: column;200 gap: 22px;201 }202 .row {203 display: grid;204 grid-auto-flow: column;205 grid-column-gap: 12px;206 align-items: center;207 justify-content: center;208 }209 .row.row1 { grid-template-columns: repeat(10, 1fr); }210 .row.row2 { grid-template-columns: repeat(9, 1fr); padding: 0 40px; }211 .row.row3 { grid-template-columns: 1.3fr repeat(7, 1fr) 1.5fr; }212 .row.row4 { display: grid; grid-template-columns: 1.5fr 1fr 1fr 6fr 1fr 1.6fr; align-items: center; }213 214 .key {215 height: 120px;216 background: #ffffff;217 color: #5b3a33;218 border-radius: 28px;219 display: flex;220 align-items: center;221 justify-content: center;222 font-size: 44px;223 font-weight: 600;224 box-shadow: inset 0 -2px 0 rgba(0,0,0,0.06);225 }226 .key.special {227 background: #f7b8aa;228 color: #4b2e28;229 font-weight: 700;230 }231 .key.small { font-size: 38px; }232 233 .gesture-bar {234 position: absolute;235 bottom: 18px;236 left: 50%;237 transform: translateX(-50%);238 width: 220px;239 height: 10px;240 background: #7d7d7d;241 border-radius: 12px;242 }243</style>244</head>245<body>246<div id="render-target">247 248 <!-- Status bar -->249 <div class="status-bar">250 <div class="time">2:40</div>251 <div class="status-icons">252 <!-- DND icon -->253 <svg class="icon" viewBox="0 0 24 24">254 <circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"/>255 <rect x="6" y="11" width="12" height="2" fill="#fff"/>256 </svg>257 <!-- WiFi icon -->258 <svg class="icon" viewBox="0 0 24 24">259 <path d="M2 9c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none"/>260 <path d="M6 12c3-3 9-3 12 0" stroke="#fff" stroke-width="2" fill="none"/>261 <circle cx="12" cy="16" r="2" fill="#fff"/>262 </svg>263 <!-- Battery + percent -->264 <div class="battery">265 <span>100%</span>266 <svg class="battery-icon" viewBox="0 0 36 20">267 <rect x="1" y="3" width="30" height="14" rx="3" ry="3" fill="none" stroke="#fff" stroke-width="2"/>268 <rect x="32" y="7" width="3" height="6" rx="1" fill="#fff"/>269 <rect x="3" y="5" width="26" height="10" fill="#fff"/>270 </svg>271 </div>272 </div>273 </div>274 275 <!-- Top sheet -->276 <div class="top-sheet">277 <div class="inner">278 <button class="close-btn" aria-label="Close">279 <svg viewBox="0 0 24 24">280 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#f5c0b6" stroke-width="2.8" stroke-linecap="round"/>281 </svg>282 </button>283 <div class="save-btn">Save</div>284 <div class="input-title">My audio<span class="caret"></span></div>285 </div>286 </div>287 288 <!-- Background content -->289 <div class="content">290 <div class="center-line"></div>291 <div class="mini-wave"></div>292 <div class="dots">293 <!-- dotted timeline -->294 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>295 <div class="bar"></div>296 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>297 <div class="dot"></div><div class="dot"></div><div class="dot"></div>298 </div>299 </div>300 301 <!-- Keyboard -->302 <div class="keyboard">303 <div class="suggestions">304 <div class="app-switch" aria-label="App switcher">305 <!-- 3x3 grid icon -->306 <svg viewBox="0 0 24 24" width="34" height="34">307 <g fill="#4b2e28">308 <rect x="2" y="2" width="6" height="6" rx="1"/>309 <rect x="9" y="2" width="6" height="6" rx="1"/>310 <rect x="16" y="2" width="6" height="6" rx="1"/>311 <rect x="2" y="9" width="6" height="6" rx="1"/>312 <rect x="9" y="9" width="6" height="6" rx="1"/>313 <rect x="16" y="9" width="6" height="6" rx="1"/>314 <rect x="2" y="16" width="6" height="6" rx="1"/>315 <rect x="9" y="16" width="6" height="6" rx="1"/>316 <rect x="16" y="16" width="6" height="6" rx="1"/>317 </g>318 </svg>319 </div>320 <div class="chip">audio</div>321 <div class="divider"></div>322 <div class="chip">studio</div>323 <div class="divider"></div>324 <div class="chip">audiobook</div>325 <div class="mic" aria-label="Voice">326 <svg viewBox="0 0 24 24" width="28" height="28">327 <rect x="8" y="4" width="8" height="10" rx="4" fill="#4b2e28"/>328 <path d="M5 11c0 5 14 5 14 0" fill="none" stroke="#4b2e28" stroke-width="2"/>329 <path d="M12 15v5" stroke="#4b2e28" stroke-width="2" stroke-linecap="round"/>330 <path d="M9 20h6" stroke="#4b2e28" stroke-width="2" stroke-linecap="round"/>331 </svg>332 </div>333 </div>334 335 <div class="keys">336 <!-- Row 1 -->337 <div class="row row1">338 <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>339 <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>340 </div>341 <!-- Row 2 -->342 <div class="row row2">343 <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>344 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>345 </div>346 <!-- Row 3 -->347 <div class="row row3">348 <div class="key special">349 <svg viewBox="0 0 24 24" width="34" height="34">350 <path d="M12 5 L6 11 H10 V19 H14 V11 H18 Z" fill="#4b2e28"/>351 </svg>352 </div>353 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>354 <div class="key">b</div><div class="key">n</div><div class="key">m</div>355 <div class="key special">356 <svg viewBox="0 0 24 24" width="34" height="34">357 <path d="M19 12 L9 12" stroke="#4b2e28" stroke-width="2" stroke-linecap="round"/>358 <path d="M9 7 L4 12 L9 17" stroke="#4b2e28" stroke-width="2" fill="none" stroke-linecap="round"/>359 <rect x="6" y="8" width="10" height="8" fill="none"/>360 </svg>361 </div>362 </div>363 <!-- Row 4 -->364 <div class="row row4">365 <div class="key special small">?123</div>366 <div class="key small">,</div>367 <div class="key small">☺</div>368 <div class="key"> </div>369 <div class="key">.</div>370 <div class="key special">371 <svg viewBox="0 0 24 24" width="34" height="34">372 <path d="M6 12 L10 16 L18 8" stroke="#4b2e28" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>373 </svg>374 </div>375 </div>376 </div>377 378 <div class="gesture-bar"></div>379 </div>380 381</div>382</body>383</html>