GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Music App UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Inter, Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: radial-gradient(1200px 900px at 60% 0%, #1a1224 0%, #0f0e17 55%, #0b0b12 100%);11 color: #fff;12 }13 14 /* Top status bar */15 .status-bar {16 height: 90px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between;17 color: #d6d6d6; font-weight: 600; letter-spacing: 1px; font-size: 36px;18 }19 .status-icons { display: flex; align-items: center; gap: 22px; }20 .icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: #dcdcdc; }21 22 /* App header */23 .app-header { padding: 16px 36px 0 36px; display: flex; align-items: center; justify-content: space-between; }24 .app-badge {25 width: 92px; height: 92px; border-radius: 24px;26 background: linear-gradient(135deg, #ff6a5b, #ff3b6a); display: flex; align-items: center; justify-content: center;27 box-shadow: 0 4px 14px rgba(255,80,110,0.35);28 }29 .app-badge small { font-weight: 800; color: rgba(255,255,255,0.9); font-size: 26px; }30 .right-actions { display: flex; align-items: center; gap: 28px; }31 .notif-dot {32 position: absolute; right: -2px; top: -2px; width: 16px; height: 16px; background: #ff5b6a; border-radius: 50%;33 border: 2px solid #0f0e17;34 }35 .bell-wrap { position: relative; }36 37 /* Sections */38 .content { padding: 10px 36px 220px 36px; }39 .section-title {40 font-size: 64px; font-weight: 800; margin: 24px 0 22px 0; letter-spacing: 0.5px; color: #f1f1f1;41 }42 43 /* Featured banner */44 .featured-banner {45 position: relative; height: 520px; border-radius: 28px;46 background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center;47 color: #555; font-weight: 700; letter-spacing: 1px;48 }49 .carousel-dots {50 position: absolute; right: 24px; top: 24px; display: flex; gap: 16px;51 }52 .dot { width: 18px; height: 18px; border-radius: 50%; background: #7e7e7e; opacity: 0.6; }53 .dot.active { background: #d9d9d9; opacity: 1; }54 55 /* Grid rows */56 .row-header { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; }57 .row-title { font-size: 64px; font-weight: 800; }58 .see-all { color: #bdbdbd; font-size: 38px; }59 60 .cards {61 margin-top: 18px;62 display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px;63 }64 .card {65 color: #fff;66 }67 .thumb {68 width: 100%; height: 312px; border-radius: 22px;69 background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center;70 color: #555; font-weight: 700;71 position: relative;72 }73 .play-badge {74 position: absolute; right: 18px; bottom: 18px; width: 84px; height: 84px; background: rgba(255,255,255,0.95);75 border-radius: 50%; display: flex; align-items: center; justify-content: center;76 box-shadow: 0 4px 12px rgba(0,0,0,0.35);77 }78 .card-title {79 margin-top: 16px; font-size: 40px; font-weight: 700; color: #f3f3f3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;80 }81 .card-sub {82 margin-top: 10px; font-size: 32px; color: #b8b8b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;83 }84 85 /* Miniplayer */86 .miniplayer {87 position: absolute; left: 0; right: 0; bottom: 210px;88 margin: 0 0; padding: 18px 24px; height: 140px; display: flex; align-items: center;89 background: rgba(23,23,30,0.96); border-top: 1px solid rgba(255,255,255,0.06);90 }91 .mini-art { width: 108px; height: 108px; border-radius: 12px; background: #E0E0E0; border: 1px solid #BDBDBD; color: #666; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; }92 .mini-meta { margin-left: 20px; }93 .mini-title { font-size: 42px; font-weight: 800; color: #fff; }94 .mini-sub { margin-top: 4px; font-size: 32px; color: #bdbdbd; }95 .mini-play {96 margin-left: auto; width: 120px; height: 120px; background: #ff4c5c; border-radius: 60px; display: flex; align-items: center; justify-content: center;97 box-shadow: 0 8px 18px rgba(255,76,92,0.45);98 }99 100 /* Bottom nav */101 .bottom-nav {102 position: absolute; bottom: 0; left: 0; right: 0; height: 200px; background: rgba(15,15,22,1);103 border-top: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: space-around;104 }105 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #9fa3b4; }106 .nav-item.active { color: #ffffff; }107 .nav-icon { width: 64px; height: 64px; }108 .nav-label { font-size: 34px; font-weight: 700; }109 110 /* Helpers */111 .muted { color: #c8c8c8; }112</style>113</head>114<body>115<div id="render-target">116 117 <!-- Status Bar -->118 <div class="status-bar">119 <div>8:04</div>120 <div class="status-icons">121 <!-- simple mock status icons -->122 <span class="icon">123 <svg viewBox="0 0 24 24" width="36" height="36" fill="#dcdcdc">124 <path d="M3 18h2a7 7 0 0 1 7-7V9a9 9 0 0 0-9 9zM3 6v2a13 13 0 0 1 13 13h2A15 15 0 0 0 3 6z"/>125 </svg>126 </span>127 <span class="icon">128 <svg viewBox="0 0 24 24" width="36" height="36" fill="#dcdcdc">129 <path d="M16 7H8v10h8V7zm-2-5H10v2h4V2zM6 7H4v10h2V7zm14 0h-2v10h2V7z"/>130 </svg>131 </span>132 <span class="icon">133 <svg viewBox="0 0 24 24" width="36" height="36" fill="#dcdcdc">134 <path d="M20.5 6A3.5 3.5 0 1 1 14 6a3.5 3.5 0 0 1 6.5 0zM2 18h20v2H2z"/>135 </svg>136 </span>137 </div>138 </div>139 140 <!-- App Header -->141 <div class="app-header">142 <div class="app-badge">143 <small>Music</small>144 </div>145 <div class="right-actions">146 <!-- Search -->147 <span class="icon">148 <svg viewBox="0 0 24 24" width="46" height="46" stroke="#ffffff" fill="none" stroke-width="2.2">149 <circle cx="11" cy="11" r="7"></circle>150 <path d="M21 21l-4.3-4.3"></path>151 </svg>152 </span>153 <!-- Bell -->154 <span class="icon bell-wrap">155 <svg viewBox="0 0 24 24" width="46" height="46" fill="none" stroke="#ffffff" stroke-width="2">156 <path d="M12 22a2.5 2.5 0 0 0 2.5-2.5H9.5A2.5 2.5 0 0 0 12 22z"/>157 <path d="M18 16v-5a6 6 0 1 0-12 0v5l-2 2h16l-2-2z"/>158 </svg>159 <span class="notif-dot"></span>160 </span>161 </div>162 </div>163 164 <div class="content">165 <div class="section-title">Featured Today</div>166 <div class="featured-banner">167 [IMG: Concert Performance with Red Backdrop]168 <div class="carousel-dots">169 <div class="dot active"></div>170 <div class="dot"></div>171 <div class="dot"></div>172 <div class="dot"></div>173 </div>174 </div>175 176 <!-- Top Searches -->177 <div class="row-header">178 <div class="row-title">Top Searches</div>179 <div class="see-all">See all</div>180 </div>181 <div class="cards">182 <div class="card">183 <div class="thumb">[IMG: Ram Siya Ram - Poster]184 <div class="play-badge">185 <svg viewBox="0 0 24 24" width="38" height="38" fill="#e64054">186 <path d="M8 5v14l11-7z" fill="#e64054"></path>187 </svg>188 </div>189 </div>190 <div class="card-title">Ram Siya Ram (From ...)</div>191 <div class="card-sub">Sachet-Parampara - Ra...</div>192 </div>193 194 <div class="card">195 <div class="thumb">[IMG: Daddy Yankee - Gasolina Cover]196 <div class="play-badge">197 <svg viewBox="0 0 24 24" width="38" height="38" fill="#e64054">198 <path d="M8 5v14l11-7z" fill="#e64054"></path>199 </svg>200 </div>201 </div>202 <div class="card-title">Gasolina</div>203 <div class="card-sub">Daddy Yankee - Barrio F...</div>204 </div>205 206 <div class="card">207 <div class="thumb">[IMG: Hanuman Chalisa Artwork]</div>208 <div class="card-title">Hanuman Chal...</div>209 <div class="card-sub">CHALISA AARTI ...</div>210 </div>211 </div>212 213 <!-- New Releases -->214 <div class="row-header" style="margin-top: 40px;">215 <div class="row-title">New Releases</div>216 <div class="see-all">See all</div>217 </div>218 <div class="cards">219 <div class="card">220 <div class="thumb" style="height: 260px;">[IMG: New Songs - Poster]</div>221 <div class="card-title">New Songs</div>222 </div>223 <div class="card">224 <div class="thumb" style="height: 260px;">[IMG: Hindi Party Track - Poster]</div>225 <div class="card-title">Hindi</div>226 </div>227 <div class="card">228 <div class="thumb" style="height: 260px;">[IMG: New English - Poster]</div>229 <div class="card-title">New English</div>230 </div>231 </div>232 </div>233 234 <!-- Mini Player -->235 <div class="miniplayer">236 <div class="mini-art">[IMG]</div>237 <div class="mini-meta">238 <div class="mini-title">Calm Down</div>239 <div class="mini-sub">Rema, Selena Gomez - Calm Down</div>240 </div>241 <div class="mini-play">242 <svg viewBox="0 0 24 24" width="56" height="56" fill="#ffffff">243 <path d="M8 5v14l11-7z"></path>244 </svg>245 </div>246 </div>247 248 <!-- Bottom Navigation -->249 <div class="bottom-nav">250 <div class="nav-item active">251 <svg class="nav-icon" viewBox="0 0 24 24" fill="currentColor">252 <path d="M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3l9-8z"/>253 </svg>254 <div class="nav-label">Home</div>255 </div>256 257 <div class="nav-item">258 <svg class="nav-icon" viewBox="0 0 24 24" fill="currentColor">259 <path d="M12 3a4 4 0 0 1 4 4v8.5a3.5 3.5 0 1 1-2-3.1V7a2 2 0 0 0-4 0v10.5a3.5 3.5 0 1 1-2-3.1V7a4 4 0 0 1 4-4z"/>260 </svg>261 <div class="nav-label">My Music</div>262 </div>263 264 <div class="nav-item">265 <svg class="nav-icon" viewBox="0 0 24 24" fill="currentColor">266 <path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm6-6V9a6 6 0 1 0-12 0v7l-2 2h16l-2-2z"/>267 </svg>268 <div class="nav-label">Hellotunes</div>269 </div>270 271 <div class="nav-item">272 <svg class="nav-icon" viewBox="0 0 24 24" fill="currentColor">273 <path d="M19.4 13a7.9 7.9 0 0 0 .1-2l2.1-1.6-2-3.5-2.5 1a7.8 7.8 0 0 0-1.7-1L13 2h-4l-.4 2.9a7.8 7.8 0 0 0-1.7 1l-2.5-1-2 3.5L4.6 11a7.9 7.9 0 0 0 0 2l-2.1 1.6 2 3.5 2.5-1c.5.4 1.1.7 1.7 1l.4 2.9h4l.4-2.9c.6-.3 1.2-.6 1.7-1l2.5 1 2-3.5L19.4 13zM12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>274 </svg>275 <div class="nav-label">Settings</div>276 </div>277 </div>278 279</div>280</body>281</html>