GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Recorder UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #1f2329;15 color: #e6e6e6;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 110px;25 padding: 0 36px;26 box-sizing: border-box;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #cfd8dc;31 font-size: 42px;32 }33 .status-right {34 display: flex;35 align-items: center;36 gap: 28px;37 }38 .icon {39 width: 48px;40 height: 48px;41 fill: none;42 stroke: #cfd8dc;43 stroke-width: 4;44 }45 46 /* Header / toolbar */47 .header {48 position: absolute;49 top: 110px;50 left: 0;51 width: 1080px;52 padding: 32px 36px 20px 36px;53 box-sizing: border-box;54 }55 .header-row {56 display: flex;57 align-items: center;58 justify-content: space-between;59 }60 .title {61 font-size: 64px;62 font-weight: 600;63 letter-spacing: 0.5px;64 color: #e8eaed;65 margin-top: 10px;66 }67 .toolbar-icons {68 display: flex;69 align-items: center;70 gap: 40px;71 margin-top: 40px;72 }73 .toolbar-icons svg {74 width: 54px;75 height: 54px;76 stroke: #cfd8dc;77 stroke-width: 5;78 }79 80 /* Tabs */81 .tabs {82 display: flex;83 gap: 40px;84 padding: 24px 36px 0 36px;85 align-items: center;86 }87 .tab {88 font-size: 36px;89 letter-spacing: 1px;90 color: #9aa0a6;91 }92 .tab.active {93 color: #66a6ff;94 }95 .tab-indicator {96 height: 6px;97 width: 160px;98 background: #66a6ff;99 border-radius: 3px;100 position: absolute;101 top: 320px;102 left: 360px;103 }104 105 /* Ad banner card */106 .ad-card {107 position: absolute;108 top: 360px;109 left: 0;110 width: 1080px;111 height: 190px;112 background: #ffffff;113 display: flex;114 align-items: center;115 box-shadow: 0 2px 0 rgba(0,0,0,0.3) inset;116 }117 .ad-image {118 width: 460px;119 height: 150px;120 margin-left: 24px;121 background: #E0E0E0;122 border: 1px solid #BDBDBD;123 display: flex;124 align-items: center;125 justify-content: center;126 color: #757575;127 font-size: 28px;128 }129 .ad-info {130 display: flex;131 align-items: center;132 gap: 24px;133 margin-left: 24px;134 flex: 1;135 }136 .ad-appicon {137 width: 110px;138 height: 110px;139 background: #E0E0E0;140 border: 1px solid #BDBDBD;141 display: flex;142 align-items: center;143 justify-content: center;144 color: #757575;145 font-size: 26px;146 border-radius: 20px;147 }148 .ad-text {149 flex: 1;150 color: #333;151 }152 .ad-text .name {153 font-size: 40px;154 color: #212121;155 margin-bottom: 8px;156 font-weight: 600;157 }158 .ad-text .sub {159 font-size: 30px;160 color: #616161;161 }162 .install-btn {163 margin-right: 24px;164 background: #2f7efc;165 color: #fff;166 border: none;167 border-radius: 40px;168 padding: 22px 46px;169 font-size: 34px;170 font-weight: 600;171 }172 173 /* Recording list item */174 .list-item {175 position: absolute;176 top: 590px;177 left: 0;178 width: 1080px;179 padding: 36px;180 box-sizing: border-box;181 border-top: 1px solid #2a2f36;182 border-bottom: 1px solid #2a2f36;183 display: flex;184 align-items: center;185 justify-content: space-between;186 }187 .li-left .name {188 font-size: 48px;189 color: #e6e6e6;190 }191 .li-left .meta {192 margin-top: 12px;193 font-size: 34px;194 color: #9aa0a6;195 }196 .li-right {197 text-align: right;198 color: #cfd8dc;199 }200 .li-right .duration {201 font-size: 40px;202 }203 .li-right .size {204 margin-top: 12px;205 font-size: 32px;206 color: #9aa0a6;207 }208 .kebab {209 margin-left: 18px;210 width: 50px;211 height: 50px;212 }213 .kebab circle { fill: #9aa0a6; }214 215 /* Player bar */216 .player {217 position: absolute;218 left: 0;219 bottom: 120px;220 width: 1080px;221 height: 300px;222 background: #232931;223 box-shadow: 0 -2px 0 rgba(0,0,0,0.3) inset;224 padding: 28px 40px;225 box-sizing: border-box;226 }227 .timeline {228 display: flex;229 align-items: center;230 justify-content: space-between;231 margin-bottom: 34px;232 }233 .time-box {234 width: 140px;235 height: 70px;236 border-radius: 12px;237 border: 3px solid #5fa2e7;238 color: #5fa2e7;239 display: flex;240 align-items: center;241 justify-content: center;242 font-size: 34px;243 }244 .time-text {245 font-size: 34px;246 color: #5fa2e7;247 }248 .slider {249 position: relative;250 height: 6px;251 background: #3b4652;252 flex: 1;253 margin: 0 24px;254 border-radius: 3px;255 }256 .slider .knob {257 position: absolute;258 top: -10px;259 left: 120px;260 width: 26px;261 height: 26px;262 background: #5fa2e7;263 border-radius: 50%;264 }265 266 .controls {267 display: flex;268 align-items: center;269 justify-content: space-between;270 padding: 10px 90px 0 90px;271 }272 .ctrl-group {273 display: flex;274 align-items: center;275 gap: 90px;276 }277 .ctrl-icon {278 width: 68px;279 height: 68px;280 stroke: #5fa2e7;281 fill: none;282 stroke-width: 5;283 }284 .play-btn {285 width: 160px;286 height: 160px;287 background: #7fb4ea;288 border-radius: 50%;289 display: flex;290 align-items: center;291 justify-content: center;292 box-shadow: 0 6px 12px rgba(0,0,0,0.4);293 }294 .play-btn svg { width: 70px; height: 70px; fill: white; }295 296 .speed {297 font-size: 40px;298 color: #6aaaf0;299 }300 301 /* Home indicator */302 .home-indicator {303 position: absolute;304 bottom: 36px;305 left: 50%;306 transform: translateX(-50%);307 width: 360px;308 height: 16px;309 background: #cfcfcf;310 border-radius: 10px;311 opacity: 0.8;312 }313</style>314</head>315<body>316<div id="render-target">317 318 <!-- Status Bar -->319 <div class="status-bar">320 <div>4:37</div>321 <div class="status-right">322 <!-- location dot -->323 <svg class="icon" viewBox="0 0 24 24">324 <circle cx="12" cy="12" r="4" fill="#cfd8dc"></circle>325 </svg>326 <!-- Wi-Fi -->327 <svg class="icon" viewBox="0 0 24 24">328 <path d="M2 9c5-4 15-4 20 0M6 12c3-3 9-3 12 0M10 15c2-2 4-2 6 0" />329 <circle cx="12" cy="18" r="1.5" fill="#cfd8dc"></circle>330 </svg>331 <!-- Battery -->332 <svg class="icon" viewBox="0 0 24 24">333 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" />334 <rect x="20" y="10" width="2" height="4" />335 <rect x="4" y="8" width="12" height="8" fill="#cfd8dc" stroke="none" />336 </svg>337 <!-- Menu dots -->338 <svg class="icon" viewBox="0 0 24 24">339 <circle cx="5" cy="12" r="2" />340 <circle cx="12" cy="12" r="2" />341 <circle cx="19" cy="12" r="2" />342 </svg>343 </div>344 </div>345 346 <!-- Header -->347 <div class="header">348 <div class="header-row">349 <div class="title">1 recording</div>350 <div class="toolbar-icons">351 <!-- Search -->352 <svg viewBox="0 0 24 24">353 <circle cx="10" cy="10" r="6" fill="none"></circle>354 <line x1="15" y1="15" x2="22" y2="22"></line>355 </svg>356 <!-- Sort lines -->357 <svg viewBox="0 0 24 24">358 <line x1="4" y1="6" x2="20" y2="6"></line>359 <line x1="8" y1="12" x2="20" y2="12"></line>360 <line x1="12" y1="18" x2="20" y2="18"></line>361 </svg>362 <!-- Kebab -->363 <svg viewBox="0 0 24 24">364 <circle cx="12" cy="5" r="2.2" fill="#cfd8dc" stroke="none"></circle>365 <circle cx="12" cy="12" r="2.2" fill="#cfd8dc" stroke="none"></circle>366 <circle cx="12" cy="19" r="2.2" fill="#cfd8dc" stroke="none"></circle>367 </svg>368 </div>369 </div>370 </div>371 372 <!-- Tabs -->373 <div class="tabs">374 <div class="tab">RECORD</div>375 <div class="tab active">LISTEN</div>376 </div>377 <div class="tab-indicator"></div>378 379 <!-- Ad banner -->380 <div class="ad-card">381 <div class="ad-image">[IMG: Ad Banner]</div>382 <div class="ad-info">383 <div class="ad-appicon">[IMG: App Icon]</div>384 <div class="ad-text">385 <div class="name">Kuku FM</div>386 <div class="sub">4.5 ★ FREE</div>387 </div>388 <button class="install-btn">INSTALL</button>389 </div>390 </div>391 392 <!-- Recording list item -->393 <div class="list-item">394 <div class="li-left">395 <div class="name">MY Call.m4a</div>396 <div class="meta">December 12, 11:32 AM</div>397 </div>398 <div style="display:flex; align-items:flex-start;">399 <div class="li-right">400 <div class="duration">00:14</div>401 <div class="size">0.2 MB</div>402 </div>403 <svg class="kebab" viewBox="0 0 24 24">404 <circle cx="12" cy="4" r="2" />405 <circle cx="12" cy="12" r="2" />406 <circle cx="12" cy="20" r="2" />407 </svg>408 </div>409 </div>410 411 <!-- Player -->412 <div class="player">413 <div class="timeline">414 <div class="time-box">00:00</div>415 <div class="slider">416 <div class="knob"></div>417 </div>418 <div class="time-text">00:00</div>419 </div>420 <div class="controls">421 <div class="ctrl-group">422 <!-- repeat -->423 <svg class="ctrl-icon" viewBox="0 0 24 24">424 <path d="M7 7h7l-2-2m2 2-2 2M17 17H10l2 2m-2-2 2-2M7 11a4 4 0 0 1 4-4M17 13a4 4 0 0 1-4 4" />425 </svg>426 <!-- previous -->427 <svg class="ctrl-icon" viewBox="0 0 24 24">428 <polygon points="15,5 7,12 15,19" fill="none"></polygon>429 </svg>430 </div>431 432 <div class="play-btn">433 <svg viewBox="0 0 24 24">434 <polygon points="6,4 20,12 6,20"></polygon>435 </svg>436 </div>437 438 <div class="ctrl-group">439 <!-- next -->440 <svg class="ctrl-icon" viewBox="0 0 24 24">441 <polygon points="9,5 17,12 9,19" fill="none"></polygon>442 </svg>443 <!-- placeholder spacing -->444 <div class="speed">1x</div>445 </div>446 </div>447 </div>448 449 <div class="home-indicator"></div>450</div>451</body>452</html>