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>My Music - Empty State</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 border-radius: 0;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 130px;25 background: #2e78b9;26 color: #fff;27 }28 .status-left {29 position: absolute;30 left: 40px;31 top: 50%;32 transform: translateY(-50%);33 display: flex;34 align-items: center;35 gap: 26px;36 color: #ffffff;37 font-size: 32px;38 opacity: 0.95;39 }40 .status-right {41 position: absolute;42 right: 40px;43 top: 50%;44 transform: translateY(-50%);45 display: flex;46 align-items: center;47 gap: 26px;48 }49 .status-icon {50 width: 38px;51 height: 38px;52 opacity: 0.95;53 }54 55 /* App bar */56 .app-bar {57 position: absolute;58 top: 130px;59 left: 0;60 width: 1080px;61 height: 170px;62 background: #64b5f6;63 color: #fff;64 }65 .app-content {66 position: absolute;67 left: 40px;68 right: 40px;69 top: 50%;70 transform: translateY(-50%);71 display: flex;72 align-items: center;73 justify-content: space-between;74 }75 .title-area {76 display: flex;77 align-items: center;78 gap: 30px;79 }80 .title-text {81 font-size: 56px;82 font-weight: 700;83 letter-spacing: 0.5px;84 }85 .icon-btn {86 width: 64px;87 height: 64px;88 }89 90 /* Sort & meta row */91 .meta-row {92 position: absolute;93 top: 330px;94 left: 40px;95 right: 40px;96 height: 100px;97 display: flex;98 align-items: center;99 justify-content: space-between;100 }101 .items-count {102 font-size: 34px;103 letter-spacing: 3px;104 color: #263238;105 font-weight: 700;106 }107 .sort-area {108 display: flex;109 align-items: center;110 gap: 16px;111 color: #90a4ae;112 font-size: 34px;113 font-weight: 700;114 }115 .sort-icon {116 width: 42px;117 height: 42px;118 }119 120 /* Empty state illustration placeholder */121 .empty-state {122 position: absolute;123 top: 780px;124 left: 50%;125 transform: translateX(-50%);126 text-align: center;127 width: 980px;128 }129 .img-placeholder {130 width: 520px;131 height: 520px;132 margin: 0 auto 60px;133 background: #E0E0E0;134 border: 1px solid #BDBDBD;135 border-radius: 260px;136 display: flex;137 justify-content: center;138 align-items: center;139 color: #757575;140 font-size: 28px;141 text-align: center;142 }143 .empty-text {144 font-size: 48px;145 font-weight: 700;146 color: #263238;147 margin-bottom: 40px;148 }149 150 /* Primary button */151 .primary-btn {152 width: 880px;153 height: 120px;154 margin: 0 auto;155 background: #57a9e9;156 color: #ffffff;157 border-radius: 24px;158 display: flex;159 justify-content: center;160 align-items: center;161 font-size: 42px;162 font-weight: 800;163 box-shadow: 0 6px 0 rgba(0,0,0,0.08) inset;164 }165 166 /* Floating action button */167 .fab {168 position: absolute;169 right: 64px;170 bottom: 220px;171 width: 140px;172 height: 140px;173 background: #ffffff;174 border-radius: 70px;175 box-shadow: 0 8px 24px rgba(0,0,0,0.25);176 display: flex;177 justify-content: center;178 align-items: center;179 }180 .fab svg { width: 70px; height: 70px; }181 182 /* Gesture bar */183 .gesture-bar {184 position: absolute;185 left: 50%;186 bottom: 50px;187 transform: translateX(-50%);188 width: 360px;189 height: 16px;190 background: #CFCFCF;191 border-radius: 8px;192 }193</style>194</head>195<body>196<div id="render-target">197 198 <!-- Top system status bar -->199 <div class="status-bar">200 <div class="status-left">201 <div>11:10</div>202 <svg class="status-icon" viewBox="0 0 24 24">203 <path d="M3 6h18v12H3z" fill="none" stroke="#fff" stroke-width="2"/>204 <path d="M5 8h6l-2 3 2 3H5z" fill="#fff"/>205 </svg>206 <svg class="status-icon" viewBox="0 0 24 24">207 <path d="M6 14a6 6 0 1112 0H6z" fill="#fff"/>208 </svg>209 </div>210 <div class="status-right">211 <svg class="status-icon" viewBox="0 0 24 24">212 <path d="M2 18l6-6 4 4 4-4 6 6" fill="none" stroke="#fff" stroke-width="2"/>213 </svg>214 <svg class="status-icon" viewBox="0 0 24 24">215 <rect x="4" y="4" width="16" height="16" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>216 <rect x="7" y="7" width="10" height="10" fill="#fff"/>217 </svg>218 </div>219 </div>220 221 <!-- App bar -->222 <div class="app-bar">223 <div class="app-content">224 <div class="title-area">225 <!-- Close (X) icon -->226 <svg class="icon-btn" viewBox="0 0 24 24">227 <path d="M5 5L19 19M19 5L5 19" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>228 </svg>229 <div class="title-text">My Music</div>230 </div>231 <!-- More menu (vertical dots) -->232 <svg class="icon-btn" viewBox="0 0 24 24">233 <circle cx="12" cy="5" r="2.2" fill="#ffffff"/>234 <circle cx="12" cy="12" r="2.2" fill="#ffffff"/>235 <circle cx="12" cy="19" r="2.2" fill="#ffffff"/>236 </svg>237 </div>238 </div>239 240 <!-- Meta/Sort row -->241 <div class="meta-row">242 <div class="items-count">0 ITEMS</div>243 <div class="sort-area">244 <svg class="sort-icon" viewBox="0 0 24 24">245 <path d="M12 15l-5-5h10z" fill="#90a4ae"/>246 </svg>247 <div>DATE ADDED</div>248 </div>249 </div>250 251 <!-- Empty state illustration and CTA -->252 <div class="empty-state">253 <div class="img-placeholder">[IMG: Empty state folder illustration]</div>254 <div class="empty-text">Start by adding videos.</div>255 <div class="primary-btn">Upload a video</div>256 </div>257 258 <!-- Floating action button -->259 <div class="fab">260 <svg viewBox="0 0 24 24">261 <!-- Folder -->262 <path d="M3 18V7h6l2 3h10v8H3z" fill="none" stroke="#263238" stroke-width="2" stroke-linejoin="round"/>263 <!-- Plus badge -->264 <circle cx="17.5" cy="15.5" r="4" fill="#fff" stroke="#263238" stroke-width="2"/>265 <path d="M17.5 13.7v3.6M15.7 15.5h3.6" stroke="#263238" stroke-width="2" stroke-linecap="round"/>266 </svg>267 </div>268 269 <!-- Gesture bar -->270 <div class="gesture-bar"></div>271</div>272</body>273</html>