GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>URecorder UI Mock</title>6<style>7 body { margin:0; padding:0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }8 #render-target {9 position: relative;10 overflow: hidden;11 width: 1080px;12 height: 2400px;13 background: #0f1012;14 color: #e5e5e7;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 110px;24 background: #0d0e10;25 display: flex;26 align-items: center;27 padding: 0 36px;28 box-sizing: border-box;29 }30 .status-time {31 font-size: 44px;32 font-weight: 600;33 letter-spacing: 0.5px;34 margin-right: 18px;35 }36 .status-icons {37 margin-left: auto;38 display: flex;39 gap: 26px;40 align-items: center;41 }42 .status-icons svg { fill: #d9d9dd; }43 44 /* App header */45 .app-header {46 position: absolute;47 top: 110px;48 left: 0;49 width: 1080px;50 height: 120px;51 display: flex;52 align-items: center;53 padding: 0 36px;54 box-sizing: border-box;55 }56 .brand {57 font-size: 56px;58 font-weight: 700;59 }60 .brand .u {61 color: #cf5a34;62 margin-right: 8px;63 }64 .header-actions {65 margin-left: auto;66 display: flex;67 gap: 34px;68 align-items: center;69 }70 .header-actions .icon {71 width: 60px;72 height: 60px;73 background: #1e1f23;74 border-radius: 14px;75 display: flex;76 align-items: center;77 justify-content: center;78 }79 .header-actions svg { fill: #cfd1d6; width: 34px; height: 34px; }80 81 /* Notice card */82 .notice {83 position: absolute;84 top: 238px;85 left: 36px;86 width: 1008px;87 height: 270px;88 background: #b45034;89 border-radius: 24px;90 padding: 36px;91 box-sizing: border-box;92 color: #eae9ea;93 }94 .notice h2 {95 margin: 0 0 16px 0;96 font-size: 58px;97 font-weight: 800;98 }99 .notice p {100 margin: 0;101 font-size: 40px;102 opacity: 0.95;103 }104 .notice .cta {105 position: absolute;106 right: 36px;107 top: 106px;108 background: #d9d6d5;109 color: #4a4645;110 border-radius: 36px;111 padding: 24px 46px;112 font-size: 42px;113 font-weight: 700;114 }115 116 /* List header */117 .list-header {118 position: absolute;119 top: 540px;120 left: 36px;121 width: 1008px;122 height: 80px;123 display: flex;124 align-items: center;125 color: #bfc3c9;126 }127 .list-header .title {128 font-size: 42px;129 font-weight: 700;130 }131 .list-header .tools {132 margin-left: auto;133 display: flex;134 gap: 32px;135 align-items: center;136 }137 .tool {138 width: 64px;139 height: 64px;140 border-radius: 14px;141 background: transparent;142 display: flex;143 align-items: center;144 justify-content: center;145 }146 .tool svg { width: 44px; height: 44px; fill: #cfd1d6; }147 148 /* Recording card */149 .card {150 position: absolute;151 top: 620px;152 left: 36px;153 width: 1008px;154 height: 180px;155 background: #1f2024;156 border-radius: 40px;157 box-sizing: border-box;158 display: flex;159 align-items: center;160 padding: 26px 30px;161 gap: 26px;162 }163 .thumb {164 width: 120px;165 height: 120px;166 border-radius: 28px;167 background: #292a2f;168 display: flex;169 align-items: center;170 justify-content: center;171 }172 .thumb svg { width: 80px; height: 80px; }173 .card-content {174 flex: 1;175 }176 .card-title {177 font-size: 52px;178 font-weight: 800;179 color: #e8e8ea;180 margin-bottom: 12px;181 }182 .card-meta {183 font-size: 34px;184 color: #a8abb1;185 }186 .card-date {187 font-size: 34px;188 color: #a8abb1;189 margin-left: 20px;190 }191 .menu-dots {192 width: 24px;193 margin-left: 20px;194 display: flex;195 align-items: center;196 justify-content: center;197 }198 .menu-dots span {199 width: 12px;200 height: 12px;201 background: #bfc3c9;202 border-radius: 50%;203 display: block;204 margin: 5px 0;205 }206 207 /* USB debugging modal */208 .modal {209 position: absolute;210 left: 90px;211 top: 1200px;212 width: 900px;213 height: 420px;214 background: #222327;215 border-radius: 40px;216 box-shadow: 0 18px 40px rgba(0,0,0,0.5);217 padding: 40px 44px;218 box-sizing: border-box;219 }220 .modal h3 {221 margin: 0 0 18px 0;222 font-size: 56px;223 font-weight: 800;224 color: #f0f0f2;225 }226 .modal .desc {227 font-size: 36px;228 color: #c8cbd2;229 line-height: 1.4;230 }231 .checkbox {232 display: flex;233 align-items: center;234 gap: 18px;235 margin-top: 26px;236 font-size: 36px;237 color: #cdd0d6;238 }239 .checkbox .box {240 width: 46px;241 height: 46px;242 border-radius: 10px;243 border: 3px solid #83868d;244 box-sizing: border-box;245 background: transparent;246 }247 .modal .actions {248 position: absolute;249 right: 40px;250 bottom: 34px;251 display: flex;252 gap: 44px;253 align-items: center;254 }255 .btn {256 font-size: 42px;257 color: #cfd3da;258 }259 .btn.primary {260 color: #cfd7e4;261 font-weight: 700;262 }263 264 /* Bottom area */265 .gesture {266 position: absolute;267 bottom: 140px;268 left: 50%;269 transform: translateX(-50%);270 width: 260px;271 height: 12px;272 background: #e8e8ea;273 border-radius: 10px;274 opacity: 0.9;275 }276 .bottom-bar {277 position: absolute;278 bottom: 0;279 left: 0;280 width: 1080px;281 height: 220px;282 background: #1b1c20;283 border-top-left-radius: 40px;284 border-top-right-radius: 40px;285 padding: 0 44px;286 box-sizing: border-box;287 display: flex;288 align-items: center;289 justify-content: space-between;290 }291 .bottom-icon {292 width: 80px;293 height: 80px;294 background: #2b2c31;295 border-radius: 40px;296 display: flex;297 align-items: center;298 justify-content: center;299 }300 .bottom-icon svg { fill: #bfc3c9; width: 40px; height: 40px; }301 .bottom-right svg { fill: #cf5a34; }302</style>303</head>304<body>305<div id="render-target">306 307 <!-- Status bar -->308 <div class="status-bar">309 <div class="status-time">3:39</div>310 <svg width="34" height="34" viewBox="0 0 24 24">311 <rect x="4" y="4" width="12" height="16" rx="2"></rect>312 </svg>313 <div class="status-icons">314 <svg width="34" height="34" viewBox="0 0 24 24">315 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="none"></rect>316 <rect x="20" y="9" width="2" height="6"></rect>317 </svg>318 </div>319 </div>320 321 <!-- App header -->322 <div class="app-header">323 <div class="brand"><span class="u">U</span><span style="color:#cfd1d6">Recorder</span></div>324 <div class="header-actions">325 <div class="icon">326 <!-- Trash -->327 <svg viewBox="0 0 24 24"><path d="M7 4h10l-1 2H8l-1-2zm-1 4h12v12a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V8z"></path></svg>328 </div>329 <div class="icon">330 <!-- Chat bubble -->331 <svg viewBox="0 0 24 24"><path d="M4 5h16v11H9l-5 4V5z"></path></svg>332 </div>333 <div class="icon">334 <!-- Hex/settings -->335 <svg viewBox="0 0 24 24"><path d="M12 2l6 3.5v7L12 16l-6-3.5v-7L12 2z"></path></svg>336 </div>337 </div>338 </div>339 340 <!-- Notice card -->341 <div class="notice">342 <h2>Notice</h2>343 <p>Uninstalling URecorder will result in the loss of your recordings.</p>344 <div class="cta">Got it</div>345 </div>346 347 <!-- List header -->348 <div class="list-header">349 <div class="title">1 recording</div>350 <div class="tools">351 <div class="tool">352 <!-- Search -->353 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"></circle><path d="M16 16l5 5"></path></svg>354 </div>355 <div class="tool">356 <!-- Sort -->357 <svg viewBox="0 0 24 24"><path d="M4 6h16v2H4zM8 11h12v2H8zM12 16h8v2h-8z"></path></svg>358 </div>359 <div class="tool">360 <!-- Checklist -->361 <svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2"></rect><path d="M7 9l3 3 6-6"></path></svg>362 </div>363 </div>364 </div>365 366 <!-- Recording item card -->367 <div class="card">368 <div class="thumb">369 <!-- Waveform -->370 <svg viewBox="0 0 24 24">371 <rect x="2" y="12" width="2" height="6" fill="#d95a2b"></rect>372 <rect x="6" y="8" width="2" height="10" fill="#e06c3a"></rect>373 <rect x="10" y="5" width="2" height="13" fill="#f07c46"></rect>374 <rect x="14" y="8" width="2" height="10" fill="#e06c3a"></rect>375 <rect x="18" y="12" width="2" height="6" fill="#d95a2b"></rect>376 </svg>377 </div>378 <div class="card-content">379 <div class="card-title">Data Analysis First speech</div>380 <div style="display:flex; align-items:center;">381 <div class="card-meta">00:04 78.66KB M4A</div>382 <div class="card-date" style="margin-left:auto;">11-09 15:12</div>383 </div>384 </div>385 <div class="menu-dots">386 <span></span><span></span><span></span>387 </div>388 </div>389 390 <!-- USB Debugging modal -->391 <div class="modal">392 <h3>Allow USB debugging?</h3>393 <div class="desc">394 The computer's RSA key fingerprint is:<br>395 CD:CE:4B:C4:BC:35:D5:67:27:0E:03:5E:68:3<br>396 2:CE:F5397 </div>398 <div class="checkbox">399 <div class="box"></div>400 <span>Always allow from this computer</span>401 </div>402 <div class="actions">403 <div class="btn">Cancel</div>404 <div class="btn primary">Allow</div>405 </div>406 </div>407 408 <!-- Bottom gesture and bar -->409 <div class="gesture"></div>410 <div class="bottom-bar">411 <div class="bottom-icon">412 <!-- circle icon -->413 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="6"></circle></svg>414 </div>415 <div class="bottom-icon bottom-right">416 <!-- list icon with orange accent -->417 <svg viewBox="0 0 24 24">418 <path d="M5 6h12v2H5zM5 11h12v2H5zM5 16h9v2H5z"></path>419 <rect x="17" y="16" width="2" height="6"></rect>420 </svg>421 </div>422 </div>423 424</div>425</body>426</html>