Skip to content
Extraits de code Groupes Projets
Vérifiée Valider 59d2c17e rédigé par salixor's avatar salixor
Parcourir les fichiers

Seconde version du site

parent 7f5db4fe
Aucune branche associée trouvée
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
Afficher les modifications d'espaces
En ligne Côte à côte
Affichage de
avec 293 ajouts et 258 suppressions
cookies.js 0 → 100644
+ 19
− 0
Voir le fichier @ 59d2c17e
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;
}
function getCookie(cname) {
let name = cname + "=";
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);
}
return "";
}
index.html
+ 119
− 110
Voir le fichier @ 59d2c17e
......@@ -2,14 +2,15 @@
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Kévin "Salixor" Cocchi</title>
<title>Kévin Cocchi • Salixor</title>
<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300i,400" rel="stylesheet">
<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" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="theme-color" content="#2f2b6f">
<meta name="theme-color" content="#FA515D">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Perso de Salixor">
......@@ -21,118 +22,126 @@
<body>
<div class="container">
<header>
<div class="image"></div>
<div class="subcontainer">
<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="name">> Dépôt de corrections</div>
<div class="avatar"></div>
<div class="description">> Dépôt de ressources pour les cours</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>
<a target="_blank" href="index.html" class="ensiie_link">Site GitHub Pages</a>
</div>
</header>
<section class="container">
<div class="row">
<h3>IPF3</h3>
<a href="cours/IPFS3/Files-IPF.ml">Files</a>
<a href="cours/IPFS3/Ensembles-IPF.ml">Ensembles</a>
<a href="cours/IPFS3/ArbresBinaires-IPF.ml">Arbres binaires</a>
<a href="cours/IPFS3/Associations-IPF.ml">Associations</a>
<a href="cours/IPFS3/Graphes-IPF.ml">Graphes</a>
<a href="cours/IPFS3/TD1-IPF.pdf">TD1</a>
<a href="cours/IPFS3/TD2-IPF.pdf">TD2</a>
<h3>IPF3 Structures</h3>
<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 toclean</h3>
<a href="cours/IPFS3/TP4-IPF.ml">TP4</a>
<a href="cours/IPFS3/TP5-IPF.ml">TP5</a>
<h3>IPF3 TD/TP</h3>
<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>
<a href="cours/PAP/TP1-PAP.tgz">TP1</a>
<a href="cours/PAP/TP2-PAP.tgz">TP2</a>
<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>
<a href="cours/IPI/TP1-IPI.c">TP1</a>
<a href="cours/IPI/TP2-IPI.c">TP2</a>
<a href="cours/IPI/TP3-IPI.c">TP3</a>
<a href="cours/IPI/TP4-IPI.c">TP4</a>
<a href="cours/IPI/TP5-IPI.c">TP5</a>
<a href="cours/IPI/TP6-IPI.tgz">TP6</a>
<a href="cours/IPI/TP7-IPI.c">TP7</a>
<a href="cours/IPI/TP8-IPI.c">TP8</a>
<a href="cours/IPI/TP9-IPI.tgz">TP9</a>
<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>
<a target="_blank" href="cours/IPI/TP4-IPI.c">TP4</a>
<a target="_blank" href="cours/IPI/TP5-IPI.c">TP5</a>
<a target="_blank" href="cours/IPI/TP6-IPI.tgz">TP6</a>
<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>
<a href="cours/IPI/TD1-IPI.c">TD1</a>
<a href="cours/IPI/TD2-IPI.c">TD2</a>
<a href="cours/IPI/TD3-IPI.c">TD3</a>
<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>
<a href="cours/MAN/TP1-MAN.tgz">TP1</a>
<a href="cours/MAN/TP2-MAN.tgz">TP2</a>
<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>
<a href="cours/IPFS2/TP1-IPF.ml">TP1</a>
<a href="cours/IPFS2/TP2-IPF.ml">TP2</a>
<a href="cours/IPFS2/TP3-IPF.ml">TP3</a>
<a href="cours/IPFS2/TP4-IPF.ml">TP4</a>
<a href="cours/IPFS2/TP5-IPF.ml">TP5</a>
<a href="cours/IPFS2/TP6-IPF.ml">TP6</a>
<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>
<a href="cours/IPW/TP-PHP.tgz">TP PHP</a>
<a href="cours/IPW/TP-Curseurs.tgz">TP Curseurs</a>
<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>
<a href="cours/IPW/Resume-HTML.pdf">HTML</a>
<a href="cours/IPW/Resume-PHP.pdf">PHP</a>
<a href="cours/IPW/Resume-XML.pdf">XML</a>
<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>
<a href="cours/IPW/CorrectionTPWeb2015.pdf">TP 2015</a>
<a href="cours/IPW/CorrectionTPWeb2016.pdf">TP 2016</a>
<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>
<a href="cours/ILO/TD1-ILO.java">TD1</a>
<a href="cours/ILO/TP1-ILO.tgz">TP1</a>
<a href="cours/ILO/TP2-ILO.tgz">TP2</a>
<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>
</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>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
......
lightsoff.js 0 → 100644
+ 17
− 0
Voir le fichier @ 59d2c17e
$(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;
if (lightsoff) toggleLights(switcher);
});
function toggleLights(switcher) {
let html_tag = document.getElementsByTagName("html")[0];
let is_dark = (html_tag.className === "");
html_tag.className = is_dark ? "dark" : "";
switcher.innerHTML = is_dark ? switcher.dataset.light : switcher.dataset.dark;
setCookie("lightsoff", is_dark ? "on" : "off", 365);
}
ressources/bg_crop_kumiko.png 0 → 100644
+ 0
− 0
Voir le fichier @ 59d2c17e
ressources/bg_crop_kumiko.png

144 ko

ressources/header_bg_crop_asuka.png supprimé 100644 → 0
+ 0
− 0
Voir le fichier @ 7f5db4fe
ressources/header_bg_crop_asuka.png

311 ko

ressources/header_bg_crop_chitanda.png supprimé 100644 → 0
+ 0
− 0
Voir le fichier @ 7f5db4fe
ressources/header_bg_crop_chitanda.png

442 ko

ressources/header_bg_crop_reina.png supprimé 100644 → 0
+ 0
− 0
Voir le fichier @ 7f5db4fe
ressources/header_bg_crop_reina.png

530 ko

ressources/header_bg_crop_yohane.png supprimé 100644 → 0
+ 0
− 0
Voir le fichier @ 7f5db4fe
ressources/header_bg_crop_yohane.png

123 ko

scripts.js
+ 10
− 31
Voir le fichier @ 59d2c17e
$(document).ready(function() {
var color = ["#F17105", "#D11149", "#6610F2", "#177CC5", "#92A500"]; // Couleurs
var pics = ["asuka", "kumiko", "chitanda", "yohane"]; // Fonds
var col_rd = Math.floor(Math.random() * color.length);
var col_rd = "#FFFFFF";
var pic_rd = "";
function changeStyle() {
// On randomise la couleur
do {
col_rd = Math.floor(Math.random() * color.length);
} while( $("header").css("background-color") == hexToRgbA(color[col_rd]) )
// On randomise l'image
do {
pic_rd = Math.floor(Math.random() * pics.length);
} while( $("div.image").css("background-image") == 'url("ressources/header_bg_crop_'+ pics[pic_rd] +'.png")' )
// Changement aléatoire de l'image et de la couleur parce que pourquoi pas ?
$( document ).ready(function() {
// Changement aléatoire de la couleur
$("header").css("background-color", color[col_rd]);
$("div.image").css("background", 'url("ressources/header_bg_crop_'+ pics[pic_rd] +'.png") 90% 90% / contain no-repeat');
$(".container a").css("background", color[col_rd]);
$("hr").css("border-color", color[col_rd]);
$(".container a").hover(function(){
$(this).css("background", hexToRgbA(color[col_rd], 0.8));
$("section.container a").css("background-color", color[col_rd]);
// $("hr").css("border-color", color[col_rd]);
$("section.container a").hover(function(){
$(this).css("background-color", hexToRgbA(color[col_rd], 0.8));
}, function(){
$(this).css("background", hexToRgbA(color[col_rd], 1));
$(this).css("background-color", hexToRgbA(color[col_rd], 1));
});
// Changement de la couleur pour Google Chrome Mobile
$('meta[name=theme-color]').remove();
$('head').append('<meta name="theme-color" content="'+ color[col_rd] +'">');
}
$( document ).ready(function() {
// On change le style au chargement de la page et avec le bouton de refresh
changeStyle();
});
function hexToRgbA(hex, opacity = 0) {
var c;
if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
c= hex.substring(1).split('');
if(c.length== 3){
if(c.length== 3)
c= [c[0], c[0], c[1], c[1], c[2], c[2]];
}
c= '0x'+c.join('');
if(opacity > 0)
return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(', ')+','+opacity+')';
else {
else
return 'rgb('+[(c>>16)&255, (c>>8)&255, c&255].join(', ')+')';
}
}
throw new Error('Bad Hex');
}
});
styles.css
+ 128
− 117
Voir le fichier @ 59d2c17e
* {
-webkit-tap-highlight-color: #fff rgba(255,255,255,0.5);
box-sizing: border-box;
list-style: none;
margin: 0;
outline: none;
padding: 0;
text-decoration: none;
user-select: none;
outline: none;
list-style: none;
}
::selection { background: #d5602f; }
.clear { clear: both; }
html, body {
background-color: #fff;
color: #fff;
font-family: 'Roboto', sans-serif;
background-color: #ededed;
color: #333333;
font-family: 'Nunito', sans-serif;
display: flex;
flex-direction: column;
height: 100%;
overflow-x: hidden;
}
hr { border: 0; border-bottom: 1px solid #333; margin: 15px 50px; opacity: 0.3;}
body > * {
flex-shrink: 0;
}
hr { border: 0; border-bottom: 1px dotted #DDDDDD; margin: 10px 0px; }
a { color: #fff; transition: opacity 0.1s ease-out; }
a { color: #fff; transition: opacity 1s ease-out; }
a:hover { background-color: rgba(51,51,51,0.8); }
a { color: #666; text-decoration: none; }
a:hover { color: #999; }
a:active { color: #777; }
div.container {
margin: 30px 0 0;
box-shadow: 0 0 25px 0px rgba(0,0,0,0.15);
background-color: #ffffff;
width: 100%;
flex-grow: 1;
}
@media only screen and (min-width: 400px) {
div.container {
margin: 60px 0 0;
}
}
@media only screen and (min-width: 530px) {
div.container {
margin: 100px auto 0;
}
}
@media only screen and (min-width: 1220px) {
div.container {
margin: 150px auto 0;
width: 1200px;
border-radius: 7px 7px 0 0;
}
}
.container .row { line-height: 50px; margin: 0 10px; }
.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; }
.container a, .container h3 {
section.container a, .container h3 {
background-color: #222;
border-radius: 3px;
/*box-shadow: 0 1px 4px rgba(0,0,0,0.4);*/
display: inline-block;
font-size: 14px;
font-weight: normal;
height: 40px;
line-height: 40px;
margin: 0 10px 0 0;
overflow: hidden;
padding: 0 12px;
color: #FFFFFF;
position: relative;
text-overflow: ellipsis;
vertical-align: middle;
width: auto;
}
.container a { font-style: italic; }
section.container a { padding: 0 40px 0 12px; }
.container a:hover { color: #FFFFFF; }
.container h3 {
color: #FFF;
cursor: default;
font-size: 20px;
text-align: left;
overflow: hidden;
padding: 0 15px;
white-space: pre-wrap;
padding: 0 12px;
margin: 0 5px 0 0;
}
.container a::after {
section.container a::after {
background: rgba(0,0,0,0.15);
bottom: 0;
content: "➜";
display: none;
font-size: 14px;
font-style: normal;
height: 100%;
......@@ -68,117 +99,97 @@ a:hover { background-color: rgba(51,51,51,0.8); }
position: absolute;
right: 0;
text-align: center;
vertical-align: middle;
width: 30px;
display: block;
}
@media only screen and (min-width: 1100px) {
.container .row { line-height: normal; margin: 10px; }
.container a, .container h3 { font-size: 16px; height: 56px; line-height: 56px; padding: 0 20px; }
.container a { padding-right: 40px; }
.container h3 { font-size: 28px; width: auto; }
.container a::after { display: block; }
}
header, div.image, div.subcontainer { transform-origin: bottom left; }
header { transform: rotate(-2deg); }
div.image, div.subcontainer { transform: rotate(2deg); }
header {
background: #333;
background-size: contain;
display: inline-block;
overflow: hidden;
position: relative;
position: sticky;
width: 103%;
z-index: 500;
}
div.image {
background: url("/ressources/header_bg_crop_kumiko.png") 90% 90% / contain no-repeat;
content: '';
float: right;
height: 100%;
position: relative;
background: #333333 url("ressources/bg_crop_kumiko.png") 95% bottom / contain no-repeat;
width: 100%;
z-index: 2;
height: 200px;
color: #FFFFFF;
box-shadow: inset 0 -10px 0 0 rgba(0,0,0,0.5);
}
header::before {
background-color: #000;
bottom: 0;
content: '';
height: 10px;
opacity: 0.5;
header div.header_content {
margin: 60px 0 0 40px;
position: absolute;
width: 100%;
z-index: 1;
}
header::after, div.image::after {
content: '';
display: block;
padding-top: 40%;
header img.avatar {
border-radius: 100%;
box-shadow: 0 0 0 10px #FFFFFF;
height: 100px;
width: 100px;
float: left;
}
@media only screen and (min-width: 1100px) {
header { height: 430px; top: -300px; }
div.image { bottom: 25px; height: 430px; }
header::after, div.image::after { padding-top: 0; }
}
header div.nickname, header div.description { margin: 0 0 0 130px; }
header div.nickname { font-size: 42px; margin-top: 30px; font-weight: bold; }
header div.description { font-size: 14px; margin-top: -5px; }
div.subcontainer {
bottom: 10px;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 3;
@media only screen and (min-width: 1220px) {
hr { margin: 15px 0; }
div.container { margin: 75px auto 0 !important; }
.container .row { line-height: normal; margin: 10px; }
section.container a, .container h3 { font-size: 16px; height: 46px; line-height: 46px; }
.container h3 { font-size: 28px; padding: 0 15px; }
header { border-radius: 7px 7px 0 0; }
}
section.container { color: #333; }
.container, div.subcontainer { margin: 0 auto; }
div.avatar, div.nickname, div.name { position: absolute; }
/* Turn off the lights ... */
div.avatar {
background: #fff url("https://avatars1.githubusercontent.com/u/12085737?s=400") no-repeat center; background-size: contain;
border: 4px #fff solid;
border-radius: 100%;
bottom: 15px;
box-shadow: 0 0 7px rgba(0,0,0,0.25);
height: 50px;
margin-left: 15px;
transition: background 0.3s ease;
width: 50px;
html.dark, html.dark body {
background-color: #222222;
color: #ffffff;
}
div.nickname, div.name {
float: left;
font-family: 'Roboto';
font-style: italic;
font-weight: 300;
margin: 0 0 0 60px;
text-shadow: 1px 2px 3px rgba(0,0,0,0.25);
}
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; }
html.dark a { color: #ccc; text-decoration: none; }
html.dark a:hover { color: #999; }
html.dark a:active { color: #bbb; }
div.nickname, div.name { margin: 0 0 0 75px; }
div.nickname { bottom: 32px; font-size: 28px; }
div.name { bottom: 16px; font-size: 14px; }
html.dark div.container { background-color: #333333; }
@media only screen and (min-width: 450px) {
div.avatar {
border: 6px #fff solid;
height: 80px;
margin-left: 35px;
width: 80px;
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; }
/* Styles used for the header of the page */
div.floating_links {
float: right;
margin: 10px 15px 0 0;
}
div.nickname, div.name { margin: 0 0 0 125px; }
div.nickname { bottom: 40px; font-size: 38px; }
div.name { bottom: 25px; font-size: 16px; }
button.theme_toggle, a.ensiie_link {
display: block;
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;
}
@media only screen and (min-width: 1100px) {
.container { width: 1100px; }
div.subcontainer { bottom: 15px; width: 1100px; }
button.theme_toggle { background-color: #333333; display: none; margin-bottom: 5px; }
button.theme_toggle:hover { background-color: #505050; }
a.ensiie_link { background-color: #54413b; }
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; }
}
0% ou .
You are about to add 0 people to the discussion. Proceed with caution.
Veuillez vous inscrire ou vous pour commenter