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</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", "Segoe UI", Arial, sans-serif; color: #E6E6E9; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #121317;13 border-radius: 36px;14 box-shadow: 0 10px 40px rgba(0,0,0,0.35);15 }16 17 /* Status bar */18 .status-bar {19 position: absolute; top: 24px; left: 24px; right: 24px; height: 60px;20 display: flex; align-items: center; justify-content: space-between; color: #F5F6FA;21 font-size: 40px; letter-spacing: 0.5px;22 }23 .status-icons {24 display: flex; align-items: center; gap: 16px;25 }26 .status-dot { width: 18px; height: 18px; background: #EDEFF2; border-radius: 50%; opacity: 0.9; }27 .status-pill { width: 42px; height: 24px; border-radius: 12px; border: 2px solid #EDEFF2; opacity: 0.6; }28 .battery {29 width: 48px; height: 28px; border-radius: 6px; border: 3px solid #EDEFF2; position: relative; opacity: 0.85;30 }31 .battery::after {32 content:""; position: absolute; right: -8px; top: 8px; width: 6px; height: 12px; background: #EDEFF2; border-radius: 2px;33 }34 35 /* App bar */36 .app-bar {37 position: absolute; top: 112px; left: 12px; right: 12px; height: 96px;38 display: flex; align-items: center; justify-content: space-between;39 padding: 0 20px;40 }41 .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 36px; }42 .icon-btn svg { width: 40px; height: 40px; fill: none; stroke: #D6D7DB; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }43 44 /* Main card */45 .card {46 position: absolute; left: 24px; right: 24px; top: 220px; height: 1060px;47 background: #151724;48 border-radius: 44px;49 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);50 padding: 60px 56px;51 }52 .card h1 {53 margin: 0 0 18px 0;54 font-size: 72px; font-weight: 500; color: #E9EAF0;55 }56 .card .meta {57 font-size: 36px; color: #AAB0BD;58 }59 60 /* Waveform */61 .wave-wrap {62 position: absolute; bottom: 140px; left: 80px; right: 80px; height: 320px;63 display: flex; align-items: flex-end; gap: 16px;64 }65 .playhead {66 width: 6px; height: 300px; background: #7D8091; opacity: 0.7; border-radius: 3px; margin-right: 24px;67 }68 .bar {69 width: 12px; background: #7D8091; border-radius: 8px;70 }71 .bar.accent { background: #6B84C9; }72 /* create visual rhythm */73 .b1{ height:120px;} .b2{ height:132px;} .b3{ height:148px;} .b4{ height:164px;} .b5{ height:172px;}74 .b6{ height:156px;} .b7{ height:140px;} .b8{ height:136px;} .b9{ height:148px;} .b10{ height:162px;}75 .b11{ height:176px;} .b12{ height:184px;} .b13{ height:168px;} .b14{ height:152px;}76 .b15{ height:160px;} .b16{ height:172px;} .b17{ height:184px;} .b18{ height:176px;}77 .b19{ height:168px;} .b20{ height:160px;} .b21{ height:172px;} .b22{ height:188px;} .b23{ height:200px;}78 .b24{ height:190px;} .b25{ height:180px;} .b26{ height:168px;} .b27{ height:160px;}79 .b28{ height:168px;} .b29{ height:176px;} .b30{ height:188px;}80 .wave-wrap .bar:last-child { margin-right: 0; }81 82 /* Tabs */83 .tabs {84 position: absolute; left: 80px; right: 80px; bottom: -84px; height: 112px;85 display: flex; gap: 28px; align-items: center;86 }87 .pill {88 height: 112px; padding: 0 44px; border-radius: 56px; background: #1c1e2a;89 color: #E6E7EE; font-size: 40px; display: flex; align-items: center; gap: 22px;90 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);91 }92 .pill.active { background: #222533; }93 .pill svg { width: 40px; height: 40px; stroke: #C7CBDA; stroke-width: 3.5; fill: none; }94 95 /* Progress section */96 .progress {97 position: absolute; left: 80px; right: 80px; top: 1450px;98 }99 .track {100 height: 12px; background: #2A2D3A; border-radius: 6px; position: relative;101 }102 .track .fill {103 position: absolute; left: 0; top: 0; height: 12px; width: 140px; background: #8F97C4; border-radius: 6px;104 }105 .track .thumb {106 position: absolute; left: 120px; top: -16px; width: 40px; height: 40px; background: #C9C9E8;107 border-radius: 20px; box-shadow: 0 0 0 4px rgba(201,201,232,0.15);108 }109 .time-row {110 margin-top: 18px; display: flex; justify-content: space-between; font-size: 40px; color: #DADCE7;111 }112 113 /* Controls */114 .controls {115 position: absolute; left: 60px; right: 60px; top: 1600px; height: 340px;116 display: flex; align-items: center; justify-content: space-between;117 }118 .ctrl {119 width: 260px; height: 260px; border-radius: 130px; background: #1B1E27;120 display: flex; align-items: center; justify-content: center;121 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);122 }123 .ctrl.center {124 background: #CBCBE7; color: #121317;125 }126 .ctrl svg { width: 120px; height: 120px; stroke: #E5E7F2; stroke-width: 5; fill: none; }127 .ctrl.center svg { stroke: #121317; }128 129 .ctrl .small-text {130 position: absolute; font-size: 44px; color: #E5E7F2;131 }132 .ctrl .small-text.dark { color: #121317; }133 134 /* Bottom home indicator */135 .home-indicator {136 position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);137 width: 300px; height: 16px; background: #EDEFF2; border-radius: 8px; opacity: 0.9;138 }139</style>140</head>141<body>142<div id="render-target">143 144 <!-- Status bar -->145 <div class="status-bar">146 <div>6:04</div>147 <div class="status-icons">148 <div class="status-pill"></div>149 <div class="status-dot"></div>150 <div class="status-dot"></div>151 <div class="status-dot"></div>152 <div class="status-dot" style="width:10px; height:10px; opacity:0.7;"></div>153 <div class="battery"></div>154 </div>155 </div>156 157 <!-- App bar -->158 <div class="app-bar">159 <div class="icon-btn">160 <svg viewBox="0 0 48 48">161 <path d="M30 10 L16 24 L30 38"></path>162 </svg>163 </div>164 <div style="display:flex; gap:14px;">165 <div class="icon-btn">166 <svg viewBox="0 0 48 48">167 <path d="M16 18 C18 14 22 12 26 12 C32 12 36 16 36 22 C36 28 32 32 26 32 C22 32 18 30 16 26"></path>168 <path d="M10 38 L18 30"></path>169 </svg>170 </div>171 <div class="icon-btn">172 <svg viewBox="0 0 48 48">173 <path d="M10 16 L38 16"></path>174 <path d="M14 10 L20 38"></path>175 </svg>176 </div>177 <div class="icon-btn">178 <svg viewBox="0 0 48 48">179 <circle cx="22" cy="22" r="12"></circle>180 <path d="M34 34 L42 42"></path>181 </svg>182 </div>183 <div class="icon-btn">184 <svg viewBox="0 0 48 48">185 <circle cx="12" cy="12" r="3"></circle>186 <circle cx="24" cy="12" r="3"></circle>187 <circle cx="36" cy="12" r="3"></circle>188 <circle cx="12" cy="24" r="3"></circle>189 <circle cx="24" cy="24" r="3"></circle>190 <circle cx="36" cy="24" r="3"></circle>191 </svg>192 </div>193 </div>194 </div>195 196 <!-- Card -->197 <div class="card">198 <h1>Thoughts of the day</h1>199 <div class="meta">Thu, Jul 6 • 11:55 AM</div>200 201 <!-- Waveform area -->202 <div class="wave-wrap">203 <div class="playhead"></div>204 <div class="bar b1"></div>205 <div class="bar b2"></div>206 <div class="bar b3"></div>207 <div class="bar b4"></div>208 <div class="bar b5"></div>209 <div class="bar b6"></div>210 <div class="bar b7"></div>211 <div class="bar b8"></div>212 <div class="bar b9"></div>213 <div class="bar b10"></div>214 <div class="bar b11"></div>215 <div class="bar b12"></div>216 <div class="bar b13"></div>217 <div class="bar b14"></div>218 <div class="bar b15"></div>219 <div class="bar b16"></div>220 <div class="bar b17 accent"></div>221 <div class="bar b18 accent"></div>222 <div class="bar b19 accent"></div>223 <div class="bar b20 accent"></div>224 <div class="bar b21 accent"></div>225 <div class="bar b22 accent"></div>226 <div class="bar b23 accent"></div>227 <div class="bar b24 accent"></div>228 <div class="bar b25 accent"></div>229 <div class="bar b26 accent"></div>230 <div class="bar b27 accent"></div>231 <div class="bar b28 accent"></div>232 <div class="bar b29 accent"></div>233 <div class="bar b30 accent"></div>234 </div>235 236 <!-- Tabs -->237 <div class="tabs">238 <div class="pill active">239 <svg viewBox="0 0 48 48">240 <path d="M10 34 V18"></path>241 <path d="M22 34 V12"></path>242 <path d="M34 34 V22"></path>243 </svg>244 <span>Audio</span>245 </div>246 <div class="pill">247 <svg viewBox="0 0 48 48">248 <path d="M10 12 H38"></path>249 <path d="M10 22 H32"></path>250 <path d="M10 32 H26"></path>251 </svg>252 <span>Transcript</span>253 </div>254 </div>255 </div>256 257 <!-- Progress -->258 <div class="progress">259 <div class="track">260 <div class="fill"></div>261 <div class="thumb"></div>262 </div>263 <div class="time-row">264 <div>00:00</div>265 <div>-00:16</div>266 </div>267 </div>268 269 <!-- Controls -->270 <div class="controls">271 <div class="ctrl">272 <svg viewBox="0 0 100 100">273 <path d="M62 20 L34 36 L62 52"></path>274 </svg>275 <div class="small-text">5</div>276 </div>277 <div class="ctrl center">278 <svg viewBox="0 0 100 100">279 <path d="M38 30 L72 50 L38 70 Z"></path>280 </svg>281 </div>282 <div class="ctrl">283 <svg viewBox="0 0 100 100">284 <path d="M38 20 L66 36 L38 52"></path>285 </svg>286 <div class="small-text">10</div>287 </div>288 </div>289 290 <!-- Home Indicator -->291 <div class="home-indicator"></div>292 293</div>294</body>295</html>