Merge branch 'master' of ssh://patema.crystalyx.net:2222/camelia-studio/Sites-Camelia
All checks were successful
camelia / deploy (push) Successful in 43s
All checks were successful
camelia / deploy (push) Successful in 43s
This commit is contained in:
commit
fb5a0e47e5
85
branches/alt+tab/la-compagnie-de-sufokia/calendar.css
Normal file
85
branches/alt+tab/la-compagnie-de-sufokia/calendar.css
Normal file
@ -0,0 +1,85 @@
|
||||
.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 {
|
||||
color: white;
|
||||
background-color: #524a3d;
|
||||
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: white;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .25rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.anime-name {
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.discordButton {
|
||||
background: #ff6600;
|
||||
color: white;
|
||||
padding: .5rem 1rem;
|
||||
border-radius: .5rem;
|
||||
text-decoration: none;
|
||||
transition: background .2s;
|
||||
}
|
||||
|
||||
.discordButton:hover {
|
||||
background: #ee6002;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.d-flex {
|
||||
display: flex;
|
||||
}
|
||||
@ -9,8 +9,9 @@
|
||||
<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:description" content="Guilde La Compagnie de Sufokia (communauté Alt Tab de l'association Camélia Studio). Discord https://discord.gg/nBuZ9vJ.">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<link rel="stylesheet" href="./calendar.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
@ -25,7 +26,12 @@
|
||||
</header>
|
||||
|
||||
<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>
|
||||
<script src="./scripts/calendar.js"></script>
|
||||
</body>
|
||||
</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="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>
|
||||
|
After Width: | Height: | Size: 495 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