From 8d7555a2b6da10139ab6a2d3ea22cd92f58483cc Mon Sep 17 00:00:00 2001
From: salixor <salixor@pm.me>
Date: Tue, 12 Dec 2023 00:40:01 +0100
Subject: [PATCH] =?UTF-8?q?Version=20la=20plus=20r=C3=A9cente=20du=20site?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
index.html | 126 +++++++++++++++++++++++---------------------
styles.css | 151 +++++++++++++++++++++++++++++++++++++++++++++--------
2 files changed, 197 insertions(+), 80 deletions(-)
diff --git a/index.html b/index.html
index 41e2227..96b83c7 100644
--- a/index.html
+++ b/index.html
@@ -27,45 +27,49 @@
<div class="header_content">
<img src="https://avatars1.githubusercontent.com/u/12085737?s=400" class="avatar" draggable="false" />
<div class="nickname"><b>Salixor</b></div>
- <div class="description">> Dépôt de ressources pour les cours</div>
+ <div class="description">Au fond, je suis un peu un weeb.</div>
</div>
<div class="floating_links">
- <button type="button" class="theme_toggle" onclick="toggleLights(this)" data-dark="Thème sombre" data-light="Thème clair">{LIGHT SWITCHER}</button>
+ <button type="button" class="theme_toggle" onclick="toggleLights(this)"
+ data-dark="Thème sombre" data-light="Thème clair">{LIGHT SWITCHER}</button>
<a target="_blank" href="index.html" class="ensiie_link">Site GitHub Pages</a>
</div>
</header>
- <section class="container">
- <div class="row">
- <h3>IPF3 Structures</h3>
+ <section class="header_links">
+ <a href="https://drive.google.com/open?id=1koS6YxQle4Cqx0k5nVfzgHuC1xKDr7aF" target="_blank">Karaokes</a>
+ <a href="http://manga.iiens.net/" target="_blank">Bakaclub</a>
+ <a href="https://anilist.co/user/salixor/" target="_blank">AniList</a>
+ <a href="https://www.last.fm/user/MrSalixor" target="_blank">last.fm</a>
+ <a href="https://github.com/salixor" target="_blank">GitHub</a>
+ <a href="https://gitlab.com/salixor" target="_blank">GitLab</a>
+ </section>
+
+ <section class="cours">
+ <ul class="files-list">
+ <li class="color1">
+ <div>IPF3 Structures</div>
<a target="_blank" href="cours/IPFS3/Files-IPF.ml">Files</a>
<a target="_blank" href="cours/IPFS3/Ensembles-IPF.ml">Ensembles</a>
<a target="_blank" href="cours/IPFS3/ArbresBinaires-IPF.ml">Arbres binaires</a>
<a target="_blank" href="cours/IPFS3/Associations-IPF.ml">Associations</a>
<a target="_blank" href="cours/IPFS3/Graphes-IPF.ml">Graphes</a>
- </div>
-
- <div class="row">
- <h3>IPF3 TD/TP</h3>
+ </li>
+ <li class="color1">
+ <div>IPF3 TD/TP</div>
<a target="_blank" href="cours/IPFS3/TD1-IPF.pdf">TD1</a>
<a target="_blank" href="cours/IPFS3/TD2-IPF.pdf">TD2</a>
<a target="_blank" href="cours/IPFS3/TP4-IPF.ml">TP4</a>
<a target="_blank" href="cours/IPFS3/TP5-IPF.ml">TP5</a>
- </div>
-
- <hr/>
-
- <div class="row">
- <h3>PAP</h3>
+ </li>
+ <li class="color2">
+ <div>PAP</div>
<a target="_blank" href="cours/PAP/TP1-PAP.tgz">TP1</a>
<a target="_blank" href="cours/PAP/TP2-PAP.tgz">TP2</a>
- </div>
-
- <hr/>
-
- <div class="row">
- <h3>IPI TP</h3>
+ </li>
+ <li class="color3">
+ <div>IPI TP</div>
<a target="_blank" href="cours/IPI/TP1-IPI.c">TP1</a>
<a target="_blank" href="cours/IPI/TP2-IPI.c">TP2</a>
<a target="_blank" href="cours/IPI/TP3-IPI.c">TP3</a>
@@ -75,73 +79,77 @@
<a target="_blank" href="cours/IPI/TP7-IPI.c">TP7</a>
<a target="_blank" href="cours/IPI/TP8-IPI.c">TP8</a>
<a target="_blank" href="cours/IPI/TP9-IPI.tgz">TP9</a>
- </div>
-
- <div class="row">
- <h3>IPI TD</h3>
+ </li>
+ <li class="color3">
+ <div>IPI TD</div>
<a target="_blank" href="cours/IPI/TD1-IPI.c">TD1</a>
<a target="_blank" href="cours/IPI/TD2-IPI.c">TD2</a>
<a target="_blank" href="cours/IPI/TD3-IPI.c">TD3</a>
- </div>
-
- <hr/>
-
- <div class="row">
- <h3>MAN</h3>
+ </li>
+ <li class="color4">
+ <div>MAN</div>
<a target="_blank" href="cours/MAN/TP1-MAN.tgz">TP1</a>
<a target="_blank" href="cours/MAN/TP2-MAN.tgz">TP2</a>
- </div>
-
- <hr/>
-
- <div class="row">
- <h3>IPF2</h3>
+ </li>
+ <li class="color1">
+ <div>IPF2</div>
<a target="_blank" href="cours/IPFS2/TP1-IPF.ml">TP1</a>
<a target="_blank" href="cours/IPFS2/TP2-IPF.ml">TP2</a>
<a target="_blank" href="cours/IPFS2/TP3-IPF.ml">TP3</a>
<a target="_blank" href="cours/IPFS2/TP4-IPF.ml">TP4</a>
<a target="_blank" href="cours/IPFS2/TP5-IPF.ml">TP5</a>
<a target="_blank" href="cours/IPFS2/TP6-IPF.ml">TP6</a>
- </div>
-
- <hr/>
-
- <div class="row">
- <h3>IPW</h3>
+ </li>
+ <li class="color5">
+ <div>IPW</div>
<a target="_blank" href="cours/IPW/TP-PHP.tgz">TP PHP</a>
<a target="_blank" href="cours/IPW/TP-Curseurs.tgz">TP Curseurs</a>
- </div>
-
- <div class="row">
- <h3>IPW Résumé</h3>
+ </li>
+ <li class="color5">
+ <div>IPW Résumé</div>
<a target="_blank" href="cours/IPW/Resume-HTML.pdf">HTML</a>
<a target="_blank" href="cours/IPW/Resume-PHP.pdf">PHP</a>
<a target="_blank" href="cours/IPW/Resume-XML.pdf">XML</a>
- </div>
-
- <div class="row">
- <h3>IPW Correction</h3>
+ </li>
+ <li class="color5">
+ <div>IPW Correction</div>
<a target="_blank" href="cours/IPW/CorrectionTPWeb2015.pdf">TP 2015</a>
<a target="_blank" href="cours/IPW/CorrectionTPWeb2016.pdf">TP 2016</a>
- </div>
-
- <hr/>
-
- <div class="row">
- <h3>ILO</h3>
+ </li>
+ <li class="color6">
+ <div>ILO</div>
<a target="_blank" href="cours/ILO/TD1-ILO.java">TD1</a>
<a target="_blank" href="cours/ILO/TP1-ILO.tgz">TP1</a>
<a target="_blank" href="cours/ILO/TP2-ILO.tgz">TP2</a>
- </div>
+ </li>
+ </ul>
</section>
</div>
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
-<script type="text/javascript" src="scripts.js"></script>
<script type="text/javascript" src="cookies.js"></script>
<script type="text/javascript" src="lightsoff.js"></script>
+<script type="text/javascript">
+$(document).ready(function() {
+ let color = ["#F17105", "#D11149", "#6610F2", "#177CC5", "#92A500"];
+ let col_rd = color[Math.floor(Math.random() * color.length)];
+
+ // Changement aléatoire de la couleur
+ $("header").css("background-color", col_rd);
+ $("section.cours a").css("background-color", col_rd);
+
+ $("section.header_links a").hover(
+ function() { $(this).css("background-color", col_rd); },
+ function() { $(this).removeAttr("style"); }
+ );
+
+ // Changement de la couleur pour Google Chrome Mobile
+ $('meta[name=theme-color]').remove();
+ $('head').append('<meta name="theme-color" content="'+ col_rd +'">');
+});
+</script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
diff --git a/styles.css b/styles.css
index aea07f5..1ce4988 100644
--- a/styles.css
+++ b/styles.css
@@ -31,7 +31,7 @@ a:hover { color: #999; }
a:active { color: #777; }
div.container {
- margin: 30px 0 0;
+ margin: 0;
box-shadow: 0 0 25px 0px rgba(0,0,0,0.15);
background-color: #ffffff;
width: 100%;
@@ -137,30 +137,39 @@ header div.description { font-size: 14px; margin-top: -5px; }
header { border-radius: 7px 7px 0 0; }
}
-/* Turn off the lights ... */
-
-html.dark, html.dark body {
- background-color: #222222;
- color: #ffffff;
-}
-
-html.dark button.theme_toggle { background-color: #FFFFFF; color: #333333; }
-html.dark button.theme_toggle:hover { background-color: #DEDEDE; color: #333333; }
-
-html.dark a.ensiie_link { background-color: #c9a192; color: #333333; }
-html.dark a.ensiie_link:hover { background-color: #ac877a; color: #333333; }
+/* Sections */
-html.dark a { color: #ccc; text-decoration: none; }
-html.dark a:hover { color: #999; }
-html.dark a:active { color: #bbb; }
+section.header_links { width: 100%; display: block; background: #222; color: #FFFFFF; }
-html.dark div.container { background-color: #333333; }
+section.header_links a {
+ padding: 15px 20px;
+ display: inline-block;
+ color: #FFFFFF;
+ font-weight: bold;
+ font-size: 12px;
+ text-transform: uppercase;
+}
+section.header_links a:hover { background: rgba(0,0,0,0.5); }
+section.cours { padding: 15px; overflow: hidden; }
-html.dark div.section { border-bottom-color: #444444; }
-html.dark div.section h2 { color: #ee6770; }
+section.cours a {
+ background-color: #222;
+ border-radius: 3px;
+ display: inline-block;
+ font-size: 14px;
+ font-weight: normal;
+ height: 34px;
+ line-height: 34px;
+ margin: 3px 0 0;
+ padding: 0 10px;
+}
+section.cours a, html.dark section.cours a { color: #FFFFFF; }
+section.cours a:hover, html.dark section.cours a:hover { color: #FFFFFF; opacity: 0.7; }
-html.dark hr { border-bottom-color: #444444; }
-html.dark section.container a { color: #FFFFFF; }
+section.cours a::after {
+ content: " ➜";
+ font-size: 14px;
+}
/* Styles used for the header of the page */
@@ -193,3 +202,103 @@ a.ensiie_link:hover { background-color: #775f57; }
@media only screen and (min-width: 600px) {
button.theme_toggle, a.ensiie_link { line-height: 10px; font-size: 10px; }
}
+
+/* Files list */
+
+ul.files-list {
+ position: relative;
+ left: 170px;
+ border-left: solid 4px #e4e4e4;
+ padding: 0 0 0 25px;
+ width: calc(100% - 170px);
+}
+
+ul.files-list li {
+ position: relative;
+ margin: 0 0 12px 0;
+ font-weight: bold;
+ padding: 0 0 12px 0;
+ border-bottom: 1px dashed #EEEEEE;
+}
+
+ul.files-list li:last-child { border-bottom: none; margin: 0; }
+
+ul.files-list li::after {
+ display: inline-block;
+ position: absolute;
+ top: 12px;
+ left: -35px;
+ box-shadow: 0 0 0 6px;
+ content: "•";
+ vertical-align: middle;
+ color: #ffffff;
+ border-radius: 3px;
+ width: 15px;
+ height: 15px;
+ line-height: 15px;
+ padding: 0 0 2px 0;
+ text-align: center;
+}
+
+ul.files-list li.color1::after { background: #EF476F; }
+ul.files-list li.color2::after { background: #F2951D; }
+ul.files-list li.color3::after { background: #8E91D1; }
+ul.files-list li.color4::after { background: #6D9C42; }
+ul.files-list li.color5::after { background: #2A6EF7; }
+ul.files-list li.color6::after { background: #D5D872; }
+
+ul.files-list li div {
+ position: absolute;
+ left: -200px;
+ width: 150px;
+ display: flex;
+ justify-content: center;
+ align-content: center;
+ height: 40px;
+ flex-direction:column;
+ font-size: 12px;
+ text-align: right;
+ text-transform: uppercase;
+ border-radius: 3px;
+ background-color: #222222;
+ color: #EEEEEE;
+ padding: 0 10px;
+}
+
+/* Turn off the lights ... */
+
+html.dark, html.dark body {
+ background-color: #222222;
+ color: #ffffff;
+}
+
+html.dark button.theme_toggle { background-color: #FFFFFF; color: #333333; }
+html.dark button.theme_toggle:hover { background-color: #DEDEDE; color: #333333; }
+
+html.dark a { color: #ccc; text-decoration: none; }
+html.dark a:hover { color: #999; }
+html.dark a:active { color: #bbb; }
+
+html.dark div.container { background-color: #333333; }
+
+html.dark div.section { border-bottom-color: #444444; }
+html.dark div.section h2 { color: #ee6770; }
+
+html.dark hr { border-bottom-color: #444444; }
+html.dark section.container a { color: #FFFFFF; }
+
+html.dark ul.files-list { border-left-color: #555555; }
+html.dark ul.files-list li { border-bottom-color: #444444; }
+html.dark ul.files-list li::after { color: #333333; }
+html.dark ul.files-list li div { background: #EEEEEE; color: #222222; }
+
+html.dark ul.files-list li.color1::after { background: #ef6989; }
+html.dark ul.files-list li.color2::after { background: #f2a541; }
+html.dark ul.files-list li.color3::after { background: #a4a6dd; }
+html.dark ul.files-list li.color4::after { background: #8ab761; }
+html.dark ul.files-list li.color5::after { background: #3f7bf4; }
+html.dark ul.files-list li.color6::after { background: #e2e587; }
+
+html.dark section.header_links a { color: #FFFFFF !important; }
+html.dark a.ensiie_link { background-color: #54413b !important; color: #FFFFFF !important; }
+html.dark a.ensiie_link:hover { background-color: #775f57 !important; color: #FFFFFF !important; }
--
GitLab