GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>My files - Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #fafafa;13 color: #222;14 }15 16 /* Status bar */17 .statusbar {18 height: 120px;19 background: #3a3a3a;20 color: #fff;21 padding: 0 28px;22 display: flex;23 align-items: center;24 font-size: 36px;25 letter-spacing: .5px;26 }27 .statusbar .right {28 margin-left: auto;29 display: flex;30 align-items: center;31 gap: 26px;32 opacity: 0.9;33 }34 .sb-dot { width: 10px; height: 10px; background:#fff; border-radius:50%; display:inline-block; margin:0 8px; opacity:.9; }35 36 /* App bar */37 .appbar {38 height: 140px;39 background: #ffffff;40 display: flex;41 align-items: center;42 padding: 0 28px;43 box-shadow: 0 1px 0 rgba(0,0,0,.08);44 }45 .icon-btn { width: 64px; height: 64px; display:flex; align-items:center; justify-content:center; }46 .title { font-size: 46px; font-weight: 700; margin-left: 18px; }47 .appbar .actions { margin-left: auto; display:flex; gap: 30px; }48 49 /* Content */50 .content { padding: 24px 28px 220px 28px; }51 .banner {52 background:#eaf2ff;53 border-radius: 22px;54 padding: 26px;55 display: flex;56 align-items: center;57 gap: 24px;58 box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);59 }60 .badge {61 width: 90px; height: 90px; border-radius: 18px; background:#d9f2d3; color:#157a2c; font-weight:700;62 display:flex; align-items:center; justify-content:center; border:1px solid #b6d7b1; font-size:40px;63 }64 .banner .text { flex:1; }65 .banner .titleb { font-size: 40px; font-weight: 800; margin-bottom: 6px; }66 .banner .subtitle { font-size: 32px; color:#3d5a7a; }67 .pill-btn {68 background:#ffffff; border:1px solid #b5cfff; padding:16px 28px; border-radius: 14px; font-weight:700; font-size: 30px;69 }70 .banner .close { margin-left: 16px; width: 56px; height: 56px; display:flex; align-items:center; justify-content:center; color:#557; opacity:.7; }71 72 .header-row {73 display:flex;74 align-items:center;75 margin: 34px 6px 16px 6px;76 color:#546e7a;77 font-size: 30px;78 font-weight:700;79 }80 .header-row .right-icons { margin-left:auto; display:flex; gap:30px; }81 82 .list {83 background: transparent;84 }85 .row {86 display:flex;87 align-items:center;88 padding: 22px 6px;89 border-bottom: 1px solid #eee;90 }91 .folder-icon, .file-icon {92 width: 84px; height: 64px; margin: 0 22px 0 8px; position: relative;93 }94 .folder-icon::before {95 content:"";96 position:absolute; left:0; top:16px; width:84px; height:48px; background:#f2bf2a; border:1px solid #d7a61a; border-radius:8px;97 }98 .folder-icon::after {99 content:"";100 position:absolute; left:10px; top:0; width:40px; height:22px; background:#f2bf2a; border:1px solid #d7a61a; border-bottom:none; border-radius:6px 6px 0 0;101 }102 .file-icon::before {103 content:"";104 position:absolute; left:0; top:0; width:64px; height:78px; border:1px solid #98a0a6; background:#e7ebee; border-radius:6px;105 }106 .file-icon::after {107 content:""; position:absolute; left:36px; top:-2px; width:20px; height:20px; border-top:1px solid #98a0a6; border-right:1px solid #98a0a6; background:#e7ebee;108 transform:rotate(45deg);109 }110 .row .meta { flex:1; }111 .row .name { font-size: 40px; font-weight: 800; }112 .row .sub { font-size: 28px; color:#6f7b84; margin-top: 6px; }113 114 .info-btn, .kebab {115 width: 60px; height: 60px; display:flex; align-items:center; justify-content:center; color:#6f7b84;116 margin-right: 10px;117 }118 .kebab .dot { width: 8px; height: 8px; background:#6f7b84; border-radius:50%; display:block; margin:5px 0; }119 120 /* Bottom sheet */121 .sheet {122 position: absolute;123 left:0; right:0; bottom:0;124 height: 980px;125 background:#fff;126 border-top-left-radius: 26px;127 border-top-right-radius: 26px;128 box-shadow: 0 -6px 20px rgba(0,0,0,.15);129 }130 .sheet .handle {131 width: 180px; height: 10px; background:#e0e0e0; border-radius:6px; margin: 16px auto 18px;132 }133 .sheet .title { font-size: 38px; font-weight: 800; padding: 0 30px 22px 30px; }134 .divider { height:1px; background:#eee; }135 .sheet .item {136 display:flex; align-items:center; padding: 28px 30px;137 border-bottom:1px solid #f0f0f0;138 font-size: 36px;139 }140 .sheet .item .leading {141 width: 72px; height: 72px; border-radius: 12px; background:#f1f3f5; border:1px solid #d8dde3; display:flex; align-items:center; justify-content:center; margin-right: 26px;142 }143 .toggle {144 margin-left:auto; width: 128px; height: 58px; background:#e8e8e8; border-radius: 32px; position: relative;145 }146 .toggle::after {147 content:""; width: 56px; height: 56px; background:#fff; border:1px solid #cfcfcf; border-radius:50%; position:absolute; left:4px; top:1px;148 box-shadow: 0 1px 2px rgba(0,0,0,.1);149 }150 151 /* Simple SVG icons */152 svg { display:block }153</style>154</head>155<body>156<div id="render-target">157 158 <!-- Status bar -->159 <div class="statusbar">160 8:48161 <div class="right">162 <span style="font-size:28px; background:#fff; color:#3a3a3a; padding:4px 10px; border-radius:6px;">◻</span>163 <span style="font-size:28px;">oyo</span>164 <span style="font-size:28px;">📞</span>165 <span style="font-size:28px;">99</span>166 <span class="sb-dot"></span>167 <span style="font-size:30px;">🔔</span>168 <span style="font-size:30px;">⚡</span>169 </div>170 </div>171 172 <!-- App bar -->173 <div class="appbar">174 <div class="icon-btn">175 <!-- Hamburger -->176 <svg width="44" height="44" viewBox="0 0 24 24">177 <rect x="2" y="5" width="20" height="2" fill="#333"/>178 <rect x="2" y="11" width="20" height="2" fill="#333"/>179 <rect x="2" y="17" width="20" height="2" fill="#333"/>180 </svg>181 </div>182 <div class="title">My files</div>183 <div class="actions">184 <!-- Badge/Trophy icon -->185 <svg width="48" height="48" viewBox="0 0 24 24">186 <path d="M5 4h14v3a5 5 0 0 1-5 5H10A5 5 0 0 1 5 7V4z" fill="#2e5aac"/>187 <path d="M12 12v4" stroke="#2e5aac" stroke-width="2"/>188 <rect x="9" y="16" width="6" height="3" fill="#2e5aac"/>189 </svg>190 <!-- Search -->191 <svg width="48" height="48" viewBox="0 0 24 24">192 <circle cx="11" cy="11" r="7" stroke="#222" stroke-width="2" fill="none"/>193 <line x1="16.5" y1="16.5" x2="21" y2="21" stroke="#222" stroke-width="2"/>194 </svg>195 </div>196 </div>197 198 <div class="content">199 <!-- Promo banner -->200 <div class="banner">201 <div class="badge">20 GB</div>202 <div class="text">203 <div class="titleb">More is better!</div>204 <div class="subtitle">You've got 20 GB free storage. Spread the word!</div>205 <div style="margin-top:20px;">206 <span class="pill-btn">Invite friends</span>207 </div>208 </div>209 <div class="close">✕</div>210 </div>211 212 <div class="header-row">213 <div>Name ↑</div>214 <div class="right-icons">215 <!-- Grid icon -->216 <svg width="48" height="48" viewBox="0 0 24 24">217 <rect x="3" y="3" width="7" height="7" fill="#444"/>218 <rect x="14" y="3" width="7" height="7" fill="#444"/>219 <rect x="3" y="14" width="7" height="7" fill="#444"/>220 <rect x="14" y="14" width="7" height="7" fill="#444"/>221 </svg>222 </div>223 </div>224 225 <div class="list">226 <!-- Backups row -->227 <div class="row">228 <div class="folder-icon"></div>229 <div class="meta">230 <div class="name">Backups</div>231 <div class="sub">Back up photos & videos to MobiDrive</div>232 </div>233 <div class="info-btn">234 <!-- Info circle -->235 <svg width="46" height="46" viewBox="0 0 24 24">236 <circle cx="12" cy="12" r="10" stroke="#6f7b84" stroke-width="2" fill="none"/>237 <rect x="11" y="10" width="2" height="7" fill="#6f7b84"/>238 <rect x="11" y="7" width="2" height="2" fill="#6f7b84"/>239 </svg>240 </div>241 </div>242 243 <!-- My items row -->244 <div class="row">245 <div class="folder-icon"></div>246 <div class="meta">247 <div class="name">My items</div>248 <div class="sub">Modified Jun 28</div>249 </div>250 <div class="kebab">251 <span class="dot"></span><span class="dot"></span><span class="dot"></span>252 </div>253 </div>254 255 <!-- File row -->256 <div class="row">257 <div class="file-icon"></div>258 <div class="meta">259 <div class="name">actuation_result.txt</div>260 <div class="sub">Modified Jun 27 · 8 B</div>261 </div>262 <div class="kebab">263 <span class="dot"></span><span class="dot"></span><span class="dot"></span>264 </div>265 </div>266 </div>267 </div>268 269 <!-- Bottom Sheet -->270 <div class="sheet">271 <div class="handle"></div>272 <div class="title">PXL_20230622_091318450.jpg</div>273 <div class="divider"></div>274 275 <div class="item">276 <div class="leading">277 <!-- Share icon -->278 <svg width="34" height="34" viewBox="0 0 24 24">279 <circle cx="6" cy="12" r="3" fill="#5b636b"/>280 <circle cx="18" cy="6" r="3" fill="#5b636b"/>281 <circle cx="18" cy="18" r="3" fill="#5b636b"/>282 <line x1="8.5" y1="10.5" x2="15.5" y2="7.5" stroke="#5b636b" stroke-width="2"/>283 <line x1="8.5" y1="13.5" x2="15.5" y2="16.5" stroke="#5b636b" stroke-width="2"/>284 </svg>285 </div>286 <div>Share</div>287 </div>288 289 <div class="item">290 <div class="leading">291 <!-- Check / Offline icon -->292 <svg width="34" height="34" viewBox="0 0 24 24">293 <circle cx="12" cy="12" r="10" stroke="#5b636b" stroke-width="2" fill="none"/>294 <path d="M7 12l3 3 7-7" stroke="#5b636b" stroke-width="2" fill="none"/>295 </svg>296 </div>297 <div>Available offline</div>298 <div class="toggle"></div>299 </div>300 301 <div class="item">302 <div class="leading">303 <!-- Convert arrows -->304 <svg width="34" height="34" viewBox="0 0 24 24">305 <path d="M4 7h10l-3-3M20 17H10l3 3" stroke="#5b636b" stroke-width="2" fill="none"/>306 </svg>307 </div>308 <div>Convert</div>309 </div>310 311 <div class="item">312 <div class="leading">313 <!-- Move icon -->314 <svg width="34" height="34" viewBox="0 0 24 24">315 <path d="M12 3v18M3 12h18" stroke="#5b636b" stroke-width="2"/>316 </svg>317 </div>318 <div>Move</div>319 </div>320 321 <div class="item">322 <div class="leading">323 <!-- Copy icon -->324 <svg width="34" height="34" viewBox="0 0 24 24">325 <rect x="8" y="8" width="10" height="10" stroke="#5b636b" stroke-width="2" fill="none"/>326 <rect x="4" y="4" width="10" height="10" stroke="#5b636b" stroke-width="2" fill="none"/>327 </svg>328 </div>329 <div>Copy</div>330 </div>331 332 <div class="item" style="border-bottom:none;">333 <div class="leading">334 <!-- Rename icon (pencil) -->335 <svg width="34" height="34" viewBox="0 0 24 24">336 <path d="M3 17l4 4 14-14-4-4L3 17z" stroke="#5b636b" stroke-width="2" fill="none"/>337 </svg>338 </div>339 <div>Rename</div>340 </div>341 </div>342 343</div>344</body>345</html>