GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Local Files - Share Sheet Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #1a1a1a;14 font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;15 color: #EDEDED;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0; left: 0;22 width: 100%;23 height: 120px;24 background: #121212;25 color: #ffffff;26 }27 .status-content {28 position: absolute;29 top: 34px; left: 36px; right: 36px;30 display: flex; justify-content: space-between; align-items: center;31 font-weight: 600;32 font-size: 40px;33 letter-spacing: 1px;34 }35 .status-right { display: flex; gap: 28px; align-items: center; }36 .status-icon svg { width: 46px; height: 46px; fill: #ffffff; opacity: 0.95; }37 38 /* App bar */39 .app-bar {40 position: absolute;41 top: 120px; left: 0;42 width: 100%;43 height: 120px;44 background: #202020;45 display: flex; align-items: center;46 padding: 0 28px;47 box-sizing: border-box;48 }49 .app-left { display: flex; align-items: center; gap: 24px; }50 .app-title {51 font-size: 50px; font-weight: 600; color: #EDEDED;52 display: flex; align-items: center; gap: 12px;53 }54 .app-actions {55 margin-left: auto; display: flex; align-items: center; gap: 40px;56 }57 .icon-btn svg { width: 56px; height: 56px; fill: #EDEDED; opacity: 0.9; }58 59 /* Breadcrumbs */60 .breadcrumbs {61 position: absolute;62 top: 240px; left: 0;63 width: 100%; height: 80px;64 background: #242424;65 display: flex; align-items: center;66 padding: 0 40px; box-sizing: border-box;67 color: #BDBDBD; font-size: 34px;68 }69 .crumbs { display: flex; align-items: center; gap: 22px; }70 .crumb { padding: 10px 20px; background: rgba(255,255,255,0.04); border-radius: 28px; color: #CFCFCF; }71 .sep { color: #888; opacity: 0.75; }72 73 /* File list */74 .file-list {75 position: absolute;76 top: 320px; left: 0; right: 0;77 padding: 24px 36px;78 box-sizing: border-box;79 }80 .file-item {81 display: flex; align-items: center;82 padding: 26px 18px; border-radius: 18px;83 margin-bottom: 24px;84 background: rgba(255,255,255,0.04);85 }86 .thumb {87 width: 120px; height: 120px; border-radius: 60px;88 background: #2b79c2; color: #ffffff; font-weight: 700;89 display: flex; align-items: center; justify-content: center;90 font-size: 32px;91 flex-shrink: 0;92 }93 .thumb.rect {94 border-radius: 8px; width: 140px; height: 100px; background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;95 font-size: 28px;96 }97 .thumb.rect span { padding: 8px; text-align: center; }98 .file-info { margin-left: 24px; flex: 1; }99 .file-title { font-size: 46px; color: #D9D9D9; margin-bottom: 8px; }100 .file-meta { font-size: 30px; color: #9E9E9E; }101 .item-actions { margin-left: auto; padding: 0 12px; }102 .item-actions svg { width: 48px; height: 48px; fill: #BDBDBD; }103 104 /* Share bottom sheet */105 .bottom-sheet {106 position: absolute;107 left: 0; right: 0; bottom: 0;108 height: 1080px;109 background: #2b221a;110 border-top-left-radius: 46px;111 border-top-right-radius: 46px;112 box-shadow: 0 -10px 30px rgba(0,0,0,0.4);113 color: #F0E6DC;114 }115 .drag-handle {116 width: 230px; height: 14px;117 background: #5f5047; border-radius: 7px;118 margin: 18px auto 10px;119 }120 .sheet-content { padding: 24px 36px; box-sizing: border-box; }121 .sheet-title { font-size: 48px; font-weight: 600; margin: 26px 0 26px 12px; }122 .file-chip {123 margin: 8px 12px 22px 12px;124 background: #3a2e26;125 border-radius: 36px;126 padding: 28px;127 display: flex; align-items: center; gap: 22px;128 }129 .doc-icon { width: 64px; height: 64px; }130 .chip-text { font-size: 36px; color: #F4EDE4; }131 .divider {132 height: 1px; background: #4a3d34; margin: 28px 12px 36px 12px;133 }134 .no-reco {135 text-align: center; color: #c7bbaf; font-size: 34px; margin-top: 12px; margin-bottom: 40px;136 }137 .actions {138 display: flex; justify-content: space-around; align-items: flex-start;139 padding: 0 24px;140 }141 .action {142 width: 160px; text-align: center;143 }144 .app-circle {145 width: 120px; height: 120px; border-radius: 60px;146 background: #E0E0E0; border: 1px solid #BDBDBD;147 display: flex; align-items: center; justify-content: center; color: #757575;148 margin: 0 auto 16px;149 font-size: 26px;150 }151 .action label {152 display: block; font-size: 28px; color: #EDE1D7;153 line-height: 1.2;154 }155 156 /* Gesture bar */157 .gesture {158 position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);159 width: 260px; height: 16px; border-radius: 8px; background: #d9d9d9; opacity: 0.9;160 }161</style>162</head>163<body>164<div id="render-target">165 166 <!-- Status bar -->167 <div class="status-bar">168 <div class="status-content">169 <div>11:11</div>170 <div class="status-right">171 <div class="status-icon">172 <!-- WiFi icon -->173 <svg viewBox="0 0 24 24"><path d="M12 18.5c.8 0 1.5.7 1.5 1.5S12.8 21.5 12 21.5 10.5 20.8 10.5 20s.7-1.5 1.5-1.5zm-6.7-6.3l1.4 1.4c2.9-2.9 7.6-2.9 10.5 0l1.4-1.4c-3.7-3.7-9.6-3.7-13.3 0zm3.5 3.5l1.4 1.4c1.6-1.6 4.2-1.6 5.8 0l1.4-1.4c-2.4-2.4-6.2-2.4-8.6 0z"/></svg>174 </div>175 <div class="status-icon">176 <!-- Battery icon -->177 <svg viewBox="0 0 24 24"><path d="M20 8h1v8h-1v2H4V6h16v2zm-2 10V8H6v10h12z"/></svg>178 </div>179 </div>180 </div>181 </div>182 183 <!-- App bar -->184 <div class="app-bar">185 <div class="app-left">186 <!-- Hamburger -->187 <div class="icon-btn">188 <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>189 </div>190 <div class="app-title">191 <span>Local Files</span>192 <!-- Down chevron -->193 <svg viewBox="0 0 24 24" width="38" height="38" fill="#cccccc"><path d="M7 10l5 5 5-5z"/></svg>194 </div>195 </div>196 <div class="app-actions">197 <!-- Search -->198 <div class="icon-btn">199 <svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/></svg>200 </div>201 <!-- More vert -->202 <div class="icon-btn">203 <svg viewBox="0 0 24 24"><path d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4z"/></svg>204 </div>205 </div>206 </div>207 208 <!-- Breadcrumbs -->209 <div class="breadcrumbs">210 <div class="crumbs">211 <div class="crumb">/</div>212 <div class="sep">></div>213 <div class="crumb">sdcard</div>214 <div class="sep">></div>215 <div class="crumb">Books</div>216 <div class="sep">></div>217 <div class="crumb">MoonReader</div>218 </div>219 </div>220 221 <!-- File list -->222 <div class="file-list">223 <!-- Item 1 -->224 <div class="file-item">225 <div class="thumb">EPUB</div>226 <div class="file-info">227 <div class="file-title">Alice_en</div>228 <div class="file-meta">Jul 5, 2023 15:57 - 26.49 kB - EPUB - 13%</div>229 </div>230 <div class="item-actions">231 <svg viewBox="0 0 24 24"><path d="M12 5a2 2 0 110-4 2 2 0 010 4zm0 9a2 2 0 110-4 2 2 0 010 4zm0 9a2 2 0 110-4 2 2 0 010 4z"/></svg>232 </div>233 </div>234 235 <!-- Item 2 -->236 <div class="file-item">237 <div class="thumb rect"><span>[IMG: Book cover thumbnail]</span></div>238 <div class="file-info">239 <div class="file-title">Romeo and Juliet - Shakespeare William</div>240 <div class="file-meta">Jul 6, 2023 09:50 - 147 kB - EPUB - 5%</div>241 </div>242 <div class="item-actions">243 <svg viewBox="0 0 24 24"><path d="M12 5a2 2 0 110-4 2 2 0 010 4zm0 9a2 2 0 110-4 2 2 0 010 4zm0 9a2 2 0 110-4 2 2 0 010 4z"/></svg>244 </div>245 </div>246 </div>247 248 <!-- Bottom Share Sheet -->249 <div class="bottom-sheet">250 <div class="drag-handle"></div>251 <div class="sheet-content">252 <div class="sheet-title">Sharing 1 file</div>253 254 <div class="file-chip">255 <!-- Simple document icon -->256 <svg class="doc-icon" viewBox="0 0 24 24" fill="#cbb8aa">257 <path d="M6 2h9l5 5v15H6z" opacity="0.6"/>258 <path d="M15 2v6h6" fill="#cbb8aa"/>259 </svg>260 <div class="chip-text">Romeo and Juliet - Shakespeare William.epub</div>261 </div>262 263 <div class="divider"></div>264 <div class="no-reco">No recommended people to share with</div>265 266 <div class="actions">267 <div class="action">268 <div class="app-circle">[App Icon]</div>269 <label>Nearby Share</label>270 </div>271 <div class="action">272 <div class="app-circle">[App Icon]</div>273 <label>Gmail</label>274 </div>275 <div class="action">276 <div class="app-circle">[App Icon]</div>277 <label>Drive</label>278 </div>279 <div class="action">280 <div class="app-circle">[App Icon]</div>281 <label>Files by Go…<br/>Download</label>282 </div>283 <div class="action">284 <div class="app-circle">[App Icon]</div>285 <label>Kindle</label>286 </div>287 </div>288 </div>289 290 <div class="gesture"></div>291 </div>292 293</div>294</body>295</html>