116 lines
2.6 KiB
Svelte
116 lines
2.6 KiB
Svelte
<script>
|
|
let cards = [
|
|
{
|
|
"name": "La voix est libre",
|
|
"description": "Une émission hebdomadaire de Picasoft sur la radio locale et associative compiégnoise Graf'hit sur 94.9FM ou en ligne sur http://grafhit.net. Ces podcasts sont disponibles sous licence CC BY https://creativecommons.org/licenses/by/3.0/fr/.",
|
|
"image": "https://podcast.picasoft.net/media/podcasts/la_voix_est_libre/cover_thumbnail.webp",
|
|
"url": "https://podcast.picasoft.net/@la_voix_est_libre"
|
|
},
|
|
{
|
|
"name": "Silence, ça transitionne !",
|
|
"description": "Ce projet mené par des étudiant.es de Compiègne en Transition - une association étudiante et Compiègnoise rattachée à l'UTC - a pour vocation de parler de thématiques environnementales, discuter de nos ressentis face à ces enjeux, partager des retours d'expérience et tout simplement papoter de sujets qui nous tiennent à cœur !",
|
|
"image": "https://podcast.picasoft.net/media/podcasts/silence_transition/cover_thumbnail.webp",
|
|
"url": "https://podcast.picasoft.net/@silence_transition"
|
|
}
|
|
];
|
|
|
|
function init(tab) {
|
|
return tab[0];
|
|
}
|
|
|
|
let card = init(cards);
|
|
|
|
function randomize() {
|
|
let index = Math.floor(Math.random()*cards.length);
|
|
if (cards[index] == card)
|
|
card = cards[(index+1)%cards.length];
|
|
else
|
|
card = cards[index];
|
|
}
|
|
</script>
|
|
|
|
<div class="card">
|
|
<div class="card-title">
|
|
{card.name}
|
|
</div>
|
|
<div class="card-main-content">
|
|
<img src={card.image} alt="Icône de l'item aléatoire" />
|
|
<p>
|
|
{card.description}
|
|
</p>
|
|
</div>
|
|
<div class="card-button">
|
|
<a href={card.url}>Y aller !</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="randomize-button" on:click={randomize}>
|
|
Un autre !
|
|
</div>
|
|
|
|
<style>
|
|
.card {
|
|
margin: auto;
|
|
width: 50%;
|
|
padding: 14px;
|
|
background-color: #ECEFF1;
|
|
border: dotted #90A4AE 1px;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.card-title {
|
|
text-align: center;
|
|
font-size: 3em;
|
|
}
|
|
|
|
.card-main-content {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.card-main-content img {
|
|
width: 20%;
|
|
height: auto;
|
|
margin: 5px;
|
|
}
|
|
|
|
.card-main-content p {
|
|
width: 80%;
|
|
}
|
|
|
|
.card-button {
|
|
width: 25%;
|
|
padding: 10px;
|
|
margin: auto;
|
|
text-align: center;
|
|
background-color: #203590;
|
|
border-radius: 10px;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
.card-button:hover {
|
|
background-color: #3550A7;
|
|
}
|
|
|
|
.card-button a {
|
|
color: white;
|
|
}
|
|
|
|
.randomize-button {
|
|
background-color: #4A148C;
|
|
color: white;
|
|
text-align: center;
|
|
border-radius: 10px;
|
|
transition: 0.2s;
|
|
margin: auto;
|
|
padding: 15px;
|
|
width: 25%;
|
|
margin-top: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.randomize-button:hover {
|
|
background-color: #6A1B9A;
|
|
}
|
|
</style>
|