Added icon + changed background + documented scripts

assets/css/sidenav.css

@@ -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;
+    color: #c5af86;
-    text-shadow: 2px 2px 5px #fff;
+    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 */

assets/css/style.css

@@ -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;
+    color: #503c3b;
-    text-decoration: underline;
+    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;
 }
 

assets/scripts/photosScript.js

@@ -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'));
+    changeImage($(elem).attr('src'));
-    showcaseLink.attr("href", $(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);
 }

assets/scripts/planningScript.js

@@ -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++) {

assets/scripts/sidenavScript.js

@@ -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();

includes/sidenav.html

@@ -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>

index.php

@@ -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>

infos.php

@@ -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

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>
+<div id="back_button" onclick="closeNav()"></div>
-    <?php
+<?php
-        include("includes/top_bar.html");
+include("includes/top_bar.html");
-        include("includes/sidenav.html");
+include("includes/sidenav.html");
-    ?>
+?>
-    <div id="header_top">
+<div id="header_wrap" class="outer">
-        <div id="hamburger" onclick="toggleNav()">
+    <header class="inner">
-            <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">
 
-            <h1 id="title">Semaine d'Accueil 2018</h1>
+        <h1 id="title">Semaine d'Accueil 2018</h1>
-            <h2 id="description"></h2>
+        <h2 id="description"></h2>
-        </header>
+    </header>
-    </div>
+</div>
 
-    <div id="main_content_wrap" class="outer">
+<div id="main_content_wrap" class="outer">
-        <section id="main_content" class="inner">
+    <section id="main_content" class="inner">
-            <?= $pageContent // Display content defined in calling file ?>
+        <?= $pageContent // Display content defined in calling file  ?>
-        </section>
+    </section>
-    </div>
+</div>
 
-    <div id="footer_wrap" class="outer">
+<div id="footer_wrap" class="outer">
-        <footer class="inner">
+    <footer class="inner">
-            <p class="copyright">Copyright ©
+        <p class="copyright">Copyright ©
-                <script type="text/javascript">
+            <script type="text/javascript">
-                    var d = new Date();
+                var d = new Date();
-                    document.write(d.getFullYear())
+                document.write(d.getFullYear())
-                </script>
+            </script>
-                Arnaud VERGNET</p>
+            Arnaud VERGNET
-        </footer>
+        </p>
-    </div>
+    </footer>
-    <script src="assets/scripts/sidenavScript.js"></script>
+</div>
 </body>
+<script src="assets/scripts/sidenavScript.js"></script>
 </html>