GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>All recordings - Share Sheet</title>5<style>6 body { margin: 0; padding: 0; background: transparent; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #121212;13 font-family: Arial, Helvetica, sans-serif;14 color: #EAEAEA;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 80px;24 padding: 0 30px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #EAEAEA;29 font-size: 34px;30 letter-spacing: 0.5px;31 }32 .status-right {33 display: flex;34 align-items: center;35 gap: 24px;36 }37 .status-icon {38 width: 34px;39 height: 34px;40 }41 /* Header */42 .header {43 position: absolute;44 top: 80px;45 left: 0;46 width: 1080px;47 height: 120px;48 display: flex;49 align-items: center;50 padding: 0 30px;51 box-sizing: border-box;52 gap: 30px;53 }54 .header-title {55 font-size: 56px;56 font-weight: 600;57 flex: 1;58 }59 .header-actions {60 display: flex;61 align-items: center;62 gap: 36px;63 }64 .icon-btn {65 width: 56px;66 height: 56px;67 }68 /* Dates */69 .date-label {70 position: relative;71 margin: 0 30px;72 color: #A5A5A5;73 font-size: 34px;74 padding-top: 20px;75 }76 77 /* Recording item */78 .item {79 position: relative;80 margin: 24px 30px;81 padding: 32px 30px 32px 120px;82 border-radius: 20px;83 background: #1A1A1A;84 }85 .pill {86 position: absolute;87 left: 30px;88 top: 24px;89 width: 60px;90 height: 180px;91 background: #B23A33;92 border-radius: 26px;93 display: flex;94 align-items: center;95 justify-content: center;96 color: #F7E1E1;97 font-size: 30px;98 font-weight: 700;99 writing-mode: vertical-rl;100 text-orientation: upright;101 letter-spacing: 2px;102 }103 .item-title {104 font-size: 44px;105 margin-bottom: 18px;106 }107 .item-meta {108 display: flex;109 gap: 24px;110 color: #BDBDBD;111 font-size: 32px;112 }113 .item-right {114 position: absolute;115 right: 30px;116 top: 36px;117 display: flex;118 align-items: center;119 gap: 24px;120 color: #BDBDBD;121 font-size: 30px;122 }123 .badge {124 width: 68px;125 height: 68px;126 border-radius: 34px;127 background: #2A2A2A;128 display: flex;129 align-items: center;130 justify-content: center;131 font-weight: 700;132 }133 134 /* Bottom sheet */135 .sheet {136 position: absolute;137 left: 0;138 bottom: 0;139 width: 1080px;140 height: 950px;141 background: #161616;142 border-top-left-radius: 38px;143 border-top-right-radius: 38px;144 box-shadow: 0 -6px 18px rgba(0,0,0,0.5);145 padding: 30px 40px;146 box-sizing: border-box;147 }148 .sheet-handle {149 width: 120px;150 height: 12px;151 background: #2A2A2A;152 border-radius: 8px;153 margin: 0 auto 30px;154 }155 .sheet-row {156 display: flex;157 align-items: center;158 gap: 24px;159 margin-bottom: 30px;160 }161 .file-icon {162 width: 70px;163 height: 70px;164 border-radius: 8px;165 background: #2A2A2A;166 display: flex;167 align-items: center;168 justify-content: center;169 color: #CACACA;170 font-size: 28px;171 }172 .filename {173 font-size: 38px;174 }175 .nearby-btn {176 margin-top: 12px;177 width: 260px;178 height: 90px;179 border-radius: 18px;180 border: 2px solid #4159F7;181 color: #DDE1FF;182 display: flex;183 align-items: center;184 justify-content: center;185 gap: 18px;186 font-size: 34px;187 }188 .nearby-wave {189 width: 36px; height: 36px;190 }191 .sheet-sub {192 color: #A6A6A6;193 font-size: 30px;194 margin: 40px 0 20px;195 text-align: center;196 }197 198 /* Share apps */199 .apps {200 display: flex;201 justify-content: space-between;202 padding: 10px 40px;203 }204 .app {205 width: 180px;206 display: flex;207 flex-direction: column;208 align-items: center;209 gap: 16px;210 }211 .app-icon {212 width: 150px;213 height: 150px;214 border-radius: 80px;215 background: #E0E0E0;216 border: 1px solid #BDBDBD;217 display: flex;218 align-items: center;219 justify-content: center;220 }221 .label {222 color: #EAEAEA;223 font-size: 32px;224 }225 226 /* Gesture bar */227 .gesture {228 position: absolute;229 bottom: 24px;230 left: 50%;231 transform: translateX(-50%);232 width: 520px;233 height: 18px;234 background: #EDEDED;235 border-radius: 12px;236 opacity: 0.85;237 }238 239 /* Simple SVG icon styles */240 svg { fill: #EAEAEA; }241 .muted svg { fill: #BDBDBD; }242</style>243</head>244<body>245<div id="render-target">246 247 <!-- Status Bar -->248 <div class="status-bar">249 <div>7:53</div>250 <div class="status-right">251 <!-- simple cellular icon -->252 <svg class="status-icon" viewBox="0 0 24 24">253 <rect x="2" y="14" width="3" height="8" />254 <rect x="7" y="10" width="3" height="12" />255 <rect x="12" y="6" width="3" height="16" />256 <rect x="17" y="2" width="3" height="20" />257 </svg>258 <!-- wifi -->259 <svg class="status-icon" viewBox="0 0 24 24">260 <path d="M12 18l2 2-2 2-2-2 2-2zm-8-8a14 14 0 0 1 16 0l-2 2a10 10 0 0 0-12 0l-2-2zm3 3a9 9 0 0 1 10 0l-2 2a5 5 0 0 0-6 0l-2-2z"/>261 </svg>262 <!-- battery -->263 <svg class="status-icon" viewBox="0 0 24 24">264 <rect x="2" y="6" width="18" height="12" rx="2"></rect>265 <rect x="4" y="8" width="12" height="8" fill="#8EE06B"></rect>266 <rect x="20" y="10" width="2" height="4"></rect>267 </svg>268 </div>269 </div>270 271 <!-- Header -->272 <div class="header">273 <!-- back arrow -->274 <svg class="icon-btn" viewBox="0 0 24 24">275 <path d="M15 18l-6-6 6-6"></path>276 </svg>277 <div class="header-title">All recordings</div>278 <div class="header-actions">279 <!-- star/bookmark -->280 <svg class="icon-btn" viewBox="0 0 24 24">281 <path d="M12 17.3l-5.5 3 1-6.1L3 9.8l6.2-.9L12 3l2.8 5.9 6.2.9-4.5 4.4 1 6.1z"></path>282 </svg>283 <!-- search -->284 <svg class="icon-btn" viewBox="0 0 24 24">285 <circle cx="10" cy="10" r="7"></circle>286 <path d="M15 15l6 6"></path>287 </svg>288 <!-- save icon -->289 <svg class="icon-btn" viewBox="0 0 24 24">290 <path d="M5 3h12l3 3v14H5z"></path>291 <rect x="7" y="7" width="10" height="6" fill="#121212"></rect>292 </svg>293 <!-- more vertical -->294 <svg class="icon-btn" viewBox="0 0 24 24">295 <circle cx="12" cy="5" r="2"></circle>296 <circle cx="12" cy="12" r="2"></circle>297 <circle cx="12" cy="19" r="2"></circle>298 </svg>299 </div>300 </div>301 302 <!-- Content list -->303 <div style="position:absolute; top:200px; left:0; right:0;">304 <div class="date-label">Dec 15, 2023</div>305 306 <!-- Item 1 -->307 <div class="item">308 <div class="pill">MP3</div>309 <div class="item-title">the way things go</div>310 <div class="item-meta">311 <div>03:23</div>312 <div>128 kb/s, 3.11 MB</div>313 </div>314 <div class="item-right">315 <div>12:43 PM</div>316 <svg class="icon-btn muted" viewBox="0 0 24 24">317 <circle cx="12" cy="5" r="2"></circle>318 <circle cx="12" cy="12" r="2"></circle>319 <circle cx="12" cy="19" r="2"></circle>320 </svg>321 </div>322 </div>323 324 <div class="date-label">Dec 14, 2023</div>325 326 <!-- Item 2 -->327 <div class="item" style="padding-left:120px;">328 <div class="pill">MP3</div>329 <div class="item-title">2023_12_14_12_55_10</div>330 <div class="item-meta">331 <div>00:04</div>332 <div>128 kb/s, 78.93 KB</div>333 </div>334 <div class="item-right">335 <div>12:55 PM</div>336 <svg class="icon-btn muted" viewBox="0 0 24 24">337 <circle cx="12" cy="5" r="2"></circle>338 <circle cx="12" cy="12" r="2"></circle>339 <circle cx="12" cy="19" r="2"></circle>340 </svg>341 </div>342 </div>343 </div>344 345 <!-- Right floating badges near list (approximation) -->346 <div style="position:absolute; top:292px; right:30px;">347 <div class="badge">1</div>348 </div>349 <div style="position:absolute; top:780px; right:30px;">350 <div class="badge">1</div>351 </div>352 353 <!-- Share Sheet -->354 <div class="sheet">355 <div class="sheet-handle"></div>356 <div class="sheet-row">357 <div class="file-icon">DOC</div>358 <div class="filename">the way things go.mp3</div>359 </div>360 361 <div class="nearby-btn">362 <svg class="nearby-wave" viewBox="0 0 24 24">363 <path d="M3 12c3-3 6-3 9 0s6 3 9 0" stroke="#4159F7" stroke-width="2" fill="none"></path>364 </svg>365 <div>Nearby</div>366 </div>367 368 <div class="sheet-sub">No recommended people to share with</div>369 370 <div class="apps">371 <!-- Gmail -->372 <div class="app">373 <div class="app-icon" style="background:#FFFFFF;">374 <svg viewBox="0 0 24 24" width="110" height="110">375 <path d="M3 6h18v12H3z" fill="#fff"></path>376 <path d="M3 6l9 6 9-6" fill="none" stroke="#EA4335" stroke-width="3"></path>377 <path d="M3 6v12" stroke="#34A853" stroke-width="3"></path>378 <path d="M21 6v12" stroke="#4285F4" stroke-width="3"></path>379 </svg>380 </div>381 <div class="label">Gmail</div>382 </div>383 384 <!-- Messages -->385 <div class="app">386 <div class="app-icon" style="background:#3D7BFA;">387 <svg viewBox="0 0 24 24" width="110" height="110" fill="#fff">388 <path d="M4 4h16v12H7l-3 4V4z"></path>389 </svg>390 </div>391 <div class="label">Messages</div>392 </div>393 394 <!-- Drive -->395 <div class="app">396 <div class="app-icon" style="background:#FFFFFF;">397 <svg viewBox="0 0 24 24" width="110" height="110">398 <path d="M9 3l6 0 5 9-6 9-6 0-5-9z" fill="#34A853" opacity="0.8"></path>399 <path d="M9 3l-5 9 6 0 5-9z" fill="#4285F4" opacity="0.8"></path>400 <path d="M20 12l-6 9-6 0 6-9z" fill="#FBBC05" opacity="0.9"></path>401 </svg>402 </div>403 <div class="label">Drive</div>404 </div>405 406 <!-- Files by Google -->407 <div class="app">408 <div class="app-icon" style="background:#FFFFFF;">409 <svg viewBox="0 0 24 24" width="110" height="110">410 <rect x="3" y="5" width="18" height="14" rx="3" fill="#4285F4"></rect>411 <rect x="3" y="5" width="9" height="7" rx="3" fill="#FBBC05"></rect>412 <rect x="12" y="12" width="9" height="7" rx="3" fill="#34A853"></rect>413 </svg>414 </div>415 <div class="label">Files by Goo…</div>416 <div class="label" style="color:#BDBDBD; font-size:28px;">Download</div>417 </div>418 </div>419 </div>420 421 <!-- Gesture bar -->422 <div class="gesture"></div>423 424</div>425</body>426</html>