GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1440, initial-scale=1.0">5<title>Mobile UI - New Folder (Drive)</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width: 1440px;11 height: 3120px;12 overflow: hidden;13 background: #0d0f0d;14 color: #e9eee9;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1440px;23 height: 120px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 padding: 0 40px;28 box-sizing: border-box;29 color: #f7f7f7;30 }31 .status-left { font-size: 44px; letter-spacing: 1px; }32 .status-right { display: flex; gap: 26px; align-items: center; }33 .dot { width: 10px; height: 10px; background: #cfcfcf; border-radius: 50%; display: inline-block; }34 35 /* Top search area */36 .top-bar {37 position: absolute;38 top: 140px;39 left: 40px;40 right: 40px;41 height: 140px;42 display: flex;43 align-items: center;44 gap: 28px;45 }46 .hamburger {47 width: 84px; height: 84px; border-radius: 18px;48 display: flex; align-items: center; justify-content: center;49 background: rgba(255,255,255,0.05);50 }51 .search-field {52 flex: 1;53 height: 120px;54 border-radius: 64px;55 background: #161a16;56 border: 2px solid #222922;57 display: flex;58 align-items: center;59 padding: 0 40px;60 color: #9aa39a;61 font-size: 46px;62 }63 .avatar {64 width: 110px; height: 110px; border-radius: 56px;65 background: #0b3429; color: #cfe8db; display: flex; align-items: center; justify-content: center;66 font-weight: 700; font-size: 56px;67 }68 69 /* Tabs */70 .tabs {71 position: absolute;72 top: 320px;73 left: 120px;74 right: 120px;75 height: 90px;76 display: flex;77 align-items: center;78 gap: 80px;79 color: #bac1ba;80 font-size: 46px;81 }82 .tab.active { color: #b8e6b8; position: relative; }83 .tab.active::after {84 content: "";85 position: absolute;86 left: 0; right: 0; bottom: -18px;87 height: 8px; border-radius: 4px; background: #8fe28e;88 }89 90 /* Sort row */91 .sub-row {92 position: absolute;93 top: 430px;94 left: 120px;95 right: 120px;96 height: 80px;97 display: flex;98 align-items: center;99 justify-content: space-between;100 color: #aab2aa;101 font-size: 42px;102 }103 104 /* Content grid (blurred/placeholder) */105 .content {106 position: absolute;107 top: 520px;108 left: 80px;109 right: 80px;110 bottom: 1480px; /* space for bottom nav + keyboard */111 display: grid;112 grid-template-columns: repeat(2, 1fr);113 grid-gap: 36px;114 opacity: 0.55;115 }116 .card {117 background: #161a16;118 border: 1px solid #232823;119 border-radius: 28px;120 padding: 28px;121 }122 .thumb {123 width: 100%;124 height: 280px;125 background: #E0E0E0;126 border: 1px solid #BDBDBD;127 border-radius: 18px;128 color: #757575;129 display: flex; align-items: center; justify-content: center;130 font-size: 38px;131 }132 .card .title {133 margin-top: 20px; color: #dfe4df; font-size: 44px;134 }135 136 /* Floating action button */137 .fab {138 position: absolute;139 right: 60px;140 bottom: 1380px;141 width: 150px; height: 150px;142 border-radius: 28px;143 background: #263b28;144 display: flex; align-items: center; justify-content: center;145 box-shadow: 0 10px 40px rgba(0,0,0,0.6);146 }147 .fab .circle {148 width: 150px; height: 150px; border-radius: 36px;149 background: #2f4d2f;150 display: flex; align-items: center; justify-content: center;151 }152 .fab svg { width: 72px; height: 72px; fill: #d7ffd7; }153 154 /* Bottom navigation (above keyboard) */155 .bottom-nav {156 position: absolute;157 left: 0; right: 0; bottom: 1200px;158 height: 180px;159 display: flex; justify-content: space-around; align-items: center;160 background: rgba(0,0,0,0.35);161 border-top: 1px solid #1c211c;162 }163 .nav-item {164 display: flex; flex-direction: column; align-items: center; gap: 10px;165 color: #c6cdc6; font-size: 38px;166 }167 .nav-item.active { color: #b8e6b8; }168 .nav-item svg { width: 54px; height: 54px; fill: currentColor; }169 170 /* Modal overlay */171 .overlay {172 position: absolute;173 left: 0; top: 0; width: 100%; height: 100%;174 background: rgba(0,0,0,0.55);175 }176 .modal {177 position: absolute;178 left: 100px; right: 100px;179 top: 770px;180 height: 780px;181 background: #172018;182 border-radius: 56px;183 box-shadow: 0 30px 120px rgba(0,0,0,0.7);184 padding: 70px 70px 60px;185 box-sizing: border-box;186 color: #e8eee8;187 }188 .modal h2 {189 margin: 0;190 font-size: 64px;191 font-weight: 700;192 margin-bottom: 64px;193 }194 .input {195 height: 150px;196 border-radius: 22px;197 background: #0f140f;198 border: 4px solid #9ed39e;199 padding: 0 34px;200 display: flex; align-items: center;201 font-size: 58px; color: #eaf6ea;202 }203 .modal .actions {204 position: absolute; bottom: 50px; left: 70px; right: 70px;205 display: flex; justify-content: space-between; align-items: center;206 font-size: 56px;207 }208 .btn {209 color: #bfe8b8;210 padding: 16px 22px;211 }212 213 /* Keyboard */214 .keyboard {215 position: absolute;216 left: 0; right: 0; bottom: 0;217 height: 1200px;218 background: #101410;219 border-top: 1px solid #1b221b;220 padding: 40px 24px 34px;221 box-sizing: border-box;222 }223 .keys-row {224 display: grid;225 grid-auto-flow: column;226 grid-gap: 18px;227 margin-bottom: 26px;228 }229 .key {230 height: 150px;231 background: #191e19;232 border: 1px solid #222822;233 border-radius: 26px;234 display: flex; align-items: center; justify-content: center;235 color: #e3ebe3;236 font-size: 54px;237 }238 .key.small { width: 100px; }239 .key.wide { grid-column: span 2; }240 .space-row { grid-template-columns: 180px 1fr 180px; }241 .space { height: 150px; background: #191e19; border: 1px solid #222822; border-radius: 26px; }242</style>243</head>244<body>245<div id="render-target">246 247 <!-- Status bar -->248 <div class="status-bar">249 <div class="status-left">5:44</div>250 <div class="status-right">251 <span style="font-size:42px;">96°</span>252 <span class="dot"></span>253 <span style="font-size:44px;">S</span>254 <span style="font-size:44px;">U</span>255 <span class="dot"></span>256 <!-- Simple battery/wifi placeholders -->257 <svg viewBox="0 0 24 24" width="44" height="44" fill="#e8e8e8"><path d="M2 8l10 10L22 8H2z"/></svg>258 </div>259 </div>260 261 <!-- Top search -->262 <div class="top-bar">263 <div class="hamburger">264 <svg viewBox="0 0 24 24" width="64" height="64" fill="#dfe7df">265 <path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/>266 </svg>267 </div>268 <div class="search-field">269 <svg viewBox="0 0 24 24" width="56" height="56" fill="#8a928a" style="margin-right:18px;">270 <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 21.5 21.5 20l-6-6zM4 9.5C4 6.46 6.46 4 9.5 4S15 6.46 15 9.5 12.54 15 9.5 15 4 12.54 4 9.5z"/>271 </svg>272 Search in Drive273 </div>274 <div class="avatar">C</div>275 </div>276 277 <!-- Tabs -->278 <div class="tabs">279 <div class="tab active">My Drive</div>280 <div class="tab">Computers</div>281 </div>282 283 <!-- Sort row -->284 <div class="sub-row">285 <div>Name ↑</div>286 <svg viewBox="0 0 24 24" width="64" height="64" fill="#aab2aa">287 <path d="M3 6h18v2H3zm0 5h12v2H3zm0 5h8v2H3z"/>288 </svg>289 </div>290 291 <!-- Content grid -->292 <div class="content">293 <div class="card">294 <div class="thumb">[IMG: File Preview]</div>295 <div class="title">Report.pdf</div>296 </div>297 <div class="card">298 <div class="thumb">[IMG: File Preview]</div>299 <div class="title">Presentation.pptx</div>300 </div>301 <div class="card">302 <div class="thumb">[IMG: Folder]</div>303 <div class="title">Team Folder</div>304 </div>305 <div class="card">306 <div class="thumb">[IMG: Image Asset]</div>307 <div class="title">Screenshot.png</div>308 </div>309 </div>310 311 <!-- Floating action button -->312 <div class="fab">313 <div class="circle">314 <svg viewBox="0 0 24 24"><path d="M11 5h2v14h-2zM5 11h14v2H5z"/></svg>315 </div>316 </div>317 318 <!-- Bottom navigation -->319 <div class="bottom-nav">320 <div class="nav-item">321 <svg viewBox="0 0 24 24"><path d="M12 3l9 8h-3v8h-12v-8H3z"/></svg>322 <div>Home</div>323 </div>324 <div class="nav-item">325 <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 13.97 22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24 7.46 13.97 5.82 21z"/></svg>326 <div>Starred</div>327 </div>328 <div class="nav-item">329 <svg viewBox="0 0 24 24"><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.5V20h14v-3.5C15 14.17 10.33 13 8 13zm8 0c-.29 0-.62.02-.97.05C16.86 13.86 18 15.02 18 16.5V20h6v-3.5c0-2.33-4.67-3.5-8-3.5z"/></svg>330 <div>Shared</div>331 </div>332 <div class="nav-item active">333 <svg viewBox="0 0 24 24"><path d="M10 4H4v16h16V8h-10V4zM12 6v2H6V6h6z"/></svg>334 <div>Files</div>335 </div>336 </div>337 338 <!-- Modal overlay with new folder -->339 <div class="overlay">340 <div class="modal">341 <h2>New folder</h2>342 <div class="input">Project Folder</div>343 <div class="actions">344 <div class="btn">Cancel</div>345 <div class="btn">Create</div>346 </div>347 </div>348 </div>349 350 <!-- Keyboard -->351 <div class="keyboard">352 <!-- Suggestions row mock -->353 <div class="keys-row" style="grid-template-columns: repeat(6, 1fr); margin-bottom: 20px;">354 <div class="key">Folder</div>355 <div class="key">Folders</div>356 <div class="key">📁</div>357 <div class="key">📂</div>358 <div class="key">🎤</div>359 <div class="key">🗣️</div>360 </div>361 362 <!-- Row 1 -->363 <div class="keys-row" style="grid-template-columns: repeat(10, 1fr);">364 <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>365 <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>366 </div>367 <!-- Row 2 -->368 <div class="keys-row" style="grid-template-columns: repeat(9, 1fr); padding: 0 70px;">369 <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>370 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>371 </div>372 <!-- Row 3 -->373 <div class="keys-row" style="grid-template-columns: 180px repeat(7, 1fr) 180px;">374 <div class="key">⇧</div>375 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>376 <div class="key">b</div><div class="key">n</div><div class="key">m</div>377 <div class="key">⌫</div>378 </div>379 <!-- Row 4 -->380 <div class="keys-row space-row">381 <div class="key">123</div>382 <div class="space"></div>383 <div class="key">⏎</div>384 </div>385 </div>386 387</div>388</body>389</html>