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

Merge branch 'master' of ssh://patema.crystalyx.net:2222/camelia-studio/Sites-Camelia
All checks were successful
camelia / deploy (push) Successful in 43s
Details

Browse Source
This commit is contained in:
Esenjin 2024-11-15 13:08:22 +01:00
commit fb5a0e47e5
4 changed files with 197 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
branches/alt+tab/la-compagnie-de-sufokia/calendar.css Normal file
View 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;
}

26
branches/alt+tab/la-compagnie-de-sufokia/calendrier.html
View File

@ -3,20 +3,21 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge"> <meta http-equiv="x-ua-compatible" content="ie=edge">
<title>La Compagnie de Sufokia</title> <title>La Compagnie de Sufokia</title>
<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/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."> <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="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="./style.css">
<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" >Événements</a>
<a href="calendrier.html" style="color: #ff6600;">Calendrier</a> <a href="calendrier.html" style="color: #ff6600;">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>
@ -24,8 +25,13 @@
</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>

1
branches/alt+tab/la-compagnie-de-sufokia/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

94
branches/alt+tab/la-compagnie-de-sufokia/scripts/calendar.js Normal file
View 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);
});
}
});