✨ Ajout Calendrier Compagnie de Sufokia
All checks were successful
camelia / deploy (push) Successful in 46s
All checks were successful
camelia / deploy (push) Successful in 46s
This commit is contained in:
parent
d495396e60
commit
dda67ebe9b
84
branches/alt+tab/la-compagnie-de-sufokia/calendar.css
Normal file
84
branches/alt+tab/la-compagnie-de-sufokia/calendar.css
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
.cards {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb-4 {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-end {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background-color: #a6a174;
|
||||||
|
border-radius: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.column {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: .5rem;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: .25rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anime-name {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.discordButton {
|
||||||
|
background: #858157;
|
||||||
|
color: white;
|
||||||
|
padding: .5rem 1rem;
|
||||||
|
border-radius: .5rem;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: background .2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.discordButton:hover {
|
||||||
|
background: #77734c;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.d-flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
@ -7,25 +7,30 @@
|
|||||||
<meta name="description" content="">
|
<meta name="description" content="">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<meta property="og:title" content="Camélianimes">
|
<meta property="og:title" content="Camélianimes">
|
||||||
<meta property="og:image" content="https://camelia-studio.org/branches/alt+tab/la-compagnie-de-sufokia/images/c7b93f49527705.jpeg">
|
<meta property="og:image" content="https://camelia-studio.org/p/camelianimes/images/B27AB0.gif">
|
||||||
<meta property="og:description" content="Guilde La Compagnie de Sufokia (communauté Alt Tab de l'association Camélia Studio). Discord https://discord.gg/nBuZ9vJ.">
|
<meta property="og:description" content="Séances de visionnage d'animés, organisées par l'association Camélia Studio sur son serveur Discord https://discord.gg/nBuZ9vJ.">
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="./style.css">
|
||||||
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
|
<link rel="stylesheet" href="./calendar.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<nav>
|
<nav>
|
||||||
<a href="index.html">Accueil</a>
|
<a href="index.html">Accueil</a>
|
||||||
<a href="events.html">Événements</a>
|
<a href="events.html" style="color: #ff6600;">Événements</a>
|
||||||
<a href="calendrier.html" style="color: #ff6600;">Calendrier</a>
|
<a href="calendrier.html">Calendrier</a>
|
||||||
<a href="roulette.html">Roulette</a>
|
<a href="roulette.html">Roulette</a>
|
||||||
<a href="projets.html">Projets</a>
|
<a href="projets.html">Projets</a>
|
||||||
<a href="credits.html">Crédits</a>
|
<a href="credits.html">Crédits</a>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<p>prochainement</p>
|
<h1>Calendrier</h1>
|
||||||
|
<div class="mb-4 flex-end">
|
||||||
|
<a href="https://divent.crystalyx.net/subscribe/84226320451530752" target="_blank" class="discordButton">Tout ajouter à mon agenda</a>
|
||||||
|
</div>
|
||||||
|
<div class="cards"></div>
|
||||||
</div>
|
</div>
|
||||||
|
<script src="./scripts/calendar.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#312d21" d="M96 32l0 32L48 64C21.5 64 0 85.5 0 112l0 48 448 0 0-48c0-26.5-21.5-48-48-48l-48 0 0-32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 32L160 64l0-32c0-17.7-14.3-32-32-32S96 14.3 96 32zM448 192L0 192 0 464c0 26.5 21.5 48 48 48l352 0c26.5 0 48-21.5 48-48l0-272z"/></svg>
|
||||||
|
After Width: | Height: | Size: 497 B |
94
branches/alt+tab/la-compagnie-de-sufokia/scripts/calendar.js
Normal file
94
branches/alt+tab/la-compagnie-de-sufokia/scripts/calendar.js
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
const CALENDAR_PREFIX = "DofusÉvent";
|
||||||
|
const DISCORD_BASE_INVITE = "https://discord.gg/nBuZ9vJ";
|
||||||
|
|
||||||
|
|
||||||
|
function createCard(evt, parent) {
|
||||||
|
const cardElement = document.createElement('div');
|
||||||
|
cardElement.classList.add('card');
|
||||||
|
const gridElement = document.createElement('div');
|
||||||
|
gridElement.classList.add('grid');
|
||||||
|
/**
|
||||||
|
* Data Part
|
||||||
|
*/
|
||||||
|
const dataElement = document.createElement('div');
|
||||||
|
dataElement.classList.add('column');
|
||||||
|
const svgElement = document.createElement('img');
|
||||||
|
svgElement.classList.add('icon');
|
||||||
|
svgElement.src = './images/calendar.svg';
|
||||||
|
const colElement = document.createElement('div');
|
||||||
|
colElement.classList.add('column');
|
||||||
|
const dateElement = document.createElement('div');
|
||||||
|
dateElement.classList.add('flex');
|
||||||
|
dateElement.appendChild(svgElement);
|
||||||
|
const dateTextElement = document.createElement('div');
|
||||||
|
dateTextElement.innerHTML = new Date(evt.scheduled_start_time).toLocaleDateString('fr-FR', {
|
||||||
|
weekday: 'long',
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
day: 'numeric'
|
||||||
|
});
|
||||||
|
|
||||||
|
dateElement.appendChild(dateTextElement);
|
||||||
|
|
||||||
|
colElement.appendChild(dateElement);
|
||||||
|
|
||||||
|
const titleElement = document.createElement('div');
|
||||||
|
titleElement.classList.add('anime-name');
|
||||||
|
titleElement.innerText = evt.name;
|
||||||
|
colElement.appendChild(titleElement);
|
||||||
|
|
||||||
|
|
||||||
|
dataElement.appendChild(colElement);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Bouton s'inscrire à la séance
|
||||||
|
*/
|
||||||
|
const flexButtonElement = document.createElement('div');
|
||||||
|
flexButtonElement.classList.add('flex');
|
||||||
|
const linkElement = document.createElement('a');
|
||||||
|
linkElement.classList.add('discordButton');
|
||||||
|
linkElement.href = `${DISCORD_BASE_INVITE}?event=${evt.id}`;
|
||||||
|
linkElement.target = "_blank";
|
||||||
|
linkElement.innerText = "S'inscrire à la séance";
|
||||||
|
|
||||||
|
flexButtonElement.appendChild(linkElement);
|
||||||
|
dataElement.appendChild(flexButtonElement);
|
||||||
|
|
||||||
|
gridElement.appendChild(dataElement);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Image Part
|
||||||
|
*/
|
||||||
|
const imageParentElement = document.createElement('div');
|
||||||
|
const imageElement = document.createElement('img');
|
||||||
|
imageElement.src = `https://cdn.discordapp.com/guild-events/${evt.id}/${evt.image}.png?size=256`;
|
||||||
|
imageElement.alt = evt.name;
|
||||||
|
imageElement.classList.add('image');
|
||||||
|
imageParentElement.appendChild(imageElement);
|
||||||
|
gridElement.appendChild(imageParentElement);
|
||||||
|
|
||||||
|
cardElement.appendChild(gridElement);
|
||||||
|
parent.appendChild(cardElement);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('readystatechange', async function() {
|
||||||
|
if (document.readyState === "complete") {
|
||||||
|
const events = await fetch('https://corsproxy.io/?https://git.crystalyx.net/camelia-studio/Camelianimes-Datas/raw/branch/datas/events.json')
|
||||||
|
.then(res => res.json())
|
||||||
|
.catch((err) => {
|
||||||
|
console.error(err);
|
||||||
|
return [];
|
||||||
|
});
|
||||||
|
|
||||||
|
const cardParent = document.querySelector('.cards');
|
||||||
|
|
||||||
|
// On sort les éléments par date
|
||||||
|
events.sort((a, b) => new Date(a.scheduled_start_time) - new Date(b.scheduled_start_time));
|
||||||
|
|
||||||
|
events.filter(event => event.description.includes(CALENDAR_PREFIX)).forEach(evt => {
|
||||||
|
createCard(evt, cardParent);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user