forked from vergnet/site-accueil-insa
Added icon + changed background + documented scripts
This commit is contained in:
Keplyx
parent
602616c5e5
commit
81fb360171
13 changed files with 104 additions and 53 deletions
|
|
@ -5,7 +5,7 @@
|
|||
width: 250px;
|
||||
margin-left: -250px; /* change margin with JavaScript */
|
||||
position: fixed; /* Stay in place */
|
||||
z-index: 10;
|
||||
z-index: 1000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: #111111;
|
||||
|
|
@ -28,8 +28,8 @@
|
|||
}
|
||||
|
||||
.sidenav a:hover {
|
||||
color: white;
|
||||
text-shadow: 2px 2px 5px #fff;
|
||||
color: #c5af86;
|
||||
text-shadow: 0 0 5px #c5af86;
|
||||
}
|
||||
|
||||
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ Theme Styles
|
|||
body {
|
||||
/*Full page background*/
|
||||
background-size: cover;
|
||||
background: url("../images/header_bg.jpg") no-repeat fixed center;
|
||||
background: url("../images/bg.jpg") no-repeat fixed center;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
|
|
@ -84,18 +84,19 @@ p {
|
|||
|
||||
footer p {
|
||||
color: #f2f2f2;
|
||||
text-shadow: 0 0 2px black;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #0F79D0;
|
||||
color: #3a7eaa;
|
||||
text-shadow: none;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
a:hover, a:focus {
|
||||
color: #222e73;
|
||||
text-decoration: underline;
|
||||
color: #503c3b;
|
||||
text-shadow: 0 0 4px #cccccc;
|
||||
}
|
||||
|
||||
footer a {
|
||||
|
|
@ -190,7 +191,7 @@ Full-Width Styles
|
|||
position: fixed;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
z-index: 15;
|
||||
z-index: 2000;
|
||||
box-shadow: 0 2px 5px #222;
|
||||
}
|
||||
|
||||
|
|
@ -233,6 +234,7 @@ Full-Width Styles
|
|||
padding-top: 100px;
|
||||
background-color: #212121aa;
|
||||
border-radius: 0 0 60px 60px;
|
||||
box-shadow: 0 0 40px #212121;
|
||||
}
|
||||
|
||||
#home_content h1 {
|
||||
|
|
@ -297,9 +299,9 @@ Full-Width Styles
|
|||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #212121;
|
||||
background-color: #000;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
z-index: -100;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
|
|
@ -315,7 +317,7 @@ Full-Width Styles
|
|||
}
|
||||
|
||||
.active_background {
|
||||
z-index: 5 !important;
|
||||
z-index: 100 !important;
|
||||
opacity: 0.7 !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 589 KiB After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 589 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
|
|
@ -2,17 +2,27 @@ var showcase = $("#img_big");
|
|||
var showcaseLink = $("#img_big_link");
|
||||
var photoBackButton = $("#photo_back_button");
|
||||
|
||||
/*
|
||||
* Display selected image in showcase
|
||||
* When clicked, display image in full size
|
||||
*/
|
||||
function displayBig(elem) {
|
||||
showcase.attr("src", $(elem).attr('src'));
|
||||
showcaseLink.attr("href", $(elem).attr('src'));
|
||||
changeImage($(elem).attr('src'));
|
||||
photoBackButton.css("display", "block");
|
||||
console.log("yop");
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Hide showcase image
|
||||
*/
|
||||
function closeBig() {
|
||||
photoBackButton.css("display", "none")
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Display next/last image in showcase. When reaching end/start, loop back to start/end
|
||||
*/
|
||||
function displayNext(direction) {
|
||||
var currentSrc = showcase.attr('src');
|
||||
var photos = document.getElementsByClassName("photo");
|
||||
|
|
@ -33,5 +43,13 @@ function displayNext(direction) {
|
|||
nextId = "#photo-" + next;
|
||||
}
|
||||
var nextSrc = $(nextId).attr('src');
|
||||
showcase.attr('src', nextSrc);
|
||||
changeImage(nextSrc);
|
||||
}
|
||||
|
||||
/*
|
||||
* Change image source and link
|
||||
*/
|
||||
function changeImage(src) {
|
||||
showcase.attr("src", src);
|
||||
showcaseLink.attr("href", src);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
var current = null;
|
||||
var classes = null;
|
||||
$(document).ready(function () {
|
||||
|
||||
/*
|
||||
* Display clicked event as selected, change info box content and scroll to it
|
||||
*/
|
||||
$(".event").click(function () {
|
||||
/* Reset last selected items */
|
||||
if (current != null) {
|
||||
|
|
@ -15,6 +19,10 @@ $(document).ready(function () {
|
|||
scrollTop: $("#infoBox").offset().top
|
||||
}, 300);
|
||||
});
|
||||
|
||||
/*
|
||||
* Display shadow on hovered events
|
||||
*/
|
||||
$(".event").hover(function () {
|
||||
var element = this.className.split(" ")[1];
|
||||
if (element != current) {
|
||||
|
|
@ -27,6 +35,9 @@ $(document).ready(function () {
|
|||
}
|
||||
});
|
||||
|
||||
/*
|
||||
* Display shadow under all elements with the save eventName
|
||||
*/
|
||||
function setEventShadow(eventName, shadow) {
|
||||
classes = document.getElementsByClassName(eventName);
|
||||
for (var i = 0; i < classes.length; i++) {
|
||||
|
|
|
|||
|
|
@ -3,24 +3,36 @@ var sidenav = $("#menuSidenav");
|
|||
var hamburger = $("#hamburger");
|
||||
var backButton = $("#back_button");
|
||||
|
||||
/*
|
||||
* Open navigation menu, change Hamburger icon to selected state
|
||||
* and display the back button overlay over the page
|
||||
*/
|
||||
|
||||
function openNav() {
|
||||
sidenav.css("margin-left", "0");
|
||||
sidenav.css("box-shadow", "5px 5px 10px #151515");
|
||||
backButton.addClass("active_background");
|
||||
enableHamburger();
|
||||
/* Enables hamburger icon */
|
||||
menuOpen = true;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Close navigation menu, change Hamburger icon back to default state
|
||||
* and hide the back button overlay
|
||||
*/
|
||||
function closeNav() {
|
||||
sidenav.css("margin-left", "-250px");
|
||||
sidenav.css("box-shadow", "none");
|
||||
backButton.removeClass("active_background");
|
||||
disableHamburger();
|
||||
/* Disables hamburger icon */
|
||||
menuOpen = false;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Toggle the navigation bar
|
||||
*/
|
||||
function toggleNav() {
|
||||
if (menuOpen) {
|
||||
closeNav();
|
||||
|
|
|
|||
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -6,5 +6,5 @@
|
|||
<a href="prevs.php" id="prevs" class="page-link"><span class="fas fa-medkit"></span> La Prévention</a>
|
||||
<a href="photos.php" id="photos" class="page-link"><span class="fas fa-camera"></span> Les Photos</a>
|
||||
<br>
|
||||
<a href="contact.php" id="contact" class="page-link"><span class="fas fa-envelope"></span> Les Contacts</a>
|
||||
<a href="infos.php" id="contact" class="page-link"><span class="fas fa-info"></span> Les Infos</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ include("includes/sidenav.html");
|
|||
<h1>Semaine d'Accueil 2018</h1>
|
||||
<p>Ce site regroupe les informations les plus importantes pour que ta semaine d'accueil se déroule dans les
|
||||
meilleures conditions.</p>
|
||||
<br>
|
||||
<p>Utilise le menu en haut à gauche pour naviguer sur le site.</p>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,20 @@ ob_start(); // Start reading html
|
|||
class="fas fa-envelope"></span> Mail : aaaaa</p>
|
||||
<p>Pour toute demande concernant une activité/COM spécifique, allez sur la page des <a href="coms.php">COMs</a> pour
|
||||
contacter le responsable approprié.</p>
|
||||
|
||||
<h1>Credits</h1>
|
||||
<p>Voici les différentes technologies et ressources que ce site utilise :</p>
|
||||
<p><a href="https://icons8.com/">Icons8</a> | <a href="https://commons.wikimedia.org/wiki/File:Triton_(artist%27s_impression).jpg">Fond du site</a></p>
|
||||
<a href="https://jquery.com/">JQuery</a>
|
||||
<br>
|
||||
<a href="https://www.javascript.com/">JavaScript</a>
|
||||
<br>
|
||||
<a href="http://www.php.net/">PHP7</a>
|
||||
<br>
|
||||
<a href="https://www.w3.org/html/">HTML5</a>
|
||||
<br>
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3">CSS3</a>
|
||||
|
||||
<?php
|
||||
$pageContent = ob_get_clean(); // Store html content in variable
|
||||
include("template.php"); // Display template with variable content
|
||||
63
template.php
63
template.php
|
|
@ -14,43 +14,36 @@
|
|||
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans|Rubik" rel="stylesheet">
|
||||
</head>
|
||||
<body id="main">
|
||||
<div id="back_button" onclick="closeNav()"></div>
|
||||
<?php
|
||||
include("includes/top_bar.html");
|
||||
include("includes/sidenav.html");
|
||||
?>
|
||||
<div id="header_top">
|
||||
<div id="hamburger" onclick="toggleNav()">
|
||||
<div class="bar1"></div>
|
||||
<div class="bar2"></div>
|
||||
<div class="bar3"></div>
|
||||
</div>
|
||||
<h4 id="menu_title">INSA Toulouse 2018</h4>
|
||||
</div>
|
||||
<div id="header_wrap" class="outer">
|
||||
<header class="inner">
|
||||
<div id="back_button" onclick="closeNav()"></div>
|
||||
<?php
|
||||
include("includes/top_bar.html");
|
||||
include("includes/sidenav.html");
|
||||
?>
|
||||
<div id="header_wrap" class="outer">
|
||||
<header class="inner">
|
||||
|
||||
<h1 id="title">Semaine d'Accueil 2018</h1>
|
||||
<h2 id="description"></h2>
|
||||
</header>
|
||||
</div>
|
||||
<h1 id="title">Semaine d'Accueil 2018</h1>
|
||||
<h2 id="description"></h2>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<div id="main_content_wrap" class="outer">
|
||||
<section id="main_content" class="inner">
|
||||
<?= $pageContent // Display content defined in calling file ?>
|
||||
</section>
|
||||
</div>
|
||||
<div id="main_content_wrap" class="outer">
|
||||
<section id="main_content" class="inner">
|
||||
<?= $pageContent // Display content defined in calling file ?>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id="footer_wrap" class="outer">
|
||||
<footer class="inner">
|
||||
<p class="copyright">Copyright ©
|
||||
<script type="text/javascript">
|
||||
var d = new Date();
|
||||
document.write(d.getFullYear())
|
||||
</script>
|
||||
Arnaud VERGNET</p>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="assets/scripts/sidenavScript.js"></script>
|
||||
<div id="footer_wrap" class="outer">
|
||||
<footer class="inner">
|
||||
<p class="copyright">Copyright ©
|
||||
<script type="text/javascript">
|
||||
var d = new Date();
|
||||
document.write(d.getFullYear())
|
||||
</script>
|
||||
Arnaud VERGNET
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
<script src="assets/scripts/sidenavScript.js"></script>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue