Logo und andere kleinen Dinge
This commit is contained in:
parent
587f2546f9
commit
2623dfdf1a
9 changed files with 422 additions and 255 deletions
BIN
static/Eurovision_Song_Contest_Wikidata_heart_(2014–2025).png
Normal file
BIN
static/Eurovision_Song_Contest_Wikidata_heart_(2014–2025).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
|
|
@ -0,0 +1,48 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="125.33"
|
||||
height="131.46"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
sodipodi:docname="Eurovision_Song_Contest_heart_Wikidata_(2014–2025).svg"
|
||||
xml:space="preserve"
|
||||
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><defs
|
||||
id="defs1" /><sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:zoom="4.303099"
|
||||
inkscape:cx="53.449851"
|
||||
inkscape:cy="50.196382"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1011"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg1" /><g
|
||||
id="g1"
|
||||
transform="matrix(0.12157124,0,0,0.23068304,12.733877,4.287877)"><path
|
||||
id="path1-3"
|
||||
style="fill:#990000"
|
||||
d="m 14.029438,47.537215 c -1.774828,0.01827 -1.013972,0.384871 -0.03213,0.626536 0.743679,-0.164572 1.490068,-0.325118 2.23313,-0.491069 -0.72782,-0.04244 -1.783992,-0.139759 -2.200998,-0.135467 z M 142.18539,59.094266 c -4.82297,3.438254 -9.69255,6.858605 -15.85683,9.685909 -9.38162,4.990549 -19.34173,9.624906 -30.380205,13.58906 -10.698213,3.846403 -21.764589,7.384325 -33.946788,9.78751 -0.669629,0.14639 -1.339128,0.292891 -2.00821,0.440268 V 399.87063 c 4.294457,2.59538 8.563573,5.20196 12.965006,7.74704 14.479715,8.05187 30.579687,15.20504 46.076377,22.69076 10.37587,4.79197 20.82658,9.52643 30.95857,14.45267 V 61.321009 c -2.64183,-0.684628 -5.26357,-1.407695 -7.80792,-2.226743 z m 37.81862,7.5523 V 459.74716 c 2.35383,1.15862 4.67161,2.33734 7.0689,3.47135 10.48296,4.92542 21.63634,9.42235 32.74186,13.94466 11.38075,4.82918 22.73005,9.68782 33.86646,14.6728 2.23876,1.1668 4.70542,2.2195 6.71546,3.49675 2.36848,1.50499 4.77459,3.02601 6.79578,4.66515 h 2.81149 V 74.402066 c -1.52365,-0.251491 -2.99632,-0.543839 -4.41806,-0.880537 -3.44536,-0.556772 -6.89455,-1.106275 -10.31417,-1.710274 -5.17069,-0.542732 -10.36811,-1.007044 -15.53551,-1.557873 -0.97125,-0.103562 -1.88782,-0.366087 -2.87576,-0.406402 -1.61527,-0.06633 -3.23252,-0.05736 -4.85184,-0.08467 -12.33914,-0.26891 -24.68661,-0.675896 -36.91894,-1.608674 -5.06761,-0.420601 -10.09953,-0.926035 -15.08567,-1.507073 z M 29.998726,98.980908 c -8.251681,1.796042 -16.220058,3.973792 -24.9660709,5.080022 -2.0724185,0.24509 -3.4743116,0.40985 -5.02855874,0.59267 V 393.09727 C 14.640724,395.66002 26.790289,396.67245 29.998726,392.34373 v -6.23996 c -0.803728,-1.96212 -2.182488,-4.26283 -4.305603,-7.01043 -0.191081,-0.24728 -0.479549,-0.48168 -0.562298,-0.74507 -0.02734,-0.087 -8.34e-4,-0.0983 0.08033,-0.0593 0.243479,0.11718 0.860945,0.67324 1.172795,0.88054 1.184122,0.78717 2.416754,1.5504 3.614778,2.32834 z" /><path
|
||||
id="path2"
|
||||
style="fill:#339966"
|
||||
d="M 720.00374,-0.00332762 V 316.05873 c 9.4778,-7.25273 19.5086,-14.30976 29.99463,-21.17523 V 7.1933707 c -1.61483,-1.6498815 -1.49121,-3.0052856 0,-4.1232848 V -0.00332762 Z M 810.0037,7.5235722 C 799.38514,8.2567434 788.77164,8.7962855 779.993,9.4285806 V 20.232095 c 0.31997,0.13476 0.43431,0.208138 0,0.127 V 276.57002 c 3.48903,-1.88316 6.90501,-3.814 10.98893,-5.30862 6.88074,-2.51817 12.98246,-4.39552 19.02177,-5.71503 z M 299.99859,81.522564 V 499.99787 h 29.99463 V 97.160567 c -7.9882,-2.297003 -15.07698,-5.435046 -20.85325,-9.381108 -3.34736,-2.462292 -4.5133,-3.672614 -5.88004,-4.52122 -1.05183,-0.525067 -3.05402,-1.485727 -2.98822,-1.549407 0.0574,-0.05538 0.25839,0.0053 0.43377,0.06773 -0.21331,-0.09699 -0.48098,-0.163567 -0.70689,-0.254002 z m 89.99996,17.348277 c -8.20339,1.519749 -16.83464,2.407739 -25.64083,2.683949 -1.45128,-0.0369 -2.89992,-0.0475 -4.3538,-0.0677 v 398.51082 h 7.30989 c 1.48574,-6.49571 8.87825,-13.03235 22.68474,-18.01714 z" /><path
|
||||
id="path3"
|
||||
style="fill:#006699"
|
||||
d="m 548.35799,-0.00332762 c 1.32928,3.78920772 2.24975,7.61254682 1.73509,11.48085062 -0.42645,1.741623 -0.60851,3.502756 -1.26919,5.223956 -1.60817,4.189623 -4.62212,8.251934 -8.82006,11.929586 V 418.95458 c 0.48825,-0.36573 0.93428,-0.74589 1.42985,-1.10914 2.62333,-1.9375 6.39128,-4.76412 9.10924,-6.55322 5.85514,-3.85417 12.52594,-7.29148 19.45554,-10.59185 V -0.00332762 Z m 51.6351,0 V 387.80558 c 4.47695,-1.73687 9.00958,-3.43485 13.6719,-5.04616 11.34729,-4.17629 22.86313,-8.22255 34.17171,-12.42912 7.06298,-2.78351 14.24938,-5.59077 19.96964,-9.16097 6.93356,-4.30741 12.65281,-9.01463 17.15815,-14.15633 1.65811,-1.61121 3.36978,-3.20652 5.02856,-4.81756 V -0.00332762 Z M 509.99314,42.56726 c -0.24486,0.0606 -0.47595,0.136521 -0.72296,0.194734 -8.74713,2.061395 -18.1919,2.88136 -27.56871,3.657616 -3.65751,0.48271 -1.00651,0.112622 -4.33774,0.609603 -3.88331,0.57934 -0.059,0.157044 -0.81935,-0.169334 -0.82252,-0.353035 -2.37514,1.932431 -2.6187,0.956737 -0.49781,0.226211 -1.00074,0.448451 -1.49411,0.677336 -0.3614,0.16765 -0.97876,0.756482 -1.0764,0.508003 -0.15229,-0.387359 1.54235,-1.288175 0.89968,-1.083738 -0.21675,0.06897 -0.33904,0.201743 -0.44984,0.321734 -0.44886,0.486165 -0.81218,0.98579 -1.22099,1.481674 -4.11781,5.237277 -6.68747,10.843785 -12.82042,15.604135 -5.6807,4.605146 -11.78003,9.07912 -18.65226,13.216525 -6.17704,3.674682 -12.21316,7.410557 -19.11816,10.718847 V 475.2751 c 3.0332,-0.37853 6.17199,-0.71814 9.47875,-0.99061 5.46251,-0.4501 10.93222,-0.82713 16.4352,-1.10067 0.29359,-0.0237 5.86112,-0.5336 5.88004,-0.52493 0.12774,0.0737 -0.54025,0.2544 -0.35345,0.23706 0.44544,-0.039 0.81522,-0.20879 1.22099,-0.31326 5.07815,-1.73672 9.61583,-3.74927 13.59157,-6.1807 7.3223,-4.3773 14.00387,-9.04125 21.38343,-13.39432 7.02366,-4.4061 14.2383,-8.73866 22.36343,-12.59846 z" /></g><path
|
||||
d="m12.726 58.556c0.31803-28.513 15.157-37.437 23.237-37.437 11.285 0 15.946 8.6151 16.707 12.429 0.76116 3.8111 5.0324 6.8595 6.4047 0.60798 1.3734-6.2515 14.649-25.315 30.966-25.315 14.943 0 20.119 15.41 19.671 28.518-1.2228 35.683-47.19 64.158-53.239 82.143-5.3875-10.891-44.126-26.634-43.746-60.946zm82.652-58.556c-13.42 0-29.29 9.9111-38.896 26.382-2.592-5.9483-11.827-12.43-22.805-12.43-8.8462 0-33.676 11.056-33.676 46.74 0 46.052 46.593 55.508 56.011 69.825 0.64721 0.98433 2.7319 1.728 3.5276-0.62388 7.5157-22.18 65.791-47.242 65.791-92.379-5.3e-4 -25.314-16.536-37.513-29.955-37.513z"
|
||||
stroke-width=".53006"
|
||||
id="path1" /><g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
inkscape:label="DATA" /></svg>
|
||||
|
After Width: | Height: | Size: 6.6 KiB |
152
static/script.js
152
static/script.js
|
|
@ -1,102 +1,98 @@
|
|||
const audios = document.querySelectorAll("audio")
|
||||
const articles = document.querySelectorAll("article")
|
||||
const kartenContainer = document.getElementById("flex-container")
|
||||
outindex = 0
|
||||
playing = false
|
||||
playcolor = "#00ff3c"
|
||||
loop = true
|
||||
const audios = document.querySelectorAll("audio");
|
||||
const articles = document.querySelectorAll("article");
|
||||
const kartenContainer = document.getElementById("flex-container");
|
||||
outindex = 0;
|
||||
playing = false;
|
||||
playcolor = "#00ff3c";
|
||||
loop = true;
|
||||
|
||||
function onplay(id){
|
||||
//What is id
|
||||
id = parseInt(id)
|
||||
if(id>0){
|
||||
articles[id-1].style.filter = "grayscale("+(id+1)*20+"%)"
|
||||
articles[id-1].style.boxShadow = "0 0 0px 0px "+playcolor
|
||||
function onplay(id) {
|
||||
id = parseInt(id);
|
||||
if (id > 0) {
|
||||
articles[id - 1].style.filter = "grayscale(" + (id + 1) * 20 + "%)";
|
||||
articles[id - 1].style.boxShadow = "0 0 0px 0px " + playcolor;
|
||||
}
|
||||
if(articles[id].offsetWidth * id == window.innerWidth/2){
|
||||
console.log(articles[id].offsetWidth)
|
||||
kartenContainer.scrollWidth += articles[id].offsetWidth
|
||||
if (articles[id].offsetWidth * id == window.innerWidth / 2) {
|
||||
console.log(articles[id].offsetWidth);
|
||||
kartenContainer.scrollWidth += articles[id].offsetWidth;
|
||||
}
|
||||
articles[id].style.filter = "grayscale(0%)"
|
||||
articles[id].style.margin = "8px"
|
||||
articles[id].style.boxShadow = "0 0 6px 1px "+playcolor
|
||||
articles[id].style.filter = "grayscale(0%)";
|
||||
articles[id].style.margin = "8px";
|
||||
articles[id].style.boxShadow = "0 0 6px 1px " + playcolor;
|
||||
}
|
||||
|
||||
function nächste(id){
|
||||
audios[id].pause()
|
||||
id = parseInt(id) + 1
|
||||
audios[id].play()
|
||||
onplay(id)
|
||||
function nächste(id) {
|
||||
audios[id].pause();
|
||||
id = parseInt(id) + 1;
|
||||
audios[id].play();
|
||||
onplay(id);
|
||||
}
|
||||
|
||||
function vorherige(id){
|
||||
audios[id].pause()
|
||||
audios[id-1].play()
|
||||
onplay(id-1)
|
||||
function vorherige(id) {
|
||||
audios[id].pause();
|
||||
audios[id - 1].play();
|
||||
onplay(id - 1);
|
||||
}
|
||||
|
||||
function looptrue(){
|
||||
if(loop){
|
||||
loop = false
|
||||
document.querySelector("#loop").innerHTML = "Kein Loop"
|
||||
document.querySelector("#loop").style.beckground
|
||||
}
|
||||
else{
|
||||
loop = true
|
||||
document.querySelector("#loop").innerHTML = "Loop"
|
||||
function looptrue() {
|
||||
if (loop) {
|
||||
loop = false;
|
||||
document.querySelector("#loop").innerHTML = "Kein Loop";
|
||||
document.querySelector("#loop").style.beckground;
|
||||
} else {
|
||||
loop = true;
|
||||
document.querySelector("#loop").innerHTML = "Loop";
|
||||
}
|
||||
}
|
||||
|
||||
function abspielendiese(id){
|
||||
if(playing){
|
||||
function abspielendiese(id) {
|
||||
if (playing) {
|
||||
//ON PAUSE
|
||||
audios[id].pause()
|
||||
playing = false
|
||||
articles[id].style.margin = "0px"
|
||||
articles[id].style.boxShadow = "0 0 0px 0px "+playcolor
|
||||
}
|
||||
else{
|
||||
audios[id].pause();
|
||||
playing = false;
|
||||
articles[id].style.margin = "0px";
|
||||
articles[id].style.boxShadow = "0 0 0px 0px " + playcolor;
|
||||
} else {
|
||||
//ON PLAY
|
||||
audios[id].play()
|
||||
playing = true
|
||||
onplay(id)
|
||||
audios[id].play();
|
||||
playing = true;
|
||||
onplay(id);
|
||||
}
|
||||
}
|
||||
|
||||
function abspielen(){
|
||||
if(playing){
|
||||
function abspielen() {
|
||||
if (playing) {
|
||||
//ON PAUSE
|
||||
audios[outindex].pause()
|
||||
playing = false
|
||||
articles[outindex].style.margin = "0px"
|
||||
articles[outindex].style.boxShadow = "0 0 0px 0px "+playcolor
|
||||
document.querySelector("#play").innerHTML = "Abspielen"
|
||||
}
|
||||
else{
|
||||
audios[outindex].pause();
|
||||
playing = false;
|
||||
articles[outindex].style.margin = "0px";
|
||||
articles[outindex].style.boxShadow = "0 0 0px 0px " + playcolor;
|
||||
document.querySelector("#play").innerHTML = "Abspielen";
|
||||
} else {
|
||||
//ON PLAY
|
||||
audios[outindex].play()
|
||||
playing = true
|
||||
document.querySelector("#play").innerHTML = "Pausieren"
|
||||
onplay(outindex)
|
||||
audios[outindex].play();
|
||||
playing = true;
|
||||
document.querySelector("#play").innerHTML = "Pausieren";
|
||||
onplay(outindex);
|
||||
}
|
||||
}
|
||||
|
||||
for (const [index,audio] of audios.entries()){
|
||||
audio.addEventListener("ended", (event) => {
|
||||
if (index != audios.length -1){
|
||||
outindex = index +1
|
||||
audios[outindex].play()
|
||||
onplay(index+1)
|
||||
}
|
||||
else{
|
||||
//Last song ON END
|
||||
articles[index].style.filter = "grayscale(80%)"
|
||||
articles[index].style.boxShadow = "0 0 0px 0px "+playcolor
|
||||
articles[index].style.margin = "8px"
|
||||
articles[index].style.boxShadow = "0 0 6px 1px "+playcolor
|
||||
if(loop){
|
||||
audios[0].play()
|
||||
for (const [index, audio] of audios.entries()) {
|
||||
audio.addEventListener("ended", (event) => {
|
||||
if (index != audios.length - 1) {
|
||||
outindex = index + 1;
|
||||
audios[outindex].play();
|
||||
onplay(index + 1);
|
||||
} else {
|
||||
//Last song ON END
|
||||
articles[index].style.filter = "grayscale(80%)";
|
||||
articles[index].style.boxShadow = "0 0 0px 0px " + playcolor;
|
||||
articles[index].style.margin = "8px";
|
||||
articles[index].style.boxShadow = "0 0 6px 1px " + playcolor;
|
||||
if (loop) {
|
||||
audios[0].play();
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
//Audio visualising
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue