From: 2weiEmu <saalbach.robert@outlook.de>
Date: Tue, 16 Jun 2026 14:22:25 +0000 (+0200)
Subject: added: images and top part of the page now looks right
X-Git-Url: https://git.saalbach.dev/?a=commitdiff_plain;h=c6ece9af862a4c1644b2da6ab8d326ca6d408fd9;p=binbsis50-sm.git

added: images and top part of the page now looks right
---

diff --git a/public/css/index.css b/public/css/index.css
index df176b8..8b745d4 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -20,9 +20,11 @@ h1, a {
 input {
 	background-color: var(--lighter-background);
 	border: none;
-	padding: 12px;
+	padding: 12px 24px 12px 24px;
 	border-radius: 15px;
 	color: var(--green-background);
+	font-size: 16px;
+	font-family: "Sansita", sans-serif;
 }
 
 input:focus {
@@ -32,10 +34,17 @@ input:focus {
 
 #songFilterInputs {
 	display: flex;
+	justify-content: space-between;
+	margin: 0 0 20px 0;
+
+	input {
+		width: 33%;
+	}
 }
 
-#songFilterInputs * {
-	margin: 10px;
+#filterDBImage, #updateSongsButton, #addSongButton {
+	height: 42px;
+	width: 42px;
 }
 
 
@@ -43,8 +52,6 @@ input:focus {
 	overflow-y: scroll;
 	height: 50vh;
 	max-width: 50vw;
-	border: 1px solid grey;
-	border-radius: 10px;
 }
 
 
diff --git a/public/img/add-song-button.png b/public/img/add-song-button.png
new file mode 100644
index 0000000..09ebd13
Binary files /dev/null and b/public/img/add-song-button.png differ
diff --git a/public/img/music-not-present.png b/public/img/music-not-present.png
new file mode 100644
index 0000000..4a18c82
Binary files /dev/null and b/public/img/music-not-present.png differ
diff --git a/public/img/music-present.png b/public/img/music-present.png
new file mode 100644
index 0000000..14ce296
Binary files /dev/null and b/public/img/music-present.png differ
diff --git a/public/img/reload-button.png b/public/img/reload-button.png
new file mode 100644
index 0000000..f2e9566
Binary files /dev/null and b/public/img/reload-button.png differ
diff --git a/public/index.html b/public/index.html
index 288b9ec..77c5e71 100644
--- a/public/index.html
+++ b/public/index.html
@@ -19,18 +19,16 @@
 
 			<div id="songFilterInputs">
 				<input placeholder="Song Name..." id="songFilterName"></input>
-				<input placeholder="Aritst Name..." id="songFilterArtist"></input>
-				<input id="songFilterInDB" type="checkbox">In DB</input>
-				<input id="songFilterNotInDB" type="checkbox">Not In DB</input>
-				<button id="" onclick="getSongList()">Update Songs</button>
-				<button onclick="openCreationMenu()">Create New Song</button>
+				<input placeholder="Artist Name..." id="songFilterArtist"></input>
+				<img id="filterDBImage" src="/img/music-present.png"></img>
+				<img id="updateSongsButton" src="/img/reload-button.png"></img>
+				<img id="addSongButton" src="/img/add-song-button.png"></img>
 			</div>
 
 			<div id="innerSongList">
 			</div>
 
 		</div>
-		<hr>
 		<div>
 			<h1><u>File List</u></h1>
 			<div id="songFileFilterInputs">
diff --git a/public/js/index.js b/public/js/index.js
index 84586d4..88888e7 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -203,7 +203,8 @@ function getSongList() {
 	})
 }
 
-
+let updateSongsButton = document.getElementById("updateSongsButton")
+updateSongsButton.addEventListener("click", (_) => { getSongList() } )
 
 /**
  * SONG FILTERING LOGIC
@@ -215,8 +216,10 @@ let songFilterInput = document.getElementById("songFilterInput")
  **/
 let songFilterName = document.getElementById("songFilterName")
 let songFilterArtist = document.getElementById("songFilterArtist")
-let songFilterInDB = document.getElementById("songFilterInDB")
-let songFilterNotInDB = document.getElementById("songFilterNotInDB")
+
+let filterDBImage = document.getElementById("filterDBImage")
+let dbFilterState = "inDB"
+
 
 /**
  * Get the current state of filters, with fields NameFilter, ArtistFilter, DBFilter
@@ -227,8 +230,8 @@ function getFilterStates() {
 
 	filterStates.NameFilter = songFilterName.value.toLowerCase()
 	filterStates.ArtistFilter = songFilterArtist.value.toLowerCase()
-	filterStates.DBFilter = songFilterInDB.checked
-	filterStates.NotDBFilter = songFilterNotInDB.checked
+	filterStates.DBFilter = dbFilterState == "inDB"
+	filterStates.NotDBFilter = dbFilterState == "notInDB"
 
 	return filterStates
 }
@@ -273,8 +276,20 @@ function updateSongListWithFilter(_) {
 
 songFilterName.oninput = (event) => {updateSongListWithFilter(event)}
 songFilterArtist.oninput = (event) => {updateSongListWithFilter(event)}
-songFilterInDB.oninput = (event) => {updateSongListWithFilter(event)}
-songFilterNotInDB.oninput = (event) => {updateSongListWithFilter(event)}
+
+filterDBImage.addEventListener("click", (_) => {
+	if (dbFilterState == "inDB") {
+		dbFilterState = "notInDB" 
+		filterDBImage.src = "/img/music-not-present.png"
+	}
+	else { 
+		dbFilterState = "inDB"
+		filterDBImage.src = "/img/music-present.png"
+	}
+
+	updateSongListWithFilter(_)
+})
+
 
 /**
  * EDIT MENU FOR SONGS
@@ -382,6 +397,10 @@ let createSongDisplayArtistNames = document.getElementById("createSongDisplayArt
 let createSongDisplayTrackName = document.getElementById("createSongDisplayTrackName")
 let createSongCreateButton = document.getElementById("createSongCreateButton")
 
+let addSongButton = document.getElementById("addSongButton")
+
+addSongButton.addEventListener("click", (_) => { openCreationMenu() })
+
 // making a song -> I want to make clear that there is a strong lack of formatting checking anywhere
 async function createNewSong() {
 
diff --git a/songmanager b/songmanager
index 7551edf..54aed9c 100755
Binary files a/songmanager and b/songmanager differ