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=1440, initial-scale=1.0">6<title>Rename Dialog UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1440px;13 height: 3120px;14 background: #101214;15 border-radius: 0;16 box-shadow: none;17 color: #FFFFFF;18 }19 20 /* Status bar */21 .status-bar {22 position: absolute;23 top: 0;24 left: 0;25 width: 1440px;26 height: 120px;27 background: #0B0C0E;28 padding: 0 36px;29 display: flex;30 align-items: center;31 justify-content: space-between;32 box-sizing: border-box;33 font-size: 44px;34 letter-spacing: 0.5px;35 }36 .status-right {37 display: flex;38 align-items: center;39 gap: 30px;40 color: #EAEAEA;41 }42 .icon {43 display: inline-flex;44 width: 54px;45 height: 54px;46 fill: #EAEAEA;47 }48 49 /* App bar */50 .app-bar {51 position: absolute;52 top: 120px;53 left: 0;54 width: 1440px;55 height: 180px;56 background: #14161A;57 display: flex;58 align-items: center;59 justify-content: space-between;60 box-sizing: border-box;61 padding: 0 40px;62 border-bottom: 1px solid #20232A;63 }64 .app-title {65 font-size: 72px;66 font-weight: 600;67 color: #D0D3DA;68 }69 .app-actions {70 display: flex;71 align-items: center;72 gap: 50px;73 }74 .action-btn {75 width: 88px;76 height: 88px;77 border-radius: 16px;78 display: flex;79 align-items: center;80 justify-content: center;81 background: transparent;82 }83 .action-btn svg { width: 64px; height: 64px; fill: #C7CCD4; }84 85 /* File list area */86 .content {87 position: absolute;88 top: 300px;89 left: 0;90 width: 1440px;91 height: 1140px;92 background: #0F1216;93 }94 .file-row {95 margin: 40px;96 height: 260px;97 background: #9EC3FF;98 border-radius: 12px;99 display: flex;100 align-items: center;101 padding: 40px;102 box-sizing: border-box;103 color: #0A1A33;104 position: relative;105 }106 .file-icon {107 width: 140px;108 height: 140px;109 border-radius: 16px;110 background: #E0E0E0;111 border: 1px solid #BDBDBD;112 display: flex;113 align-items: center;114 justify-content: center;115 color: #757575;116 margin-right: 40px;117 }118 .file-texts {119 flex: 1;120 }121 .file-name { font-size: 58px; font-weight: 700; color: #0A1A33; }122 .file-meta { margin-top: 18px; font-size: 40px; color: #233A61; }123 .file-check {124 width: 84px;125 height: 84px;126 border-radius: 10px;127 background: #1A1D22;128 display: flex;129 align-items: center;130 justify-content: center;131 }132 .file-check svg { width: 60px; height: 60px; fill: #9EC3FF; }133 134 /* Dim overlay (above content, not covering keyboard) */135 .overlay {136 position: absolute;137 top: 0;138 left: 0;139 width: 1440px;140 height: 1920px; /* leave keyboard visible */141 background: rgba(0,0,0,0.55);142 z-index: 10;143 pointer-events: none;144 }145 146 /* Modal dialog */147 .modal {148 position: absolute;149 top: 740px;150 left: 50%;151 transform: translateX(-50%);152 width: 980px;153 background: #EFEFEF;154 color: #1B1B1B;155 border-radius: 34px;156 box-shadow: 0 20px 60px rgba(0,0,0,0.6);157 padding: 50px 60px 40px;158 box-sizing: border-box;159 z-index: 20;160 }161 .modal-title {162 font-size: 68px;163 font-weight: 700;164 margin-bottom: 60px;165 }166 .modal-input {167 font-size: 58px;168 border: none;169 outline: none;170 background: transparent;171 width: 100%;172 color: #1B1B1B;173 padding: 0 0 16px 0;174 border-bottom: 4px solid #B8B8B8;175 box-sizing: border-box;176 }177 .modal-actions {178 display: flex;179 justify-content: flex-end;180 gap: 60px;181 margin-top: 50px;182 }183 .modal-link {184 font-size: 64px;185 color: #64A4FF;186 }187 188 /* Keyboard */189 .keyboard {190 position: absolute;191 bottom: 90px; /* leave room for navigation pill */192 left: 0;193 width: 1440px;194 height: 1200px;195 background: #0E0F11;196 border-top: 1px solid #202225;197 box-sizing: border-box;198 padding: 36px 40px;199 z-index: 5;200 }201 .suggestions {202 display: flex;203 align-items: center;204 justify-content: center;205 gap: 36px;206 margin-bottom: 36px;207 }208 .chip {209 padding: 18px 34px;210 border-radius: 36px;211 background: #1A1C1F;212 color: #E6E6E6;213 font-size: 46px;214 }215 .suggest-right {216 position: absolute;217 right: 40px;218 top: 36px;219 display: flex;220 align-items: center;221 gap: 30px;222 }223 .kb-grid {224 display: grid;225 grid-template-columns: repeat(10, 1fr);226 gap: 22px;227 }228 .key {229 height: 128px;230 background: #1A1C1F;231 border-radius: 22px;232 display: flex;233 align-items: center;234 justify-content: center;235 color: #EDEDED;236 font-size: 54px;237 }238 .row { margin-top: 22px; }239 .key.shift { width: 160px; }240 .bottom-row {241 display: grid;242 grid-template-columns: 200px 1fr 200px 200px;243 gap: 22px;244 margin-top: 22px;245 }246 .key.light {247 background: #CFE9C8;248 color: #0E0F11;249 }250 .key.circle {251 border-radius: 50%;252 }253 .key.enter {254 background: #D7F5C8;255 color: #0E0F11;256 }257 .key.mic svg,258 .key.backspace svg { fill: #EDEDED; width: 52px; height: 52px; }259 260 /* Navigation pill */261 .nav-pill {262 position: absolute;263 bottom: 20px;264 left: 50%;265 transform: translateX(-50%);266 width: 320px;267 height: 18px;268 background: #FFFFFF;269 border-radius: 12px;270 opacity: 0.9;271 z-index: 6;272 }273</style>274</head>275<body>276<div id="render-target">277 278 <!-- Status Bar -->279 <div class="status-bar">280 <div class="status-left">3:52</div>281 <div class="status-right">282 <!-- WiFi icon -->283 <svg class="icon" viewBox="0 0 24 24"><path d="M12 18c.9 0 1.7.8 1.7 1.7S12.9 21.4 12 21.4s-1.7-.8-1.7-1.7S11.1 18 12 18zm7.4-6.3l-1.6 1.6C16.1 11.6 13.9 10.9 12 10.9s-4.1.7-5.8 2.3l-1.6-1.6C6.7 9.8 9.2 8.9 12 8.9s5.3.9 7.4 2.8zm3-3.1l-1.6 1.6C18.6 8.1 15.4 7 12 7S5.4 8.1 3.2 10.2L1.6 8.6C4.3 6.1 8 4.8 12 4.8s7.7 1.3 10.4 3.8z"/></svg>284 <!-- Battery icon -->285 <svg class="icon" viewBox="0 0 24 24"><path d="M20 7h-1V5h-2v2H7c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V9zm-2 8H7V9h11v6z"/></svg>286 </div>287 </div>288 289 <!-- App Bar -->290 <div class="app-bar">291 <div class="app-title">(2)</div>292 <div class="app-actions">293 <div class="action-btn">294 <!-- Search -->295 <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 14 15.5l.27.28v.79L20 21l1-1-5.5-5.5zM10 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/></svg>296 </div>297 <div class="action-btn">298 <!-- Scissors -->299 <svg viewBox="0 0 24 24"><path d="M9.64 7L3 3l1-1 8 4.5L20 2l1 1-8.5 4.6L12 9l4 7-1.2.7L11 10.6 8.2 12c.5.9.3 2-.5 2.6a2.3 2.3 0 1 1-.8-4.5L9.64 7z"/></svg>300 </div>301 <div class="action-btn">302 <!-- Pencil -->303 <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm19.71-11.04a1 1 0 0 0 0-1.41l-2.5-2.5a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.99-1.67z"/></svg>304 </div>305 <div class="action-btn">306 <!-- Hamburger -->307 <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>308 </div>309 </div>310 </div>311 312 <!-- Content with selected file -->313 <div class="content">314 <div class="file-row">315 <div class="file-icon">[IMG: Music File]</div>316 <div class="file-texts">317 <div class="file-name">2023_12_08_12_46_58_1_...</div>318 <div class="file-meta">2023-12-08 13:31, 234.3 KB 00:14s</div>319 </div>320 <div class="file-check">321 <svg viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.5L4 13.2l5 5 11-11-1.5-1.5z"/></svg>322 </div>323 </div>324 </div>325 326 <!-- Dim Overlay -->327 <div class="overlay"></div>328 329 <!-- Modal dialog -->330 <div class="modal">331 <div class="modal-title">Insert new file name</div>332 <div class="modal-input">Quentin Clark</div>333 <div class="modal-actions">334 <div class="modal-link">Cancel</div>335 <div class="modal-link">OK</div>336 </div>337 </div>338 339 <!-- Keyboard -->340 <div class="keyboard">341 <div class="suggestions">342 <div class="chip">Clark</div>343 <div class="chip">Clarke</div>344 <div class="chip">Clarks</div>345 </div>346 <div class="suggest-right">347 <div class="key mic" style="width:120px;height:120px;border-radius:60px;background:#1A1C1F;">348 <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11h-2z"/></svg>349 </div>350 </div>351 352 <!-- Row 1 -->353 <div class="kb-grid">354 <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>355 </div>356 <!-- Row 2 -->357 <div class="kb-grid row" style="grid-template-columns: repeat(9, 1fr); margin-left: 70px; margin-right: 70px;">358 <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>359 </div>360 <!-- Row 3 -->361 <div class="kb-grid row" style="grid-template-columns: 160px repeat(7, 1fr) 160px;">362 <div class="key">↑</div>363 <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>364 <div class="key backspace">365 <svg viewBox="0 0 24 24"><path d="M22 6H9L2 12l7 6h13V6zm-3 8h-8v-4h8v4z"/></svg>366 </div>367 </div>368 <!-- Bottom Row -->369 <div class="bottom-row">370 <div class="key circle light" style="height:128px;">?123</div>371 <div class="key" style="height:128px;">space</div>372 <div class="key" style="height:128px;">.</div>373 <div class="key circle enter" style="height:128px;">374 <svg viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.5L4 13.2l5 5 11-11-1.5-1.5z"/></svg>375 </div>376 </div>377 </div>378 379 <!-- Navigation pill -->380 <div class="nav-pill"></div>381 382</div>383</body>384</html>