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 - Mock UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #121212;15 color: #eaeaea;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 height: 90px;24 width: 100%;25 padding: 0 28px;26 box-sizing: border-box;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #fff;31 font-size: 32px;32 }33 .status-right {34 display: flex;35 align-items: center;36 gap: 22px;37 }38 .icon { display: inline-flex; }39 40 /* Top search bar */41 .topbar {42 position: absolute;43 top: 90px;44 left: 0;45 width: 100%;46 height: 130px;47 padding: 0 28px;48 box-sizing: border-box;49 display: flex;50 align-items: center;51 gap: 24px;52 }53 .hamburger {54 width: 64px;55 height: 64px;56 border-radius: 16px;57 background: transparent;58 display: flex; align-items: center; justify-content: center;59 }60 .search-pill {61 flex: 1;62 height: 92px;63 background: #1f1f1f;64 border-radius: 46px;65 display: flex;66 align-items: center;67 padding: 0 28px;68 box-sizing: border-box;69 color: #9aa0a6;70 font-size: 36px;71 gap: 20px;72 }73 .profile {74 width: 86px; height: 86px; border-radius: 43px; background: #7c2f48; color: #fff;75 display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 40px;76 }77 78 /* Tabs */79 .tabs {80 position: absolute;81 top: 220px;82 left: 28px;83 right: 28px;84 height: 90px;85 display: flex;86 align-items: center;87 gap: 40px;88 color: #cfd8dc;89 font-size: 34px;90 }91 .tab-active {92 color: #8ab4f8;93 position: relative;94 }95 .tab-active::after {96 content: "";97 position: absolute;98 left: 0;99 bottom: -18px;100 width: 120px;101 height: 6px;102 background: #8ab4f8;103 border-radius: 3px;104 }105 106 /* Sort row */107 .sort-row {108 position: absolute;109 top: 310px;110 left: 28px;111 right: 28px;112 height: 64px;113 display: flex;114 align-items: center;115 justify-content: space-between;116 color: #9aa0a6;117 font-size: 30px;118 }119 .name-sort { display: flex; align-items: center; gap: 8px; }120 121 /* Content grid */122 .content {123 position: absolute;124 top: 380px;125 left: 28px;126 right: 28px;127 bottom: 540px; /* leave space for bottom nav + keyboard placeholder area */128 overflow: hidden;129 }130 .grid {131 display: grid;132 grid-template-columns: repeat(2, 1fr);133 gap: 28px;134 }135 .card {136 background: #1d1f21;137 border-radius: 24px;138 padding: 20px;139 box-sizing: border-box;140 }141 .thumb {142 width: 100%;143 height: 220px;144 background: #E0E0E0;145 border: 1px solid #BDBDBD;146 color: #757575;147 display: flex; align-items: center; justify-content: center;148 border-radius: 16px;149 font-size: 28px;150 }151 .card-title {152 margin-top: 16px;153 color: #e0e0e0;154 font-size: 30px;155 }156 157 /* Floating add button */158 .fab {159 position: absolute;160 right: 34px;161 top: 1100px;162 width: 120px; height: 120px; border-radius: 60px;163 background: #2b3440;164 display: flex; align-items: center; justify-content: center;165 box-shadow: 0 10px 20px rgba(0,0,0,0.35);166 }167 168 /* Bottom navigation */169 .bottom-nav {170 position: absolute;171 left: 0;172 right: 0;173 top: 1320px;174 height: 170px;175 background: #171717;176 display: flex;177 justify-content: space-around;178 align-items: center;179 border-top: 1px solid #202020;180 }181 .nav-item {182 display: flex; flex-direction: column; align-items: center; gap: 10px;183 color: #9aa0a6; font-size: 26px;184 }185 .nav-item.active { color: #8ab4f8; }186 187 /* Keyboard mock */188 .keyboard {189 position: absolute;190 left: 0;191 right: 0;192 bottom: 0;193 height: 850px;194 background: #1a1a1a;195 border-top: 1px solid #262626;196 display: flex;197 flex-direction: column;198 padding: 18px 16px 24px;199 box-sizing: border-box;200 gap: 14px;201 }202 .suggestions {203 height: 70px;204 display: flex; align-items: center; gap: 16px;205 }206 .chip {207 background: #2a2a2a; color: #e0e0e0; padding: 10px 20px; border-radius: 20px; font-size: 28px;208 }209 .keys { display: grid; gap: 14px; }210 .row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 14px; }211 .key {212 height: 106px; background: #2a2a2a; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #e0e0e0; font-size: 34px;213 }214 .row2 { grid-template-columns: repeat(9, 1fr); }215 .row3 { grid-template-columns: repeat(7, 1fr); }216 .key-wide { grid-column: span 2; }217 .space-row { display: grid; grid-template-columns: 1.1fr 0.6fr 4fr 0.8fr 1.1fr; gap: 14px; }218 .enter { background: #c7dbff; color: #1a1a1a; font-weight: bold; }219 220 /* Overlay and dialog */221 .overlay {222 position: absolute; inset: 0; background: rgba(0,0,0,0.55);223 }224 .dialog {225 position: absolute;226 left: 90px;227 right: 90px;228 top: 420px;229 background: #1f2832;230 border-radius: 28px;231 padding: 36px;232 box-sizing: border-box;233 color: #e6eefc;234 box-shadow: 0 20px 50px rgba(0,0,0,0.6);235 }236 .dialog-title {237 font-size: 42px;238 margin-bottom: 28px;239 }240 .input {241 height: 120px;242 border: 2px solid #8ab4f8;243 border-radius: 16px;244 display: flex; align-items: center;245 padding: 0 24px;246 font-size: 38px;247 color: #eaeaea;248 background: #22303b;249 }250 .actions {251 margin-top: 28px;252 display: flex; justify-content: flex-end; gap: 36px;253 font-size: 36px;254 }255 .link { color: #8ab4f8; }256 257 /* Small helpers */258 .muted { color: #9aa0a6; }259</style>260</head>261<body>262<div id="render-target">263 264 <!-- Status Bar -->265 <div class="status-bar">266 <div>8:32</div>267 <div class="status-right">268 <span class="icon">269 <svg width="34" height="28" viewBox="0 0 24 24" fill="#fff"><path d="M2 18h2a8 8 0 0 1 8-8v-2a10 10 0 0 0-10 10zm6 0h2a4 4 0 0 1 4-4v-2a6 6 0 0 0-6 6zm6 0h2a1 1 0 0 1 1-1v-2a3 3 0 0 0-3 3z"/></svg>270 </span>271 <span class="icon">272 <svg width="40" height="28" viewBox="0 0 32 20" fill="none" stroke="#fff" stroke-width="2">273 <rect x="2" y="4" width="24" height="12" rx="2" />274 <rect x="26" y="7" width="4" height="6" rx="1" fill="#fff" stroke="none"/>275 <rect x="4" y="6" width="18" height="8" fill="#fff" stroke="none"/>276 </svg>277 </span>278 </div>279 </div>280 281 <!-- Top Search Bar -->282 <div class="topbar">283 <div class="hamburger">284 <svg width="40" height="40" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z"/></svg>285 </div>286 <div class="search-pill">287 <svg width="36" height="36" viewBox="0 0 24 24" fill="#9aa0a6"><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 20l-6-6zM9.5 14A4.5 4.5 0 1 1 14 9.5 4.505 4.505 0 0 1 9.5 14z"/></svg>288 <span>Search in Drive</span>289 </div>290 <div class="profile">C</div>291 </div>292 293 <!-- Tabs -->294 <div class="tabs">295 <div class="tab-active">My Drive</div>296 <div>Computers</div>297 <div style="margin-left:auto;" class="icon">298 <svg width="48" height="48" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"/></svg>299 </div>300 </div>301 302 <!-- Sort Row -->303 <div class="sort-row">304 <div class="name-sort">305 <span>Name</span>306 <svg width="24" height="24" viewBox="0 0 24 24" fill="#9aa0a6"><path d="M7 10l5-5 5 5H7z"/></svg>307 </div>308 </div>309 310 <!-- Content Grid -->311 <div class="content">312 <div class="grid">313 <div class="card">314 <div class="thumb">[IMG: Document Preview]</div>315 <div class="card-title">Amsterdam</div>316 </div>317 <div class="card">318 <div class="thumb">[IMG: Document Preview]</div>319 <div class="card-title">Amsterdam</div>320 </div>321 <div class="card">322 <div class="thumb">[IMG: Document Preview]</div>323 <div class="card-title">Travel Notes</div>324 </div>325 <div class="card">326 <div class="thumb">[IMG: Document Preview]</div>327 <div class="card-title">Photos</div>328 </div>329 </div>330 </div>331 332 <!-- Floating Add Button -->333 <div class="fab">334 <svg width="54" height="54" viewBox="0 0 24 24" fill="#cfe1ff"><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></svg>335 </div>336 337 <!-- Bottom Navigation -->338 <div class="bottom-nav">339 <div class="nav-item">340 <svg width="40" height="40" viewBox="0 0 24 24" fill="#9aa0a6"><path d="M12 3l9 8h-3v8h-5v-5H11v5H6v-8H3z"/></svg>341 <div>Home</div>342 </div>343 <div class="nav-item">344 <svg width="40" height="40" viewBox="0 0 24 24" fill="#9aa0a6"><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>345 <div>Starred</div>346 </div>347 <div class="nav-item">348 <svg width="40" height="40" viewBox="0 0 24 24" fill="#9aa0a6"><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 3zm-8 0c1.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.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>349 <div>Shared</div>350 </div>351 <div class="nav-item active">352 <svg width="40" height="40" viewBox="0 0 24 24" fill="#8ab4f8"><path d="M4 4h16v4H4zm0 6h10v10H4zM16 12h4v8h-4z"/></svg>353 <div>Files</div>354 </div>355 </div>356 357 <!-- Keyboard -->358 <div class="keyboard">359 <div class="suggestions">360 <div class="chip">singh</div>361 <div class="chip">Singh</div>362 <div class="chip">Singh's</div>363 <div style="margin-left:auto; display:flex; align-items:center;">364 <svg width="40" height="40" viewBox="0 0 24 24" fill="#9aa0a6"><path d="M12 3C7.03 3 3 7.03 3 12h2a7 7 0 0 1 14 0h2c0-4.97-4.03-9-9-9zm1 11h-2v7h2v-7zm-4 0H7v5h2v-5zm8 0h-2v3h2v-3z"/></svg>365 </div>366 </div>367 <div class="keys">368 <div class="row">369 <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>370 <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>371 </div>372 <div class="row row2">373 <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>374 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>375 </div>376 <div class="row row3">377 <div class="key key-wide">⇧</div>378 <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>379 <div class="key">m</div>380 <div class="key key-wide">381 <svg width="40" height="40" viewBox="0 0 24 24" fill="#e0e0e0"><path d="M22 3H7v4h2V5h11v14H9v-2H7v4h15z"/><path d="M11 12l-4 4 4 4v-3h8v-2h-8z"/></svg>382 </div>383 </div>384 <div class="space-row">385 <div class="key">?123</div>386 <div class="key">,</div>387 <div class="key">space</div>388 <div class="key">.</div>389 <div class="key enter">✓</div>390 </div>391 </div>392 </div>393 394 <!-- Rename Dialog Overlay -->395 <div class="overlay"></div>396 <div class="dialog">397 <div class="dialog-title">Rename folder</div>398 <div class="input">Jitendra singh</div>399 <div class="actions">400 <div class="link">Cancel</div>401 <div class="link">Rename</div>402 </div>403 </div>404 405</div>406</body>407</html>