Commit 4e8d2d7d authored by Luc Damas's avatar Luc Damas

Hop

parents
This diff is collapsed.
* { margin: 0px; padding: 0px; }
body {
font-size: 14px;
font-family: sans-serif, arial;
}
@font-face {
font-family: "MoonFlower";
src: url("MoonFlower.ttf");
}
body.scrolled header {
background: none;
position: fixed;
top: 0px;
left: 0px;
height: 100px;
}
body.scrolled section {
margin-top: 400px;
}
header {
height: 300px;
background: transparent url("../images/header.jpg") top left no-repeat;
background-size: cover;
/*border-top: solid 2px #c06e00;*/
}
header h1 {
font-family: MoonFlower;
margin: 30px;
font-size: 5em;
}
#ext {
position: fixed;
top: 0px;
right: 0px;
}
#ext li {
display: inline-block;
}
#ext a:link, #ext a:visited {
display: block;
padding: 10px;
background-color: black;
color: white;
text-decoration: none;
transition: all 0.5s ease;
}
#ext a:hover {
background-color: #c06e00;
}
#int {
position: fixed;
top: 150px;
left: 0px;
}
#int li {
margin: 3px 0px;
}
#int a:link, #int a:visited {
display: block;
background-color: black;
padding-left: 20px;
width: 0px;
height: 20px;
overflow: hidden;
transition: all 0.5s ease;
color: white;
text-decoration: none;
}
#int a:hover {
width: 60px;
}
article {
background-color: #EEEEEE;
padding: 50px;
margin: 100px 30px;
}
p {
margin: 5px 0px;
text-align: justify;
}
#images #imagesContainer {
margin-top: 20px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
#images div.bof {
flex: 0 1 300px;
margin-bottom: 30px;
}
#images div.bof img {
width: 100%;
height: auto;
}
This diff is collapsed.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Le miel</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/animate.css" />
</head>
<body>
<main>
<header>
&nbsp;
<h1>Le miel</h1>
</header>
<nav id='ext'>
<ul>
<li><a href='https://fr.wikipedia.org/wiki/Miel'>Le miel sur wikipedia</a>
<li><a href='http://www.mielinfrance.fr/miel-et-apiculture/bienfaits-du-miel/'>Les biensfaits du miel</a>
<li><a href='https://www.saveur-biere.com/fr/biere-bouteille/103-barbar-au-miel.html'>Barbar : Bière au miel</a>
</ul>
</nav>
<nav id='int'>
<ul>
<li><a href='#definition'>Le miel</a></li>
<li><a href='#images'>Images</a></li>
<li><a href=''></a></li>
<li><a href=''></a></li>
<li><a href=''></a></li>
<li><a href=''></a></li>
<li><a href=''></a></li>
<li><a href=''></a></li>
</ul>
</nav>
<section>
<article id='definition'>
<h2>Qu'est ce que le miel ?</h2>
<p>
Les abeilles butineuses sont chargées de l'approvisionnement de la ruche. Une fois posée sur une plante à fleurs (angiospermes), l'abeille en écarte les pétales, plonge sa tête à l'intérieur, allonge sa langue et aspire le nectar qu'elle stocke provisoirement dans son jabot. Du fait de leur anatomie et en particulier de la longueur de leur langue, les abeilles ne peuvent récolter le nectar que sur certaines fleurs, qui sont dites alors mellifères.
</p>
<p>
Les abeilles peuvent aussi récolter du miellat, excrétion produite par des insectes suceurs comme le puceron, la cochenille ou le metcalfa à partir de la sève des arbres. Il sera utilisé de la même façon que le nectar de fleur (c'est ce produit de base qui est notamment utilisé pour élaborer le miel de sapin).
</p>
<p>
L’élaboration du miel commence dans le jabot de l’ouvrière, pendant son vol de retour vers la ruche. L’invertase, une enzyme de la famille des diastases, est ajoutée, dans le jabot, au nectar. Il se produit alors une réaction chimique, l’hydrolyse du saccharose qui donne du glucose et du fructose.
</p>
<p>
Arrivée dans la ruche, l’abeille butineuse régurgite le nectar à une receveuse (trophallaxie), qui, à son tour, régurgitera et ré-ingurgitera ce nectar riche en eau, en le mêlant à de la salive et à des sucs digestifs, ayant pour effet de compléter le processus de digestion des sucres. Une fois stocké dans les alvéoles, le miel est déshydraté par une ventilation longue et énergique de la part précisément des ouvrières ventileuses. Parvenu à maturité, le miel a une durée de conservation extrêmement longue.
</p>
<p>
La chaleur de la ruche ainsi que les ouvrières ventileuses, qui peuvent entretenir un courant d’air pendant 20 minutes dans la ruche, provoquent l’évaporation de l’eau. Le miel arrive à maturité lorsque sa teneur en eau devient inférieure à 18 % ; il est alors emmagasiné dans d’autres alvéoles qui seront operculés une fois remplis.
</p>
<p>
Le miel est ainsi stocké par les abeilles pour servir de réserve de nourriture ; en particulier pendant les saisons défavorables, en saison sèche pour les Apis dorsata ou l'hiver pour les Apis mellifera.
</p>
<p>
Le scientifique Bernd Heinrich a mesuré le volume de travail effectué par les abeilles butineuses. Ainsi, pour produire une livre de miel, les abeilles doivent effectuer plus de 17 000 voyages, visiter 8 700 000 fleurs, le tout représentant plus de 7 000 heures de travail7.
</p>
</article>
<article id='images'>
<h2>Les fleurs et les danses des abeilles</h2>
<div id='imagesContainer'>
<div class='bof'><img src='images/bee1.jpg' alt='bee'/></div>
<div class='bof'><img src='images/bee2.jpg' alt='bee'/></div>
<div class='bof'><img src='images/bee1.jpg' alt='bee'/></div>
<div class='bof'><img src='images/bee2.jpg' alt='bee'/></div>
<div class='bof'><img src='images/bee1.jpg' alt='bee'/></div>
<div class='bof'><img src='images/bee2.jpg' alt='bee'/></div>
<div class='bof'><img src='images/bee1.jpg' alt='bee'/></div>
<div class='bof'><img src='images/bee2.jpg' alt='bee'/></div>
<div class='bof'><img src='images/bee1.jpg' alt='bee'/></div>
<div class='bof'><img src='images/bee2.jpg' alt='bee'/></div>
</div>
</article>
</section>
<footer>
CC BY NC SA - <a href='http://www.luc-damas.fr'>Luc Damas</a> - 2017
</footer>
</main>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery-ui.js'></script>
<script type='text/javascript' src='js/main.js'></script>
</body>
</html>
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
$(document).ready(function() {
// $("img").hide();
$(window).scroll(function() {
if ($(window).scrollTop() > 100)
$("body").addClass("scrolled");
else
$("body").removeClass("scrolled");
});
});
This diff is collapsed.
#bg {
position: fixed;
top: 0px;
left: 0px;
height: 100vh;
width: 100vw;
background-color: rgba(0,0,0,0.5);
}
#authSuperContainer {
width: 300px;
margin: 100px auto;
position: relative;
}
canvas {
position: absolute;
top: 0px;
left: 0px;
pointer-events: none;
}
#authContainer {
width: 300px;
height: 300px;
margin: 0px auto;
background-color: white;
border-radius: 40px;
/*box-shadow: 0px 0px 40px black;*/
display: flex;
flex-direction: row;
flex-wrap: wrap;
transition: all 0.5s ease;
}
#authContainer.authContainerHover {
}
.authButton {
flex: 1 1 20%;
border-radius: 50%;
border: solid 1px #AAAAAA;
margin: 5%;
transition: all 0.5s ease;
}
.authButtonHover.authButton {
background-color: #EEEEEE;
}
.authButtonSelected {
background-color: #CCCCCC;
}
.authButtonSelected.authButtonFail {
background-color: #CC9999;
}
.authButtonSelected.authButtonOK {
background-color: #99CC99;
}
\ No newline at end of file
* { margin: 0px; padding: 0px; }
body {
font-family: sans-serif, arial;
height: 100vh;
display: flex;
flex-direction: column;
}
header {
flex: 0 0 auto;
background-color: OrangeRed;
color: white;
padding: 20px;
}
nav {
flex: 0 0 auto;
}
nav ul {
margin-left: 20px;
}
nav ul li {
display: inline-block;
}
nav a:link, nav a:visited {
background-color: black;
color: white;
display: block;
padding: 5px 10px;
text-decoration: none;
transition: all 0.5s ease;
}
nav a:hover {
background-color: OrangeRed;
}
section {
flex: 1 1 auto;
padding: 20px;
}
h2 {
margin: 20px 0px;
}
p {
margin: 10px;
}
table {
border-collapse: collapse;
}
table td {
padding: 5px;
border: solid 1px OrangeRed;
}
footer {
flex: 0 0 auto;
background-color: black;
color: white;
font-size: 0.9em;
padding: 10px;
}
\ No newline at end of file
<?php
session_start();
if (!isset($_SESSION["page"])) $_SESSION["page"] = "home";
if (isset($_GET["page"])) $_SESSION["page"] = $_GET["page"];
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/animate.css" />
<link rel="stylesheet" type="text/css" href="css/auth.css" />
</head>
<body>
<header>
<h1>DIM</h1>
</header>
<nav>
<ul>
<li><a href='.?page=home'>Accueil</a></li>
<li><a href='.?page=list'>Liste</a></li>
<li><a href='intranet' class='auth'>Intranet</a></li>
</ul>
</nav>
<section>
<?php
if ($_SESSION["page"] == "home") {
?>
<h2>Accueil</h2>
<p>
JS <3
</p>
<?php
} else if ($_SESSION["page"] == "list") {
?>
<h2>Liste</h2>
<table>
<tr><td>BOULET</td> <td>Alexis</td></tr>
<tr><td>CAVASIN</td> <td>Florian</td></tr>
<tr><td>COMINOTTI</td> <td>Victor</td></tr>
<tr><td>CREPEL</td> <td>Alban</td></tr>
<tr><td>DUPRE</td> <td>Stephen</td></tr>
<tr><td>DUPUY</td> <td>Rémi</td></tr>
<tr><td>FANCONY</td> <td>Romain</td></tr>
<tr><td>FRANCONY</td> <td>Steven</td></tr>
<tr><td>FRONTIERE</td> <td> Rémi</td></tr>
<tr><td>LAMIT</td> <td>Benoit</td></tr>
<tr><td>LEDENT</td> <td>Loric</td></tr>
<tr><td>LEROY</td> <td>Emilien</td></tr>
<tr><td>MACHEDA</td> <td>Adam</td></tr>
<tr><td>MASLOVA</td> <td>Olga</td></tr>
<tr><td>RICCHI</td> <td>Evan</td></tr>
<tr><td>ROUSSEL</td> <td>Adrien</td></tr>
<tr><td>TISON</td> <td>Adrien</td></tr>
<tr><td>TOMASI</td> <td>François</td></tr>
<tr><td>VOVARD</td> <td>Roxane</td></tr>
</table>
<?php
} else {
?>
<h2>Erreur</h2>
<p>
Page inconnue...
</p>
<p>
<a href='.?page=home'>Accueil</a>
</p>
<?php
}
?>
</section>
<footer>
CC BY NC SA - Luc Damas
</footer>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/auth.js'></script>
<script type='text/javascript' src='js/main.js'></script>
</body>
</html>
<?php
session_start();
if (isset($_SESSION["auth"])) {
echo json_encode(array("connected"=>true));
} else if (isset($_GET["code"]) && $_GET["code"] == "03678") {
$_SESSION["auth"] = "hop";
echo json_encode(array("connected"=>true));
} else {
echo json_encode(array("connected"=>false));
}
<?php
session_start();
unset($_SESSION["auth"]);
header("Location: .");
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<header>
<h1>DIM Intranet</h1>
</header>
<nav>
<ul>
<li><a href='..'>Retour au site</a></li>
<li><a href='disconnect.php'>Se déconnecter</a></li>
</ul>
</nav>
<section>
<?php
if (isset($_SESSION["auth"])) {
?>
<h2>Bienvenue</h2>
<p>
:D
</p>
<?php
} else {
?>
<h2>Authentification requise</h2>
<p>
Vous ne passez pas !
</p>
<?php
}
?>
</section>
</section>
<footer>
CC BY NC SA - Luc Damas
</footer>
</body>
</html>
* { margin: 0px; padding: 0px; }
body {
font-family: sans-serif, arial;
height: 100vh;
display: flex;
flex-direction: column;
}
header {
flex: 0 0 auto;
background-color: Black;
color: white;
padding: 20px;
}
nav {
flex: 0 0 auto;
}
nav ul {
margin-left: 20px;
}
nav ul li {
display: inline-block;
}
nav a:link, nav a:visited {
background-color: black;
color: white;
display: block;
padding: 5px 10px;
text-decoration: none;
transition: all 0.5s ease;
}
nav a:hover {
background-color: OrangeRed;
}
section {
flex: 1 1 auto;
padding: 20px;
}
h2 {
margin: 20px 0px;
}
p {
margin: 10px;
}
table {
border-collapse: collapse;
}
table td {
padding: 5px;
border: solid 1px OrangeRed;
}
footer {
flex: 0 0 auto;
background-color: black;
color: white;
font-size: 0.9em;
padding: 10px;
}
\ No newline at end of file
/*
Micro-lib d'authentification côté client avec vérification côté serveur.
Utilisation :
- Inclusion CSS (auth.css);
- Inclusion JS (auth.js)
- Modif html éventuelle : class ou ID sur le lien à contrôler
- Appel fonction handleAuth(selector)
*/
var code = [];
function handleAuth(selector) {
$(selector).click(function(event) {
var link = $(this);
event.preventDefault();
$.get(
"intranet/connect.php",
{ },
function(response) {
if (response.connected) {
window.location = link.attr("href");
} else {
var bg = $("<div/>");
bg.attr("id","bg");
$("body").append(bg);
var canvas = document.createElement("canvas");
canvas.setAttribute("width","300px");
canvas.setAttribute("height","300px");
var c = canvas.getContext("2d");
c.strokeStyle = "#AAAAAA";
c.lineWidth = 3;
c.fillStyle = "#AAAAAA";
var authContainer = $("<div/>");
authContainer
.attr("id","authContainer")
.hover(
function() {
$(this)
.addClass("authContainerHover");
},
function() {
$(this)
.removeClass("authContainerHover");
$.get(
"intranet/connect.php",
{ code: code.join("") },
function(response) {
if (response.connected) {
$(".authButtonSelected").addClass("authButtonOK");
setTimeout(function() {
$(".authButton")
.removeClass("authButtonOK")
.removeClass("authButtonHover")
.removeClass("authButtonSelected");
window.location = link.attr("href");
}, 400);
} else {
$(".authButtonSelected")
.addClass("authButtonFail");
setTimeout(function() {
$(".authButton")
.removeClass("authButtonFail")
.removeClass("authButtonHover")
.removeClass("authButtonSelected");
}, 400);
}
code = [];
c.clearRect(0,0,canvas.width, canvas.height);
},
"json");
}
);
bg.append(authContainer);
for(var i=0; i<9; i++) {
var authButton = $("<div/>");
authButton
.addClass("authButton")
.hover(
function() {
$(this)
.addClass("authButtonHover")
.addClass("authButtonSelected");
code.push($(this).index());
var center = {
x: $(this).position().left+$(this).outerWidth(true)/2,
y: $(this).position().top+$(this).outerHeight(true)/2