GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - New Folder Dialog</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 position: relative;9 overflow: hidden;10 width: 1440px;11 height: 3120px;12 background: #0d0f0d;13 color: #e6e8e6;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1440px;22 height: 120px;23 color: #e8efe5;24 display: flex;25 align-items: center;26 padding: 0 40px;27 box-sizing: border-box;28 font-size: 40px;29 letter-spacing: 1px;30 }31 .status-left { flex: 1; }32 .status-right { display: flex; gap: 24px; align-items: center; }33 .dot { width: 12px; height: 12px; background: #e8efe5; border-radius: 50%; display: inline-block; }34 35 /* Search bar area */36 .search-wrap {37 position: absolute;38 top: 140px;39 left: 60px;40 width: 1320px;41 height: 140px;42 display: flex;43 align-items: center;44 gap: 24px;45 }46 .search-box {47 flex: 1;48 height: 140px;49 background: #1a1e19;50 border-radius: 80px;51 display: flex;52 align-items: center;53 padding: 0 40px;54 box-sizing: border-box;55 color: #aeb7a7;56 font-size: 46px;57 }58 .hamburger {59 width: 72px;60 height: 72px;61 margin-right: 22px;62 }63 .avatar {64 width: 120px;65 height: 120px;66 border-radius: 60px;67 background: #1f3828;68 color: #cfe9c1;69 display: flex;70 align-items: center;71 justify-content: center;72 font-weight: bold;73 font-size: 54px;74 margin-left: 20px;75 }76 77 /* Tabs */78 .tabs {79 position: absolute;80 top: 320px;81 left: 120px;82 display: flex;83 gap: 120px;84 font-size: 50px;85 }86 .tab { color: #9aa39b; }87 .tab.active { color: #bfe7b9; border-bottom: 6px solid #bfe7b9; padding-bottom: 12px; }88 89 /* Sorting bar */90 .sort-bar {91 position: absolute;92 top: 430px;93 left: 60px;94 right: 60px;95 height: 90px;96 display: flex;97 align-items: center;98 justify-content: space-between;99 color: #c7d0c3;100 font-size: 46px;101 }102 .sort-left { display: flex; align-items: center; gap: 16px; }103 .sort-right { opacity: 0.7; }104 105 /* Modal overlay */106 .overlay {107 position: absolute;108 top: 520px;109 left: 80px;110 width: 1280px;111 height: 760px;112 background: #121612;113 border-radius: 48px;114 box-shadow: 0 24px 80px rgba(0,0,0,0.6);115 border: 1px solid rgba(180, 231, 170, 0.08);116 padding: 60px;117 box-sizing: border-box;118 }119 .overlay h2 {120 margin: 0 0 40px 0;121 font-size: 72px;122 font-weight: 700;123 color: #e5f2df;124 }125 .input-box {126 position: relative;127 width: 1140px;128 height: 160px;129 border: 4px solid #98cf86;130 border-radius: 18px;131 box-sizing: border-box;132 background: #151b14;133 padding: 32px 34px;134 color: #e4f4df;135 font-size: 64px;136 display: flex;137 align-items: center;138 }139 .selection {140 position: absolute;141 left: 34px;142 top: 30px;143 height: 100px;144 width: 530px;145 background: rgba(152, 207, 134, 0.35);146 border-radius: 10px;147 }148 .input-text { position: relative; z-index: 1; }149 150 .modal-actions {151 position: absolute;152 right: 60px;153 bottom: 60px;154 display: flex;155 gap: 80px;156 font-size: 56px;157 }158 .btn {159 color: #cfe0cc;160 }161 .btn.primary {162 color: #cdeec7;163 }164 165 /* Floating action button */166 .fab {167 position: absolute;168 right: 60px;169 top: 1320px;170 width: 180px;171 height: 180px;172 background: #203c26;173 border-radius: 40px;174 display: flex;175 align-items: center;176 justify-content: center;177 box-shadow: 0 10px 30px rgba(0,0,0,0.5);178 }179 .fab-inner {180 width: 150px;181 height: 150px;182 background: #324f34;183 border-radius: 34px;184 display: flex;185 align-items: center;186 justify-content: center;187 }188 .plus {189 width: 84px;190 height: 84px;191 }192 193 /* Bottom navigation (above keyboard) */194 .bottom-nav {195 position: absolute;196 left: 0;197 top: 1520px;198 width: 1440px;199 height: 170px;200 background: rgba(10,12,10,0.9);201 display: flex;202 align-items: center;203 justify-content: space-around;204 color: #b7c0b6;205 font-size: 40px;206 }207 .nav-item {208 display: flex;209 flex-direction: column;210 align-items: center;211 gap: 18px;212 width: 260px;213 }214 .nav-item .icon {215 width: 74px;216 height: 74px;217 opacity: 0.9;218 }219 .nav-item.active .label {220 background: #1a2a1b;221 color: #d6f0ce;222 padding: 14px 24px;223 border-radius: 26px;224 }225 226 /* Keyboard */227 .keyboard {228 position: absolute;229 left: 0;230 top: 1690px;231 width: 1440px;232 height: 1430px;233 background: #111411;234 border-top: 1px solid #1e241d;235 box-sizing: border-box;236 padding: 28px 22px 40px;237 }238 .kbd-row {239 display: grid;240 grid-template-columns: repeat(10, 1fr);241 gap: 22px;242 margin-bottom: 28px;243 }244 .key {245 height: 150px;246 background: #232823;247 border-radius: 22px;248 color: #e8eee3;249 display: flex;250 align-items: center;251 justify-content: center;252 font-size: 56px;253 box-shadow: inset 0 -3px 0 rgba(0,0,0,0.3);254 }255 .key.small { font-size: 48px; }256 .kbd-row2 { grid-template-columns: 0.6fr repeat(8, 1fr) 0.6fr; }257 .kbd-row3 { grid-template-columns: 0.8fr repeat(7, 1fr) 0.8fr; }258 .space-row {259 display: grid;260 grid-template-columns: 1.4fr 0.9fr 1fr 1fr 1fr 1fr 1.2fr 1.1fr;261 gap: 22px;262 }263 .space { height: 160px; background: #232823; border-radius: 24px; }264 .mic { background: #2a2f2a; }265</style>266</head>267<body>268<div id="render-target">269 270 <!-- Status bar -->271 <div class="status-bar">272 <div class="status-left">5:43</div>273 <div class="status-right">274 <span>96°</span>275 <span class="dot"></span>276 <span class="dot"></span>277 <span class="dot"></span>278 </div>279 </div>280 281 <!-- Search bar -->282 <div class="search-wrap">283 <div class="search-box">284 <svg class="hamburger" viewBox="0 0 24 24" fill="#cfe0cc">285 <rect x="3" y="5" width="18" height="2"></rect>286 <rect x="3" y="11" width="18" height="2"></rect>287 <rect x="3" y="17" width="18" height="2"></rect>288 </svg>289 <span>Search in Drive</span>290 </div>291 <div class="avatar">C</div>292 </div>293 294 <!-- Tabs -->295 <div class="tabs">296 <div class="tab active">My Drive</div>297 <div class="tab">Computers</div>298 </div>299 300 <!-- Sort bar -->301 <div class="sort-bar">302 <div class="sort-left">303 <span>Name</span>304 <svg width="34" height="34" viewBox="0 0 24 24" fill="#bfe7b9">305 <path d="M7 14l5-5 5 5z"></path>306 </svg>307 </div>308 <div class="sort-right">309 <svg width="44" height="44" viewBox="0 0 24 24" fill="#a6b2a5">310 <rect x="4" y="6" width="16" height="2"></rect>311 <rect x="4" y="11" width="16" height="2"></rect>312 <rect x="4" y="16" width="16" height="2"></rect>313 </svg>314 </div>315 </div>316 317 <!-- Modal: New folder -->318 <div class="overlay">319 <h2>New folder</h2>320 <div class="input-box">321 <div class="selection"></div>322 <div class="input-text">Untitled folder</div>323 </div>324 <div class="modal-actions">325 <div class="btn">Cancel</div>326 <div class="btn primary">Create</div>327 </div>328 </div>329 330 <!-- Floating action button -->331 <div class="fab">332 <div class="fab-inner">333 <svg class="plus" viewBox="0 0 24 24" fill="#dff7d8">334 <rect x="10" y="4" width="4" height="16"></rect>335 <rect x="4" y="10" width="16" height="4"></rect>336 </svg>337 </div>338 </div>339 340 <!-- Bottom nav -->341 <div class="bottom-nav">342 <div class="nav-item">343 <svg class="icon" viewBox="0 0 24 24" fill="#c7d0c3">344 <path d="M3 12l9-7 9 7v8a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"></path>345 </svg>346 <div>Home</div>347 </div>348 <div class="nav-item">349 <svg class="icon" viewBox="0 0 24 24" fill="#c7d0c3">350 <path d="M12 17.3l-6.2 3.7 1.7-7.1L2 8.9l7.2-.6L12 2l2.8 6.3 7.2.6-5.5 5 1.7 7.1z"></path>351 </svg>352 <div>Starred</div>353 </div>354 <div class="nav-item">355 <svg class="icon" viewBox="0 0 24 24" fill="#c7d0c3">356 <path d="M16 11c1.7 0 3 1.3 3 3v5h-6v-5c0-1.7 1.3-3 3-3zM8 12c1.7 0 3 1.3 3 3v4H2v-4c0-1.7 1.3-3 3-3h3z"></path>357 </svg>358 <div>Shared</div>359 </div>360 <div class="nav-item active">361 <svg class="icon" viewBox="0 0 24 24" fill="#d6f0ce">362 <path d="M4 4h16v14H4z"></path>363 <path d="M8 8h8v2H8zM8 12h8v2H8z" fill="#0d0f0d"></path>364 </svg>365 <div class="label">Files</div>366 </div>367 </div>368 369 <!-- Keyboard -->370 <div class="keyboard">371 <div class="kbd-row">372 <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>373 </div>374 <div class="kbd-row kbd-row2">375 <div class="key small">1</div><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 small">L</div>376 </div>377 <div class="kbd-row kbd-row3">378 <div class="key small">⬆</div><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><div class="key small">⌫</div>379 </div>380 <div class="space-row">381 <div class="key small">.?123</div>382 <div class="key small">,</div>383 <div class="space"></div>384 <div class="key mic">.</div>385 <div class="key mic">✓</div>386 <div class="key mic">🎤</div>387 <div class="key small">▲</div>388 <div class="key small">▼</div>389 </div>390 </div>391 392</div>393</body>394</html>