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>Audio Player 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; height: 2400px;11 position: relative; overflow: hidden;12 background: #14161B; color: #EAEAF0;13 border-radius: 32px;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute; top: 0; left: 0; right: 0;19 height: 120px; padding: 0 36px;20 display: flex; align-items: center; justify-content: space-between;21 color: #EDEEF3; font-size: 42px; letter-spacing: 0.5px;22 }23 .status-icons { display: flex; align-items: center; gap: 22px; }24 .dot {25 width: 28px; height: 28px; border-radius: 50%; background: #EDEEF3; opacity: 0.8;26 }27 .battery {28 width: 58px; height: 28px; border: 3px solid #EDEEF3; border-radius: 6px; position: relative;29 }30 .battery::after {31 content: ""; position: absolute; right: -10px; top: 8px;32 width: 8px; height: 12px; border-radius: 2px; background: #EDEEF3;33 }34 .battery .lvl { position: absolute; left: 4px; top: 4px; height: 18px; width: 38px; background: #EDEEF3; }35 36 /* App bar */37 .app-bar {38 position: absolute; top: 120px; left: 0; right: 0;39 height: 120px; padding: 0 24px;40 display: flex; align-items: center; justify-content: space-between;41 }42 .icon-btn {43 width: 96px; height: 96px; display: flex; align-items: center; justify-content: center;44 color: #D7D9E3; border-radius: 48px;45 }46 .actions { display: flex; align-items: center; gap: 24px; }47 48 /* Main card */49 .card {50 position: absolute; left: 24px; right: 24px; top: 240px;51 height: 1180px; background: #0D1018; border-radius: 64px;52 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);53 }54 .card-inner { position: absolute; left: 60px; top: 70px; right: 60px; }55 .title { font-size: 86px; font-weight: 600; color: #EDEEF3; letter-spacing: 0.2px; }56 .subtitle { margin-top: 12px; font-size: 40px; color: #B8BCD1; }57 58 /* Center divider and waveform */59 .divider {60 position: absolute; left: 50%; transform: translateX(-50%);61 top: 520px; width: 4px; height: 600px; background: #6D6F79; border-radius: 2px;62 }63 .wave {64 position: absolute; left: 58%; top: 720px;65 width: 420px; height: 220px; display: flex; align-items: flex-end; gap: 16px;66 }67 .bar {68 width: 12px; background: #8A8E9B; border-radius: 8px;69 }70 .bar.blue { background: #6D86FF; }71 72 /* Segmented control */73 .segmented {74 position: absolute; left: 140px; right: 140px; top: 1460px;75 display: flex; gap: 24px;76 }77 .pill {78 display: flex; align-items: center; gap: 20px;79 padding: 26px 44px; border-radius: 48px; font-size: 44px;80 background: rgba(34,36,48,0.9); color: #EDEEF3;81 }82 .pill.secondary { background: rgba(22,24,33,0.9); color: #D0D3DF; }83 84 /* Progress section */85 .progress-wrap {86 position: absolute; left: 100px; right: 100px; top: 1640px;87 }88 .progress-line {89 height: 12px; border-radius: 8px; background: #2A2D3A; position: relative;90 overflow: visible;91 }92 .progress-line .fill { height: 12px; width: 58%; background: #7E8FEA; border-radius: 8px; }93 .progress-line .thumb {94 position: absolute; left: -6px; top: -10px; width: 32px; height: 32px;95 border-radius: 50%; background: #C9C6E8; box-shadow: 0 0 0 4px rgba(201,198,232,0.2);96 }97 .time-row {98 margin-top: 22px; display: flex; justify-content: space-between; color: #D6DAE8; font-size: 40px;99 }100 101 /* Player controls */102 .controls {103 position: absolute; left: 80px; right: 80px; top: 1780px;104 display: flex; align-items: center; justify-content: center; gap: 64px;105 }106 .ctrl {107 width: 240px; height: 240px; border-radius: 50%;108 background: #202331; display: flex; align-items: center; justify-content: center;109 position: relative;110 }111 .ctrl.play { background: #D8D6F0; color: #1C1E26; }112 .ctrl svg { width: 120px; height: 120px; }113 .ctrl .num {114 position: absolute; bottom: 44px; right: 84px; font-size: 44px; color: #D2D6E7;115 }116 .ctrl.right .num { right: 80px; }117 118 /* Bottom gesture bar */119 .home-indicator {120 position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);121 width: 300px; height: 12px; background: #F1F2F6; border-radius: 12px; opacity: 0.85;122 }123 124 /* Overlay menu */125 .menu-overlay {126 position: absolute; right: 80px; top: 290px;127 width: 680px; background: #4A4D57; color: #F2F4FB;128 border-radius: 36px; box-shadow: 0 24px 70px rgba(0,0,0,0.5);129 padding: 40px 44px; font-size: 44px; line-height: 1.8;130 }131 .menu-item { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }132 .menu-item:last-child { border-bottom: none; }133</style>134</head>135<body>136<div id="render-target">137 138 <!-- Status bar -->139 <div class="status-bar">140 <div>6:00</div>141 <div class="status-icons">142 <div class="dot" style="background:#C9CBD8;"></div>143 <div class="dot" style="background:#FFFFFF;"></div>144 <div class="dot" style="background:#FFFFFF; opacity:0.65;"></div>145 <div class="dot" style="background:#FFFFFF; opacity:0.45;"></div>146 <div class="battery"><div class="lvl"></div></div>147 </div>148 </div>149 150 <!-- App bar -->151 <div class="app-bar">152 <div class="icon-btn">153 <!-- Back arrow -->154 <svg viewBox="0 0 48 48" width="72" height="72" fill="#D7D9E3">155 <path d="M28 8 L12 24 L28 40" stroke="#D7D9E3" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>156 </svg>157 </div>158 <div class="actions">159 <div class="icon-btn">160 <!-- Share (node with two branches) -->161 <svg viewBox="0 0 48 48" width="72" height="72" stroke="#D7D9E3" stroke-width="4" fill="none" stroke-linecap="round">162 <circle cx="10" cy="24" r="5"></circle>163 <circle cx="38" cy="10" r="5"></circle>164 <circle cx="38" cy="38" r="5"></circle>165 <path d="M15 23 L33 13 M15 25 L33 35"></path>166 </svg>167 </div>168 <div class="icon-btn">169 <!-- Scissors -->170 <svg viewBox="0 0 48 48" width="72" height="72" stroke="#D7D9E3" stroke-width="4" fill="none" stroke-linecap="round">171 <circle cx="12" cy="36" r="6"></circle>172 <circle cx="12" cy="12" r="6"></circle>173 <path d="M18 30 L38 20 M18 18 L38 28"></path>174 </svg>175 </div>176 <div class="icon-btn">177 <!-- Search -->178 <svg viewBox="0 0 48 48" width="72" height="72" stroke="#D7D9E3" stroke-width="4" fill="none" stroke-linecap="round">179 <circle cx="20" cy="20" r="12"></circle>180 <path d="M31 31 L44 44"></path>181 </svg>182 </div>183 <div class="icon-btn">184 <!-- More vertical -->185 <svg viewBox="0 0 48 48" width="72" height="72" fill="#D7D9E3">186 <circle cx="24" cy="10" r="4"></circle>187 <circle cx="24" cy="24" r="4"></circle>188 <circle cx="24" cy="38" r="4"></circle>189 </svg>190 </div>191 </div>192 </div>193 194 <!-- Main card -->195 <div class="card">196 <div class="card-inner">197 <div class="title">Wednesday</div>198 <div class="subtitle">Thu, Jul 6 • 11:54 AM</div>199 </div>200 201 <div class="divider"></div>202 203 <!-- Waveform bars -->204 <div class="wave">205 <div class="bar" style="height: 160px;"></div>206 <div class="bar" style="height: 190px;"></div>207 <div class="bar" style="height: 120px;"></div>208 <div class="bar" style="height: 170px;"></div>209 <div class="bar" style="height: 140px;"></div>210 <div class="bar" style="height: 180px;"></div>211 <div class="bar" style="height: 150px;"></div>212 <div class="bar" style="height: 110px;"></div>213 <div class="bar" style="height: 160px;"></div>214 <div class="bar" style="height: 130px;"></div>215 <div class="bar" style="height: 120px;"></div>216 <div class="bar" style="height: 100px;"></div>217 <div class="bar blue" style="height: 140px;"></div>218 <div class="bar blue" style="height: 150px;"></div>219 <div class="bar blue" style="height: 120px;"></div>220 <div class="bar blue" style="height: 160px;"></div>221 <div class="bar blue" style="height: 130px;"></div>222 <div class="bar blue" style="height: 150px;"></div>223 </div>224 </div>225 226 <!-- Segmented control -->227 <div class="segmented">228 <div class="pill">229 <!-- Audio icon: vertical tiny bars -->230 <svg viewBox="0 0 48 48" width="48" height="48" fill="#D7D9E3">231 <rect x="6" y="12" width="6" height="24" rx="3"></rect>232 <rect x="18" y="8" width="6" height="32" rx="3"></rect>233 <rect x="30" y="16" width="6" height="24" rx="3"></rect>234 </svg>235 <span>Audio</span>236 </div>237 <div class="pill secondary">238 <!-- Transcript icon: lines -->239 <svg viewBox="0 0 64 48" width="56" height="48" stroke="#C9CDD9" stroke-width="4" fill="none" stroke-linecap="round">240 <path d="M8 10 H56"></path>241 <path d="M8 24 H56"></path>242 <path d="M8 38 H42"></path>243 </svg>244 <span>Transcript</span>245 </div>246 </div>247 248 <!-- Progress -->249 <div class="progress-wrap">250 <div class="progress-line">251 <div class="fill"></div>252 <div class="thumb"></div>253 </div>254 <div class="time-row">255 <div>00:00</div>256 <div>-00:16</div>257 </div>258 </div>259 260 <!-- Player controls -->261 <div class="controls">262 <div class="ctrl">263 <!-- Rewind 5s -->264 <svg viewBox="0 0 120 120" stroke="#D7D9E3" stroke-width="8" fill="none" stroke-linecap="round">265 <path d="M68 26 A40 40 0 1 0 92 48" />266 <path d="M68 26 L52 20 L58 36" />267 </svg>268 <div class="num">5</div>269 </div>270 271 <div class="ctrl play">272 <!-- Play triangle -->273 <svg viewBox="0 0 120 120" fill="#1C1E26">274 <polygon points="44,32 44,88 92,60" />275 </svg>276 </div>277 278 <div class="ctrl right">279 <!-- Forward 10s -->280 <svg viewBox="0 0 120 120" stroke="#D7D9E3" stroke-width="8" fill="none" stroke-linecap="round">281 <path d="M52 26 A40 40 0 1 1 28 48" />282 <path d="M52 26 L68 20 L62 36" />283 </svg>284 <div class="num">10</div>285 </div>286 </div>287 288 <!-- Bottom gesture bar -->289 <div class="home-indicator"></div>290 291 <!-- Overlay menu -->292 <div class="menu-overlay">293 <div class="menu-item">Create video clip</div>294 <div class="menu-item">Copy transcript to Google Docs</div>295 <div class="menu-item">Playback Speed · 1 x</div>296 <div class="menu-item">Rename</div>297 <div class="menu-item">Delete</div>298 </div>299 300</div>301</body>302</html>