forked from rebillar/site-accueil-insa
Compare commits
No commits in common. "f741ed4afcc5d6e7954a93ff5e6afa643a8b38ae" and "b6536ce19912f2400a928c3548e16b171e1394ff" have entirely different histories.
f741ed4afc
...
b6536ce199
8 changed files with 194 additions and 159 deletions
|
@ -1,11 +1,12 @@
|
||||||
.menu {
|
.menu {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
bottom: -12vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: fit-content;
|
height: 25vh;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
transition: transform 0.3s;
|
transition: transform 0.3s;
|
||||||
bottom: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -20,9 +21,22 @@
|
||||||
height: auto;
|
height: auto;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: rgba(64, 98, 63, 0.7); /* Add a semi-transparent background color for readability */
|
background-color: rgba(64, 98, 63, 0.7); /* Add a semi-transparent background color for readability */
|
||||||
|
bottom: 5vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 800px) {
|
||||||
|
/* Add styles for smartphones screens */
|
||||||
|
#menu ul {
|
||||||
|
height: auto;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu li {
|
||||||
|
margin: 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
#menu li {
|
#menu li {
|
||||||
margin: 0 10px;
|
margin: 0 10px;
|
||||||
|
@ -33,100 +47,90 @@ margin: 0 10px;
|
||||||
#menu a {
|
#menu a {
|
||||||
display: block; /* Add this line to make the link fill the entire menu item */
|
display: block; /* Add this line to make the link fill the entire menu item */
|
||||||
padding: 10px; /* Add some padding for better readability and clickable area */
|
padding: 10px; /* Add some padding for better readability and clickable area */
|
||||||
color: #c32c2c;
|
color: #c25151;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
background-image: url('/assets/img/buisson.svg'); /* Add this line to set the link background image */
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-image: url('/assets/img/buisson.svg');
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#menu a:hover{
|
#menu a:hover{
|
||||||
color: #e01111;
|
color: #c22828;
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.mobile-menu {
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
top: 0; left: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 20;
|
||||||
|
|
||||||
|
height: 0;
|
||||||
|
background: rgba(15, 15, 23, 0);
|
||||||
|
|
||||||
/*hide the mobile menu by default*/
|
transition: background-color 0.2s linear;
|
||||||
|
}
|
||||||
|
|
||||||
.topnav{
|
.mobile-menu .containerF3g {
|
||||||
visibility: hidden;
|
width: 100%; height: 100%;
|
||||||
height: 0px;
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 2vh 60px;
|
||||||
|
min-height: 100vh;
|
||||||
|
justify-content: center;
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu-link {
|
||||||
|
min-width: 100px;
|
||||||
|
width: 50%;
|
||||||
|
display: block;
|
||||||
|
opacity: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
transform: translateY(10%);
|
||||||
|
transition: transform 0.2s ease-out, opacity 0.2s linear 0.05s;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.mobile-menu.open .mobile-menu-link {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-link:hover text {
|
||||||
|
fill: #FFDC00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-brick {
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
span.close-mobile-menu {
|
||||||
/* Add styles for smartphones screens */
|
color: #FFF;
|
||||||
@media all and (max-width: 800px) {
|
font-size: 80px;
|
||||||
|
|
||||||
|
|
||||||
.menu{
|
|
||||||
visibility: hidden;
|
|
||||||
height: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Style the navigation menu */
|
|
||||||
.topnav {
|
|
||||||
visibility: visible;
|
|
||||||
overflow-y: scroll;
|
|
||||||
background-color: #333;
|
|
||||||
position: fixed;
|
|
||||||
width: 95%;
|
|
||||||
z-index: 100;
|
|
||||||
border-radius: 10px;
|
|
||||||
margin-top: 1vh;
|
|
||||||
height: auto;
|
|
||||||
margin-left: 2.5%;
|
|
||||||
margin-right: 2.5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hide the links inside the navigation menu (except for logo/home) */
|
|
||||||
.topnav #mobile_menu_links {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Style navigation menu links */
|
|
||||||
.topnav a {
|
|
||||||
color: white;
|
|
||||||
padding: 1vh 1vw;
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 4vh;
|
|
||||||
display: block;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.topnav li {
|
|
||||||
display: flex;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Style the hamburger menu */
|
|
||||||
.topnav a.icon {
|
|
||||||
background: black;
|
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
-webkit-user-select: none; /* Safari */
|
||||||
top: 0;
|
-moz-user-select: none; /* Firefox */
|
||||||
}
|
-ms-user-select: none; /* IE10+/Edge */
|
||||||
|
user-select: none; /* Standard */
|
||||||
/* Add a grey background color on mouse-over */
|
cursor: pointer;
|
||||||
.topnav a:hover {
|
bottom: 0;
|
||||||
background-color: #ddd;
|
right: 20px;
|
||||||
color: black;
|
transition: color 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
span.close-mobile-menu:hover {
|
||||||
background-color: rgb(27, 170, 22);;
|
color: #FFDC00;
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,64 @@
|
||||||
|
body {
|
||||||
|
color: white;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-jaune h1 {
|
||||||
|
margin: 0 0 0.5em;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
section h1 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section h4 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main_content {
|
||||||
|
display: block;
|
||||||
|
background-color: rgba(255,255,255,0); //pour mettre un magnifique fond
|
||||||
|
width: 40%;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
display: block;
|
||||||
|
width: 80%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 20px auto auto;
|
||||||
|
align-items: center;
|
||||||
|
border: 5px solid white;
|
||||||
|
background: rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
section ul {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
section li {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section .title_com {
|
||||||
|
width: 100%;
|
||||||
|
background-color: white;
|
||||||
|
color: black;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 10px 0px 10px 0px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.fonction_bureau {
|
||||||
|
display: inline-block;
|
||||||
|
background-color: white;
|
||||||
|
color: black;
|
||||||
|
padding: 10px;
|
||||||
|
margin-top: 0;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
|
@ -19,13 +19,8 @@
|
||||||
|
|
||||||
#decompte{
|
#decompte{
|
||||||
font-size: 7vh;
|
font-size: 7vh;
|
||||||
color: rgb(40, 230, 11);
|
|
||||||
background-color: rgba(27, 187, 205, 0.188);
|
|
||||||
border-radius: 10px;
|
|
||||||
width: 95%;
|
|
||||||
margin-left: 2.5%;
|
|
||||||
margin-right: 2.5%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 200%;
|
height: 200%;
|
||||||
font-size: 10vh;
|
font-size: 10vh;
|
||||||
color: rgb(230, 11, 11);
|
color: rgb(196, 23, 23);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -13,12 +13,7 @@
|
||||||
|
|
||||||
#decompte{
|
#decompte{
|
||||||
font-size: 7vh;
|
font-size: 7vh;
|
||||||
color: rgb(40, 230, 11);
|
|
||||||
background-color: rgba(27, 187, 205, 0.188);
|
|
||||||
border-radius: 10px;
|
|
||||||
width: 95%;
|
|
||||||
margin-left: 2.5%;
|
|
||||||
margin-right: 2.5%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -98,20 +98,6 @@ a.linkmail:hover {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
ajoute une petite marge au dessus de la pancarte sur mobile pour laisser
|
|
||||||
de la place a la navbar
|
|
||||||
|
|
||||||
ajuste aussi la taille du texte de la pancarte
|
|
||||||
*/
|
|
||||||
@media all and (max-width: 800px) {
|
|
||||||
|
|
||||||
.pancarte{
|
|
||||||
margin-top: 10vh;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.pancarte .title {
|
.pancarte .title {
|
||||||
padding: 3vw 4.5vw;
|
padding: 3vw 4.5vw;
|
||||||
color: black;
|
color: black;
|
||||||
|
@ -185,8 +171,6 @@ footer {
|
||||||
margin-top: 2vh;
|
margin-top: 2vh;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
font-size: 3vh;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
14
coms.php
14
coms.php
|
@ -1,14 +1,11 @@
|
||||||
<?php
|
<?php
|
||||||
ob_start(); // Start reading html
|
ob_start(); // Start reading html
|
||||||
include "assets/fonts/color.php";
|
|
||||||
|
|
||||||
?>
|
?>
|
||||||
<main>
|
<main>
|
||||||
|
|
||||||
<div id="main_content">
|
<div id="main_content">
|
||||||
<div class="zone_txt">
|
<div class="zone_txt">
|
||||||
<div class='title_com'><?= colored_text("Le Bureau") ?></div>
|
<div class='title_com'>Le Bureau</div>
|
||||||
<hr>
|
|
||||||
<?php
|
<?php
|
||||||
$fonction = ["Président", "Vice présidente", "Trésorier", "Secrétaire"];
|
$fonction = ["Président", "Vice présidente", "Trésorier", "Secrétaire"];
|
||||||
$prenom = ["Eléa", "Arthur", "Paul", "Cannelle"];
|
$prenom = ["Eléa", "Arthur", "Paul", "Cannelle"];
|
||||||
|
@ -22,7 +19,6 @@ include "assets/fonts/color.php";
|
||||||
echo "<h4>".$prenom[$i]." ".$nom[$i]."</h4>";
|
echo "<h4>".$prenom[$i]." ".$nom[$i]."</h4>";
|
||||||
echo "<a href='mailto:".$mail[$i]."' class='linkmail'>".$mail[$i]."</a>";
|
echo "<a href='mailto:".$mail[$i]."' class='linkmail'>".$mail[$i]."</a>";
|
||||||
echo "</li>";
|
echo "</li>";
|
||||||
echo "<hr>";
|
|
||||||
}
|
}
|
||||||
echo "</ul>";
|
echo "</ul>";
|
||||||
?>
|
?>
|
||||||
|
@ -30,9 +26,8 @@ include "assets/fonts/color.php";
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
function respo($name, $prenom, $nom, $mail) {
|
function respo($name, $prenom, $nom, $mail) {
|
||||||
echo "<div class=\"zone_txt\">";
|
echo "<section>";
|
||||||
echo "<div class='title_com'>".colored_text($name)."</div>";
|
echo "<div class='title_com'>".$name."</div>";
|
||||||
echo "<hr>";
|
|
||||||
echo "<ul>";
|
echo "<ul>";
|
||||||
for($i = 0; $i < count($prenom); $i++) {
|
for($i = 0; $i < count($prenom); $i++) {
|
||||||
echo "<li>";
|
echo "<li>";
|
||||||
|
@ -41,8 +36,7 @@ include "assets/fonts/color.php";
|
||||||
echo "</li>";
|
echo "</li>";
|
||||||
}
|
}
|
||||||
echo "</ul>";
|
echo "</ul>";
|
||||||
|
echo "</section>";
|
||||||
echo "</div>";
|
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
|
|
||||||
|
|
|
@ -12,14 +12,13 @@ include "assets/scripts/globals.php"
|
||||||
<ul>
|
<ul>
|
||||||
<?php
|
<?php
|
||||||
|
|
||||||
|
|
||||||
for($i = 0; $i <= 17; $i++){
|
for($i = 0; $i <= 17; $i++){
|
||||||
|
|
||||||
|
|
||||||
echo "<li><a href=\"".$SITE_MAP[$i][0]."\">".$SITE_MAP[$i][1]."</a></li>";
|
echo "<li><a href=\"".$SITE_MAP[$i][0]."\">".$SITE_MAP[$i][1]."</a></li>";
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
?>
|
?>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
@ -30,45 +29,39 @@ for($i = 0; $i <= 17; $i++){
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- librairie d'icones libres de droit font-awesome pour mettre le petit logo hamburger-->
|
<!-- Sur téléphone -->
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
<nav class="mobile-menu" id="mobile-menu">
|
||||||
|
|
||||||
<!-- la barre de navigation -->
|
<div class="containerF3g">
|
||||||
<div class="topnav">
|
<div class="mobile-grid">
|
||||||
<a href="/index.php" class="active">P'tit menu :)</a>
|
|
||||||
|
|
||||||
<!-- les liens (cachés par défaut) -->
|
|
||||||
<div id="mobile_menu_links">
|
|
||||||
|
|
||||||
|
<?php
|
||||||
|
for($i = 0; $i <= 21; $i++) {
|
||||||
|
if($i%2 == 0) {
|
||||||
|
// pair
|
||||||
|
$link = $lien_y_0[$i/2];
|
||||||
|
$text = $texte_y_0[$i/2];
|
||||||
|
} else {
|
||||||
|
//impair
|
||||||
|
$link = $lien_y_1[($i-1)/2];
|
||||||
|
$text = $texte_y_1[($i-1)/2];
|
||||||
|
}
|
||||||
|
echo
|
||||||
|
'<a href="'.$link.'" class="mobile-menu-link">
|
||||||
|
<svg class="mobile-brick menu-link" viewBox="-2 -2 51 21">
|
||||||
|
<use xlink:href="#Brick" width="47" height="17" x="0" y="0"/>
|
||||||
|
<text x="23.8" y="8.5">
|
||||||
|
'.$text.'
|
||||||
|
</text>
|
||||||
|
</svg>
|
||||||
|
</a>';
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<?php
|
<span id="close-mobile-menu" class="close-mobile-menu">
|
||||||
|
x
|
||||||
|
</span>
|
||||||
|
|
||||||
for($i = 0; $i <= 17; $i = $i + 2){
|
</nav>
|
||||||
|
|
||||||
// affiche les liens 2 par 2
|
|
||||||
echo "<li><a href=\"".$SITE_MAP[$i][0]."\">".$SITE_MAP[$i][1]."</a>
|
|
||||||
<a href=\"".$SITE_MAP[$i+1][0]."\">".$SITE_MAP[$i+1][1]."</a></li>";
|
|
||||||
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- appelle la fonction de changement d'etat du menu quand cliqué -->
|
|
||||||
<a href="javascript:void(0);" class="icon" onclick="toggle_mobile_menu()">
|
|
||||||
<i class="fa fa-bars"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
/* Change l'etat entre visible et non visible du menu déroulant */
|
|
||||||
function toggle_mobile_menu() {
|
|
||||||
var x = document.getElementById("mobile_menu_links");
|
|
||||||
if (x.style.display === "block") {
|
|
||||||
x.style.display = "none";
|
|
||||||
} else {
|
|
||||||
x.style.display = "block";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
|
@ -23,6 +23,12 @@ header("Cache-Control: no-cache, must-revalidate");
|
||||||
<link rel = "shortcut icon" href = "<?= $relativepath ?>assets/img/ico_promo_60.ico" >
|
<link rel = "shortcut icon" href = "<?= $relativepath ?>assets/img/ico_promo_60.ico" >
|
||||||
|
|
||||||
|
|
||||||
|
<!-- EDIT : la police (modifiée) est host dans assets/fonts/*.otf, et définie dans assets/css/template.css il n'y a plus besoin de la charger depuis cdnfonts -->
|
||||||
|
<!-- ICI C'EST LA POLICE QU'IL FAUDRA CHANGER SUIVANT LE THEME, il faudra penser à modifier le fichier css car ici on importe seulement la police mais dans le css on l'attribut au texte -->
|
||||||
|
<!--link href="http://fonts.cdnfonts.com/css/new-super-mario-font-u" rel="stylesheet"-->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<title><?= $pagetitle ?> | INSAT Accueil</title>
|
<title><?= $pagetitle ?> | INSAT Accueil</title>
|
||||||
|
|
||||||
|
|
||||||
|
@ -54,7 +60,7 @@ header("Cache-Control: no-cache, must-revalidate");
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
if(isset($txt_pancarte) && $txt_pancarte != ""){
|
if(isset($txt_pancarte)){
|
||||||
|
|
||||||
echo "<div class=\"pc_container\">
|
echo "<div class=\"pc_container\">
|
||||||
<div class=\"pancarte\">
|
<div class=\"pancarte\">
|
||||||
|
|
Loading…
Reference in a new issue