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 color: #fff;16 }17 18 /* Status bar */19 .status-bar {20 height: 64px;21 padding: 0 32px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #eaeaea;26 font-size: 32px;27 letter-spacing: 0.5px;28 }29 .status-right {30 display: flex;31 align-items: center;32 gap: 18px;33 }34 .status-right svg { width: 32px; height: 32px; fill: none; stroke: #eaeaea; stroke-width: 2; }35 36 /* App header */37 .header {38 height: 120px;39 padding: 0 40px;40 display: flex;41 align-items: center;42 justify-content: space-between;43 }44 .brand {45 font-size: 48px;46 font-weight: 800;47 letter-spacing: 0.5px;48 }49 .brand .u { color: #F1653E; }50 .header-icons {51 display: flex;52 gap: 28px;53 }54 .header-icons svg {55 width: 44px;56 height: 44px;57 fill: none;58 stroke: #eaeaea;59 stroke-width: 2.2;60 }61 62 /* Notice banner */63 .notice {64 margin: 8px 0 0 0;65 padding: 36px 40px;66 background: #D76345;67 display: flex;68 align-items: center;69 justify-content: space-between;70 }71 .notice h3 {72 margin: 0 0 16px 0;73 font-size: 42px;74 font-weight: 800;75 color: #fff;76 }77 .notice p {78 margin: 0;79 font-size: 28px;80 color: #ffece6;81 line-height: 1.3;82 max-width: 680px;83 }84 .notice .btn {85 background: #ffffff;86 color: #D76345;87 padding: 20px 34px;88 border-radius: 30px;89 font-weight: 700;90 font-size: 34px;91 box-shadow: 0 2px 0 rgba(0,0,0,0.1);92 }93 94 /* Toolbar row */95 .toolbar {96 padding: 26px 40px 8px 40px;97 display: flex;98 align-items: center;99 justify-content: space-between;100 }101 .toolbar .count {102 font-size: 34px;103 color: #9aa0a6;104 font-weight: 700;105 }106 .toolbar .tools {107 display: flex;108 gap: 36px;109 }110 .toolbar .tools svg {111 width: 44px; height: 44px;112 fill: none; stroke: #cfcfcf; stroke-width: 2.2;113 }114 115 /* Recording card */116 .record-card {117 margin: 8px 40px 0 40px;118 background: #1e1f22;119 border-radius: 24px;120 padding: 28px;121 display: flex;122 align-items: center;123 gap: 28px;124 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);125 }126 .record-thumb {127 width: 120px; height: 120px; border-radius: 18px;128 background: #2a2b2e;129 display: flex; align-items: center; justify-content: center;130 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);131 position: relative;132 }133 .record-content { flex: 1; }134 .record-title {135 font-size: 40px; font-weight: 800; color: #ffffff; margin: 2px 0 8px 0;136 }137 .record-meta {138 font-size: 26px; color: #9aa0a6;139 }140 .record-right {141 display: flex; align-items: center; gap: 28px;142 }143 .record-date {144 font-size: 26px; color: #c0c3c7;145 }146 .kebab {147 width: 12px; height: 40px; display: flex; flex-direction: column; justify-content: space-between; align-items: center;148 }149 .kebab span {150 width: 12px; height: 12px; background: #cfcfcf; border-radius: 50%;151 }152 153 /* Spacer to fill area */154 .spacer {155 height: 1300px;156 }157 158 /* Bottom system bar mimic */159 .bottom-bar {160 position: absolute;161 left: 0; right: 0; bottom: 0;162 height: 170px;163 background: #1d1f23;164 border-top-left-radius: 48px;165 border-top-right-radius: 48px;166 }167 .home-indicator {168 position: absolute;169 left: 50%; transform: translateX(-50%);170 bottom: 44px;171 width: 320px; height: 10px;172 background: #e6e6e6; border-radius: 8px;173 opacity: 0.9;174 }175 .bottom-left-dot {176 position: absolute; bottom: 74px; left: 80px;177 width: 48px; height: 48px; border-radius: 50%;178 background: #6f7380;179 box-shadow: inset 0 0 0 8px #383b40;180 }181 .bottom-right-icon {182 position: absolute; bottom: 64px; right: 76px;183 width: 54px; height: 54px;184 }185 .bottom-right-icon svg { width: 54px; height: 54px; }186</style>187</head>188<body>189<div id="render-target">190 191 <!-- Status bar -->192 <div class="status-bar">193 <div>3:46</div>194 <div class="status-right">195 <!-- signal -->196 <svg viewBox="0 0 24 24"><path d="M2 14h2v8H2zM7 10h2v12H7zM12 6h2v16h-2zM17 2h2v20h-2z"/></svg>197 <!-- battery -->198 <svg viewBox="0 0 28 20">199 <rect x="1" y="3" width="22" height="14" rx="2" ry="2"></rect>200 <rect x="24" y="7" width="3" height="6" rx="1"></rect>201 <rect x="3" y="5" width="16" height="10" fill="#eaeaea" stroke="none"></rect>202 </svg>203 </div>204 </div>205 206 <!-- Header -->207 <div class="header">208 <div class="brand"><span class="u">U</span>Recorder</div>209 <div class="header-icons">210 <!-- trash -->211 <svg viewBox="0 0 24 24">212 <path d="M3 6h18"/><path d="M9 6V4h6v2"/><path d="M6 6l1 14h10l1-14"/>213 </svg>214 <!-- chat bubble -->215 <svg viewBox="0 0 24 24">216 <path d="M4 5h16v12H8l-4 4z"/>217 <path d="M8 10h8M8 13h6"/>218 </svg>219 <!-- hex/settings -->220 <svg viewBox="0 0 24 24">221 <path d="M7 3l10 0 4 9-4 9-10 0-4-9z"/>222 <circle cx="12" cy="12" r="3" fill="#eaeaea" stroke="none"/>223 </svg>224 </div>225 </div>226 227 <!-- Notice banner -->228 <div class="notice">229 <div>230 <h3>Notice</h3>231 <p>Uninstalling URecorder will result in the loss of your recordings.</p>232 </div>233 <div class="btn">Got it</div>234 </div>235 236 <!-- Toolbar -->237 <div class="toolbar">238 <div class="count">1 recording</div>239 <div class="tools">240 <!-- search -->241 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"/><path d="M20 20l-4.5-4.5"/></svg>242 <!-- list/sort -->243 <svg viewBox="0 0 24 24">244 <path d="M6 6h12M6 12h12M6 18h12"/>245 <path d="M4 6h0M4 12h0M4 18h0" stroke="#cfcfcf"/>246 </svg>247 <!-- checklist -->248 <svg viewBox="0 0 24 24">249 <path d="M5 5h14M5 11h14M5 17h14"/>250 <path d="M3 11l2 2 3-4" stroke="#D76345"/>251 </svg>252 </div>253 </div>254 255 <!-- Recording card -->256 <div class="record-card">257 <div class="record-thumb">258 <!-- simple orange waveform icon -->259 <svg viewBox="0 0 80 80" width="60" height="60">260 <g stroke="#F1653E" stroke-width="6" stroke-linecap="round">261 <path d="M10 40 v18"/>262 <path d="M22 30 v30"/>263 <path d="M34 20 v40"/>264 <path d="M46 30 v30"/>265 <path d="M58 40 v18"/>266 </g>267 </svg>268 </div>269 <div class="record-content">270 <div class="record-title">Data Analysis First speech</div>271 <div class="record-meta">00:04 78.66KB M4A</div>272 </div>273 <div class="record-right">274 <div class="record-date">11-09 15:12</div>275 <div class="kebab"><span></span><span></span><span></span></div>276 </div>277 </div>278 279 <div class="spacer"></div>280 281 <!-- Bottom system bar mimic -->282 <div class="bottom-bar">283 <div class="bottom-left-dot"></div>284 <div class="bottom-right-icon">285 <svg viewBox="0 0 24 24">286 <path d="M4 6h10M4 12h10M4 18h10" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>287 <path d="M18 18v-8" stroke="#F1653E" stroke-width="3" stroke-linecap="round"/>288 </svg>289 </div>290 <div class="home-indicator"></div>291 </div>292 293</div>294</body>295</html>