Historisation Exemple
Exemple test historisé
This commit is contained in:
BIN
ChrisTamplate/ChrisTemplate.bmpr
Normal file
BIN
ChrisTamplate/ChrisTemplate.bmpr
Normal file
Binary file not shown.
0
ChrisTamplate/css/app.css
Normal file
0
ChrisTamplate/css/app.css
Normal file
5805
ChrisTamplate/css/foundation.css
vendored
Normal file
5805
ChrisTamplate/css/foundation.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
1
ChrisTamplate/css/foundation.min.css
vendored
Normal file
1
ChrisTamplate/css/foundation.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
351
ChrisTamplate/css/style.css
Normal file
351
ChrisTamplate/css/style.css
Normal file
@@ -0,0 +1,351 @@
|
||||
/*
|
||||
width: Largeur
|
||||
height: Taille
|
||||
|
||||
*/
|
||||
/* Lien Button Style
|
||||
|
||||
.button {
|
||||
font: bold 11px Arial;
|
||||
text-decoration: none;
|
||||
background-color: #EEEEEE;
|
||||
color: #333333;
|
||||
padding: 2px 6px 2px 6px;
|
||||
border-top: 1px solid #CCCCCC;
|
||||
border-right: 1px solid #333333;
|
||||
border-bottom: 1px solid #333333;
|
||||
border-left: 1px solid #CCCCCC;
|
||||
}
|
||||
|
||||
*/
|
||||
/***************ALL***************/
|
||||
header{
|
||||
background: url('../images/header.jpg');
|
||||
text-align: center;
|
||||
position: center;
|
||||
height: 100px;
|
||||
border-color: green;
|
||||
border-style: solid;
|
||||
border-width: 3px;
|
||||
}
|
||||
body{
|
||||
background-color: rgba(255, 174, 0, 0.07);
|
||||
text-align: center;
|
||||
border-color: blue ;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
}
|
||||
footer{
|
||||
background: url('../images/header.jpg');
|
||||
text-align: center;
|
||||
height: 150px;
|
||||
border-color: red;
|
||||
border-style: solid;
|
||||
border-width: 3px;
|
||||
width: : 100%;
|
||||
}
|
||||
|
||||
section{
|
||||
overflow: hidden;
|
||||
}
|
||||
article{
|
||||
background-color: rgba(255, 174, 0, 0.07);
|
||||
border-color: silver;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
aside{
|
||||
border-color: black;
|
||||
border-style: solid;
|
||||
border-width: 3px;
|
||||
}
|
||||
div{
|
||||
|
||||
}
|
||||
h1{
|
||||
|
||||
}
|
||||
h2{
|
||||
|
||||
}
|
||||
h3{
|
||||
|
||||
}
|
||||
h4{
|
||||
|
||||
}
|
||||
h5{
|
||||
|
||||
}
|
||||
h6{
|
||||
|
||||
}
|
||||
p{
|
||||
|
||||
}
|
||||
button {
|
||||
|
||||
}
|
||||
a{
|
||||
|
||||
}
|
||||
span{
|
||||
|
||||
}
|
||||
.grid-container{
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
.clear {
|
||||
clear: both;
|
||||
height: 0;
|
||||
line-height: 0;
|
||||
overflow: hidden; /* Précaution pour IE 7 */
|
||||
}
|
||||
/***************ALL***************/
|
||||
/***************Header***************/
|
||||
#imageHeader{
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
/***************Header***************/
|
||||
/***************Navigateur***************/
|
||||
#nav{
|
||||
margin:0;
|
||||
padding:0;
|
||||
background:#808259 url('../images/footer.jpg') 0 0 repeat-x;
|
||||
float:left;
|
||||
width:100%;
|
||||
border:1px solid #42432d;
|
||||
border-width:1px 0;
|
||||
list-style-type:none /* point de la liste à cacher */
|
||||
}
|
||||
#nav a:link, #nav a:visited{
|
||||
color:#000;
|
||||
background:#b2b580;
|
||||
padding:20px 40px 4px 10px;
|
||||
float:left;
|
||||
width:auto;
|
||||
border-right:1px solid #42432d;
|
||||
text-decoration:none;
|
||||
font:bold 1em/1em Arial, Helvetica, sans-serif;
|
||||
text-transform:uppercase;
|
||||
text-shadow: 2px 2px 2px #555;
|
||||
}
|
||||
#nav li:first-child a{
|
||||
border-left:1px solid #42432d;
|
||||
}
|
||||
#nav a:hover{
|
||||
color:#fff;
|
||||
background:#727454;
|
||||
}
|
||||
#homeNav #nav-home a, #newsNav #nav-news a, #shopNav #nav-shop a
|
||||
{
|
||||
background:#e35a00;
|
||||
color:#fff;
|
||||
text-shadow:none;
|
||||
}
|
||||
|
||||
#homeNav #nav-home a:hover, #newsNav #nav-news a:hover, #shopNav #nav-shop a:hover
|
||||
{
|
||||
background:#e35a00;
|
||||
}
|
||||
|
||||
#nav a:active
|
||||
{
|
||||
background:#e35a00;
|
||||
color:#fff;
|
||||
}
|
||||
/***************Navigateur***************/
|
||||
/***************Home Slide***************/
|
||||
@keyframes AutoSlide {
|
||||
0% {
|
||||
left: 0px; /*1ère image*/
|
||||
}
|
||||
15% {
|
||||
left: 0px; /*idem pour attente*/
|
||||
}
|
||||
35% {
|
||||
left: -720px; /*2ème image*/
|
||||
}
|
||||
50% {
|
||||
left: -720px; /*idem pour attente*/
|
||||
}
|
||||
70% {
|
||||
left: -1450px; /*3ème image*/
|
||||
}
|
||||
85% {
|
||||
left: -1450px; /*idem pour attente*/
|
||||
}
|
||||
100% {
|
||||
left: 0px; /*1ère image*/
|
||||
}
|
||||
}
|
||||
/*Taille du slide*/
|
||||
#slideshowhome {
|
||||
position: relative;
|
||||
width: 720px;
|
||||
height: 550px;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
/*Taille d'image*/
|
||||
#imageSlide{
|
||||
width: 720px;
|
||||
height: 550px;
|
||||
}
|
||||
#sContent li {
|
||||
display: inline;
|
||||
}
|
||||
/*Position du contenue dans le slide*/
|
||||
#sContent {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 2170px; /* image width X3 environ*/
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
/*CSS3 keyframes animation*/
|
||||
animation-name: AutoSlide;
|
||||
animation-duration: 15s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
/***************Home Slide***************/
|
||||
/***************News List Home***************/
|
||||
.boxNewsHome{
|
||||
border-color: silver;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
width: 50%;
|
||||
}
|
||||
#imgNewsHome{
|
||||
|
||||
}
|
||||
.titleNewsHome{
|
||||
|
||||
}
|
||||
#tdNewsHome{
|
||||
|
||||
}
|
||||
.descNewsHome{
|
||||
height: 100px;
|
||||
color: blue;
|
||||
}
|
||||
.overflow-ellipsis{
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.boxNewsHomeF{
|
||||
border-color: silver;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
#imgNewsHomeF{
|
||||
max-height:300px;
|
||||
}
|
||||
.titleNewsHomeF{
|
||||
|
||||
}
|
||||
#tdNewsHomeF{
|
||||
|
||||
}
|
||||
.descNewsHomeF{
|
||||
height: 100px;
|
||||
color: blue;
|
||||
}
|
||||
.overflow-ellipsisF{
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
/***************News List Home***************/
|
||||
/***************News List***************/
|
||||
.boxNews{
|
||||
border-color: silver;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
overflow: hidden;
|
||||
min-height: 250px;
|
||||
margin: 1em 0;
|
||||
}
|
||||
#imgNews{
|
||||
width: auto;/*300350*/
|
||||
height: auto;
|
||||
float: left;
|
||||
}
|
||||
.titleNews{
|
||||
|
||||
}
|
||||
#tdNews{
|
||||
|
||||
}
|
||||
.descNews{
|
||||
height: 70px;
|
||||
color: blue;
|
||||
}
|
||||
.overflow-ellipsis{
|
||||
height: 70px;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.buttonArt{
|
||||
display: block;
|
||||
}
|
||||
.buttonComment{
|
||||
font: bold 13px Arial;
|
||||
text-decoration: none;
|
||||
background-color: #EEEEEE;
|
||||
color: #333333;
|
||||
padding: 2px 6px 2px 6px;
|
||||
border-top: 1px solid #CCCCCC;
|
||||
border-right: 1px solid #333333;
|
||||
border-bottom: 1px solid #333333;
|
||||
border-left: 1px solid #CCCCCC;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
.buttonInfo{
|
||||
font: bold 13px Arial;
|
||||
text-decoration: none;
|
||||
background-color: #EEEEEE;
|
||||
color: #333333;
|
||||
padding: 2px 6px 2px 6px;
|
||||
border-top: 1px solid #CCCCCC;
|
||||
border-right: 1px solid #333333;
|
||||
border-bottom: 1px solid #333333;
|
||||
border-left: 1px solid #CCCCCC;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
/***************News List***************/
|
||||
/***************Footer***************/
|
||||
.footLink{
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
}
|
||||
#footic{
|
||||
padding-top: 20%;
|
||||
}
|
||||
.footListLink{
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
float: right;
|
||||
}
|
||||
#footerNavList{
|
||||
width: 150px;
|
||||
height: 100%;
|
||||
list-style-type:none;
|
||||
}
|
||||
#footNavTitle{
|
||||
size: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
#footNavLabel{
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
/***************Footer***************/
|
||||
393
ChrisTamplate/css/style2.css
Normal file
393
ChrisTamplate/css/style2.css
Normal file
@@ -0,0 +1,393 @@
|
||||
/*
|
||||
width: Largeur
|
||||
height: Taille
|
||||
|
||||
*/
|
||||
/* Lien Button Style
|
||||
|
||||
.button {
|
||||
font: bold 11px Arial;
|
||||
text-decoration: none;
|
||||
background-color: #EEEEEE;
|
||||
color: #333333;
|
||||
padding: 2px 6px 2px 6px;
|
||||
border-top: 1px solid #CCCCCC;
|
||||
border-right: 1px solid #333333;
|
||||
border-bottom: 1px solid #333333;
|
||||
border-left: 1px solid #CCCCCC;
|
||||
}
|
||||
|
||||
*/
|
||||
/***************ALL***************/
|
||||
header{
|
||||
background: url('../images/header.jpg');
|
||||
text-align: center;
|
||||
position: center;
|
||||
height: 100px;
|
||||
border-color: green;
|
||||
border-style: solid;
|
||||
border-width: 3px;
|
||||
}
|
||||
body{
|
||||
background-color: rgba(255, 174, 0, 0.07);
|
||||
border-color: blue ;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
}
|
||||
footer{
|
||||
background: url('../images/header.jpg');
|
||||
text-align: center;
|
||||
height: 150px;
|
||||
border-color: red;
|
||||
border-style: solid;
|
||||
border-width: 3px;
|
||||
width: : 100%;
|
||||
}
|
||||
|
||||
section{
|
||||
overflow: hidden;
|
||||
}
|
||||
article{
|
||||
background-color: rgba(255, 174, 0, 0.07);
|
||||
border-color: silver;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
aside{
|
||||
border-color: black;
|
||||
border-style: solid;
|
||||
border-width: 3px;
|
||||
}
|
||||
div{
|
||||
|
||||
}
|
||||
h1{
|
||||
|
||||
}
|
||||
h2{
|
||||
|
||||
}
|
||||
h3{
|
||||
|
||||
}
|
||||
h4{
|
||||
|
||||
}
|
||||
h5{
|
||||
|
||||
}
|
||||
h6{
|
||||
|
||||
}
|
||||
p{
|
||||
|
||||
}
|
||||
button {
|
||||
|
||||
}
|
||||
img{
|
||||
|
||||
}
|
||||
a{
|
||||
|
||||
}
|
||||
span{
|
||||
|
||||
}
|
||||
.grid-container{
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
.clear {
|
||||
clear: both;
|
||||
height: 0;
|
||||
line-height: 0;
|
||||
overflow: hidden; /* Précaution pour IE 7 */
|
||||
}
|
||||
/***************ALL***************/
|
||||
/***************Header***************/
|
||||
#imageHeader{
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
/***************Header***************/
|
||||
/***************Navigateur***************/
|
||||
#nav{
|
||||
margin:0;
|
||||
padding:0;
|
||||
background:#808259 url('../images/footer.jpg') 0 0 repeat-x;
|
||||
float:left;
|
||||
width:100%;
|
||||
border:1px solid #42432d;
|
||||
border-width:1px 0;
|
||||
list-style-type:none /* point de la liste à cacher */
|
||||
}
|
||||
#nav a:link, #nav a:visited{
|
||||
color:#000;
|
||||
background:#b2b580;
|
||||
padding:20px 40px 4px 10px;
|
||||
float:left;
|
||||
width:auto;
|
||||
border-right:1px solid #42432d;
|
||||
text-decoration:none;
|
||||
font:bold 1em/1em Arial, Helvetica, sans-serif;
|
||||
text-transform:uppercase;
|
||||
text-shadow: 2px 2px 2px #555;
|
||||
}
|
||||
#nav li:first-child a{
|
||||
border-left:1px solid #42432d;
|
||||
}
|
||||
#nav a:hover{
|
||||
color:#fff;
|
||||
background:#727454;
|
||||
}
|
||||
#homeNav #nav-home a, #newsNav #nav-news a, #shopNav #nav-shop a
|
||||
{
|
||||
background:#e35a00;
|
||||
color:#fff;
|
||||
text-shadow:none;
|
||||
}
|
||||
|
||||
#homeNav #nav-home a:hover, #newsNav #nav-news a:hover, #shopNav #nav-shop a:hover
|
||||
{
|
||||
background:#e35a00;
|
||||
}
|
||||
|
||||
#nav a:active
|
||||
{
|
||||
background:#e35a00;
|
||||
color:#fff;
|
||||
}
|
||||
/***************Navigateur***************/
|
||||
/***************Home Slide***************/
|
||||
@keyframes AutoSlide {
|
||||
0% {
|
||||
left: 0px; /*1ère image*/
|
||||
}
|
||||
15% {
|
||||
left: 0px; /*idem pour attente*/
|
||||
}
|
||||
35% {
|
||||
left: -720px; /*2ème image*/
|
||||
}
|
||||
50% {
|
||||
left: -720px; /*idem pour attente*/
|
||||
}
|
||||
70% {
|
||||
left: -1450px; /*3ème image*/
|
||||
}
|
||||
85% {
|
||||
left: -1450px; /*idem pour attente*/
|
||||
}
|
||||
100% {
|
||||
left: 0px; /*1ère image*/
|
||||
}
|
||||
}
|
||||
/*Taille du slide*/
|
||||
#slideshowhome {
|
||||
position: relative;
|
||||
width: 720px;
|
||||
height: 550px;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
/*Taille d'image*/
|
||||
#imageSlide{
|
||||
width: 720px;
|
||||
height: 550px;
|
||||
}
|
||||
#sContent li {
|
||||
display: inline;
|
||||
}
|
||||
/*Position du contenue dans le slide*/
|
||||
#sContent {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 2170px; /* image width X3 environ*/
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
/*CSS3 keyframes animation*/
|
||||
animation-name: AutoSlide;
|
||||
animation-duration: 15s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
/***************Home Slide***************/
|
||||
/***************News List Home***************/
|
||||
.boxNewsHome{
|
||||
border-color: silver;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
width: 50%;
|
||||
}
|
||||
#imgNewsHome{
|
||||
|
||||
}
|
||||
.titleNewsHome{
|
||||
|
||||
}
|
||||
#tdNewsHome{
|
||||
|
||||
}
|
||||
.descNewsHome{
|
||||
height: 100px;
|
||||
color: blue;
|
||||
}
|
||||
.overflow-ellipsis{
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.boxNewsHomeF{
|
||||
border-color: silver;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
#imgNewsHomeF{
|
||||
max-height:300px;
|
||||
}
|
||||
.titleNewsHomeF{
|
||||
|
||||
}
|
||||
#tdNewsHomeF{
|
||||
|
||||
}
|
||||
.descNewsHomeF{
|
||||
height: 100px;
|
||||
color: blue;
|
||||
}
|
||||
.overflow-ellipsisF{
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
/***************News List Home***************/
|
||||
/***************News List***************/
|
||||
.boxNews{
|
||||
border-color: silver;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
overflow: hidden;
|
||||
min-height: 250px;
|
||||
margin: 1em 0;
|
||||
}
|
||||
#imgNews{
|
||||
width: auto;/*300350*/
|
||||
height: auto;
|
||||
float: left;
|
||||
}
|
||||
.titleNews{
|
||||
|
||||
}
|
||||
#tdNews{
|
||||
|
||||
}
|
||||
.descNews{
|
||||
height: 70px;
|
||||
color: blue;
|
||||
}
|
||||
.overflow-ellipsis{
|
||||
height: 70px;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.buttonArt{
|
||||
display: block;
|
||||
}
|
||||
.buttonComment{
|
||||
font: bold 13px Arial;
|
||||
text-decoration: none;
|
||||
background-color: #EEEEEE;
|
||||
color: #333333;
|
||||
padding: 2px 6px 2px 6px;
|
||||
border-top: 1px solid #CCCCCC;
|
||||
border-right: 1px solid #333333;
|
||||
border-bottom: 1px solid #333333;
|
||||
border-left: 1px solid #CCCCCC;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
.buttonInfo{
|
||||
font: bold 13px Arial;
|
||||
text-decoration: none;
|
||||
background-color: #EEEEEE;
|
||||
color: #333333;
|
||||
padding: 2px 6px 2px 6px;
|
||||
border-top: 1px solid #CCCCCC;
|
||||
border-right: 1px solid #333333;
|
||||
border-bottom: 1px solid #333333;
|
||||
border-left: 1px solid #CCCCCC;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
/***************News List***************/
|
||||
/***************Shop List***************/
|
||||
.artShop{
|
||||
border-color: silver;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
height: 150px;
|
||||
margin: 2px;
|
||||
}
|
||||
#imgShop{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.imgShop{
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
float: left;
|
||||
}
|
||||
#imgPanier{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.titleNews{
|
||||
|
||||
}
|
||||
#vendShop{
|
||||
color: blue
|
||||
}
|
||||
#priceShop{
|
||||
color: green;
|
||||
}
|
||||
.descNews{
|
||||
height: 70px;
|
||||
color: blue;
|
||||
}
|
||||
.overflow-ellipsis{
|
||||
height: 70px;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
/***************Shop List***************/
|
||||
/***************Footer***************/
|
||||
.footLink{
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
}
|
||||
#footic{
|
||||
padding-top: 20%;
|
||||
}
|
||||
.footListLink{
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
float: right;
|
||||
}
|
||||
#footerNavList{
|
||||
width: 150px;
|
||||
height: 100%;
|
||||
list-style-type:none;
|
||||
}
|
||||
#footNavTitle{
|
||||
size: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
#footNavLabel{
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
/***************Footer***************/
|
||||
118
ChrisTamplate/home.php
Normal file
118
ChrisTamplate/home.php
Normal file
@@ -0,0 +1,118 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="css/foundation.css">
|
||||
<link rel="stylesheet" href="css/app.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||||
<link rel="shortcut icon" href="images/favicon.png" />
|
||||
<title>Home</title>
|
||||
</head>
|
||||
<div class="grid-container">
|
||||
<header>
|
||||
<img src="images/favicon.png" alt="HeaderImage" id="imageHeader"/>
|
||||
</header>
|
||||
<nav class="menu">
|
||||
<ul id="nav">
|
||||
<li id="nav-home"><a href="home.php">Accueil</a></li>
|
||||
<li id="nav-news"><a href="news.php">Nouvelle</a></li>
|
||||
<li id="nav-shop"><a href="shop.php">Boutique</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<body id="homeNav">
|
||||
<div id="slideshowhome">
|
||||
<ul id="sContent">
|
||||
<li><img src="images/g4.jpg" alt="Image1" id="imageSlide"/></li>
|
||||
<li><img src="images/g4.jpg" alt="Image2" id="imageSlide"/></li>
|
||||
<li><img src="images/g4.jpg" alt="Image3" id="imageSlide"/></li>
|
||||
</ul>
|
||||
</div>
|
||||
<h1>Bonjour<br><br><br><br></h1>
|
||||
<section>
|
||||
<article>
|
||||
<span>Toute l'actualité</span>
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="boxNewsHome">
|
||||
<img src="images/rasp_appareil.jpeg" alt="Image3" id="imgNewsHome"/>
|
||||
<div class="titleNewsHome">
|
||||
<p>Title <br> <span id="tdNewsHome"> Type - Date </span></p>
|
||||
</div>
|
||||
<div class="descNewsHome">
|
||||
<p class="overflow-ellipsis">Description</p>
|
||||
</div>
|
||||
<a href="#" class="button">Commentaire</a><a href="#" class="button">En savoir +</a>
|
||||
</div>
|
||||
<div class="boxNewsHome">
|
||||
<img src="images/rasp_appareil.jpeg" alt="Image3" id="imgNewsHome"/>
|
||||
<div class="titleNewsHome">
|
||||
<p>Title <br> <span id="tdNewsHome"> Type - Date </span></p>
|
||||
</div>
|
||||
<div class="descNewsHome">
|
||||
<p class="overflow-ellipsis">Description</p>
|
||||
</div>
|
||||
<a href="#" class="button">Commentaire</a><a href="#" class="button">En savoir +</a>
|
||||
</div>
|
||||
<div class="boxNewsHome">
|
||||
<img src="images/rasp_appareil.jpeg" alt="Image3" id="imgNewsHome"/>
|
||||
<div class="titleNewsHome">
|
||||
<p>Title <br> <span id="tdNewsHome"> Type - Date </span></p>
|
||||
</div>
|
||||
<div class="descNewsHome">
|
||||
<p class="overflow-ellipsis">Description</p>
|
||||
</div>
|
||||
<a href="#" class="button">Commentaire</a><a href="#" class="button">En savoir +</a>
|
||||
</div>
|
||||
<div class="boxNewsHome">
|
||||
<img src="images/rasp_appareil.jpeg" alt="Image3" id="imgNewsHome"/>
|
||||
<div class="titleNewsHome">
|
||||
<p>Title <br> <span id="tdNewsHome"> Type - Date </span></p>
|
||||
</div>
|
||||
<div class="descNewsHome">
|
||||
<p class="overflow-ellipsis">Description</p>
|
||||
</div>
|
||||
<a href="#" class="button">Commentaire</a><a href="#" class="button">En savoir +</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxNewsHomeF">
|
||||
<img src="images/rasp_appareil.jpeg" alt="Image3" id="imgNewsHomeF"/>
|
||||
<div class="titleNewsHomeF">
|
||||
<p>Title <br> <span id="tdNewsHomeF"> Type - Date </span></p>
|
||||
</div>
|
||||
<div class="descNewsHomeF">
|
||||
<p class="overflow-ellipsisF">Description</p>
|
||||
</div>
|
||||
<a href="#" class="button">Commentaire</a><a href="#" class="button">En savoir +</a>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
<footer>
|
||||
<div class="footLink">
|
||||
<a href="http://localhost:82/christamplate/home.php" target="_blank">
|
||||
<img src="images/footer_icon_01.png" alt="IconFooter" id="footic" />
|
||||
</a>
|
||||
<a href="http://localhost:82/christamplate/home.php" target="_blank">
|
||||
<img src="images/footer_icon_02.png" alt="IconFooter" id="footic" />
|
||||
</a>
|
||||
<a href="http://localhost:82/christamplate/home.php" target="_blank">
|
||||
<img src="images/footer_icon_03.png" alt="IconFooter" id="footic" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="footListLink">
|
||||
<ul id="footerNavList">
|
||||
<span id="footNavTitle">COMPTE</span>
|
||||
<li id="footNavLabel"><a href="#Accueil">Option1</a></li>
|
||||
<li id="footNavLabel"><a href="#News">Option2</a></li>
|
||||
<li id="footNavLabel"><a href="#Boutique">Option3</a></li>
|
||||
<li id="footNavLabel"><a href="#Accueil">Option1</a></li>
|
||||
<li id="footNavLabel"><a href="#News">Option2</a></li>
|
||||
<li id="footNavLabel"><a href="#Boutique">Option3</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
</div>
|
||||
</html>
|
||||
BIN
ChrisTamplate/images/CHRISTIAN CUNAT-BRULE.jpg
Normal file
BIN
ChrisTamplate/images/CHRISTIAN CUNAT-BRULE.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 222 KiB |
BIN
ChrisTamplate/images/Raspberry_logo.png
Normal file
BIN
ChrisTamplate/images/Raspberry_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
BIN
ChrisTamplate/images/com.png
Normal file
BIN
ChrisTamplate/images/com.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
ChrisTamplate/images/competences.jpg
Normal file
BIN
ChrisTamplate/images/competences.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
ChrisTamplate/images/display.png
Normal file
BIN
ChrisTamplate/images/display.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
ChrisTamplate/images/ecurie.jpg
Normal file
BIN
ChrisTamplate/images/ecurie.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
BIN
ChrisTamplate/images/favicon.png
Normal file
BIN
ChrisTamplate/images/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
BIN
ChrisTamplate/images/footer.jpg
Normal file
BIN
ChrisTamplate/images/footer.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
BIN
ChrisTamplate/images/footer_icon_01.png
Normal file
BIN
ChrisTamplate/images/footer_icon_01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 649 B |
BIN
ChrisTamplate/images/footer_icon_02.png
Normal file
BIN
ChrisTamplate/images/footer_icon_02.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 612 B |
BIN
ChrisTamplate/images/footer_icon_03.png
Normal file
BIN
ChrisTamplate/images/footer_icon_03.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 491 B |
BIN
ChrisTamplate/images/footer_icon_04.png
Normal file
BIN
ChrisTamplate/images/footer_icon_04.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 554 B |
BIN
ChrisTamplate/images/g4.jpg
Normal file
BIN
ChrisTamplate/images/g4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
ChrisTamplate/images/g4_chiffres.jpg
Normal file
BIN
ChrisTamplate/images/g4_chiffres.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
BIN
ChrisTamplate/images/g4_partenaires.PNG
Normal file
BIN
ChrisTamplate/images/g4_partenaires.PNG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
ChrisTamplate/images/gallery_loading.gif
Normal file
BIN
ChrisTamplate/images/gallery_loading.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
ChrisTamplate/images/grille.jpg
Normal file
BIN
ChrisTamplate/images/grille.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
ChrisTamplate/images/header.jpg
Normal file
BIN
ChrisTamplate/images/header.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 163 KiB |
BIN
ChrisTamplate/images/img_CV.PNG
Normal file
BIN
ChrisTamplate/images/img_CV.PNG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 312 KiB |
BIN
ChrisTamplate/images/info.png
Normal file
BIN
ChrisTamplate/images/info.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
ChrisTamplate/images/logo.png
Normal file
BIN
ChrisTamplate/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
ChrisTamplate/images/ocs_glpi.png
Normal file
BIN
ChrisTamplate/images/ocs_glpi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 246 KiB |
BIN
ChrisTamplate/images/panier.png
Normal file
BIN
ChrisTamplate/images/panier.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
ChrisTamplate/images/rasp_appareil.jpeg
Normal file
BIN
ChrisTamplate/images/rasp_appareil.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
BIN
ChrisTamplate/images/signature.png
Normal file
BIN
ChrisTamplate/images/signature.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
ChrisTamplate/images/site.jpg
Normal file
BIN
ChrisTamplate/images/site.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 183 KiB |
171
ChrisTamplate/index.html
Normal file
171
ChrisTamplate/index.html
Normal file
@@ -0,0 +1,171 @@
|
||||
<!doctype html>
|
||||
<html class="no-js" lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Foundation for Sites</title>
|
||||
<link rel="stylesheet" href="css/foundation.css">
|
||||
<link rel="stylesheet" href="css/app.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="grid-container">
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-12 cell">
|
||||
<h1>Welcome to Foundation</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-12 cell">
|
||||
<div class="callout">
|
||||
<h3>We’re stoked you want to try Foundation! </h3>
|
||||
<p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
|
||||
<p>Once you've exhausted the fun in this document, you should check out:</p>
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-4 medium-4 cell">
|
||||
<p><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</p>
|
||||
</div>
|
||||
<div class="large-4 medium-4 cell">
|
||||
<p><a href="http://zurb.com/university/code-skills">Foundation Code Skills</a><br />These online courses offer you a chance to better understand how Foundation works and how you can master it to create awesome projects.</p>
|
||||
</div>
|
||||
<div class="large-4 medium-4 cell">
|
||||
<p><a href="http://foundation.zurb.com/forum">Foundation Forum</a><br />Join the Foundation community to ask a question or show off your knowlege.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-4 medium-4 medium-push-2 cell">
|
||||
<p><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p>
|
||||
</div>
|
||||
<div class="large-4 medium-4 medium-pull-2 cell">
|
||||
<p><a href="https://twitter.com/ZURBfoundation">@zurbfoundation</a><br />Ping us on Twitter if you have questions. When you build something with this we'd love to see it (and send you a totally boss sticker).</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-8 medium-8 cell">
|
||||
<h5>Here’s your basic grid:</h5>
|
||||
<!-- Grid Example -->
|
||||
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-12 cell">
|
||||
<div class="primary callout">
|
||||
<p><strong>This is a twelve cell section in a grid-x.</strong> Each of these includes a div.callout element so you can see where the cell are - it's not required at all for the grid.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-6 medium-6 cell">
|
||||
<div class="primary callout">
|
||||
<p>Six cell</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="large-6 medium-6 cell">
|
||||
<div class="primary callout">
|
||||
<p>Six cell</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-4 medium-4 small-4 cell">
|
||||
<div class="primary callout">
|
||||
<p>Four cell</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="large-4 medium-4 small-4 cell">
|
||||
<div class="primary callout">
|
||||
<p>Four cell</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="large-4 medium-4 small-4 cell">
|
||||
<div class="primary callout">
|
||||
<p>Four cell</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<h5>We bet you’ll need a form somewhere:</h5>
|
||||
<form>
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-12 cell">
|
||||
<label>Input Label</label>
|
||||
<input type="text" placeholder="large-12.cell" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-4 medium-4 cell">
|
||||
<label>Input Label</label>
|
||||
<input type="text" placeholder="large-4.cell" />
|
||||
</div>
|
||||
<div class="large-4 medium-4 cell">
|
||||
<label>Input Label</label>
|
||||
<input type="text" placeholder="large-4.cell" />
|
||||
</div>
|
||||
<div class="large-4 medium-4 cell">
|
||||
<div class="grid-x">
|
||||
<label>Input Label</label>
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="small-9.cell" class="input-group-field" />
|
||||
<span class="input-group-label">.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-12 cell">
|
||||
<label>Select Box</label>
|
||||
<select>
|
||||
<option value="husker">Husker</option>
|
||||
<option value="starbuck">Starbuck</option>
|
||||
<option value="hotdog">Hot Dog</option>
|
||||
<option value="apollo">Apollo</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-6 medium-6 cell">
|
||||
<label>Choose Your Favorite</label>
|
||||
<input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Radio 1</label>
|
||||
<input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Radio 2</label>
|
||||
</div>
|
||||
<div class="large-6 medium-6 cell">
|
||||
<label>Check these out</label>
|
||||
<input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
|
||||
<input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-12 cell">
|
||||
<label>Textarea Label</label>
|
||||
<textarea placeholder="small-12.cell"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="large-4 medium-4 cell">
|
||||
<h5>Try one of these buttons:</h5>
|
||||
<p><a href="#" class="button">Simple Button</a><br/>
|
||||
<a href="#" class="success button">Success Btn</a><br/>
|
||||
<a href="#" class="alert button">Alert Btn</a><br/>
|
||||
<a href="#" class="secondary button">Secondary Btn</a></p>
|
||||
<div class="callout">
|
||||
<h5>So many components, girl!</h5>
|
||||
<p>A whole kitchen sink of goodies comes with Foundation. Check out the docs to see them all, along with details on making them your own.</p>
|
||||
<a href="http://foundation.zurb.com/sites/docs/" class="small button">Go to Foundation Docs</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/vendor/jquery.js"></script>
|
||||
<script src="js/vendor/what-input.js"></script>
|
||||
<script src="js/vendor/foundation.js"></script>
|
||||
<script src="js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
0
ChrisTamplate/index.php
Normal file
0
ChrisTamplate/index.php
Normal file
1
ChrisTamplate/js/app.js
Normal file
1
ChrisTamplate/js/app.js
Normal file
@@ -0,0 +1 @@
|
||||
$(document).foundation()
|
||||
10
ChrisTamplate/js/functionNews.js
Normal file
10
ChrisTamplate/js/functionNews.js
Normal file
@@ -0,0 +1,10 @@
|
||||
window.onload = function(){
|
||||
document.getElementsByTagName('button')[0].onclick = function () {
|
||||
var _wrapper = document.getElementById('wrapper');
|
||||
if(_wrapper.classList.contains( 'display_cell')) {
|
||||
_wrapper.classList.remove('display_cell');
|
||||
} else {
|
||||
_wrapper.classList.add('display_cell');
|
||||
}
|
||||
}
|
||||
};
|
||||
11726
ChrisTamplate/js/vendor/foundation.js
vendored
Normal file
11726
ChrisTamplate/js/vendor/foundation.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
5
ChrisTamplate/js/vendor/foundation.min.js
vendored
Normal file
5
ChrisTamplate/js/vendor/foundation.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
10253
ChrisTamplate/js/vendor/jquery.js
vendored
Normal file
10253
ChrisTamplate/js/vendor/jquery.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
361
ChrisTamplate/js/vendor/what-input.js
vendored
Normal file
361
ChrisTamplate/js/vendor/what-input.js
vendored
Normal file
@@ -0,0 +1,361 @@
|
||||
/**
|
||||
* what-input - A global utility for tracking the current input method (mouse, keyboard or touch).
|
||||
* @version v4.2.0
|
||||
* @link https://github.com/ten1seven/what-input
|
||||
* @license MIT
|
||||
*/
|
||||
(function webpackUniversalModuleDefinition(root, factory) {
|
||||
if(typeof exports === 'object' && typeof module === 'object')
|
||||
module.exports = factory();
|
||||
else if(typeof define === 'function' && define.amd)
|
||||
define("whatInput", [], factory);
|
||||
else if(typeof exports === 'object')
|
||||
exports["whatInput"] = factory();
|
||||
else
|
||||
root["whatInput"] = factory();
|
||||
})(this, function() {
|
||||
return /******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
|
||||
/******/ // Check if module is in cache
|
||||
/******/ if(installedModules[moduleId])
|
||||
/******/ return installedModules[moduleId].exports;
|
||||
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = installedModules[moduleId] = {
|
||||
/******/ exports: {},
|
||||
/******/ id: moduleId,
|
||||
/******/ loaded: false
|
||||
/******/ };
|
||||
|
||||
/******/ // Execute the module function
|
||||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||||
|
||||
/******/ // Flag the module as loaded
|
||||
/******/ module.loaded = true;
|
||||
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/ }
|
||||
|
||||
|
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = modules;
|
||||
|
||||
/******/ // expose the module cache
|
||||
/******/ __webpack_require__.c = installedModules;
|
||||
|
||||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "";
|
||||
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(0);
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
/******/ ([
|
||||
/* 0 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
'use strict';
|
||||
|
||||
module.exports = function () {
|
||||
/*
|
||||
* variables
|
||||
*/
|
||||
|
||||
// last used input type
|
||||
var currentInput = 'initial';
|
||||
|
||||
// last used input intent
|
||||
var currentIntent = null;
|
||||
|
||||
// cache document.documentElement
|
||||
var doc = document.documentElement;
|
||||
|
||||
// form input types
|
||||
var formInputs = ['input', 'select', 'textarea'];
|
||||
|
||||
var functionList = [];
|
||||
|
||||
// list of modifier keys commonly used with the mouse and
|
||||
// can be safely ignored to prevent false keyboard detection
|
||||
var ignoreMap = [16, // shift
|
||||
17, // control
|
||||
18, // alt
|
||||
91, // Windows key / left Apple cmd
|
||||
93 // Windows menu / right Apple cmd
|
||||
];
|
||||
|
||||
// list of keys for which we change intent even for form inputs
|
||||
var changeIntentMap = [9 // tab
|
||||
];
|
||||
|
||||
// mapping of events to input types
|
||||
var inputMap = {
|
||||
keydown: 'keyboard',
|
||||
mousedown: 'mouse',
|
||||
mousemove: 'mouse',
|
||||
MSPointerDown: 'pointer',
|
||||
MSPointerMove: 'pointer',
|
||||
pointerdown: 'pointer',
|
||||
pointermove: 'pointer',
|
||||
touchstart: 'touch'
|
||||
};
|
||||
|
||||
// array of all used input types
|
||||
var inputTypes = [];
|
||||
|
||||
// boolean: true if touch buffer is active
|
||||
var isBuffering = false;
|
||||
|
||||
// boolean: true if the page is being scrolled
|
||||
var isScrolling = false;
|
||||
|
||||
// store current mouse position
|
||||
var mousePos = {
|
||||
x: null,
|
||||
y: null
|
||||
};
|
||||
|
||||
// map of IE 10 pointer events
|
||||
var pointerMap = {
|
||||
2: 'touch',
|
||||
3: 'touch', // treat pen like touch
|
||||
4: 'mouse'
|
||||
};
|
||||
|
||||
var supportsPassive = false;
|
||||
|
||||
try {
|
||||
var opts = Object.defineProperty({}, 'passive', {
|
||||
get: function get() {
|
||||
supportsPassive = true;
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('test', null, opts);
|
||||
} catch (e) {}
|
||||
|
||||
/*
|
||||
* set up
|
||||
*/
|
||||
|
||||
var setUp = function setUp() {
|
||||
// add correct mouse wheel event mapping to `inputMap`
|
||||
inputMap[detectWheel()] = 'mouse';
|
||||
|
||||
addListeners();
|
||||
setInput();
|
||||
};
|
||||
|
||||
/*
|
||||
* events
|
||||
*/
|
||||
|
||||
var addListeners = function addListeners() {
|
||||
// `pointermove`, `MSPointerMove`, `mousemove` and mouse wheel event binding
|
||||
// can only demonstrate potential, but not actual, interaction
|
||||
// and are treated separately
|
||||
|
||||
// pointer events (mouse, pen, touch)
|
||||
if (window.PointerEvent) {
|
||||
doc.addEventListener('pointerdown', updateInput);
|
||||
doc.addEventListener('pointermove', setIntent);
|
||||
} else if (window.MSPointerEvent) {
|
||||
doc.addEventListener('MSPointerDown', updateInput);
|
||||
doc.addEventListener('MSPointerMove', setIntent);
|
||||
} else {
|
||||
// mouse events
|
||||
doc.addEventListener('mousedown', updateInput);
|
||||
doc.addEventListener('mousemove', setIntent);
|
||||
|
||||
// touch events
|
||||
if ('ontouchstart' in window) {
|
||||
doc.addEventListener('touchstart', touchBuffer);
|
||||
doc.addEventListener('touchend', touchBuffer);
|
||||
}
|
||||
}
|
||||
|
||||
// mouse wheel
|
||||
doc.addEventListener(detectWheel(), setIntent, supportsPassive ? { passive: true } : false);
|
||||
|
||||
// keyboard events
|
||||
doc.addEventListener('keydown', updateInput);
|
||||
};
|
||||
|
||||
// checks conditions before updating new input
|
||||
var updateInput = function updateInput(event) {
|
||||
// only execute if the touch buffer timer isn't running
|
||||
if (!isBuffering) {
|
||||
var eventKey = event.which;
|
||||
var value = inputMap[event.type];
|
||||
if (value === 'pointer') value = pointerType(event);
|
||||
|
||||
if (currentInput !== value || currentIntent !== value) {
|
||||
var activeElem = document.activeElement;
|
||||
var activeInput = false;
|
||||
var notFormInput = activeElem && activeElem.nodeName && formInputs.indexOf(activeElem.nodeName.toLowerCase()) === -1;
|
||||
|
||||
if (notFormInput || changeIntentMap.indexOf(eventKey) !== -1) {
|
||||
activeInput = true;
|
||||
}
|
||||
|
||||
if (value === 'touch' ||
|
||||
// ignore mouse modifier keys
|
||||
value === 'mouse' ||
|
||||
// don't switch if the current element is a form input
|
||||
value === 'keyboard' && eventKey && activeInput && ignoreMap.indexOf(eventKey) === -1) {
|
||||
// set the current and catch-all variable
|
||||
currentInput = currentIntent = value;
|
||||
|
||||
setInput();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// updates the doc and `inputTypes` array with new input
|
||||
var setInput = function setInput() {
|
||||
doc.setAttribute('data-whatinput', currentInput);
|
||||
doc.setAttribute('data-whatintent', currentInput);
|
||||
|
||||
if (inputTypes.indexOf(currentInput) === -1) {
|
||||
inputTypes.push(currentInput);
|
||||
doc.className += ' whatinput-types-' + currentInput;
|
||||
}
|
||||
|
||||
fireFunctions('input');
|
||||
};
|
||||
|
||||
// updates input intent for `mousemove` and `pointermove`
|
||||
var setIntent = function setIntent(event) {
|
||||
// test to see if `mousemove` happened relative to the screen
|
||||
// to detect scrolling versus mousemove
|
||||
if (mousePos['x'] !== event.screenX || mousePos['y'] !== event.screenY) {
|
||||
isScrolling = false;
|
||||
|
||||
mousePos['x'] = event.screenX;
|
||||
mousePos['y'] = event.screenY;
|
||||
} else {
|
||||
isScrolling = true;
|
||||
}
|
||||
|
||||
// only execute if the touch buffer timer isn't running
|
||||
// or scrolling isn't happening
|
||||
if (!isBuffering && !isScrolling) {
|
||||
var value = inputMap[event.type];
|
||||
if (value === 'pointer') value = pointerType(event);
|
||||
|
||||
if (currentIntent !== value) {
|
||||
currentIntent = value;
|
||||
|
||||
doc.setAttribute('data-whatintent', currentIntent);
|
||||
|
||||
fireFunctions('intent');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// buffers touch events because they frequently also fire mouse events
|
||||
var touchBuffer = function touchBuffer(event) {
|
||||
if (event.type === 'touchstart') {
|
||||
isBuffering = false;
|
||||
|
||||
// set the current input
|
||||
updateInput(event);
|
||||
} else {
|
||||
isBuffering = true;
|
||||
}
|
||||
};
|
||||
|
||||
var fireFunctions = function fireFunctions(type) {
|
||||
for (var i = 0, len = functionList.length; i < len; i++) {
|
||||
if (functionList[i].type === type) {
|
||||
functionList[i].function.call(undefined, currentIntent);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
* utilities
|
||||
*/
|
||||
|
||||
var pointerType = function pointerType(event) {
|
||||
if (typeof event.pointerType === 'number') {
|
||||
return pointerMap[event.pointerType];
|
||||
} else {
|
||||
// treat pen like touch
|
||||
return event.pointerType === 'pen' ? 'touch' : event.pointerType;
|
||||
}
|
||||
};
|
||||
|
||||
// detect version of mouse wheel event to use
|
||||
// via https://developer.mozilla.org/en-US/docs/Web/Events/wheel
|
||||
var detectWheel = function detectWheel() {
|
||||
var wheelType = void 0;
|
||||
|
||||
// Modern browsers support "wheel"
|
||||
if ('onwheel' in document.createElement('div')) {
|
||||
wheelType = 'wheel';
|
||||
} else {
|
||||
// Webkit and IE support at least "mousewheel"
|
||||
// or assume that remaining browsers are older Firefox
|
||||
wheelType = document.onmousewheel !== undefined ? 'mousewheel' : 'DOMMouseScroll';
|
||||
}
|
||||
|
||||
return wheelType;
|
||||
};
|
||||
|
||||
/*
|
||||
* init
|
||||
*/
|
||||
|
||||
// don't start script unless browser cuts the mustard
|
||||
// (also passes if polyfills are used)
|
||||
if ('addEventListener' in window && Array.prototype.indexOf) {
|
||||
setUp();
|
||||
}
|
||||
|
||||
/*
|
||||
* api
|
||||
*/
|
||||
|
||||
return {
|
||||
// returns string: the current input type
|
||||
// opt: 'loose'|'strict'
|
||||
// 'strict' (default): returns the same value as the `data-whatinput` attribute
|
||||
// 'loose': includes `data-whatintent` value if it's more current than `data-whatinput`
|
||||
ask: function ask(opt) {
|
||||
return opt === 'loose' ? currentIntent : currentInput;
|
||||
},
|
||||
|
||||
// returns array: all the detected input types
|
||||
types: function types() {
|
||||
return inputTypes;
|
||||
},
|
||||
|
||||
// overwrites ignored keys with provided array
|
||||
ignoreKeys: function ignoreKeys(arr) {
|
||||
ignoreMap = arr;
|
||||
},
|
||||
|
||||
// attach functions to input and intent "events"
|
||||
// funct: function to fire on change
|
||||
// eventType: 'input'|'intent'
|
||||
onChange: function onChange(funct, eventType) {
|
||||
functionList.push({
|
||||
function: funct,
|
||||
type: eventType
|
||||
});
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
/***/ })
|
||||
/******/ ])
|
||||
});
|
||||
;
|
||||
150
ChrisTamplate/news.php
Normal file
150
ChrisTamplate/news.php
Normal file
@@ -0,0 +1,150 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="css/foundation.css">
|
||||
<link rel="stylesheet" href="css/app.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||||
<link rel="shortcut icon" href="images/favicon.png" />
|
||||
<script src="js/functionNews.js"></script>
|
||||
<title>Home</title>
|
||||
</head>
|
||||
<div class="grid-container">
|
||||
<header>
|
||||
<img src="images/favicon.png" alt="HeaderImage" id="imageHeader"/>
|
||||
</header>
|
||||
<nav class="menu">
|
||||
<ul id="nav">
|
||||
<li id="nav-home"><a href="home.php">Accueil</a></li>
|
||||
<li id="nav-news"><a href="news.php">Nouvelle</a></li>
|
||||
<li id="nav-shop"><a href="shop.php">Boutique</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<body id="newsNav">
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-12 cell">
|
||||
<h1>Actualité</h1>
|
||||
</div>
|
||||
</div>
|
||||
<section class="grid-x grid-padding-x">
|
||||
<article class="large-8 medium-8 cell">
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-12 cell">
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-4 medium-4 cell">
|
||||
<div class="boxNews">
|
||||
<img src="images/rasp_appareil.jpeg" alt="Image3" id="imgNews"/>
|
||||
<div class="titleNews">
|
||||
<p>Title <br> <span id="tdNews"> Type - Date </span></p>
|
||||
</div>
|
||||
<div class="descNews">
|
||||
<p class="overflow-ellipsisNews">Description</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" class="buttonComment">Commentaire</a><a href="#" class="buttonInfo">En savoir +</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="large-4 medium-4 cell">
|
||||
<div class="boxNews">
|
||||
<img src="images/rasp_appareil.jpeg" alt="Image3" id="imgNews"/>
|
||||
<div class="titleNews">
|
||||
<p>Title <br> <span id="tdNews"> Type - Date </span></p>
|
||||
</div>
|
||||
<div class="descNews">
|
||||
<p class="overflow-ellipsisNews">Description</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" class="buttonComment">Commentaire</a><a href="#" class="buttonInfo">En savoir +</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="large-4 medium-4 cell">
|
||||
<div class="boxNews">
|
||||
<img src="images/rasp_appareil.jpeg" alt="Image3" id="imgNews"/>
|
||||
<div class="titleNews">
|
||||
<p>Title <br> <span id="tdNews"> Type - Date </span></p>
|
||||
</div>
|
||||
<div class="descNews">
|
||||
<p class="overflow-ellipsisNews">Description</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" class="buttonComment">Commentaire</a><a href="#" class="buttonInfo">En savoir +</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-4 medium-4 cell">
|
||||
<div class="boxNews">
|
||||
<img src="images/rasp_appareil.jpeg" alt="Image3" id="imgNews"/>
|
||||
<div class="titleNews">
|
||||
<p>Title <br> <span id="tdNews"> Type - Date </span></p>
|
||||
</div>
|
||||
<div class="descNews">
|
||||
<p class="overflow-ellipsisNews">Description</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" class="buttonComment">Commentaire</a><a href="#" class="buttonInfo">En savoir +</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="large-4 medium-4 cell">
|
||||
<div class="boxNews">
|
||||
<img src="images/rasp_appareil.jpeg" alt="Image3" id="imgNews"/>
|
||||
<div class="titleNews">
|
||||
<p>Title <br> <span id="tdNews"> Type - Date </span></p>
|
||||
</div>
|
||||
<div class="descNews">
|
||||
<p class="overflow-ellipsisNews">Description</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" class="buttonComment">Commentaire</a><a href="#" class="buttonInfo">En savoir +</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<aside class="large-4 medium-4 cell"><br>
|
||||
<div class="callout">Filtre
|
||||
<p>
|
||||
<a href="#" class="button">Type 1</a><br>
|
||||
<a href="#" class="button">Type 2</a><br>
|
||||
<a href="#" class="button">Type 3</a><br>
|
||||
</p>
|
||||
</div>
|
||||
<div class="callout"><p>Liens News</p></div>
|
||||
<div class="callout"><p>Pub News</p></div>
|
||||
<div class="callout"><p>Autres</p></div>
|
||||
<div class="callout"><p>Autre</p></div>
|
||||
<div class="callout"><p>Autre</p></div>
|
||||
</aside>
|
||||
</section>
|
||||
</body>
|
||||
<footer>
|
||||
<div class="footLink">
|
||||
<a href="http://localhost:82/christamplate/home.php" target="_blank">
|
||||
<img src="images/footer_icon_01.png" alt="IconFooter" id="footic" /></a>
|
||||
<a href="http://localhost:82/christamplate/home.php" target="_blank">
|
||||
<img src="images/footer_icon_02.png" alt="IconFooter" id="footic" /></a>
|
||||
<a href="http://localhost:82/christamplate/home.php" target="_blank">
|
||||
<img src="images/footer_icon_03.png" alt="IconFooter" id="footic" /></a>
|
||||
</div>
|
||||
<div class="footListLink">
|
||||
<ul id="footerNavList">
|
||||
<span id="footNavTitle">COMPTE</span>
|
||||
<li id="footNavLabel"><a href="#Accueil">Option1</a></li>
|
||||
<li id="footNavLabel"><a href="#News">Option2</a></li>
|
||||
<li id="footNavLabel"><a href="#Boutique">Option3</a></li>
|
||||
<li id="footNavLabel"><a href="#Accueil">Option1</a></li>
|
||||
<li id="footNavLabel"><a href="#News">Option2</a></li>
|
||||
<li id="footNavLabel"><a href="#Boutique">Option3</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</html>
|
||||
127
ChrisTamplate/shop.php
Normal file
127
ChrisTamplate/shop.php
Normal file
@@ -0,0 +1,127 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="css/foundation.css">
|
||||
<link rel="stylesheet" href="css/app.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/style2.css">
|
||||
<link rel="shortcut icon" href="images/favicon.png" />
|
||||
<title>Shop</title>
|
||||
</head>
|
||||
<div class="grid-container">
|
||||
<header>
|
||||
<img src="images/favicon.png" alt="HeaderImage" id="imageHeader"/>
|
||||
</header>
|
||||
<nav class="menu">
|
||||
<ul id="nav">
|
||||
<li id="nav-home"><a href="home.php">Accueil</a></li>
|
||||
<li id="nav-News"><a href="News.php">Nouvelle</a></li>
|
||||
<li id="nav-shop"><a href="shop.php">Boutique</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<body id="shopNav">
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-12 cell">
|
||||
<h1>Boutique</h1>
|
||||
</div>
|
||||
</div>
|
||||
<section class="grid-x grid-padding-x">
|
||||
<aside class="large-4 medium-4 cell"><br>
|
||||
<div class="callout"><p>Trier par </p>
|
||||
<select>
|
||||
<option value="toto">1</option>
|
||||
<option value="titi">2</option>
|
||||
<option value="tata">3</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="callout">Filtre
|
||||
<p>
|
||||
<a href="#" class="button">Type 1</a><br>
|
||||
<a href="#" class="button">Type 2</a><br>
|
||||
<a href="#" class="button">Type 3</a><br>
|
||||
</p>
|
||||
</div>
|
||||
<div class="callout"><p>Mon Panier <img src="images/panier.png" alt="Image3" id="imgPanier"/></p></div>
|
||||
<div class="callout"><p>Autres</p></div>
|
||||
<div class="callout"><p>Autre</p></div>
|
||||
<div class="callout"><p>Autre</p></div>
|
||||
</aside>
|
||||
<article class="large-8 medium-8 cell">
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-12 cell">
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-12 cell">
|
||||
<div class="artShop">
|
||||
<div class="imgShop">
|
||||
<img src="images/rasp_appareil.jpeg" alt="Image3" id="imgShop"/>
|
||||
</div>
|
||||
<div class="titleShop">
|
||||
<p>Title<br>
|
||||
<span id="vendShop">Vendeur<br></span>
|
||||
<span id="priceShop">Prix</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="descShop">
|
||||
<p class="overflow-ellipsisShop">Description</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="artShop">
|
||||
<div class="imgShop">
|
||||
<img src="images/rasp_appareil.jpeg" alt="Image3" id="imgShop"/>
|
||||
</div>
|
||||
<div class="titleShop">
|
||||
<p>Title<br>
|
||||
<span id="vendShop">Vendeur<br></span>
|
||||
<span id="priceShop">Prix</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="descShop">
|
||||
<p class="overflow-ellipsisShop">Description</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="artShop">
|
||||
<div class="imgShop">
|
||||
<img src="images/rasp_appareil.jpeg" alt="Image3" id="imgShop"/>
|
||||
</div>
|
||||
<div class="titleShop">
|
||||
<p>Title<br>
|
||||
<span id="vendShop">Vendeur<br></span>
|
||||
<span id="priceShop">Prix</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="descShop">
|
||||
<p class="overflow-ellipsisShop">Description</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</body>
|
||||
<footer>
|
||||
<div class="footLink">
|
||||
<a href="http://localhost:82/christamplate/home.php" target="_blank">
|
||||
<img src="images/footer_icon_01.png" alt="IconFooter" id="footic" /></a>
|
||||
<a href="http://localhost:82/christamplate/home.php" target="_blank">
|
||||
<img src="images/footer_icon_02.png" alt="IconFooter" id="footic" /></a>
|
||||
<a href="http://localhost:82/christamplate/home.php" target="_blank">
|
||||
<img src="images/footer_icon_03.png" alt="IconFooter" id="footic" /></a>
|
||||
</div>
|
||||
<div class="footListLink">
|
||||
<ul id="footerNavList">
|
||||
<span id="footNavTitle">COMPTE</span>
|
||||
<li id="footNavLabel"><a href="#Accueil">Option1</a></li>
|
||||
<li id="footNavLabel"><a href="#Shop">Option2</a></li>
|
||||
<li id="footNavLabel"><a href="#Boutique">Option3</a></li>
|
||||
<li id="footNavLabel"><a href="#Accueil">Option1</a></li>
|
||||
<li id="footNavLabel"><a href="#Shop">Option2</a></li>
|
||||
<li id="footNavLabel"><a href="#Boutique">Option3</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</html>
|
||||
Reference in New Issue
Block a user