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>My Files - Create Directory</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #f2f2f2;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 110px;24 background: #e5e5e5;25 color: #2d2d2d;26 display: flex;27 align-items: center;28 padding: 0 30px;29 box-sizing: border-box;30 font-weight: 500;31 }32 .status-right {33 margin-left: auto;34 display: flex;35 align-items: center;36 gap: 18px;37 }38 .sb-icon {39 width: 28px; height: 28px; background: #cfcfcf; border-radius: 6px;40 }41 42 /* App bar */43 .app-bar {44 position: absolute;45 top: 110px;46 left: 0;47 width: 1080px;48 height: 150px;49 background: #fafafa;50 display: flex;51 align-items: center;52 padding: 0 30px;53 box-sizing: border-box;54 border-bottom: 1px solid #e1e1e1;55 }56 .hamburger {57 width: 70px;58 height: 70px;59 display: inline-flex;60 justify-content: center;61 align-items: center;62 margin-right: 20px;63 }64 .hamburger svg { width: 44px; height: 44px; }65 .title-area {66 display: flex;67 flex-direction: column;68 }69 .title-area .title {70 font-size: 48px;71 color: #333;72 line-height: 1.1;73 }74 .title-area .subtitle {75 font-size: 28px;76 color: #7c7c7c;77 margin-top: 6px;78 }79 .app-actions {80 margin-left: auto;81 display: flex;82 align-items: center;83 gap: 35px;84 }85 .app-actions svg { width: 50px; height: 50px; fill: none; stroke: #3573a5; stroke-width: 5; }86 87 /* Breadcrumb */88 .crumbs {89 position: absolute;90 top: 260px;91 left: 0;92 width: 1080px;93 height: 90px;94 background: #ffffff;95 display: flex;96 align-items: center;97 padding: 0 40px;98 box-sizing: border-box;99 color: #3e6ea8;100 font-size: 34px;101 gap: 12px;102 border-bottom: 1px solid #e6e6e6;103 }104 .crumbs .grey { color: #8e8e8e; }105 .chev { color: #8e8e8e; margin: 0 10px; }106 107 /* File list */108 .list {109 position: absolute;110 top: 350px;111 left: 0;112 width: 1080px;113 height: 1100px;114 background: #f6f6f6;115 padding: 0 30px;116 box-sizing: border-box;117 }118 .row {119 height: 150px;120 display: flex;121 align-items: center;122 border-bottom: 1px solid #e7e7e7;123 }124 .icon-circle {125 width: 100px; height: 100px;126 background: #1e88e5;127 border-radius: 50%;128 margin-right: 24px;129 display: flex; justify-content: center; align-items: center;130 }131 .icon-circle svg { width: 54px; height: 54px; fill: #fff; }132 .row .name { font-size: 40px; color: #2d2d2d; }133 .row .meta { margin-left: auto; font-size: 26px; color: #8c8c8c; margin-right: 30px; }134 135 /* Floating action button */136 .fab {137 position: absolute;138 right: 60px;139 top: 1180px;140 width: 140px; height: 140px;141 background: #d4a338;142 border-radius: 50%;143 box-shadow: 0 8px 20px rgba(0,0,0,0.2);144 display: flex; align-items: center; justify-content: center;145 }146 .fab svg { width: 60px; height: 60px; stroke: #fff; stroke-width: 10; }147 148 /* Modal overlay */149 .overlay { 150 position: absolute; left: 0; top: 0; width: 1080px; height: 2400px; 151 background: rgba(0,0,0,0.22);152 }153 .dialog {154 position: absolute;155 left: 60px;156 top: 640px;157 width: 960px;158 background: #ffffff;159 border-radius: 28px;160 box-shadow: 0 18px 50px rgba(0,0,0,0.35);161 padding: 48px;162 box-sizing: border-box;163 }164 .dialog h2 {165 margin: 0;166 font-size: 48px;167 color: #333;168 font-weight: 600;169 }170 .dialog .desc {171 margin-top: 24px;172 font-size: 32px;173 color: #757575;174 }175 .input-line {176 margin-top: 50px;177 font-size: 44px;178 color: #222;179 padding-bottom: 18px;180 border-bottom: 6px solid #f0b13a;181 }182 .dialog .actions {183 display: flex;184 justify-content: flex-end;185 gap: 50px;186 margin-top: 40px;187 font-size: 34px;188 letter-spacing: 2px;189 }190 .actions .cancel { color: #8c8c8c; }191 .actions .ok { color: #f0b13a; font-weight: 600; }192 193 /* Keyboard */194 .keyboard {195 position: absolute;196 bottom: 40px;197 left: 0;198 width: 1080px;199 height: 820px;200 background: #f1f3ea;201 border-top: 1px solid #d9d9d9;202 box-sizing: border-box;203 }204 .kb-suggest {205 height: 110px;206 display: flex;207 align-items: center;208 padding: 0 30px;209 gap: 24px;210 }211 .chip {212 padding: 16px 26px;213 background: #ffffff;214 border-radius: 30px;215 font-size: 34px;216 color: #333;217 border: 1px solid #e2e2e2;218 }219 .kb-grid {220 padding: 20px 22px;221 display: grid;222 grid-template-columns: repeat(10, 1fr);223 grid-row-gap: 22px;224 grid-column-gap: 14px;225 }226 .key {227 height: 110px;228 background: #ffffff;229 border-radius: 18px;230 display: flex; align-items: center; justify-content: center;231 font-size: 38px;232 color: #2d2d2d;233 border: 1px solid #e7e7e7;234 }235 .kb-bottom {236 display: grid;237 grid-template-columns: 1.2fr 7fr 1fr 1fr 1.2fr;238 gap: 14px;239 padding: 10px 22px 24px;240 box-sizing: border-box;241 }242 .key.wide { height: 120px; }243 .key.green { background: #dfe9d7; border-color: #c7d2bf; }244 .key.icon { font-size: 42px; }245 246 /* Gesture bar */247 .gesture {248 position: absolute;249 bottom: 12px;250 left: 50%;251 transform: translateX(-50%);252 width: 300px;253 height: 12px;254 background: #bdbdbd;255 border-radius: 8px;256 }257</style>258</head>259<body>260<div id="render-target">261 262 <!-- Status bar -->263 <div class="status-bar">264 <div class="time">11:22</div>265 <div class="status-right">266 <div class="sb-icon"></div>267 <div class="sb-icon"></div>268 <div class="sb-icon"></div>269 <div class="sb-icon"></div>270 </div>271 </div>272 273 <!-- App bar -->274 <div class="app-bar">275 <div class="hamburger">276 <svg viewBox="0 0 100 100">277 <rect x="10" y="20" width="80" height="10" fill="#4378aa"></rect>278 <rect x="10" y="45" width="80" height="10" fill="#4378aa"></rect>279 <rect x="10" y="70" width="80" height="10" fill="#4378aa"></rect>280 </svg>281 </div>282 <div class="title-area">283 <div class="title">My Files</div>284 <div class="subtitle">15 folders</div>285 </div>286 <div class="app-actions">287 <svg viewBox="0 0 100 100">288 <circle cx="42" cy="42" r="26"></circle>289 <line x1="68" y1="68" x2="92" y2="92"></line>290 </svg>291 <svg viewBox="0 0 20 100">292 <circle cx="10" cy="20" r="6" fill="#3573a5"></circle>293 <circle cx="10" cy="50" r="6" fill="#3573a5"></circle>294 <circle cx="10" cy="80" r="6" fill="#3573a5"></circle>295 </svg>296 </div>297 </div>298 299 <!-- Breadcrumb -->300 <div class="crumbs">301 <span>INTERNAL MEMORY</span>302 <span class="chev">›</span>303 <span class="grey">MUSIC</span>304 </div>305 306 <!-- File list -->307 <div class="list">308 <div class="row">309 <div class="icon-circle">310 <svg viewBox="0 0 100 100">311 <path d="M20 35h26l10 10h24v30H20z" fill="#fff"></path>312 </svg>313 </div>314 <div class="name">Alarms</div>315 </div>316 <div class="row">317 <div class="icon-circle">318 <svg viewBox="0 0 100 100">319 <path d="M20 35h26l10 10h24v30H20z" fill="#fff"></path>320 </svg>321 </div>322 <div class="name">DCIM</div>323 <div class="meta">1 item • Jun 08, 2023</div>324 </div>325 <div class="row">326 <div class="icon-circle">327 <svg viewBox="0 0 100 100">328 <path d="M20 35h26l10 10h24v30H20z" fill="#fff"></path>329 </svg>330 </div>331 <div class="name">Documents</div>332 <div class="meta">Empty</div>333 </div>334 <div class="row">335 <div class="icon-circle">336 <svg viewBox="0 0 100 100">337 <path d="M20 35h26l10 10h24v30H20z" fill="#fff"></path>338 </svg>339 </div>340 <div class="name">Download</div>341 </div>342 </div>343 344 <!-- Floating Action Button -->345 <div class="fab">346 <svg viewBox="0 0 100 100">347 <line x1="50" y1="22" x2="50" y2="78"></line>348 <line x1="22" y1="50" x2="78" y2="50"></line>349 </svg>350 </div>351 352 <!-- Overlay and Dialog -->353 <div class="overlay"></div>354 <div class="dialog">355 <h2>Create a directory</h2>356 <div class="desc">Please enter the new folder name</div>357 <div class="input-line">Dance</div>358 <div class="actions">359 <div class="cancel">CANCEL</div>360 <div class="ok">OK</div>361 </div>362 </div>363 364 <!-- Keyboard -->365 <div class="keyboard">366 <div class="kb-suggest">367 <div class="chip" style="background:#dfe9d7;border-color:#c7d2bf;">▤</div>368 <div class="chip">Dance</div>369 <div class="chip">Dancer</div>370 <div class="chip">🪩</div>371 <div class="chip">🩰🩰</div>372 </div>373 <div class="kb-grid">374 <!-- row 1 -->375 <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>376 <!-- row 2 -->377 <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><div class="key">;</div>378 <!-- row 3 -->379 <div class="key green">⇧</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 icon">⌫</div><div class="key">✔</div>380 </div>381 <div class="kb-bottom">382 <div class="key wide green">?123</div>383 <div class="key wide"></div>384 <div class="key wide">,</div>385 <div class="key wide">.</div>386 <div class="key wide green">✔</div>387 </div>388 </div>389 390 <!-- Gesture bar -->391 <div class="gesture"></div>392</div>393</body>394</html>