...
 
Commits (3)
* { margin: 0px; padding: 0px; }
<<<<<<< HEAD
=======
body {
font-family: sans-serif, arial;
font-size: 14px;
......@@ -146,4 +148,5 @@ input[type=text].focus {
}
>>>>>>> c40b92a83e13605eec61046ee36e78273b57f9f7
......@@ -8,12 +8,23 @@
</head>
<body>
<<<<<<< HEAD
<header>
</header>
<section>
</section>
<footer>
</footer>
=======
<div id='form'>
</div>
>>>>>>> c40b92a83e13605eec61046ee36e78273b57f9f7
......
$(document).ready(function() {
<<<<<<< HEAD
});
=======
var form = [
{
name: "firstname",
......@@ -167,4 +175,5 @@ function createMultiselect(field) {
return container;
}
\ No newline at end of file
}
>>>>>>> c40b92a83e13605eec61046ee36e78273b57f9f7
#mazeDiv {
position: relative;
}
#mazeDiv div {
width: 10px;
height: 10px;
float: left;
}
.wall {
background-color: black;
}
.floor {
}
.lineEnd {
clear: left;
}
#mazeDiv .player {
background-color: green;
position: absolute;
}
#mazeDiv .me {
background-color: orangeRed;
}
.playerPseudo {
position: absolute;
font-family: arial;
font-size: 0.7em;
top: -10px;
left: 15px;
}
#coin {
background-color: yellow;
position: absolute;
}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/animate.css" />
</head>
<body>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/main.js'></script>
</body>
</html>
var url = "http://srv-tpinfo.iut-acy.local:1337/";
$(document).ready(function() {
// Récup du labyrinthe
$.post(
url+"lab",
{ pseudo: "ldama", password: "7369" },
function(maze) {
var mazeDiv = $("<div/>");
mazeDiv.attr("id","mazeDiv");
$("body").append(mazeDiv);
for(var y=0; y<maze.length; y++) {
for(var x=0; x<maze[y].length; x++) {
var element = $("<div/>");
if (maze[y][x] == 1) { // Wall = 1
element.addClass("wall");
} else { // Floor = 0
element.addClass("floor");
}
if (x==0)
element.addClass("lineEnd");
mazeDiv.append(element);
}
}
setInterval(play, 10);
},
"json"
);
// Gestion des événements claviers
$("body").keyup(function(event) {
switch(event.keyCode) {
case 38: move( 0, -1); break;
case 40: move( 0, 1); break;
case 37: move(-1, 0); break;
case 39: move( 1, 0); break;
};
});
});
//------------------------------------------
var speed = { x: 0, y: 0 };
function move(vx, vy) {
speed.x = vx;
speed.y = vy;
}
//------------------------------------------
var count = 0;
function play() {
if (count == 0)
players();
else if (count == 1)
moveMe();
else
coin();
count = (count+1)%3;
}
//------------------------------------------
function moveMe() {
// if (speed.x ==0 && speed.y == 0) {
speed.x = coinPos.x - me.x;
if (speed.x != 0)
speed.x = speed.x/Math.abs(speed.x);
speed.y = coinPos.y - me.y;
if (speed.y != 0)
speed.y = speed.y/Math.abs(speed.y);
console.log(speed);
// }
$.post(
url+"move",
{
pseudo: "ldama",
password: "7369",
v: speed
},
function(response) {
speed = { x: 0, y: 0 };
},
"json"
);
}
//------------------------------------------
var me = { x: 0, y: 0 };
function players() {
$.post(
url+"players",
{ pseudo: "ldama", password: "7369" },
function(players) {
for(var pseudo in players) {
var player = players[pseudo];
var playerDiv;
if ($("#"+pseudo).length > 0) {
playerDiv = $("#"+pseudo);
} else {
playerDiv = $("<div/>");
playerDiv
.attr("id",pseudo)
.addClass("player")
.addClass(pseudo=="ldama"?"me":"opponent")
.append("<div class='playerPseudo'>"
+pseudo+" "+player.score+"</div>");
$("#mazeDiv").append(playerDiv);
}
playerDiv.children(".playerPseudo")
.text(pseudo+" "+player.score);
if (pseudo == "ldama")
me = player.position;
playerDiv.css({
top: player.position.y*10,
left: player.position.x*10,
});
}
},
"json"
);
}
//------------------------------------------
var coinPos = { x: 0, y: 0 };
function coin() {
$.post(
url+"coin",
{ pseudo: "ldama", password: "7369" },
function(coinP) {
coinPos = coinP;
var coinDiv;
if ($("#coin").length > 0) {
coinDiv = $("#coin");
} else {
coinDiv = $("<div/>");
coinDiv
.attr("id","coin")
$("#mazeDiv").append(coinDiv);
}
coinDiv.css({
top: coinPos.y*10,
left: coinPos.x*10,
});
},
"json"
);
}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<canvas width='800' height='450'></canvas>
<audio controls src='sounds/NancySinatra-BangBangMyBabyShotMeDown.mp3'></audio>
<script src='main.js'></script>
</body>
</html>
\ No newline at end of file
var canvas = document.querySelector("canvas");
var c = canvas.getContext("2d");
var w = canvas.width;
var h = canvas.height;
var ball = { x: w/2, y: h/2, vx: 0, vy: 0, r: w/20 };
var audio = document.querySelector("audio");
var audioCtx = new AudioContext();
var analyser = audioCtx.createAnalyser();
var source = audioCtx.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(audioCtx.destination);
audio.play();
var frequencyData = new Uint8Array(analyser.frequencyBinCount);
function analyseSound(timestamp) {
analyser.getByteFrequencyData(frequencyData);
c.clearRect(0,0,w,h);
c.beginPath();
c.fillStyle = "orange";
var imin = 0;
var imax = 256;
var sum = 0;
for(var i in frequencyData) {
var freq = frequencyData[i];
if (i>=imin && i<imax)
sum += freq;
c.beginPath();
c.fillRect(
w*i/frequencyData.length,
h/2 - freq/2,
w/frequencyData.length,
freq);
}
var avg = sum/(imax-imin);
ball.r = 50+avg*0.5;
c.beginPath();
c.fillStyle = "rgba(0,0,0,0.5)";
c.arc(ball.x, ball.y, ball.r, 0, Math.PI*2, true);
c.fill();
ball.vy += 0.1;
if (ball.y+ball.vy+ball.r > h)
ball.vy = -ball.vy*0.9;
ball.y += ball.vy;
window.requestAnimationFrame(analyseSound);
}
window.requestAnimationFrame(analyseSound);
\ No newline at end of file
canvas {
background-color: #FFDDAA;
}
\ No newline at end of file
[{"title":"Au revoir la-haut","director":"Albert Dupontel"},{"title":"Inception","director":"Christopher Nolan"},{"title":"Predestination","director":"Michael Spierig"},{"title":"hop","director":"plop"},{"title":"hop","director":"plop"},{"title":"Starwars","director":"Lucas"},{"title":"a","director":"b"},{"title":"aa","director":"aa"},{"title":"Les promesses de l'ombre","director":"???"},{"title":"qdsqsd","director":"qsd"},{"title":"a","director":"a"},{"title":"a","director":"a"},{"title":"a","director":"a"},{"title":"a","director":"a"}]
\ No newline at end of file
<?php
$data = json_decode(file_get_contents("data.json"), true);
if (isset($_POST["action"])) {
if ($_POST["action"] == "add") {
$data[] = array(
"title" => $_POST["title"],
"director" => $_POST["director"]
);
file_put_contents("data.json", json_encode($data));
echo json_encode(array("ok"=>true));
}
} else {
echo json_encode($data);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vidéothèque</title>
<link rel="stylesheet" type="text/css" href="css/style">
</head>
<body>
<header>
<h1>Vidéothèque</h1>
</header>
<nav>
<ul>
<li id='link-home'>Accueil</li>
<li id='link-admin'>Administration</li>
</ul>
</nav>
<section id='content'>
</section>
<footer>
</footer>
<script src='js/main.js'></script>
</body>
</html>
//-------------------------------------------------------------------
document.addEventListener("DOMContentLoaded", function() {
document.querySelector("#link-home").onclick = displayHome;
document.querySelector("#link-admin").onclick = displayAdmin;
displayHome();
});
//-------------------------------------------------------------------
function displayHome() {
let content = document.querySelector("#content");
content.innerHTML = "";
let h1 = document.createElement("h1");
h1.appendChild(document.createTextNode("Accueil"));
content.appendChild(h1);
let ul = document.createElement("ul");
content.appendChild(ul);
ajax("controller/service.php", { }, function(data) {
for(let movie of data) {
let li = document.createElement("li");
li.appendChild(document.createTextNode(movie.title));
ul.appendChild(li);
}
});
}
//-------------------------------------------------------------------
function displayAdmin() {
document.querySelector("#content").innerHTML =
"<h1>Admin</h1>"+
"<p><label>Titre</label><input id='title'/></p>"+
"<p><label>Réalisateur</label><input id='director'/></p>"+
"<p><input id='add-movie' type='button' value='ajouter'/></p>";
document.querySelector("#add-movie").onclick = function() {
let title = document.querySelector("#title").value;
let director = document.querySelector("#director").value;
if (title != "" && director != "") {
ajax("controller/service.php", {
"action": "add",
"title": title,
"director": director
}, function(response) {
displayMessage("Film ajouté");
displayHome();
});
}
}
}
function displayMessage(message) {
var section = document.querySelector("#content");
section.insertAdjacentHTML('beforebegin',
"<div class='message'>"+message+"</div>");
setTimeout(function() {
var messages = document.querySelectorAll(".message");
for(let message of messages)
document.querySelector("body").removeChild(message);
}, 1000);
}
//-------------------------------------------------------------------
function ajax(url, params, callback) {
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.responseType = "json";
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
callback(xhr.response);
}
}
var s = "";
for(let field in params)
s += field+"="+params[field]+"&";
s = s.substr(0, s.length-1);
xhr.send(s);
}
This source diff could not be displayed because it is too large. You can view the blob instead.
$(document).ready(function() {
let url = "service.php";
$("#button-jokes").click(allJokes);
$("#button-admin").click(startAdmin);
$("#admin").hide();
$("#button-jokes").addClass("selected");
if (!cookie("page"))
cookie("page","home");
if (cookie("page") == "home")
allJokes();
else if (cookie("page") == "admin")
startAdmin();
else
allJokes();
function cookie(name, value) {
if (value) {
document.cookie = name+"="+value;
} else {
let namePos = document.cookie.indexOf(name);
let value = null;
if (namePos != -1) {
let semicolonPos = document.cookie.indexOf(";",namePos);
if (semicolonPos == -1)
semicolonPos = document.cookie.length;
value = document.cookie.substr(namePos+name.length+1, semicolonPos-namePos-name.length-1);
}
return value;
}
}
function allJokes() {
$("#admin").hide();
$("#jokes").show();
$("#button-jokes").toggleClass("selected");
$("#button-admin").toggleClass("selected");
displayAllJokes();
cookie("page","home");
}
function startAdmin() {
$("#admin").show();
$("#jokes").hide();
$("#button-jokes").toggleClass("selected");
$("#button-admin").toggleClass("selected");
displayAdmin();
cookie("page","admin");
}
function displayAllJokes() {
$.get(
url,
{ action: "joke-read" },
function(jokes) {
$("#all-jokes").empty();
for(let joke of jokes) {
let jokeDiv = $("<div/>");
jokeDiv.data("joke",joke);
jokeDiv.addClass("joke");
$("#all-jokes").append(jokeDiv);
let p = $("<p/>");
p.addClass("joke-text");
p.append(joke.text);
jokeDiv.append(p);
p = $("<p/>");
p.addClass("joke-user");
p.append('<i class="fa fa-user" aria-hidden="true"></i> ' + joke.user);
jokeDiv.append(p);
}
},
"json"
);
}
var addButtonFlag = false;
function displayAdmin() {
//---------------------------------------------
if (!addButtonFlag)
$("#add-joke-button")
.click(function() {
let text = $("#joke-text").val().trim();
if (text != "") {
$.get(
url,
{ action: "joke-create",
text: text,
user: "Luc" },
function(data) {
$("#joke-text").val("");
},
"json");
allJokes();
}
addButtonFlag = true;
});
//-----------------------------------------------
$.get(
url,
{ action: "joke-read" },
function(jokes) {
$("#admin #jokes").empty();
for(let joke of jokes) {
let jokeDiv = $("<div/>");
jokeDiv.data("joke",joke);
jokeDiv.addClass("joke-to-delete");
jokeDiv.append(joke.text.substr(0,10)+"...");
jokeDiv.draggable();
$("#admin #jokes").append(jokeDiv);
}
}
,"json");
$("#trash").droppable({
drop: function(event, ui) {
ui.draggable.remove();
}
})
}
});
I hope you love Font Awesome. If you've found it useful, please do me a favor and check out my latest project,
Fort Awesome (https://fortawesome.com). It makes it easy to put the perfect icons on your website. Choose from our awesome,
comprehensive icon sets or copy and paste your own.
Please. Check it out.
-Dave Gandy
This source diff could not be displayed because it is too large. You can view the blob instead.
// Animated Icons
// --------------------------
.@{fa-css-prefix}-spin {
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
.@{fa-css-prefix}-pulse {
-webkit-animation: fa-spin 1s infinite steps(8);
animation: fa-spin 1s infinite steps(8);
}
@-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
// Bordered & Pulled
// -------------------------
.@{fa-css-prefix}-border {
padding: .2em .25em .15em;
border: solid .08em @fa-border-color;
border-radius: .1em;
}
.@{fa-css-prefix}-pull-left { float: left; }
.@{fa-css-prefix}-pull-right { float: right; }
.@{fa-css-prefix} {
&.@{fa-css-prefix}-pull-left { margin-right: .3em; }
&.@{fa-css-prefix}-pull-right { margin-left: .3em; }
}
/* Deprecated as of 4.4.0 */
.pull-right { float: right; }
.pull-left { float: left; }
.@{fa-css-prefix} {
&.pull-left { margin-right: .3em; }
&.pull-right { margin-left: .3em; }
}
// Base Class Definition
// -------------------------
.@{fa-css-prefix} {
display: inline-block;
font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration
font-size: inherit; // can't have font-size inherit on line above, so need to override
text-rendering: auto; // optimizelegibility throws things off #1094
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// Fixed Width Icons
// -------------------------
.@{fa-css-prefix}-fw {
width: (18em / 14);
text-align: center;
}
/*!
* Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/
@import "variables.less";
@import "mixins.less";
@import "path.less";
@import "core.less";
@import "larger.less";
@import "fixed-width.less";
@import "list.less";
@import "bordered-pulled.less";
@import "animated.less";
@import "rotated-flipped.less";
@import "stacked.less";
@import "icons.less";
@import "screen-reader.less";
// Icon Sizes
// -------------------------
/* makes the font 33% larger relative to the icon container */
.@{fa-css-prefix}-lg {
font-size: (4em / 3);
line-height: (3em / 4);
vertical-align: -15%;
}
.@{fa-css-prefix}-2x { font-size: 2em; }
.@{fa-css-prefix}-3x { font-size: 3em; }
.@{fa-css-prefix}-4x { font-size: 4em; }
.@{fa-css-prefix}-5x { font-size: 5em; }
// List Icons
// -------------------------
.@{fa-css-prefix}-ul {
padding-left: 0;
margin-left: @fa-li-width;
list-style-type: none;
> li { position: relative; }
}
.@{fa-css-prefix}-li {
position: absolute;
left: -@fa-li-width;
width: @fa-li-width;
top: (2em / 14);
text-align: center;
&.@{fa-css-prefix}-lg {
left: (-@fa-li-width + (4em / 14));
}
}
// Mixins
// --------------------------
.fa-icon() {
display: inline-block;
font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration
font-size: inherit; // can't have font-size inherit on line above, so need to override
text-rendering: auto; // optimizelegibility throws things off #1094
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-icon-rotate(@degrees, @rotation) {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation})";
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees);
transform: rotate(@degrees);
}
.fa-icon-flip(@horiz, @vert, @rotation) {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation}, mirror=1)";
-webkit-transform: scale(@horiz, @vert);
-ms-transform: scale(@horiz, @vert);
transform: scale(@horiz, @vert);
}
// Only display content to screen readers. A la Bootstrap 4.
//
// See: http://a11yproject.com/posts/how-to-hide-content/
.sr-only() {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
// Use in conjunction with .sr-only to only display content when it's focused.
//
// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
//
// Credit: HTML5 Boilerplate
.sr-only-focusable() {
&:active,
&:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
}
/* FONT PATH
* -------------------------- */
@font-face {
font-family: 'FontAwesome';
src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}');
src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'),
url('@{fa-font-path}/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2'),
url('@{fa-font-path}/fontawesome-webfont.woff?v=@{fa-version}') format('woff'),
url('@{fa-font-path}/fontawesome-webfont.ttf?v=@{fa-version}') format('truetype'),
url('@{fa-font-path}/fontawesome-webfont.svg?v=@{fa-version}#fontawesomeregular') format('svg');
// src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
font-weight: normal;
font-style: normal;
}
// Rotated & Flipped Icons
// -------------------------
.@{fa-css-prefix}-rotate-90 { .fa-icon-rotate(90deg, 1); }
.@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); }
.@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); }
.@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1, 0); }
.@{fa-css-prefix}-flip-vertical { .fa-icon-flip(1, -1, 2); }
// Hook for IE8-9
// -------------------------
:root .@{fa-css-prefix}-rotate-90,
:root .@{fa-css-prefix}-rotate-180,
:root .@{fa-css-prefix}-rotate-270,
:root .@{fa-css-prefix}-flip-horizontal,
:root .@{fa-css-prefix}-flip-vertical {
filter: none;
}
// Screen Readers
// -------------------------
.sr-only { .sr-only(); }
.sr-only-focusable { .sr-only-focusable(); }
// Stacked Icons
// -------------------------
.@{fa-css-prefix}-stack {
position: relative;
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
vertical-align: middle;
}
.@{fa-css-prefix}-stack-1x, .@{fa-css-prefix}-stack-2x {
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
.@{fa-css-prefix}-stack-1x { line-height: inherit; }
.@{fa-css-prefix}-stack-2x { font-size: 2em; }
.@{fa-css-prefix}-inverse { color: @fa-inverse; }
// Spinning Icons
// --------------------------
.#{$fa-css-prefix}-spin {
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
.#{$fa-css-prefix}-pulse {
-webkit-animation: fa-spin 1s infinite steps(8);
animation: fa-spin 1s infinite steps(8);
}
@-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
// Bordered & Pulled
// -------------------------
.#{$fa-css-prefix}-border {
padding: .2em .25em .15em;
border: solid .08em $fa-border-color;
border-radius: .1em;
}
.#{$fa-css-prefix}-pull-left { float: left; }
.#{$fa-css-prefix}-pull-right { float: right; }
.#{$fa-css-prefix} {
&.#{$fa-css-prefix}-pull-left { margin-right: .3em; }
&.#{$fa-css-prefix}-pull-right { margin-left: .3em; }
}
/* Deprecated as of 4.4.0 */
.pull-right { float: right; }
.pull-left { float: left; }
.#{$fa-css-prefix} {
&.pull-left { margin-right: .3em; }
&.pull-right { margin-left: .3em; }
}
// Base Class Definition
// -------------------------
.#{$fa-css-prefix} {
display: inline-block;
font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
font-size: inherit; // can't have font-size inherit on line above, so need to override
text-rendering: auto; // optimizelegibility throws things off #1094
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// Fixed Width Icons
// -------------------------
.#{$fa-css-prefix}-fw {
width: (18em / 14);
text-align: center;
}
// Icon Sizes
// -------------------------
/* makes the font 33% larger relative to the icon container */
.#{$fa-css-prefix}-lg {
font-size: (4em / 3);
line-height: (3em / 4);
vertical-align: -15%;
}
.#{$fa-css-prefix}-2x { font-size: 2em; }
.#{$fa-css-prefix}-3x { font-size: 3em; }
.#{$fa-css-prefix}-4x { font-size: 4em; }
.#{$fa-css-prefix}-5x { font-size: 5em; }
// List Icons
// -------------------------
.#{$fa-css-prefix}-ul {
padding-left: 0;
margin-left: $fa-li-width;
list-style-type: none;
> li { position: relative; }
}
.#{$fa-css-prefix}-li {
position: absolute;
left: -$fa-li-width;
width: $fa-li-width;
top: (2em / 14);
text-align: center;
&.#{$fa-css-prefix}-lg {
left: -$fa-li-width + (4em / 14);
}
}
// Mixins
// --------------------------
@mixin fa-icon() {
display: inline-block;
font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
font-size: inherit; // can't have font-size inherit on line above, so need to override
text-rendering: auto; // optimizelegibility throws things off #1094
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@mixin fa-icon-rotate($degrees, $rotation) {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})";
-webkit-transform: rotate($degrees);
-ms-transform: rotate($degrees);
transform: rotate($degrees);
}
@mixin fa-icon-flip($horiz, $vert, $rotation) {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)";
-webkit-transform: scale($horiz, $vert);
-ms-transform: scale($horiz, $vert);
transform: scale($horiz, $vert);
}
// Only display content to screen readers. A la Bootstrap 4.
//
// See: http://a11yproject.com/posts/how-to-hide-content/
@mixin sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
// Use in conjunction with .sr-only to only display content when it's focused.
//
// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
//
// Credit: HTML5 Boilerplate
@mixin sr-only-focusable {
&:active,
&:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
}
/* FONT PATH
* -------------------------- */
@font-face {
font-family: 'FontAwesome';
src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
// src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
font-weight: normal;
font-style: normal;
}
// Rotated & Flipped Icons
// -------------------------
.#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); }
.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); }
.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); }
.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); }
.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); }
// Hook for IE8-9
// -------------------------
:root .#{$fa-css-prefix}-rotate-90,
:root .#{$fa-css-prefix}-rotate-180,
:root .#{$fa-css-prefix}-rotate-270,
:root .#{$fa-css-prefix}-flip-horizontal,
:root .#{$fa-css-prefix}-flip-vertical {
filter: none;
}
// Screen Readers
// -------------------------
.sr-only { @include sr-only(); }
.sr-only-focusable { @include sr-only-focusable(); }
// Stacked Icons
// -------------------------
.#{$fa-css-prefix}-stack {
position: relative;
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
vertical-align: middle;
}
.#{$fa-css-prefix}-stack-1x, .#{$fa-css-prefix}-stack-2x {
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
.#{$fa-css-prefix}-stack-1x { line-height: inherit; }
.#{$fa-css-prefix}-stack-2x { font-size: 2em; }
.#{$fa-css-prefix}-inverse { color: $fa-inverse; }
/*!
* Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/
@import "variables";
@import "mixins";
@import "path";
@import "core";
@import "larger";
@import "fixed-width";
@import "list";
@import "bordered-pulled";
@import "animated";
@import "rotated-flipped";
@import "stacked";
@import "icons";
@import "screen-reader";
* {
margin: 0px;
padding: 0px;
position: relative;
}
@font-face {
font-family: coolvetica;
src: url("coolvetica.ttf");
}
body {
font-size: 14px;
display: flex;
flex-direction: column;
min-height: 100vh;
font-family: coolvetica;
}
header {
background-color: black;
color: white;
flex: 0 0 100px;
line-height: 100px;
}
header::after {
content: "";
position: absolute;
width: 0px;
height: 0px;
border-left: solid 100vw black;
border-bottom: solid 3.3vw white;
}
header h1 {
margin-left: 30px;s
}
nav {
flex: 0 0 50px;
margin-top: 3.25vw;
}
nav ul {
margin-left: 20px;
margin-top: -5px;
}
nav li {
display: inline-block;
width: 100px;
padding: 0px 20px;
background-color: orangered;
color: black;
margin-right: 10px;
cursor: pointer;
transition: all 0.5s ease;
border-bottom: solid 0px white;
height: 30px;
line-height: 30px;
text-align: center;
}
nav li:nth-child(2) {
padding-top: 5px;
}
nav li::before {
content: "";
position: absolute;
top: -5px;
left: 0px;
width: 0px;
height: 0px;
border-right: solid 140px orangered;
border-top: solid 5px transparent;
}
nav li:hover {
border-bottom: solid 10px black;
}
nav li.selected {
border-bottom: solid 10px orangered;
}
section {
flex: 1 1 auto;
padding: 20px;
}
#all-jokes {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.joke {
flex: 1 1 300px;
background-color: orangered;
margin: 10px;
padding: 10px;
}
.joke-text::before {
content: '« ';
}
.joke-text {
font-weight: bold;
}
.joke-text::after {
content: ' »';
}
#admin section {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#admin article {
border: solid 2px black;
padding: 10px;
margin: 10px;
flex: 1 0 350px;
}
#admin textarea {
width: 350px;
max-width: 350px;
height: 200px;
border: solid 2px black;
margin: 10px;
}
#admin button {
background-color: black;
cursor: pointer;
transition: all 0.5s ease;
padding: 5px 10px;
border: none;
color: white;
}
#admin button:hover {
background-color: orangered;
}
#admin #jokes {
}
.joke-to-delete {
background-color: orangered;
display: inline-block;
margin: 5px;
padding: 5px;
}
#admin #trash {
width: 100px;
height: 100px;
border: solid 3px black;
border-radius: 20px;
}
footer {
flex: 0 0 20px;
line-height: 20px;
text-align: center;
background-color: black;
color: white;
}
\ No newline at end of file
{"users":[],"jokes":[{"id":15153600988483,"text":"Un jour, un \u00e9tudiant a boss\u00e9 !","user":"Luc"},{"id":15153600988695,"text":"Un jour, un \u00e9tudiant a boss\u00e9 !","user":"Luc"},{"id":15153601174544,"text":"Bonne ann\u00e9e !","user":"Luc"}]}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Les blagues des DIM</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<h1>Les blagues des DIM</h1>
<div id='auth'>
</div>
</header>
<nav>
<ul>
<li id='button-jokes'><i class="fa fa-smile-o" aria-hidden="true"></i>
Les blagues</li>
<li id='button-admin'><i class="fa fa-unlock-alt" aria-hidden="true"></i>
Admin</li>
</ul>
</nav>
<section id='jokes'>
<h1>Toutes les blagues</h1>
<div id='all-jokes'>
</div>
</section>
<section id='admin'>
<h1>Administration</h1>
<section>
<article>
<h2>Une nouvelle blague ?</h2>
<p>
<textarea id='joke-text'></textarea>
</p>
<p>
<button id='add-joke-button'>Ajouter</button>
</p>
</article>
<article>
<h2>Supprimer une blague :( </h2>
<div id='jokes'></div>
<div id='trash'></div>
</article>
</section>
</section>
<footer><i class="fa fa-cc" aria-hidden="true"></i>
Luc Damas</footer>
<script src='client/jquery.js'></script>
<script src='client/jquery-ui.min.js'></script>
<script src='client/main.js'></script>
</body>
</html>
\ No newline at end of file
<?php
$filename = "data.json";
if (!file_exists($filename))
file_put_contents($filename, '{ "users": [], "jokes": [] }');
$data = json_decode(file_get_contents($filename), true);
$params = array();
foreach($_POST as $k=>$v) $params[$k] = $v;
foreach($_GET as $k=>$v) $params[$k] = $v;
if (isset($params["action"])) {
//-------------------------------------------- joke-read
if ($params["action"] == "joke-read") {
echo json_encode($data["jokes"]);
}
//-------------------------------------------- joke-create
else if ($params["action"] == "joke-create") {
if (isset($params["text"]) && isset($params["user"])) {
$text = str_replace('"',"'",strip_tags($params["text"]));
$user = str_replace('"',"'",strip_tags($params["user"]));
$data["jokes"][] = array(
"id" => round(10000*microtime(true)),
"text" => $text,
"user" => $user
);
file_put_contents($filename, json_encode($data));
echo json_encode(array("ok"=>"joke-create"));
} else
echo json_encode(array("error"=>"joke-create: text, user required"));
}
//-------------------------------------------- joke-reset
else if ($params["action"] == "joke-reset") {
$data["jokes"] = array();
file_put_contents($filename, json_encode($data));
echo json_encode(array("ok"=>"joke-reset"));
}
//-------------------------------------------- joke-delete
else if ($params["action"] == "joke-delete") {
$ids = array_map(function($element) {return $element['id'];}, $data["jokes"]);
if (isset($params["id"])) {
$key = array_search($params["id"], $ids);
if ($key === false)
echo json_encode(array("error"=>"ID unknown (delete)"));
else {
array_splice($data["jokes"],$key,1);
file_put_contents($filename, json_encode($data));
echo json_encode(array("ok"=>"joke-delete"));
}