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; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #121212;15 border-radius: 0;16 box-shadow: none;17 font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;18 color: #EDEDED;19 }20 21 /* Status bar */22 .status-bar {23 height: 100px;24 background: #0E0E0E;25 display: flex;26 align-items: center;27 justify-content: space-between;28 padding: 0 36px;29 font-size: 36px;30 letter-spacing: 0.5px;31 }32 .status-icons {33 display: flex;34 align-items: center;35 gap: 22px;36 }37 .icon {38 width: 44px;39 height: 44px;40 display: inline-flex;41 align-items: center;42 justify-content: center;43 color: #DADADA;44 }45 .battery {46 display: flex; align-items: center; gap: 8px; font-size: 30px; color: #DADADA;47 }48 49 /* App bar */50 .app-bar {51 height: 140px;52 display: flex;53 align-items: center;54 justify-content: space-between;55 padding: 0 36px;56 background: #121212;57 }58 .brand {59 display: flex; align-items: baseline; gap: 4px;60 font-weight: 700;61 font-size: 58px;62 }63 .brand .u { color: #FF6A3D; }64 .toolbar-icons { display: flex; align-items: center; gap: 26px; }65 .round-icon {66 width: 74px; height: 74px; border-radius: 18px;67 background: #1E1E1E; display: flex; align-items: center; justify-content: center;68 }69 70 /* Notice banner */71 .notice {72 background: #E95537;73 border-bottom: 6px solid #C8442B;74 padding: 36px;75 display: flex;76 align-items: center;77 justify-content: space-between;78 }79 .notice-text { max-width: 720px; }80 .notice-title { font-size: 52px; font-weight: 800; margin: 4px 0 14px; }81 .notice-desc { font-size: 34px; color: #FFEFEA; line-height: 1.35; }82 .notice-btn {83 background: #FFFFFF; color: #E95537; font-weight: 700;84 padding: 26px 46px; border-radius: 999px; font-size: 38px; border: none;85 }86 87 /* List header */88 .list-header {89 padding: 24px 36px 18px;90 display: flex; align-items: center; justify-content: space-between;91 border-bottom: 2px solid #2A2A2A;92 }93 .list-title { font-size: 38px; color: #CFCFCF; }94 .list-controls { display: flex; align-items: center; gap: 26px; color: #CFCFCF; }95 .control-icon { width: 60px; height: 60px; border-radius: 12px; background: #1F1F1F; display: flex; align-items: center; justify-content: center; }96 97 /* Recording items */98 .recordings {99 padding: 20px 24px 0;100 }101 .rec-item {102 background: #1E1F23;103 border-radius: 30px;104 padding: 28px;105 margin: 18px 12px 26px;106 display: flex; align-items: center; justify-content: space-between;107 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);108 }109 .rec-left { display: flex; align-items: center; gap: 28px; }110 .wavebox {111 width: 130px; height: 130px; border-radius: 24px;112 background: #2A2B31; display: flex; align-items: center; justify-content: center;113 }114 .rec-text { display: flex; flex-direction: column; gap: 10px; }115 .rec-title { font-size: 40px; font-weight: 700; color: #F1F1F3; }116 .rec-meta { font-size: 32px; color: #9FA3A7; }117 .rec-right { display: flex; align-items: center; gap: 36px; }118 .rec-date { font-size: 32px; color: #C6C6C8; }119 .more-dots { width: 16px; height: 80px; display: grid; grid-template-rows: repeat(3, 1fr); align-content: center; gap: 12px; }120 .more-dots span { width: 16px; height: 16px; background: #7D7F85; border-radius: 50%; display: block; }121 122 /* Ad banner */123 .ad-banner {124 margin: 30px 0 0;125 background: #FFFFFF;126 color: #1E1E1E;127 display: flex; align-items: center; justify-content: space-between;128 padding: 22px 26px;129 box-shadow: 0 2px 0 rgba(0,0,0,0.2) inset;130 }131 .ad-left { display: flex; align-items: center; gap: 24px; }132 .img-ph {133 width: 90px; height: 90px; background: #E0E0E0; border: 1px solid #BDBDBD;134 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px; border-radius: 12px;135 }136 .ad-text { font-size: 30px; color: #333; max-width: 700px; }137 .ad-btn {138 background: #1E8CFF; color: #fff; border: none;139 padding: 22px 36px; border-radius: 10px; font-size: 34px; font-weight: 700;140 }141 142 /* Bottom area / gesture bar mock */143 .bottom-area {144 position: absolute; left: 0; right: 0; bottom: 0;145 height: 210px; background: linear-gradient(#121212, #141414);146 padding-top: 28px;147 }148 .gesture-pill {149 width: 180px; height: 12px; background: #E6E6E6; border-radius: 10px;150 margin: 0 auto;151 }152 .bottom-nav {153 margin: 36px 24px 0;154 background: #1C1C1C; border-radius: 40px;155 height: 120px; display: flex; align-items: center; justify-content: flex-end; padding: 0 40px;156 }157 .bottom-nav .menu-icon { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; }158</style>159</head>160<body>161<div id="render-target">162 163 <!-- Status bar -->164 <div class="status-bar">165 <div class="sb-left">12:26</div>166 <div class="status-icons">167 <span class="icon" title="signal">168 <svg width="44" height="44" viewBox="0 0 24 24">169 <path d="M2 20h2v-4H2v4zm4 0h2v-7H6v7zm4 0h2v-10h-2v10zm4 0h2v-13h-2v13zm4 0h2V5h-2v15z" fill="#DADADA"/>170 </svg>171 </span>172 <span class="icon" title="wifi">173 <svg width="44" height="44" viewBox="0 0 24 24">174 <path d="M12 18a2 2 0 1 0 .001 3.999A2 2 0 0 0 12 18z" fill="#DADADA"/>175 <path d="M3 12.5a12 12 0 0 1 18 0l-1.8 1.6a9 9 0 0 0-14.4 0L3 12.5z" fill="#DADADA"/>176 <path d="M6.2 15.3a8 8 0 0 1 11.6 0l-1.6 1.4a6 6 0 0 0-8.4 0l-1.6-1.4z" fill="#DADADA"/>177 </svg>178 </span>179 <div class="battery">180 <svg width="44" height="44" viewBox="0 0 24 24">181 <rect x="2" y="6" width="18" height="12" rx="2" fill="none" stroke="#DADADA" stroke-width="2"/>182 <rect x="4" y="8" width="12" height="8" fill="#DADADA"/>183 <rect x="20" y="10" width="2" height="4" rx="1" fill="#DADADA"/>184 </svg>185 <span>95%</span>186 </div>187 </div>188 </div>189 190 <!-- App bar -->191 <div class="app-bar">192 <div class="brand"><span class="u">U</span><span>Recorder</span></div>193 <div class="toolbar-icons">194 <div class="round-icon" title="trash">195 <svg width="40" height="40" viewBox="0 0 24 24">196 <path d="M7 4h10l-1 2H8L7 4zm1 4h8v12H8V8z" fill="#DADADA"/>197 </svg>198 </div>199 <div class="round-icon" title="chat">200 <svg width="40" height="40" viewBox="0 0 24 24">201 <path d="M4 5h16v11H8l-4 4V5z" fill="#DADADA"/>202 </svg>203 </div>204 <div class="round-icon" title="settings">205 <svg width="40" height="40" viewBox="0 0 24 24">206 <path d="M12 8a4 4 0 1 0 .001 8A4 4 0 0 0 12 8zm9 4-2 1 .3 2.3-2 1.6-2.3-.6-1 2-2.4-.2-1.4-2-2.3.6-1.8-1.7.4-2.3-2-1.1.9-2.2 2.3-.4.7-2.2 2.2.5 1.7-1.5 1.9 1.4-.1 2.3 2.2.8z" fill="#DADADA"/>207 </svg>208 </div>209 </div>210 </div>211 212 <!-- Notice banner -->213 <div class="notice">214 <div class="notice-text">215 <div class="notice-title">Notice</div>216 <div class="notice-desc">Uninstalling URecorder will result in the loss of your recordings.</div>217 </div>218 <button class="notice-btn">Got it</button>219 </div>220 221 <!-- List header -->222 <div class="list-header">223 <div class="list-title">2 recordings</div>224 <div class="list-controls">225 <div class="control-icon" title="search">226 <svg width="36" height="36" viewBox="0 0 24 24">227 <circle cx="11" cy="11" r="6" stroke="#CFCFCF" stroke-width="2" fill="none"/>228 <path d="M20 20l-4.5-4.5" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round"/>229 </svg>230 </div>231 <div class="control-icon" title="list">232 <svg width="36" height="36" viewBox="0 0 24 24">233 <path d="M4 6h16v2H4zM4 11h16v2H4zM4 16h16v2H4z" fill="#CFCFCF"/>234 </svg>235 </div>236 <div class="control-icon" title="edit">237 <svg width="36" height="36" viewBox="0 0 24 24">238 <path d="M3 17.2V21h3.8L17.7 10.1 14 6.4 3 17.2z" fill="#CFCFCF"/>239 </svg>240 </div>241 </div>242 </div>243 244 <!-- Recording items -->245 <div class="recordings">246 <div class="rec-item">247 <div class="rec-left">248 <div class="wavebox" aria-label="waveform icon">249 <svg width="80" height="80" viewBox="0 0 24 24">250 <rect x="2" y="9" width="2" height="6" fill="#FF6A3D"/>251 <rect x="6" y="6" width="2" height="12" fill="#FF6A3D"/>252 <rect x="10" y="4" width="2" height="16" fill="#FF6A3D"/>253 <rect x="14" y="6" width="2" height="12" fill="#FF6A3D"/>254 <rect x="18" y="9" width="2" height="6" fill="#FF6A3D"/>255 </svg>256 </div>257 <div class="rec-text">258 <div class="rec-title">URecorder_20231128_112418</div>259 <div class="rec-meta">01:09 1.07MB M4A</div>260 </div>261 </div>262 <div class="rec-right">263 <div class="rec-date">11-28 11:24</div>264 <div class="more-dots"><span></span><span></span><span></span></div>265 </div>266 </div>267 268 <div class="rec-item">269 <div class="rec-left">270 <div class="wavebox" aria-label="waveform icon">271 <svg width="80" height="80" viewBox="0 0 24 24">272 <rect x="2" y="9" width="2" height="6" fill="#FF6A3D"/>273 <rect x="6" y="6" width="2" height="12" fill="#FF6A3D"/>274 <rect x="10" y="4" width="2" height="16" fill="#FF6A3D"/>275 <rect x="14" y="6" width="2" height="12" fill="#FF6A3D"/>276 <rect x="18" y="9" width="2" height="6" fill="#FF6A3D"/>277 </svg>278 </div>279 <div class="rec-text">280 <div class="rec-title">URecorder_20231128_101953</div>281 <div class="rec-meta">00:15 251.75KB M4A</div>282 </div>283 </div>284 <div class="rec-right">285 <div class="rec-date">11-28 10:19</div>286 <div class="more-dots"><span></span><span></span><span></span></div>287 </div>288 </div>289 </div>290 291 <!-- Ad banner -->292 <div class="ad-banner">293 <div class="ad-left">294 <div class="img-ph">[IMG: Brand Logo]</div>295 <div class="ad-text">Transform your film's look with FilmConvert Nitrate + Halation! ✨</div>296 </div>297 <button class="ad-btn">Learn more</button>298 </div>299 300 <!-- Bottom area -->301 <div class="bottom-area">302 <div class="gesture-pill"></div>303 <div class="bottom-nav">304 <div class="menu-icon" title="menu">305 <svg width="44" height="44" viewBox="0 0 24 24">306 <path d="M4 6h16v2H4zM4 11h12v2H4zM4 16h8v2H4z" fill="#FF6A3D"/>307 </svg>308 </div>309 </div>310 </div>311 312</div>313</body>314</html>