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