GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">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, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #1E1614;14 color: #E7D1CB;15 }16 17 /* Top status bar */18 .status-bar {19 height: 90px;20 padding: 0 40px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #EFE4E0;25 font-weight: 600;26 font-size: 34px;27 opacity: 0.95;28 }29 .status-icons { display: flex; gap: 24px; align-items: center; }30 .status-dot { width: 10px; height: 10px; background: #BFA7A1; border-radius: 50%; display: inline-block; }31 .battery {32 width: 40px; height: 20px; border: 2px solid #E7D1CB; border-radius: 4px; position: relative;33 }34 .battery::after { content: ""; width: 5px; height: 10px; background: #E7D1CB; position: absolute; right: -7px; top: 4px; border-radius: 2px; }35 .battery .level { width: 24px; height: 14px; background: #E7D1CB; position: absolute; left: 3px; top: 3px; border-radius: 2px; }36 37 /* App bar */38 .app-bar {39 height: 150px;40 padding: 0 36px;41 display: flex;42 align-items: center;43 justify-content: space-between;44 }45 .app-left { display: flex; align-items: center; gap: 30px; }46 .app-title { font-size: 60px; font-weight: 700; letter-spacing: 0.5px; }47 .app-actions { display: flex; align-items: center; gap: 36px; }48 .icon-btn { background: transparent; border: none; padding: 0; cursor: default; }49 .icon { width: 64px; height: 64px; }50 .icon-small { width: 52px; height: 52px; }51 52 /* Section chip */53 .chip {54 margin: 12px 40px 20px 40px;55 display: inline-flex;56 align-items: center;57 gap: 18px;58 background: #6F2B29;59 color: #FFD9D5;60 padding: 20px 30px;61 border-radius: 20px;62 font-size: 32px;63 font-weight: 700;64 box-shadow: 0 2px 0 rgba(0,0,0,0.25);65 }66 .chip .folder-icon { width: 50px; height: 36px; }67 68 /* Content list area */69 .content {70 height: calc(100% - 90px - 150px);71 overflow-y: auto;72 padding-bottom: 220px; /* space for FAB */73 }74 75 .card {76 margin: 28px 36px;77 background: #2A1F1D;78 border-radius: 40px;79 padding: 38px 40px 60px 40px;80 box-shadow: 0 18px 30px rgba(0,0,0,0.35);81 position: relative;82 }83 .card-header {84 display: flex;85 align-items: center;86 justify-content: space-between;87 }88 .card-title {89 font-size: 44px;90 font-weight: 700;91 color: #F0E1DC;92 }93 .card-right {94 display: flex;95 align-items: center;96 gap: 26px;97 }98 .duration {99 font-size: 30px;100 color: #C8B2AC;101 letter-spacing: 0.5px;102 }103 .more-vert { width: 14px; height: 52px; display: inline-flex; align-items: center; }104 .card-sub {105 margin-top: 16px;106 display: flex;107 align-items: center;108 gap: 14px;109 color: #D9C6C0;110 font-size: 32px;111 }112 .live-dot {113 width: 16px; height: 16px; background: #E64A3B; border-radius: 50%;114 }115 .heart {116 position: absolute;117 right: 32px;118 bottom: 20px;119 width: 56px; height: 56px;120 }121 122 /* Floating record button */123 .fab {124 position: absolute;125 right: 70px;126 bottom: 210px;127 width: 170px; height: 170px;128 border-radius: 36px;129 background: #E64A3B;130 box-shadow: 0 16px 32px rgba(0,0,0,0.45);131 display: flex;132 align-items: center;133 justify-content: center;134 }135 .fab .inner-dot {136 width: 54px; height: 54px; background: #FFFFFF; border-radius: 50%;137 }138 139 /* Gesture bar */140 .gesture-bar {141 position: absolute;142 bottom: 60px; left: 50%;143 transform: translateX(-50%);144 width: 460px; height: 14px;145 background: #E0DFDF;146 border-radius: 8px;147 opacity: 0.75;148 }149</style>150</head>151<body>152<div id="render-target">153 154 <!-- Status bar -->155 <div class="status-bar">156 <div>11:37</div>157 <div class="status-icons">158 <span class="status-dot"></span>159 <span class="status-dot"></span>160 <span class="status-dot"></span>161 <div class="battery"><div class="level"></div></div>162 </div>163 </div>164 165 <!-- App bar -->166 <div class="app-bar">167 <div class="app-left">168 <button class="icon-btn" aria-label="Menu">169 <svg class="icon" viewBox="0 0 24 24">170 <path d="M3 5h18v2H3zM3 11h18v2H3zM3 17h18v2H3z" fill="#E7D1CB"/>171 </svg>172 </button>173 <div class="app-title">All recordings</div>174 </div>175 <div class="app-actions">176 <button class="icon-btn" aria-label="Search">177 <svg class="icon" viewBox="0 0 24 24">178 <circle cx="11" cy="11" r="6.5" stroke="#E7D1CB" stroke-width="2.2" fill="none"/>179 <path d="M16.5 16.5l4.5 4.5" stroke="#E7D1CB" stroke-width="2.2" fill="none" stroke-linecap="round"/>180 </svg>181 </button>182 <button class="icon-btn" aria-label="Filter">183 <svg class="icon" viewBox="0 0 24 24">184 <path d="M3 5h18l-7 7v6l-4-2v-4z" fill="#E7D1CB"/>185 </svg>186 </button>187 </div>188 </div>189 190 <!-- Content -->191 <div class="content">192 193 <!-- Chip -->194 <div class="chip">195 <svg class="folder-icon" viewBox="0 0 24 24">196 <path d="M10 4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h6z" fill="#FFB2AA"/>197 </svg>198 <span>ALL RECORDINGS</span>199 </div>200 201 <!-- Card 1 -->202 <div class="card">203 <div class="card-header">204 <div class="card-title">recording2023-11-17 12-16-50</div>205 <div class="card-right">206 <span class="duration">00:07</span>207 <div class="more-vert">208 <svg class="icon-small" viewBox="0 0 24 24">209 <circle cx="12" cy="5" r="2" fill="#E7D1CB"/>210 <circle cx="12" cy="12" r="2" fill="#E7D1CB"/>211 <circle cx="12" cy="19" r="2" fill="#E7D1CB"/>212 </svg>213 </div>214 </div>215 </div>216 <div class="card-sub">217 <span class="live-dot"></span>218 <span>Nov 17, 2023 12:16 PM</span>219 </div>220 <svg class="heart" viewBox="0 0 24 24">221 <path d="M12 21s-6.5-4.2-8.6-7.1C1.7 11.5 2.7 8.5 5.4 7.6c2-0.6 3.6 0.4 4.6 1.8 1-1.4 2.6-2.4 4.6-1.8 2.7 0.9 3.7 3.9 2 6.3C18.5 16.8 12 21 12 21z" fill="none" stroke="#E64A3B" stroke-width="2" stroke-linejoin="round"/>222 </svg>223 </div>224 225 <!-- Card 2 -->226 <div class="card">227 <div class="card-header">228 <div class="card-title">recording2023-11-17 14-10-57</div>229 <div class="card-right">230 <span class="duration">00:03</span>231 <div class="more-vert">232 <svg class="icon-small" viewBox="0 0 24 24">233 <circle cx="12" cy="5" r="2" fill="#E7D1CB"/>234 <circle cx="12" cy="12" r="2" fill="#E7D1CB"/>235 <circle cx="12" cy="19" r="2" fill="#E7D1CB"/>236 </svg>237 </div>238 </div>239 </div>240 <div class="card-sub">241 <span class="live-dot"></span>242 <span>Nov 17, 2023 2:11 PM</span>243 </div>244 <svg class="heart" viewBox="0 0 24 24">245 <path d="M12 21s-6.5-4.2-8.6-7.1C1.7 11.5 2.7 8.5 5.4 7.6c2-0.6 3.6 0.4 4.6 1.8 1-1.4 2.6-2.4 4.6-1.8 2.7 0.9 3.7 3.9 2 6.3C18.5 16.8 12 21 12 21z" fill="none" stroke="#E64A3B" stroke-width="2" stroke-linejoin="round"/>246 </svg>247 </div>248 249 <!-- Card 3 -->250 <div class="card">251 <div class="card-header">252 <div class="card-title">recording2023-11-20 10-43-12</div>253 <div class="card-right">254 <span class="duration">00:44</span>255 <div class="more-vert">256 <svg class="icon-small" viewBox="0 0 24 24">257 <circle cx="12" cy="5" r="2" fill="#E7D1CB"/>258 <circle cx="12" cy="12" r="2" fill="#E7D1CB"/>259 <circle cx="12" cy="19" r="2" fill="#E7D1CB"/>260 </svg>261 </div>262 </div>263 </div>264 <div class="card-sub">265 <span class="live-dot"></span>266 <span>Nov 20, 2023 10:44 AM</span>267 </div>268 <svg class="heart" viewBox="0 0 24 24">269 <path d="M12 21s-6.5-4.2-8.6-7.1C1.7 11.5 2.7 8.5 5.4 7.6c2-0.6 3.6 0.4 4.6 1.8 1-1.4 2.6-2.4 4.6-1.8 2.7 0.9 3.7 3.9 2 6.3C18.5 16.8 12 21 12 21z" fill="none" stroke="#E64A3B" stroke-width="2" stroke-linejoin="round"/>270 </svg>271 </div>272 273 <!-- Card 4 -->274 <div class="card">275 <div class="card-header">276 <div class="card-title">recording2023-11-20 10-48-48</div>277 <div class="card-right">278 <span class="duration">00:02</span>279 <div class="more-vert">280 <svg class="icon-small" viewBox="0 0 24 24">281 <circle cx="12" cy="5" r="2" fill="#E7D1CB"/>282 <circle cx="12" cy="12" r="2" fill="#E7D1CB"/>283 <circle cx="12" cy="19" r="2" fill="#E7D1CB"/>284 </svg>285 </div>286 </div>287 </div>288 <div class="card-sub">289 <span class="live-dot"></span>290 <span>Nov 20, 2023 10:48 AM</span>291 </div>292 <svg class="heart" viewBox="0 0 24 24">293 <path d="M12 21s-6.5-4.2-8.6-7.1C1.7 11.5 2.7 8.5 5.4 7.6c2-0.6 3.6 0.4 4.6 1.8 1-1.4 2.6-2.4 4.6-1.8 2.7 0.9 3.7 3.9 2 6.3C18.5 16.8 12 21 12 21z" fill="none" stroke="#E64A3B" stroke-width="2" stroke-linejoin="round"/>294 </svg>295 </div>296 297 <!-- Card 5 -->298 <div class="card">299 <div class="card-header">300 <div class="card-title">recording2023-11-20 10-51-32</div>301 <div class="card-right">302 <span class="duration">02:01</span>303 <div class="more-vert">304 <svg class="icon-small" viewBox="0 0 24 24">305 <circle cx="12" cy="5" r="2" fill="#E7D1CB"/>306 <circle cx="12" cy="12" r="2" fill="#E7D1CB"/>307 <circle cx="12" cy="19" r="2" fill="#E7D1CB"/>308 </svg>309 </div>310 </div>311 </div>312 <div class="card-sub">313 <span class="live-dot"></span>314 <span>Nov 20, 2023 10:53 AM</span>315 </div>316 <svg class="heart" viewBox="0 0 24 24">317 <path d="M12 21s-6.5-4.2-8.6-7.1C1.7 11.5 2.7 8.5 5.4 7.6c2-0.6 3.6 0.4 4.6 1.8 1-1.4 2.6-2.4 4.6-1.8 2.7 0.9 3.7 3.9 2 6.3C18.5 16.8 12 21 12 21z" fill="none" stroke="#E64A3B" stroke-width="2" stroke-linejoin="round"/>318 </svg>319 </div>320 321 </div>322 323 <!-- Floating record button -->324 <div class="fab"><div class="inner-dot"></div></div>325 326 <!-- Gesture bar -->327 <div class="gesture-bar"></div>328 329</div>330</body>331</html>