Initial
This commit is contained in:
commit
8d4a6c8495
Binary file not shown.
|
|
@ -0,0 +1,99 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang=ca>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||||
|
<link rel="stylesheet" href="style.css"/>
|
||||||
|
<title>Duskin' Radio</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<img alt="Logo: Duskin' Radio" src="logo.png" id="logo"/>
|
||||||
|
<h2>Cadenes</h2>
|
||||||
|
<hr/>
|
||||||
|
<div class="container">
|
||||||
|
<div class="cadena" id="dancin">
|
||||||
|
<h3>Dancin'</h3>
|
||||||
|
<p>Nu Disco, House, Synthpop, Dance</p>
|
||||||
|
<audio preload="metadata">
|
||||||
|
<source src="dancin.mp3" type="audio/mpeg"/>
|
||||||
|
Audio tag not supported
|
||||||
|
</audio>
|
||||||
|
<img class="play" alt="Play Button" src="./play.svg"/>
|
||||||
|
<input class="link"></input>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cadena" id="funkin">
|
||||||
|
<h3>Funkin'</h3>
|
||||||
|
<p>Funk, Disco, R&B</p>
|
||||||
|
<audio preload="metadata">
|
||||||
|
<source src="funkin.mp3" type="audio/mpeg"/>
|
||||||
|
Audio tag not supported
|
||||||
|
</audio>
|
||||||
|
<img class="play" alt="Play Button" src="./play.svg"/>
|
||||||
|
<input class="link"></input>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cadena" id="gazin">
|
||||||
|
<h3>Gazin'</h3>
|
||||||
|
<p>Rock Alternatiu, Shoegaze</p>
|
||||||
|
<audio preload="metadata">
|
||||||
|
<source src="gazin.mp3" type="audio/mpeg"/>
|
||||||
|
Audio tag not supported
|
||||||
|
</audio>
|
||||||
|
<img class="play" alt="Play Button" src="./play.svg"/>
|
||||||
|
<input class="link"></input>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cadena" id="doomin">
|
||||||
|
<h3>Doomin'</h3>
|
||||||
|
<p>Post Punk, Cold Wave</p>
|
||||||
|
<audio preload="metadata">
|
||||||
|
<source src="doomin.mp3" type="audio/mpeg"/>
|
||||||
|
Audio tag not supported
|
||||||
|
</audio>
|
||||||
|
<img class="play" alt="Play Button" src="./play.svg"/>
|
||||||
|
<input class="link"></input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
let playButtons = [...document.querySelectorAll('.play')]
|
||||||
|
playButtons.map((x) => x.addEventListener('click', () => playButtonAction(x)))
|
||||||
|
let cadenaDivs = [...document.querySelectorAll('.cadena')]
|
||||||
|
cadenaDivs.map((x) => x.addEventListener('click', () => copyLink(x)))
|
||||||
|
})
|
||||||
|
|
||||||
|
function playButtonAction(x) {
|
||||||
|
let audio = x.parentNode.querySelector('audio')
|
||||||
|
if (audio.paused) {
|
||||||
|
audio.load()
|
||||||
|
audio.play()
|
||||||
|
x.src="./stop.svg"
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
let aux = audio.querySelector('source').src
|
||||||
|
audio.querySelector('source').src = ""
|
||||||
|
audio.pause()
|
||||||
|
setTimeout(() => audio.load())
|
||||||
|
x.src="./play.svg"
|
||||||
|
audio.querySelector('source').src = aux
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function copyLink(x) {
|
||||||
|
let link = x.querySelector('source')
|
||||||
|
let pText = x.querySelector('.link')
|
||||||
|
pText.value = link.src
|
||||||
|
console.log(pText.value)
|
||||||
|
pText.select()
|
||||||
|
document.execCommand('copy')
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<footer id="bottom">Copia els enllaços per a escoltar en un client! (Com per exemple, VLC o MPV)</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="162.48718mm"
|
||||||
|
height="184.48798mm"
|
||||||
|
viewBox="0 0 162.48718 184.48798"
|
||||||
|
version="1.1"
|
||||||
|
id="svg5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<g
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(-27.645783,-17.61633)">
|
||||||
|
<path
|
||||||
|
style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:76.6103;stroke-linejoin:round;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000000"
|
||||||
|
id="path1218"
|
||||||
|
d="m 565.5396,352.75443 -537.518329,310.33635 0,-620.672705 z"
|
||||||
|
transform="matrix(0.26458333,0,0,0.26458333,30.366726,16.527377)" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 760 B |
|
|
@ -0,0 +1,22 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="162.48718mm"
|
||||||
|
height="184.48798mm"
|
||||||
|
viewBox="0 0 162.48718 184.48798"
|
||||||
|
version="1.1"
|
||||||
|
id="svg5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<g
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(-27.645783,-17.61633)">
|
||||||
|
<path
|
||||||
|
id="path9640"
|
||||||
|
style="fill:none;stroke:#ffffff;stroke-width:20.27;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
|
||||||
|
d="M 179.6884,191.97014 H 37.780687 m 0,-164.219647 H 179.6884 m 0,164.219647 V 27.750493 Z m -141.907713,0 V 27.750493 Z" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 752 B |
|
|
@ -0,0 +1,111 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: "Gemunu-Libre";
|
||||||
|
src: url(GemunuLibre-Medium.ttf) format("truetype");
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: "Gemunu-Libre", sans-serif;
|
||||||
|
font-size: 1.5em;
|
||||||
|
text-align: center;
|
||||||
|
margin: 2.5% 7.5%;
|
||||||
|
background-color: #0c111f;
|
||||||
|
background-image: url("./wave.png");
|
||||||
|
background-repeat: repeat;
|
||||||
|
background-size: 200px;
|
||||||
|
color: #d6d6d6;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
color: #ffa348;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
color: #99c1f1;
|
||||||
|
font-size: 3.0em;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 2.0em;
|
||||||
|
}
|
||||||
|
hr {
|
||||||
|
border: 2.5px solid #d6d6d6;
|
||||||
|
margin: 0% 30%;
|
||||||
|
}
|
||||||
|
#bottom {
|
||||||
|
margin: 25px 5px;
|
||||||
|
color: rgba(255, 255, 255, 0.5);
|
||||||
|
font-size: 1.0em;
|
||||||
|
font-style:italic;
|
||||||
|
}
|
||||||
|
#logo {
|
||||||
|
max-height: 450px;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
display: grid;
|
||||||
|
grid-gap: 50px;
|
||||||
|
margin: 65px auto;
|
||||||
|
grid-template-columns: auto auto;
|
||||||
|
max-width: 1500px;
|
||||||
|
align-content: center;
|
||||||
|
grid-auto-flow: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.cadena {
|
||||||
|
border: 5px solid #d6d6d6;
|
||||||
|
text-shadow: rgba(0, 0, 0, 0.75) 0px 0px 10px;
|
||||||
|
min-width: 500px;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
#dancin {
|
||||||
|
background-color: rgba(240, 180, 255, 0.25);
|
||||||
|
color: #83d7ff;
|
||||||
|
}
|
||||||
|
#dancin:hover {
|
||||||
|
background-color: rgba(255, 180, 255, 0.50);
|
||||||
|
}
|
||||||
|
#funkin {
|
||||||
|
background-color: rgba(228, 228, 206, 0.25);
|
||||||
|
color: #86c647;
|
||||||
|
}
|
||||||
|
#funkin:hover {
|
||||||
|
background-color: rgba(228, 228, 206, 0.5);
|
||||||
|
}
|
||||||
|
#doomin {
|
||||||
|
background-color: rgba(10, 10, 10, 0.5);
|
||||||
|
}
|
||||||
|
#doomin:hover {
|
||||||
|
background-color: rgba(10, 25, 25, 0.75);
|
||||||
|
}
|
||||||
|
#gazin {
|
||||||
|
background-color: rgba(174, 133, 81, 0.5);
|
||||||
|
}
|
||||||
|
#gazin:hover {
|
||||||
|
background-color: rgba(174, 133, 81, 0.75);
|
||||||
|
}
|
||||||
|
#controls {
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
.play {
|
||||||
|
max-width: 10%;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
.play:hover {
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
|
.play:active {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 1250px) {
|
||||||
|
.container {
|
||||||
|
grid-template-columns: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.link {
|
||||||
|
background-color: transparent;
|
||||||
|
border: 0px solid transparent;
|
||||||
|
color: transparent;
|
||||||
|
height: 0px;
|
||||||
|
width: 0px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue