matthias/liederwahl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend, etc.

Browse Source
This commit is contained in:
matsewe
2024-05-17 09:41:26 +02:00
parent 2185b217e1
commit c1c9f98e87
19 changed files with 573 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
static/colors.css Normal file
View File

@@ -0,0 +1,90 @@
.cat-1 {
background-color: #1f77b4;
}
.cat-2 {
background-color: #ff7f0e;
}
.cat-3 {
background-color: #2ca02c;
}
.cat-4 {
background-color: #d62728;
}
.cat-5 {
background-color: #9467bd;
}
.cat-6 {
background-color: #8c564b;
}
.cat-7 {
background-color: #e377c2;
}
.cat-8 {
background-color: #7f7f7f;
}
.cat-9 {
background-color: #bcbd22;
}
.cat-10 {
background-color: #17becf;
}
.cat-11 {
background-color: #a1c9f4;
}
.cat-12 {
background-color: #ffb482;
}
.cat-13 {
background-color: #8de5a1;
}
.cat-14 {
background-color: #ff9f9b;
}
.cat-15 {
background-color: #d0bbff;
}
.cat-16 {
background-color: #debb9b;
}
.cat-17 {
background-color: #fab0e4;
}
.cat-18 {
background-color: #cfcfcf;
}
.cat-19 {
background-color: #fffea3;
}
.cat-20 {
background-color: #b9f2f0;
}
.cat-21 {
background-color: #001c7f;
}
.cat-22 {
background-color: #b1400d;
}
.cat-23 {
background-color: #12711c;
}
.cat-24 {
background-color: #8c0800;
}
.cat-25 {
background-color: #591e71;
}
.cat-26 {
background-color: #592f0d;
}
.cat-27 {
background-color: #a23582;
}
.cat-28 {
background-color: #3c3c3c;
}
.cat-29 {
background-color: #b8850a;
}
.cat-30 {
background-color: #006374;
}

BIN
static/cover.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 133 KiB

15
static/index.html Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<title>Hello jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="hello.js"></script>
</head>
<body>
<div>
<p class="greeting-id">The ID is </p>
<p class="greeting-content">The content is </p>
</div>
</body>
</html>

8
static/landing_script.js Normal file
View File

@@ -0,0 +1,8 @@
$(document).ready(function () {
var s_id = localStorage.getItem('session_id')
if (s_id === null) {
s_id = window.crypto.randomUUID();
localStorage.setItem('session_id', s_id)
}
$('.vote-from-existing').attr('href', '?session_id=' + s_id);
});

22
static/neutral.svg Normal file
View File

@@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg
width="326.09866"
height="533.33331"
viewBox="0 0 9.7829599 15.999999"
fill="none"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<path
d="m 4.78296,15 h 0.01 M 1,3.69689 C 1.54049,2.12753 3.03006,1 4.78296,1 c 2.2091,0 4,1.79086 4,4 0,1.6565 -1.0069,3.0778 -2.442,3.6852 -0.7408,0.3136 -1.1112,0.4704 -1.2408,0.5915 -0.1543,0.1442 -0.1836,0.1884 -0.2562,0.3867 -0.061,0.1665 -0.061,0.4232 -0.061,0.9366 V 12"
stroke="#000000"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
id="path1" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 789 B

22
static/no.svg Normal file
View File

@@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg
width="466.66666"
height="466.66666"
viewBox="0 0 14 14"
fill="none"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<path
d="M 1,1 13,13 M 13,1 1,13"
stroke="#000000"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
id="path1" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 529 B

23
static/play.svg Normal file
View File

@@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg
width="259.76822"
height="419.52487"
viewBox="0 0 7.7930466 12.585746"
fill="none"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<path
d="m 1.0001448,2.2242414 v 8.1372996 c 0,0.6058 0,0.9087 0.1198,1.0489 0.10394,0.1218 0.25987,0.1863 0.41943,0.1738 0.18389,-0.0145 0.39808,-0.2287 0.82647,-0.6571 l 4.0686,-4.0685996 c 0.198,-0.198 0.297,-0.297 0.3341,-0.4112 0.0327,-0.1004 0.0327,-0.2086 0,-0.309 -0.0371,-0.1141 -0.1361,-0.2131 -0.3341,-0.4112 l -4.0686,-4.06859 c -0.42839,-0.42837 -0.64258,-0.64256 -0.82647,-0.65703 -0.15956,-0.01256 -0.31549,0.05203 -0.41943,0.17373 -0.1198,0.14026 -0.1198,0.44317 -0.1198,1.04899 z"
stroke="#000000"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
id="path1"
style="stroke:#000000;stroke-opacity:1" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

184
static/site.css Normal file
View File

@@ -0,0 +1,184 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
padding: 0.5em;
}
@media only screen and (min-resolution: 200dpi) {
body {
font-size: 3.2vmin;
}
}
.clear {
clear: both;
}
.song {
background-color: #f0f0f0;
padding: 0.4em;
border-radius: 0.5em;
width: 30em;
font-family: sans-serif;
margin-bottom: 1em;
}
.cover-container {
position: relative;
width: 10.67em;
height: 6em;
float: left;
margin-right: 1em;
}
.cover {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .3s ease;
}
.cover-container:hover {
cursor: pointer;
}
.cover-container:hover .overlay {
opacity: 1;
filter: drop-shadow(0px 0px 1em black);
}
.overlay img {
height: 50%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
filter: invert();
transition: .1s ease;
}
.cover-container:active .overlay img {
height: 60%;
}
.vote-buttons {
display: inline-block;
}
.button {
height: 2em;
width: 3em;
display: inline-block;
text-align: center;
vertical-align: middle;
font-size: 1.5em;
position: relative;
}
.button img {
height: 30%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
transition: .1s ease;
}
.button:active img {
height: 40%;
}
.button-no {
background-color: #e1412f;
border-top-left-radius: 1em;
border-bottom-left-radius: 1em;
}
.button-neutral {
background-color: #f5bb00;
margin-left: 2px;
margin-right: 2px;
}
.button-yes {
background-color: #48a84f;
border-top-right-radius: 1em;
border-bottom-right-radius: 1em;
}
.button:not(.selected):not(:hover) {
background-color: #b0b0b0;
}
.button:hover {
filter: drop-shadow(2px 2px 2px) brightness(95%);
cursor: pointer;
}
.button span {
position: relative;
}
.button-no span {
top: 10%;
}
.button-yes span {
top: 10%;
}
.button-neutral span {
top: 20%;
}
.categories {
width: 60%;
overflow: hidden;
cursor: grab;
white-space: nowrap;
font-size: 0.7em;
line-height: 1.2em;
margin-top: 0.2em;
}
.categories span {
border-radius: 1.2em;
padding: 0 0.5em 0 0.5em;
margin-right: 0.4em;
display: inline-block;
color: white;
max-width: 10em;
overflow: clip;
}
.vote-buttons {
margin-top: 0.5em;
}
.song-data {
width: 100%;
overflow: clip;
white-space: nowrap;
}

70
static/voting_script.js Normal file
View File

@@ -0,0 +1,70 @@
document.addEventListener('DOMContentLoaded', function () {
const eles = document.getElementsByClassName('categories');
Array.prototype.forEach.call(eles, ele => {
//ele.style.cursor = 'grab';
let pos = { top: 0, left: 0, x: 0, y: 0 };
const mouseDownHandler = function (e) {
ele.style.cursor = 'grabbing';
ele.style.userSelect = 'none';
pos = {
left: ele.scrollLeft,
top: ele.scrollTop,
// Get the current mouse position
x: e.clientX,
y: e.clientY,
};
document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);
};
const mouseMoveHandler = function (e) {
// How far the mouse has been moved
const dx = e.clientX - pos.x;
const dy = e.clientY - pos.y;
// Scroll the element
ele.scrollTop = pos.top - dy;
ele.scrollLeft = pos.left - dx;
};
const mouseUpHandler = function () {
ele.style.cursor = 'grab';
ele.style.removeProperty('user-select');
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);
};
// Attach the handler
ele.addEventListener('mousedown', mouseDownHandler);
});
});
const getQueryParameter = (param) => new URLSearchParams(document.location.search.substring(1)).get(param);
$(document).ready(function () {
var session_id = getQueryParameter("session_id");
$(".greeting-id").append(session_id);
$(".greeting-id").append("Foo");
$.ajax({
url: "/songs"
}).then(function (user_list) {
$('.greeting-id').append(user_list.total);
localStorage.setItem("test-storage", user_list.total);
var users = [];
$.each(user_list.data, function (key, user) {
users.push("<li id='" + user.id + "'>" + user.first_name + "</li>");
});
$("<ul/>", {
"class": "my-new-list",
html: users.join("")
}).appendTo("body");
});
});

22
static/yes.svg Normal file
View File

@@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg
width="600"
height="433.33197"
viewBox="0 0 18 12.999959"
fill="none"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<path
d="M 1,7.1111 5.92308,12 17,1"
stroke="#000000"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
id="path1" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 533 B