devs/PCv5
devs
/
PCv5
7
10
Fork 4
Code Issues 25 Pull Requests Releases Wiki Activity

WIP, différents ajouts/retraits sur le CSS

This commit is contained in:
Dark-Storm 2017-07-12 23:10:41 +02:00
parent d3e7fd22bf
commit 102f8be1a6
17 changed files with 538 additions and 1024 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
templates_dev/css/container.css
View File

@ -1,17 +1,43 @@
#container {
margin-left: 60px;
article {
display: flex; justify-content: space-around;
margin: 0; padding: 0; text-align: justify;
border-style: solid; border-width: 0 1px;
}
article:nth-child(even), h1 { background: white; border-color: rgba(0, 0, 0, .15); }
article:nth-child(odd) { background: #f4c0c0; border-color: rgba(128, 0, 0, .1); }
article .author {
display: flex; flex-direction: column; align-items: center;
width: 10%; min-width: 100px;
padding: 16px 0 12px 0; margin: 0;
}
article .author img:first-child { width: 100px; height: 100px; margin-bottom: 8px; }
article .author span[title='nickname'] { display: block; text-align: center; font-weight: bold; }
article .author span { margin-bottom: 0; }
article .author span[title='level'] { font-size: 9px; }
article .content {
display: flex; flex-direction: column;
width: 85%; padding: 12px;
line-height: 18px;
}
/* #container h1 {
margin-left: 5%;
font-family: Raleway; font-size: 24px;
font-weight: 200; color: #242424;
}
h1 { padding: 24px 0 8px 0; margin: 0; text-align: center; font-size: 24px; color: #181818; border-style: solid; border-width: 0 1px; }
#container h2 {
margin-left: 5%;
font-family: Raleway; font-size: 20px;
font-weight: 200; color: #242424;
} */
article .content time { font-style: italic; }
article .content p { margin: 6px 0; }
article .content p:last-of-type { flex-grow: 1; /*margin-bottom: 10px;*/ }
article .content .meta { text-align: right; font-size: 11px; }
article .content .moderation { color: rgba(0, 0, 0, .4); }
div.pagination { text-align: center; margin: 16px 0 32px 0; }
div.content-border { margin: 16px 5%; border: 1px solid rgba(0, 0, 0, 0); border-top: 2px solid #db3e3e; border-bottom: 2px solid #db3e3e; }
details { display: block; padding: 10px; background: rgba(0, 0, 64, .12); }
summary { display: block; margin: -10px; padding: 5px; cursor: pointer; color: #ffffff; background: #b21212; }
summary:hover, summary:focus { background: #900909; }
details > p:last-child { margin-bottom: 0; }
details[open] > summary { margin-bottom: 0; }
/*summary:before { content: '→ '; }
details[open] > summary:before { content: '↓ '; }*/

13
templates_dev/css/footer.css Normal file
View File

@ -0,0 +1,13 @@
/*
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;
}

101
templates_dev/css/global.css
View File

@ -14,72 +14,14 @@
body {
margin: 0;
background: #fbfbfb;
background: #f8f8f8;
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;
#container {
margin-left: 60px;
}
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;
#container.extended {
margin-left: 160px;
}
/*
@ -88,12 +30,25 @@ footer p {
a {
text-decoration: none;
color: #be1818;
}
a:hover {
text-decoration: underline;
}
a:focus {
text-decoration: underline;
outline: none;
}
quote { display: block; background: #e0e0e8; background: rgba(0, 0, 64, .12); border: 2px solid rgba(0, 0, 64, .08); border-width: 1px 0; padding: 4px 8px; }
quote quote { background: rgba(0, 0, 64, .12); }
quote[author]:before {
display: inline-block; margin-bottom: 5px;
font-style: italic; /*font-weight: bold;*/
content: attr(author) ' a écrit :';
}
/*
alert overlay
@ -174,6 +129,11 @@ input[type="password"]:focus {
}
span[title='nickname'][data-status='redac'] { color: #2549e4; }
span[title='nickname'][data-status='honor'] { color: #dd9b00; }
span[title='nickname'][data-status='admin'] { color: #ff2121; }
section {
margin: 10px 5%;
}
@ -184,6 +144,19 @@ section h1 {
font-weight: 200; color: #242424;
}
section * {
* {
transition: .15s ease;
}
#overlay { position: fixed; top: -100%; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0);
transition: top 0s ease .3s, background .3s;
z-index: 4;
}
#overlay.opened {
top: 0%;
background: rgba(0, 0, 0, .75);
transition: top 0s, background .3s;
}

94
templates_dev/css/header.css Normal file
View File

@ -0,0 +1,94 @@
/*
header
*/
header {
margin: 0; padding: 10px 16px;
display: flex; align-items: center; justify-content: flex-end;
background: #ffffff; border-bottom: 1px solid #e0e0e0;
}
header h1 {
font-family: Raleway; font-weight: 200;
}
header input + span { position: relative; left: -32px; cursor: pointer; }
header span > svg {
width: 24px; height: 24px; vertical-align: middle;
transition: .15s ease; fill: #969696;
}
header span:hover > svg, header span:focus > svg {
border-color: rgba(32, 128, 255, .6);
fill: #484848;
}
header form {
flex-shrink: 0; margin-right: -23px;
}
header input[type="search"] {
width: 220px; height: 30px; padding: 4px 30px 4px 8px;
border: 1px solid rgba(0, 0, 0, .2); border-radius: 2px;
}
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 {
flex-shrink: 0;
}
#spotlight a {
display: inline-block;
height: 24px; line-height: 24px;
padding: 2px 10px;
background: #728bf6; color: white; font-size: 12px;
border-radius: 2px; border: 1px solid rgba(0, 0, 255, .05);
}
#spotlight a:hover { border-bottom: 1px solid rgba(128, 128, 255, .05);
background: #7a93ff; border-color: rgba(128, 128, 255, .03);
}
/*
subheader
*/
#subheader {
margin: 0; padding: 0 32px;
flex-grow: 1;
}
#subheader * {
margin: 0; padding: 0;
}
#subheader li {
height: 30px; margin: 5px 0;
display: inline;
/*display: flex; align-items: center;*/
}
#subheader li:after {
content: " »";
opacity: 0.3;
}
#subheader li:last-child:after {
content: none;
}
#subheader a {
padding: 0 3px;
/*border-bottom: 1px solid rgba(93, 123, 141, 0);*/
color: #727272;
}
#subheader a:hover, #subheader a:focus {
/*border-bottom: 1px solid rgba(93, 123, 141, 1);*/
color: #22292c;
text-decoration: none
}

8
templates_dev/css/homepage.css
View File

@ -30,21 +30,17 @@
.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;
@ -52,12 +48,14 @@
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-pinned-content h2 + span {
font-style: italic;
}
/*

45
templates_dev/css/navbar.css
View File

@ -5,6 +5,7 @@ nav a {
}
nav a:hover,
nav a:focus {
text-decoration: none;
opacity: 1;
}
@ -84,6 +85,37 @@ nav a:focus {
display: block;
}
#light-menu.extended {
width: 160px;
}
#light-menu.extended #logo img {
width: 40%; margin-left: 10px;
}
#light-menu.extended li {
text-align: left;
}
#light-menu.extended li > a {
flex-direction: row; align-items: center;
justify-content: flex-start;
}
#light-menu.extended li > a > svg {
margin: 0 15px; width: 25px;
}
#light-menu.extended li div {
display: block;
}
#light-menu.extended li > a::after {
display: none;
}
#light-menu.extended li:not(.opened) > a:hover::after,
#light-menu.extended li:not(.opened) > a:focus::after {
display: none;
}
/*nav li span[notifications]:not([notifications="0"])::before {
content: attr(notifications);
display: inline-block; margin-right: 6px;
@ -102,13 +134,16 @@ nav a:focus {
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;
transition: .2s ease;
}
#menu.opened {
left: 60px; /* left-to-right animation */
/*width: 300px;*/ /* scroll animation */
}
#menu.opened.extended {
left: 160px;
}
#menu.scroll-animation {
@ -117,19 +152,25 @@ nav a:focus {
#menu.scroll-animation.opened {
width: 300px;
}
#menu.scroll-animation.opened.extended {
left: 160px;
}
#menu.left-to-right-animation {
left: -240px; width: 300px;
}
#menu.left-to-right-animation.opened {
left: 60px;
}
#menu.left-to-right-animation.opened.extended {
left: 160px;
}
#menu > div {
width: 300px;
display: none;
}
#menu > div.opened {
#menu > div.opened:not(.never-displayed) {
display: block;
}

4
templates_dev/css/responsive.css
View File

@ -11,7 +11,7 @@
border-bottom: 1px solid #adb0b4;
}*/
header input[type="search"] {
font-size: 14px;
font-size: 12px;
}
#menu li {
@ -29,7 +29,7 @@
}
header input[type="search"] {
font-size: 14px;
font-size: 12px;
}
#menu li {

24
templates_dev/css/shoutbox.css
View File

@ -1,26 +1,32 @@
#shoutbox {
margin: 20px 5% 10px 5%;
/*box-shadow: 0 0 2px rgba(0, 0, 0, .4);*/
box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
background: #ffffff;
/*border: 1px solid #999999;*/
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;
/*border-radius: 2px 2px 0 0;
border: 1px solid #999999;*/
}
#shoutbox > input {
width: 100%; padding: 5px 0;
border-radius: 0 0 5px 5px;
border: 1px solid #999999;
#shoutbox > form {
display: flex; align-items: center;
}
#shoutbox > input:focus {
#shoutbox > form > input {
flex-grow: 1;
padding: 5px 0;
/*border-radius: 0 0 2px 2px;*/
/*border: 1px solid #999999;*/
border: none;
}
#shoutbox > form > 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);
}
/* Messages */
#shoutbox > div > div {
padding: 2px 10px;
border-bottom: 1px solid rgba(0, 0, 0, .3);

449
templates_dev/forum.html
View File

@ -1,449 +0,0 @@
<!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>

418
templates_dev/homepage_guest.html
View File

@ -1,418 +0,0 @@
<!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>

81
templates_dev/homepage_member.html
View File

@ -8,14 +8,17 @@
<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/header.css">
<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href="css/footer.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 (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>
<div id="overlay"></div>
<nav>
<ul id="light-menu">
<a id="logo" href="#">
@ -23,7 +26,7 @@
</a>
<li>
<a role="button" label="Compte" tabindex="0">
<a role="button" label="Compte" href="account">
<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>
@ -32,7 +35,16 @@
</li>
<li>
<a role="button" label="Actualités" tabindex="0">
<a role="link" label="Nouveautés" href="notif">
<svg viewBox="0 0 24 24">
<path fill="#ffffff" 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"></path>
</svg>
<div>Nouveautés</div>
</a>
</li>
<li>
<a role="button" label="Actualités" href="#">
<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>
@ -41,7 +53,7 @@
</li>
<li>
<a role="button" label="Forum" tabindex="0">
<a role="button" label="Forum" href="#">
<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>
@ -50,7 +62,7 @@
</li>
<li>
<a role="button" label="Programmes" tabindex="0">
<a role="button" label="Programmes" href="#">
<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>
@ -59,7 +71,7 @@
</li>
<li>
<a role="button" label="Tutoriels" tabindex="0">
<a role="button" label="Tutoriels" href="#">
<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>
@ -68,7 +80,7 @@
</li>
<li>
<a role="button" label="Sprites" tabindex="0">
<a role="button" label="Sprites" href="#">
<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>
@ -77,7 +89,7 @@
</li>
<li>
<a href="#" label="Outils">
<a role="button" label="Outils" href="#">
<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>
@ -95,9 +107,9 @@
</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>
<path fill="#ffffff" 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"></path>
</svg>
Notifications
Boite de réception
</a>
<a href="#">
<svg viewBox="0 0 24 24">
@ -126,6 +138,12 @@
</svg>
Paramètres
</a>
<a role="button" onclick="xTend()" id="extend-menu">
<svg viewBox="0 0 24 24">
<path fill="#ffffff" d="M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z"></path>
</svg>
Étendre le menu
</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>
@ -143,6 +161,8 @@
</div>
{% endif %} -->
<div></div>
<div>
<h2>
<svg viewBox="0 0 24 24">
@ -317,16 +337,15 @@
<div id="container">
<header>
<form>
<input type="search" placeholder="Recherche" />
<a role="button" onclick="this.parentNode.submit();" href="#" class="light-hidden">
<input type="search" placeholder="Rechercher sur Planète Casio..." />
<span id='id' role="button" onclick="this.parentNode.submit();" href="#" class="light-hidden" title='Rechercher'>
<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>
</span>
</form>
<!--<h1>Planète Casio</h1>-->
<div id="spotlight">
<a href="#">Concours</a>
<a href="#">Jeu du mois</a>
@ -343,10 +362,12 @@
<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>Menu Xtended : <input type="button" onclick="xTend();" value="ouvrir" style="padding:0 4px;"></p>
<p>Un overlay à l'ouverture du menu ? <input type="button" value="Oui" onclick="overlay_active = true" style="padding:0 4px;"><input type="button" value="Non" onclick="overlay_active = false" style="padding:0 4px;"></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 id="shoutbox">
<div>
<div>Ceci est un message</div>
<div>Ceci est un message</div>
@ -371,7 +392,7 @@
<div>Ceci est un message</div>
</div>
<input type="text" />
</div>
</div> -->
<section class="home-pinned-content">
<h1>☆ À la une</h1>
@ -380,7 +401,7 @@
<img src="images/IPC.png">
<div>
<h2>Titre article</h2>
<span>Article par <i>Dark Storm</i></span>
<span>Par Dark Storm</span>
</div>
</a></article>
@ -388,7 +409,7 @@
<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>
<span>Par Dark Storm</span>
</div>
</a></article>
@ -396,7 +417,7 @@
<img src="images/IPC.png">
<div>
<h2>Titre Article</h2>
<span>Article par <i>Dark Storm</i></span>
<span>Par Dark Storm</span>
</div>
</a></article>
@ -404,7 +425,7 @@
<img src="images/IPC.png">
<div>
<h2>Titre Article</h2>
<span>Article par <i>Dark Storm</i></span>
<span>Par Dark Storm</span>
</div>
</a></article>
@ -412,7 +433,7 @@
<img src="images/IPC.png">
<div>
<h2>Titre Article</h2>
<span>Article par <i>Dark Storm</i></span>
<span>Par Dark Storm</span>
</div>
</a></article>
</div>
@ -561,23 +582,11 @@
</div>-->
</body>
<script type="text/javascript" src="scripts/cookies.js"></script>
<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]);

BIN
templates_dev/images/370.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
templates_dev/images/5554.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
templates_dev/images/7098.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

13
templates_dev/scripts/cookies.js Normal file
View File

@ -0,0 +1,13 @@
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 ) );
}

69
templates_dev/scripts/trigger_menu.js
View File

@ -5,8 +5,15 @@ 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');");
// Patch for javascript users
if(b[i].getAttribute('role') != "link") {
b[i].removeAttribute('href');
b[i].setAttribute('tabindex', "0");
}
}
var overlay_active = true;
var trigger_menu = function(active) {
var display = function(element) {
element.classList.add('opened');
@ -15,12 +22,14 @@ var trigger_menu = function(active) {
element.classList.remove('opened');
}
var menu = document.getElementById('menu');
var light_menu = document.getElementById('menu');
var buttons = document.getElementById('light-menu').getElementsByTagName('li');
var menus = document.getElementById('menu').getElementsByTagName('div');
var menu = document.getElementById('menu').getElementsByTagName('div');
var overlay = document.getElementById('overlay');
if(active == -1 || buttons[active].classList.contains('opened')) {
hide(menu);
hide(light_menu);
if(overlay_active) hide(overlay);
for(i = 0; i < buttons.length; i++) {
hide(buttons[i]);
}
@ -29,12 +38,13 @@ var trigger_menu = function(active) {
for(i = 0; i < buttons.length; i++) {
if(i != active) {
hide(buttons[i]);
hide(menus[i]);
hide(menu[i]);
}
}
display(buttons[active]);
display(menus[active]);
display(menu);
display(menu[active]);
display(light_menu);
if(overlay_active) display(overlay);
}
}
@ -46,11 +56,18 @@ var mouse_trigger = function(event) {
var active = -1;
for(i = 0; i < buttons.length; i++) {
if(buttons[i].contains(event.target))
active = i;
buttons[i].getElementsByTagName('a')[0].blur();
if(buttons[i].contains(event.target)) {
if(buttons[i].getElementsByTagName('a')[0].getAttribute('role') == "button") {
active = i;
buttons[i].getElementsByTagName('a')[0].blur();
}
else {
location.assign(buttons[i].getElementsByTagName('a')[0].getAttribute('href'));
}
}
}
//alert(active);
trigger_menu(active);
}
}
@ -66,7 +83,41 @@ var keyboard_trigger = function(event) {
}
}
}
if(event.keyCode == 27) {
trigger_menu(-1);
}
}
document.onclick = mouse_trigger;
document.onkeypress = keyboard_trigger;
function xTend() {
var extend = function(element) {
element.classList.add('extended');
}
var shrink = function(element) {
element.classList.remove('extended');
}
var light_menu = document.getElementById('light-menu');
var container = document.getElementById('container');
var menu = document.getElementById('menu');
var button = document.getElementById('extend-menu');
if(light_menu.classList.contains('extended')) {
shrink(light_menu);
shrink(container);
shrink(menu);
button.innerHTML = '<svg viewBox="0 0 24 24"><path fill="#ffffff" d="M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z"></path></svg> \
Étendre le menu';
} else {
extend(light_menu);
extend(container);
extend(menu);
button.innerHTML = '<svg viewBox="0 0 24 24"><path fill="#ffffff" d="M19.5,3.09L15,7.59V4H13V11H20V9H16.41L20.91,4.5L19.5,3.09M4,13V15H7.59L3.09,19.5L4.5,20.91L9,16.41V20H11V13H4Z"></path></svg> \
Réduire le menu';
}
}

193
templates_dev/topic_1234_2.html
View File

@ -1,18 +1,24 @@
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<title>Planète Casio : design template</title>
<title>Planète Casio vous souhaite une bonne rentrée des classes</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/header.css">
<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href="css/footer.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">
<style type="text/css">
</style>
</head>
<body>
<nav>
@ -315,17 +321,24 @@
<div id="container">
<header>
<div id="subheader" class="light-hidden">
<ul>
<li><a href="#">Forum</a></li>
<li><a href="#">Actualités</a></li>
<li><a href="#">Planète Casio vous souhaite une bonne rentrée des classes</a></li>
</ul>
</div>
<form>
<input type="search" placeholder="Recherche" />
<a role="button" onclick="this.parentNode.submit();" href="#" class="light-hidden">
<input type="search" placeholder="Rechercher sur Planète Casio..." />
<span id='id' role="button" onclick="this.parentNode.submit();" href="#" class="light-hidden" title='Rechercher'>
<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>
</span>
</form>
<!--<h1>Planète Casio</h1>-->
<div id="spotlight">
<a href="#">Concours</a>
<a href="#">Jeu du mois</a>
@ -333,15 +346,9 @@
</header>
<!-- {% block content %} -->
<div class='content-border'>
<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>
@ -366,12 +373,154 @@
<div>Ceci est un message</div>
<div>Ceci est un message</div>
</div>
<input type="text" />
<form>
<input type="text" />
<span>
<a>Send</a>
<a>Sound</a>
<a>Refre</a>
<a>Newtab</a>
<a>Expand</a>
</span>
</form>
</div>
-->
<h1>Planète casio vous souhaite une bonne rentrée des classes</h1>
<article>
<div class="author">
<img src="images/5554.png" alt="avatar Positon">
<span title="nickname" data-status="redac">Positon</span>
<span title="level">Niveau 24</span>
</div>
<div class="content">
<p><strong>Gambadant d’allégresse au retour du lycée, vous rentrez chez vous et, abandonnant votre sac dans les limbes de l’oubli, vous ne pouvez retenir vos effusions de joie. Accueillant avec félicité le retour des vacances, vous… heu, attendez… toutes mes excuses, on m’informe à l’instant qu’il s’agirait en réalité de la rentrée des classes.</strong></p>
<p>Le bac pour les uns, la découverte du lycée pour les autres, cette année sera, en somme, comme toutes les autres : plutôt chargée. Mais ne vous inquiétez pas, notre banque d’<a href="#">utilitaires</a> et de <a href="#">cours</a> est là pour soutenir nos mathophobes face à la dizaine de mois de cours qui s’approche, inexorablement. Ce <a href="#">logiciel de transfert</a> vous sera utile pour arriver à vos fins.</p>
<p>Pour les autres qui peuvent se permettre de glander pendant que leurs camarades en sont encore à la moitié de leurs exercices, notre <a href="#">répertoire de jeux</a> est là pour tuer le temps. Si vous ne possédez qu’une graph 35+ et que vous souhaitez avoir accès aux add-ins, notre <a href="#">tutoriel</a> est là pour ça.<br />
Notez que je décline toute responsabilité en cas d’addiction trop prononcée et de toute conséquence sur votre cursus scolaire.</p>
<p>Et si vous avez l’esprit tordu, <span style="text-decoration: line-through;">bienvenue parmi nous !</span> vous pouvez commencer à <a href="#">apprendre la programmation en basic casio</a>, ce qui vous fera prendre de l’avance, mais surtout vous permettra de faire vos propres jeux et d’en mettre plein la vue à vos amis (mais ne vous la pétez pas non plus, c’est assez mal vu).</p>
<p>Je vous mets également un lien vers <a href="#">cet article</a> de l'année dernière qui vous explique comment équilibrer facilement vos réactions chimiques à l’aide des matrices, parce que oui, c’est quand même une méthode balèze !</p>
<div class="meta">
<time datetime="2014-09-01T15:35:00+01:00">Le 1er septembre 2014 à 15h35</time>
</div>
</div>
</article>
<article onclick="changeColor(this)">
<div class="author">
<img src="images/370.gif" alt="avatar Totoyo">
<span title="nickname" data-status="honor">Totoyo</span>
<span title="level">Niveau 137</span>
</div>
<div class="content">
<p>J'adore l'article ! Ça donne envie de le lire jusqu'au bout !</p>
<div class="meta">
<time datetime="2014-09-01T15:35:00+01:00">Le 1er septembre 2014 à 15h35</time>
</div>
</div>
</article>
<article>
<div class="author">
<img src="images/7098.png" alt="avatar Lephenixnoir">
<span title="nickname" data-status="admin">Lephenixnoir</span>
<span title="level">Niveau 96</span>
</div>
<div class="content">
<quote author="Positon"><p>Et si vous avez l’esprit tordu [...]</p></quote>
<p>Moi j'ai plutôt l'impression que c'est nous qui avons l'esprit tordu…</p>
<div class="meta">
<time datetime="2014-09-01T15:35:00+01:00">Le 1er septembre 2014 à 15h35</time>
</div>
</div>
</article>
<article>
<div class="author">
<img src="images/370.gif" alt="avatar Totoyo">
<span title="nickname" data-status="honor">Totoyo</span>
<span title="level">Niveau 137</span>
</div>
<div class="content">
<p>J'imagine bien que c'est pas général ^^, c'est simplement qu'il y a certaines facs (mais ça doit aussi pouvoir se voir dans d'autres secteurs) qui font la rentrée bien plus tard que les autres (genre même Novembre !), c'était surtout par rapport à Dodormeur qui nous a dit ça l'autre jour pour son cas :p.</p>
<quote author="Lephenixnoir">
<quote author="Positon"><p>Et si vous avez l’esprit tordu [...]</p></quote>
<p>Moi j'ai plutôt l'impression que c'est nous qui avons l'esprit tordu…</p>
</quote>
<p>Tordu pour tordu… (<em>Citation apocryphe</em>)</p>
<details>
<summary>Cliquez pour voir un truc de dingue !</summary>
<p>Ouais en fait non, j'aime pas les titres putaclic.</p>
<p>Et les spoilers imbriqués ?</p>
<details>
<summary>Cliquez pour voir un truc de dingue !</summary>
<p>Ouais en fait non, j'aime pas les titres putaclic.</p>
<p>Et les spoilers imbriqués ?</p>
<details>
<summary>Cliquez pour voir un truc de dingue !</summary>
<p>Je me répète non ?</p>
</details>
</details>
</details>
<p>Ouais, je vois…</p>
<div class="meta">
<time datetime="2014-09-01T15:35:00+01:00">Le 1er septembre 2014 à 15h35</time>
</div>
</div>
</article>
<article>
<div class="author">
<img src="images/3864.png" alt="avatar Dark Storm">
<span title="nickname" data-status="admin">Dark Storm</span>
<span title="level">Niveau 94</span>
</div>
<div class="content">
<p>Bonne rentrée à tous ! (Je sais, c'est bateau mais j'avais rien d'autre à mettre :p)</p>
<div class="meta">
<time datetime="2014-09-01T15:35:00+01:00">Le 1er septembre 2014 à 15h35</time>
<div class="moderation">
<a href="#">Modifier</a> &ndash;
<a href="#">Supprimer</a>
</div>
</div>
</div>
</div> <!-- .content-border -->
<div class="pagination">
<a href="#">Précédent</a> ⋅
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<span>…</span>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a> ⋅
<a href="#">Suivant</a>
</div>
<section>
Forum
</section>
<!-- {% end block content %} -->
</div>
@ -419,6 +568,14 @@ function getCookie(name) {
return unescape( document.cookie.substring( debut+name.length+1, end ) );
}
var color = 0;
function changeColor(element) {
var colors = ["#f4c0c0", "#f8d2d2", "#fcebeb", "#ffffff"];
color = (color + 1) % colors.length;
element.style.background = colors[color];
}
if(getCookie('pc_notif') == 'true')
document.getElementsByClassName('alert')[0].parentNode.removeChild(document.getElementsByClassName('alert')[0]);
if(getCookie('pc_notif_2') == 'true')