forked from vergnet/site-accueil-insa
l'orthographe pu**in
This commit is contained in:
Guillaume Joffre
parent
063049112b
commit
e81557331d
3 changed files with 344 additions and 105 deletions
|
|
@ -43,7 +43,7 @@ if(isset($_POST['send'])) {
|
||||||
$color = htmlspecialchars($_POST['color']);
|
$color = htmlspecialchars($_POST['color']);
|
||||||
$opacity = (float) htmlspecialchars($_POST['opacity']);
|
$opacity = (float) htmlspecialchars($_POST['opacity']);
|
||||||
$order_start = (int) htmlspecialchars($_POST['order_start']);
|
$order_start = (int) htmlspecialchars($_POST['order_start']);
|
||||||
$len = (float) (100/20)*htmlspecialchars($_POST['length']);
|
$len = (float) (4.1)*htmlspecialchars($_POST['length']);
|
||||||
$num_planning = (int) htmlspecialchars($_POST['num_planning']);
|
$num_planning = (int) htmlspecialchars($_POST['num_planning']);
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,72 +5,178 @@ main {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
section {
|
.planning-container {
|
||||||
display: block;
|
height: 82vh;
|
||||||
|
width: 100%;
|
||||||
background-color: rgba(255,255,255,0.5);
|
background-color: rgba(255,255,255,0.5);
|
||||||
width: 80%;
|
color: white;
|
||||||
max-width: 800px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
padding: 50px;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
.column {
|
||||||
margin: 50px;
|
width: 13%;
|
||||||
border-collapse: collapse;
|
height: 82vh;
|
||||||
height: 80vh;
|
float: left;
|
||||||
margin-left: auto;
|
background-image: linear-gradient(rgba(0,0,0,.08) 50%, transparent 50%);
|
||||||
margin-right: auto;
|
background-size: 1px 10%;
|
||||||
}
|
}
|
||||||
|
|
||||||
table th, td {
|
.column.time {
|
||||||
border: 0;
|
width: 9%;
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
table td {
|
.column.days {
|
||||||
vertical-align: top;
|
width: 16%;
|
||||||
|
background-color: #34495e;
|
||||||
|
background-image: none;
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tr-th {
|
.day_title {
|
||||||
background-color: rgba(255, 255, 255, 0.5);
|
height: 5%;
|
||||||
|
background-color: #34495e;
|
||||||
|
font-size: 0.8em;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 4.1vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tr-th th {
|
.hour {
|
||||||
padding: 20px;
|
height: 5%;
|
||||||
color: black;
|
background-color: rgba(52, 73, 94,0.9);
|
||||||
font-size: 1.2rem;
|
font-size: 1em;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 4.1vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tr-td {
|
.day {
|
||||||
height: 100%;
|
border-radius: 2.5vh;
|
||||||
|
background: #6b83db;
|
||||||
|
height: 5vh;
|
||||||
|
line-height: 5vh;
|
||||||
|
margin: 5px 5px 12px;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.hours {
|
.hour:after {
|
||||||
background-color: rgba(255, 255, 255, 0.7);
|
content: ":00";
|
||||||
border-top: 2px solid black;
|
|
||||||
color: black;
|
|
||||||
border-right:2px solid black;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
div.content {
|
.class {
|
||||||
display : flex;
|
display: flex;
|
||||||
align-items : center;
|
align-content: center;
|
||||||
justify-content : center;
|
width: 100%;
|
||||||
border: 2px solid black;
|
height: 4.1vh;
|
||||||
|
background-color: transparent;
|
||||||
|
font-size: 2vmin;
|
||||||
|
font-weight: 300;
|
||||||
|
padding-left: 10px;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1020px) {
|
.lundi .day_title:after,
|
||||||
table {
|
.day0:after {
|
||||||
width: 100%;
|
content: "undi";
|
||||||
|
}
|
||||||
|
|
||||||
|
.mardi .day_title:after,
|
||||||
|
.day1:after {
|
||||||
|
content: "rdi";
|
||||||
|
}
|
||||||
|
|
||||||
|
.mercredi .day_title:after,
|
||||||
|
.day2:after {
|
||||||
|
content: "rcrdi";
|
||||||
|
}
|
||||||
|
|
||||||
|
.jeudi .day_title:after,
|
||||||
|
.day3:after {
|
||||||
|
content: "eudi";
|
||||||
|
}
|
||||||
|
|
||||||
|
.vendredi .day_title:after,
|
||||||
|
.day4:after {
|
||||||
|
content: "endredi";
|
||||||
|
}
|
||||||
|
|
||||||
|
.samedi .day_title:after,
|
||||||
|
.day5:after {
|
||||||
|
content: "amedi";
|
||||||
|
}
|
||||||
|
|
||||||
|
.dimanche .day_title:after,
|
||||||
|
.day6:after {
|
||||||
|
content: "imanche";
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 701px) and (max-width: 950px) {
|
||||||
|
.hour:after {
|
||||||
|
content: "h";
|
||||||
}
|
}
|
||||||
|
|
||||||
.tr-th th {
|
.column div.day_title:after {
|
||||||
height: width;
|
content: none;
|
||||||
padding: 5px;
|
}
|
||||||
font-size: 0.5rem;
|
}
|
||||||
|
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
|
||||||
|
.column {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column.days {
|
||||||
|
display: block;
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column.time {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lundi,
|
||||||
|
.mardi,
|
||||||
|
.mercredi,
|
||||||
|
.jeudi,
|
||||||
|
.vendredi,
|
||||||
|
.samedi,
|
||||||
|
.dimanche {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.planning-container[selected$="0"] .lundi {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.planning-container[selected$="1"] .mardi {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.planning-container[selected$="2"] .mercredi {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.planning-container[selected$="3"] .jeudi {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.planning-container[selected$="4"] .vendredi {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.planning-container[selected$="5"] .samedi {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.planning-container[selected$="6"] .dimanche {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 400px) {
|
||||||
|
|
||||||
|
.column div.day:after {
|
||||||
|
content: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
251
planning.php
251
planning.php
|
|
@ -9,6 +9,7 @@ if(isset($_GET['planning']) AND !empty(['planning']))
|
||||||
} else {
|
} else {
|
||||||
header('Location: planning.php?planning=1');
|
header('Location: planning.php?planning=1');
|
||||||
}
|
}
|
||||||
|
|
||||||
?>
|
?>
|
||||||
<main>
|
<main>
|
||||||
|
|
||||||
|
|
@ -22,67 +23,199 @@ if(isset($_GET['planning']) AND !empty(['planning']))
|
||||||
<span class="circles circles-bottom"></span>
|
<span class="circles circles-bottom"></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<?php
|
<?php if(isset($planning)) { ?>
|
||||||
if(isset($planning)) {
|
|
||||||
?>
|
<div id="planning-container" class="planning-container" selected="0">
|
||||||
<table>
|
|
||||||
<tr class="tr-th">
|
<div id="days" class="column days">
|
||||||
<th width="12.5%">Heures</th>
|
<div class="day_title">Jour</div>
|
||||||
<th width="12.5%">Lundi</th>
|
|
||||||
<th width="12.5%">Mardi</th>
|
<div class="day day0">L</div>
|
||||||
<th width="12.5%">Mercredi</th>
|
<div class="day day1">Ma</div>
|
||||||
<th width="12.5%">Jeudi</th>
|
<div class="day day2">Me</div>
|
||||||
<th width="12.5%">Vendredi</th>
|
<div class="day day3">J</div>
|
||||||
<th width="12.5%">Samedi</th>
|
<div class="day day4">V</div>
|
||||||
<th width="12.5%">Dimanche</th>
|
<div class="day day5">S</div>
|
||||||
</tr>
|
<div class="day day6">D</div>
|
||||||
<tr class="tr-td">
|
|
||||||
<td>
|
<script defer>
|
||||||
<?php
|
|
||||||
for($i=7;$i<=26;$i++) {
|
const daysPLA = document.getElementsByClassName("day");
|
||||||
if($i > 23) {
|
const containerPLA = document.getElementById("planning-container");
|
||||||
?>
|
|
||||||
<div style="height: <?= 100/20 ?>%;" class="hours">
|
|
||||||
<?= $i-24 ?>
|
|
||||||
</div>
|
for (let i = 0; i < daysPLA.length; i++) {
|
||||||
<?php
|
const day = daysPLA[i];
|
||||||
} else {
|
day.addEventListener("click", (e) => {
|
||||||
?>
|
let number = day.classList.item(1).charAt(3)
|
||||||
<div style="height: <?= 100/20 ?>%;" class="hours">
|
containerPLA.setAttribute("selected", number)
|
||||||
<?= $i ?>
|
});
|
||||||
</div>
|
}
|
||||||
<?php
|
|
||||||
}
|
</script>
|
||||||
}
|
</div>
|
||||||
?>
|
|
||||||
</td>
|
<div class="column time">
|
||||||
<?php
|
|
||||||
for($day=1;$day<=7;$day++) {
|
<div class="day_title">Heure</div>
|
||||||
echo "<td style='border-bottom: 2px solid black;'>";
|
<div class="hour">07</div>
|
||||||
$req1 = $db->prepare('SELECT title, description, color, length FROM planning_insa WHERE day = ? AND num_planning = ? ORDER BY order_start ASC');
|
<div class="hour">08</div>
|
||||||
$req1->execute(array($day, $planning));
|
<div class="hour">09</div>
|
||||||
while($r1 = $req1->fetch()) {
|
<div class="hour">10</div>
|
||||||
?>
|
|
||||||
<div style="background-color: <?= $r1['color'] ?>; height: <?= $r1['length'] ?>%; border: 0; color: white; border-right: 2px solid black; border-top: 2px solid black; ?>" class="content">
|
<div class="hour">11</div>
|
||||||
<span><?= $r1['title'] ?></span>
|
<div class="hour">12</div>
|
||||||
</div>
|
<div class="hour">13</div>
|
||||||
<?php
|
<div class="hour">14</div>
|
||||||
}
|
<div class="hour">15</div>
|
||||||
|
|
||||||
|
<div class="hour">16</div>
|
||||||
|
<div class="hour">17</div>
|
||||||
|
<div class="hour">18</div>
|
||||||
|
<div class="hour">19</div>
|
||||||
|
<div class="hour">20</div>
|
||||||
|
|
||||||
|
<div class="hour">21</div>
|
||||||
|
<div class="hour">22</div>
|
||||||
|
<div class="hour">23</div>
|
||||||
|
<div class="hour">00</div>
|
||||||
|
<div class="hour">01</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="lundi" class="column lundi">
|
||||||
|
<div class="day_title">L</div>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
// For every planned activity on day 0
|
||||||
|
$req1 = $db->prepare('SELECT title, description, color, length FROM planning_insa WHERE day = 0 AND num_planning = ? ORDER BY order_start ASC');
|
||||||
|
$req1->execute(array($day, $planning));
|
||||||
|
while($r1 = $req1->fetch()) {
|
||||||
|
?>
|
||||||
|
<div class="class" style="background-color: <?= $r1['color'] ?>; height: <?= $r1['length'] ?>vh;">
|
||||||
|
<?= $r1['title'] ?>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="mardi" class="column mardi">
|
||||||
|
<div class="day_title">Ma</div>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
// For every planned activity on day 0
|
||||||
|
$req1 = $db->prepare('SELECT title, description, color, length FROM planning_insa WHERE day = 1 AND num_planning = ? ORDER BY order_start ASC');
|
||||||
|
$req1->execute(array($day, $planning));
|
||||||
|
while($r1 = $req1->fetch()) {
|
||||||
|
?>
|
||||||
|
<div class="class" style="background-color: <?= $r1['color'] ?>; height: <?= $r1['length'] ?>vh;">
|
||||||
|
<?= $r1['title'] ?>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="mercredi" class="column mercredi">
|
||||||
|
<div class="day_title">Me</div>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
// For every planned activity on day 0
|
||||||
|
$req1 = $db->prepare('SELECT title, description, color, length FROM planning_insa WHERE day = 2 AND num_planning = ? ORDER BY order_start ASC');
|
||||||
|
$req1->execute(array($day, $planning));
|
||||||
|
while($r1 = $req1->fetch()) {
|
||||||
|
?>
|
||||||
|
<div class="class" style="background-color: <?= $r1['color'] ?>; height: <?= $r1['length'] ?>vh;">
|
||||||
|
<?= $r1['title'] ?>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="jeudi" class="column jeudi">
|
||||||
|
<div class="day_title">J</div>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
// For every planned activity on day 0
|
||||||
|
$req1 = $db->prepare('SELECT title, description, color, length FROM planning_insa WHERE day = 3 AND num_planning = ? ORDER BY order_start ASC');
|
||||||
|
$req1->execute(array($day, $planning));
|
||||||
|
while($r1 = $req1->fetch()) {
|
||||||
|
?>
|
||||||
|
<div class="class" style="background-color: <?= $r1['color'] ?>; height: <?= $r1['length'] ?>vh;">
|
||||||
|
<?= $r1['title'] ?>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="vendredi" class="column vendredi">
|
||||||
|
<div class="day_title">V</div>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
// For every planned activity on day 0
|
||||||
|
$req1 = $db->prepare('SELECT title, description, color, length FROM planning_insa WHERE day = 4 AND num_planning = ? ORDER BY order_start ASC');
|
||||||
|
$req1->execute(array($day, $planning));
|
||||||
|
while($r1 = $req1->fetch()) {
|
||||||
|
?>
|
||||||
|
<div class="class" style="background-color: <?= $r1['color'] ?>; height: <?= $r1['length'] ?>vh;">
|
||||||
|
<?= $r1['title'] ?>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="samedi" class="column samedi">
|
||||||
|
<div class="day_title">S</div>
|
||||||
|
<?php
|
||||||
|
// For every planned activity on day 0
|
||||||
|
$req1 = $db->prepare('SELECT title, description, color, length FROM planning_insa WHERE day = 5 AND num_planning = ? ORDER BY order_start ASC');
|
||||||
|
$req1->execute(array($day, $planning));
|
||||||
|
while($r1 = $req1->fetch()) {
|
||||||
|
?>
|
||||||
|
<div class="class" style="background-color: <?= $r1['color'] ?>; height: <?= $r1['length'] ?>vh;">
|
||||||
|
<?= $r1['title'] ?>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="dimanche" class="column dimanche">
|
||||||
|
<div class="day_title">D</div>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
// For every planned activity on day 0
|
||||||
|
$req1 = $db->prepare('SELECT title, description, color, length FROM planning_insa WHERE day = 6 AND num_planning = ? ORDER BY order_start ASC');
|
||||||
|
$req1->execute(array($day, $planning));
|
||||||
|
while($r1 = $req1->fetch()) {
|
||||||
|
?>
|
||||||
|
<div class="class" style="background-color: <?= $r1['color'] ?>; height: <?= $r1['length'] ?>vh;">
|
||||||
|
<?= $r1['title'] ?>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<?php } else { ?>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
Clique sur le planning que tu souhaites visionner : <br>
|
||||||
|
<font color="red">On les a pas encore en fait</font>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<?php } ?>
|
||||||
|
|
||||||
echo "</td>";
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
<?php
|
|
||||||
} else {
|
|
||||||
?>
|
|
||||||
<section>
|
|
||||||
Clique sur le planning que tu souhaites visionner : <br>
|
|
||||||
<font color="red">On les a pas encore en fait</font>
|
|
||||||
</section>
|
|
||||||
<?php } ?>
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
$infopage = ["", "Planning", ob_get_clean(), "", "planning"]; //relativepath, pagetitle, pagecontent, pagescript, pagename | cf structure/template.php ligne 2 à 6
|
$infopage = ["", "Planning", ob_get_clean(), "", "planning"]; //relativepath, pagetitle, pagecontent, pagescript, pagename | cf structure/template.php ligne 2 à 6
|
||||||
include("structure/template.php");
|
include("structure/template.php");
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue