GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>MobiDrive - My files (Share Sheet)</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#ffffff;11 border-radius:24px;12 box-shadow:0 12px 40px rgba(0,0,0,0.2);13 }14 15 /* Status bar */16 .status-bar {17 height:110px; background:#2f2f2f; color:#fff; font-size:40px;18 display:flex; align-items:center; padding:0 36px; box-sizing:border-box;19 }20 .status-time { font-weight:600; }21 .status-icons { margin-left:auto; display:flex; gap:28px; align-items:center; }22 .icon { width:54px; height:54px; display:inline-flex; align-items:center; justify-content:center; }23 .icon svg { width:48px; height:48px; fill:#fff; }24 25 /* App toolbar */26 .toolbar {27 height:120px; display:flex; align-items:center; padding:0 32px; box-sizing:border-box;28 border-bottom:1px solid #eee; background:#fff;29 }30 .toolbar .title { font-size:52px; font-weight:700; margin-left:24px; }31 .toolbar .right { margin-left:auto; display:flex; gap:26px; }32 .toolbar .icon svg { fill:#4a4a4a; }33 34 /* Banner */35 .promo {36 margin:24px 24px 0 24px; padding:28px 28px 28px 28px; border-radius:18px;37 background:#e9f2ff; position:relative; color:#0b3aa4;38 }39 .promo .close { position:absolute; right:22px; top:22px; width:54px; height:54px; border-radius:27px; display:flex; align-items:center; justify-content:center; }40 .promo h3 { margin:0; font-size:48px; color:#0a2c7f; }41 .promo p { margin:12px 0 20px 0; font-size:36px; color:#2a3f6e; }42 .promo .badge {43 display:flex; align-items:center; gap:16px; margin-bottom:12px;44 }45 .badge .green-badge {46 width:74px; height:74px; border-radius:14px; background:#2fb165; color:#fff;47 display:flex; align-items:center; justify-content:center; font-weight:800;48 }49 .promo .btn { display:inline-block; background:#1a73e8; color:#fff; padding:18px 26px; border-radius:14px; font-size:34px; }50 51 /* Header row */52 .list-header {53 display:flex; align-items:center; padding:24px 32px; font-size:36px; color:#4b4b4b;54 }55 .list-header .left { display:flex; align-items:center; gap:12px; }56 .list-header .right { margin-left:auto; }57 58 /* Items */59 .item {60 display:flex; align-items:flex-start; padding:26px 32px; box-sizing:border-box;61 border-bottom:1px solid #eee; position:relative; background:#fff;62 }63 .item .file-icon { width:84px; height:84px; border-radius:8px; margin-right:26px; display:flex; align-items:center; justify-content:center; }64 .item .file-icon.folder { background:#f7d56b; }65 .item .file-icon.doc { background:#e0ecff; }66 .item .content { flex:1; }67 .item .title { font-size:44px; font-weight:700; color:#222; }68 .item .sub { font-size:34px; color:#6f6f6f; margin-top:6px; }69 .item .end { position:absolute; right:24px; top:50%; transform:translateY(-50%); }70 .kebab svg, .info svg { fill:#6f6f6f; }71 72 /* Share sheet */73 .share-sheet {74 position:absolute; left:0; right:0; bottom:0; width:100%;75 background:#fff; border-top-left-radius:28px; border-top-right-radius:28px;76 box-shadow:0 -10px 30px rgba(0,0,0,0.25);77 height:1120px;78 }79 .handle { width:180px; height:14px; border-radius:7px; background:#e0e0e0; margin:20px auto 0; }80 .share-tabs { display:flex; padding:24px 40px 0 40px; gap:20px; }81 .tab {82 flex:1; border-radius:18px; background:#f7f8fb; padding:18px 20px; display:flex; align-items:center; gap:18px;83 color:#222; font-size:40px; font-weight:600; justify-content:center;84 }85 .tab.selected { background:#e8f0fe; color:#1a73e8; }86 .tab .tab-icon { width:72px; height:72px; display:flex; align-items:center; justify-content:center; }87 .tab .tab-icon svg { width:64px; height:64px; }88 89 .link-row {90 display:flex; align-items:center; gap:20px; padding:28px 40px; box-sizing:border-box;91 }92 .link-box {93 flex:1; border:1px solid #d0d0d0; border-radius:14px; height:110px; display:flex;94 align-items:center; padding:0 24px; color:#555; font-size:34px; background:#fafafa;95 }96 .copy-btn {97 height:110px; width:220px; border-radius:16px; background:#1a73e8; color:#fff; font-size:38px; font-weight:700;98 display:flex; align-items:center; justify-content:center;99 }100 101 .share-grid {102 display:grid; grid-template-columns:repeat(4, 1fr); gap:30px;103 padding:20px 40px 40px 40px; box-sizing:border-box;104 }105 .target {106 display:flex; flex-direction:column; align-items:center; gap:18px;107 }108 .target .circle {109 width:120px; height:120px; border-radius:60px; display:flex; align-items:center; justify-content:center;110 background:#e0e0e0;111 }112 .target .label { font-size:32px; color:#222; }113 .circle svg { width:72px; height:72px; fill:#3a3a3a; }114 115 /* Simple grid of third row partially visible */116 .bottom-fade { position:absolute; left:0; right:0; bottom:0; height:34px; background:linear-gradient(to bottom, rgba(255,255,255,0), #fff); }117</style>118</head>119<body>120<div id="render-target">121 122 <!-- Status bar -->123 <div class="status-bar">124 <div class="status-time">8:48</div>125 <div class="status-icons">126 <div class="icon">127 <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"></rect></svg>128 </div>129 <div class="icon">130 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle></svg>131 </div>132 <div class="icon">133 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="6"></rect></svg>134 </div>135 <div class="icon">136 <svg viewBox="0 0 24 24"><path d="M4 12h16M12 4v16" stroke="#fff" stroke-width="2" fill="none"></path></svg>137 </div>138 </div>139 </div>140 141 <!-- Toolbar -->142 <div class="toolbar">143 <div class="icon">144 <svg viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18" stroke="#4a4a4a" stroke-width="2" fill="none" stroke-linecap="round"></path></svg>145 </div>146 <div class="title">My files</div>147 <div class="right">148 <div class="icon">149 <!-- Ribbon/Badge -->150 <svg viewBox="0 0 24 24">151 <circle cx="12" cy="8" r="6" fill="#1a73e8"></circle>152 <path d="M6 14l-2 8 6-3 6 3-2-8" fill="#1a73e8"></path>153 <path d="M12 5l1.6 3.4 3.7.3-2.8 2.4.9 3.6-3.4-1.9-3.4 1.9.9-3.6-2.8-2.4 3.7-.3L12 5z" fill="#fff"></path>154 </svg>155 </div>156 <div class="icon">157 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#4a4a4a" stroke-width="2" fill="none"></circle><path d="M20 20l-4.5-4.5" stroke="#4a4a4a" stroke-width="2" stroke-linecap="round"></path></svg>158 </div>159 </div>160 </div>161 162 <!-- Promo banner -->163 <div class="promo">164 <div class="badge">165 <div class="green-badge">20 GB</div>166 <div style="font-size:40px; color:#3a3a3a;">More is better!</div>167 </div>168 <h3>You've got 20 GB free storage. Spread the word!</h3>169 <div class="btn">Invite friends</div>170 <div class="close">171 <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19" stroke="#6b6b6b" stroke-width="2" stroke-linecap="round"></path></svg>172 </div>173 </div>174 175 <!-- Header row -->176 <div class="list-header">177 <div class="left">178 <span>Name</span>179 <svg viewBox="0 0 24 24" width="36" height="36"><path d="M12 7l-5 6h10z" fill="#7c7c7c"></path></svg>180 </div>181 <div class="right icon">182 <svg viewBox="0 0 24 24"><path d="M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z"></path></svg>183 </div>184 </div>185 186 <!-- Items -->187 <div class="item">188 <div class="file-icon folder">189 <!-- Folder icon -->190 <svg viewBox="0 0 24 24">191 <path d="M3 6h7l2 2h9v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z" fill="#c19a25"></path>192 </svg>193 </div>194 <div class="content">195 <div class="title">Backups</div>196 <div class="sub">Back up photos & videos to MobiDrive</div>197 </div>198 <div class="end info icon">199 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#6f6f6f" stroke-width="2"></circle><path d="M12 16v-5M12 8h0.01" stroke="#6f6f6f" stroke-width="2" stroke-linecap="round"></path></svg>200 </div>201 </div>202 203 <div class="item">204 <div class="file-icon folder">205 <svg viewBox="0 0 24 24"><path d="M3 6h7l2 2h9v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z" fill="#c19a25"></path></svg>206 </div>207 <div class="content">208 <div class="title">My items</div>209 <div class="sub">Modified Jun 28</div>210 </div>211 <div class="end kebab icon">212 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"></circle><circle cx="12" cy="12" r="2"></circle><circle cx="12" cy="19" r="2"></circle></svg>213 </div>214 </div>215 216 <div class="item">217 <div class="file-icon doc">218 <!-- Document icon -->219 <svg viewBox="0 0 24 24">220 <path d="M6 3h9l5 5v13a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3z" fill="#7aa6ff"></path>221 <path d="M15 3v6h6" fill="#aecdff"></path>222 </svg>223 </div>224 <div class="content">225 <div class="title">actuation_result.txt</div>226 <div class="sub">Modified Jun 27 · 8 B</div>227 </div>228 <div class="end kebab icon">229 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"></circle><circle cx="12" cy="12" r="2"></circle><circle cx="12" cy="19" r="2"></circle></svg>230 </div>231 </div>232 233 <!-- Share sheet -->234 <div class="share-sheet">235 <div class="handle"></div>236 <div class="share-tabs">237 <div class="tab selected">238 <div class="tab-icon">239 <svg viewBox="0 0 24 24"><path d="M7 17a3 3 0 0 1 0-6h4M13 7a3 3 0 0 1 0 6h-2" stroke="#1a73e8" stroke-width="2" fill="none" stroke-linecap="round"></path></svg>240 </div>241 <div>Share as link</div>242 </div>243 <div class="tab">244 <div class="tab-icon">245 <svg viewBox="0 0 24 24"><path d="M5 12l6-6v4h8v4h-8v4z" fill="#7c7c7c"></path></svg>246 </div>247 <div>Send a copy</div>248 </div>249 </div>250 251 <div class="link-row">252 <div class="link-box">https://mobidrive.com/sharelink/...</div>253 <div class="copy-btn">Copy</div>254 </div>255 256 <div class="share-grid">257 <!-- Row 1 -->258 <div class="target">259 <div class="circle">260 <svg viewBox="0 0 24 24"><path d="M4 5h16v14H4zM8 9h8M8 13h5" stroke="#3a3a3a" stroke-width="2" fill="none"></path></svg>261 </div>262 <div class="label">Aqua Mail</div>263 </div>264 <div class="target">265 <div class="circle" style="background:#e6f0ff;">266 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#4285F4"></circle></svg>267 </div>268 <div class="label">Chrome</div>269 </div>270 <div class="target">271 <div class="circle" style="background:#e6ffe6;">272 <svg viewBox="0 0 24 24">273 <path d="M12 3l9 7-9 11L3 10z" fill="#34a853"></path>274 </svg>275 </div>276 <div class="label">Drive</div>277 </div>278 <div class="target">279 <div class="circle" style="background:#e6e8ff;">280 <svg viewBox="0 0 24 24"><path d="M21 8a4 4 0 0 0-7-3H7a4 4 0 0 0-4 4v8l4-3h7a4 4 0 0 0 7-3z" fill="#3f51b5"></path></svg>281 </div>282 <div class="label">Messages</div>283 </div>284 285 <!-- Row 2 -->286 <div class="target">287 <div class="circle">288 <svg viewBox="0 0 24 24"><path d="M7 7l10 10M17 7L7 17" stroke="#3a3a3a" stroke-width="2" stroke-linecap="round"></path></svg>289 </div>290 <div class="label">Bluetooth</div>291 </div>292 <div class="target">293 <div class="circle" style="background:#fff0e0;">294 <svg viewBox="0 0 24 24"><path d="M12 13l9-7v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6l9 7z" fill="#ea4335"></path></svg>295 </div>296 <div class="label">Gmail</div>297 </div>298 <div class="target">299 <div class="circle" style="background:#e0f7ff;">300 <svg viewBox="0 0 24 24"><path d="M7 12c2-4 8-4 10 0-2 4-8 4-10 0z" fill="#1a73e8"></path></svg>301 </div>302 <div class="label">Nearby Share</div>303 </div>304 <div class="target">305 <div class="circle" style="background:#fff4d6;">306 <svg viewBox="0 0 24 24"><path d="M5 5h14v14H5zM8 8h8v8H8z" fill="#fbbc05"></path></svg>307 </div>308 <div class="label">Saved</div>309 </div>310 311 <!-- Row 3 partially visible -->312 <div class="target">313 <div class="circle">314 <div style="width:100%; height:100%; background:#E0E0E0; border-radius:60px; display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px;">[IMG: Cloud]</div>315 </div>316 <div class="label">Cloud</div>317 </div>318 <div class="target">319 <div class="circle">320 <div style="width:100%; height:100%; background:#E0E0E0; border-radius:60px; display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px;">[IMG: File]</div>321 </div>322 <div class="label">Files</div>323 </div>324 <div class="target"></div>325 <div class="target"></div>326 </div>327 328 <div class="bottom-fade"></div>329 </div>330 331</div>332</body>333</html>