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

[camélianimes] première base du site
All checks were successful
camelia / deploy (push) Successful in 35s
Details

Browse Source
This commit is contained in:
Esenjin 2024-10-04 12:10:20 +02:00
parent 76663ce15f
commit 9cd723f48d
14 changed files with 322 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
p/camelianimes/images/39372436_p0_master1200.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 741 KiB

BIN
p/camelianimes/images/60834799_p0_master1200.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 956 KiB

BIN
p/camelianimes/images/65751842_p0_master1200.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 666 KiB

BIN
p/camelianimes/images/70764381_p0_master1200.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 442 KiB

BIN
p/camelianimes/images/72278604_p0_master1200.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 794 KiB

BIN
p/camelianimes/images/79704508_p0_master1200.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 704 KiB

BIN
p/camelianimes/images/90908293_p2_master1200.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 707 KiB

BIN
p/camelianimes/images/91837671_p0_master1200.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 748 KiB

48
p/camelianimes/index.html Normal file
View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Camélianimes - Accueil</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<a href="index.html">Accueil</a>
<a href="pages/infos.html">Description</a>
<a href="pages/liste.html">Liste</a>
<a href="pages/calendrier.html">Calendrier</a>
<a href="pages/credits.html">Crédits</a>
</nav>
</header>
<div class="home-background">
<div class="home-content">
<h1>Camélianimes</h1>
<p>Viens regarder avec nous, chaque lundi à 22h00, l'animé sélectionné !<br>
En ce moment c'est « BOFURI » (saison 2)</p>
</div>
</div>
<script>
let currentImageIndex = 0;
const images = [
'images/39372436_p0_master1200.jpg',
'images/60834799_p0_master1200.jpg',
'images/65751842_p0_master1200.jpg',
'images/70764381_p0_master1200.jpg'
];
function changeBackgroundImage() {
document.querySelector('.home-background').style.backgroundImage = `url(${images[currentImageIndex]})`;
currentImageIndex = (currentImageIndex + 1) % images.length;
}
setInterval(changeBackgroundImage, 5000);
window.onload = changeBackgroundImage;
</script>
</body>
</html>

27
p/camelianimes/pages/calendrier.html Normal file
View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Camélianimes - Calendrier</title>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<header>
<nav>
<a href="../index.html">Accueil</a>
<a href="infos.html">Description</a>
<a href="liste.html">Liste</a>
<a href="calendrier.html">Calendrier</a>
<a href="credits.html">Crédits</a>
</nav>
</header>
<div class="container">
<h1>Calendrier</h1>
<p>Prochainement</p>
</div>
</body>
</html>

32
p/camelianimes/pages/credits.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Camélianimes - Crédits</title>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<header>
<nav>
<a href="../index.html">Accueil</a>
<a href="infos.html">Description</a>
<a href="liste.html">Liste</a>
<a href="calendrier.html">Calendrier</a>
<a href="credits.html">Crédits</a>
</nav>
</header>
<div class="container">
<h1>Crédits</h1>
<p>Sources des images utilisées sur la page d'accueil : </p>
<ul>
<li>Image 1: Source et lien.</li>
<li>Image 2: Source et lien.</li>
<!-- More credits if necessary -->
</ul>
</div>
</body>
</html>

68
p/camelianimes/pages/infos.html Normal file
View File

@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Camélianimes - Description</title>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<header>
<nav>
<a href="../index.html">Accueil</a>
<a href="infos.html">Description</a>
<a href="liste.html">Liste</a>
<a href="calendrier.html">Calendrier</a>
<a href="credits.html">Crédits</a>
</nav>
</header>
<div class="container">
<h1>Description du projet</h1>
<p>
Coucou ! Si tu es ici, c'est que tu souhaites probablement savoir la méthode pour mettre MPV & Syncplay sur ton PC, afin de profiter des séances de Camélianime non ? Pas de soucis ! Je vais tout t'expliquer, tu as juste à suivre les étapes suivantes :
</p>
<h2>Comment télécharger et installer « MPV » ?</h2>
<p>
Note : « MPV » est un lecteur vidéo (comme « VLC » ou « PotPlayer » par exemple), compatible à l'utilisation de « Syncplay ».
</p>
<ol>
<li>Télécharger la dernière version de « MPV » sur son site : <a href="https://mpv.io/" target="_blank">https://mpv.io/</a>.</li>
<li>Créer un dossier MPV où vous souhaitez l'installer et y décompresser l'archive que vous venez de télécharger (normalement bootstrapper.zip).</li>
<li>L'installer en exécutant le fichier <code>updater.bat</code> contenu dans l'archive. Cela devrait ouvrir une fenêtre avec des lignes de commandes qui s'exécutent toutes seules, c'est normal. Laisser tout cela se terminer et c'est bon ! Vous avez « MPV » d'installé sur votre machine.</li>
</ol>
<h2>Comment télécharger et installer « Syncplay » ?</h2>
<p>
Note : « Syncplay » est un programme qui va synchroniser les lecteurs « MPV » de tous les participants à la séance, ainsi, si une personne fait play ou pause, cela lancera/arrêtera la vidéo pour tout le monde.
</p>
<ol>
<li>Télécharger la dernière version de « Syncplay » sur son site : <a href="https://syncplay.pl/" target="_blank">https://syncplay.pl/</a> (version portable pour Windows).</li>
<li>Créer un dossier Syncplay où vous souhaitez l'installer et y décompresser l'archive que vous venez de télécharger (normalement <code>Syncplay-Portable-Client-1.x.x.zip</code>).</li>
<li>Et voilà, c'est installé !</li>
</ol>
<h2>Comment configurer « Syncplay » ?</h2>
<p>En lançant <code>Syncplay.exe</code>, vous verrez une fenêtre avec différentes options à compléter, voici les informations à donner :</p>
<ol>
<li><strong>Server address:</strong> <code>shelter.moe:7373</code></li>
<li><strong>Server password:</strong> [laisser vide]</li>
<li><strong>Username:</strong> [mettre votre pseudo]</li>
<li><strong>Default room:</strong> <code>Camélianime</code></li>
<li><strong>Path to media player:</strong> [sélectionner le fichier <code>mpv.exe</code> dans le dossier où vous avez installé MPV préalablement]</li>
</ol>
<p>
Ensuite, vous n'avez plus qu'à cliquer sur « Store configuration and run Syncplay » ! Vous devriez voir une nouvelle fenêtre s'ouvrir (ainsi que le lecteur « MPV »). Dans l'encadré vide sous la liste des utilisateurs, faites un clic droit puis sélectionnez « Set trusted domains » et ajoutez les deux lignes suivantes :
</p>
<ul>
<li><code>syncplay.nanami.fr</code></li>
<li><code>camelia-studio.org</code></li>
</ul>
<p>Puis validez avec « OK ».</p>
<p>Voilà ! Vous êtes maintenant prêt à profiter confortablement des séances de Camélianime !</p>
</div>
</body>
</html>

31
p/camelianimes/pages/liste.html Normal file
View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Camélianimes - Liste</title>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<header>
<nav>
<a href="../index.html">Accueil</a>
<a href="infos.html">Description</a>
<a href="liste.html">Liste</a>
<a href="calendrier.html">Calendrier</a>
<a href="credits.html">Crédits</a>
</nav>
</header>
<div class="container">
<h1>Liste des séries visionnées</h1>
<ul>
<li><a href="https://anilist.co/anime/1376" target="_blank">Great Teacher Onizuka (vf)</a></li>
<li><a href="https://anilist.co/anime/10103" target="_blank">Back Street Girls - Gokudols (vf)</a></li>
<!-- More series as per the list -->
</ul>
</div>
</body>
</html>

116
p/camelianimes/style.css Normal file
View File

@ -0,0 +1,116 @@
/* style.css */
/* Global Styles */
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #2c2f33;
color: #ffffff;
overflow: auto;
}
body a {
color: #7289da;
text-decoration: none;
}
body a:hover {
text-decoration: underline;
}
header {
background-color: #23272a;
padding: 10px;
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: center;
z-index: 1000;
}
nav a {
margin: 0 15px;
color: #ffffff;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
color: #7289da;
}
.container {
padding-top: 70px;
max-width: 800px;
margin: auto;
}
/* Page-specific Styles */
.home-background {
height: 100vh;
width: 100%;
position: relative;
background-size: cover;
background-position: center;
transition: background-image 1.5s ease-in-out;
}
.home-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #ffffff;
background: rgba(0, 0, 0, 0.5);
padding: 20px;
border-radius: 10px;
}
.home-content h1 {
font-size: 48px;
margin: 0;
}
.home-content p {
font-size: 24px;
}
/* Description Page */
ol {
background: #40444b;
padding: 20px;
border-radius: 10px;
}
ol li {
margin-bottom: 10px;
}
/* List Page */
ul {
list-style: none;
padding: 0;
}
ul li {
margin-bottom: 10px;
}
ul li a {
color: #7289da;
text-decoration: none;
}
ul li a:hover {
text-decoration: underline;
}
/* Footer */
footer {
padding: 10px;
text-align: center;
margin-top: 20px;
color: #99aab5;
}