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']);
|
||||
$opacity = (float) htmlspecialchars($_POST['opacity']);
|
||||
$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']);
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -5,72 +5,178 @@ main {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
section {
|
||||
display: block;
|
||||
.planning-container {
|
||||
height: 82vh;
|
||||
width: 100%;
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
width: 80%;
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 50px;
|
||||
font-size: 1.2rem;
|
||||
color: white;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
table {
|
||||
margin: 50px;
|
||||
border-collapse: collapse;
|
||||
height: 80vh;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
.column {
|
||||
width: 13%;
|
||||
height: 82vh;
|
||||
float: left;
|
||||
background-image: linear-gradient(rgba(0,0,0,.08) 50%, transparent 50%);
|
||||
background-size: 1px 10%;
|
||||
}
|
||||
|
||||
table th, td {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.column.time {
|
||||
width: 9%;
|
||||
}
|
||||
|
||||
table td {
|
||||
vertical-align: top;
|
||||
.column.days {
|
||||
width: 16%;
|
||||
background-color: #34495e;
|
||||
background-image: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tr-th {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
.day_title {
|
||||
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 {
|
||||
padding: 20px;
|
||||
color: black;
|
||||
font-size: 1.2rem;
|
||||
.hour {
|
||||
height: 5%;
|
||||
background-color: rgba(52, 73, 94,0.9);
|
||||
font-size: 1em;
|
||||
text-align: center;
|
||||
line-height: 4.1vh;
|
||||
}
|
||||
|
||||
.tr-td {
|
||||
height: 100%;
|
||||
.day {
|
||||
border-radius: 2.5vh;
|
||||
background: #6b83db;
|
||||
height: 5vh;
|
||||
line-height: 5vh;
|
||||
margin: 5px 5px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.hours {
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
border-top: 2px solid black;
|
||||
color: black;
|
||||
border-right:2px solid black;
|
||||
.hour:after {
|
||||
content: ":00";
|
||||
}
|
||||
|
||||
div.content {
|
||||
display : flex;
|
||||
align-items : center;
|
||||
justify-content : center;
|
||||
border: 2px solid black;
|
||||
.class {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
height: 4.1vh;
|
||||
background-color: transparent;
|
||||
font-size: 2vmin;
|
||||
font-weight: 300;
|
||||
padding-left: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (max-width: 1020px) {
|
||||
table {
|
||||
width: 100%;
|
||||
.lundi .day_title:after,
|
||||
.day0:after {
|
||||
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 {
|
||||
height: width;
|
||||
padding: 5px;
|
||||
font-size: 0.5rem;
|
||||
.column div.day_title:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
@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 {
|
||||
header('Location: planning.php?planning=1');
|
||||
}
|
||||
|
||||
?>
|
||||
<main>
|
||||
|
||||
|
|
@ -22,67 +23,199 @@ if(isset($_GET['planning']) AND !empty(['planning']))
|
|||
<span class="circles circles-bottom"></span>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
if(isset($planning)) {
|
||||
?>
|
||||
<table>
|
||||
<tr class="tr-th">
|
||||
<th width="12.5%">Heures</th>
|
||||
<th width="12.5%">Lundi</th>
|
||||
<th width="12.5%">Mardi</th>
|
||||
<th width="12.5%">Mercredi</th>
|
||||
<th width="12.5%">Jeudi</th>
|
||||
<th width="12.5%">Vendredi</th>
|
||||
<th width="12.5%">Samedi</th>
|
||||
<th width="12.5%">Dimanche</th>
|
||||
</tr>
|
||||
<tr class="tr-td">
|
||||
<td>
|
||||
<?php
|
||||
for($i=7;$i<=26;$i++) {
|
||||
if($i > 23) {
|
||||
?>
|
||||
<div style="height: <?= 100/20 ?>%;" class="hours">
|
||||
<?= $i-24 ?>
|
||||
</div>
|
||||
<?php
|
||||
} else {
|
||||
?>
|
||||
<div style="height: <?= 100/20 ?>%;" class="hours">
|
||||
<?= $i ?>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
?>
|
||||
</td>
|
||||
<?php
|
||||
for($day=1;$day<=7;$day++) {
|
||||
echo "<td style='border-bottom: 2px solid black;'>";
|
||||
$req1 = $db->prepare('SELECT title, description, color, length FROM planning_insa WHERE day = ? AND num_planning = ? ORDER BY order_start ASC');
|
||||
$req1->execute(array($day, $planning));
|
||||
while($r1 = $req1->fetch()) {
|
||||
?>
|
||||
<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">
|
||||
<span><?= $r1['title'] ?></span>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
<?php if(isset($planning)) { ?>
|
||||
|
||||
<div id="planning-container" class="planning-container" selected="0">
|
||||
|
||||
<div id="days" class="column days">
|
||||
<div class="day_title">Jour</div>
|
||||
|
||||
<div class="day day0">L</div>
|
||||
<div class="day day1">Ma</div>
|
||||
<div class="day day2">Me</div>
|
||||
<div class="day day3">J</div>
|
||||
<div class="day day4">V</div>
|
||||
<div class="day day5">S</div>
|
||||
<div class="day day6">D</div>
|
||||
|
||||
<script defer>
|
||||
|
||||
const daysPLA = document.getElementsByClassName("day");
|
||||
const containerPLA = document.getElementById("planning-container");
|
||||
|
||||
|
||||
|
||||
for (let i = 0; i < daysPLA.length; i++) {
|
||||
const day = daysPLA[i];
|
||||
day.addEventListener("click", (e) => {
|
||||
let number = day.classList.item(1).charAt(3)
|
||||
containerPLA.setAttribute("selected", number)
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<div class="column time">
|
||||
|
||||
<div class="day_title">Heure</div>
|
||||
<div class="hour">07</div>
|
||||
<div class="hour">08</div>
|
||||
<div class="hour">09</div>
|
||||
<div class="hour">10</div>
|
||||
|
||||
<div class="hour">11</div>
|
||||
<div class="hour">12</div>
|
||||
<div class="hour">13</div>
|
||||
<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>
|
||||
|
||||
<?php
|
||||
$infopage = ["", "Planning", ob_get_clean(), "", "planning"]; //relativepath, pagetitle, pagecontent, pagescript, pagename | cf structure/template.php ligne 2 à 6
|
||||
include("structure/template.php");
|
||||
|
|
|
|||
Loading…
Reference in a new issue