Ajout des templates de dev
Penser à les découper en morceau pour Django
This commit is contained in:
parent
49ac12a621
commit
d3e7fd22bf
|
|
@ -0,0 +1,17 @@
|
|||
#container {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
/* #container h1 {
|
||||
margin-left: 5%;
|
||||
font-family: Raleway; font-size: 24px;
|
||||
font-weight: 200; color: #242424;
|
||||
}
|
||||
|
||||
#container h2 {
|
||||
margin-left: 5%;
|
||||
font-family: Raleway; font-size: 20px;
|
||||
font-weight: 200; color: #242424;
|
||||
} */
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,189 @@
|
|||
/*
|
||||
fonts
|
||||
*/
|
||||
|
||||
@font-face { font-family: NotoSans; src: url(../fonts/noto_sans.ttf); }
|
||||
@font-face { font-family: Raleway; font-weight: 200; src: url(../fonts/raleway_200.ttf); }
|
||||
@font-face { font-family: Raleway; font-weight: 300; src: url(../fonts/raleway_300.ttf); }
|
||||
|
||||
|
||||
|
||||
/*
|
||||
body
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: #fbfbfb;
|
||||
font-family: 'DejaVu Sans', sans-serif;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
header
|
||||
*/
|
||||
|
||||
header {
|
||||
height: 50px; margin: 0; padding: 0 30px;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
background: #f8f8fa; border-bottom: 1px solid #d0d0d0;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-family: Raleway; font-weight: 200;
|
||||
}
|
||||
|
||||
header svg {
|
||||
width: 24px; height: 24px; vertical-align: middle;
|
||||
transition: .15s ease;
|
||||
}
|
||||
header a:hover > svg, header a:focus > svg {
|
||||
filter: brightness(.5);
|
||||
}
|
||||
|
||||
header input[type="search"] {
|
||||
width: 250px;
|
||||
padding: 5px 35px 5px 10px;
|
||||
border: 0; border-radius: 1px;
|
||||
font-family: "Segoe UI", Helvetica, "Droid Sans", Arial,sans-serif;
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, .4); transition: .15s ease;
|
||||
}
|
||||
header input[type="search"] ~ a {
|
||||
position: relative; left: -33px;
|
||||
}
|
||||
header input[type="search"]:focus {
|
||||
box-shadow: 0 0 4px rgba(0, 102, 255, .9);
|
||||
}
|
||||
header input[type="search"] ~ a > svg > path {
|
||||
fill: #cccccc; transition: .15s ease;
|
||||
}
|
||||
header input[type="search"]:focus ~ a > svg > path {
|
||||
fill: #333333;
|
||||
}
|
||||
|
||||
#spotlight a {
|
||||
padding: 8px 18px 6px 18px;
|
||||
color: #727272; font-size: 15px;
|
||||
border-bottom: 2px solid rgba(93, 123, 141, 0);
|
||||
transition: border .15s ease;
|
||||
}
|
||||
#spotlight a:hover, header #spotlight a:focus {
|
||||
border-bottom: 2px solid rgba(93, 123, 141, 1);
|
||||
}
|
||||
|
||||
|
||||
footer {
|
||||
margin: 20px 10% 5px 10%; padding: 10px 0;
|
||||
text-align: center; font-size: 11px; font-style: italic;
|
||||
color: #a0a0a0;
|
||||
border-top: 1px solid rgba(0, 0, 0, .1);
|
||||
}
|
||||
footer p {
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
||||
/*
|
||||
links
|
||||
*/
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
a:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
alert overlay
|
||||
*/
|
||||
|
||||
.alert {
|
||||
position: fixed; left: 15%;
|
||||
display: flex; align-items: center;
|
||||
width: 70%; z-index: 10;
|
||||
font-family: NotoSans; font-size: 14px; color: #212121;
|
||||
background: #ffffff;
|
||||
border-bottom: 5px solid #4caf50;
|
||||
border-radius: 1px; box-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
|
||||
transition: opacity .15s ease;
|
||||
}
|
||||
.alert.ok {
|
||||
border-color: #4caf50;
|
||||
}
|
||||
.alert.error {
|
||||
border-color: #f44336;
|
||||
}
|
||||
.alert span {
|
||||
flex-grow: 1; margin: 15px 10px 10px 0;
|
||||
}
|
||||
.alert input[type="button"] {
|
||||
margin: 3px 30px 0 0;
|
||||
}
|
||||
|
||||
.alert svg {
|
||||
margin: 15px 20px 10px 30px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
buttons
|
||||
*/
|
||||
|
||||
input[type="button"] {
|
||||
font-family: NotoSans; font-size: 14px; /*font-weight: bold;*/
|
||||
text-align: center;
|
||||
padding: 5px 15px;
|
||||
transition: .1s ease;
|
||||
}
|
||||
|
||||
/* flat */
|
||||
input[type="button"].flat {
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0); color: #727272;
|
||||
}
|
||||
input[type="button"].flat:hover {
|
||||
background: rgba(0, 0, 0, .1);
|
||||
}
|
||||
input[type="button"].flat:focus {
|
||||
background: rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
/* raised */
|
||||
input[type="button"].raised {
|
||||
border: none;
|
||||
background: #e0e0e0; color: #212121;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
|
||||
}
|
||||
input[type="button"].raised:hover,
|
||||
input[type="button"].raised:focus {
|
||||
background: #d5d5d5;
|
||||
}
|
||||
input[type="button"].raised:active {
|
||||
background: #d6d6d6;
|
||||
box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
/* Input text */
|
||||
input[type="text"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="password"]:focus {
|
||||
|
||||
}
|
||||
|
||||
|
||||
section {
|
||||
margin: 10px 5%;
|
||||
}
|
||||
|
||||
section h1 {
|
||||
border-bottom: 1px solid #a0a0a0;
|
||||
font-family: Raleway; font-size: 24px;
|
||||
font-weight: 200; color: #242424;
|
||||
}
|
||||
|
||||
section * {
|
||||
transition: .15s ease;
|
||||
}
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
/*
|
||||
home-title
|
||||
*/
|
||||
|
||||
.home-title {
|
||||
margin: 20px 0; padding: 10px 5%;
|
||||
background: #bf1c11; box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
|
||||
border-top: 10px solid #ab170c;
|
||||
}
|
||||
|
||||
.home-title h1 {
|
||||
margin-top: 0;
|
||||
color: #ffffff; border-color: #ffffff;
|
||||
}
|
||||
|
||||
.home-title p {
|
||||
margin-bottom: 0; text-align: justify;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.home-title a {
|
||||
color: inherit; text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
pinned-content
|
||||
*/
|
||||
|
||||
.home-pinned-content > div {
|
||||
display: flex; justify-content: space-between;
|
||||
}
|
||||
|
||||
.home-pinned-content article {
|
||||
flex-grow: 1; margin: 0 1px; padding: 0;
|
||||
position: relative;
|
||||
max-width: 250px; overflow: hidden;
|
||||
}
|
||||
|
||||
.home-pinned-content a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.home-pinned-content img {
|
||||
width: 100%; filter: blur(0px);
|
||||
}
|
||||
|
||||
.home-pinned-content article div {
|
||||
position: absolute; bottom: 0; z-index: 3;
|
||||
width: 90%; margin: 0;
|
||||
padding: 30px 5% 10px 5%;
|
||||
color: #ffffff; text-shadow: 1px 1px 0 rgba(0,0,0,.6);
|
||||
background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7) 40px,rgba(0,0,0,.8));
|
||||
}
|
||||
|
||||
.home-pinned-content h2 {
|
||||
display: block; margin: 5px 0;
|
||||
font-size: 18px; font-family: NotoSans; font-weight: 200;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
home-articles
|
||||
*/
|
||||
|
||||
.home-articles {
|
||||
display: flex; justify-content: space-between;
|
||||
}
|
||||
.home-articles > div {
|
||||
flex-grow: 1; max-width: 48%;
|
||||
}
|
||||
.home-articles h1 {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
}
|
||||
.home-articles h1 a {
|
||||
padding: 0;
|
||||
font-family: NotoSans; font-size: 16px;
|
||||
font-weight: 400; color: /*#015078*/ /*#bf1c11*/ #234d5f;
|
||||
}
|
||||
|
||||
.home-articles article {
|
||||
padding: 10px; margin: 10px 0; display: flex; align-items: center;
|
||||
background: #ffffff; border: 1px solid rgba(0, 0, 0, .2);
|
||||
}
|
||||
.home-articles article > img {
|
||||
float: left; margin-right: 10px; flex-shrink: 0;
|
||||
}
|
||||
.home-articles article > img.screeshot {
|
||||
width: 128px; height: 64px;
|
||||
}
|
||||
.home-articles article > div {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
.home-articles article h3 {
|
||||
margin: 0;
|
||||
color: #424242; font-weight: normal;
|
||||
}
|
||||
.home-articles p {
|
||||
margin: 5px 0;
|
||||
text-align: justify;
|
||||
color: #808080;
|
||||
}
|
||||
.home-articles .metadata {
|
||||
margin: 0;
|
||||
color: #22292c;
|
||||
}
|
||||
.home-articles .metadata a {
|
||||
color: #22292c; font-weight: 400; font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
hover rules
|
||||
*/
|
||||
|
||||
.home-pinned-content a:hover img,
|
||||
.home-pinned-content a:focus img {
|
||||
filter: blur(3px);
|
||||
}
|
||||
.home-pinned-content a:hover div,
|
||||
.home-pinned-content a:focus div {
|
||||
padding: 200px 5% 10px 5%;
|
||||
background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7) 40px,rgba(0,0,0,.8));
|
||||
}
|
||||
|
||||
.home-articles h1 a:hover,
|
||||
.home-articles h1 a:focus {
|
||||
padding-right: 10px;
|
||||
}
|
||||
.home-articles article a:hover,
|
||||
.home-articles article a:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
@ -0,0 +1,366 @@
|
|||
/*
|
||||
fonts
|
||||
*/
|
||||
|
||||
@font-face { font-family: NotoSans; src: url(../fonts/noto_sans.ttf); }
|
||||
@font-face { font-family: Raleway; font-weight: 200; src: url(../fonts/raleway_200.ttf); }
|
||||
@font-face { font-family: Raleway; font-weight: 300; src: url(../fonts/raleway_300.ttf); }
|
||||
|
||||
|
||||
/* Global */
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: #ffffff;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: #ffffff; opacity: .7;
|
||||
text-decoration: none;
|
||||
transition: opacity .15s ease;
|
||||
}
|
||||
nav a:hover,
|
||||
nav a:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.light-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Menu */
|
||||
|
||||
#light-menu {
|
||||
list-style: none;
|
||||
display: flex; flex-direction: row; align-items: center;
|
||||
width: 100%; height: 40px;
|
||||
overflow-x: auto; overflow-y: hidden;
|
||||
margin: 0; padding: 0;
|
||||
text-indent: 0;
|
||||
background: #22292c; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
#logo {
|
||||
position: relative; display: block;
|
||||
height: 100%; opacity: 1;
|
||||
background: -moz-linear-gradient(left, #bf1c11, #ba1203);
|
||||
background: -webkit-linear-gradient(left, #bf1c11, #ba1203);
|
||||
}
|
||||
/*#logo::after {
|
||||
position: absolute; left: 100%; top: 50%;
|
||||
height: 0; width: 0;
|
||||
border: solid transparent; content: " ";
|
||||
border-left-color: #ba1203;
|
||||
border-width: 4px;
|
||||
margin-top: -4px;
|
||||
}*/
|
||||
#logo img {
|
||||
width: 40px;
|
||||
margin: 0; padding: 0;
|
||||
margin-bottom: -4.5px;
|
||||
filter: drop-shadow(0 0 2px rgba(0, 0, 0, .0));
|
||||
transition: filter .15s ease;
|
||||
}
|
||||
#logo:hover img,
|
||||
#logo:focus img {
|
||||
filter: drop-shadow(0 0 2px rgba(0, 0, 0, .7));
|
||||
}
|
||||
|
||||
#light-menu > li {
|
||||
display: flex; flex-direction: column;
|
||||
align-items: center; flex-grow: 1;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
font-family: Raleway; font-size: 13px;
|
||||
color: #ffffff;
|
||||
}
|
||||
#light-menu li {
|
||||
padding: 0 2px;
|
||||
}
|
||||
#light-menu li > a {
|
||||
display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center;
|
||||
width: 100%; height: 100%;
|
||||
}
|
||||
#light-menu li > a > div {
|
||||
display: none;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#light-menu li > a > svg {
|
||||
display: block; width: 20px; flex-shrink: 0;
|
||||
margin: 0 auto 5px auto;
|
||||
}
|
||||
|
||||
#light-menu li span[notifications]:not([notifications="0"])::before {
|
||||
content: attr(notifications);
|
||||
display: inline-block; margin-right: 6px;
|
||||
vertical-align: middle;
|
||||
padding: 0 5px 0 4px; border-radius: 5px;
|
||||
font-family: NotoSans;
|
||||
background: #ffffff; color: #000000;
|
||||
}
|
||||
|
||||
|
||||
#menu {
|
||||
width: 100%; height: 0; overflow-x: hidden;
|
||||
font-family: NotoSans; font-size: 12px;
|
||||
background: #22292c; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
|
||||
transition: .1s ease;
|
||||
}
|
||||
#menu.opened {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#menu > div {
|
||||
width: 100%;
|
||||
display: none;
|
||||
}
|
||||
#menu > div.opened {
|
||||
display: block;
|
||||
}
|
||||
#menu h2 {
|
||||
margin: 10px 0 10px 40px;
|
||||
font-family: Raleway; font-size: 15px;
|
||||
color: #ffffff;
|
||||
}
|
||||
#menu h2 > svg {
|
||||
width: 30px; vertical-align: middle;
|
||||
}
|
||||
#menu h2 > img {
|
||||
width: 64px; margin-right: 10px;
|
||||
vertical-align: middle; border-radius: 50%;
|
||||
}
|
||||
|
||||
#menu h3 {
|
||||
margin: 10px 0 10px 40px;
|
||||
font-family: Raleway; font-size: 13px;
|
||||
color: #ffffff;
|
||||
}
|
||||
#menu hr {
|
||||
margin: 10px 15px 0 15px;
|
||||
border: none;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .15);
|
||||
}
|
||||
|
||||
#menu > div > a,
|
||||
#menu span {
|
||||
display: block; margin: 10px 15px;
|
||||
}
|
||||
#menu span {
|
||||
/*font-style: italic;*/ color: #b8b8b8;
|
||||
font-size: 10px;
|
||||
}
|
||||
#menu span > a {
|
||||
display: inline;
|
||||
margin: 0; font-style: normal;
|
||||
font-size: 12px;
|
||||
}
|
||||
#menu a > img {
|
||||
vertical-align: middle;
|
||||
margin-right: 15px;
|
||||
}
|
||||
#menu a > svg {
|
||||
width: 20px; height: 20px; vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#menu ul {
|
||||
list-style: none;
|
||||
margin: 10px 15px; padding: 0;
|
||||
color: #b8b8b8;
|
||||
}
|
||||
#menu li {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
@media all and (min-width: 550px) {
|
||||
#light-menu {
|
||||
height: 60px;
|
||||
}
|
||||
#logo img {
|
||||
width: 60px;
|
||||
}
|
||||
#light-menu li > a > div {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#menu form input {
|
||||
display: block;
|
||||
margin: 5px 15px; padding: 5px 10px;
|
||||
font-size: 14px;
|
||||
background: #e8e8e8; transition: background .15s ease;
|
||||
}
|
||||
#menu form input:focus {
|
||||
background: #ffffff;
|
||||
}
|
||||
#menu form input:first-child {
|
||||
margin-bottom: 0; border-bottom: none;
|
||||
border-top-left-radius: 5px;
|
||||
-webkit-border-top-left-radius: 5px;
|
||||
-moz-border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
-webkit-border-top-right-radius: 5px;
|
||||
-moz-border-top-right-radius: 5px;
|
||||
}
|
||||
#menu form input:nth-child(2) {
|
||||
margin-top: 0; border-top: 1px solid #dddddd;
|
||||
border-bottom-left-radius: 5px;
|
||||
-webkit-border-bottom-left-radius: 5px;
|
||||
-moz-border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
-webkit-border-bottom-right-radius: 5px;
|
||||
-moz-border-bottom-right-radius: 5px;
|
||||
}
|
||||
#menu form a {
|
||||
display: block; margin-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
/* Header */
|
||||
|
||||
header {
|
||||
padding: 10px 10px 0px 10px;
|
||||
background: #f8f8fa; border-bottom: 1px solid #d0d0d0;
|
||||
}
|
||||
header svg {
|
||||
width: 24px; height: 24px; vertical-align: middle;
|
||||
transition: .15s ease;
|
||||
}
|
||||
header a:hover > svg, header a:focus > svg {
|
||||
filter: brightness(.5);
|
||||
}
|
||||
|
||||
header input[type="search"] {
|
||||
width: 100%;
|
||||
border: 0; border-radius: 1px;
|
||||
font-family: "Segoe UI", Helvetica, "Droid Sans", Arial,sans-serif;
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, .4); transition: .15s ease;
|
||||
}
|
||||
|
||||
#spotlight {
|
||||
display: flex;
|
||||
align-items: center; justify-content: space-around;
|
||||
}
|
||||
#spotlight a {
|
||||
padding: 5px 10px; margin: 5px 0;
|
||||
color: #727272; font-size: 14px;
|
||||
/*border-bottom: 2px solid rgba(93, 123, 141, .5);*/
|
||||
transition: border .15s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
#spotlight a:hover, header #spotlight a:focus {
|
||||
color: #404040;
|
||||
}
|
||||
|
||||
|
||||
/* Homepage */
|
||||
|
||||
section {
|
||||
margin: 10px;
|
||||
}
|
||||
section h1 {
|
||||
margin: 10px 0;
|
||||
border-bottom: 1px solid #a0a0a0;
|
||||
font-family: Raleway; font-size: 20px;
|
||||
font-weight: 200; color: #242424;
|
||||
}
|
||||
section * {
|
||||
transition: .15s ease;
|
||||
}
|
||||
.home-title {
|
||||
margin: 20px 0; padding: 10px;
|
||||
background: #bf1c11; box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
|
||||
border-top: 10px solid #ab170c;
|
||||
}
|
||||
.home-title h1 {
|
||||
margin: 0;
|
||||
color: #ffffff; border-color: #ffffff;
|
||||
}
|
||||
.home-title p {
|
||||
margin-bottom: 0; text-align: justify;
|
||||
color: #ffffff; font-size: 14px;
|
||||
}
|
||||
.home-title a {
|
||||
color: inherit; text-decoration: underline;
|
||||
}
|
||||
#shoutbox {
|
||||
display: none;
|
||||
}
|
||||
.home-pinned-content {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.home-pinned-content article {
|
||||
margin: 5px 0;
|
||||
}
|
||||
.home-pinned-content article > a {
|
||||
width: 100%;
|
||||
display: flex; align-items: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
.home-pinned-content img {
|
||||
flex-shrink: 0;
|
||||
width: 100px; height: 100px;
|
||||
}
|
||||
.home-pinned-content article div {
|
||||
flex-grow: 1; margin-left: 10px;
|
||||
}
|
||||
.home-pinned-content h2 {
|
||||
margin: 0;
|
||||
font-family: Raleway; font-size: 18px;
|
||||
font-weight: 400; color: #242424;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.home-pinned-content span {
|
||||
color: #000000; font-size: 14px;
|
||||
}
|
||||
.home-articles > div {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.home-articles article {
|
||||
margin-bottom: 15px;
|
||||
display: flex; align-items: center;
|
||||
}
|
||||
.home-articles article > img {
|
||||
flex-shrink: 0; width: 128px; height: 64px;
|
||||
}
|
||||
.home-articles article > div {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.home-articles h1 {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
}
|
||||
.home-articles h1 > a {
|
||||
font-size: 13px; color: #666666;
|
||||
}
|
||||
.home-articles h3 {
|
||||
margin: 0;
|
||||
color: #424242; font-weight: normal;
|
||||
}
|
||||
.home-articles p {
|
||||
margin: 5px 0;
|
||||
text-align: justify;
|
||||
color: #808080; font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
/* Notifications */
|
||||
|
||||
.alert {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* Footer */
|
||||
|
||||
footer {
|
||||
margin: 20px 10% 5px 10%; padding: 10px 0;
|
||||
text-align: center; font-size: 11px; font-style: italic;
|
||||
color: #a0a0a0;
|
||||
border-top: 1px solid rgba(0, 0, 0, .1);
|
||||
}
|
||||
footer p {
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,210 @@
|
|||
nav a {
|
||||
color: #ffffff;
|
||||
opacity: .7;
|
||||
cursor: pointer;
|
||||
}
|
||||
nav a:hover,
|
||||
nav a:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
/* Menu */
|
||||
|
||||
#logo {
|
||||
position: relative; display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
opacity: 1;
|
||||
background: -moz-linear-gradient(top, #bf1c11, #ba1203);
|
||||
background: -webkit-linear-gradient(top, #bf1c11, #ba1203);
|
||||
background: #bf1c11;
|
||||
transition: .15s ease;
|
||||
}
|
||||
/* Flèche */
|
||||
/*nav #logo::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%; left: 50%;
|
||||
height: 0; width: 0;
|
||||
border: solid transparent;
|
||||
border-top-color: #ba1203;
|
||||
border-width: 12px; margin-left: -12px;
|
||||
}*/
|
||||
#logo img {
|
||||
width: 100%;
|
||||
margin: 0; padding: 0;
|
||||
margin-bottom: -4.5px;
|
||||
filter: drop-shadow(0 0 2px rgba(0, 0, 0, .0));
|
||||
transition: filter .15s ease;
|
||||
}
|
||||
#logo:hover,
|
||||
#logo:focus {
|
||||
background: #d72411;
|
||||
}
|
||||
|
||||
#light-menu {
|
||||
position: fixed; z-index: 10;
|
||||
list-style: none;
|
||||
width: 60px;
|
||||
height: 100%; overflow-y: auto;
|
||||
margin: 0; padding: 0;
|
||||
text-indent: 0;
|
||||
background: #22292c; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
#light-menu li {
|
||||
width: 100%; height: 45px;
|
||||
text-align: center;
|
||||
font-family: Raleway; font-size: 13px;
|
||||
color: #ffffff;
|
||||
}
|
||||
#light-menu li > a {
|
||||
display: flex; flex-direction: column; flex-grow: 1;
|
||||
align-items: center; justify-content: center;
|
||||
width: 100%; height: 100%;
|
||||
transition: opacity .15s ease; /* because Chrome sucks */
|
||||
}
|
||||
|
||||
#light-menu li > a > svg {
|
||||
display: block; width: 35%; flex-shrink: 0;
|
||||
margin: 0 auto 5px auto;
|
||||
}
|
||||
#light-menu li div {
|
||||
display: none;
|
||||
}
|
||||
#light-menu li > a::after {
|
||||
content: attr(label);
|
||||
position: fixed; display: none;
|
||||
padding: 4px 8px; /*margin-top: -28px;*/ left: 63px;
|
||||
font-family: NotoSans; border-radius: 3px;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
#light-menu li:not(.opened) > a:hover::after,
|
||||
#light-menu li:not(.opened) > a:focus::after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*nav li span[notifications]:not([notifications="0"])::before {
|
||||
content: attr(notifications);
|
||||
display: inline-block; margin-right: 6px;
|
||||
vertical-align: middle;
|
||||
padding: 0 5px 0 4px; border-radius: 5px;
|
||||
font-family: NotoSans;
|
||||
background: #ffffff; color: #000000;
|
||||
}*/
|
||||
|
||||
|
||||
/* Overlay */
|
||||
#menu {
|
||||
position: fixed; z-index: 5;
|
||||
left: -240px; width: 300px; /* left-to-right animation */
|
||||
/*left: 60px; width: 0;*/ /* scroll animation */
|
||||
height: 100%; overflow-x: hidden; overflow-y: auto;
|
||||
font-family: NotoSans; font-size: 14px;
|
||||
background: #22292c; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
|
||||
transition: 2s ease;
|
||||
}
|
||||
|
||||
#menu.opened {
|
||||
left: 60px; /* left-to-right animation */
|
||||
/*width: 300px;*/ /* scroll animation */
|
||||
}
|
||||
|
||||
|
||||
#menu.scroll-animation {
|
||||
left: 60px; width: 0;
|
||||
}
|
||||
#menu.scroll-animation.opened {
|
||||
width: 300px;
|
||||
}
|
||||
#menu.left-to-right-animation {
|
||||
left: -240px; width: 300px;
|
||||
}
|
||||
#menu.left-to-right-animation.opened {
|
||||
left: 60px;
|
||||
}
|
||||
|
||||
|
||||
#menu > div {
|
||||
width: 300px;
|
||||
display: none;
|
||||
}
|
||||
#menu > div.opened {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#menu h2 {
|
||||
margin: 5% 0 20px 40px;
|
||||
font-family: Raleway; font-size: 18px;
|
||||
color: #ffffff;
|
||||
}
|
||||
#menu h2 > svg {
|
||||
width: 42px; vertical-align: middle;
|
||||
}
|
||||
#menu h2 img {
|
||||
width: 64px; border-radius: 50%; vertical-align: middle; margin-right: 10px;
|
||||
}
|
||||
|
||||
#menu h3 {
|
||||
margin: 20px 0 20px 40px;
|
||||
font-family: Raleway; font-size: 14px;
|
||||
color: #ffffff;
|
||||
}
|
||||
#menu hr {
|
||||
margin: 15px;
|
||||
border: none;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .15);
|
||||
}
|
||||
|
||||
#menu ul {
|
||||
margin: 0; padding: 0; list-style: none;
|
||||
}
|
||||
#menu a,
|
||||
#menu li {
|
||||
display: block; margin: 10px 15px;
|
||||
transition: opacity .15s ease;
|
||||
}
|
||||
#menu li {
|
||||
color: #b8b8b8;
|
||||
}
|
||||
#menu li > a {
|
||||
display: inline;
|
||||
margin: 0; font-style: normal;
|
||||
}
|
||||
#menu a > img {
|
||||
vertical-align: middle;
|
||||
margin-right: 15px;
|
||||
}
|
||||
#menu a > svg {
|
||||
width: 20px; height: 20px; vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#menu form input {
|
||||
display: block; width: 80%;
|
||||
margin: 0 5%; padding: 5px 2%;
|
||||
font-size: 14px; color: inherit;
|
||||
background: #e8e8e8; transition: background .15s ease;
|
||||
border: none;
|
||||
}
|
||||
#menu form input:focus {
|
||||
background: #ffffff;
|
||||
}
|
||||
#menu form.login input:first-child {
|
||||
margin-bottom: 0; border-bottom: none;
|
||||
border-top-left-radius: 5px;
|
||||
-webkit-border-top-left-radius: 5px;
|
||||
-moz-border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
-webkit-border-top-right-radius: 5px;
|
||||
-moz-border-top-right-radius: 5px;
|
||||
}
|
||||
#menu form.login input:nth-child(2) {
|
||||
margin-top: 0; border-top: 1px solid #dddddd;
|
||||
border-bottom-left-radius: 5px;
|
||||
-webkit-border-bottom-left-radius: 5px;
|
||||
-moz-border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
-webkit-border-bottom-right-radius: 5px;
|
||||
-moz-border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
/*
|
||||
Responsives rules
|
||||
*/
|
||||
|
||||
@media all and (max-width: 1399px) {
|
||||
body {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/*header form {
|
||||
border-bottom: 1px solid #adb0b4;
|
||||
}*/
|
||||
header input[type="search"] {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#menu li {
|
||||
font-size: 10px;
|
||||
}
|
||||
#menu a {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media all and (min-width: 1400px) {
|
||||
body {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
header input[type="search"] {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#menu li {
|
||||
font-size: 11px;
|
||||
}
|
||||
#menu a {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1100px) {
|
||||
.home-pinned-content article:nth-child(5) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
.home-pinned-content article:nth-child(4) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
#shoutbox {
|
||||
margin: 20px 5% 10px 5%;
|
||||
/*box-shadow: 0 0 2px rgba(0, 0, 0, .4);*/
|
||||
background: #ffffff;
|
||||
/*border: 1px solid #999999;*/
|
||||
}
|
||||
|
||||
#shoutbox > div {
|
||||
margin: 0; padding: 0; height: 125px; width: 100%;
|
||||
overflow-y: scroll; border-bottom: 1px solid #999999;
|
||||
border-radius: 5px 5px 0 0;
|
||||
border: 1px solid #999999;
|
||||
}
|
||||
#shoutbox > input {
|
||||
width: 100%; padding: 5px 0;
|
||||
border-radius: 0 0 5px 5px;
|
||||
border: 1px solid #999999;
|
||||
}
|
||||
#shoutbox > input:focus {
|
||||
border-color: #a12222;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(161, 34, 34, 0.6);
|
||||
}
|
||||
|
||||
#shoutbox > div > div {
|
||||
padding: 2px 10px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .3);
|
||||
font-size: 11px;
|
||||
}
|
||||
#shoutbox > div > div:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
#shoutbox > div > div:hover {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,449 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr-FR">
|
||||
<head>
|
||||
<title>Planète Casio : design template</title>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href="css/global.css">
|
||||
<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href="css/navbar.css">
|
||||
<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href="css/shoutbox.css">
|
||||
<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href="css/container.css">
|
||||
<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href="css/responsive.css">
|
||||
|
||||
<link rel="stylesheet" media="all and (max-width: 699px)" type="text/css" href="css/light.css">
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<ul id="light-menu">
|
||||
<a id="logo" href="#">
|
||||
<img src="images/logo_noshadow.png" alt="logo"/>
|
||||
</a>
|
||||
|
||||
<li>
|
||||
<a role="button" label="Compte" tabindex="0">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"></path>
|
||||
</svg>
|
||||
<div>Compte</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a role="button" label="Actualités" tabindex="0">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M20,11H4V8H20M20,15H13V13H20M20,19H13V17H20M11,19H4V13H11M20.33,4.67L18.67,3L17,4.67L15.33,3L13.67,4.67L12,3L10.33,4.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V3L20.33,4.67Z"></path>
|
||||
</svg>
|
||||
<div>Actualités</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a role="button" label="Forum" tabindex="0">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M17,12V3A1,1 0 0,0 16,2H3A1,1 0 0,0 2,3V17L6,13H16A1,1 0 0,0 17,12M21,6H19V15H6V17A1,1 0 0,0 7,18H18L22,22V7A1,1 0 0,0 21,6Z"></path>
|
||||
</svg>
|
||||
<div>Forum</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a role="button" label="Programmes" tabindex="0">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M8,3A2,2 0 0,0 6,5V9A2,2 0 0,1 4,11H3V13H4A2,2 0 0,1 6,15V19A2,2 0 0,0 8,21H10V19H8V14A2,2 0 0,0 6,12A2,2 0 0,0 8,10V5H10V3M16,3A2,2 0 0,1 18,5V9A2,2 0 0,0 20,11H21V13H20A2,2 0 0,0 18,15V19A2,2 0 0,1 16,21H14V19H16V14A2,2 0 0,1 18,12A2,2 0 0,1 16,10V5H14V3H16Z"></path>
|
||||
</svg>
|
||||
<div>Programmes</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a role="button" label="Tutoriels" tabindex="0">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M12,3L1,9L12,15L21,10.09V17H23V9M5,13.18V17.18L12,21L19,17.18V13.18L12,17L5,13.18Z"></path>
|
||||
</svg>
|
||||
<div>Tutoriels</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a role="button" label="Sprites" tabindex="0">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M20.71,4.63L19.37,3.29C19,2.9 18.35,2.9 17.96,3.29L9,12.25L11.75,15L20.71,6.04C21.1,5.65 21.1,5 20.71,4.63M7,14A3,3 0 0,0 4,17C4,18.31 2.84,19 2,19C2.92,20.22 4.5,21 6,21A4,4 0 0,0 10,17A3,3 0 0,0 7,14Z"></path>
|
||||
</svg>
|
||||
<div>Sprites</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#" label="Outils">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M22.7,19L13.6,9.9C14.5,7.6 14,4.9 12.1,3C10.1,1 7.1,0.6 4.7,1.7L9,6L6,9L1.6,4.7C0.4,7.1 0.9,10.1 2.9,12.1C4.8,14 7.5,14.5 9.8,13.6L18.9,22.7C19.3,23.1 19.9,23.1 20.3,22.7L22.6,20.4C23.1,20 23.1,19.3 22.7,19Z"></path>
|
||||
</svg>
|
||||
<div>Outils</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div id="menu">
|
||||
<!-- {% if user.is_authenticated %} -->
|
||||
<div>
|
||||
<h2>
|
||||
<img src="images/3864.png">
|
||||
Dark Storm
|
||||
</h2>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M20,2A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H6L2,22V4C2,2.89 2.9,2 4,2H20M4,4V17.17L5.17,16H20V4H4M6,7H18V9H6V7M6,11H15V13H6V11Z"></path>
|
||||
</svg>
|
||||
Notifications
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M2,2V11C2,12 3,13 4,13H6.2C6.6,15 7.9,16.7 11,17V19.1C8.8,19.3 8,20.4 8,21.7V22H16V21.7C16,20.4 15.2,19.3 13,19.1V17C16.1,16.7 17.4,15 17.8,13H20C21,13 22,12 22,11V2H18C17.1,2 16,3 16,4H8C8,3 6.9,2 6,2H2M4,4H6V6L6,11H4V4M18,4H20V11H18V6L18,4M8,6H16V11.5C16,13.43 15.42,15 12,15C8.59,15 8,13.43 8,11.5V6Z"></path>
|
||||
</svg>
|
||||
Trophées
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"></path>
|
||||
</svg>
|
||||
Topics favoris
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M3,1H19A1,1 0 0,1 20,2V6A1,1 0 0,1 19,7H3A1,1 0 0,1 2,6V2A1,1 0 0,1 3,1M3,9H19A1,1 0 0,1 20,10V10.67L17.5,9.56L11,12.44V15H3A1,1 0 0,1 2,14V10A1,1 0 0,1 3,9M3,17H11C11.06,19.25 12,21.4 13.46,23H3A1,1 0 0,1 2,22V18A1,1 0 0,1 3,17M8,5H9V3H8V5M8,13H9V11H8V13M8,21H9V19H8V21M4,3V5H6V3H4M4,11V13H6V11H4M4,19V21H6V19H4M17.5,12L22,14V17C22,19.78 20.08,22.37 17.5,23C14.92,22.37 13,19.78 13,17V14L17.5,12M17.5,13.94L15,15.06V17.72C15,19.26 16.07,20.7 17.5,21.06V13.94Z"></path>
|
||||
</svg>
|
||||
Panel d'administration
|
||||
</a>
|
||||
|
||||
<hr />
|
||||
|
||||
<a href="account.html">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"></path>
|
||||
</svg>
|
||||
Paramètres
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M17,17.25V14H10V10H17V6.75L22.25,12L17,17.25M13,2A2,2 0 0,1 15,4V8H13V4H4V20H13V16H15V20A2,2 0 0,1 13,22H4A2,2 0 0,1 2,20V4A2,2 0 0,1 4,2H13Z"></path>
|
||||
</svg>
|
||||
Déconnexion
|
||||
</a>
|
||||
</div>
|
||||
<!-- {% else %}
|
||||
<div>
|
||||
<h2>
|
||||
Invité
|
||||
</h2>
|
||||
<a href="#">Connexion</a>
|
||||
<a href="#">Inscription</a>
|
||||
</div>
|
||||
{% endif %} -->
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M20,11H4V8H20M20,15H13V13H20M20,19H13V17H20M11,19H4V13H11M20.33,4.67L18.67,3L17,4.67L15.33,3L13.67,4.67L12,3L10.33,4.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V3L20.33,4.67Z"></path>
|
||||
</svg>
|
||||
Actualités
|
||||
</h2>
|
||||
<a href="#">Casio</a>
|
||||
<a href="#">Arduino</a>
|
||||
<a href="#">Projets communautaires</a>
|
||||
<a href="#">Divers</a>
|
||||
|
||||
<hr />
|
||||
|
||||
<h3>Derniers articles</h3>
|
||||
<ul>
|
||||
<li><a href="#">Un nouvel OS pour les Graph 75</a></li>
|
||||
<li><a href="#">Les 7 Days CPC arrivent bientôt</a></li>
|
||||
<li><a href="#">Résultats de jeu du mois de Février 2017</a></li>
|
||||
<li><a href="#">Test du shield relai Sainsmart pour Arduino</a></li>
|
||||
<li><a href="#">Un nouveau tutoriel sur le C-engine</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M17,12V3A1,1 0 0,0 16,2H3A1,1 0 0,0 2,3V17L6,13H16A1,1 0 0,0 17,12M21,6H19V15H6V17A1,1 0 0,0 7,18H18L22,22V7A1,1 0 0,0 21,6Z"></path>
|
||||
</svg>
|
||||
Forum
|
||||
</h2>
|
||||
<a href="#">Vie communautaire</a>
|
||||
<a href="#">Projets de programmation</a>
|
||||
<a href="#">Questions et problèmes</a>
|
||||
<a href="#">Discussions</a>
|
||||
<a href="#">Administration</a>
|
||||
<a href="#">CreativeCalc</a>
|
||||
|
||||
<hr />
|
||||
|
||||
<h3>Derniers commentaires</h3>
|
||||
<ul>
|
||||
<li><a href="#">Legolas</a> sur <a href="#">Bugs de la v5</a></li>
|
||||
<li><a href="#">Dark Storm</a> sur <a href="#">fxSDK support</a></li>
|
||||
<li><a href="#">Gollum</a> sur <a href="#">Le nom de topic qui fout le bordel car il est trop long…</a></li>
|
||||
<li><a href="#">Lephenixnoir</a> sur <a href="#">fxSDK support</a></li>
|
||||
<li><a href="#">Kristaba</a> sur <a href="#">FiXos, le retour</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M8,3A2,2 0 0,0 6,5V9A2,2 0 0,1 4,11H3V13H4A2,2 0 0,1 6,15V19A2,2 0 0,0 8,21H10V19H8V14A2,2 0 0,0 6,12A2,2 0 0,0 8,10V5H10V3M16,3A2,2 0 0,1 18,5V9A2,2 0 0,0 20,11H21V13H20A2,2 0 0,0 18,15V19A2,2 0 0,1 16,21H14V19H16V14A2,2 0 0,1 18,12A2,2 0 0,1 16,10V5H14V3H16Z"></path>
|
||||
</svg>
|
||||
Programmes
|
||||
</h2>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M7,6H17A6,6 0 0,1 23,12A6,6 0 0,1 17,18C15.22,18 13.63,17.23 12.53,16H11.47C10.37,17.23 8.78,18 7,18A6,6 0 0,1 1,12A6,6 0 0,1 7,6M6,9V11H4V13H6V15H8V13H10V11H8V9H6M15.5,12A1.5,1.5 0 0,0 14,13.5A1.5,1.5 0 0,0 15.5,15A1.5,1.5 0 0,0 17,13.5A1.5,1.5 0 0,0 15.5,12M18.5,9A1.5,1.5 0 0,0 17,10.5A1.5,1.5 0 0,0 18.5,12A1.5,1.5 0 0,0 20,10.5A1.5,1.5 0 0,0 18.5,9Z"></path>
|
||||
</svg>
|
||||
Jeux
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M19,19H5V8H19M19,3H18V1H16V3H8V1H6V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M16.53,11.06L15.47,10L10.59,14.88L8.47,12.76L7.41,13.82L10.59,17L16.53,11.06Z"></path>
|
||||
</svg>
|
||||
Utilitaires
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M21,16H3V4H21M21,2H3C1.89,2 1,2.89 1,4V16A2,2 0 0,0 3,18H10V20H8V22H16V20H14V18H21A2,2 0 0,0 23,16V4C23,2.89 22.1,2 21,2Z"></path>
|
||||
</svg>
|
||||
Logiciels
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"></path>
|
||||
</svg>
|
||||
Top 20
|
||||
</a>
|
||||
|
||||
<hr />
|
||||
<form>
|
||||
<input type="text" name="quick-search" placeholder="Recherche rapide" />
|
||||
</form>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
|
||||
</svg>
|
||||
Recherche avancée
|
||||
</a>
|
||||
|
||||
<hr />
|
||||
|
||||
<h3>Sélection de la semaine</h3>
|
||||
<ul>
|
||||
<li><a href="#"><img src="images/fruit_ninja.gif">Fruit Ninja</a></li>
|
||||
<li><a href="#"><img src="images/clonelab.gif">Clonelab</a></li>
|
||||
<li><a href="#"><img src="images/gravity_duck.png">Gravity Duck</a></li>
|
||||
<li><a href="#"><img src="images/calcraft.gif">Calcraft</a></li>
|
||||
</ul>
|
||||
|
||||
<hr />
|
||||
<h3>Coup de cœur</h3>
|
||||
<ul>
|
||||
<li><a href="#"><img src="images/fruit_ninja.gif">Fruit Ninja</a></li>
|
||||
<li><a href="#"><img src="images/clonelab.gif">Clonelab</a></li>
|
||||
<li><a href="#"><img src="images/gravity_duck.png">Gravity Duck</a></li>
|
||||
<li><a href="#"><img src="images/calcraft.gif">Calcraft</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M12,3L1,9L12,15L21,10.09V17H23V9M5,13.18V17.18L12,21L19,17.18V13.18L12,17L5,13.18Z"></path>
|
||||
</svg>
|
||||
Tutoriels
|
||||
</h2>
|
||||
<a href="#">Basic Casio</a>
|
||||
<a href="#">C/C++ Casio</a>
|
||||
<a href="#">Arduino</a>
|
||||
<hr>
|
||||
<a href="#">Foire aux questions (FAQ)</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M20.71,4.63L19.37,3.29C19,2.9 18.35,2.9 17.96,3.29L9,12.25L11.75,15L20.71,6.04C21.1,5.65 21.1,5 20.71,4.63M7,14A3,3 0 0,0 4,17C4,18.31 2.84,19 2,19C2.92,20.22 4.5,21 6,21A4,4 0 0,0 10,17A3,3 0 0,0 7,14Z"></path>
|
||||
</svg>
|
||||
Sprites
|
||||
</h2>
|
||||
<a href="#">Personnages</a>
|
||||
<a href="#">Environnement</a>
|
||||
<a href="#">Objets</a>
|
||||
<a href="#">Interfaces</a>
|
||||
<a href="#">Générateur</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M22.7,19L13.6,9.9C14.5,7.6 14,4.9 12.1,3C10.1,1 7.1,0.6 4.7,1.7L9,6L6,9L1.6,4.7C0.4,7.1 0.9,10.1 2.9,12.1C4.8,14 7.5,14.5 9.8,13.6L18.9,22.7C19.3,23.1 19.9,23.1 20.3,22.7L22.6,20.4C23.1,20 23.1,19.3 22.7,19Z"></path>
|
||||
</svg>
|
||||
Outils
|
||||
</h2>
|
||||
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M2.6,10.59L8.38,4.8L10.07,6.5C9.83,7.35 10.22,8.28 11,8.73V14.27C10.4,14.61 10,15.26 10,16A2,2 0 0,0 12,18A2,2 0 0,0 14,16C14,15.26 13.6,14.61 13,14.27V9.41L15.07,11.5C15,11.65 15,11.82 15,12A2,2 0 0,0 17,14A2,2 0 0,0 19,12A2,2 0 0,0 17,10C16.82,10 16.65,10 16.5,10.07L13.93,7.5C14.19,6.57 13.71,5.55 12.78,5.16C12.35,5 11.9,4.96 11.5,5.07L9.8,3.38L10.59,2.6C11.37,1.81 12.63,1.81 13.41,2.6L21.4,10.59C22.19,11.37 22.19,12.63 21.4,13.41L13.41,21.4C12.63,22.19 11.37,22.19 10.59,21.4L2.6,13.41C1.81,12.63 1.81,11.37 2.6,10.59Z"></path>
|
||||
</svg>
|
||||
Forge GitLab
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M14.97,18.95L12.41,12.92C11.39,14.91 10.27,17 9.31,18.95C9.3,18.96 8.84,18.95 8.84,18.95C7.37,15.5 5.85,12.1 4.37,8.68C4.03,7.84 2.83,6.5 2,6.5C2,6.4 2,6.18 2,6.05H7.06V6.5C6.46,6.5 5.44,6.9 5.7,7.55C6.42,9.09 8.94,15.06 9.63,16.58C10.1,15.64 11.43,13.16 12,12.11C11.55,11.23 10.13,7.93 9.71,7.11C9.39,6.57 8.58,6.5 7.96,6.5C7.96,6.35 7.97,6.25 7.96,6.06L12.42,6.07V6.47C11.81,6.5 11.24,6.71 11.5,7.29C12.1,8.53 12.45,9.42 13,10.57C13.17,10.23 14.07,8.38 14.5,7.41C14.76,6.76 14.37,6.5 13.29,6.5C13.3,6.38 13.3,6.17 13.3,6.07C14.69,6.06 16.78,6.06 17.15,6.05V6.47C16.44,6.5 15.71,6.88 15.33,7.46L13.5,11.3C13.68,11.81 15.46,15.76 15.65,16.2L19.5,7.37C19.2,6.65 18.34,6.5 18,6.5C18,6.37 18,6.2 18,6.05L22,6.08V6.1L22,6.5C21.12,6.5 20.57,7 20.25,7.75C19.45,9.54 17,15.24 15.4,18.95C15.4,18.95 14.97,18.95 14.97,18.95Z"></path>
|
||||
</svg>
|
||||
Casio Universal Wiki
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M19,8L15,12H18A6,6 0 0,1 12,18C11,18 10.03,17.75 9.2,17.3L7.74,18.76C8.97,19.54 10.43,20 12,20A8,8 0 0,0 20,12H23M6,12A6,6 0 0,1 12,6C13,6 13.97,6.25 14.8,6.7L16.26,5.24C15.03,4.46 13.57,4 12,4A8,8 0 0,0 4,12H1L5,16L9,12"></path>
|
||||
</svg>
|
||||
SH4 Compatibility Tool
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div id="container">
|
||||
<header>
|
||||
<form>
|
||||
<input type="search" placeholder="Recherche" />
|
||||
<a role="button" onclick="this.parentNode.submit();" href="#" class="light-hidden">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#adb0b4"d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</form>
|
||||
|
||||
<!--<h1>Planète Casio</h1>-->
|
||||
|
||||
<div id="spotlight">
|
||||
<a href="#">Concours</a>
|
||||
<a href="#">Jeu du mois</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- {% block content %} -->
|
||||
|
||||
<div id="info-dev" style="margin: 20px 5% 0 5%; padding: 0 10px; background: #ffffff; border: 1px solid #cccccc; font-size: 14px;">
|
||||
<p>Concernant les alertes, cliquer sur "Masquer" enregistre un cookie pour une heure, ce qui bloque le réaffichage de l'alerte. Cliquer autre part fait disparaître l'alerte sans mettre le cookie, donc au prochain rechargement de la page celle-ci réapparaîtra.</p>
|
||||
<p>Au niveau du menu, vous préférez une ouverture type <input type="button" onclick="setAnimation('A');" value="A" style="padding:0 4px;"> ou plutôt de type <input type="button" onclick="setAnimation('B');" value="B" style="padding:0 4px;"> ?</p>
|
||||
<p>La shout est en cours de conception, merci d'être indulgent x)</p>
|
||||
<p><strong>Merci de me faire parvenir vos commentaires</strong> soit via la shout de Planète Casio, soit par mail à <em>l.gatin@protonmail.com</em> (précisez que ça concerne la v5 dans l'en-tête).</p>
|
||||
Bien entendu ce paragraphe n'apparaitra pas dans la v5 (cliquez <a href="#" onclick="document.getElementById('info-dev').style.display='none'">ici</a> pour faire disparaitre).
|
||||
</div>
|
||||
|
||||
<div id="shoutbox">
|
||||
<div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
</div>
|
||||
<input type="text" />
|
||||
</div>
|
||||
|
||||
<section>
|
||||
Forum
|
||||
</section>
|
||||
<!-- {% end block content %} -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>Planète Casio est un site communautaire indépendant, géré bénévolement et n'est donc pas affilié à Casio | Toute reproduction de Planète Casio, même partielle, est interdite.</p>
|
||||
<p>Les fichiers, programmes et autres publications présents sur Planète Casio restent la propriété de leurs auteurs respectifs et peuvent être soumis à des licences ou des copyrights.</p>
|
||||
<p>CASIO est une marque déposée par CASIO Computer Co., Ltd.</p>
|
||||
</footer>
|
||||
|
||||
<div class="alert ok" style="top: 25px;" onclick="close_important(this)">
|
||||
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
|
||||
<path fill="#727272" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M11,16.5L6.5,12L7.91,10.59L11,13.67L16.59,8.09L18,9.5L11,16.5Z"></path>
|
||||
</svg>
|
||||
<span>
|
||||
Votre message a bien été posté.
|
||||
</span>
|
||||
<input type="button" class="flat" value="MASQUER" onclick="setCookie('pc_notif', 'true');"></input>
|
||||
</div>
|
||||
<!--<div class="alert error" style="top: 95px;" onclick="close_important(this)">
|
||||
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
|
||||
<path fill="#727272" d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"></path>
|
||||
</svg>
|
||||
<span>
|
||||
Holy shit! Ceci est un grave problème ! Il faut s'en occuper dès que possible.
|
||||
</span>
|
||||
<input type="button" class="flat" value="MASQUER" onclick="setCookie('pc_notif_2', 'true');"></input>
|
||||
</div>-->
|
||||
</body>
|
||||
|
||||
<script type="text/javascript" src="scripts/trigger_menu.js"></script>
|
||||
<script type="text/javascript" src="scripts/smartphone_patch.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
function setCookie(name, value) {
|
||||
var end = new Date();
|
||||
end.setTime( end.getTime() + 3600 * 1000 );
|
||||
var str=name+"="+escape(value)+"; expires="+end.toGMTString()+"; path=/";
|
||||
document.cookie = str;
|
||||
}
|
||||
function getCookie(name) {
|
||||
var debut = document.cookie.indexOf(name);
|
||||
if( debut == -1 ) return null;
|
||||
var end = document.cookie.indexOf( ";", debut+name.length+1 );
|
||||
if( end == -1 ) end = document.cookie.length;
|
||||
return unescape( document.cookie.substring( debut+name.length+1, end ) );
|
||||
}
|
||||
|
||||
if(getCookie('pc_notif') == 'true')
|
||||
document.getElementsByClassName('alert')[0].parentNode.removeChild(document.getElementsByClassName('alert')[0]);
|
||||
if(getCookie('pc_notif_2') == 'true')
|
||||
document.getElementsByClassName('alert')[0].parentNode.removeChild(document.getElementsByClassName('alert')[0]);
|
||||
|
||||
function close_important(element) {
|
||||
element.style.opacity = 0;
|
||||
setTimeout(function(){ element.parentNode.removeChild(element); }, 200);
|
||||
}
|
||||
|
||||
|
||||
function setAnimation(anim) {
|
||||
var menu = document.getElementById('menu')
|
||||
|
||||
switch(anim) {
|
||||
case 'A':
|
||||
menu.classList.add('scroll-animation');
|
||||
menu.classList.remove('left-to-right-animation');
|
||||
break;
|
||||
case 'B':
|
||||
menu.classList.remove('scroll-animation');
|
||||
menu.classList.add('left-to-right-animation');
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,418 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr-FR">
|
||||
<head>
|
||||
<title>Planète Casio : design template</title>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href="css/global.css">
|
||||
<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href="css/navbar.css">
|
||||
<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href="css/container.css">
|
||||
<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href="css/responsive.css">
|
||||
|
||||
<link rel="stylesheet" media="all and (max-width: 699px)" type="text/css" href="css/light.css">
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<ul id="light-menu">
|
||||
<a id="logo" href="#">
|
||||
<img src="images/logo_noshadow.png" alt="logo"/>
|
||||
</a>
|
||||
|
||||
<li>
|
||||
<a role="button" label="Compte" tabindex="0">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"></path>
|
||||
</svg>
|
||||
<div>Compte</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a role="button" label="Actualités" tabindex="0">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M20,11H4V8H20M20,15H13V13H20M20,19H13V17H20M11,19H4V13H11M20.33,4.67L18.67,3L17,4.67L15.33,3L13.67,4.67L12,3L10.33,4.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V3L20.33,4.67Z"></path>
|
||||
</svg>
|
||||
<div>Actualités</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a role="button" label="Forum" tabindex="0">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M17,12V3A1,1 0 0,0 16,2H3A1,1 0 0,0 2,3V17L6,13H16A1,1 0 0,0 17,12M21,6H19V15H6V17A1,1 0 0,0 7,18H18L22,22V7A1,1 0 0,0 21,6Z"></path>
|
||||
</svg>
|
||||
<div>Forum</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a role="button" label="Programmes" tabindex="0">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M8,3A2,2 0 0,0 6,5V9A2,2 0 0,1 4,11H3V13H4A2,2 0 0,1 6,15V19A2,2 0 0,0 8,21H10V19H8V14A2,2 0 0,0 6,12A2,2 0 0,0 8,10V5H10V3M16,3A2,2 0 0,1 18,5V9A2,2 0 0,0 20,11H21V13H20A2,2 0 0,0 18,15V19A2,2 0 0,1 16,21H14V19H16V14A2,2 0 0,1 18,12A2,2 0 0,1 16,10V5H14V3H16Z"></path>
|
||||
</svg>
|
||||
<div>Programmes</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a role="button" label="Tutoriels" tabindex="0">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M12,3L1,9L12,15L21,10.09V17H23V9M5,13.18V17.18L12,21L19,17.18V13.18L12,17L5,13.18Z"></path>
|
||||
</svg>
|
||||
<div>Tutoriels</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a role="button" label="Sprites" tabindex="0">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M20.71,4.63L19.37,3.29C19,2.9 18.35,2.9 17.96,3.29L9,12.25L11.75,15L20.71,6.04C21.1,5.65 21.1,5 20.71,4.63M7,14A3,3 0 0,0 4,17C4,18.31 2.84,19 2,19C2.92,20.22 4.5,21 6,21A4,4 0 0,0 10,17A3,3 0 0,0 7,14Z"></path>
|
||||
</svg>
|
||||
<div>Sprites</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#" label="Outils">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M22.7,19L13.6,9.9C14.5,7.6 14,4.9 12.1,3C10.1,1 7.1,0.6 4.7,1.7L9,6L6,9L1.6,4.7C0.4,7.1 0.9,10.1 2.9,12.1C4.8,14 7.5,14.5 9.8,13.6L18.9,22.7C19.3,23.1 19.9,23.1 20.3,22.7L22.6,20.4C23.1,20 23.1,19.3 22.7,19Z"></path>
|
||||
</svg>
|
||||
<div>Outils</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div id="menu">
|
||||
<!-- {% if user.is_authenticated %}
|
||||
<div>
|
||||
<h2>
|
||||
<img src="images/3864.png">
|
||||
Dark Storm
|
||||
</h2>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M20,2A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H6L2,22V4C2,2.89 2.9,2 4,2H20M4,4V17.17L5.17,16H20V4H4M6,7H18V9H6V7M6,11H15V13H6V11Z"></path>
|
||||
</svg>
|
||||
Notifications
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M2,2V11C2,12 3,13 4,13H6.2C6.6,15 7.9,16.7 11,17V19.1C8.8,19.3 8,20.4 8,21.7V22H16V21.7C16,20.4 15.2,19.3 13,19.1V17C16.1,16.7 17.4,15 17.8,13H20C21,13 22,12 22,11V2H18C17.1,2 16,3 16,4H8C8,3 6.9,2 6,2H2M4,4H6V6L6,11H4V4M18,4H20V11H18V6L18,4M8,6H16V11.5C16,13.43 15.42,15 12,15C8.59,15 8,13.43 8,11.5V6Z"></path>
|
||||
</svg>
|
||||
Trophées
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"></path>
|
||||
</svg>
|
||||
Topics favoris
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M3,1H19A1,1 0 0,1 20,2V6A1,1 0 0,1 19,7H3A1,1 0 0,1 2,6V2A1,1 0 0,1 3,1M3,9H19A1,1 0 0,1 20,10V10.67L17.5,9.56L11,12.44V15H3A1,1 0 0,1 2,14V10A1,1 0 0,1 3,9M3,17H11C11.06,19.25 12,21.4 13.46,23H3A1,1 0 0,1 2,22V18A1,1 0 0,1 3,17M8,5H9V3H8V5M8,13H9V11H8V13M8,21H9V19H8V21M4,3V5H6V3H4M4,11V13H6V11H4M4,19V21H6V19H4M17.5,12L22,14V17C22,19.78 20.08,22.37 17.5,23C14.92,22.37 13,19.78 13,17V14L17.5,12M17.5,13.94L15,15.06V17.72C15,19.26 16.07,20.7 17.5,21.06V13.94Z"></path>
|
||||
</svg>
|
||||
Panel d'administration
|
||||
</a>
|
||||
|
||||
<hr />
|
||||
|
||||
<a href="account.html">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"></path>
|
||||
</svg>
|
||||
Paramètres
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M17,17.25V14H10V10H17V6.75L22.25,12L17,17.25M13,2A2,2 0 0,1 15,4V8H13V4H4V20H13V16H15V20A2,2 0 0,1 13,22H4A2,2 0 0,1 2,20V4A2,2 0 0,1 4,2H13Z"></path>
|
||||
</svg>
|
||||
Déconnexion
|
||||
</a>
|
||||
</div>
|
||||
{% else %} -->
|
||||
<div>
|
||||
<h2>
|
||||
Invité
|
||||
</h2>
|
||||
<form class="login">
|
||||
<input type="text" placeholder="Indentifiant">
|
||||
<input type="password" placeholder="Mot de passe">
|
||||
</form>
|
||||
<a href="#">Inscription</a>
|
||||
</div>
|
||||
<!-- {% endif %} -->
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M20,11H4V8H20M20,15H13V13H20M20,19H13V17H20M11,19H4V13H11M20.33,4.67L18.67,3L17,4.67L15.33,3L13.67,4.67L12,3L10.33,4.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V3L20.33,4.67Z"></path>
|
||||
</svg>
|
||||
Actualités
|
||||
</h2>
|
||||
<a href="#">Casio</a>
|
||||
<a href="#">Arduino</a>
|
||||
<a href="#">Projets communautaires</a>
|
||||
<a href="#">Divers</a>
|
||||
|
||||
<hr />
|
||||
|
||||
<h3>Derniers articles</h3>
|
||||
<ul>
|
||||
<li><a href="#">Un nouvel OS pour les Graph 75</a></li>
|
||||
<li><a href="#">Les 7 Days CPC arrivent bientôt</a></li>
|
||||
<li><a href="#">Résultats de jeu du mois de Février 2017</a></li>
|
||||
<li><a href="#">Test du shield relai Sainsmart pour Arduino</a></li>
|
||||
<li><a href="#">Un nouveau tutoriel sur le C-engine</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M17,12V3A1,1 0 0,0 16,2H3A1,1 0 0,0 2,3V17L6,13H16A1,1 0 0,0 17,12M21,6H19V15H6V17A1,1 0 0,0 7,18H18L22,22V7A1,1 0 0,0 21,6Z"></path>
|
||||
</svg>
|
||||
Forum
|
||||
</h2>
|
||||
<a href="#">Vie communautaire</a>
|
||||
<a href="#">Projets de programmation</a>
|
||||
<a href="#">Questions et problèmes</a>
|
||||
<a href="#">Discussions</a>
|
||||
<a href="#">Administration</a>
|
||||
<a href="#">CreativeCalc</a>
|
||||
|
||||
<hr />
|
||||
|
||||
<h3>Derniers commentaires</h3>
|
||||
<ul>
|
||||
<li><a href="#">Legolas</a> sur <a href="#">Bugs de la v5</a></li>
|
||||
<li><a href="#">Dark Storm</a> sur <a href="#">fxSDK support</a></li>
|
||||
<li><a href="#">Gollum</a> sur <a href="#">Le nom de topic qui fout le bordel car il est trop long…</a></li>
|
||||
<li><a href="#">Lephenixnoir</a> sur <a href="#">fxSDK support</a></li>
|
||||
<li><a href="#">Kristaba</a> sur <a href="#">FiXos, le retour</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M8,3A2,2 0 0,0 6,5V9A2,2 0 0,1 4,11H3V13H4A2,2 0 0,1 6,15V19A2,2 0 0,0 8,21H10V19H8V14A2,2 0 0,0 6,12A2,2 0 0,0 8,10V5H10V3M16,3A2,2 0 0,1 18,5V9A2,2 0 0,0 20,11H21V13H20A2,2 0 0,0 18,15V19A2,2 0 0,1 16,21H14V19H16V14A2,2 0 0,1 18,12A2,2 0 0,1 16,10V5H14V3H16Z"></path>
|
||||
</svg>
|
||||
Programmes
|
||||
</h2>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M7,6H17A6,6 0 0,1 23,12A6,6 0 0,1 17,18C15.22,18 13.63,17.23 12.53,16H11.47C10.37,17.23 8.78,18 7,18A6,6 0 0,1 1,12A6,6 0 0,1 7,6M6,9V11H4V13H6V15H8V13H10V11H8V9H6M15.5,12A1.5,1.5 0 0,0 14,13.5A1.5,1.5 0 0,0 15.5,15A1.5,1.5 0 0,0 17,13.5A1.5,1.5 0 0,0 15.5,12M18.5,9A1.5,1.5 0 0,0 17,10.5A1.5,1.5 0 0,0 18.5,12A1.5,1.5 0 0,0 20,10.5A1.5,1.5 0 0,0 18.5,9Z"></path>
|
||||
</svg>
|
||||
Jeux
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M19,19H5V8H19M19,3H18V1H16V3H8V1H6V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M16.53,11.06L15.47,10L10.59,14.88L8.47,12.76L7.41,13.82L10.59,17L16.53,11.06Z"></path>
|
||||
</svg>
|
||||
Utilitaires
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M21,16H3V4H21M21,2H3C1.89,2 1,2.89 1,4V16A2,2 0 0,0 3,18H10V20H8V22H16V20H14V18H21A2,2 0 0,0 23,16V4C23,2.89 22.1,2 21,2Z"></path>
|
||||
</svg>
|
||||
Logiciels
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"></path>
|
||||
</svg>
|
||||
Top 20
|
||||
</a>
|
||||
|
||||
<hr />
|
||||
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
|
||||
</svg>
|
||||
Recherche avancée
|
||||
</a>
|
||||
|
||||
<hr />
|
||||
|
||||
<h3>Sélection de la semaine</h3>
|
||||
<ul>
|
||||
<li><a href="#"><img src="images/fruit_ninja.gif">Fruit Ninja</a></li>
|
||||
<li><a href="#"><img src="images/clonelab.gif">Clonelab</a></li>
|
||||
<li><a href="#"><img src="images/gravity_duck.png">Gravity Duck</a></li>
|
||||
<li><a href="#"><img src="images/calcraft.gif">Calcraft</a></li>
|
||||
</ul>
|
||||
|
||||
<hr />
|
||||
<h3>Coup de cœur</h3>
|
||||
<ul>
|
||||
<li><a href="#"><img src="images/fruit_ninja.gif">Fruit Ninja</a></li>
|
||||
<li><a href="#"><img src="images/clonelab.gif">Clonelab</a></li>
|
||||
<li><a href="#"><img src="images/gravity_duck.png">Gravity Duck</a></li>
|
||||
<li><a href="#"><img src="images/calcraft.gif">Calcraft</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M12,3L1,9L12,15L21,10.09V17H23V9M5,13.18V17.18L12,21L19,17.18V13.18L12,17L5,13.18Z"></path>
|
||||
</svg>
|
||||
Tutoriels
|
||||
</h2>
|
||||
<a href="#">Basic Casio</a>
|
||||
<a href="#">C/C++ Casio</a>
|
||||
<a href="#">Arduino</a>
|
||||
<hr>
|
||||
<a href="#">Foire aux questions (FAQ)</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M20.71,4.63L19.37,3.29C19,2.9 18.35,2.9 17.96,3.29L9,12.25L11.75,15L20.71,6.04C21.1,5.65 21.1,5 20.71,4.63M7,14A3,3 0 0,0 4,17C4,18.31 2.84,19 2,19C2.92,20.22 4.5,21 6,21A4,4 0 0,0 10,17A3,3 0 0,0 7,14Z"></path>
|
||||
</svg>
|
||||
Sprites
|
||||
</h2>
|
||||
<a href="#">Personnages</a>
|
||||
<a href="#">Environnement</a>
|
||||
<a href="#">Objets</a>
|
||||
<a href="#">Interfaces</a>
|
||||
<a href="#">Générateur</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M22.7,19L13.6,9.9C14.5,7.6 14,4.9 12.1,3C10.1,1 7.1,0.6 4.7,1.7L9,6L6,9L1.6,4.7C0.4,7.1 0.9,10.1 2.9,12.1C4.8,14 7.5,14.5 9.8,13.6L18.9,22.7C19.3,23.1 19.9,23.1 20.3,22.7L22.6,20.4C23.1,20 23.1,19.3 22.7,19Z"></path>
|
||||
</svg>
|
||||
Outils
|
||||
</h2>
|
||||
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M2.6,10.59L8.38,4.8L10.07,6.5C9.83,7.35 10.22,8.28 11,8.73V14.27C10.4,14.61 10,15.26 10,16A2,2 0 0,0 12,18A2,2 0 0,0 14,16C14,15.26 13.6,14.61 13,14.27V9.41L15.07,11.5C15,11.65 15,11.82 15,12A2,2 0 0,0 17,14A2,2 0 0,0 19,12A2,2 0 0,0 17,10C16.82,10 16.65,10 16.5,10.07L13.93,7.5C14.19,6.57 13.71,5.55 12.78,5.16C12.35,5 11.9,4.96 11.5,5.07L9.8,3.38L10.59,2.6C11.37,1.81 12.63,1.81 13.41,2.6L21.4,10.59C22.19,11.37 22.19,12.63 21.4,13.41L13.41,21.4C12.63,22.19 11.37,22.19 10.59,21.4L2.6,13.41C1.81,12.63 1.81,11.37 2.6,10.59Z"></path>
|
||||
</svg>
|
||||
Forge GitLab
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M14.97,18.95L12.41,12.92C11.39,14.91 10.27,17 9.31,18.95C9.3,18.96 8.84,18.95 8.84,18.95C7.37,15.5 5.85,12.1 4.37,8.68C4.03,7.84 2.83,6.5 2,6.5C2,6.4 2,6.18 2,6.05H7.06V6.5C6.46,6.5 5.44,6.9 5.7,7.55C6.42,9.09 8.94,15.06 9.63,16.58C10.1,15.64 11.43,13.16 12,12.11C11.55,11.23 10.13,7.93 9.71,7.11C9.39,6.57 8.58,6.5 7.96,6.5C7.96,6.35 7.97,6.25 7.96,6.06L12.42,6.07V6.47C11.81,6.5 11.24,6.71 11.5,7.29C12.1,8.53 12.45,9.42 13,10.57C13.17,10.23 14.07,8.38 14.5,7.41C14.76,6.76 14.37,6.5 13.29,6.5C13.3,6.38 13.3,6.17 13.3,6.07C14.69,6.06 16.78,6.06 17.15,6.05V6.47C16.44,6.5 15.71,6.88 15.33,7.46L13.5,11.3C13.68,11.81 15.46,15.76 15.65,16.2L19.5,7.37C19.2,6.65 18.34,6.5 18,6.5C18,6.37 18,6.2 18,6.05L22,6.08V6.1L22,6.5C21.12,6.5 20.57,7 20.25,7.75C19.45,9.54 17,15.24 15.4,18.95C15.4,18.95 14.97,18.95 14.97,18.95Z"></path>
|
||||
</svg>
|
||||
Casio Universal Wiki
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M19,8L15,12H18A6,6 0 0,1 12,18C11,18 10.03,17.75 9.2,17.3L7.74,18.76C8.97,19.54 10.43,20 12,20A8,8 0 0,0 20,12H23M6,12A6,6 0 0,1 12,6C13,6 13.97,6.25 14.8,6.7L16.26,5.24C15.03,4.46 13.57,4 12,4A8,8 0 0,0 4,12H1L5,16L9,12"></path>
|
||||
</svg>
|
||||
SH4 Compatibility Tool
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div id="container">
|
||||
<header>
|
||||
<form>
|
||||
<input type="search" placeholder="Recherche" />
|
||||
<a role="button" onclick="this.parentNode.submit();" href="#" class="light-hidden">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#adb0b4"d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</form>
|
||||
|
||||
<div id="spotlight">
|
||||
<a href="#">Concours</a>
|
||||
<a href="#">Jeu du mois</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- {% block content %} -->
|
||||
<article>
|
||||
<h1>Informations sur le développement</h1>
|
||||
<div>
|
||||
<p>Tous les onglets sont fonctionnels, cliquez sur une icone pour afficher, sur une autre pour modifier, deux fois de suite pour fermer. Sinon cliquez à coté.</p>
|
||||
<p>Les onglets Tutoriels et Sprites ne sont pas encore remplis, c'est normal qu'ils fassent un peu vide. L'avantage de ce menu est qu'on peut le remplir comme on veut, dans le pire des cas ça déclenche le scrolling (c'est pas exemple le cas pour l'onglet "Programmes", qui est beaucoup trop rempli). \o/</p>
|
||||
<p>Le header contient une barre de recherche ainsi que des liens de type "spotlight" : ils servent à mettre en valeur un évènement ou une partie du site. On peut bien évidemment remplacer par autre chose, mais je trouvais que cela était intéressant de pouvoir attirer l'attention de cette manière.</p>
|
||||
<p><strong>Ne faites pas attention au contenu principal de la page, il n'est absolument pas définitif !</strong> De même pour le positionnement des alertes. Toutefois, à part les entrées des sous-menus, ceux-ci sont en version quasi‑finale.</p>
|
||||
<p><strong>Nous sommes ouverts à toute suggestion et amélioration !</strong> Si vous souhaitez participer au développement du site, n'hésitez pas à nous contacter à l'adresse suivante : <a href="mailto:contact@planet-casio.com">contact@planet-casio.com</a>. N'oubliez pas de préciser « [v5] » dans l'en-tête pour que nous puissions facilement traiter le message. Vous pouvez aussi ajouter des fichiers, tels que des exemples de html/css, des schémas d'organisation, ou encore des captures d'écran en cas de problème d'affichage. <strong>Dans le cas où vous signalez un bug, merci de préciser :</strong>
|
||||
<ul>
|
||||
<li>votre plateforme (PC, tablette ou smartphone)</li>
|
||||
<li>votre système d'exploitation (nom et version)</li>
|
||||
<li>votre navigateur (nom et version)</li>
|
||||
<li>la taille de votre écran en pixel (pour les smartphones, essayez d'ajouter le viewport correspondant)</li>
|
||||
<li>le problème rencontré</li>
|
||||
</ul>
|
||||
Merci pour votre participation !
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h1>Lorem ipsum</h1>
|
||||
<div>
|
||||
<p>Etiam ut metus mollis, molestie leo vel, finibus orci. Praesent in orci diam. Nullam laoreet rutrum elit, id luctus neque. Integer egestas, leo ut porta sodales, lacus enim sollicitudin risus, congue pharetra est dui ac arcu. Nunc egestas eu erat vitae volutpat. In non lorem cursus, viverra nisl vel, feugiat sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc lacinia, nibh vel vulputate aliquam, nunc diam blandit massa, vel imperdiet velit ante eget ligula. Suspendisse vestibulum purus quis ligula cursus semper. Quisque efficitur ultrices dignissim.</p>
|
||||
<p>Maecenas vel mauris ligula. Proin faucibus, magna eget euismod ullamcorper, felis risus hendrerit dui, in ultrices nunc tortor at nulla. Mauris eu pharetra ligula. Aliquam at arcu leo. Donec ipsum felis, tristique nec bibendum nec, bibendum ut nisi. In hac habitasse platea dictumst. Duis in ante magna. Sed lacinia suscipit enim vitae tempus. Mauris porta orci at tortor faucibus, a volutpat ligula imperdiet. Cras nisi ex, consectetur in orci at, sollicitudin faucibus quam. Fusce eget leo accumsan, dictum nunc et, sodales nisl.</p>
|
||||
<p>Nullam ut purus suscipit, elementum magna quis, molestie lorem. Integer erat dui, pellentesque nec odio dignissim, semper elementum nunc. Aenean nec tristique ex, et vehicula dolor. Quisque quis urna ut sapien tristique placerat. Nunc pellentesque tincidunt leo eu porta. Maecenas sollicitudin ullamcorper diam, vel ultricies elit. Praesent lorem risus, ornare eu malesuada vitae, accumsan in lacus.</p>
|
||||
<p>Vivamus at tortor vel arcu scelerisque interdum a et sem. Morbi pellentesque, velit quis malesuada fringilla, risus turpis mollis magna, et mattis arcu orci sit amet mauris. Donec ac tincidunt ipsum. Mauris at quam sit amet nibh varius auctor. In dictum dui sed justo semper tempor. Vivamus vitae sem id nibh vulputate tincidunt. Praesent quis finibus metus. Nulla at imperdiet ex. Suspendisse potenti. Nullam nec tortor sapien. Vestibulum bibendum enim vel lectus cursus, id fringilla sapien malesuada. Sed vitae tellus eu lectus laoreet malesuada at nec dui. Mauris varius, purus at scelerisque accumsan, turpis magna vehicula diam, a suscipit erat metus at diam.</p>
|
||||
<p>Aenean mattis in leo viverra rutrum. Etiam et nulla in ipsum ornare consectetur. Quisque bibendum, metus nec ultrices efficitur, dui risus rhoncus lectus, a imperdiet nibh elit ut ipsum. Quisque convallis lacus elementum dolor dignissim sollicitudin. Maecenas dapibus dolor quis tellus imperdiet, hendrerit vestibulum lacus tempor. Nam quis risus non nulla euismod semper. Suspendisse commodo aliquam aliquet. Nullam nec varius felis. Nullam velit erat, interdum ac vehicula nec, efficitur in enim. Morbi sodales ante quis nunc vehicula, non eleifend lacus congue. Maecenas a imperdiet nunc.</p>
|
||||
</div>
|
||||
</article>
|
||||
<!-- {% endblock %} -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <div class="alert ok" style="top: 25px;" onclick="close_important(this)">
|
||||
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
|
||||
<path fill="#727272" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M11,16.5L6.5,12L7.91,10.59L11,13.67L16.59,8.09L18,9.5L11,16.5Z"></path>
|
||||
</svg>
|
||||
<span>
|
||||
Votre message a bien été posté.
|
||||
</span>
|
||||
<input type="button" class="flat" value="MASQUER" onclick="setCookie('pc_notif', 'true');"></input>
|
||||
</div>
|
||||
<div class="alert error" style="top: 95px;" onclick="close_important(this)">
|
||||
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
|
||||
<path fill="#727272" d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"></path>
|
||||
</svg>
|
||||
<span>
|
||||
Holy shit! Ceci est un grave problème ! Il faut s'en occuper dès que possible.
|
||||
</span>
|
||||
<input type="button" class="flat" value="MASQUER" onclick="setCookie('pc_notif_2', 'true');"></input>
|
||||
</div> -->
|
||||
</body>
|
||||
|
||||
<script type="text/javascript" src="scripts/trigger_menu.js"></script>
|
||||
<script type="text/javascript" src="scripts/smartphone_patch.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
function setCookie(name, value) {
|
||||
var end = new Date();
|
||||
end.setTime( end.getTime() + 3600 * 1000 );
|
||||
var str=name+"="+escape(value)+"; expires="+end.toGMTString()+"; path=/";
|
||||
document.cookie = str;
|
||||
}
|
||||
function getCookie(name) {
|
||||
var debut = document.cookie.indexOf(name);
|
||||
if( debut == -1 ) return null;
|
||||
var end = document.cookie.indexOf( ";", debut+name.length+1 );
|
||||
if( end == -1 ) end = document.cookie.length;
|
||||
return unescape( document.cookie.substring( debut+name.length+1, end ) );
|
||||
}
|
||||
|
||||
if(getCookie('pc_notif') == 'true')
|
||||
document.getElementsByClassName('alert')[0].parentNode.removeChild(document.getElementsByClassName('alert')[0]);
|
||||
if(getCookie('pc_notif_2') == 'true')
|
||||
document.getElementsByClassName('alert')[0].parentNode.removeChild(document.getElementsByClassName('alert')[0]);
|
||||
|
||||
function close_important(element) {
|
||||
element.style.opacity = 0;
|
||||
setTimeout(function(){ element.parentNode.removeChild(element); }, 200);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,609 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr-FR">
|
||||
<head>
|
||||
<title>Planète Casio : design template</title>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href="css/global.css">
|
||||
<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href="css/navbar.css">
|
||||
<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href="css/shoutbox.css">
|
||||
<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href="css/container.css">
|
||||
<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href="css/responsive.css">
|
||||
<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href="css/homepage.css">
|
||||
|
||||
<link rel="stylesheet" media="all and (max-width: 699px)" type="text/css" href="css/light.css">
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<ul id="light-menu">
|
||||
<a id="logo" href="#">
|
||||
<img src="images/logo_noshadow.png" alt="logo"/>
|
||||
</a>
|
||||
|
||||
<li>
|
||||
<a role="button" label="Compte" tabindex="0">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"></path>
|
||||
</svg>
|
||||
<div>Compte</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a role="button" label="Actualités" tabindex="0">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M20,11H4V8H20M20,15H13V13H20M20,19H13V17H20M11,19H4V13H11M20.33,4.67L18.67,3L17,4.67L15.33,3L13.67,4.67L12,3L10.33,4.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V3L20.33,4.67Z"></path>
|
||||
</svg>
|
||||
<div>Actualités</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a role="button" label="Forum" tabindex="0">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M17,12V3A1,1 0 0,0 16,2H3A1,1 0 0,0 2,3V17L6,13H16A1,1 0 0,0 17,12M21,6H19V15H6V17A1,1 0 0,0 7,18H18L22,22V7A1,1 0 0,0 21,6Z"></path>
|
||||
</svg>
|
||||
<div>Forum</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a role="button" label="Programmes" tabindex="0">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M8,3A2,2 0 0,0 6,5V9A2,2 0 0,1 4,11H3V13H4A2,2 0 0,1 6,15V19A2,2 0 0,0 8,21H10V19H8V14A2,2 0 0,0 6,12A2,2 0 0,0 8,10V5H10V3M16,3A2,2 0 0,1 18,5V9A2,2 0 0,0 20,11H21V13H20A2,2 0 0,0 18,15V19A2,2 0 0,1 16,21H14V19H16V14A2,2 0 0,1 18,12A2,2 0 0,1 16,10V5H14V3H16Z"></path>
|
||||
</svg>
|
||||
<div>Programmes</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a role="button" label="Tutoriels" tabindex="0">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M12,3L1,9L12,15L21,10.09V17H23V9M5,13.18V17.18L12,21L19,17.18V13.18L12,17L5,13.18Z"></path>
|
||||
</svg>
|
||||
<div>Tutoriels</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a role="button" label="Sprites" tabindex="0">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M20.71,4.63L19.37,3.29C19,2.9 18.35,2.9 17.96,3.29L9,12.25L11.75,15L20.71,6.04C21.1,5.65 21.1,5 20.71,4.63M7,14A3,3 0 0,0 4,17C4,18.31 2.84,19 2,19C2.92,20.22 4.5,21 6,21A4,4 0 0,0 10,17A3,3 0 0,0 7,14Z"></path>
|
||||
</svg>
|
||||
<div>Sprites</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#" label="Outils">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M22.7,19L13.6,9.9C14.5,7.6 14,4.9 12.1,3C10.1,1 7.1,0.6 4.7,1.7L9,6L6,9L1.6,4.7C0.4,7.1 0.9,10.1 2.9,12.1C4.8,14 7.5,14.5 9.8,13.6L18.9,22.7C19.3,23.1 19.9,23.1 20.3,22.7L22.6,20.4C23.1,20 23.1,19.3 22.7,19Z"></path>
|
||||
</svg>
|
||||
<div>Outils</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div id="menu">
|
||||
<!-- {% if user.is_authenticated %} -->
|
||||
<div>
|
||||
<h2>
|
||||
<img src="images/3864.png">
|
||||
Dark Storm
|
||||
</h2>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M20,2A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H6L2,22V4C2,2.89 2.9,2 4,2H20M4,4V17.17L5.17,16H20V4H4M6,7H18V9H6V7M6,11H15V13H6V11Z"></path>
|
||||
</svg>
|
||||
Notifications
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M2,2V11C2,12 3,13 4,13H6.2C6.6,15 7.9,16.7 11,17V19.1C8.8,19.3 8,20.4 8,21.7V22H16V21.7C16,20.4 15.2,19.3 13,19.1V17C16.1,16.7 17.4,15 17.8,13H20C21,13 22,12 22,11V2H18C17.1,2 16,3 16,4H8C8,3 6.9,2 6,2H2M4,4H6V6L6,11H4V4M18,4H20V11H18V6L18,4M8,6H16V11.5C16,13.43 15.42,15 12,15C8.59,15 8,13.43 8,11.5V6Z"></path>
|
||||
</svg>
|
||||
Trophées
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"></path>
|
||||
</svg>
|
||||
Topics favoris
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M3,1H19A1,1 0 0,1 20,2V6A1,1 0 0,1 19,7H3A1,1 0 0,1 2,6V2A1,1 0 0,1 3,1M3,9H19A1,1 0 0,1 20,10V10.67L17.5,9.56L11,12.44V15H3A1,1 0 0,1 2,14V10A1,1 0 0,1 3,9M3,17H11C11.06,19.25 12,21.4 13.46,23H3A1,1 0 0,1 2,22V18A1,1 0 0,1 3,17M8,5H9V3H8V5M8,13H9V11H8V13M8,21H9V19H8V21M4,3V5H6V3H4M4,11V13H6V11H4M4,19V21H6V19H4M17.5,12L22,14V17C22,19.78 20.08,22.37 17.5,23C14.92,22.37 13,19.78 13,17V14L17.5,12M17.5,13.94L15,15.06V17.72C15,19.26 16.07,20.7 17.5,21.06V13.94Z"></path>
|
||||
</svg>
|
||||
Panel d'administration
|
||||
</a>
|
||||
|
||||
<hr />
|
||||
|
||||
<a href="account.html">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"></path>
|
||||
</svg>
|
||||
Paramètres
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M17,17.25V14H10V10H17V6.75L22.25,12L17,17.25M13,2A2,2 0 0,1 15,4V8H13V4H4V20H13V16H15V20A2,2 0 0,1 13,22H4A2,2 0 0,1 2,20V4A2,2 0 0,1 4,2H13Z"></path>
|
||||
</svg>
|
||||
Déconnexion
|
||||
</a>
|
||||
</div>
|
||||
<!-- {% else %}
|
||||
<div>
|
||||
<h2>
|
||||
Invité
|
||||
</h2>
|
||||
<a href="#">Connexion</a>
|
||||
<a href="#">Inscription</a>
|
||||
</div>
|
||||
{% endif %} -->
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M20,11H4V8H20M20,15H13V13H20M20,19H13V17H20M11,19H4V13H11M20.33,4.67L18.67,3L17,4.67L15.33,3L13.67,4.67L12,3L10.33,4.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V3L20.33,4.67Z"></path>
|
||||
</svg>
|
||||
Actualités
|
||||
</h2>
|
||||
<a href="#">Casio</a>
|
||||
<a href="#">Arduino</a>
|
||||
<a href="#">Projets communautaires</a>
|
||||
<a href="#">Divers</a>
|
||||
|
||||
<hr />
|
||||
|
||||
<h3>Derniers articles</h3>
|
||||
<ul>
|
||||
<li><a href="#">Un nouvel OS pour les Graph 75</a></li>
|
||||
<li><a href="#">Les 7 Days CPC arrivent bientôt</a></li>
|
||||
<li><a href="#">Résultats de jeu du mois de Février 2017</a></li>
|
||||
<li><a href="#">Test du shield relai Sainsmart pour Arduino</a></li>
|
||||
<li><a href="#">Un nouveau tutoriel sur le C-engine</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M17,12V3A1,1 0 0,0 16,2H3A1,1 0 0,0 2,3V17L6,13H16A1,1 0 0,0 17,12M21,6H19V15H6V17A1,1 0 0,0 7,18H18L22,22V7A1,1 0 0,0 21,6Z"></path>
|
||||
</svg>
|
||||
Forum
|
||||
</h2>
|
||||
<a href="#">Vie communautaire</a>
|
||||
<a href="#">Projets de programmation</a>
|
||||
<a href="#">Questions et problèmes</a>
|
||||
<a href="#">Discussions</a>
|
||||
<a href="#">Administration</a>
|
||||
<a href="#">CreativeCalc</a>
|
||||
|
||||
<hr />
|
||||
|
||||
<h3>Derniers commentaires</h3>
|
||||
<ul>
|
||||
<li><a href="#">Legolas</a> sur <a href="#">Bugs de la v5</a></li>
|
||||
<li><a href="#">Dark Storm</a> sur <a href="#">fxSDK support</a></li>
|
||||
<li><a href="#">Gollum</a> sur <a href="#">Le nom de topic qui fout le bordel car il est trop long…</a></li>
|
||||
<li><a href="#">Lephenixnoir</a> sur <a href="#">fxSDK support</a></li>
|
||||
<li><a href="#">Kristaba</a> sur <a href="#">FiXos, le retour</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M8,3A2,2 0 0,0 6,5V9A2,2 0 0,1 4,11H3V13H4A2,2 0 0,1 6,15V19A2,2 0 0,0 8,21H10V19H8V14A2,2 0 0,0 6,12A2,2 0 0,0 8,10V5H10V3M16,3A2,2 0 0,1 18,5V9A2,2 0 0,0 20,11H21V13H20A2,2 0 0,0 18,15V19A2,2 0 0,1 16,21H14V19H16V14A2,2 0 0,1 18,12A2,2 0 0,1 16,10V5H14V3H16Z"></path>
|
||||
</svg>
|
||||
Programmes
|
||||
</h2>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M7,6H17A6,6 0 0,1 23,12A6,6 0 0,1 17,18C15.22,18 13.63,17.23 12.53,16H11.47C10.37,17.23 8.78,18 7,18A6,6 0 0,1 1,12A6,6 0 0,1 7,6M6,9V11H4V13H6V15H8V13H10V11H8V9H6M15.5,12A1.5,1.5 0 0,0 14,13.5A1.5,1.5 0 0,0 15.5,15A1.5,1.5 0 0,0 17,13.5A1.5,1.5 0 0,0 15.5,12M18.5,9A1.5,1.5 0 0,0 17,10.5A1.5,1.5 0 0,0 18.5,12A1.5,1.5 0 0,0 20,10.5A1.5,1.5 0 0,0 18.5,9Z"></path>
|
||||
</svg>
|
||||
Jeux
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M19,19H5V8H19M19,3H18V1H16V3H8V1H6V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M16.53,11.06L15.47,10L10.59,14.88L8.47,12.76L7.41,13.82L10.59,17L16.53,11.06Z"></path>
|
||||
</svg>
|
||||
Utilitaires
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M21,16H3V4H21M21,2H3C1.89,2 1,2.89 1,4V16A2,2 0 0,0 3,18H10V20H8V22H16V20H14V18H21A2,2 0 0,0 23,16V4C23,2.89 22.1,2 21,2Z"></path>
|
||||
</svg>
|
||||
Logiciels
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"></path>
|
||||
</svg>
|
||||
Top 20
|
||||
</a>
|
||||
|
||||
<hr />
|
||||
<form>
|
||||
<input type="text" name="quick-search" placeholder="Recherche rapide" />
|
||||
</form>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
|
||||
</svg>
|
||||
Recherche avancée
|
||||
</a>
|
||||
|
||||
<hr />
|
||||
|
||||
<h3>Sélection de la semaine</h3>
|
||||
<ul>
|
||||
<li><a href="#"><img src="images/fruit_ninja.gif">Fruit Ninja</a></li>
|
||||
<li><a href="#"><img src="images/clonelab.gif">Clonelab</a></li>
|
||||
<li><a href="#"><img src="images/gravity_duck.png">Gravity Duck</a></li>
|
||||
<li><a href="#"><img src="images/calcraft.gif">Calcraft</a></li>
|
||||
</ul>
|
||||
|
||||
<hr />
|
||||
<h3>Coup de cœur</h3>
|
||||
<ul>
|
||||
<li><a href="#"><img src="images/fruit_ninja.gif">Fruit Ninja</a></li>
|
||||
<li><a href="#"><img src="images/clonelab.gif">Clonelab</a></li>
|
||||
<li><a href="#"><img src="images/gravity_duck.png">Gravity Duck</a></li>
|
||||
<li><a href="#"><img src="images/calcraft.gif">Calcraft</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M12,3L1,9L12,15L21,10.09V17H23V9M5,13.18V17.18L12,21L19,17.18V13.18L12,17L5,13.18Z"></path>
|
||||
</svg>
|
||||
Tutoriels
|
||||
</h2>
|
||||
<a href="#">Basic Casio</a>
|
||||
<a href="#">C/C++ Casio</a>
|
||||
<a href="#">Arduino</a>
|
||||
<hr>
|
||||
<a href="#">Foire aux questions (FAQ)</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M20.71,4.63L19.37,3.29C19,2.9 18.35,2.9 17.96,3.29L9,12.25L11.75,15L20.71,6.04C21.1,5.65 21.1,5 20.71,4.63M7,14A3,3 0 0,0 4,17C4,18.31 2.84,19 2,19C2.92,20.22 4.5,21 6,21A4,4 0 0,0 10,17A3,3 0 0,0 7,14Z"></path>
|
||||
</svg>
|
||||
Sprites
|
||||
</h2>
|
||||
<a href="#">Personnages</a>
|
||||
<a href="#">Environnement</a>
|
||||
<a href="#">Objets</a>
|
||||
<a href="#">Interfaces</a>
|
||||
<a href="#">Générateur</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M22.7,19L13.6,9.9C14.5,7.6 14,4.9 12.1,3C10.1,1 7.1,0.6 4.7,1.7L9,6L6,9L1.6,4.7C0.4,7.1 0.9,10.1 2.9,12.1C4.8,14 7.5,14.5 9.8,13.6L18.9,22.7C19.3,23.1 19.9,23.1 20.3,22.7L22.6,20.4C23.1,20 23.1,19.3 22.7,19Z"></path>
|
||||
</svg>
|
||||
Outils
|
||||
</h2>
|
||||
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M2.6,10.59L8.38,4.8L10.07,6.5C9.83,7.35 10.22,8.28 11,8.73V14.27C10.4,14.61 10,15.26 10,16A2,2 0 0,0 12,18A2,2 0 0,0 14,16C14,15.26 13.6,14.61 13,14.27V9.41L15.07,11.5C15,11.65 15,11.82 15,12A2,2 0 0,0 17,14A2,2 0 0,0 19,12A2,2 0 0,0 17,10C16.82,10 16.65,10 16.5,10.07L13.93,7.5C14.19,6.57 13.71,5.55 12.78,5.16C12.35,5 11.9,4.96 11.5,5.07L9.8,3.38L10.59,2.6C11.37,1.81 12.63,1.81 13.41,2.6L21.4,10.59C22.19,11.37 22.19,12.63 21.4,13.41L13.41,21.4C12.63,22.19 11.37,22.19 10.59,21.4L2.6,13.41C1.81,12.63 1.81,11.37 2.6,10.59Z"></path>
|
||||
</svg>
|
||||
Forge GitLab
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M14.97,18.95L12.41,12.92C11.39,14.91 10.27,17 9.31,18.95C9.3,18.96 8.84,18.95 8.84,18.95C7.37,15.5 5.85,12.1 4.37,8.68C4.03,7.84 2.83,6.5 2,6.5C2,6.4 2,6.18 2,6.05H7.06V6.5C6.46,6.5 5.44,6.9 5.7,7.55C6.42,9.09 8.94,15.06 9.63,16.58C10.1,15.64 11.43,13.16 12,12.11C11.55,11.23 10.13,7.93 9.71,7.11C9.39,6.57 8.58,6.5 7.96,6.5C7.96,6.35 7.97,6.25 7.96,6.06L12.42,6.07V6.47C11.81,6.5 11.24,6.71 11.5,7.29C12.1,8.53 12.45,9.42 13,10.57C13.17,10.23 14.07,8.38 14.5,7.41C14.76,6.76 14.37,6.5 13.29,6.5C13.3,6.38 13.3,6.17 13.3,6.07C14.69,6.06 16.78,6.06 17.15,6.05V6.47C16.44,6.5 15.71,6.88 15.33,7.46L13.5,11.3C13.68,11.81 15.46,15.76 15.65,16.2L19.5,7.37C19.2,6.65 18.34,6.5 18,6.5C18,6.37 18,6.2 18,6.05L22,6.08V6.1L22,6.5C21.12,6.5 20.57,7 20.25,7.75C19.45,9.54 17,15.24 15.4,18.95C15.4,18.95 14.97,18.95 14.97,18.95Z"></path>
|
||||
</svg>
|
||||
Casio Universal Wiki
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M19,8L15,12H18A6,6 0 0,1 12,18C11,18 10.03,17.75 9.2,17.3L7.74,18.76C8.97,19.54 10.43,20 12,20A8,8 0 0,0 20,12H23M6,12A6,6 0 0,1 12,6C13,6 13.97,6.25 14.8,6.7L16.26,5.24C15.03,4.46 13.57,4 12,4A8,8 0 0,0 4,12H1L5,16L9,12"></path>
|
||||
</svg>
|
||||
SH4 Compatibility Tool
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div id="container">
|
||||
<header>
|
||||
<form>
|
||||
<input type="search" placeholder="Recherche" />
|
||||
<a role="button" onclick="this.parentNode.submit();" href="#" class="light-hidden">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#adb0b4"d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</form>
|
||||
|
||||
<!--<h1>Planète Casio</h1>-->
|
||||
|
||||
<div id="spotlight">
|
||||
<a href="#">Concours</a>
|
||||
<a href="#">Jeu du mois</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- {% block content %} -->
|
||||
<section class="home-title">
|
||||
<h1>Bienvenue sur <strong>Planète Casio</strong> !</h1>
|
||||
<p>Ceci est une petite description (à rédiger) de ce qu'est et propose Planète Casio. Pour le moment je vais juste mettre quelques infos relatives au développement du site. Bien entendu le paragraphe ci-dessous n'apparaitra pas dans la v5 (cliquez <a href="#" onclick="document.getElementById('info-dev').style.display='none'">ici</a> pour faire disparaitre).</p>
|
||||
</section>
|
||||
|
||||
<div id="info-dev" style="margin: 0 5%; padding: 0 10px; background: #ffffff; border: 1px solid #cccccc; font-size: 14px;">
|
||||
<p>Concernant les alertes, cliquer sur "Masquer" enregistre un cookie pour une heure, ce qui bloque le réaffichage de l'alerte. Cliquer autre part fait disparaître l'alerte sans mettre le cookie, donc au prochain rechargement de la page celle-ci réapparaîtra.</p>
|
||||
<p>Au niveau du menu, vous préférez une ouverture type <input type="button" onclick="setAnimation('A');" value="A" style="padding:0 4px;"> ou plutôt de type <input type="button" onclick="setAnimation('B');" value="B" style="padding:0 4px;"> ?</p>
|
||||
<p>La shout est en cours de conception, merci d'être indulgent x)</p>
|
||||
<p><strong>Merci de me faire parvenir vos commentaires</strong> soit via la shout de Planète Casio, soit par mail à <em>l.gatin@protonmail.com</em> (précisez que ça concerne la v5 dans l'en-tête).</p>
|
||||
</div>
|
||||
|
||||
<div id="shoutbox">
|
||||
<div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
</div>
|
||||
<input type="text" />
|
||||
</div>
|
||||
|
||||
<section class="home-pinned-content">
|
||||
<h1>☆ À la une</h1>
|
||||
<div>
|
||||
<article><a href="#">
|
||||
<img src="images/IPC.png">
|
||||
<div>
|
||||
<h2>Titre article</h2>
|
||||
<span>Article par <i>Dark Storm</i></span>
|
||||
</div>
|
||||
</a></article>
|
||||
|
||||
<article><a href="#">
|
||||
<img src="images/IPC.png">
|
||||
<div>
|
||||
<h2>Titre Article plutôt long pour voir comment ça évolue</h2>
|
||||
<span>Article par <i>Dark Storm</i></span>
|
||||
</div>
|
||||
</a></article>
|
||||
|
||||
<article><a href="#">
|
||||
<img src="images/IPC.png">
|
||||
<div>
|
||||
<h2>Titre Article</h2>
|
||||
<span>Article par <i>Dark Storm</i></span>
|
||||
</div>
|
||||
</a></article>
|
||||
|
||||
<article><a href="#">
|
||||
<img src="images/IPC.png">
|
||||
<div>
|
||||
<h2>Titre Article</h2>
|
||||
<span>Article par <i>Dark Storm</i></span>
|
||||
</div>
|
||||
</a></article>
|
||||
|
||||
<article><a href="#">
|
||||
<img src="images/IPC.png">
|
||||
<div>
|
||||
<h2>Titre Article</h2>
|
||||
<span>Article par <i>Dark Storm</i></span>
|
||||
</div>
|
||||
</a></article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="home-articles">
|
||||
<div>
|
||||
<h1><span>Derniers articles</span><a href="#">Tous les articles</a></h1>
|
||||
<div>
|
||||
<article>
|
||||
<div>
|
||||
<a href="#"><h3>La Revue des Projets - 93</h3></a>
|
||||
<p>Bonsoir à tous ! Nous sommes dimanche, la revoici ; la Revue Des Projets ! Alors, dans la joie et la bonne humeur qui nous caractérise (en partant du constat qu’il n’y a pas trop de visiteurs Parisiens), découvrons tout de suite les projets !</p>
|
||||
<p class="metadata"><time>Lundi 5 janvier 2017</time> par <a href="#2">Cakeisalie5</a></p>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<div>
|
||||
<a href="#"><h3>Sortie de la nouvelle fx-CG50</h3></a>
|
||||
<p>Le professeur parti, le brouhaha habituel d'un intercours s'éleva. Au milieu de tout ces bavardages, quelques élèves discutèrent très sérieusement de cette nouvelle Prizm qui va bientôt sortir !</p>
|
||||
<p class="metadata"><time>Vendredi 14 décembre 2016</time> par <a href="#2">Ninestars</a></p>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<div>
|
||||
<a href="#"><h3>Résultats des derniers 7 Days CPC</h3></a>
|
||||
<p>Et voilà, vous l'attendiez tous – oui, tous, même toi qui te demandes de quoi je parle parce que tu n'as pas lu les news ci-avant et que tu t'en contrefiches presque autant que du sort des manchots empereurs de Groenland menacés par les débris des bateaux Greenpeace coulés par les services secrets Français – et il arrive maintenant…</p>
|
||||
<p class="metadata"><time>Mardi 19 mai 2016</time> par <a href="#2">Lephenixnoir</a></p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1><span>Derniers programmes</span><a href="#">Tous les programmes</a></h1>
|
||||
<div>
|
||||
<article>
|
||||
<img src="images/clonelab.gif" class="screenshot">
|
||||
<div>
|
||||
<a href="#"><h3>Clonelab</h3></a>
|
||||
<p>Riche comme tu l'es, tu n'auras aucun mal à être à la mode en t'offrant un nouveau clone ! Mais tout se passera-t-il comme prévu ? Sortiras-tu entier de ce laboratoire de dingues ?</p>
|
||||
<p class="metadata">★★★★★ (20 notes) par <a href="#2">Ne0tux</a></p>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<img src="images/gravity_duck.png" class="screenshot">
|
||||
<div>
|
||||
<a href="#"><h3>Gravity Duck</h3></a>
|
||||
<p>Vous dirigez un canard qui contrôle la gravité, et vous devez récupérer l'oeuf d'or dans chacun des 40 niveaux en évitant les divers pièges.</p>
|
||||
<p class="metadata">★★★★☆ (11 notes) par <a href="#2">Pierrotll</a></p>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<img src="images/calcraft.gif" class="screenshot">
|
||||
<div>
|
||||
<a href="#"><h3>Calcraft</h3></a>
|
||||
<p>Vous dirigez un canard qui contrôle la gravité, et vous devez récupérer l'oeuf d'or dans chacun des 40 niveaux en évitant les divers pièges.</p>
|
||||
<p class="metadata">★★★★★ (11 notes) par <a href="#2">Remiweb</a></p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="home-articles">
|
||||
<div>
|
||||
<h1><span>Derniers tutoriels</span><a href="#">Tous les tutoriels</a></h1>
|
||||
<div>
|
||||
<article>
|
||||
<div>
|
||||
<a href="#"><h3>Créer des bibliothèques de fonctions statiques</h3></a>
|
||||
<p>Ou comment faire une bibliothèque de manière propre et efficace. Attention, environnement GNU/Linux quasiment indispensable !</p>
|
||||
<p class="metadata"><time>Lundi 5 janvier 2017</time> par <a href="#2">Cakeisalie5</a></p>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<div>
|
||||
<a href="#"><h3>Le Multi Drawstat</h3></a>
|
||||
<p>Le Multi DrawStat est un nouvel outil de dessin ultra rapide en Basic. Il se base sur une nouvelle logique de dessin offrant d'autres possibilités.</p>
|
||||
<p class="metadata"><time>Vendredi 14 décembre 2016</time> par <a href="#2">Ninestars</a></p>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<div>
|
||||
<a href="#"><h3>Compiler sous Linux avec GCC</h3></a>
|
||||
<p>Créez votre cross-compilateur GCC pour compiler vos projets d'addins pour Graph 75/85/95 (SD) sous Linux ! Attention, bon nombre de librairies ne seront pas supportées.</p>
|
||||
<p class="metadata"><time>Mardi 19 mai 2016</time> par <a href="#2">Lephenixnoir</a></p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1><span>Derniers commentaires</span><a href="#">Tous les commentaires</a></h1>
|
||||
<div>
|
||||
<article>
|
||||
<div>
|
||||
<a href="#"><h3>Créer des bibliothèques de fonctions statiques</h3></a>
|
||||
<p>Ou comment faire une bibliothèque de manière propre et efficace. Attention, environnement GNU/Linux quasiment indispensable !</p>
|
||||
<p class="metadata"><time>Lundi 5 janvier 2017</time> par <a href="#2">Cakeisalie5</a></p>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<div>
|
||||
<a href="#"><h3>Le Multi Drawstat</h3></a>
|
||||
<p>Le Multi DrawStat est un nouvel outil de dessin ultra rapide en Basic. Il se base sur une nouvelle logique de dessin offrant d'autres possibilités.</p>
|
||||
<p class="metadata"><time>Vendredi 14 décembre 2016</time> par <a href="#2">Ninestars</a></p>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<div>
|
||||
<a href="#"><h3>Compiler sous Linux avec GCC</h3></a>
|
||||
<p>Créez votre cross-compilateur GCC pour compiler vos projets d'addins pour Graph 75/85/95 (SD) sous Linux ! Attention, bon nombre de librairies ne seront pas supportées.</p>
|
||||
<p class="metadata"><time>Mardi 19 mai 2016</time> par <a href="#2">Lephenixnoir</a></p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- {% end block content %} -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>Planète Casio est un site communautaire indépendant, géré bénévolement et n'est donc pas affilié à Casio | Toute reproduction de Planète Casio, même partielle, est interdite.</p>
|
||||
<p>Les fichiers, programmes et autres publications présents sur Planète Casio restent la propriété de leurs auteurs respectifs et peuvent être soumis à des licences ou des copyrights.</p>
|
||||
<p>CASIO est une marque déposée par CASIO Computer Co., Ltd.</p>
|
||||
</footer>
|
||||
|
||||
<div class="alert ok" style="top: 25px;" onclick="close_important(this)">
|
||||
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
|
||||
<path fill="#727272" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M11,16.5L6.5,12L7.91,10.59L11,13.67L16.59,8.09L18,9.5L11,16.5Z"></path>
|
||||
</svg>
|
||||
<span>
|
||||
Votre message a bien été posté.
|
||||
</span>
|
||||
<input type="button" class="flat" value="MASQUER" onclick="setCookie('pc_notif', 'true');"></input>
|
||||
</div>
|
||||
<!--<div class="alert error" style="top: 95px;" onclick="close_important(this)">
|
||||
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
|
||||
<path fill="#727272" d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"></path>
|
||||
</svg>
|
||||
<span>
|
||||
Holy shit! Ceci est un grave problème ! Il faut s'en occuper dès que possible.
|
||||
</span>
|
||||
<input type="button" class="flat" value="MASQUER" onclick="setCookie('pc_notif_2', 'true');"></input>
|
||||
</div>-->
|
||||
</body>
|
||||
|
||||
<script type="text/javascript" src="scripts/trigger_menu.js"></script>
|
||||
<script type="text/javascript" src="scripts/smartphone_patch.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
function setCookie(name, value) {
|
||||
var end = new Date();
|
||||
end.setTime( end.getTime() + 3600 * 1000 );
|
||||
var str=name+"="+escape(value)+"; expires="+end.toGMTString()+"; path=/";
|
||||
document.cookie = str;
|
||||
}
|
||||
function getCookie(name) {
|
||||
var debut = document.cookie.indexOf(name);
|
||||
if( debut == -1 ) return null;
|
||||
var end = document.cookie.indexOf( ";", debut+name.length+1 );
|
||||
if( end == -1 ) end = document.cookie.length;
|
||||
return unescape( document.cookie.substring( debut+name.length+1, end ) );
|
||||
}
|
||||
|
||||
if(getCookie('pc_notif') == 'true')
|
||||
document.getElementsByClassName('alert')[0].parentNode.removeChild(document.getElementsByClassName('alert')[0]);
|
||||
if(getCookie('pc_notif_2') == 'true')
|
||||
document.getElementsByClassName('alert')[0].parentNode.removeChild(document.getElementsByClassName('alert')[0]);
|
||||
|
||||
function close_important(element) {
|
||||
element.style.opacity = 0;
|
||||
setTimeout(function(){ element.parentNode.removeChild(element); }, 200);
|
||||
}
|
||||
|
||||
|
||||
function setAnimation(anim) {
|
||||
var menu = document.getElementById('menu')
|
||||
|
||||
switch(anim) {
|
||||
case 'A':
|
||||
menu.classList.add('scroll-animation');
|
||||
menu.classList.remove('left-to-right-animation');
|
||||
break;
|
||||
case 'B':
|
||||
menu.classList.remove('scroll-animation');
|
||||
menu.classList.add('left-to-right-animation');
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 386 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" /></svg>
|
||||
|
After Width: | Height: | Size: 549 B |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 988 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z" /></svg>
|
||||
|
After Width: | Height: | Size: 408 B |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M16,10H14V7H10V10H8L12,14M19,15H15A3,3 0 0,1 12,18A3,3 0 0,1 9,15H5V5H19M19,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3Z" /></svg>
|
||||
|
After Width: | Height: | Size: 446 B |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 153 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M20,2H4A2,2 0 0,0 2,4V22L6,18H20A2,2 0 0,0 22,16V4A2,2 0 0,0 20,2M6,9H18V11H6M14,14H6V12H14M18,8H6V6H18" /></svg>
|
||||
|
After Width: | Height: | Size: 398 B |
|
|
@ -0,0 +1,11 @@
|
|||
/* Smartphone patch for menu */
|
||||
/* It don't work if links haven't any href attribute */
|
||||
|
||||
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
|
||||
|
||||
if(w < 700) {
|
||||
var buttons = document.getElementById('light-menu').getElementsByTagName('li');
|
||||
for(var i = 0; i < buttons.length; i++) {
|
||||
buttons[i].getElementsByTagName('a')[0].setAttribute('href', '#');
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
/* Trigger actions for the menu */
|
||||
|
||||
/* Initialization */
|
||||
var b = document.getElementById('light-menu').getElementsByTagName('a')
|
||||
for(var i = 1; i < b.length; i++) {
|
||||
b[i].setAttribute('onfocus', "this.setAttribute('f', 'true');");
|
||||
b[i].setAttribute('onblur', "this.setAttribute('f', 'false');");
|
||||
}
|
||||
|
||||
var trigger_menu = function(active) {
|
||||
var display = function(element) {
|
||||
element.classList.add('opened');
|
||||
}
|
||||
var hide = function(element) {
|
||||
element.classList.remove('opened');
|
||||
}
|
||||
|
||||
var menu = document.getElementById('menu');
|
||||
var buttons = document.getElementById('light-menu').getElementsByTagName('li');
|
||||
var menus = document.getElementById('menu').getElementsByTagName('div');
|
||||
|
||||
if(active == -1 || buttons[active].classList.contains('opened')) {
|
||||
hide(menu);
|
||||
for(i = 0; i < buttons.length; i++) {
|
||||
hide(buttons[i]);
|
||||
}
|
||||
}
|
||||
else {
|
||||
for(i = 0; i < buttons.length; i++) {
|
||||
if(i != active) {
|
||||
hide(buttons[i]);
|
||||
hide(menus[i]);
|
||||
}
|
||||
}
|
||||
display(buttons[active]);
|
||||
display(menus[active]);
|
||||
display(menu);
|
||||
}
|
||||
}
|
||||
|
||||
var mouse_trigger = function(event) {
|
||||
var menu = document.getElementById('menu');
|
||||
var buttons = document.getElementById('light-menu').getElementsByTagName('li');
|
||||
|
||||
if(!menu.contains(event.target)) {
|
||||
var active = -1;
|
||||
|
||||
for(i = 0; i < buttons.length; i++) {
|
||||
if(buttons[i].contains(event.target))
|
||||
active = i;
|
||||
buttons[i].getElementsByTagName('a')[0].blur();
|
||||
}
|
||||
|
||||
trigger_menu(active);
|
||||
}
|
||||
}
|
||||
|
||||
var keyboard_trigger = function(event) {
|
||||
var menu = document.getElementById('menu');
|
||||
var buttons = document.getElementById('light-menu').getElementsByTagName('li');
|
||||
|
||||
if(event.keyCode == 13) {
|
||||
for(var i = 0; i < buttons.length; i++) {
|
||||
if(buttons[i].getElementsByTagName('a')[0].getAttribute('f') == 'true') {
|
||||
trigger_menu(i);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.onclick = mouse_trigger;
|
||||
document.onkeypress = keyboard_trigger;
|
||||
|
|
@ -0,0 +1,449 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr-FR">
|
||||
<head>
|
||||
<title>Planète Casio : design template</title>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href="css/global.css">
|
||||
<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href="css/navbar.css">
|
||||
<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href="css/shoutbox.css">
|
||||
<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href="css/container.css">
|
||||
<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href="css/responsive.css">
|
||||
|
||||
<link rel="stylesheet" media="all and (max-width: 699px)" type="text/css" href="css/light.css">
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<ul id="light-menu">
|
||||
<a id="logo" href="#">
|
||||
<img src="images/logo_noshadow.png" alt="logo"/>
|
||||
</a>
|
||||
|
||||
<li>
|
||||
<a role="button" label="Compte" tabindex="0">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"></path>
|
||||
</svg>
|
||||
<div>Compte</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a role="button" label="Actualités" tabindex="0">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M20,11H4V8H20M20,15H13V13H20M20,19H13V17H20M11,19H4V13H11M20.33,4.67L18.67,3L17,4.67L15.33,3L13.67,4.67L12,3L10.33,4.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V3L20.33,4.67Z"></path>
|
||||
</svg>
|
||||
<div>Actualités</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a role="button" label="Forum" tabindex="0">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M17,12V3A1,1 0 0,0 16,2H3A1,1 0 0,0 2,3V17L6,13H16A1,1 0 0,0 17,12M21,6H19V15H6V17A1,1 0 0,0 7,18H18L22,22V7A1,1 0 0,0 21,6Z"></path>
|
||||
</svg>
|
||||
<div>Forum</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a role="button" label="Programmes" tabindex="0">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M8,3A2,2 0 0,0 6,5V9A2,2 0 0,1 4,11H3V13H4A2,2 0 0,1 6,15V19A2,2 0 0,0 8,21H10V19H8V14A2,2 0 0,0 6,12A2,2 0 0,0 8,10V5H10V3M16,3A2,2 0 0,1 18,5V9A2,2 0 0,0 20,11H21V13H20A2,2 0 0,0 18,15V19A2,2 0 0,1 16,21H14V19H16V14A2,2 0 0,1 18,12A2,2 0 0,1 16,10V5H14V3H16Z"></path>
|
||||
</svg>
|
||||
<div>Programmes</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a role="button" label="Tutoriels" tabindex="0">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M12,3L1,9L12,15L21,10.09V17H23V9M5,13.18V17.18L12,21L19,17.18V13.18L12,17L5,13.18Z"></path>
|
||||
</svg>
|
||||
<div>Tutoriels</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a role="button" label="Sprites" tabindex="0">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M20.71,4.63L19.37,3.29C19,2.9 18.35,2.9 17.96,3.29L9,12.25L11.75,15L20.71,6.04C21.1,5.65 21.1,5 20.71,4.63M7,14A3,3 0 0,0 4,17C4,18.31 2.84,19 2,19C2.92,20.22 4.5,21 6,21A4,4 0 0,0 10,17A3,3 0 0,0 7,14Z"></path>
|
||||
</svg>
|
||||
<div>Sprites</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#" label="Outils">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M22.7,19L13.6,9.9C14.5,7.6 14,4.9 12.1,3C10.1,1 7.1,0.6 4.7,1.7L9,6L6,9L1.6,4.7C0.4,7.1 0.9,10.1 2.9,12.1C4.8,14 7.5,14.5 9.8,13.6L18.9,22.7C19.3,23.1 19.9,23.1 20.3,22.7L22.6,20.4C23.1,20 23.1,19.3 22.7,19Z"></path>
|
||||
</svg>
|
||||
<div>Outils</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div id="menu">
|
||||
<!-- {% if user.is_authenticated %} -->
|
||||
<div>
|
||||
<h2>
|
||||
<img src="images/3864.png">
|
||||
Dark Storm
|
||||
</h2>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M20,2A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H6L2,22V4C2,2.89 2.9,2 4,2H20M4,4V17.17L5.17,16H20V4H4M6,7H18V9H6V7M6,11H15V13H6V11Z"></path>
|
||||
</svg>
|
||||
Notifications
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M2,2V11C2,12 3,13 4,13H6.2C6.6,15 7.9,16.7 11,17V19.1C8.8,19.3 8,20.4 8,21.7V22H16V21.7C16,20.4 15.2,19.3 13,19.1V17C16.1,16.7 17.4,15 17.8,13H20C21,13 22,12 22,11V2H18C17.1,2 16,3 16,4H8C8,3 6.9,2 6,2H2M4,4H6V6L6,11H4V4M18,4H20V11H18V6L18,4M8,6H16V11.5C16,13.43 15.42,15 12,15C8.59,15 8,13.43 8,11.5V6Z"></path>
|
||||
</svg>
|
||||
Trophées
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"></path>
|
||||
</svg>
|
||||
Topics favoris
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M3,1H19A1,1 0 0,1 20,2V6A1,1 0 0,1 19,7H3A1,1 0 0,1 2,6V2A1,1 0 0,1 3,1M3,9H19A1,1 0 0,1 20,10V10.67L17.5,9.56L11,12.44V15H3A1,1 0 0,1 2,14V10A1,1 0 0,1 3,9M3,17H11C11.06,19.25 12,21.4 13.46,23H3A1,1 0 0,1 2,22V18A1,1 0 0,1 3,17M8,5H9V3H8V5M8,13H9V11H8V13M8,21H9V19H8V21M4,3V5H6V3H4M4,11V13H6V11H4M4,19V21H6V19H4M17.5,12L22,14V17C22,19.78 20.08,22.37 17.5,23C14.92,22.37 13,19.78 13,17V14L17.5,12M17.5,13.94L15,15.06V17.72C15,19.26 16.07,20.7 17.5,21.06V13.94Z"></path>
|
||||
</svg>
|
||||
Panel d'administration
|
||||
</a>
|
||||
|
||||
<hr />
|
||||
|
||||
<a href="account.html">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"></path>
|
||||
</svg>
|
||||
Paramètres
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M17,17.25V14H10V10H17V6.75L22.25,12L17,17.25M13,2A2,2 0 0,1 15,4V8H13V4H4V20H13V16H15V20A2,2 0 0,1 13,22H4A2,2 0 0,1 2,20V4A2,2 0 0,1 4,2H13Z"></path>
|
||||
</svg>
|
||||
Déconnexion
|
||||
</a>
|
||||
</div>
|
||||
<!-- {% else %}
|
||||
<div>
|
||||
<h2>
|
||||
Invité
|
||||
</h2>
|
||||
<a href="#">Connexion</a>
|
||||
<a href="#">Inscription</a>
|
||||
</div>
|
||||
{% endif %} -->
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M20,11H4V8H20M20,15H13V13H20M20,19H13V17H20M11,19H4V13H11M20.33,4.67L18.67,3L17,4.67L15.33,3L13.67,4.67L12,3L10.33,4.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V3L20.33,4.67Z"></path>
|
||||
</svg>
|
||||
Actualités
|
||||
</h2>
|
||||
<a href="#">Casio</a>
|
||||
<a href="#">Arduino</a>
|
||||
<a href="#">Projets communautaires</a>
|
||||
<a href="#">Divers</a>
|
||||
|
||||
<hr />
|
||||
|
||||
<h3>Derniers articles</h3>
|
||||
<ul>
|
||||
<li><a href="#">Un nouvel OS pour les Graph 75</a></li>
|
||||
<li><a href="#">Les 7 Days CPC arrivent bientôt</a></li>
|
||||
<li><a href="#">Résultats de jeu du mois de Février 2017</a></li>
|
||||
<li><a href="#">Test du shield relai Sainsmart pour Arduino</a></li>
|
||||
<li><a href="#">Un nouveau tutoriel sur le C-engine</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M17,12V3A1,1 0 0,0 16,2H3A1,1 0 0,0 2,3V17L6,13H16A1,1 0 0,0 17,12M21,6H19V15H6V17A1,1 0 0,0 7,18H18L22,22V7A1,1 0 0,0 21,6Z"></path>
|
||||
</svg>
|
||||
Forum
|
||||
</h2>
|
||||
<a href="#">Vie communautaire</a>
|
||||
<a href="#">Projets de programmation</a>
|
||||
<a href="#">Questions et problèmes</a>
|
||||
<a href="#">Discussions</a>
|
||||
<a href="#">Administration</a>
|
||||
<a href="#">CreativeCalc</a>
|
||||
|
||||
<hr />
|
||||
|
||||
<h3>Derniers commentaires</h3>
|
||||
<ul>
|
||||
<li><a href="#">Legolas</a> sur <a href="#">Bugs de la v5</a></li>
|
||||
<li><a href="#">Dark Storm</a> sur <a href="#">fxSDK support</a></li>
|
||||
<li><a href="#">Gollum</a> sur <a href="#">Le nom de topic qui fout le bordel car il est trop long…</a></li>
|
||||
<li><a href="#">Lephenixnoir</a> sur <a href="#">fxSDK support</a></li>
|
||||
<li><a href="#">Kristaba</a> sur <a href="#">FiXos, le retour</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M8,3A2,2 0 0,0 6,5V9A2,2 0 0,1 4,11H3V13H4A2,2 0 0,1 6,15V19A2,2 0 0,0 8,21H10V19H8V14A2,2 0 0,0 6,12A2,2 0 0,0 8,10V5H10V3M16,3A2,2 0 0,1 18,5V9A2,2 0 0,0 20,11H21V13H20A2,2 0 0,0 18,15V19A2,2 0 0,1 16,21H14V19H16V14A2,2 0 0,1 18,12A2,2 0 0,1 16,10V5H14V3H16Z"></path>
|
||||
</svg>
|
||||
Programmes
|
||||
</h2>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M7,6H17A6,6 0 0,1 23,12A6,6 0 0,1 17,18C15.22,18 13.63,17.23 12.53,16H11.47C10.37,17.23 8.78,18 7,18A6,6 0 0,1 1,12A6,6 0 0,1 7,6M6,9V11H4V13H6V15H8V13H10V11H8V9H6M15.5,12A1.5,1.5 0 0,0 14,13.5A1.5,1.5 0 0,0 15.5,15A1.5,1.5 0 0,0 17,13.5A1.5,1.5 0 0,0 15.5,12M18.5,9A1.5,1.5 0 0,0 17,10.5A1.5,1.5 0 0,0 18.5,12A1.5,1.5 0 0,0 20,10.5A1.5,1.5 0 0,0 18.5,9Z"></path>
|
||||
</svg>
|
||||
Jeux
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M19,19H5V8H19M19,3H18V1H16V3H8V1H6V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M16.53,11.06L15.47,10L10.59,14.88L8.47,12.76L7.41,13.82L10.59,17L16.53,11.06Z"></path>
|
||||
</svg>
|
||||
Utilitaires
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M21,16H3V4H21M21,2H3C1.89,2 1,2.89 1,4V16A2,2 0 0,0 3,18H10V20H8V22H16V20H14V18H21A2,2 0 0,0 23,16V4C23,2.89 22.1,2 21,2Z"></path>
|
||||
</svg>
|
||||
Logiciels
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"></path>
|
||||
</svg>
|
||||
Top 20
|
||||
</a>
|
||||
|
||||
<hr />
|
||||
<form>
|
||||
<input type="text" name="quick-search" placeholder="Recherche rapide" />
|
||||
</form>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
|
||||
</svg>
|
||||
Recherche avancée
|
||||
</a>
|
||||
|
||||
<hr />
|
||||
|
||||
<h3>Sélection de la semaine</h3>
|
||||
<ul>
|
||||
<li><a href="#"><img src="images/fruit_ninja.gif">Fruit Ninja</a></li>
|
||||
<li><a href="#"><img src="images/clonelab.gif">Clonelab</a></li>
|
||||
<li><a href="#"><img src="images/gravity_duck.png">Gravity Duck</a></li>
|
||||
<li><a href="#"><img src="images/calcraft.gif">Calcraft</a></li>
|
||||
</ul>
|
||||
|
||||
<hr />
|
||||
<h3>Coup de cœur</h3>
|
||||
<ul>
|
||||
<li><a href="#"><img src="images/fruit_ninja.gif">Fruit Ninja</a></li>
|
||||
<li><a href="#"><img src="images/clonelab.gif">Clonelab</a></li>
|
||||
<li><a href="#"><img src="images/gravity_duck.png">Gravity Duck</a></li>
|
||||
<li><a href="#"><img src="images/calcraft.gif">Calcraft</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M12,3L1,9L12,15L21,10.09V17H23V9M5,13.18V17.18L12,21L19,17.18V13.18L12,17L5,13.18Z"></path>
|
||||
</svg>
|
||||
Tutoriels
|
||||
</h2>
|
||||
<a href="#">Basic Casio</a>
|
||||
<a href="#">C/C++ Casio</a>
|
||||
<a href="#">Arduino</a>
|
||||
<hr>
|
||||
<a href="#">Foire aux questions (FAQ)</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M20.71,4.63L19.37,3.29C19,2.9 18.35,2.9 17.96,3.29L9,12.25L11.75,15L20.71,6.04C21.1,5.65 21.1,5 20.71,4.63M7,14A3,3 0 0,0 4,17C4,18.31 2.84,19 2,19C2.92,20.22 4.5,21 6,21A4,4 0 0,0 10,17A3,3 0 0,0 7,14Z"></path>
|
||||
</svg>
|
||||
Sprites
|
||||
</h2>
|
||||
<a href="#">Personnages</a>
|
||||
<a href="#">Environnement</a>
|
||||
<a href="#">Objets</a>
|
||||
<a href="#">Interfaces</a>
|
||||
<a href="#">Générateur</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M22.7,19L13.6,9.9C14.5,7.6 14,4.9 12.1,3C10.1,1 7.1,0.6 4.7,1.7L9,6L6,9L1.6,4.7C0.4,7.1 0.9,10.1 2.9,12.1C4.8,14 7.5,14.5 9.8,13.6L18.9,22.7C19.3,23.1 19.9,23.1 20.3,22.7L22.6,20.4C23.1,20 23.1,19.3 22.7,19Z"></path>
|
||||
</svg>
|
||||
Outils
|
||||
</h2>
|
||||
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M2.6,10.59L8.38,4.8L10.07,6.5C9.83,7.35 10.22,8.28 11,8.73V14.27C10.4,14.61 10,15.26 10,16A2,2 0 0,0 12,18A2,2 0 0,0 14,16C14,15.26 13.6,14.61 13,14.27V9.41L15.07,11.5C15,11.65 15,11.82 15,12A2,2 0 0,0 17,14A2,2 0 0,0 19,12A2,2 0 0,0 17,10C16.82,10 16.65,10 16.5,10.07L13.93,7.5C14.19,6.57 13.71,5.55 12.78,5.16C12.35,5 11.9,4.96 11.5,5.07L9.8,3.38L10.59,2.6C11.37,1.81 12.63,1.81 13.41,2.6L21.4,10.59C22.19,11.37 22.19,12.63 21.4,13.41L13.41,21.4C12.63,22.19 11.37,22.19 10.59,21.4L2.6,13.41C1.81,12.63 1.81,11.37 2.6,10.59Z"></path>
|
||||
</svg>
|
||||
Forge GitLab
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M14.97,18.95L12.41,12.92C11.39,14.91 10.27,17 9.31,18.95C9.3,18.96 8.84,18.95 8.84,18.95C7.37,15.5 5.85,12.1 4.37,8.68C4.03,7.84 2.83,6.5 2,6.5C2,6.4 2,6.18 2,6.05H7.06V6.5C6.46,6.5 5.44,6.9 5.7,7.55C6.42,9.09 8.94,15.06 9.63,16.58C10.1,15.64 11.43,13.16 12,12.11C11.55,11.23 10.13,7.93 9.71,7.11C9.39,6.57 8.58,6.5 7.96,6.5C7.96,6.35 7.97,6.25 7.96,6.06L12.42,6.07V6.47C11.81,6.5 11.24,6.71 11.5,7.29C12.1,8.53 12.45,9.42 13,10.57C13.17,10.23 14.07,8.38 14.5,7.41C14.76,6.76 14.37,6.5 13.29,6.5C13.3,6.38 13.3,6.17 13.3,6.07C14.69,6.06 16.78,6.06 17.15,6.05V6.47C16.44,6.5 15.71,6.88 15.33,7.46L13.5,11.3C13.68,11.81 15.46,15.76 15.65,16.2L19.5,7.37C19.2,6.65 18.34,6.5 18,6.5C18,6.37 18,6.2 18,6.05L22,6.08V6.1L22,6.5C21.12,6.5 20.57,7 20.25,7.75C19.45,9.54 17,15.24 15.4,18.95C15.4,18.95 14.97,18.95 14.97,18.95Z"></path>
|
||||
</svg>
|
||||
Casio Universal Wiki
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#ffffff" d="M19,8L15,12H18A6,6 0 0,1 12,18C11,18 10.03,17.75 9.2,17.3L7.74,18.76C8.97,19.54 10.43,20 12,20A8,8 0 0,0 20,12H23M6,12A6,6 0 0,1 12,6C13,6 13.97,6.25 14.8,6.7L16.26,5.24C15.03,4.46 13.57,4 12,4A8,8 0 0,0 4,12H1L5,16L9,12"></path>
|
||||
</svg>
|
||||
SH4 Compatibility Tool
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div id="container">
|
||||
<header>
|
||||
<form>
|
||||
<input type="search" placeholder="Recherche" />
|
||||
<a role="button" onclick="this.parentNode.submit();" href="#" class="light-hidden">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="#adb0b4"d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</form>
|
||||
|
||||
<!--<h1>Planète Casio</h1>-->
|
||||
|
||||
<div id="spotlight">
|
||||
<a href="#">Concours</a>
|
||||
<a href="#">Jeu du mois</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- {% block content %} -->
|
||||
|
||||
<div id="info-dev" style="margin: 20px 5% 0 5%; padding: 0 10px; background: #ffffff; border: 1px solid #cccccc; font-size: 14px;">
|
||||
<p>Concernant les alertes, cliquer sur "Masquer" enregistre un cookie pour une heure, ce qui bloque le réaffichage de l'alerte. Cliquer autre part fait disparaître l'alerte sans mettre le cookie, donc au prochain rechargement de la page celle-ci réapparaîtra.</p>
|
||||
<p>Au niveau du menu, vous préférez une ouverture type <input type="button" onclick="setAnimation('A');" value="A" style="padding:0 4px;"> ou plutôt de type <input type="button" onclick="setAnimation('B');" value="B" style="padding:0 4px;"> ?</p>
|
||||
<p>La shout est en cours de conception, merci d'être indulgent x)</p>
|
||||
<p><strong>Merci de me faire parvenir vos commentaires</strong> soit via la shout de Planète Casio, soit par mail à <em>l.gatin@protonmail.com</em> (précisez que ça concerne la v5 dans l'en-tête).</p>
|
||||
Bien entendu ce paragraphe n'apparaitra pas dans la v5 (cliquez <a href="#" onclick="document.getElementById('info-dev').style.display='none'">ici</a> pour faire disparaitre).
|
||||
</div>
|
||||
|
||||
<div id="shoutbox">
|
||||
<div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
<div>Ceci est un message</div>
|
||||
</div>
|
||||
<input type="text" />
|
||||
</div>
|
||||
|
||||
<section>
|
||||
Forum
|
||||
</section>
|
||||
<!-- {% end block content %} -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>Planète Casio est un site communautaire indépendant, géré bénévolement et n'est donc pas affilié à Casio | Toute reproduction de Planète Casio, même partielle, est interdite.</p>
|
||||
<p>Les fichiers, programmes et autres publications présents sur Planète Casio restent la propriété de leurs auteurs respectifs et peuvent être soumis à des licences ou des copyrights.</p>
|
||||
<p>CASIO est une marque déposée par CASIO Computer Co., Ltd.</p>
|
||||
</footer>
|
||||
|
||||
<div class="alert ok" style="top: 25px;" onclick="close_important(this)">
|
||||
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
|
||||
<path fill="#727272" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M11,16.5L6.5,12L7.91,10.59L11,13.67L16.59,8.09L18,9.5L11,16.5Z"></path>
|
||||
</svg>
|
||||
<span>
|
||||
Votre message a bien été posté.
|
||||
</span>
|
||||
<input type="button" class="flat" value="MASQUER" onclick="setCookie('pc_notif', 'true');"></input>
|
||||
</div>
|
||||
<!--<div class="alert error" style="top: 95px;" onclick="close_important(this)">
|
||||
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
|
||||
<path fill="#727272" d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"></path>
|
||||
</svg>
|
||||
<span>
|
||||
Holy shit! Ceci est un grave problème ! Il faut s'en occuper dès que possible.
|
||||
</span>
|
||||
<input type="button" class="flat" value="MASQUER" onclick="setCookie('pc_notif_2', 'true');"></input>
|
||||
</div>-->
|
||||
</body>
|
||||
|
||||
<script type="text/javascript" src="scripts/trigger_menu.js"></script>
|
||||
<script type="text/javascript" src="scripts/smartphone_patch.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
function setCookie(name, value) {
|
||||
var end = new Date();
|
||||
end.setTime( end.getTime() + 3600 * 1000 );
|
||||
var str=name+"="+escape(value)+"; expires="+end.toGMTString()+"; path=/";
|
||||
document.cookie = str;
|
||||
}
|
||||
function getCookie(name) {
|
||||
var debut = document.cookie.indexOf(name);
|
||||
if( debut == -1 ) return null;
|
||||
var end = document.cookie.indexOf( ";", debut+name.length+1 );
|
||||
if( end == -1 ) end = document.cookie.length;
|
||||
return unescape( document.cookie.substring( debut+name.length+1, end ) );
|
||||
}
|
||||
|
||||
if(getCookie('pc_notif') == 'true')
|
||||
document.getElementsByClassName('alert')[0].parentNode.removeChild(document.getElementsByClassName('alert')[0]);
|
||||
if(getCookie('pc_notif_2') == 'true')
|
||||
document.getElementsByClassName('alert')[0].parentNode.removeChild(document.getElementsByClassName('alert')[0]);
|
||||
|
||||
function close_important(element) {
|
||||
element.style.opacity = 0;
|
||||
setTimeout(function(){ element.parentNode.removeChild(element); }, 200);
|
||||
}
|
||||
|
||||
|
||||
function setAnimation(anim) {
|
||||
var menu = document.getElementById('menu')
|
||||
|
||||
switch(anim) {
|
||||
case 'A':
|
||||
menu.classList.add('scroll-animation');
|
||||
menu.classList.remove('left-to-right-animation');
|
||||
break;
|
||||
case 'B':
|
||||
menu.classList.remove('scroll-animation');
|
||||
menu.classList.add('left-to-right-animation');
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue