GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>All recordings UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #0d0a0a;14 }15 16 /* Top app bar */17 .appbar {18 position: absolute;19 top: 80px;20 left: 48px;21 right: 48px;22 height: 120px;23 display: flex;24 align-items: center;25 color: #d8d3d3;26 }27 .appbar .title {28 font-size: 64px;29 font-weight: 700;30 color: #cfc9c9;31 margin-left: 24px;32 }33 .appbar .actions {34 margin-left: auto;35 display: flex;36 gap: 36px;37 }38 .icon-btn {39 width: 64px; height: 64px;40 display: flex; justify-content: center; align-items: center;41 border-radius: 16px;42 }43 .icon-btn svg { fill: none; stroke: #cfc9c9; stroke-width: 4; }44 45 /* Category pill */46 .tag-row {47 position: absolute;48 top: 220px;49 left: 48px;50 right: 48px;51 display: flex;52 align-items: center;53 gap: 20px;54 }55 .tag {56 display: inline-flex; align-items: center; gap: 16px;57 background: #6b2424;58 color: #f4d9d9;59 padding: 18px 28px;60 border-radius: 16px;61 font-weight: 700;62 letter-spacing: 1px;63 }64 .tag svg { stroke: #f4d9d9; }65 66 /* Recording cards */67 .list {68 position: absolute;69 top: 310px;70 left: 48px;71 right: 48px;72 }73 .card {74 background: #161212;75 color: #d9d5d5;76 border-radius: 36px;77 padding: 40px 44px;78 margin-bottom: 42px;79 box-shadow: 0 10px 30px rgba(0,0,0,0.35);80 position: relative;81 }82 .card .title {83 font-size: 44px;84 font-weight: 700;85 color: #cfc9c9;86 margin-bottom: 24px;87 opacity: 0.85;88 }89 .meta {90 display: flex; align-items: center; gap: 16px;91 color: #b0a1a1;92 font-size: 32px;93 }94 .red-dot {95 width: 14px; height: 14px; background: #c2352d; border-radius: 50%;96 display: inline-block;97 }98 .card .right {99 position: absolute; right: 30px; top: 30px; display: flex; align-items: center; gap: 24px;100 }101 .duration {102 font-size: 32px; color: #bfb6b6;103 }104 .menu-icon svg { stroke: #bfb6b6; }105 .heart {106 position: absolute; right: 34px; bottom: 36px;107 }108 .heart svg { stroke: #c54b4b; fill: none; stroke-width: 5; }109 110 /* Bottom sheet */111 .sheet {112 position: absolute;113 left: 0; right: 0; bottom: 0;114 height: 980px;115 background: #472726;116 border-top-left-radius: 48px;117 border-top-right-radius: 48px;118 color: #f2e9e9;119 box-shadow: 0 -20px 40px rgba(0,0,0,0.6);120 padding: 36px 48px 120px 48px;121 }122 .sheet .handle {123 width: 180px; height: 18px; background: #6a4544; border-radius: 9px; margin: 10px auto 38px;124 }125 .sheet .header {126 display: flex; align-items: flex-start;127 }128 .sheet .header .title {129 font-size: 52px; font-weight: 800; color: #ffffff; flex: 1;130 }131 .sheet .header .right {132 display: flex; flex-direction: column; align-items: flex-end; gap: 16px;133 }134 .sheet .right .duration { font-size: 36px; color: #e7dbdb; }135 .sheet .submeta {136 margin-top: 10px; color: #e0d2d2; opacity: 0.9; font-size: 32px;137 }138 .divider {139 height: 2px; background: #63403f; margin: 40px 0 16px 0;140 }141 .actions {142 display: grid;143 grid-template-columns: 1fr 1fr;144 column-gap: 80px;145 row-gap: 42px;146 margin-top: 10px;147 }148 .action {149 display: flex; align-items: center; gap: 28px;150 color: #f1e6e6; font-size: 38px; font-weight: 600;151 }152 .action .aicon {153 width: 58px; height: 58px; display: flex; align-items: center; justify-content: center;154 }155 .action .aicon svg { stroke: #e4d0cf; fill: none; stroke-width: 4; }156 .home-indicator {157 position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);158 width: 300px; height: 16px; background: #e9e9e9; border-radius: 12px; opacity: 0.9;159 }160</style>161</head>162<body>163<div id="render-target">164 165 <!-- App bar -->166 <div class="appbar">167 <div class="icon-btn">168 <svg width="44" height="44" viewBox="0 0 24 24">169 <path d="M3 6h18M3 12h18M3 18h18"/>170 </svg>171 </div>172 <div class="title">All recordings</div>173 <div class="actions">174 <div class="icon-btn">175 <svg width="44" height="44" viewBox="0 0 24 24">176 <circle cx="11" cy="11" r="7"></circle>177 <path d="M21 21l-4.5-4.5"></path>178 </svg>179 </div>180 <div class="icon-btn">181 <svg width="44" height="44" viewBox="0 0 24 24">182 <path d="M4 6h16M7 12h10M10 18h7"/>183 </svg>184 </div>185 </div>186 </div>187 188 <!-- Tag -->189 <div class="tag-row">190 <div class="tag">191 <svg width="32" height="32" viewBox="0 0 24 24">192 <path d="M3 6h7l2 3h9v9H3z"/>193 </svg>194 <span>ALL RECORDINGS</span>195 </div>196 </div>197 198 <!-- List of recordings -->199 <div class="list">200 201 <div class="card">202 <div class="title">recording2023-11-17 12-16-50</div>203 <div class="meta">204 <span class="red-dot"></span>205 <span>Nov 17, 2023 12:16 PM</span>206 </div>207 <div class="right">208 <div class="menu-icon">209 <svg width="40" height="40" viewBox="0 0 24 24">210 <circle cx="12" cy="5" r="2"></circle>211 <circle cx="12" cy="12" r="2"></circle>212 <circle cx="12" cy="19" r="2"></circle>213 </svg>214 </div>215 <div class="duration">00:07</div>216 </div>217 <div class="heart">218 <svg width="54" height="54" viewBox="0 0 24 24">219 <path d="M12 21s-7-4.8-7-10.2C5 8 6.8 6.2 9 6.2c1.5 0 2.7.8 3 1.9.3-1.1 1.5-1.9 3-1.9 2.2 0 4 1.8 4 4.6C19 16.2 12 21 12 21z"/>220 </svg>221 </div>222 </div>223 224 <div class="card" style="opacity:0.85;">225 <div class="title">recording2023-11-17 14-10-57</div>226 <div class="meta">227 <span class="red-dot"></span>228 <span>Nov 17, 2023 2:11 PM</span>229 </div>230 <div class="right">231 <div class="menu-icon">232 <svg width="40" height="40" viewBox="0 0 24 24">233 <circle cx="12" cy="5" r="2"></circle>234 <circle cx="12" cy="12" r="2"></circle>235 <circle cx="12" cy="19" r="2"></circle>236 </svg>237 </div>238 <div class="duration">00:03</div>239 </div>240 <div class="heart">241 <svg width="54" height="54" viewBox="0 0 24 24">242 <path d="M12 21s-7-4.8-7-10.2C5 8 6.8 6.2 9 6.2c1.5 0 2.7.8 3 1.9.3-1.1 1.5-1.9 3-1.9 2.2 0 4 1.8 4 4.6C19 16.2 12 21 12 21z"/>243 </svg>244 </div>245 </div>246 247 <div class="card" style="opacity:0.8;">248 <div class="title">recording2023-11-20 10-43-12</div>249 <div class="meta">250 <span class="red-dot"></span>251 <span>Nov 20, 2023 10:44 AM</span>252 </div>253 <div class="right">254 <div class="menu-icon">255 <svg width="40" height="40" viewBox="0 0 24 24">256 <circle cx="12" cy="5" r="2"></circle>257 <circle cx="12" cy="12" r="2"></circle>258 <circle cx="12" cy="19" r="2"></circle>259 </svg>260 </div>261 <div class="duration">00:44</div>262 </div>263 <div class="heart">264 <svg width="54" height="54" viewBox="0 0 24 24">265 <path d="M12 21s-7-4.8-7-10.2C5 8 6.8 6.2 9 6.2c1.5 0 2.7.8 3 1.9.3-1.1 1.5-1.9 3-1.9 2.2 0 4 1.8 4 4.6C19 16.2 12 21 12 21z"/>266 </svg>267 </div>268 </div>269 270 </div>271 272 <!-- Bottom sheet with actions -->273 <div class="sheet">274 <div class="handle"></div>275 <div class="header">276 <div class="title">recording2023-11-17 12-16-50</div>277 <div class="right">278 <div class="duration">00:07</div>279 <div class="heart">280 <svg width="44" height="44" viewBox="0 0 24 24">281 <path d="M12 21s-7-4.8-7-10.2C5 8 6.8 6.2 9 6.2c1.5 0 2.7.8 3 1.9.3-1.1 1.5-1.9 3-1.9 2.2 0 4 1.8 4 4.6C19 16.2 12 21 12 21z"/>282 </svg>283 </div>284 </div>285 </div>286 <div class="submeta">Nov 17, 2023 12:16 PM | 0.13 MB</div>287 <div class="divider"></div>288 289 <div class="actions">290 <div class="action">291 <div class="aicon">292 <svg viewBox="0 0 24 24">293 <path d="M5 12l4 4 10-10"/>294 </svg>295 </div>296 <div>Select</div>297 </div>298 299 <div class="action">300 <div class="aicon">301 <svg viewBox="0 0 24 24">302 <circle cx="6" cy="12" r="2"/><circle cx="12" cy="8" r="2"/><circle cx="18" cy="12" r="2"/>303 <path d="M8 12l4-4 4 4"/>304 </svg>305 </div>306 <div>Share</div>307 </div>308 309 <div class="action">310 <div class="aicon">311 <svg viewBox="0 0 24 24">312 <path d="M5 19v-8M10 19v-12M15 19v-6M20 19v-10"/>313 </svg>314 </div>315 <div>Edit</div>316 </div>317 318 <div class="action">319 <div class="aicon">320 <svg viewBox="0 0 24 24">321 <circle cx="12" cy="12" r="6"/>322 </svg>323 </div>324 <div>Resume</div>325 </div>326 327 <div class="action">328 <div class="aicon">329 <svg viewBox="0 0 24 24">330 <path d="M5 6h8M5 12h8M5 18h8"/>331 <path d="M17 9l3 3-3 3"/>332 </svg>333 </div>334 <div>Rename</div>335 </div>336 337 <div class="action">338 <div class="aicon">339 <svg viewBox="0 0 24 24">340 <path d="M5 14l10-10 4 4-10 10H5z"/>341 <path d="M3 21h6"/>342 </svg>343 </div>344 <div>Notes</div>345 </div>346 347 <div class="action">348 <div class="aicon">349 <svg viewBox="0 0 24 24">350 <path d="M6 7h12l-1 13H7L6 7z"/>351 <path d="M10 11v6M14 11v6"/>352 <path d="M9 7l1-3h4l1 3"/>353 </svg>354 </div>355 <div>Delete</div>356 </div>357 </div>358 </div>359 360 <div class="home-indicator"></div>361</div>362</body>363</html>