GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>URecorder UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #0b0b0c;14 color: #e7e7e9;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 100%;23 height: 96px;24 padding: 0 36px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #ffffff;29 font-size: 42px;30 letter-spacing: 0.5px;31 }32 .status-icons { display: flex; align-items: center; gap: 24px; }33 34 /* App bar */35 .app-bar {36 position: absolute;37 top: 96px;38 left: 0;39 width: 100%;40 height: 136px;41 padding: 0 36px;42 display: flex;43 align-items: center;44 justify-content: space-between;45 background: #0d0e10;46 }47 .app-title {48 font-size: 68px;49 font-weight: 700;50 color: #b8b9bd;51 }52 .app-title .u { color: #d96437; }53 .app-actions { display: flex; align-items: center; gap: 28px; }54 .icon-btn {55 width: 80px; height: 80px;56 border-radius: 18px;57 background: #191a1d;58 display: flex; align-items: center; justify-content: center;59 }60 .icon-btn svg { width: 42px; height: 42px; fill: #c9c9cb; }61 62 /* Notice banner */63 .notice {64 position: absolute;65 top: 232px;66 left: 0;67 width: 100%;68 background: #a2452c;69 padding: 36px 36px 36px 36px;70 }71 .notice h2 {72 margin: 0 0 16px 0;73 font-size: 56px;74 color: #e2ddd8;75 }76 .notice p {77 margin: 0;78 font-size: 40px;79 color: #d7d3cf;80 max-width: 720px;81 line-height: 1.4;82 }83 .notice .pill {84 position: absolute;85 right: 36px;86 top: 50%;87 transform: translateY(-50%);88 padding: 26px 40px;89 background: #c9b7b0;90 color: #5b3a32;91 border-radius: 50px;92 font-weight: 700;93 font-size: 40px;94 }95 96 /* Toolbar below notice */97 .list-toolbar {98 position: absolute;99 top: 440px;100 left: 0;101 width: 100%;102 padding: 0 36px;103 height: 96px;104 display: flex;105 align-items: center;106 justify-content: space-between;107 color: #bfc1c6;108 }109 .list-toolbar .count { font-size: 48px; font-weight: 600; color: #cfd1d4; }110 .tool-icons { display: flex; align-items: center; gap: 26px; }111 .tool-icons svg { width: 54px; height: 54px; fill: #c9cbcf; opacity: 0.85; }112 113 /* Recording card */114 .card {115 position: absolute;116 top: 520px;117 left: 36px;118 width: 1008px;119 background: #191b1f;120 border-radius: 36px;121 padding: 28px 32px;122 display: flex;123 align-items: center;124 box-shadow: 0 8px 24px rgba(0,0,0,0.35) inset;125 }126 .wavebox {127 width: 120px; height: 120px;128 border-radius: 24px;129 background: #1c1e22;130 display: flex; align-items: center; justify-content: center;131 margin-right: 32px;132 }133 .wavebox svg { width: 84px; height: 84px; }134 .card-content { flex: 1; }135 .card-title {136 font-size: 54px; font-weight: 700; color: #e6e7ea; margin-bottom: 10px;137 }138 .card-meta {139 font-size: 36px; color: #9aa0a6;140 }141 .card-right {142 display: flex; align-items: center; gap: 20px;143 }144 .card-date { font-size: 36px; color: #a9adb3; }145 .dots { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; }146 .dots svg { width: 18px; height: 42px; fill: #b8bac0; }147 148 /* Bottom sheet */149 .sheet {150 position: absolute;151 left: 0;152 top: 1060px;153 width: 100%;154 height: 1240px;155 background: #24262a;156 border-top-left-radius: 54px;157 border-top-right-radius: 54px;158 box-shadow: 0 -12px 24px rgba(0,0,0,0.5);159 padding: 48px 36px 140px 36px;160 }161 .sheet-header {162 display: flex;163 align-items: center;164 justify-content: space-between;165 margin-bottom: 36px;166 }167 .sheet-title {168 font-size: 64px; font-weight: 800; color: #f2f3f5;169 }170 .sheet-actions { display: flex; align-items: center; gap: 26px; }171 .sheet-actions .icon-btn { width: 80px; height: 80px; background: #1f2024; }172 .sheet-actions svg { width: 46px; height: 46px; fill: #cfd1d5; }173 174 .sheet-list { margin-top: 24px; }175 .sheet-row {176 display: flex;177 align-items: center;178 padding: 28px 6px;179 }180 .circle-icon {181 width: 96px; height: 96px;182 border-radius: 50%;183 background: #1e2024;184 display: flex; align-items: center; justify-content: center;185 margin-right: 28px;186 }187 .circle-icon svg { width: 52px; height: 52px; }188 .row-text {189 font-size: 48px; color: #e7e8ea; font-weight: 600;190 }191 192 /* Home indicator */193 .home-indicator {194 position: absolute;195 bottom: 32px;196 left: 50%;197 transform: translateX(-50%);198 width: 300px;199 height: 12px;200 border-radius: 12px;201 background: #e4e4e6;202 opacity: 0.8;203 }204</style>205</head>206<body>207<div id="render-target">208 209 <!-- Status Bar -->210 <div class="status-bar">211 <div>3:42</div>212 <div class="status-icons">213 <!-- simple battery bolt -->214 <svg viewBox="0 0 24 24">215 <path d="M18 7h2v10h-2v2H4V5h14v2zm-4 3-5 3 3-3v4l5-3-3 3V10z" fill="#ffffff"/>216 </svg>217 </div>218 </div>219 220 <!-- App Bar -->221 <div class="app-bar">222 <div class="app-title"><span class="u">U</span>Recorder</div>223 <div class="app-actions">224 <div class="icon-btn" title="Trash">225 <svg viewBox="0 0 24 24">226 <path d="M8 5h8l-1-2H9L8 5zm-2 3h12v12H6V8zm3 2v8h2v-8H9zm4 0v8h2v-8h-2z"/>227 </svg>228 </div>229 <div class="icon-btn" title="Chat">230 <svg viewBox="0 0 24 24">231 <path d="M4 4h16v12H8l-4 4V4z"/>232 </svg>233 </div>234 <div class="icon-btn" title="Settings">235 <svg viewBox="0 0 24 24">236 <path d="M12 4l6 4-2 8-6 4-6-4 2-8 6-4zm0 4.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7z"/>237 </svg>238 </div>239 </div>240 </div>241 242 <!-- Notice -->243 <div class="notice">244 <h2>Notice</h2>245 <p>Uninstalling URecorder will result in the loss of your recordings.</p>246 <div class="pill">Got it</div>247 </div>248 249 <!-- List toolbar -->250 <div class="list-toolbar">251 <div class="count">1 recording</div>252 <div class="tool-icons">253 <!-- Search -->254 <svg viewBox="0 0 24 24">255 <path d="M10 4a6 6 0 1 1 0 12 6 6 0 0 1 0-12zm8 12-4-4" stroke="#c9cbcf" stroke-width="2" fill="none"/>256 </svg>257 <!-- List Sort -->258 <svg viewBox="0 0 24 24">259 <path d="M4 6h14v2H4V6zm4 5h10v2H8v-2zm6 5h8v2h-8v-2z"/>260 </svg>261 <!-- Check/Select -->262 <svg viewBox="0 0 24 24">263 <path d="M4 4h16v16H4V4zm4 8 3 3 5-6" stroke="#c9cbcf" stroke-width="2" fill="none"/>264 </svg>265 </div>266 </div>267 268 <!-- Recording Card -->269 <div class="card">270 <div class="wavebox">271 <!-- simple wave icon -->272 <svg viewBox="0 0 24 24">273 <path d="M3 12h2v4H3v-4zm4-6h2v16H7V6zm4 2h2v12h-2V8zm4-4h2v20h-2V4zm4 6h2v8h-2v-8z" fill="#f26a3d"/>274 </svg>275 </div>276 <div class="card-content">277 <div class="card-title">Data Analysis First speech</div>278 <div class="card-meta">00:04 78.66KB M4A</div>279 </div>280 <div class="card-right">281 <div class="card-date">11-09 15:12</div>282 <div class="dots">283 <svg viewBox="0 0 8 24">284 <circle cx="4" cy="4" r="2"></circle>285 <circle cx="4" cy="12" r="2"></circle>286 <circle cx="4" cy="20" r="2"></circle>287 </svg>288 </div>289 </div>290 </div>291 292 <!-- Bottom Sheet -->293 <div class="sheet">294 <div class="sheet-header">295 <div class="sheet-title">Data Analysis First speech</div>296 <div class="sheet-actions">297 <div class="icon-btn" title="Share">298 <svg viewBox="0 0 24 24">299 <path d="M12 3l4 4h-3v6h-2V7H8l4-4zm-6 12h12v6H6v-6z"/>300 </svg>301 </div>302 <div class="icon-btn" title="Delete">303 <svg viewBox="0 0 24 24">304 <path d="M8 5h8l-1-2H9L8 5zM6 8h12v12H6V8zm3 2v8h2v-8H9zm4 0v8h2v-8h-2z"/>305 </svg>306 </div>307 </div>308 </div>309 310 <div class="sheet-list">311 <div class="sheet-row">312 <div class="circle-icon">313 <!-- Edit -->314 <svg viewBox="0 0 24 24">315 <path d="M4 17l10-10 3 3-10 10H4zm12-12 2 2 2-2-2-2-2 2z" fill="#f26a3d"/>316 </svg>317 </div>318 <div class="row-text">Rename</div>319 </div>320 321 <div class="sheet-row">322 <div class="circle-icon">323 <!-- Scissors -->324 <svg viewBox="0 0 24 24">325 <path d="M4 8a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm16 0-7 4 7 4-2 2-8-6 8-6 2 2z" fill="#f26a3d"/>326 </svg>327 </div>328 <div class="row-text">Trim</div>329 </div>330 331 <div class="sheet-row">332 <div class="circle-icon">333 <!-- Mic -->334 <svg viewBox="0 0 24 24">335 <path d="M12 4a4 4 0 0 1 4 4v4a4 4 0 0 1-8 0V8a4 4 0 0 1 4-4zm-6 8h2a6 6 0 0 0 12 0h2a8 8 0 0 1-16 0z" fill="#f26a3d"/>336 </svg>337 </div>338 <div class="row-text">Continue recording</div>339 </div>340 341 <div class="sheet-row">342 <div class="circle-icon">343 <!-- Bell -->344 <svg viewBox="0 0 24 24">345 <path d="M12 3a6 6 0 0 0-6 6v5L4 16v2h16v-2l-2-2V9a6 6 0 0 0-6-6zm0 18a3 3 0 0 0 3-3H9a3 3 0 0 0 3 3z" fill="#f26a3d"/>346 </svg>347 </div>348 <div class="row-text">Set as ringtone</div>349 </div>350 351 <div class="sheet-row">352 <div class="circle-icon">353 <!-- Details -->354 <svg viewBox="0 0 24 24">355 <path d="M4 4h16v12H8l-4 4V4zm4 4h8v2H8V8zm0 4h6v2H8v-2z" fill="#f26a3d"/>356 </svg>357 </div>358 <div class="row-text">Details</div>359 </div>360 </div>361 </div>362 363 <div class="home-indicator"></div>364</div>365</body>366</html>