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>URecorder 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: #121212;15 border-radius: 42px;16 box-shadow: 0 10px 40px rgba(0,0,0,0.35);17 color: #fff;18 }19 20 /* Status bar */21 .statusbar {22 position: absolute;23 top: 0;24 left: 0;25 width: 100%;26 height: 90px;27 color: #EDEDED;28 font-weight: 600;29 }30 .statusbar .time {31 position: absolute;32 left: 36px;33 top: 28px;34 font-size: 40px;35 letter-spacing: 0.5px;36 }37 .statusbar .right-icons {38 position: absolute;39 right: 36px;40 top: 22px;41 display: flex;42 align-items: center;43 gap: 28px;44 }45 .statusbar svg { width: 40px; height: 40px; }46 47 /* App bar */48 .appbar {49 position: absolute;50 top: 90px;51 left: 0;52 width: 100%;53 padding: 0 36px;54 height: 120px;55 display: flex;56 align-items: center;57 justify-content: space-between;58 }59 .logo {60 font-size: 58px;61 font-weight: 800;62 letter-spacing: 0.5px;63 }64 .logo .u { color: #F26A3D; }65 .app-actions {66 display: flex;67 gap: 36px;68 }69 .app-actions svg {70 width: 56px; height: 56px;71 fill: none; stroke: #FFFFFF; stroke-width: 4;72 }73 74 /* Notice banner */75 .notice {76 position: absolute;77 top: 210px;78 left: 36px;79 width: 1008px;80 height: 240px;81 background: #D56343;82 border-radius: 20px;83 padding: 36px;84 box-sizing: border-box;85 }86 .notice .title {87 font-size: 54px;88 font-weight: 800;89 margin-bottom: 14px;90 color: #fff;91 }92 .notice .desc {93 font-size: 32px;94 line-height: 42px;95 color: #FFEDE6;96 max-width: 700px;97 }98 .notice .cta {99 position: absolute;100 right: 36px;101 top: 86px;102 background: #FFFFFF;103 color: #D56343;104 border: none;105 border-radius: 36px;106 padding: 22px 48px;107 font-size: 40px;108 font-weight: 800;109 box-shadow: 0 8px 18px rgba(0,0,0,0.15);110 }111 112 /* Toolbar */113 .toolbar {114 position: absolute;115 top: 480px;116 left: 36px;117 width: 1008px;118 height: 76px;119 display: flex;120 align-items: center;121 justify-content: space-between;122 }123 .toolbar .count {124 font-size: 42px;125 color: #AEB4BE;126 font-weight: 700;127 }128 .toolbar .tools {129 display: flex; gap: 36px; align-items: center;130 }131 .toolbar .tools svg {132 width: 60px; height: 60px; stroke: #C7CBD3; fill: none; stroke-width: 4;133 }134 135 /* Recording item */136 .record-card {137 position: absolute;138 top: 570px;139 left: 36px;140 width: 1008px;141 background: #26272B;142 border-radius: 36px;143 padding: 30px 34px;144 box-sizing: border-box;145 display: flex;146 align-items: center;147 gap: 34px;148 }149 .record-thumb {150 width: 120px;151 height: 120px;152 background: #E0E0E0;153 border: 1px solid #BDBDBD;154 border-radius: 20px;155 color: #757575;156 display: flex; align-items: center; justify-content: center;157 font-size: 24px;158 text-align: center;159 }160 .record-info {161 flex: 1;162 }163 .record-title {164 font-size: 46px;165 font-weight: 800;166 color: #FFFFFF;167 margin-bottom: 10px;168 }169 .record-meta {170 font-size: 28px;171 color: #B6BAC3;172 }173 .record-right {174 display: flex;175 align-items: center;176 gap: 28px;177 margin-left: 20px;178 }179 .record-date {180 font-size: 28px;181 color: #B6BAC3;182 white-space: nowrap;183 }184 .ellipsis svg { width: 32px; height: 70px; }185 186 /* Bottom area */187 .bottom-bar {188 position: absolute;189 bottom: 24px;190 left: 24px;191 width: 1032px;192 height: 180px;193 background: #1E1F23;194 border-radius: 40px;195 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);196 }197 .bottom-bar .left-dot {198 position: absolute;199 left: 64px;200 top: 68px;201 width: 60px; height: 60px;202 border-radius: 50%;203 background: #777B85;204 display: flex; align-items: center; justify-content: center;205 }206 .bottom-bar .left-dot::after {207 content: "";208 width: 18px; height: 18px; border-radius: 50%; background: #2D2F34;209 }210 .bottom-bar .gesture {211 position: absolute;212 left: 50%;213 transform: translateX(-50%);214 bottom: 36px;215 width: 360px;216 height: 10px;217 background: #E5E5E5;218 border-radius: 10px;219 opacity: 0.85;220 }221 .bottom-bar .right-icon {222 position: absolute;223 right: 64px;224 top: 62px;225 }226 .bottom-bar .right-icon svg { width: 70px; height: 70px; stroke-width: 6; }227 .bottom-bar .right-icon .accent { stroke: #F26A3D; }228 229</style>230</head>231<body>232<div id="render-target">233 234 <!-- Status Bar -->235 <div class="statusbar">236 <div class="time">3:40</div>237 <div class="right-icons">238 <!-- Cellular -->239 <svg viewBox="0 0 24 24"><path d="M3 21h3v-4H3v4zm5 0h3v-8H8v8zm5 0h3v-12h-3v12zm5 0h3V3h-3v18z" fill="#EDEDED"/></svg>240 <!-- Battery -->241 <svg viewBox="0 0 28 20">242 <rect x="1" y="3" width="22" height="14" rx="2" ry="2" fill="none" stroke="#EDEDED" stroke-width="2"></rect>243 <rect x="3" y="5" width="18" height="10" rx="1" ry="1" fill="#EDEDED"></rect>244 <rect x="24" y="7" width="3" height="6" rx="1" fill="#EDEDED"></rect>245 </svg>246 </div>247 </div>248 249 <!-- App Bar -->250 <div class="appbar">251 <div class="logo"><span class="u">U</span>Recorder</div>252 <div class="app-actions">253 <!-- Trash/Recycle -->254 <svg viewBox="0 0 24 24">255 <path d="M5 7h14M10 3h4l1 2h-6l1-2zM7 7l1 12h8l1-12" stroke-linecap="round" stroke-linejoin="round"></path>256 </svg>257 <!-- Chat bubble -->258 <svg viewBox="0 0 24 24">259 <path d="M4 5h16v10H9l-5 4V5z" stroke-linejoin="round"></path>260 </svg>261 <!-- Hex settings (simple hex) -->262 <svg viewBox="0 0 24 24">263 <path d="M8 3l8 0 4 5-4 5-8 0-4-5 4-5z" stroke-linejoin="round"></path>264 </svg>265 </div>266 </div>267 268 <!-- Notice Banner -->269 <div class="notice">270 <div class="title">Notice</div>271 <div class="desc">Uninstalling URecorder will result in the loss of your recordings.</div>272 <button class="cta">Got it</button>273 </div>274 275 <!-- Toolbar -->276 <div class="toolbar">277 <div class="count">1 recording</div>278 <div class="tools">279 <!-- Search -->280 <svg viewBox="0 0 24 24">281 <circle cx="10" cy="10" r="6"></circle>282 <path d="M14 14l6 6"></path>283 </svg>284 <!-- Sort / list -->285 <svg viewBox="0 0 24 24">286 <path d="M4 6h16M4 12h12M4 18h8" stroke-linecap="round"></path>287 </svg>288 <!-- Checklist / edit -->289 <svg viewBox="0 0 24 24">290 <rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect>291 <path d="M7 10l3 3 7-7" stroke-linecap="round" stroke-linejoin="round"></path>292 </svg>293 </div>294 </div>295 296 <!-- Recording Card -->297 <div class="record-card">298 <div class="record-thumb">[IMG: Audio Wave Icon]</div>299 <div class="record-info">300 <div class="record-title">Data Analysis First speech</div>301 <div class="record-meta">00:04 78.66KB M4A</div>302 </div>303 <div class="record-right">304 <div class="record-date">11-09 15:12</div>305 <div class="ellipsis">306 <svg viewBox="0 0 8 24" fill="#B6BAC3">307 <circle cx="4" cy="4" r="2"></circle>308 <circle cx="4" cy="12" r="2"></circle>309 <circle cx="4" cy="20" r="2"></circle>310 </svg>311 </div>312 </div>313 </div>314 315 <!-- Bottom Bar -->316 <div class="bottom-bar">317 <div class="left-dot"></div>318 <div class="right-icon">319 <svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF">320 <path d="M4 6h12M4 12h12M4 18h8" stroke-linecap="round"></path>321 <path class="accent" d="M18 18v-6" stroke-linecap="round"></path>322 </svg>323 </div>324 <div class="gesture"></div>325 </div>326 327</div>328</body>329</html>