[alt+tab] création de la nouvelle page

création d'une nouvelle page pour "alt tab" qui est le nouveau nom du "zaap sufokien"
2024-09-05 20:12:15 +02:00 · 2024-09-05 20:12:15 +02:00 · 56975b5eea
commit 56975b5eea
parent 003d90600a
18 changed files with 421 additions and 0 deletions
--- a/branches/alt+tab/img/about.gif
+++ b/branches/alt+tab/img/about.gif
--- a/branches/alt+tab/img/ap/dofus.jpg
+++ b/branches/alt+tab/img/ap/dofus.jpg
--- a/branches/alt+tab/img/ap/gt.png
+++ b/branches/alt+tab/img/ap/gt.png
--- a/branches/alt+tab/img/ap/touch.jpg
+++ b/branches/alt+tab/img/ap/touch.jpg
--- a/branches/alt+tab/img/ap/waven.jpg
+++ b/branches/alt+tab/img/ap/waven.jpg
--- a/branches/alt+tab/img/default.jpg
+++ b/branches/alt+tab/img/default.jpg
--- a/branches/alt+tab/img/favicon.ico
+++ b/branches/alt+tab/img/favicon.ico
--- a/branches/alt+tab/img/gm+/arctyk.gif
+++ b/branches/alt+tab/img/gm+/arctyk.gif
--- a/branches/alt+tab/img/gm+/esenjin.gif
+++ b/branches/alt+tab/img/gm+/esenjin.gif
--- a/branches/alt+tab/img/gm+/skitounet.gif
+++ b/branches/alt+tab/img/gm+/skitounet.gif
--- a/branches/alt+tab/img/gm/elaina.jpg
+++ b/branches/alt+tab/img/gm/elaina.jpg
--- a/branches/alt+tab/img/gm/megumin.jpg
+++ b/branches/alt+tab/img/gm/megumin.jpg
--- a/branches/alt+tab/img/gm/miel.jpg
+++ b/branches/alt+tab/img/gm/miel.jpg
--- a/branches/alt+tab/img/gm/skit.jpg
+++ b/branches/alt+tab/img/gm/skit.jpg
--- a/branches/alt+tab/img/logo.png
+++ b/branches/alt+tab/img/logo.png
--- a/branches/alt+tab/index.html
+++ b/branches/alt+tab/index.html
@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <title>Alt Tab</title>
+    <meta charset="UTF-8">
+    <meta name="description" content="Alt Tab ; un monde à chaque fenêtre.">
+    <meta name="keywords" content="alt tab, <b>Alt Tab</b>, association, camélia studio, jeu vidéo, dofus, gardian tales, dofus touch">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta property="og:title" content="Alt Tab">
+    <meta property="og:image" content="https://camelia-studio.org/branches/alt+tab/img/logo.png">
+    <meta property="og:description" content="Alt Tab est une communauté de joueurs, venant de divers jeux coopératifs en ligne. Fondée en 2007 avec une guilde sur le MMORPG Dofus, elle s'est vite étendue à d'autres horizons !">
+    <link rel="shortcut icon" href="img/favicon.ico">
+
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="style.css">
+
+</head>
+
+<body>
+
+<!-- Accueil -->
+<section class="hero-section">
+    <div class="pana-accordion" id="accordion">
+        <div class="pana-accordion-wrap">
+            <div class="pana-accordion-item set-bg" data-setbg="img/ap/dofus.jpg">
+                <div class="pa-text">
+                    <div class="pa-tag">Dofus</div>
+                    <h2><i>La Compagnie de Sufokia</i></h2>
+                    <div class="pa-author">
+                        <img src="img/gm/miel.jpg" alt="">
+                        <h4>Miel-Cerise</h4>
+                    </div>
+                </div>
+            </div>
+            <div class="pana-accordion-item set-bg" data-setbg="img/ap/gt.png">
+                <div class="pa-text">
+                    <div class="pa-tag">Guardian Tales</div>
+                    <h2><i>Cercle_des_Cendres</i></h2>
+                    <div class="pa-author">
+                        <img src="img/gm/elaina.jpg" alt="">
+                        <h4>Elaina</h4>
+                    </div>
+                </div>
+            </div>
+            <div class="pana-accordion-item set-bg" data-setbg="img/ap/touch.jpg">
+                <div class="pa-text">
+                    <div class="pa-tag">Dofus Touch</div>
+                    <h2><i>Les Anciens Sufokiens</i></h2>
+                    <div class="pa-author">
+                        <img src="img/gm/skit.jpg" alt="">
+                        <h4>Skitounet</h4>
+                    </div>
+                </div>
+            </div>
+            <div class="pana-accordion-item set-bg" data-setbg="img/ap/waven.jpg">
+                <div class="pa-text">
+                    <div class="pa-tag">Waven</div>
+                    <h2><i>Les Sufokiens Désancrés</i></h2>
+                    <div class="pa-author">
+                        <img src="img/gm/megumin.jpg" alt="">
+                        <h4>Megumin</h4>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- Nouvelle section pour les représentants de la communauté et la description -->
+<section class="community-section">
+    <div class="community-left">
+        <div class="representative">
+            <h2>Les gestionnaires d'« Alt Tab »</h2>
+            <br />
+            <img src="img/gm+/esenjin.gif" alt="Esenjin Asakha">
+            <h3>Esenjin Asakha</h3>
+            <p>C'est <b>Esenjin Asakha</b> ! Je suis le fondateur de la communauté <b>Alt Tab</b> et l'un de ses responsables actuels. J'ai créé ce groupe dans le but de partager de palpitantes aventures avec des aventuriers venus de tous les horizons ! J'espère que tous nos membres passent d'agréables moments de convivialité chez nous.</p>
+        </div>
+        <br />
+        <div class="representative">
+            <img src="img/gm+/arctyk.gif" alt="Arctyk">
+            <h3>Arctyk</h3>
+            <p>C'est <b>Arctyk</b> ! Je fais maintenant partie des meubles par ici. Je suis censé m'occuper de la guilde sur <b>Dofus</b>, mais je passe surtout mon temps à me toucher la nouille.</p>
+        </div>
+        <br />
+        <div class="representative">
+            <img src="img/gm+/skitounet.gif" alt="Skitounet">
+            <h3>Skitounet</h3>
+            <p>C'est <b>Skitounet</b> ! Passionné de jeux vidéo et d'informatique, je suis là pour vous accompagner sur <b>Dofus Touch</b> ! Mon activité préférée sur le jeu ? Me perdre en faisant les quêtes !</p>
+        </div>
+            <div class="representative">
+                <h2>Viens t'amuser !</h3>
+            </div>
+            <img src="img/about.gif" alt="about">
+    </div>
+
+    <div class="community-right">
+        <h2>Qui sommes-nous ?</h2>
+        <p>Bienvenue dans l'atmosphère vibrante et décontractée de notre communauté <b>Alt Tab</b> (anciennement <i>Zaap Sufokien</i>). Nos guildes sont bien plus que de simples regroupements de joueurs ; ce sont des familles virtuelles où règnent la camaraderie, le fun et l'aventure. Que vous soyez un novice enthousiaste ou un vétéran aguerri, vous trouverez ici un refuge où vous pouvez être vous-même, explorer des mondes fantastiques et relever des défis épiques. Rejoignez-nous pour des soirées endiablées, des événements communautaires et des échanges enjoués où l'humour (douteux) et la bonne humeur sont toujours au rendez-vous. Dans nos guildes, chaque joueur est une pièce essentielle d'un puzzle plus grand, où l'amusement et la convivialité sont les maîtres mots !</p>
+
+        <h2>Où nous trouver ?</h2>
+        <p>Nous avons actuellement des guildes sur :</p>
+        <ul>
+            <li><b>Dofus</b> | <b>La Compagnie de Sufokia</b> (depuis 2007)</li>
+            <li><b>Guardian Tales</b> | <b>Cercle_des_Cendres</b> (depuis 2021)</li>
+            <li><b>Dofus Touch</b> | <b>Les Anciens Sufokiens</b> (depuis 2024)</li>
+            <li><b>Waven</b> | <b>Les Sufokiens Désancrés</b> (depuis 2024)</li>
+        </ul>
+        <p>Nous sommes également présent sur les MMORPG suivants (sans y avoir de guilde) :</p>
+        <ul>
+            <li><b>OGame</b></li>
+            <li><b>Wakfu</b></li>
+            <li><b>Final Fantasy XIV</b></li>
+            <li><b>ArcheAge</b></li>
+            <li><b>Black Desert Online</b></li>
+            <li><b>The Elder Scrolls Online</b></li>
+            <li><b>Destiny 2</b></li>
+            <li><b>Lost Ark</b></li>
+        </ul>
+        <p>Sans oublier les jeux coop suivants :</p>
+        <ul>            
+            <li><b>Minecraft</b></li>
+            <li><b>Overwatch</b></li>
+            <li><b>Monster Hunter World</b></li>
+            <li><b>Honkai Impact 3rd</b></li>
+            <li><b>Illusion Connect</b></li>
+            <li><b>Epic Seven</b></li>
+            <li><b>Genshin Impact</b></li>
+            <li><b>Tower of Fantasy</b></li>
+            <li><b>Honkai : Star Rail</b></li>
+            <li><b>Granblue Fantasy Relink</b></li>
+        </ul>
+
+        <h2>Nos projets en collaboration avec la branche <strong>CILA</strong> de notre association</h2>
+                    <ul>
+                        <li><a href="https://cila.camelia-studio.org/roulette-donjons/" target="_blank">Roulette à donjons</a> | Outil conçu pour nos joueurs sur Dofus. Il sélectionne un donjon au hasard dans la fourchette de niveaux choisis.</li>
+                        <li><a href="https://ico.camelia-studio.org/" target="_blank">ICO</a> | Il s'agit de la galerie d'images de l'association Camélia Studio, à laquelle nous appartenons. Vous y trouverez un dossier pour chacun de nos jeux.</li>
+                        <li><a href="https://cila.camelia-studio.org/moisson-rouge/" target="_blank">Moisson Rouge</a> | Outil conçu pour nos joueurs sur Dofus. Il permet de suivre l'avancé des quêtes du Dofus Ocre ; l'Éternelle Moisson.</li>
+                    </ul>
+                </br>
+                    <h2>Sources des images en une</h2>
+                    <ul>
+                        <li><a href="https://twitter.com/AntoineMazMaz/status/1295407941407866880" target="_blank">Dofus</a></li>
+                        <li><a href="https://www.pixiv.net/en/artworks/108949034" target="_blank">Guardian Tales</a></li>
+                        <li><a href="https://www.artstation.com/artwork/ykQoKn" target="_blank">Dofus Touch</a></li>
+                        <li><a href="https://www.artstation.com/artwork/D5QN09" target="_blank">Waven</a></li>
+                    </ul>
+    </div>
+</section>
+
+
+<script type="text/javascript" src="scripts.js"></script>
+
+</body>
--- a/branches/alt+tab/scripts.js
+++ b/branches/alt+tab/scripts.js
@ -0,0 +1,9 @@
+    document.addEventListener("DOMContentLoaded", function () {
+        const bgElements = document.querySelectorAll('.set-bg');
+        bgElements.forEach(function (element) {
+            const bg = element.getAttribute('data-setbg');
+            if (bg) {
+                element.style.backgroundImage = `url(${bg})`;
+            }
+        });
+    });
--- a/branches/alt+tab/style.css
+++ b/branches/alt+tab/style.css
@ -0,0 +1,258 @@
+/* Global reset */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Montserrat', sans-serif;
+}
+
+a {
+    color: #007bff;
+    text-decoration: none;
+    background-color: transparent;
+}
+
+/* Hero Section Styles */
+.hero-section {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    background-color: #f4f4f4;
+    overflow: hidden;
+}
+
+.pana-accordion {
+    width: 100%;
+    height: 100%;
+}
+
+.pana-accordion-wrap {
+    display: flex;
+    width: 100%;
+    height: 100%;
+}
+
+.pana-accordion-item {
+    flex: 1;
+    position: relative;
+    background-size: cover;
+    background-position: center;
+    transition: flex 0.5s ease;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.pana-accordion-item:hover {
+    flex: 3;
+}
+
+.pana-accordion-item.set-bg {
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+/* Text Styles - centered at the bottom with full background */
+.pa-text {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    text-align: center;
+    color: white;
+    z-index: 2;
+    width: 90%;
+    background-color: rgba(0, 0, 0, 0.7);
+    padding: 20px;
+    border-radius: 10px;
+}
+
+/* Tag and Title */
+.pa-tag {
+    font-size: 18px;
+    margin-bottom: 10px;
+}
+
+/* Guild name styling */
+.pa-text h2 {
+    font-size: 28px;
+    font-style: italic;
+    margin-bottom: 15px;
+}
+
+/* Author details */
+.pa-author {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 10px;
+}
+
+.pa-author img {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    margin-right: 10px;
+}
+
+.pa-author h4 {
+    font-size: 20px;
+}
+
+/* Ensure proper responsiveness */
+@media (max-width: 768px) {
+    .pana-accordion-item {
+        flex: 1 !important;
+    }
+
+    .pa-text h2 {
+        font-size: 22px;
+    }
+
+    .pa-author h4 {
+        font-size: 16px;
+    }
+}
+
+/* Section de la communauté */
+.community-section {
+    display: flex;
+    width: 100%;
+    min-height: 100vh;
+    clear: both;
+}
+
+/* Partie gauche : représentants de la communauté */
+.community-left {
+    flex: 1;
+    background-color: #2682C4;
+    color: white;
+    padding: 30px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-height: 100vh;
+    box-sizing: border-box;
+}
+
+.community-left .representative {
+    text-align: left;
+    margin-bottom: 40px;
+    width: 100%;
+    max-width: 600px;
+}
+
+.community-left .representative img {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    margin: 0 auto;
+    display: block;
+}
+
+
+.community-left h3 {
+    font-size: 24px;
+    margin-bottom: 10px;
+}
+
+.community-left p {
+    font-size: 16px;
+    line-height: 1.5;
+}
+
+/* Styles des titres avec liseré café */
+.community-left h2 {
+    font-size: 26px;
+    margin-bottom: 20px;
+    position: relative;
+}
+
+/* Liseré café sous les titres */
+.community-left h2::after {
+    content: '';
+    display: block;
+    width: 200px;
+    height: 4px;
+    background-color: #70685d;
+    margin-top: 10px;
+    border-radius: 2px;
+}
+
+/* Partie droite : description de la communauté */
+.community-right {
+    flex: 1;
+    background-color: #70685d;
+    color: black;
+    padding: 30px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    box-sizing: border-box;
+    min-height: 100vh;
+}
+
+.community-right h2 {
+    font-size: 26px;
+    margin-bottom: 20px;
+}
+
+.community-right p, 
+.community-right ul {
+    font-size: 16px;
+    line-height: 1.5;
+    margin-bottom: 20px;
+}
+
+.community-right ul {
+    padding-left: 20px;
+}
+
+.community-right li {
+    margin-bottom: 10px;
+}
+
+/* Styles des titres avec liseré bleu */
+.community-right h2 {
+    font-size: 26px;
+    margin-bottom: 20px;
+    position: relative;
+}
+
+/* Liseré bleu sous les titres */
+.community-right h2::after {
+    content: '';
+    display: block;
+    width: 200px;
+    height: 4px;
+    background-color: #2682C4;
+    margin-top: 10px;
+    border-radius: 2px;
+}
+
+/* Ajout d'un espace de défilement pour la partie droite */
+.community-right {
+    height: 100%;
+    overflow-y: scroll;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .community-section {
+        flex-direction: column;
+    }
+
+    .community-left, .community-right {
+        width: 100%;
+        min-height: 50vh;
+    }
+}