site-accueil-insa/structure/menu.php
2022-07-27 17:38:56 +02:00

203 lines
No EOL
6.9 KiB
PHP

<?php
if(!isset($relativepath)) {
header('Location: ../index.php');
}
?>
<!-- The tube -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
class="tuyau" id="tube"
viewBox="0 0 44 76">
<!-- espace de définition -->
<defs>
<linearGradient id="grad1" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="44" y2="0">
<stop offset="0" style="stop-color:#03A663"/>
<stop offset="0.2204" style="stop-color:#03A160"/>
<stop offset="0.4959" style="stop-color:#029157"/>
<stop offset="0.7995" style="stop-color:#017848"/>
<stop offset="1" style="stop-color:#00633C"/>
</linearGradient>
<linearGradient id="grad2" gradientUnits="userSpaceOnUse" x1="5" y1="14" x2="39" y2="14">
<stop offset="0" style="stop-color:#03A663"/>
<stop offset="0.2204" style="stop-color:#03A160"/>
<stop offset="0.4959" style="stop-color:#029157"/>
<stop offset="0.7995" style="stop-color:#017848"/>
<stop offset="1" style="stop-color:#00633C"/>
</linearGradient>
</defs>
<style type="text/css">
.st9{fill:#00A15D;}
.st10{fill:#00A25D;}
.st11{fill:url(#grad1);}
.st12{fill:url(#grad2);}
.st13{fill:#FFFFFF;}
.st14{opacity:0.66;fill:#FFFFFF;}
.st15{opacity:0.3;}
</style>
<!-- Ouverture : Fond -->
<rect x="0" y="0" class="st9" width="44" height="14"/>
<!-- Cylindre : Fond -->
<rect x="5" y="14" class="st10" width="34" height="50"/>
<!-- Ouverture : Dégradé -->
<rect x="0" y="0" class="st11" width="38" height="14"/>
<!-- Cylindre : Dégradé -->
<rect x="5" y="14" class="st12" width="28" height="50"/>
<!-- Ouverture : Reflet Fort -->
<rect x="9" y="0" class="st13" width="5.5" height="14"/>
<!-- Ouverture : Reflet Faible -->
<rect x="7.5" y="0" class="st14" width="1.5" height="14"/>
<!-- Cylindre : Reflet Fort -->
<rect x="12.5" y="14" class="st13" width="5.5" height="48.11"/>
<!-- Cylindre : Reflet Faible -->
<rect x="11" y="14" class="st14" width="1.5" height="48.11"/>
<!-- Ouverture : Ombre projetée -->
<rect x="5" y="14" class="st15" width="34" height="1.35"/>
<!-- Tuyau : Ombre -->
<rect id="tuyau-ombre" x="5" y="40.5" class="st15" width="34" height="1.35"/>
</svg>
<!-- The actual menu * desktop -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
class="menu" id="parent"
viewBox="0 0 512 34.85">
<!-- Might put them somewhere else later -->
<style type="text/css">
.st0{fill:#AA572E;}
.st1{fill:#C06538;}
.st2{fill:#2B0A00;}
.st3{fill:#914522;}
.st4{fill:#9B4D25;}
.st5{fill:#A04E26;}
.st6{fill:#491A05;}
.st7{fill:#3F1403;}
.st8{fill:#BA6135;}
.st16{fill:#392313;}
.st17{fill:#492715;}
</style>
<style type="text/css">
.menu-link text {
fill: white;
text-anchor: middle;
alignment-baseline: central;
dominant-baseline: central;
font-size: 8px;
}
</style>
<!-- This svg create an image of a brick and cache it for further <use>s-->
<symbol id="Brick" viewBox="0 0 47 17">
<rect x="1" y="1" class="st0" width="45" height="15"/>
<rect x="1.5" y="0" class="st1" width="44" height="1.5"/> <!-- Top side -->
<rect x="1.5" y="15.5" class="st2" width="44" height="1.5"/> <!-- Bottom side -->
<rect x="45.5" y="1.5" class="st3" width="1.5" height="14"/> <!-- Right side -->
<rect x="0" y="1.5" class="st4" width="1.5" height="14"/> <!-- Left side -->
<polygon class="st5" points="47,1.5 45.5,1.5 45.5,0"/> <!-- TR corner -->
<polygon class="st6" points="45.5,17 47,15.5 45.5,15.5"/> <!-- BR corner -->
<polygon class="st7" points="0,15.5 1.5,15.5 1.5,17"/> <!-- BL corner -->
<polygon class="st8" points="0,1.5 1.5,1.5 1.5,0"/> <!-- TL corner -->
</symbol>
<!-- Fond -->
<rect x="0" y="2.85" class="st16" width="512" height="32"/>
<!-- Fond : Surface -->
<rect x="0" y="2.85" class="st17" width="512" height="1.5"/>
<!-- Top layer (LtR) -->
<?php
$co_y_0 = [0, 48.85, 97.7, 146.55, 195.4, 244.25, 293.1, 341.95, 390.8, 439.65, 488.5];
$texte_y_0 = ["Accueil", "Planning", "Plan", "Lydia/Izly", "Blouse", "Pkpeach", "Boomario", "Les stats", "", "Prévention", ""];
$lien_y_0 = ["index.php", "planning.php", "map.php", "lydia.php", "blouse.php", "team.php?team=pkpeach", "team.php?team=boomario", "stats.php", "", "prevs.php", ""];
for($i = 0; $i <= 10; $i++) {
echo
'<a href="'.$lien_y_0[$i].'" class="menu-link">
<use xlink:href="#Brick" width="47" height="17" x="'.$co_y_0[$i].'" y="0"/>
<svg id="btn10" width="47" height="17" x="'.$co_y_0[$i].'" y="0">
<text x="50%" y="50%">
'.$texte_y_0[$i].'
</text>
</svg>
</a>';
}
$co_y_1 = [-23.5, 25.35,74.2, 123.05, 171.9, 220.75, 269.6, 318.45, 367.3, 416.15, 465];
$texte_y_1 = ["", "Photos","Les clubs", "Com's", "", "Homework", "Chansons", "", "Download", "Contact", "Infos"];
$lien_y_1 = ["", "photos.php","clubs.php", "com_page.php", "", "vacances.php", "chansons.php", "", "downloads.php", "coms.php", "info.php"];
for($i = 0; $i <= 10; $i++) {
echo
'<a href="'.$lien_y_1[$i].'" class="menu-link menu-bottom-line">
<use xlink:href="#Brick" width="47" height="17" x="'.$co_y_1[$i].'" y="17.85"/>
<svg id="btn10" width="47" height="17" x="'.$co_y_1[$i].'" y="17.85">
<text x="50%" y="50%">
'.$texte_y_1[$i].'
</text>
</svg>
</a>';
}
?>
</svg>
<!-- Sur téléphone -->
<nav class="mobile-menu" id="mobile-menu">
<div class="containerF3g">
<div class="mobile-grid">
<?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>
<span id="close-mobile-menu" class="close-mobile-menu">
x
</span>
</nav>