JS music player that resembles a sony walkman from 2008 doqmeat.com/notebook/F2U/preview/walkman
html-template
2
fork

Configure Feed

Select the types of activity you want to include in your feed.

made CSS to be more specific after some feedback

+258 -260
+258 -260
style.css
··· 1 - * { 2 - box-sizing: border-box; 3 - } 4 - 5 - body { 6 - font-family: arial; 7 - } 8 - 9 1 /* mp3 player wrapper */ 10 2 #music { 3 + box-sizing: border-box; 11 4 position: relative; 12 5 font-family: arial, nerdfont; 13 6 padding-top: 1px; ··· 24 17 transition-duration: 0.5s; 25 18 border-radius: 10px; 26 19 overflow: hidden; 27 - } 28 20 29 - /* album cover */ 30 - #album { 31 - background: white; 32 - color: black; 33 - border: 1px solid white; 34 - width: 40%; 35 - margin: 0 0 0 5px; 36 - } 21 + /* so every element has the same box-sizing */ 22 + * { 23 + box-sizing: border-box; 24 + } 37 25 38 - /* 1/? tracks playing */ 39 - #now-playing { 40 - display: inline-block; 41 - position: absolute; 42 - float: right; 43 - margin-top: 30%; 44 - margin-left: 40%; 45 - } 26 + /* album cover */ 27 + #album { 28 + background: white; 29 + color: black; 30 + border: 1px solid white; 31 + width: 40%; 32 + margin: 0 0 0 5px; 33 + } 46 34 47 - /* line below album cover */ 48 - hr { 49 - margin: 1px 0px; 50 - padding: 0px; 51 - } 35 + /* 1/? tracks playing */ 36 + #now-playing { 37 + display: inline-block; 38 + position: absolute; 39 + float: right; 40 + margin-top: 30%; 41 + margin-left: 40%; 42 + } 52 43 53 - /* controls grid */ 54 - #controls { 55 - background: #ba3f3f; 56 - position: relative; 57 - display: grid; 58 - border: 2px solid rgb(213, 213, 213); 59 - width: 63%; 60 - height: 30%; 61 - margin: auto; 62 - margin-top: 10px; 63 - grid-template-columns: 33% 33% 33%; 64 - grid-template-rows: 33% 33% 33%; 65 - padding: 0px; 66 - border-radius: 50%; 67 - } 44 + /* line below album cover */ 45 + hr { 46 + margin: 1px 0px; 47 + padding: 0px; 48 + } 68 49 69 - /* buttons in controls CSS */ 70 - #controls button { 71 - cursor: pointer; 72 - font-family: nerdfont, arial; 73 - font-size: 13px; 74 - background: inherit; 75 - border: none; 76 - border-radius: 50%; 77 - color: #692222; 78 - margin: 0px; 79 - text-shadow: 2px -1px 2px rgba(225, 212, 212, 0.815); 80 - } 50 + /* controls grid */ 51 + #controls { 52 + background: #ba3f3f; 53 + position: relative; 54 + display: grid; 55 + border: 2px solid rgb(213, 213, 213); 56 + width: 63%; 57 + height: 30%; 58 + margin: auto; 59 + margin-top: 10px; 60 + grid-template-columns: 33% 33% 33%; 61 + grid-template-rows: 33% 33% 33%; 62 + padding: 0px; 63 + border-radius: 50%; 64 + } 81 65 82 - /* since these buttons don't do anything, they have a 'blocked' cursor */ 83 - #controls button.down { 84 - cursor: not-allowed; 85 - } 66 + /* buttons in controls CSS */ 67 + #controls button { 68 + cursor: pointer; 69 + font-family: nerdfont, arial; 70 + font-size: 13px; 71 + background: inherit; 72 + border: none; 73 + border-radius: 50%; 74 + color: #692222; 75 + margin: 0px; 76 + text-shadow: 2px -1px 2px rgba(225, 212, 212, 0.815); 77 + } 86 78 87 - /* the two mini curcle buttons */ 88 - button#playlist-btn, 89 - button#current-song-btn { 90 - position: relative; 91 - border: 1px solid rgb(213, 213, 213); 92 - background: #ba3f3f; 93 - color: white; 94 - font-size: 10px; 95 - text-align: center; 96 - border-radius: 50%; 97 - z-index: 20; 98 - } 79 + /* since these buttons don't do anything, they have a 'blocked' cursor */ 80 + #controls button.down { 81 + cursor: not-allowed; 82 + } 99 83 100 - /* play pause button */ 101 - button#play-pause { 102 - color: white; 103 - border: 1px solid rgb(39, 11, 11); 104 - border-radius: 50%; 105 - font-size: 14px; 106 - } 84 + /* the two mini curcle buttons */ 85 + button#playlist-btn, 86 + button#current-song-btn { 87 + position: relative; 88 + border: 1px solid rgb(213, 213, 213); 89 + background: #ba3f3f; 90 + color: white; 91 + font-size: 10px; 92 + text-align: center; 93 + border-radius: 50%; 94 + z-index: 20; 95 + } 107 96 108 - /* screen wrapper */ 109 - #screen { 110 - position: relative; 111 - background: rgb(39, 36, 36); 112 - text-align: left; 113 - margin: auto; 114 - width: 100%; 115 - height: 63%; 116 - border: 20px solid black; 117 - border-top-width: 30px; 118 - border-bottom-width: 30px; 119 - font-size: 10px; 120 - letter-spacing: 1px; 121 - line-height: 13px; 122 - overflow: hidden; 123 - color: white; 124 - scrollbar-color: rgb(173, 173, 173) transparent; 125 - } 97 + /* play pause button */ 98 + button#play-pause { 99 + color: white; 100 + border: 1px solid rgb(39, 11, 11); 101 + border-radius: 50%; 102 + font-size: 14px; 103 + } 126 104 127 - /* screen class (for playlist and currently playing song)*/ 128 - .screen { 129 - position: relative; 130 - overflow: auto; 131 - height: 83.4%; 132 - } 105 + /* screen wrapper */ 106 + #screen { 107 + position: relative; 108 + background: rgb(39, 36, 36); 109 + text-align: left; 110 + margin: auto; 111 + width: 100%; 112 + height: 63%; 113 + border: 20px solid black; 114 + border-top-width: 30px; 115 + border-bottom-width: 30px; 116 + font-size: 10px; 117 + letter-spacing: 1px; 118 + line-height: 13px; 119 + overflow: hidden; 120 + color: white; 121 + scrollbar-color: rgb(173, 173, 173) transparent; 122 + } 133 123 134 - /* playlist songs listing */ 135 - #playlist button { 136 - color: white; 137 - text-align: left; 138 - display: block; 139 - width: 100%; 140 - padding: 0px; 141 - margin: 0px; 142 - background: transparent; 143 - font-family: inherit; 144 - font-size: inherit; 145 - border: 1px solid transparent; /* this is here so it doesn't move when hovered */ 146 - } 124 + /* screen class (for playlist and currently playing song)*/ 125 + .screen { 126 + position: relative; 127 + overflow: auto; 128 + height: 83.4%; 129 + } 147 130 148 - #playlist button:hover { 149 - cursor: pointer; 150 - background: #fdaa03; 151 - background: linear-gradient( 152 - 360deg, 153 - rgba(253, 170, 3, 1) 0%, 154 - rgba(255, 217, 140, 1) 91% 155 - ); 156 - color: black; 157 - border: 1px solid #f79501; 158 - } 131 + /* playlist songs listing */ 132 + #playlist button { 133 + color: white; 134 + text-align: left; 135 + display: block; 136 + width: 100%; 137 + padding: 0px; 138 + margin: 0px; 139 + background: transparent; 140 + font-family: inherit; 141 + font-size: inherit; 142 + border: 1px solid transparent; /* this is here so it doesn't move when hovered */ 143 + } 159 144 160 - /* button text */ 161 - #playlist button span { 162 - margin: 4px 4px; 163 - display: inline-block; 164 - vertical-align: middle; 165 - width: 70%; 166 - font-size: 10px; 167 - line-height: 13px; 168 - } 145 + #playlist button:hover { 146 + cursor: pointer; 147 + background: #fdaa03; 148 + background: linear-gradient( 149 + 360deg, 150 + rgba(253, 170, 3, 1) 0%, 151 + rgba(255, 217, 140, 1) 91% 152 + ); 153 + color: black; 154 + border: 1px solid #f79501; 155 + } 169 156 170 - /* button album cover */ 171 - #playlist button img { 172 - display: inline-block; 173 - vertical-align: middle; 174 - line-height: 0px; 175 - width: 30px; 176 - border: 1px solid grey; 177 - margin: 4px 4px; 178 - } 157 + /* button text */ 158 + #playlist button span { 159 + margin: 4px 4px; 160 + display: inline-block; 161 + vertical-align: middle; 162 + width: 70%; 163 + font-size: 10px; 164 + line-height: 13px; 165 + } 179 166 180 - /* currently playing screen music info */ 181 - p.info { 182 - margin: 4px 4px; 183 - padding: 0; 184 - } 167 + /* button album cover */ 168 + #playlist button img { 169 + display: inline-block; 170 + vertical-align: middle; 171 + line-height: 0px; 172 + width: 30px; 173 + border: 1px solid grey; 174 + margin: 4px 4px; 175 + } 185 176 186 - /* icons */ 187 - .icon { 188 - color: rgb(173, 174, 176); 189 - font-size: 12px; 190 - } 177 + /* currently playing screen music info */ 178 + p.info { 179 + margin: 4px 4px; 180 + padding: 0; 181 + } 191 182 192 - #top-bar { 193 - background: #454343; 194 - background: linear-gradient( 195 - 360deg, 196 - rgb(108, 108, 108) 0%, 197 - rgb(71, 71, 71) 100% 198 - ); 199 - width: 100%; 200 - text-align: center; 201 - font-size: 9px; 202 - padding: 1px; 203 - margin: 0px; 204 - } 183 + /* icons */ 184 + .icon { 185 + color: rgb(173, 174, 176); 186 + font-size: 12px; 187 + } 205 188 206 - #bottom-bar { 207 - background: #454343; 208 - background: linear-gradient( 209 - 360deg, 210 - rgb(29, 28, 28) 0%, 211 - rgb(149, 149, 149) 100% 212 - ); 213 - width: 100%; 214 - font-size: 9px; 215 - line-height: 0px; 216 - padding: 0px; 217 - margin: 0px; 218 - } 189 + #top-bar { 190 + background: #454343; 191 + background: linear-gradient( 192 + 360deg, 193 + rgb(108, 108, 108) 0%, 194 + rgb(71, 71, 71) 100% 195 + ); 196 + width: 100%; 197 + text-align: center; 198 + font-size: 9px; 199 + padding: 1px; 200 + margin: 0px; 201 + } 202 + 203 + #bottom-bar { 204 + background: #454343; 205 + background: linear-gradient( 206 + 360deg, 207 + rgb(29, 28, 28) 0%, 208 + rgb(149, 149, 149) 100% 209 + ); 210 + width: 100%; 211 + font-size: 9px; 212 + line-height: 0px; 213 + padding: 0px; 214 + margin: 0px; 215 + } 219 216 220 - /* current song playing in playlist screen */ 221 - #bottom-bar #current { 222 - display: inline; 223 - } 217 + /* current song playing in playlist screen */ 218 + #bottom-bar #current { 219 + display: inline; 220 + } 224 221 225 - /* current time of song */ 226 - #bottom-bar span { 227 - display: inline-block; 228 - padding: 7px; 229 - } 222 + /* current time of song */ 223 + #bottom-bar span { 224 + display: inline-block; 225 + padding: 7px; 226 + } 230 227 231 - /* emoji that a song is playing */ 232 - span#current-song-emoji { 233 - font-size: 10px; 234 - padding-left: 0px; 235 - padding-right: 0px; 236 - } 228 + /* emoji that a song is playing */ 229 + span#current-song-emoji { 230 + font-size: 10px; 231 + padding-left: 0px; 232 + padding-right: 0px; 233 + } 237 234 238 - /* scrolling name of current song playing */ 239 - span#current-song-playing { 240 - display: inline-block; 241 - padding: 0px; 242 - width: 80px; 243 - line-height: 10px; 244 - } 235 + /* scrolling name of current song playing */ 236 + span#current-song-playing { 237 + display: inline-block; 238 + padding: 0px; 239 + width: 80px; 240 + line-height: 10px; 241 + } 245 242 246 - /* playing status icon in the bar */ 247 - #playing-status { 248 - font-size: 13px; 249 - padding-left: 5px; 250 - color: rgb(217, 217, 217); 251 - } 243 + /* playing status icon in the bar */ 244 + #playing-status { 245 + font-size: 13px; 246 + padding-left: 5px; 247 + color: rgb(217, 217, 217); 248 + } 252 249 253 - /* battery icon in the bar */ 254 - #battery { 255 - font-family: nerdfont; 256 - padding-top: 10px; 257 - padding-right: 4px; 258 - font-size: 13px; 259 - float: right; 260 - } 250 + /* battery icon in the bar */ 251 + #battery { 252 + font-family: nerdfont; 253 + padding-top: 10px; 254 + padding-right: 4px; 255 + font-size: 13px; 256 + float: right; 257 + } 261 258 262 - /* song progress bar */ 263 - .track-progress { 264 - accent-color: rgb(96, 155, 226); 265 - -webkit-appearance: none; 266 - cursor: help; 267 - width: 100%; 268 - height: 4px; 269 - padding: 0px; 270 - margin: 0px; 271 - background: #454343; 272 - background: linear-gradient( 273 - 360deg, 274 - rgb(68, 68, 68) 0%, 275 - rgb(129, 129, 129) 100% 276 - ); 277 - border-bottom: 1px solid black; 278 - } 259 + /* song progress bar */ 260 + .track-progress { 261 + accent-color: rgb(96, 155, 226); 262 + -webkit-appearance: none; 263 + cursor: help; 264 + width: 100%; 265 + height: 4px; 266 + padding: 0px; 267 + margin: 0px; 268 + background: #454343; 269 + background: linear-gradient( 270 + 360deg, 271 + rgb(68, 68, 68) 0%, 272 + rgb(129, 129, 129) 100% 273 + ); 274 + border-bottom: 1px solid black; 275 + } 279 276 280 - /* song progress bar - thumb */ 281 - /* chrome */ 282 - .track-progress::-webkit-slider-thumb { 283 - -webkit-appearance: none; 284 - appearance: none; 285 - height: 4px; 286 - width: 2px; 287 - background: rgb(96, 155, 226); 288 - cursor: pointer; 289 - border: none; 290 - border-radius: 0px; 291 - } 277 + /* song progress bar - thumb */ 278 + /* chrome */ 279 + .track-progress::-webkit-slider-thumb { 280 + -webkit-appearance: none; 281 + appearance: none; 282 + height: 4px; 283 + width: 2px; 284 + background: rgb(96, 155, 226); 285 + cursor: pointer; 286 + border: none; 287 + border-radius: 0px; 288 + } 292 289 293 - /* firefox */ 294 - .track-progress::-moz-range-thumb { 295 - height: 2.6px; 296 - width: 2px; 297 - background: rgb(96, 155, 226); 298 - cursor: pointer; 299 - border: none; 300 - border-radius: 0px; 301 - } 290 + /* firefox */ 291 + .track-progress::-moz-range-thumb { 292 + height: 2.6px; 293 + width: 2px; 294 + background: rgb(96, 155, 226); 295 + cursor: pointer; 296 + border: none; 297 + border-radius: 0px; 298 + } 302 299 303 - /* song progress - bar progress */ 304 - /* only on firefox */ 305 - .track-progress::-moz-range-progress { 306 - background: rgb(96, 155, 226); 300 + /* song progress - bar progress */ 301 + /* only on firefox */ 302 + .track-progress::-moz-range-progress { 303 + background: rgb(96, 155, 226); 304 + } 307 305 } 308 306 309 307 /* tooltip custom css */