GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>URecorder Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #0D0F12; color: #DADADA;12 font-family: Arial, Helvetica, sans-serif;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute; top: 0; left: 0;18 width: 1080px; height: 96px;19 background: #0B0B0D;20 display: flex; align-items: center;21 padding: 0 32px; box-sizing: border-box;22 }23 .status-bar .time { font-size: 36px; font-weight: 600; color: #EDEDED; }24 .status-right { margin-left: auto; display: flex; gap: 28px; align-items: center; }25 .status-icon svg { width: 38px; height: 38px; fill: none; stroke: #EDEDED; stroke-width: 3; }26 27 /* Header */28 .app-header {29 position: absolute; top: 96px; left: 0;30 width: 1080px; height: 130px;31 display: flex; align-items: center;32 padding: 0 36px; box-sizing: border-box;33 background: #0D0F12;34 border-bottom: 2px solid #7B2C21;35 }36 .brand { font-size: 54px; font-weight: 700; letter-spacing: 0.5px; color: #BEBEBE; }37 .brand .u { color: #E35A2E; }38 .header-actions { margin-left: auto; display: flex; gap: 34px; }39 .header-btn {40 width: 64px; height: 64px; border-radius: 16px;41 background: #1C1F24; display: flex; align-items: center; justify-content: center;42 }43 .header-btn svg { width: 38px; height: 38px; stroke: #D5D5D5; stroke-width: 3; fill: none; }44 45 /* Notice card */46 .notice {47 position: absolute; top: 246px; left: 32px;48 width: 1016px; height: 260px;49 background: #C44A2A; border-radius: 24px;50 display: flex; align-items: center; justify-content: space-between;51 padding: 32px; box-sizing: border-box;52 }53 .notice .title { font-size: 46px; font-weight: 800; color: #EDEDED; margin-bottom: 14px; }54 .notice .desc { font-size: 34px; color: #F2F2F2; opacity: 0.92; max-width: 700px; }55 .pill {56 background: #E5E5E5; color: #2B2B2B;57 border: none; border-radius: 36px;58 padding: 18px 34px; font-size: 36px; font-weight: 700;59 }60 61 /* List header */62 .list-header {63 position: absolute; top: 540px; left: 32px;64 width: 1016px; height: 80px; display: flex; align-items: center;65 color: #A9A9A9; font-size: 38px; font-weight: 700;66 }67 .list-header .controls { margin-left: auto; display: flex; gap: 36px; }68 .control-icon { width: 60px; height: 60px; border-radius: 14px; background: #1A1D21; display: flex; align-items: center; justify-content: center; }69 .control-icon svg { width: 36px; height: 36px; stroke: #CFCFCF; stroke-width: 3; fill: none; }70 71 /* Recording cards */72 .record-card {73 position: absolute; left: 32px; width: 1016px; height: 188px;74 background: #1F2227; border-radius: 36px;75 display: flex; align-items: center; box-sizing: border-box;76 padding: 24px 32px; gap: 26px;77 }78 .record-1 { top: 640px; }79 .record-2 { top: 860px; }80 .wave {81 width: 140px; height: 140px; border-radius: 28px; background: #191C20;82 display: flex; align-items: center; justify-content: center;83 }84 .wave svg { width: 70px; height: 70px; fill: #E35A2E; }85 .rec-info { flex: 1; }86 .rec-name { font-size: 40px; font-weight: 700; color: #DCDCDC; }87 .rec-meta { margin-top: 8px; font-size: 30px; color: #A7A7A7; }88 .rec-right { width: 220px; display: flex; flex-direction: column; align-items: flex-end; gap: 18px; }89 .rec-date { font-size: 30px; color: #9A9A9A; }90 .dots { display: flex; gap: 8px; }91 .dots span { width: 10px; height: 10px; background: #BEBEBE; border-radius: 50%; opacity: 0.7; }92 93 /* Bottom sheet */94 .bottom-sheet {95 position: absolute; left: 0; bottom: 0;96 width: 1080px; height: 1180px;97 background: #26292F; border-top-left-radius: 40px; border-top-right-radius: 40px;98 box-shadow: 0 -14px 40px rgba(0,0,0,0.45);99 padding: 34px; box-sizing: border-box;100 }101 .sheet-header {102 display: flex; align-items: center;103 font-size: 46px; font-weight: 800; color: #FFFFFF;104 margin-bottom: 28px;105 }106 .sheet-header .title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }107 .sheet-header .action-icons { display: flex; gap: 24px; }108 .sheet-header .action-icons .btn {109 width: 70px; height: 70px; border-radius: 18px; background: #1E2126;110 display: flex; align-items: center; justify-content: center;111 }112 .sheet-header .action-icons svg { width: 40px; height: 40px; stroke: #DCDCDC; stroke-width: 3; fill: none; }113 114 .option {115 display: flex; align-items: center; gap: 28px;116 padding: 22px 10px; margin: 18px 0;117 }118 .option .ico-wrap {119 width: 100px; height: 100px; border-radius: 50%;120 background: #1C1F24; display: flex; align-items: center; justify-content: center;121 }122 .option .ico-wrap svg { width: 48px; height: 48px; stroke-width: 3; }123 .option .label { font-size: 42px; font-weight: 600; color: #EDEDED; }124 .accent { color: #E35A2E; stroke: #E35A2E; }125 126 /* Home indicator */127 .home-indicator {128 position: absolute; bottom: 22px; left: 50%;129 transform: translateX(-50%);130 width: 280px; height: 12px; background: #EAEAEA; border-radius: 10px; opacity: 0.85;131 }132</style>133</head>134<body>135<div id="render-target">136 137 <!-- Status bar -->138 <div class="status-bar">139 <div class="time">12:26</div>140 <div class="status-right">141 <div class="status-icon">142 <svg viewBox="0 0 24 24"><path d="M3 12h8M3 6h14M3 18h4"/></svg>143 </div>144 <div class="status-icon">145 <svg viewBox="0 0 24 24"><path d="M4 12l6 6 10-10"/></svg>146 </div>147 <div class="status-icon">148 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"/><path d="M20 20l-4-4"/></svg>149 </div>150 <div class="status-icon">151 <svg viewBox="0 0 24 24"><path d="M3 12l9-9 9 9-9 9-9-9z"/></svg>152 </div>153 <div class="status-icon">154 <svg viewBox="0 0 24 24"><path d="M2 12h2m3 0h2m3 0h2m3 0h2"/></svg>155 </div>156 <div class="status-icon">157 <svg viewBox="0 0 24 24"><path d="M20 8a4 4 0 00-8 0v8a4 4 0 008 0V8z"/></svg>158 </div>159 </div>160 </div>161 162 <!-- Header -->163 <div class="app-header">164 <div class="brand"><span class="u">U</span>Recorder</div>165 <div class="header-actions">166 <div class="header-btn">167 <!-- Trash -->168 <svg viewBox="0 0 24 24">169 <path d="M4 7h16"/><path d="M9 3h6l1 4H8l1-4z"/>170 <rect x="6" y="7" width="12" height="14" rx="2" ry="2"/>171 </svg>172 </div>173 <div class="header-btn">174 <!-- Chat bubble -->175 <svg viewBox="0 0 24 24">176 <path d="M4 5h16v10H8l-4 4V5z"/>177 </svg>178 </div>179 <div class="header-btn">180 <!-- Gear (simplified) -->181 <svg viewBox="0 0 24 24">182 <circle cx="12" cy="12" r="4"/>183 <path d="M12 2v4M12 18v4M2 12h4M18 12h4M5 5l3 3M16 16l3 3M19 5l-3 3M5 19l3-3"/>184 </svg>185 </div>186 </div>187 </div>188 189 <!-- Notice -->190 <div class="notice">191 <div>192 <div class="title">Notice</div>193 <div class="desc">Uninstalling URecorder will result in the loss of your recordings.</div>194 </div>195 <button class="pill">Got it</button>196 </div>197 198 <!-- List header -->199 <div class="list-header">200 <div>2 recordings</div>201 <div class="controls">202 <div class="control-icon">203 <!-- Search -->204 <svg viewBox="0 0 24 24">205 <circle cx="11" cy="11" r="7"/>206 <path d="M16 16l5 5"/>207 </svg>208 </div>209 <div class="control-icon">210 <!-- Sort -->211 <svg viewBox="0 0 24 24">212 <path d="M4 6h16M4 12h12M4 18h8"/>213 </svg>214 </div>215 <div class="control-icon">216 <!-- Checklist -->217 <svg viewBox="0 0 24 24">218 <path d="M4 6l2 2 3-3M4 12l2 2 3-3M4 18l2 2 3-3"/>219 <path d="M12 7h8M12 13h8M12 19h8"/>220 </svg>221 </div>222 </div>223 </div>224 225 <!-- Recording card 1 -->226 <div class="record-card record-1">227 <div class="wave">228 <svg viewBox="0 0 64 64">229 <rect x="2" y="20" width="6" height="24" rx="2"/>230 <rect x="12" y="14" width="6" height="36" rx="2"/>231 <rect x="22" y="10" width="6" height="44" rx="2"/>232 <rect x="32" y="14" width="6" height="36" rx="2"/>233 <rect x="42" y="20" width="6" height="24" rx="2"/>234 </svg>235 </div>236 <div class="rec-info">237 <div class="rec-name">URecorder_20231128_112418</div>238 <div class="rec-meta">01:09 1.07MB M4A</div>239 </div>240 <div class="rec-right">241 <div class="rec-date">11-28 11:24</div>242 <div class="dots"><span></span><span></span><span></span></div>243 </div>244 </div>245 246 <!-- Recording card 2 -->247 <div class="record-card record-2">248 <div class="wave">249 <svg viewBox="0 0 64 64">250 <rect x="2" y="24" width="6" height="16" rx="2"/>251 <rect x="12" y="18" width="6" height="28" rx="2"/>252 <rect x="22" y="12" width="6" height="40" rx="2"/>253 <rect x="32" y="18" width="6" height="28" rx="2"/>254 <rect x="42" y="24" width="6" height="16" rx="2"/>255 </svg>256 </div>257 <div class="rec-info">258 <div class="rec-name">URecorder_20231128_101953</div>259 <div class="rec-meta">00:15 251.75KB M4A</div>260 </div>261 <div class="rec-right">262 <div class="rec-date">11-28 10:19</div>263 <div class="dots"><span></span><span></span><span></span></div>264 </div>265 </div>266 267 <!-- Bottom sheet -->268 <div class="bottom-sheet">269 <div class="sheet-header">270 <div class="title">URecorder_20231128_10...</div>271 <div class="action-icons">272 <div class="btn">273 <!-- Share -->274 <svg viewBox="0 0 24 24">275 <circle cx="6" cy="12" r="3"/><circle cx="18" cy="6" r="3"/><circle cx="18" cy="18" r="3"/>276 <path d="M9 12l6-4M9 12l6 4"/>277 </svg>278 </div>279 <div class="btn">280 <!-- Delete -->281 <svg viewBox="0 0 24 24">282 <path d="M4 7h16"/><rect x="6" y="7" width="12" height="14" rx="2"/>283 </svg>284 </div>285 </div>286 </div>287 288 <!-- Options -->289 <div class="option">290 <div class="ico-wrap">291 <!-- Pencil -->292 <svg viewBox="0 0 24 24" class="accent">293 <path d="M4 20l5-1 9-9-4-4-9 9-1 5z"/>294 <path d="M14 5l4 4"/>295 </svg>296 </div>297 <div class="label">Rename</div>298 </div>299 300 <div class="option">301 <div class="ico-wrap">302 <!-- Scissors -->303 <svg viewBox="0 0 24 24" class="accent">304 <circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/>305 <path d="M8 7l12 10M8 17l12-10"/>306 </svg>307 </div>308 <div class="label">Trim</div>309 </div>310 311 <div class="option">312 <div class="ico-wrap">313 <!-- Microphone -->314 <svg viewBox="0 0 24 24" class="accent">315 <rect x="8" y="4" width="8" height="12" rx="4"/>316 <path d="M4 12a8 8 0 0016 0M12 20v3"/>317 </svg>318 </div>319 <div class="label">Continue recording</div>320 </div>321 322 <div class="option">323 <div class="ico-wrap">324 <!-- Bell -->325 <svg viewBox="0 0 24 24" class="accent">326 <path d="M12 3a5 5 0 015 5v5l2 3H5l2-3V8a5 5 0 015-5z"/>327 <circle cx="12" cy="20" r="2"/>328 </svg>329 </div>330 <div class="label">Set as ringtone</div>331 </div>332 333 <div class="option">334 <div class="ico-wrap">335 <!-- Chat bubble -->336 <svg viewBox="0 0 24 24" class="accent">337 <path d="M4 5h16v10H8l-4 4V5z"/>338 </svg>339 </div>340 <div class="label">Details</div>341 </div>342 343 <div class="option">344 <div class="ico-wrap">345 <!-- Cloud -->346 <svg viewBox="0 0 24 24" class="accent">347 <path d="M6 17a5 5 0 01.4-10A7 7 0 0120 10a4 4 0 010 8H6z"/>348 </svg>349 </div>350 <div class="label">Backup to Google Drive</div>351 </div>352 </div>353 354 <!-- Home indicator -->355 <div class="home-indicator"></div>356 357</div>358</body>359</html>