Skip to content
Extraits de code Groupes Projets

Comparer les révisions

Les modifications sont affichées comme si la révision source était fusionnée avec la révision cible. En savoir plus sur la comparaison des révisions.

Source

Sélectionner le projet cible
No results found

Cible

Sélectionner le projet cible
  • salixor/perso
1 résultat
Afficher les modifications
Validations sur la source (10)
Masquer les modifications d'espaces
En ligne Côte à côte
cookies.js
Voir le fichier @ 0167a2d6
function setCookie(cname, cvalue, exdays) {
let d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
document.cookie = `${cname}=${cvalue};expires=${d.toUTCString()};samesite=strict`;
}
function getCookie(cname) {
let name = cname + "=";
let ca = document.cookie.split(';');
let ca = document.cookie.split(";");
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ')
c = c.substring(1);
if (c.indexOf(name) == 0)
return c.substring(name.length, c.length);
let c = ca[i];
while (c.charAt(0) == " ") c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
}
return "";
}
cours-ensiie.html
Voir le fichier @ 0167a2d6
......@@ -26,13 +26,16 @@
<header>
<a href="index.html" class="header_content" title="Revenir à l'accueil">
<img src="https://avatars1.githubusercontent.com/u/12085737?s=400" class="avatar" draggable="false" />
<div class="nickname"><b>Salixor</b></div>
<div class="description">Au fond, je suis un peu un weeb.</div>
<div>
<div class="nickname"><b>Salixor</b></div>
<div class="description">Au fond, je suis un peu un weeb.</div>
</div>
</a>
<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>
</div>
<button type="button" class="theme_toggle" onclick="toggleLights(this)" title="Changer de thème">
<svg id="theme-toggle-light" width="40" height="40" viewBox="0 0 40 40" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><text x="7" y="32">☀</text></svg>
<svg id="theme-toggle-dark" width="40" height="40" viewBox="0 0 40 40" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><text x="7" y="32">⚬</text></svg>
</button>
</header>
<section class="header_links">
......@@ -130,30 +133,8 @@
</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="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]-->
<script type="text/javascript" src="script.js"></script>
</html>
index.html
Voir le fichier @ 0167a2d6
......@@ -7,7 +7,7 @@
<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="icon" href="https://avatars1.githubusercontent.com/u/12085737?s=400" type="image/x-icon" />
<link rel="icon" href="https://git.iiens.net/uploads/-/system/user/avatar/257/avatar.png?width=512" type="image/x-icon" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="theme-color" content="#FA515D">
......@@ -17,7 +17,7 @@
<meta property="og:url" content="http://www.cocchi.iiens.net/">
<meta property="og:title" content='Kévin "Salixor" Cocchi'>
<meta property="og:description" content="Dépôts de corrections de TP et TD">
<meta property="og:image" content="https://avatars1.githubusercontent.com/u/12085737?s=400">
<meta property="og:image" content="https://git.iiens.net/uploads/-/system/user/avatar/257/avatar.png?width=512">
</head>
<body>
......@@ -25,14 +25,17 @@
<div class="container">
<header>
<a href="index.html" class="header_content" title="Revenir à l'accueil">
<img src="https://avatars1.githubusercontent.com/u/12085737?s=400" class="avatar" draggable="false" />
<div class="nickname"><b>Salixor</b></div>
<div class="description">Au fond, je suis un peu un weeb.</div>
<img src="https://git.iiens.net/uploads/-/system/user/avatar/257/avatar.png?width=512" class="avatar" draggable="false" />
<div>
<div class="nickname"><b>Salixor</b></div>
<div class="description">Au fond, je suis un peu un weeb.</div>
</div>
</a>
<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>
</div>
<button type="button" class="theme_toggle" onclick="toggleLights(this)" title="Changer de thème">
<svg id="theme-toggle-light" width="40" height="40" viewBox="0 0 40 40" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><text x="7" y="32">☀</text></svg>
<svg id="theme-toggle-dark" width="40" height="40" viewBox="0 0 40 40" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><text x="7" y="32">⚬</text></svg>
</button>
</header>
<section class="header_links">
......@@ -45,40 +48,31 @@
<a href="https://gitlab.com/salixor" target="_blank">GitLab</a>
<a href="./hardware.txt" target="_blank">Hardware</a>
<a href="./RIB.txt" target="_blank">RIB</a>
<a href="cours-ensiie.html">TDs/TPs</a>
</section>
<section>
C'est vide pour l'instant. Peut-être que je mettrai quelque chose ici prochainement !
<section class="content">
<p>Bienvenue sur mon site perso, qui a assez peu bougé au fil des années.</p>
<p>Il me sert un peu d'annuaire, et de mini archive par rapport à l'école (vous pouvez retrouver les TPs et TDs que j'avais conservés en <a href="cours-ensiie.html">cliquant ici</a>).</p>
<p>Pour l'instant, il n'y a pas grand chose, et je pense que ça bougera très peu à l'avenir.</p>
</section>
<section class="content">
<p>Pour ceux qui ne me connaitraient pas, je suis un ancien de la promo 2019 (ça remonte !).</p>
<p>Je suis un membre encore assez présent du Bakaclub, et j'essaie de participer à quelques activités IRL de temps en temps.</p>
<p>Sans surprise, je suis donc assez passionné par les animes, la musique japonaise, et j'apprends petit à petit la langue.</p>
</section>
<section class="content">
<p>Je me suis récemment lancé dans la photographie, et j'ai ouvert un site dédié : <a href="https://nemophila.me">nemophila.me</a></p>
<p>Il m'arrive aussi de parler sur Twitter : <a href="">Twitter</a></p>
<p>Et sinon, l'ensemble des liens ci-dessus est une bonne référence.</p>
</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="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]-->
<script type="text/javascript" src="script.js"></script>
</html>
lightsoff.js
Voir le fichier @ 0167a2d6
$(document).ready(function() {
let lightsoff = getCookie("lightsoff") === "on";
let switcher = document.getElementsByClassName("theme_toggle")[0];
switcher.style.display = "inline-block";
switcher.innerHTML = lightsoff ? switcher.dataset.light : switcher.dataset.dark;
const setElementDisplay = (element, display) => {
element.style.display = display;
};
if (lightsoff) toggleLights(switcher);
const toggleElementDisplay = (element) => {
setElementDisplay(
element,
element.style.display === "inline-block" ? "none" : "inline-block"
);
};
let lightDisplay, darkDisplay;
document.addEventListener("DOMContentLoaded", function () {
const lightsoff = getCookie("lightsoff") === "on";
setElementDisplay(document.querySelector(".theme_toggle"), "inline-block");
lightDisplay = document.querySelector("#theme-toggle-light");
darkDisplay = document.querySelector("#theme-toggle-dark");
setElementDisplay(lightDisplay, lightsoff ? "inline-block" : "none");
setElementDisplay(darkDisplay, !lightsoff ? "inline-block" : "none");
if (lightsoff) updateTheme();
});
function toggleLights(switcher) {
let html_tag = document.getElementsByTagName("html")[0];
let is_dark = (html_tag.className === "");
const updateTheme = () => {
const htmlTag = document.querySelector("html");
htmlTag.classList.toggle("dark");
const isLightsOff = htmlTag.classList.contains("dark") ? "on" : "off";
setCookie("lightsoff", isLightsOff, 365);
};
html_tag.className = is_dark ? "dark" : "";
switcher.innerHTML = is_dark ? switcher.dataset.light : switcher.dataset.dark;
setCookie("lightsoff", is_dark ? "on" : "off", 365);
}
const toggleLights = () => {
toggleElementDisplay(lightDisplay);
toggleElementDisplay(darkDisplay);
updateTheme();
};
script.js 0 → 100644
Voir le fichier @ 0167a2d6
const colors = [
"#E4ACB2",
"#C49C8B",
"#99BAB9",
"#8C9579",
"#EC5353",
"#B795E4",
];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
document.addEventListener("DOMContentLoaded", function () {
document.documentElement.style.setProperty("--accent-color", randomColor);
});
document
.querySelector('meta[name="theme-color"]')
.setAttribute("content", randomColor);
styles.css
Voir le fichier @ 0167a2d6
......@@ -7,6 +7,10 @@
list-style: none;
}
:root {
--accent-color: #444;
}
.clear { clear: both; }
html, body {
......@@ -24,33 +28,33 @@ body > * {
hr { border: 0; border-bottom: 1px dotted #DDDDDD; margin: 10px 0px; }
a { color: #fff; transition: opacity 1s ease-out; text-decoration: none; }
a:hover { background-color: rgba(51,51,51,0.8); color: #999; }
a:active { color: #777; }
div.container {
margin: 0;
box-shadow: 0 0 25px 0px rgba(0,0,0,0.15);
background-color: #ffffff;
width: 100%;
flex-grow: 1;
position: relative;
}
@media only screen and (min-width: 400px) {
div.container {
margin: 60px 0 0;
html, body {
flex-direction: column;
}
}
@media only screen and (min-width: 530px) {
div.container {
margin: 100px auto 0;
margin: 40px 0 0;
flex-grow: 1;
}
}
@media only screen and (min-width: 1220px) {
@media only screen and (min-width: 1200px) {
html, body {
flex-direction: row;
align-items: flex-end;
justify-content: center;
}
div.container {
margin: 150px auto 0;
min-height: 1000px;
width: 1200px;
border-radius: 7px 7px 0 0;
}
......@@ -59,7 +63,7 @@ div.container {
.container .row { margin: 5px 10px; padding: 0 10px; }
.container .row:first-of-type { margin-top: 15px; }
.container .row:last-of-type { margin-bottom: 15px; }
div.container { margin: 0 !important; flex-grow: 1; }
div.container { margin: 0 !important; }
section.container a, .container h3 {
background-color: #222;
......@@ -102,17 +106,16 @@ section.container a::after {
}
header {
background: #333333 url("ressources/bg_crop_kumiko.png") 95% bottom / contain no-repeat;
background: var(--accent-color) url("ressources/bg_crop_kumiko.png") 90% bottom / contain no-repeat;
width: 100%;
height: 200px;
padding: 40px;
height: 190px;
color: #FFFFFF;
box-shadow: inset 0 -10px 0 0 rgba(0,0,0,0.5);
}
header a.header_content {
margin: 60px 0 0 40px;
position: absolute;
display: block;
display: inline-flex;
text-decoration: none;
color: #fff !important;
}
......@@ -124,13 +127,14 @@ header a.header_content:hover {
header img.avatar {
border-radius: 100%;
box-shadow: 0 0 0 10px #FFFFFF;
height: 100px;
width: 100px;
float: left;
border: 10px double #fff;
height: 110px;
width: 110px;
margin-right: 20px;
}
header div.nickname, header div.description { margin: 0 0 0 130px; }
header a.header_content:hover img.avatar { border-style: solid; }
header div.nickname { font-size: 42px; margin-top: 30px; font-weight: bold; }
header div.description { font-size: 14px; margin-top: -5px; }
......@@ -155,11 +159,24 @@ section.header_links a {
font-size: 12px;
text-transform: uppercase;
}
section.header_links a:hover { background: rgba(0,0,0,0.5); }
section.header_links a:hover { background: var(--accent-color); }
section.cours { padding: 15px; overflow: hidden; }
section.content {
margin: 20px;
padding: 15px 20px;
line-height: 25px;
border-radius: 15px;
border: 2px dashed var(--accent-color);
color: #222;
background-color: #eee;
}
section.content a { color: var(--accent-color); }
section.content a:hover { color: var(--accent-color); opacity: 0.5; }
section.cours a {
background-color: #222;
background-color: var(--accent-color);
border-radius: 3px;
display: inline-block;
font-size: 14px;
......@@ -179,32 +196,28 @@ section.cours a::after {
/* Styles used for the header of the page */
div.floating_links {
float: right;
margin: 10px 15px 0 0;
}
button.theme_toggle {
display: block;
background: none;
position: absolute;
top: 0;
padding: 15px 0 3px 0;
right: 15px;
cursor: pointer;
outline: none;
border: none;
border-radius: 5px;
padding: 5px 8px;
line-height: 8px;
color: #ffffff;
font-size: 8px;
text-transform: uppercase;
width: 100%;
text-align: center;
line-height: 24px;
font-size: 30px;
display: none;
border-radius: 0 0 30px 30px;
border: 2px dashed transparent;
border-top: none;
}
button.theme_toggle { background-color: #333333; display: none; margin-bottom: 5px; }
button.theme_toggle:hover { background-color: #505050; }
@media only screen and (min-width: 600px) {
button.theme_toggle { line-height: 10px; font-size: 10px; }
}
button.theme_toggle { color: #000; background-color: #e6e6e6; }
button.theme_toggle:hover { color: #252850; border-color: #252850; }
html.dark button.theme_toggle { color: #fff; background-color: #222; }
html.dark button.theme_toggle:hover { color: orange; border-color: orange; }
/* Files list */
......@@ -275,9 +288,6 @@ html.dark, html.dark body {
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; }
html.dark a:hover { color: #999; }
html.dark a:active { color: #bbb; }
......@@ -303,3 +313,4 @@ 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 section.content { background: #444444; color: #FFFFFF !important; }