This commit is contained in:
eworc778 2025-08-25 22:06:24 +01:00
commit 5cc415ab46
14 changed files with 141 additions and 13 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

BIN
src/img/album-art/hits.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 KiB

BIN
src/img/album-art/more.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 143 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 102 KiB

BIN
src/img/album-art/wish.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

1
src/img/back.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="-0.23 -0.72 1022.97 1021.62"><path d="M222.927 580.115l301.354 328.512c24.354 28.708 20.825 71.724-7.883 96.078s-71.724 20.825-96.078-7.883L19.576 559.963a67.846 67.846 0 01-13.784-20.022 68.03 68.03 0 01-5.977-29.488l.001-.063a68.343 68.343 0 017.265-29.134 68.28 68.28 0 011.384-2.6 67.59 67.59 0 0110.102-13.687L429.966 21.113c25.592-27.611 68.721-29.247 96.331-3.656s29.247 68.721 3.656 96.331L224.088 443.784h730.46c37.647 0 68.166 30.519 68.166 68.166s-30.519 68.166-68.166 68.166H222.927z"/></svg>

After

Width:  |  Height:  |  Size: 568 B

View File

@ -1,10 +1,15 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg" style="--darkreader-inline-fill: var(--darkreader-background-000000, #000000);" data-darkreader-inline-fill="">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier">
<title>Gitea icon</title>
<path d="M4.186 5.421C2.341 5.417-.13 6.59.006 9.531c.213 4.594 4.92 5.02 6.801 5.057.206.862 2.42 3.834 4.059 3.99h7.18c4.306-.286 7.53-13.022 5.14-13.07-3.953.186-6.296.28-8.305.296v3.975l-.626-.277-.004-3.696c-2.306-.001-4.336-.108-8.189-.298-.482-.003-1.154-.085-1.876-.087zm.261 1.625h.22c.262 2.355.688 3.732 1.55 5.836-2.2-.26-4.072-.899-4.416-3.285-.178-1.235.422-2.524 2.646-2.552zm8.557 2.315c.15.002.303.03.447.096l.749.323-.537.979a.672.597 0 0 0-.241.038.672.597 0 0 0-.405.764.672.597 0 0 0 .112.174l-.926 1.686a.672.597 0 0 0-.222.038.672.597 0 0 0-.405.764.672.597 0 0 0 .86.36.672.597 0 0 0 .404-.765.672.597 0 0 0-.158-.22l.902-1.642a.672.597 0 0 0 .293-.03.672.597 0 0 0 .213-.112c.348.146.633.265.838.366.308.152.417.253.45.365.033.11-.003.322-.177.694-.13.277-.345.67-.599 1.133a.672.597 0 0 0-.251.038.672.597 0 0 0-.405.764.672.597 0 0 0 .86.36.672.597 0 0 0 .404-.764.672.597 0 0 0-.137-.202c.251-.458.467-.852.606-1.148.188-.402.286-.701.2-.99-.086-.289-.35-.477-.7-.65-.23-.113-.517-.233-.86-.377a.672.597 0 0 0-.038-.239.672.597 0 0 0-.145-.209l.528-.963 2.924 1.263c.528.229.746.79.49 1.26l-2.01 3.68c-.257.469-.888.663-1.416.435l-4.137-1.788c-.528-.228-.747-.79-.49-1.26l2.01-3.679c.176-.323.53-.515.905-.53h.064z"/>
</g>
</svg>
<svg fill="#000000" role="img" xmlns="http://www.w3.org/2000/svg" style="--darkreader-inline-fill: var(--darkreader-background-000000, #000000);" data-darkreader-inline-fill="" viewBox="0 5.4 24 13.2">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier">
<title>Gitea icon</title>
<path d="M4.186 5.421C2.341 5.417-.13 6.59.006 9.531c.213 4.594 4.92 5.02 6.801 5.057.206.862 2.42 3.834 4.059 3.99h7.18c4.306-.286 7.53-13.022 5.14-13.07-3.953.186-6.296.28-8.305.296v3.975l-.626-.277-.004-3.696c-2.306-.001-4.336-.108-8.189-.298-.482-.003-1.154-.085-1.876-.087zm.261 1.625h.22c.262 2.355.688 3.732 1.55 5.836-2.2-.26-4.072-.899-4.416-3.285-.178-1.235.422-2.524 2.646-2.552zm8.557 2.315c.15.002.303.03.447.096l.749.323-.537.979a.672.597 0 0 0-.241.038.672.597 0 0 0-.405.764.672.597 0 0 0 .112.174l-.926 1.686a.672.597 0 0 0-.222.038.672.597 0 0 0-.405.764.672.597 0 0 0 .86.36.672.597 0 0 0 .404-.765.672.597 0 0 0-.158-.22l.902-1.642a.672.597 0 0 0 .293-.03.672.597 0 0 0 .213-.112c.348.146.633.265.838.366.308.152.417.253.45.365.033.11-.003.322-.177.694-.13.277-.345.67-.599 1.133a.672.597 0 0 0-.251.038.672.597 0 0 0-.405.764.672.597 0 0 0 .86.36.672.597 0 0 0 .404-.764.672.597 0 0 0-.137-.202c.251-.458.467-.852.606-1.148.188-.402.286-.701.2-.99-.086-.289-.35-.477-.7-.65-.23-.113-.517-.233-.86-.377a.672.597 0 0 0-.038-.239.672.597 0 0 0-.145-.209l.528-.963 2.924 1.263c.528.229.746.79.49 1.26l-2.01 3.68c-.257.469-.888.663-1.416.435l-4.137-1.788c-.528-.228-.747-.79-.49-1.26l2.01-3.679c.176-.323.53-.515.905-.53h.064z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -1,3 +1,2 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="2 1.35 20 20.67">
<path d="M22 16V3.36611C22 2.12848 20.8873 1.18793 19.6669 1.39403L8.66694 3.25181C7.70452 3.41435 7 4.24784 7 5.22388V14.126C6.68038 14.0438 6.3453 14 6 14C3.79086 14 2 15.7909 2 18C2 20.2091 3.79086 22 6 22C8.20914 22 10 20.2091 10 18V6.06916L19 4.54916V12.126C18.6804 12.0438 18.3453 12 18 12C15.7909 12 14 13.7909 14 16C14 18.2091 15.7909 20 18 20C20.2091 20 22 18.2091 22 16Z" fill="#000000" style="--darkreader-inline-fill: var(--darkreader-background-000000, #000000);" data-darkreader-inline-fill=""/>
</svg>

Before

Width:  |  Height:  |  Size: 595 B

After

Width:  |  Height:  |  Size: 589 B

View File

@ -37,7 +37,7 @@
<img src="./img/music-note.svg" class="link-icon">
<p class="link-card-text">Tunes</p>
<p class="link-card-text">Music</p>
</div>
</a>

View File

@ -20,7 +20,7 @@ p, h1, h2, h3, h4 {
text-align: center;
border-radius: 10px;
padding: 10px;
margin-top: 5%;
margin-top: 10%;
}
@ -108,6 +108,48 @@ a {
}
.album-art{
border-radius: 10px;
width: 128px;
}
.track-list-container{
border-radius: 10px;
}
.track-card{
margin: 5px;
padding: 10px;
border-radius: 10px;
display: inline-block;
max-width: fit-content;
}
.home-button{
background-color: #2ac3de;
position:fixed;
top:0;
width:10%;
z-index:100;
max-width: fit-content;
margin-top: 10px;
padding: 5px;
border-radius: 10px;
}
.link-card{

View File

@ -9,5 +9,86 @@
</head>
<body>
<script src="index.js"></script>
<a href="./index.php">
<div class="home-button">
<img src="./img/back.svg" style="height: 16px; width: 16px;">
</div>
</a>
<div class="centered-div intro-div">
<h3>Here's some of my favourite music!</h3>
</div>
<div class="centered-div track-list-container" style="width: 100%;">
<div class="track-card" style="background-color: #bb9af7;">
<img class="album-art" src="./img/album-art/hits.jpg">
<div class="track-info">
<p>Common People</p>
<p>Hits</p>
<p>Pulp</p>
</div>
</div>
<div class="track-card" style="background-color: #9ece6a;">
<img class="album-art" src="./img/album-art/travelling-without-moving.jpg">
<div class="track-info">
<p>Travelling Without Moving</p>
<p>Travelling Without Moving</p>
<p>Jamiroquai</p>
</div>
</div>
<div class="track-card" style="background-color: #e0af68;">
<img class="album-art" src="./img/album-art/boys-dont-cry.jpg">
<div class="track-info">
<p>Boys Don't Cry</p>
<p>Boys Don't Cry</p>
<p>The Cure</p>
</div>
</div>
<div class="track-card" style="background-color: #f7768e;">
<img class="album-art" src="./img/album-art/more.jpg">
<div class="track-info">
<p>Grown Ups</p>
<p>More</p>
<p>Pulp</p>
</div>
</div>
<div class="track-card" style="background-color: #7aa2f7;">
<img class="album-art" src="./img/album-art/wish.jpg">
<div class="track-info">
<p>Friday I'm In Love</p>
<p>Wish</p>
<p>The Cure</p>
</div>
</div>
<div class="track-card" style="background-color: #ff9e64;">
<img class="album-art" src="./img/album-art/parklife.jpg">
<div class="track-info">
<p>Parklife</p>
<p>Parklife</p>
<p>Blur</p>
</div>
</div>
</div>
</body>
</html>