savanni
/
monorepo
1
0
Fork 0
Code Issues 69 Pull Requests Projects 6 Releases Wiki Activity

Set up a prototype UI

This commit is contained in:
Savanni D'Gerinel 2023-01-28 01:54:35 -05:00
parent 1f8a0215dc
commit dfd755ed0a
4 changed files with 108 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -1,2 +1,4 @@
target
.direnv/
node_modules
dist

69
music-player/client/index.html
View File

@ -3,12 +3,77 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css" type="text/css" />
<title>Music Player</title>
</head>
<body>
<h1 class="js-title">Placeholder Title</h1>
<div class="currently-playing"> <span class="track-title"> Lindsey Sterling - Elements </span> <span class="player-status">[paused]</span> </div>
<div class="controls"><button class="play-pause">Pause</button></div>
<div class="track-list">
<div class="track-list__grouping">
<ul class="bulletless-list">
<li> By Artist </li>
<li> By Album </li>
<li> Work Music </li>
<li> Dance Music </li>
</ul>
</div>
<div class="track-list__tracks">
<table>
<thead>
<tr>
<th> Track # </th>
<th> Title </th>
<th> Artist </th>
<th> Album </th>
<th> Length </th>
</tr>
</thead>
<tbody>
<tr class="track-list__track-row">
<td> 1 </td>
<td> Underground </td>
<td> Lindsey Stirling </td>
<td> Artemis </td>
<td> 4:24 </td>
</tr>
<tr class="track-list__track-row">
<td> 2 </td>
<td> Artemis </td>
<td> Lindsey Stirling </td>
<td> Artemis </td>
<td> 3:54 </td>
</tr>
<tr class="track-list__track-row">
<td> 3 </td>
<td> Til the Light Goes Out </td>
<td> Lindsey Stirling </td>
<td> Artemis </td>
<td> 4:46 </td>
</tr>
<tr class="track-list__track-row">
<td> 4 </td>
<td> Between Twilight </td>
<td> Lindsey Stirling </td>
<td> Artemis </td>
<td> 4:20 </td>
</tr>
<tr class="track-list__track-row">
<td> 5 </td>
<td> Foreverglow </td>
<td> Lindsey Stirling </td>
<td> Artemis </td>
<td> 3:58 </td>
</tr>
</tbody>
</table>
</div>
</div>
<p class="js-weather"></p>
<script src="./lodash.js" type="module"></script>
<script src="./dist/main.js" type="module"></script>

1
music-player/client/package.json
View File

@ -14,7 +14,6 @@
},
"devDependencies": {
"@types/lodash": "^4.14.191",
"live-server": "^1.2.2",
"typescript": "^4.9.4"
}
}

39
music-player/client/styles.css Normal file
View File

@ -0,0 +1,39 @@
body {
background-color: rgb(240, 230, 230);
}
.currently-playing {
padding: 8px;
}
.controls {
padding: 8px;
}
.track-list {
border: 1px solid black;
display: flex;
}
.track-list__grouping {
padding: 8px;
border-style: solid;
border-width: 0px 5px 0px 0px;
}
.bulletless-list {
list-style: none;
}
.track-list__track-row {
background-color: rgb(10, 10, 10);
}
.track-list__track-row:nth-child(even) {
background-color: rgb(255, 255, 255);
}
.track-list__track-row:nth-child(odd) {
background-color: rgb(200, 200, 200);
}