From e8d49ff29629c3e12ae1e8bbcd2449fa92b90d4e Mon Sep 17 00:00:00 2001
From: 2weiEmu <saalbach.robert@outlook.de>
Date: Fri, 22 May 2026 22:30:22 +0200
Subject: [PATCH] updated: just working on the design

---
 public/css/index.css |  25 +++++++++++++++++++++++++
 public/js/index.js   |  24 +++++++++++++++++-------
 songmanager          | Bin 11691100 -> 11691100 bytes
 3 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/public/css/index.css b/public/css/index.css
index 826e097..b68a18b 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -4,5 +4,30 @@
 
 
 .songElement {
+	display: flex;
+	margin: 10px;
 
+	* {
+		margin: auto 10px auto 10px;
+	}
+
+	p {
+		font-size: 16px;
+	}
+
+	img {
+		height: 60px;
+		width: 60px;
+	}
+
+	.songElementBy, .songElementId {
+		font-size: 12px;
+	}
+
+	.songElementCheck {
+		padding: 0;
+		font-size: 2.25rem;
+		line-height: 2.25rem;
+
+	}
 }
diff --git a/public/js/index.js b/public/js/index.js
index 62e7815..6c18802 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -21,12 +21,13 @@ let innerSongList = document.getElementById("innerSongList")
  **/
 /*
 <div songId="[ID OF SONG (just number)]" id="SONG:XX" class="songElement">
-	<p>✅</p> // or false
-	<p>SONG NAME</p> BY
-	<p>ARTIST NAME</p>
+	<p class="songElementCheck">✅</p> // or false
 	<img></img> // HERE WOULD GO THE IMAGE
 	<button>EDIT</button>
-	<p>ID: []</p>
+	<p class="songElementName">SONG NAME</p>
+	<p class="songElementBy">by</p>
+	<p class="songElementArtist">ARTIST NAME</p>
+	<p class="songElementId">ID: []</p>
 </div>
 */
 function NewSongElement(exists, songName, artistName, imageUrl, id) {
@@ -40,12 +41,19 @@ function NewSongElement(exists, songName, artistName, imageUrl, id) {
 	if (exists) {
 		check.innerText = "✅"
 	}
+	check.classList = "songElementCheck"
 
 	let songNameP = document.createElement("p")
 	songNameP.innerText = songName
+	songNameP.classList = "songElementName"
+
+	let byP = document.createElement("p")
+	byP.innerText = "by"
+	byP.classList = "songElementBy"
 
 	let artistNameP = document.createElement("p")
 	artistNameP.innerText = artistName
+	artistNameP.classList = "songElementArtist"
 
 	let image = document.createElement("img")
 	image.src = imageUrl
@@ -55,12 +63,14 @@ function NewSongElement(exists, songName, artistName, imageUrl, id) {
 	
 	let idP = document.createElement("p")
 	idP.innerText = id
+	idP.classList = "songElementId"
 
 	wrapper.appendChild(check)
-	wrapper.appendChild(songNameP)
-	wrapper.appendChild(artistNameP)
 	wrapper.appendChild(image)
 	wrapper.appendChild(editButton)
+	wrapper.appendChild(songNameP)
+	wrapper.appendChild(byP)
+	wrapper.appendChild(artistNameP)
 	wrapper.appendChild(idP)
 
 	return wrapper
@@ -107,7 +117,7 @@ let songFilterInput = document.getElementById("songFilterInput")
 
 
 
-
+getSongList()
 
 // ==============================================================
 /*
diff --git a/songmanager b/songmanager
index cee7e082ff8f04c9565035bd41a5aaeeacef3af8..635b639d702224facb2020d8d86a73a08b6d97ea 100755
GIT binary patch
delta 1037
zcmca};v_2wZ^+@VHx2SN^v)?xtc*7(HZRO_@iQ}s&@ZjZ3d%9cGDtNmGBWlIEcK77
z2-43jEiNuC2`li;_Q~)JFe*1JDyh)dO%E_}DXTPc^p7-hbt!btC@J)3U}0cj5Mf|o
zU}j)oaQ6#kkT%`2<3Z-9;5XIlnA)Fzn5<mEb5B1fGs(<Ezxg$P`)hv2_SgJO?XUTn
z+h6muw7=$OZGX+r*8ZBGz5O*mNBe7j&i2>*T<x#<x!Yg!^R&O_=WTz@&)5E%AEZ~H
z{WZT}`)huo_SgKv?XUSo+F$dFw!h{VYk$oz-u{|jqWv|$WczD=srJ|W((SMLW!hi!
z%eKGfmur8`FW>%}U!naqzhe7qex>%;{L1aG`BmCq^Q*SM=2vTf&9C16nqQ;+HNR&2
zYksZv*ZkV;ulaS_U-Rp>zvkC#f6cGo{+i#Q{WZT~`)huq_SgKz?XUSw+F$dVw!h{#
zYk$pe-u{~3qWv|$W&3M>tM=FY*6pwPZQ5V++qS>vw`+gRZ{Pl!-=Y0AzhnDrey8@=
z{LbyK`CZyy^Sidc=67p<&F{YbHNS^QsECoFiIJtLk*-maiJ^f-QktQeN%Hp2h7w+8
z4P+rh%S4mZ#1tb_%T!BK^ORIe3lk$#^Q5Fi6HBA%`<hE6xr{;#O{|P8txS!kKWr{B
zZC{Y#(Y_$VvwcB^SNnnt@Ad^5KJ5!KeA^df__Z&{@NZv`5zxLMBd~ozMo{~LjNtYK
z86oWpGD6!IWQ4UZ$Ovy=kP*?oAS1GUK}J;jf{f_)1sO5z3o>Hc7i7e>FUW{*UyzZ|
zz91v9eL+T2`+|(*_5~R!?F%we+ZSY{wJ*p>Z(op+(Y_!fvwcBER{MgC?Dhp2IqeHF
za@!YV<h3uz$ZubeQP931qp*EJMp65MjN<JJGD@zB(;_(9A2ye?KWr{-f7o2s{;;{c
z{b6%O`@`nS_J_???GKx)+aEU9v_EXFZGYHY*Z#1%zWrfyL;J(##`cHJP3;exo7*2Y
zx3oWOZf$?q+}8fExxM{ib4UBb=Fawq&0Xyeo4eZ|HutnYZ0>D;*xc9tu(`keVe^Fc
zhs_h)A2v^Ff7m>^{bBQz_J_?=+aEShYk$~0z5QYHjP{4kGut0F&uV|zJiGm2^PKjF
z&2!ryHqUE+*gU`eVe^9ahs_JyA2u&)f7raZ{bBQx_J_?&+aESBYk%0hy!~PGiuQ-i
qE88D7uWEnTyt@5i^P2XD&1>5qHm_@c*u1{|Ve^LV51ThuKL7w0;>@@J

delta 1037
zcmca};v_2wZ^+@Vck(MY3@|SUGS77hF7@zFOgB$8)z3A|b<PP%EVXb8&W*IpDRr~(
zanjE%EiNuC2`li;_Q~)JFe*1JDyh&<^3HL}FLur{2`D#>^sw{~FDocyU}0cj5Mf|o
zU}j)oaQ6#knBh6sZ`-&3?$0XL1s*;7i~G3Amt_5%%p@}t{pQ#F?XUS6+h6lDwZG<P
zZhy_s(*ByCwf!|eTl;H%_V(BO9PO|9Ion_JbG5(b=Wc(^&(r>zpSS%rKVSQ6evn>)
z_SgJ^?XUTT+F$bvx4-5WX@AWx+Wwkfto=2=c>8O9iT2n0lI^egrP^QfOSiw~muY{^
zFWdf_U#|T%zkK^^euehe{EF?b`IXvV^DDQ%=2vNd&9B=2nqRH`HNSfMYkrOP*Zi98
zulcpwU-N6XzvkCzf6cGk{+eH}{WZUS`)huK_SgJ|?XUTb+F$b<x4-5$X@AXc+Wwl~
zto=2=dHZXAi}u(2mhG?kt=eDnTerXFw`qUPZ`=Nw->&^NzkT~_euwtg{EqFf`JLKd
z^E<b{=67j-&F|X&n%}McHNX4z*ZdwLp(2KcriPZL7P@Ik25FYbmgcF+X@=W78%lVY
zHIRi&%~A{#Qw%K)4NZ;HOw5u@O^r>>4ULnM3@l8i?`tlR<T4B~G_^9cv@*4r{;;{k
zw0%K_NBe>d&-MiwUhNAqyxSLK__Qy`@NHj^;n%((!@qq&MnL<5jKKB<8A0s}GJ@L|
zWQ4RY$Ovs;kP+6tAS1keK}JOTf{e)a1sPH83o@eH7i7e=FUW{(Uyu>kz91vMeL+S-
z`+|(b_5~S9?F%xJ+ZSY{v@gg=ZC{X)*1jMky?sGOM*D({%=QHtS?volvfCGA<g_oy
z$ZcPck=MQ;Bfot?MnU_6jKcN>8Aa_2GK#k^$SAogPK)4Zf7o2o{;;{U{b6%i`@`n)
z_J_?C?GKwP+aESpwLfgGZhzQZ)Bdozw*6sqUHil4`u2y-4ebw`8`~c?H?==(Zf<|r
z+|vHAxwZXab6fkv=Jxi7%^mFzn>*VdHg~l@Z0>G<*xb|pu(`MWVRK*m!{+|>hs_h(
zA2v^Hf7m>!{bBRu_J_?=+8;JgZGYH2t^Hy1^!A6%Guj_E&uo9#Jgfa-^X&GA&2!ox
zHqUK;*gUWOVe|a<hs_JxA2u&+f7raJ{bBRs_J_?&+8;JAZGYIjto>p0^7e<#E7~76
quWWzVysG_S^Xm48&1>2pHm_}e*u1X&Ve|U-hs_(dKWyGu{Qv-sC(mmD

-- 
2.54.0