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>Drive Rename Modal - Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #121212;15 color: #EDEDED;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 right: 0;24 height: 96px;25 padding: 0 24px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #fff;30 font-weight: 600;31 letter-spacing: 0.5px;32 }33 .status-icons {34 display: flex;35 align-items: center;36 gap: 18px;37 }38 .icon {39 width: 32px;40 height: 32px;41 display: inline-flex;42 align-items: center;43 justify-content: center;44 }45 46 /* Search/header */47 .header {48 position: absolute;49 top: 108px;50 left: 24px;51 right: 24px;52 display: flex;53 align-items: center;54 gap: 20px;55 }56 .hamburger {57 width: 64px;58 height: 64px;59 border-radius: 16px;60 display: flex;61 align-items: center;62 justify-content: center;63 color: #E0E0E0;64 }65 .search-pill {66 flex: 1;67 height: 90px;68 background: #1E1F1F;69 border-radius: 45px;70 display: flex;71 align-items: center;72 padding: 0 28px;73 gap: 18px;74 border: 1px solid #2a2a2a;75 color: #A9A9A9;76 font-size: 34px;77 }78 .avatar {79 width: 88px;80 height: 88px;81 border-radius: 44px;82 background: #2E2E2E;83 position: absolute;84 right: 24px;85 top: 102px;86 border: 2px solid #3a3a3a;87 display: flex;88 align-items: center;89 justify-content: center;90 font-weight: 700;91 color: #E86C85;92 font-size: 44px;93 }94 95 /* Tabs */96 .tabs {97 position: absolute;98 top: 230px;99 left: 24px;100 right: 24px;101 display: flex;102 gap: 40px;103 padding-left: 8px;104 font-size: 34px;105 }106 .tab {107 color: #9AA0A6;108 padding: 18px 8px;109 position: relative;110 }111 .tab.active {112 color: #8AB4F8;113 }114 .tab.active::after {115 content: "";116 position: absolute;117 left: 0;118 right: 0;119 bottom: -6px;120 height: 6px;121 background: #8AB4F8;122 border-radius: 6px;123 }124 125 /* Grid/list toggle icon */126 .view-toggle {127 position: absolute;128 top: 310px;129 right: 32px;130 width: 72px;131 height: 72px;132 border-radius: 16px;133 background: #1E1F1F;134 border: 1px solid #2a2a2a;135 display: flex;136 align-items: center;137 justify-content: center;138 color: #BDBDBD;139 }140 141 /* Content placeholders */142 .content-section {143 position: absolute;144 top: 360px;145 left: 24px;146 right: 24px;147 bottom: 420px;148 overflow: hidden;149 }150 .thumb-row {151 display: flex;152 gap: 28px;153 }154 .thumb {155 width: 488px;156 height: 320px;157 background: #202124;158 border: 1px solid #2d2d2d;159 border-radius: 20px;160 display: flex;161 align-items: center;162 justify-content: center;163 color: #9E9E9E;164 font-size: 30px;165 }166 167 /* Floating action button */168 .fab {169 position: absolute;170 right: 28px;171 top: 1120px;172 width: 118px;173 height: 118px;174 border-radius: 32px;175 background: #263238;176 border: 1px solid #35494d;177 display: flex;178 align-items: center;179 justify-content: center;180 color: #B0D5FF;181 box-shadow: 0 10px 24px rgba(0,0,0,0.4);182 }183 184 /* Bottom navigation (elevated above keyboard) */185 .bottom-nav {186 position: absolute;187 left: 0;188 right: 0;189 bottom: 850px;190 height: 120px;191 background: rgba(18,18,18,0.95);192 border-top: 1px solid #232323;193 display: flex;194 align-items: center;195 justify-content: space-around;196 font-size: 28px;197 color: #9AA0A6;198 }199 .nav-item {200 display: flex;201 flex-direction: column;202 align-items: center;203 gap: 8px;204 width: 180px;205 }206 .nav-item.active {207 color: #8AB4F8;208 }209 210 /* Rename modal overlay */211 .scrim {212 position: absolute;213 inset: 0;214 background: rgba(0,0,0,0.25);215 }216 .dialog {217 position: absolute;218 left: 60px;219 right: 60px;220 top: 560px;221 height: 560px;222 background: #1F1F1F;223 border: 1px solid #2b2b2b;224 border-radius: 36px;225 box-shadow: 0 30px 80px rgba(0,0,0,0.6);226 padding: 40px;227 }228 .dialog-title {229 font-size: 44px;230 font-weight: 700;231 margin-bottom: 32px;232 color: #EAEAEA;233 }234 .input {235 height: 120px;236 border-radius: 22px;237 border: 2px solid #5F9BFF;238 padding: 26px 28px;239 display: flex;240 align-items: center;241 font-size: 40px;242 color: #EDEDED;243 background: #232323;244 }245 .selection {246 background: rgba(138, 180, 248, 0.35);247 border-radius: 8px;248 padding: 6px 10px;249 }250 .dialog-actions {251 position: absolute;252 right: 36px;253 bottom: 24px;254 display: flex;255 gap: 36px;256 font-size: 36px;257 color: #8AB4F8;258 }259 260 /* Keyboard mock */261 .keyboard {262 position: absolute;263 left: 0;264 right: 0;265 bottom: 48px;266 height: 760px;267 background: #1A1A1A;268 border-top: 1px solid #2b2b2b;269 padding: 24px 18px;270 }271 .kb-toprow {272 display: flex;273 align-items: center;274 gap: 22px;275 margin-bottom: 18px;276 color: #CFCFCF;277 }278 .kb-btn {279 height: 88px;280 background: #292929;281 border-radius: 18px;282 display: flex;283 align-items: center;284 justify-content: center;285 color: #E0E0E0;286 border: 1px solid #333;287 font-size: 34px;288 flex: 1;289 }290 .kb-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 16px; margin-bottom: 16px; }291 .kb-row .kb-btn { height: 104px; }292 .kb-space-row {293 display: grid;294 grid-template-columns: 1.2fr 0.9fr 5fr 1fr 1.2fr;295 gap: 16px;296 }297 .enter-btn {298 background: #C7DBFF;299 color: #1B1B1B;300 font-weight: 700;301 }302 303 /* Gesture bar */304 .gesture {305 position: absolute;306 bottom: 12px;307 left: 50%;308 transform: translateX(-50%);309 width: 300px;310 height: 10px;311 background: #E0E0E0;312 opacity: 0.8;313 border-radius: 6px;314 }315</style>316</head>317<body>318<div id="render-target">319 320 <!-- Status bar -->321 <div class="status-bar">322 <div style="display:flex; align-items:center; gap:12px;">323 <span style="font-size:36px;">8:30</span>324 <div class="icon" title="status-app">325 <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff"><rect x="3" y="4" width="6" height="16" rx="1.5"></rect><rect x="11" y="8" width="4" height="8" rx="1"></rect></svg>326 </div>327 </div>328 <div class="status-icons">329 <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff"><path d="M12 3l-9 7h18l-9-7zm0 4l6 5v7h-4v-5H10v5H6v-7l6-5z"/></svg>330 <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff"><path d="M21 8H3v11a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8zM16 3H8l-1 3h10l-1-3z"/></svg>331 <svg width="24" height="24" viewBox="0 0 24 24" fill="#fff"><path d="M11 21h2V3h-2v18z"/></svg>332 </div>333 </div>334 335 <!-- Header with search -->336 <div class="header">337 <div class="hamburger">338 <svg width="40" height="40" viewBox="0 0 24 24" fill="#CFCFCF">339 <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/>340 </svg>341 </div>342 <div class="search-pill">343 <svg width="42" height="42" viewBox="0 0 24 24" fill="#9AA0A6">344 <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 21.5 21.5 20 15.5 14zM9.5 14C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>345 </svg>346 <span>Search in Drive</span>347 </div>348 </div>349 <div class="avatar">C</div>350 351 <!-- Tabs -->352 <div class="tabs">353 <div class="tab active">My Drive</div>354 <div class="tab">Computers</div>355 </div>356 357 <!-- View toggle icon -->358 <div class="view-toggle">359 <svg width="40" height="40" viewBox="0 0 24 24" fill="#BDBDBD">360 <path d="M4 6h16v2H4V6zm0 5h10v2H4v-2zm0 5h16v2H4v-2z"/>361 </svg>362 </div>363 364 <!-- Content thumbnails (behind dialog) -->365 <div class="content-section">366 <div class="thumb-row">367 <div class="thumb">[IMG: Document Thumbnail]</div>368 <div class="thumb">[IMG: Document Thumbnail]</div>369 </div>370 </div>371 372 <!-- Floating Action Button -->373 <div class="fab">374 <svg width="56" height="56" viewBox="0 0 24 24" fill="#B0D5FF">375 <path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/>376 </svg>377 </div>378 379 <!-- Bottom navigation -->380 <div class="bottom-nav">381 <div class="nav-item">382 <svg width="40" height="40" viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>383 <div>Home</div>384 </div>385 <div class="nav-item">386 <svg width="40" height="40" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>387 <div>Starred</div>388 </div>389 <div class="nav-item">390 <svg width="40" height="40" viewBox="0 0 24 24" fill="currentColor"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zM8 11c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5C15 14.17 10.33 13 8 13zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h7v-2.5c0-2.33-4.67-3.5-8-3.5z"/></svg>391 <div>Shared</div>392 </div>393 <div class="nav-item active">394 <svg width="40" height="40" viewBox="0 0 24 24" fill="currentColor"><path d="M10 4H4v16h16V8h-8l-2-4z"/></svg>395 <div>Files</div>396 </div>397 </div>398 399 <!-- Scrim + Rename dialog -->400 <div class="scrim"></div>401 <div class="dialog">402 <div class="dialog-title">Rename folder</div>403 <div class="input">404 <span class="selection">Jitendra</span>405 </div>406 <div class="dialog-actions">407 <div>Cancel</div>408 <div>Rename</div>409 </div>410 </div>411 412 <!-- Keyboard mock -->413 <div class="keyboard">414 <div class="kb-toprow">415 <div class="kb-btn" style="flex:0 0 120px;">◧</div>416 <div class="kb-btn" style="flex:0 0 120px;">😊</div>417 <div class="kb-btn" style="flex:0 0 120px;">GIF</div>418 <div class="kb-btn" style="flex:0 0 120px;">⚙</div>419 <div class="kb-btn" style="flex:0 0 120px;">译</div>420 <div class="kb-btn" style="flex:0 0 120px;">🎨</div>421 <div class="kb-btn" style="flex:1;">🎤</div>422 </div>423 <div class="kb-row">424 <div class="kb-btn">Q</div><div class="kb-btn">W</div><div class="kb-btn">E</div><div class="kb-btn">R</div><div class="kb-btn">T</div>425 <div class="kb-btn">Y</div><div class="kb-btn">U</div><div class="kb-btn">I</div><div class="kb-btn">O</div><div class="kb-btn">P</div>426 </div>427 <div class="kb-row">428 <div class="kb-btn">A</div><div class="kb-btn">S</div><div class="kb-btn">D</div><div class="kb-btn">F</div><div class="kb-btn">G</div>429 <div class="kb-btn">H</div><div class="kb-btn">J</div><div class="kb-btn">K</div><div class="kb-btn">L</div><div class="kb-btn">⌫</div>430 </div>431 <div class="kb-row">432 <div class="kb-btn">Z</div><div class="kb-btn">X</div><div class="kb-btn">C</div><div class="kb-btn">V</div><div class="kb-btn">B</div>433 <div class="kb-btn">N</div><div class="kb-btn">M</div><div class="kb-btn">,</div><div class="kb-btn">.</div><div class="kb-btn enter-btn">✓</div>434 </div>435 <div class="kb-space-row">436 <div class="kb-btn">?123</div>437 <div class="kb-btn">🙂</div>438 <div class="kb-btn">Space</div>439 <div class="kb-btn">•</div>440 <div class="kb-btn enter-btn">✓</div>441 </div>442 </div>443 444 <!-- Gesture bar -->445 <div class="gesture"></div>446</div>447</body>448</html>