camelia-studio/Sites-Camelia
camelia-studio/Sites-Camelia
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Ajout du calendrier des évènements
All checks were successful
camelia / deploy (push) Successful in 24s
Details

Browse Source
This commit is contained in:
Melaine Gérard 2024-10-04 16:03:37 +02:00
parent cb745fa9fa
commit 5010b2f78a
5 changed files with 169 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored Normal file
View File

@ -0,0 +1,4 @@
.idea/
.vscode/
.fleet/
*.iml

67
p/camelianimes/calendar.css Normal file
View File

@ -0,0 +1,67 @@
.cards {
display: flex;
flex-direction: column;
gap: 1rem;
}
.card {
background: #3f4248;
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;
}
.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: white;
}
.flex {
display: flex;
align-items: center;
gap: .25rem;
flex-wrap: wrap;
}
.anime-name {
font-size: 1.25rem;
font-weight: bold;
}
.discordButton {
background: #5b5d67;
color: white;
padding: .5rem 1rem;
border-radius: .5rem;
text-decoration: none;
transition: background .2s;
}
.discordButton:hover {
background: #636570;
text-decoration: none;
}
.d-flex {
display: flex;
}

1
p/camelianimes/images/calendar.svg Normal file
View File

@ -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="white" 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>
Side by Side

After

Width:  |  Height:  |  Size: 495 B

5
p/camelianimes/pages/calendrier.html
View File

@ -10,6 +10,7 @@
<meta property="og:image" content="https://camelia-studio.org/p/camelianimes/images/B27AB0.gif">
<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="../calendar.css">
</head>
<body>
@ -25,8 +26,8 @@
<div class="container">
<h1>Calendrier</h1>
<p>Prochainement</p>
<div class="cards"></div>
</div>
<script src="../scripts/calendar.js"></script>
</body>
</html>

94
p/camelianimes/scripts/calendar.js Normal file
View File

@ -0,0 +1,94 @@
const CAMELIANIME_CHANNEL_ID = "865314473668771850";
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.channel_id === CAMELIANIME_CHANNEL_ID).forEach(evt => {
createCard(evt, cardParent);
});
}
});