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>Discover - Music App UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #101010; color: #FFFFFF;13 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;14 }15 .status-bar {16 height: 90px; padding: 18px 36px; color: #DADADA;17 display: flex; justify-content: space-between; align-items: center;18 font-size: 28px;19 }20 .status-right { display: flex; align-items: center; gap: 22px; }21 .header {22 padding: 10px 36px 0 36px; height: 150px;23 display: flex; align-items: center; justify-content: space-between;24 }25 .header-left { display: flex; align-items: center; gap: 22px; }26 .app-title { font-size: 58px; font-weight: 800; letter-spacing: 1px; }27 .header-actions { display: flex; align-items: center; gap: 26px; }28 .icon-btn { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 28px; background: #1A1A1A; }29 .profile-dot {30 width: 56px; height: 56px; border-radius: 28px; background: #5B4ACB;31 display: flex; align-items: center; justify-content: center; font-weight: 700;32 }33 34 .chips { padding: 14px 36px 18px; display: flex; gap: 18px; }35 .chip {36 padding: 16px 28px; border-radius: 30px; border: 2px solid #3A3A3A;37 font-size: 30px; color: #EDEDED;38 }39 .chip.active { background: #FF9F1A; border: none; color: #111; font-weight: 800; }40 41 .section-header {42 padding: 20px 36px 12px; display: flex; align-items: center; justify-content: space-between;43 }44 .section-title { font-size: 36px; font-weight: 800; letter-spacing: 0.5px; }45 .view-all { font-size: 28px; color: #D8D8D8; }46 47 .list { margin-top: 6px; }48 .list-item {49 display: flex; align-items: center; padding: 22px 36px;50 }51 .thumb {52 width: 180px; height: 180px; margin-right: 24px;53 background: #E0E0E0; border: 1px solid #BDBDBD;54 display: flex; align-items: center; justify-content: center;55 color: #757575; font-size: 26px; text-align: center;56 }57 .item-info { flex: 1; min-width: 0; }58 .item-title { font-size: 40px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }59 .item-sub { font-size: 30px; color: #C7C7C7; margin-top: 6px; }60 .accent { color: #FFFFFF; font-weight: 700; }61 .more-btn { width: 56px; height: 56px; display: grid; place-items: center; }62 .divider { height: 1px; margin: 0 36px; background: #252525; }63 64 .playlist-section { margin-top: 16px; }65 .playlist-grid {66 display: flex; gap: 28px; padding: 12px 36px 0;67 }68 .card {69 width: 330px;70 }71 .card .art {72 width: 100%; height: 330px;73 background: #E0E0E0; border: 1px solid #BDBDBD;74 display: flex; align-items: center; justify-content: center;75 color: #757575; font-size: 26px; text-align: center;76 }77 .card-title { margin-top: 16px; font-size: 34px; font-weight: 800; }78 .card-sub { margin-top: 8px; font-size: 28px; color: #C7C7C7; }79 80 .ad-banner {81 width: 100%; height: 180px; margin-top: 18px; padding: 0 36px;82 box-sizing: border-box;83 }84 .ad-banner .img {85 width: 100%; height: 100%;86 background: #E0E0E0; border: 1px solid #BDBDBD;87 display: flex; align-items: center; justify-content: center;88 color: #757575; font-size: 28px;89 }90 91 .bottom-nav {92 position: absolute; left: 0; right: 0; bottom: 0;93 height: 200px; background: #161616; border-top: 1px solid #2C2C2C;94 display: flex; align-items: center; justify-content: space-around;95 }96 .nav-item { width: 20%; display: flex; flex-direction: column; align-items: center; gap: 12px; color: #CFCFCF; }97 .nav-item svg { width: 42px; height: 42px; }98 .nav-item .label { font-size: 28px; }99 .nav-item.active { color: #FF9F1A; }100 .home-indicator {101 position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);102 width: 220px; height: 8px; background: #EAEAEA; border-radius: 8px; opacity: 0.85;103 }104</style>105</head>106<body>107<div id="render-target">108 <!-- Status Bar -->109 <div class="status-bar">110 <div>8:26</div>111 <div class="status-right">112 <!-- simple status icons -->113 <svg width="28" height="28" viewBox="0 0 24 24" fill="#DADADA"><path d="M3 10h18v4H3z"/></svg>114 <svg width="28" height="28" viewBox="0 0 24 24" fill="#DADADA"><path d="M12 3l8 6H4l8-6zm0 18a3 3 0 100-6 3 3 0 000 6z"/></svg>115 <svg width="28" height="28" viewBox="0 0 24 24" fill="#DADADA"><path d="M18 7h-1V5a5 5 0 00-10 0v2H6a2 2 0 00-2 2v9a2 2 0 002 2h12a2 2 0 002-2V9a2 2 0 00-2-2zm-7 0V5a3 3 0 016 0v2H11z"/></svg>116 </div>117 </div>118 119 <!-- Header -->120 <div class="header">121 <div class="header-left">122 <!-- Waveform mark -->123 <svg width="50" height="50" viewBox="0 0 24 24"><path d="M2 12l2-4 2 8 2-12 2 10 2-6 2 8 2-5 2 5" stroke="#FF9F1A" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>124 <div class="app-title">DISCOVER</div>125 </div>126 <div class="header-actions">127 <div class="icon-btn" title="Upload">128 <svg viewBox="0 0 24 24" width="26" height="26" fill="#EDEDED"><path d="M12 3l4 4h-3v6H11V7H8l4-4zM5 19h14v2H5z"/></svg>129 </div>130 <div class="icon-btn" title="Notifications">131 <svg viewBox="0 0 24 24" width="26" height="26" fill="#EDEDED"><path d="M12 22a2 2 0 002-2h-4a2 2 0 002 2zm6-6V11a6 6 0 10-12 0v5L4 17v2h16v-2l-2-1z"/></svg>132 </div>133 <div class="profile-dot">C</div>134 </div>135 </div>136 137 <!-- Category Chips -->138 <div class="chips">139 <div class="chip active">Electronic</div>140 <div class="chip">Gospel</div>141 <div class="chip">Hip-Hop</div>142 <div class="chip">Instrumental</div>143 </div>144 145 <!-- Recommended Section -->146 <div class="section-header">147 <div class="section-title">RECOMMENDED FOR YOU</div>148 <div class="view-all">VIEW ALL</div>149 </div>150 151 <div class="list">152 <div class="list-item">153 <div class="thumb">[IMG: Album Art - ChopLife SoundSystem]</div>154 <div class="item-info">155 <div class="item-title">ChopLife SoundSystem, Mr Eazi, …</div>156 <div class="item-sub">Oh Yes</div>157 </div>158 <div class="more-btn" title="More">159 <svg viewBox="0 0 24 24" width="24" height="24" fill="#CFCFCF"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>160 </div>161 </div>162 <div class="divider"></div>163 164 <div class="list-item">165 <div class="thumb">[IMG: Album Art - Janu - Cover Song]</div>166 <div class="item-info">167 <div class="item-title">Janu</div>168 <div class="item-sub">Mehnge Ne Moti - Sidhu Moose W… Feat. <span class="accent">Sidhu mussa wala</span></div>169 </div>170 <div class="more-btn" title="More">171 <svg viewBox="0 0 24 24" width="24" height="24" fill="#CFCFCF"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>172 </div>173 </div>174 <div class="divider"></div>175 176 <div class="list-item">177 <div class="thumb">[IMG: Album Art - Shayad (Soul Strike Remix)]</div>178 <div class="item-info">179 <div class="item-title">Soul Strike</div>180 <div class="item-sub">Shayad (Soul Strike Remix) Feat. <span class="accent">Arijit Singh</span></div>181 </div>182 <div class="more-btn" title="More">183 <svg viewBox="0 0 24 24" width="24" height="24" fill="#CFCFCF"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>184 </div>185 </div>186 <div class="divider"></div>187 188 <div class="list-item">189 <div class="thumb">[IMG: Album Art - Ojapiano]</div>190 <div class="item-info">191 <div class="item-title">Kcee</div>192 <div class="item-sub">Ojapiano</div>193 </div>194 <div class="more-btn" title="More">195 <svg viewBox="0 0 24 24" width="24" height="24" fill="#CFCFCF"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>196 </div>197 </div>198 </div>199 200 <!-- Electronic Playlists -->201 <div class="playlist-section">202 <div class="section-header">203 <div class="section-title">ELECTRONIC PLAYLISTS</div>204 <div class="view-all">VIEW ALL</div>205 </div>206 207 <div class="playlist-grid">208 <div class="card">209 <div class="art">[IMG: Playlist Cover - Verified: Electronic]</div>210 <div class="card-title">Verified: Electronic</div>211 <div class="card-sub">The leaders of electronic</div>212 </div>213 <div class="card">214 <div class="art">[IMG: Playlist Cover - Disco Decades]</div>215 <div class="card-title">Disco Decades</div>216 <div class="card-sub">Disco sounds from decades</div>217 </div>218 <div class="card">219 <div class="art">[IMG: Playlist Cover - Best Of The Electronic]</div>220 <div class="card-title">Best Of The Electronic</div>221 <div class="card-sub">Selected top electronic</div>222 </div>223 </div>224 </div>225 226 <!-- Ad Banner -->227 <div class="ad-banner">228 <div class="img">[IMG: Ad Banner - Travel Deal 15% off]</div>229 </div>230 231 <!-- Bottom Navigation -->232 <div class="bottom-nav">233 <div class="nav-item active">234 <svg viewBox="0 0 24 24" fill="#FF9F1A"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/></svg>235 <div class="label">Discover</div>236 </div>237 <div class="nav-item">238 <svg viewBox="0 0 24 24" fill="#CFCFCF"><path d="M4 5h16v2H4zM4 10h16v2H4zM4 15h10v2H4z"/></svg>239 <div class="label">Playlists</div>240 </div>241 <div class="nav-item">242 <svg viewBox="0 0 24 24" fill="#CFCFCF"><path d="M10 2a8 8 0 106.32 13.9l5.39 5.39-1.42 1.42-5.39-5.39A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z"/></svg>243 <div class="label">Search</div>244 </div>245 <div class="nav-item">246 <svg viewBox="0 0 24 24" fill="#CFCFCF"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm-8 10v-1a7 7 0 0114 0v1H4z"/></svg>247 <div class="label">Feed</div>248 </div>249 <div class="nav-item">250 <div class="profile-dot" style="width:44px;height:44px;border-radius:22px;font-size:18px;background:#5B4ACB;">C</div>251 <div class="label">My Library</div>252 </div>253 </div>254 255 <div class="home-indicator"></div>256</div>257</body>258</html>