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>Chill List UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: linear-gradient(180deg, #0d0f13 0%, #1b1f25 40%, #252a31 100%);15 color: #EFF2F6;16 font-family: Inter, Segoe UI, Arial, sans-serif;17 }18 19 .tap-circle {20 width: 96px;21 height: 96px;22 border-radius: 48px;23 background: rgba(255,255,255,0.06);24 border: 1px solid rgba(255,255,255,0.15);25 display: flex;26 align-items: center;27 justify-content: center;28 }29 30 .placeholder-img {31 background: #E0E0E0;32 border: 1px solid #BDBDBD;33 color: #757575;34 display: flex;35 align-items: center;36 justify-content: center;37 text-align: center;38 }39 40 .muted { color: #A9B2BC; }41 .pill {42 border-radius: 32px;43 display: flex;44 align-items: center;45 justify-content: center;46 }47 .shadow {48 box-shadow: 0 8px 24px rgba(0,0,0,0.35);49 }50 .divider {51 position: absolute;52 left: 0; width: 100%;53 height: 2px;54 background: rgba(255,255,255,0.08);55 }56 .nav-bar {57 position: absolute;58 left: 0; bottom: 0;59 width: 1080px; height: 180px;60 background: #1f242b;61 display: flex;62 align-items: center;63 justify-content: space-around;64 color: #C9D0D7;65 }66 .nav-item {67 width: 180px;68 height: 140px;69 display: flex;70 flex-direction: column;71 align-items: center;72 justify-content: center;73 gap: 16px;74 font-size: 28px;75 }76 .nav-active { color: #EAF0F7; }77 .indicator {78 position: absolute;79 left: 50%;80 transform: translateX(-50%);81 bottom: 200px;82 width: 360px; height: 10px;83 background: #EAEFF5;84 border-radius: 5px;85 opacity: 0.8;86 }87</style>88</head>89<body>90<div id="render-target">91 92 <!-- Back button -->93 <div class="tap-circle shadow" style="position:absolute; top:96px; left:48px;">94 <svg width="40" height="40" viewBox="0 0 40 40">95 <path d="M24 8 L12 20 L24 32" stroke="#EAF0F7" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>96 </svg>97 </div>98 99 <!-- Top right vertical menu -->100 <div class="tap-circle shadow" style="position:absolute; top:220px; right:36px; background:#15181d;">101 <svg width="24" height="48" viewBox="0 0 24 48">102 <circle cx="12" cy="10" r="3" fill="#DDE3EA"/>103 <circle cx="12" cy="24" r="3" fill="#DDE3EA"/>104 <circle cx="12" cy="38" r="3" fill="#DDE3EA"/>105 </svg>106 </div>107 108 <!-- Large playlist cover -->109 <div class="placeholder-img shadow" style="position:absolute; left:72px; top:240px; width:760px; height:540px; border-radius:36px;">110 [IMG: Playlist Cover]111 </div>112 113 <!-- Edit and Play buttons -->114 <div class="shadow" style="position:absolute; left:870px; top:520px; width:120px; height:120px; border-radius:60px; background:#FFFFFF; display:flex; align-items:center; justify-content:center;">115 <svg width="44" height="44" viewBox="0 0 44 44">116 <path d="M30 12 L36 18 L18 36 L12 36 L12 30 Z" fill="none" stroke="#1f242b" stroke-width="3" stroke-linejoin="round"/>117 </svg>118 </div>119 <div class="shadow" style="position:absolute; left:1008px; top:520px; width:120px; height:120px; border-radius:60px; background:#61D1C8; display:flex; align-items:center; justify-content:center;">120 <svg width="44" height="44" viewBox="0 0 44 44">121 <path d="M16 12 L34 22 L16 32 Z" fill="#0d0f13"/>122 </svg>123 </div>124 125 <!-- Title and description -->126 <div style="position:absolute; left:72px; top:840px; font-size:72px; font-weight:700; letter-spacing:0.5px;">Chill List</div>127 <div class="muted" style="position:absolute; left:72px; top:930px; font-size:32px;">128 1 song with music from artists like Joe Pass.129 </div>130 131 <!-- Actions row -->132 <div style="position:absolute; left:72px; top:1005px; display:flex; align-items:center; gap:28px;">133 <div class="tap-circle" style="width:96px; height:96px;">134 <svg width="40" height="40" viewBox="0 0 40 40">135 <path d="M20 8 V24" stroke="#EAF0F7" stroke-width="3" stroke-linecap="round"/>136 <path d="M12 18 L20 26 L28 18" stroke="#EAF0F7" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>137 <rect x="10" y="30" width="20" height="3" fill="#EAF0F7"/>138 </svg>139 </div>140 <div class="tap-circle" style="width:96px; height:96px;">141 <svg width="40" height="40" viewBox="0 0 40 40">142 <path d="M20 10 V28" stroke="#EAF0F7" stroke-width="3" stroke-linecap="round"/>143 <path d="M26 16 L20 10 L14 16" stroke="#EAF0F7" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>144 <rect x="10" y="28" width="20" height="8" rx="2" fill="none" stroke="#EAF0F7" stroke-width="3"/>145 </svg>146 </div>147 <div class="muted" style="font-size:30px;">3m 32s • 1 Songs</div>148 </div>149 150 <!-- Song item -->151 <div class="shadow" style="position:absolute; left:72px; top:1140px; width:936px; min-height:160px; background: transparent; display:flex; align-items:center; justify-content:space-between;">152 <div style="display:flex; flex-direction:column; gap:12px;">153 <div style="font-size:40px; font-weight:600;">Night And Day (Album Version)</div>154 <div class="muted" style="font-size:30px;">Joe Pass - Virtuoso</div>155 </div>156 <div style="display:flex; align-items:center; gap:36px;">157 <svg width="48" height="48" viewBox="0 0 48 48">158 <path d="M24 10 V28" stroke="#DDE3EA" stroke-width="3" stroke-linecap="round"/>159 <path d="M16 22 L24 30 L32 22" stroke="#DDE3EA" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>160 </svg>161 <svg width="16" height="48" viewBox="0 0 16 48">162 <circle cx="8" cy="12" r="3" fill="#DDE3EA"/>163 <circle cx="8" cy="24" r="3" fill="#DDE3EA"/>164 <circle cx="8" cy="36" r="3" fill="#DDE3EA"/>165 </svg>166 </div>167 </div>168 169 <!-- Add More button -->170 <div class="pill shadow" style="position:absolute; left:60px; top:1360px; width:960px; height:140px; background:#30353C;">171 <div style="display:flex; align-items:center; gap:24px; color:#61D1C8; font-size:44px; font-weight:600;">172 <svg width="40" height="40" viewBox="0 0 40 40">173 <path d="M20 8 V32 M8 20 H32" stroke="#61D1C8" stroke-width="4" stroke-linecap="round"/>174 </svg>175 Add More176 </div>177 </div>178 179 <!-- Add Videos button -->180 <div class="pill shadow" style="position:absolute; left:60px; top:1580px; width:960px; height:160px; background:#61D1C8; color:#0d0f13; font-weight:700;">181 <div style="display:flex; align-items:center; gap:28px; font-size:48px;">182 <svg width="42" height="42" viewBox="0 0 42 42">183 <path d="M21 8 V34 M8 21 H34" stroke="#0d0f13" stroke-width="5" stroke-linecap="round"/>184 </svg>185 Add Videos186 <span style="margin-left:12px; font-size:28px; background:#D2D6DA; color:#3a4047; padding:8px 14px; border-radius:16px;">PRO</span>187 </div>188 </div>189 190 <!-- Divider -->191 <div class="divider" style="top:1860px;"></div>192 193 <!-- No Work, All Play -->194 <div style="position:absolute; top:1900px; left:0; width:1080px; text-align:center; display:flex; align-items:center; justify-content:center; gap:12px; color:#CDD4DB; font-size:32px;">195 <span style="display:inline-flex; width:44px; height:44px; border-radius:22px; border:1px solid rgba(255,255,255,0.2); align-items:center; justify-content:center;">196 <svg width="22" height="22" viewBox="0 0 22 22">197 <circle cx="11" cy="11" r="10" fill="none" stroke="#DDE3EA" stroke-width="2"/>198 <path d="M11 6 V12" stroke="#DDE3EA" stroke-width="2" stroke-linecap="round"/>199 <circle cx="11" cy="15" r="1.6" fill="#DDE3EA"/>200 </svg>201 </span>202 No Work, All Play.203 </div>204 205 <!-- Mini player -->206 <div class="shadow" style="position:absolute; left:0; top:1980px; width:1080px; height:160px; background:#262b32; display:flex; align-items:center; padding:0 36px; gap:28px;">207 <div class="placeholder-img" style="width:120px; height:120px;">[IMG: Album Art]</div>208 <div style="display:flex; flex-direction:column; gap:8px; width:760px;">209 <div style="font-size:34px; font-weight:600;">L-O-V-E (2003 Digital Remaster)</div>210 <div class="muted" style="font-size:28px;">Nat King Cole — L-O-V-E</div>211 </div>212 <svg width="56" height="56" viewBox="0 0 56 56">213 <path d="M20 14 L42 28 L20 42 Z" fill="#EAF0F7"/>214 </svg>215 </div>216 217 <!-- Home indicator -->218 <div class="indicator"></div>219 220 <!-- Bottom navigation -->221 <div class="nav-bar">222 <div class="nav-item">223 <svg width="44" height="44" viewBox="0 0 44 44">224 <path d="M8 22 L22 10 L36 22 V36 H26 V26 H18 V36 H8 Z" fill="none" stroke="#C9D0D7" stroke-width="3" stroke-linejoin="round"/>225 </svg>226 <div>Home</div>227 </div>228 <div class="nav-item">229 <svg width="44" height="44" viewBox="0 0 44 44">230 <circle cx="20" cy="20" r="12" fill="none" stroke="#C9D0D7" stroke-width="3"/>231 <path d="M30 30 L38 38" stroke="#C9D0D7" stroke-width="3" stroke-linecap="round"/>232 </svg>233 <div>Search</div>234 </div>235 <div class="nav-item">236 <svg width="44" height="44" viewBox="0 0 44 44">237 <path d="M24 6 L14 26 H22 L20 38 L30 20 H22 Z" fill="none" stroke="#C9D0D7" stroke-width="3" stroke-linejoin="round"/>238 </svg>239 <div>For You</div>240 </div>241 <div class="nav-item nav-active">242 <svg width="44" height="44" viewBox="0 0 44 44">243 <circle cx="22" cy="22" r="18" fill="none" stroke="#EAF0F7" stroke-width="3"/>244 <text x="22" y="28" font-size="20" text-anchor="middle" fill="#EAF0F7" font-family="Segoe UI, Arial">C</text>245 </svg>246 <div style="border-bottom:3px solid #EAF0F7; padding-bottom:6px;">My Library</div>247 </div>248 <div class="nav-item">249 <div style="position:relative; width:44px; height:44px;">250 <svg width="44" height="44" viewBox="0 0 44 44">251 <path d="M22 8 C30 12 34 20 22 36 C10 20 14 12 22 8 Z" fill="none" stroke="#C9D0D7" stroke-width="3"/>252 </svg>253 <span style="position:absolute; right:-6px; top:-6px; width:16px; height:16px; background:#FF5555; border-radius:8px;"></span>254 </div>255 <div>Pro</div>256 </div>257 </div>258 259</div>260</body>261</html>