Added basic website template
This commit is contained in:
keplyx
parent
60fe812c9e
commit
57b8c341bc
14 changed files with 876 additions and 0 deletions
94
assets/css/bootstrapOverwrite.css
vendored
Normal file
94
assets/css/bootstrapOverwrite.css
vendored
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
html, body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #FB5F03;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
color: #7a2e01;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #dedede;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
height: 250px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
footer h5 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
background-color: #dedede;
|
||||
margin-top: -64px; /* make the navbar visible on the main jumbotron */
|
||||
}
|
||||
|
||||
.nav-item a {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
margin: auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: #FB5F03 !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navbar, .navbar-nav, .nav-link {
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
padding: 0 10px;
|
||||
position: relative;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: auto;
|
||||
}
|
||||
|
||||
.jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-title-c .jconfirm-title {
|
||||
line-height: 30px;
|
||||
color: #FB5F03;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: #FB5F03;
|
||||
border-color: #FB5F03;
|
||||
}
|
||||
|
||||
@media
|
||||
only screen and (max-width: 575px) {
|
||||
footer {
|
||||
height: 300px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
239
assets/css/general.css
Normal file
239
assets/css/general.css
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
.text-proximo {
|
||||
color: #FB5F03 !important;
|
||||
}
|
||||
|
||||
.bg-proximo {
|
||||
background: #FB5F03 !important;
|
||||
}
|
||||
|
||||
#mainContainer {
|
||||
min-height:100%;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
#contentContainer {
|
||||
margin-bottom: 0;
|
||||
/* Height of the footer */
|
||||
padding: 0 0 250px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.footer-copyright {
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
||||
#navbarLogo, #navbarNav, #navbarLogoMobile {
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
}
|
||||
|
||||
#navbarLogo img, #navbarLogoMobile img {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
#navbarLogoMobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-section-text {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.section-text {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.main-section-title {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.scrollingload {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.jarallax {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.link-effect {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
background-color: #FB5F03;
|
||||
transition: 0.1s;
|
||||
-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
|
||||
clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
|
||||
}
|
||||
|
||||
.link-hovered {
|
||||
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
|
||||
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
|
||||
}
|
||||
|
||||
.link-active {
|
||||
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
|
||||
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
|
||||
}
|
||||
|
||||
#headerJumbotron {
|
||||
padding: 0;
|
||||
height: 40vh;
|
||||
border-radius: 0;
|
||||
margin: 0 0 64px; /* height of navbar */
|
||||
background: rgb(166,61,0);
|
||||
background: linear-gradient(157deg, rgba(166,61,0,1) 0%, rgba(251,95,3,1) 35%, rgba(255,162,108,1) 100%);
|
||||
}
|
||||
|
||||
#headerTitleContainer{
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
width: 100%;
|
||||
color: #e8e8e8;
|
||||
}
|
||||
|
||||
#headerTitle {
|
||||
font-size: 5rem;
|
||||
text-shadow: 0 0 10px #555555;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#headerSubTitle {
|
||||
text-shadow: 0 0 5px #4c4c4c;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
.jconfirm.jconfirm-supervan .jconfirm-bg {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.section-separator-top, .section-separator-bottom {
|
||||
background-color: #FB5F03;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section-separator-top {
|
||||
-webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%);
|
||||
clip-path: polygon(0 0, 0% 100%, 100% 100%);
|
||||
}
|
||||
|
||||
.section-separator-bottom {
|
||||
-webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
|
||||
clip-path: polygon(0 0, 0% 100%, 100% 0);
|
||||
}
|
||||
|
||||
#socialLinks {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-content {
|
||||
font-size: 1.2rem;
|
||||
color: #d7d7d7;
|
||||
}
|
||||
|
||||
@media
|
||||
only screen and (max-width: 1199px) {
|
||||
.hamburger {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.section-separator-top, .section-separator-bottom {
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
#mainJumbotron:after {
|
||||
box-shadow: inset 0 0 150px 50px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.main-section-text {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.section-text {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.main-section-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
#headerTitle {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
#headerSubTitle {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
#navbarLogoMobile {
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media
|
||||
only screen and (max-width: 575px) {
|
||||
#contentContainer {
|
||||
/* Height of the footer */
|
||||
padding-bottom: 300px;
|
||||
}
|
||||
|
||||
.section-separator-top, .section-separator-bottom {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
#mainJumbotron:after {
|
||||
box-shadow: inset 0 0 150px 50px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.main-section-text {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.section-text {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.main-section-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
#headerTitle {
|
||||
font-size: 3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#headerSubTitle {
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#navbarLogoMobile {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.image-fixed-text-container {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-content {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-title-c .jconfirm-title {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-title-c > * {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
69
assets/css/hamburger.css
Executable file
69
assets/css/hamburger.css
Executable file
|
|
@ -0,0 +1,69 @@
|
|||
.hamburger {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
font-size: 32px;
|
||||
margin: auto 5px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.bar1, .bar2-1, .bar2-2, .bar3 {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 5px;
|
||||
background-color: #404040;
|
||||
margin: 5px 0;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.bar1 {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.bar2-1, .bar2-2 {
|
||||
margin: 0;
|
||||
width: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.bar2-1 {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.bar2-2 {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.bar3 {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/* Rotate first bar */
|
||||
|
||||
.change .bar1 {
|
||||
-webkit-transform: rotate(-45deg) translate(-10px, 10px);
|
||||
transform: rotate(-45deg) translate(-8px, 8px);
|
||||
}
|
||||
|
||||
/* Fade out the second bar */
|
||||
|
||||
.change .bar2-1 {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.change .bar2-2 {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateX(50%);
|
||||
transform: translateX(50%);
|
||||
}
|
||||
|
||||
/* Rotate last bar */
|
||||
|
||||
.change .bar3 {
|
||||
-webkit-transform: rotate(45deg) translate(-10px, -10px);
|
||||
transform: rotate(45deg) translate(-10px, -10px);
|
||||
}
|
||||
0
assets/css/index.css
Normal file
0
assets/css/index.css
Normal file
37
assets/css/sidenav.css
Executable file
37
assets/css/sidenav.css
Executable file
|
|
@ -0,0 +1,37 @@
|
|||
/* The side navigation menu */
|
||||
|
||||
#sidenav {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 1300;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: 0.5s;
|
||||
text-align: center;
|
||||
background: #ffffff;
|
||||
transform: translateX(-100%);
|
||||
padding-top: 30px;
|
||||
-webkit-clip-path: circle(0% at 50% 50%);
|
||||
clip-path: circle(0% at 50% 50%);
|
||||
}
|
||||
|
||||
.sidenav-open {
|
||||
transform: translateX(0%) !important;
|
||||
-webkit-clip-path: circle(70.7% at 50% 50%) !important;
|
||||
clip-path: circle(70.7% at 50% 50%) !important;
|
||||
}
|
||||
|
||||
#sidenavScroll {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
#sidenavList {
|
||||
padding: 0;
|
||||
width: 300px;
|
||||
margin: auto;
|
||||
}
|
||||
BIN
assets/images/favicon.png
Normal file
BIN
assets/images/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
assets/images/proximo.png
Normal file
BIN
assets/images/proximo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
147
assets/js/init.js
Normal file
147
assets/js/init.js
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
(function ($) {
|
||||
/**
|
||||
* Get an HTMLElement using Jquery, and store them in a cache for a faster access later
|
||||
* @param selector {String} The Jquery selector to use
|
||||
* @return {(jQuery.fn.init | jQuery | HTMLElement)} The JQuery HTMLElement
|
||||
*/
|
||||
$.selector_cache = function (selector) {
|
||||
if (!$.selector_cache[selector]) {
|
||||
$.selector_cache[selector] = $(selector);
|
||||
}
|
||||
return $.selector_cache[selector];
|
||||
};
|
||||
})(jQuery); // Edit JQuery namespace to use the function as $.selector_cache('#elements');
|
||||
|
||||
|
||||
$(document).ready(function () {
|
||||
loadHeader();
|
||||
fixheader();
|
||||
});
|
||||
|
||||
|
||||
|
||||
$.selector_cache('.nav-item')
|
||||
.on('mouseover', function () {
|
||||
$(this).find('.link-effect').addClass('link-hovered');
|
||||
})
|
||||
.on('mouseleave', function () {
|
||||
$(this).find('.link-effect').removeClass('link-hovered');
|
||||
}).on('click', function () {
|
||||
$(this).find('.link-effect').removeClass('link-hovered');
|
||||
$(this).find('.link-effect').addClass('link-active');
|
||||
});
|
||||
|
||||
/**
|
||||
* Stop the header from changing height on mobile (with fullscreen browsing)
|
||||
*/
|
||||
function fixheader() {
|
||||
if ($.selector_cache("#headerJumbotron").length > 0) {
|
||||
let height = $(window).height() * 0.4;
|
||||
$.selector_cache('#headerJumbotron').css('height', height);
|
||||
}
|
||||
}
|
||||
|
||||
function loadHeader() {
|
||||
if ($.selector_cache("#headerJumbotron").length > 0) {
|
||||
animateCss($.selector_cache('#headerTitle'), 'fadeInUp faster');
|
||||
$.selector_cache('#headerTitle').css('opacity', 1);
|
||||
setTimeout(function () {
|
||||
animateCss($.selector_cache('#headerSubTitle'), 'fadeInUp faster');
|
||||
$.selector_cache('#headerSubTitle').css('opacity', 1);
|
||||
}, 100);
|
||||
|
||||
setTimeout(function () {
|
||||
$.selector_cache('#headerTop').addClass('loaded');
|
||||
}, 100);
|
||||
|
||||
setTimeout(function () {
|
||||
$.selector_cache('#headerBottom').addClass('loaded');
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
||||
// Using animate.css, translated into jquery
|
||||
// https://github.com/daneden/animate.css
|
||||
function animateCss($elem, animationName, callback) {
|
||||
$elem.addClass('animated ' + animationName);
|
||||
$elem.on('animationend', function () {
|
||||
$elem.removeClass('animated ' + animationName);
|
||||
if (typeof callback === 'function')
|
||||
callback();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
jconfirm.defaults = {
|
||||
title: 'Title',
|
||||
titleClass: '',
|
||||
type: 'red',
|
||||
typeAnimated: true,
|
||||
draggable: false,
|
||||
dragWindowGap: 15,
|
||||
dragWindowBorder: true,
|
||||
animateFromElement: true,
|
||||
smoothContent: true,
|
||||
content: 'content',
|
||||
escapeKey: 'ok',
|
||||
buttons: {},
|
||||
defaultButtons: {
|
||||
ok: {
|
||||
keys: ['enter'],
|
||||
text: 'OK',
|
||||
action: function () {
|
||||
}
|
||||
},
|
||||
close: {
|
||||
action: function () {
|
||||
}
|
||||
},
|
||||
},
|
||||
contentLoaded: function (data, status, xhr) {
|
||||
},
|
||||
icon: '',
|
||||
lazyOpen: false,
|
||||
bgOpacity: null,
|
||||
theme: 'supervan',
|
||||
animation: 'scale',
|
||||
closeAnimation: 'scale',
|
||||
animationSpeed: 300,
|
||||
animationBounce: 1,
|
||||
rtl: false,
|
||||
container: 'body',
|
||||
containerFluid: false,
|
||||
backgroundDismiss: false,
|
||||
backgroundDismissAnimation: 'shake',
|
||||
autoClose: false,
|
||||
closeIcon: null,
|
||||
closeIconClass: false,
|
||||
watchInterval: 100,
|
||||
columnClass: 'xlarge',
|
||||
boxWidth: '50%',
|
||||
scrollToPreviousElement: true,
|
||||
scrollToPreviousElementAnimate: true,
|
||||
useBootstrap: true,
|
||||
offsetTop: 40,
|
||||
offsetBottom: 40,
|
||||
bootstrapClasses: {
|
||||
container: 'container',
|
||||
containerFluid: 'container-fluid',
|
||||
row: 'row',
|
||||
},
|
||||
onContentReady: function () {
|
||||
},
|
||||
onOpenBefore: function () {
|
||||
// after the modal is displayed.
|
||||
$('body').css('overflow', 'hidden');
|
||||
},
|
||||
onOpen: function () {
|
||||
},
|
||||
onClose: function () {
|
||||
// before the modal is hidden.
|
||||
$('body').css('overflow', 'auto');
|
||||
},
|
||||
onDestroy: function () {
|
||||
},
|
||||
onAction: function () {
|
||||
}
|
||||
};
|
||||
61
assets/js/sidenav.js
Executable file
61
assets/js/sidenav.js
Executable file
|
|
@ -0,0 +1,61 @@
|
|||
let menuOpen = false;
|
||||
let hamburger = $(".hamburger");
|
||||
|
||||
/*
|
||||
* Open navigation menu, change Hamburger icon to selected state
|
||||
* and display the back button overlay over the page
|
||||
*/
|
||||
|
||||
function openNav() {
|
||||
$.selector_cache('#sidenav').addClass("sidenav-open");
|
||||
enableHamburger();
|
||||
menuOpen = true;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Close navigation menu, change Hamburger icon back to default state
|
||||
* and hide the back button overlay
|
||||
*/
|
||||
function closeNav() {
|
||||
$.selector_cache('#sidenav').removeClass("sidenav-open");
|
||||
disableHamburger();
|
||||
menuOpen = false;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Toggle the navigation bar
|
||||
*/
|
||||
function toggleNav() {
|
||||
if (menuOpen) {
|
||||
closeNav();
|
||||
} else {
|
||||
openNav();
|
||||
}
|
||||
}
|
||||
|
||||
function disableHamburger() {
|
||||
$.selector_cache('.hamburger').removeClass("change");
|
||||
}
|
||||
|
||||
function enableHamburger() {
|
||||
$.selector_cache('.hamburger').addClass("change");
|
||||
}
|
||||
|
||||
// Animate hamburger on hover
|
||||
$.selector_cache('.hamburger').hover(function(){
|
||||
$.selector_cache('.bar1').css("background-color", "#e62b1e");
|
||||
$.selector_cache('.bar2-1').css("background-color", "#e62b1e");
|
||||
$.selector_cache('.bar2-2').css("background-color", "#e62b1e");
|
||||
$.selector_cache('.bar2-1').css("left", "-5px");
|
||||
$.selector_cache('.bar2-2').css("right", "-5px");
|
||||
$.selector_cache('.bar3').css("background-color", "#e62b1e");
|
||||
}, function(){
|
||||
$.selector_cache('.bar1').css("background-color", "#404040");
|
||||
$.selector_cache('.bar2-1').css("background-color", "#404040");
|
||||
$.selector_cache('.bar2-2').css("background-color", "#404040");
|
||||
$.selector_cache('.bar2-1').css("left", "0");
|
||||
$.selector_cache('.bar2-2').css("right", "0");
|
||||
$.selector_cache('.bar3').css("background-color", "#404040");
|
||||
});
|
||||
31
includes/footer.php
Normal file
31
includes/footer.php
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<footer class="p-0 shadow">
|
||||
<div class="container-fluid text-center">
|
||||
<div class="row">
|
||||
<div class="col-lg p-3">
|
||||
<h5 class="text-uppercase">À Propos de Proximo</h5>
|
||||
<p class="text-center">
|
||||
Coucou
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-lg-2 text-center p-3">
|
||||
<h3>SUIVEZ NOUS</h3>
|
||||
<ul class="list-unstyled" id="socialLinks">
|
||||
<li>
|
||||
<a href="https://www.facebook.com/" target="_blank">
|
||||
<i class="fab fa-facebook"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-copyright text-center py-3 shadow">
|
||||
Site du Proximo de l'INSA Toulouse
|
||||
<br>
|
||||
Copyright ©
|
||||
<script type="text/javascript">
|
||||
document.write(new Date().getFullYear().toString())
|
||||
</script>
|
||||
Arnaud VERGNET. Tous droits réservés.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
55
includes/navbar.php
Normal file
55
includes/navbar.php
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<!--NAVBAR-->
|
||||
<nav class="navbar navbar-expand-xl sticky-top">
|
||||
<div class="container-fluid">
|
||||
<div class="hamburger" onclick="openNav()">
|
||||
<div class="bar1"></div>
|
||||
<div class="bar2-1"></div>
|
||||
<div class="bar2-2"></div>
|
||||
<div class="bar3"></div>
|
||||
</div>
|
||||
<a href="<?= $relativePath ?>index.php" id="navbarLogoMobile">
|
||||
<img src="<?= $relativePath ?>assets/images/proximo.png" alt="">
|
||||
</a>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<div class="link-effect clipped clipped"></div>
|
||||
<a class="nav-link" href="<?= $relativePath ?>index.php" id="navbarLogo">
|
||||
<img src="<?= $relativePath ?>assets/images/proximo.png" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<div class="link-effect clipped"></div>
|
||||
<a class="nav-link" href="<?= $relativePath ?>event.php">
|
||||
<i class="fas fa-cubes mr-2"></i>
|
||||
Stock
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<div class="link-effect clipped"></div>
|
||||
<a class="nav-link" href="<?= $relativePath ?>contact.php">
|
||||
<!--Team an contact links-->
|
||||
<i class="fas fa-envelope mr-2"></i>
|
||||
Contact
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<div class="link-effect clipped"></div>
|
||||
<a class="nav-link" href="<?= $relativePath ?>about.php">
|
||||
<!--Place and access-->
|
||||
<i class="fas fa-info-circle mr-2"></i>
|
||||
À Propos
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<div class="link-effect clipped"></div>
|
||||
<a class="nav-link" href="<?= $relativePath ?>about.php">
|
||||
<!--Place and access-->
|
||||
<i class="fas fa-sign-in-alt mr-2"></i>
|
||||
Connexion
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
49
includes/sidenav.php
Executable file
49
includes/sidenav.php
Executable file
|
|
@ -0,0 +1,49 @@
|
|||
<div id="sidenav" onclick="closeNav()">
|
||||
<div id="sidenavScroll">
|
||||
<div class="hamburger" onclick="closeNav()">
|
||||
<div class="bar1"></div>
|
||||
<div class="bar2-1"></div>
|
||||
<div class="bar2-2"></div>
|
||||
<div class="bar3"></div>
|
||||
</div>
|
||||
<ul id="sidenavList">
|
||||
<li class="nav-item">
|
||||
<div class="link-effect clipped clipped"></div>
|
||||
<a class="nav-link" href="<?= $relativePath ?>index.php" id="navbarLogo">
|
||||
<img src="<?= $relativePath ?>assets/images/proximo.png" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<div class="link-effect clipped"></div>
|
||||
<a class="nav-link" href="<?= $relativePath ?>event.php">
|
||||
<i class="fas fa-cubes mr-2"></i>
|
||||
Stock
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<div class="link-effect clipped"></div>
|
||||
<a class="nav-link" href="<?= $relativePath ?>contact.php">
|
||||
<!--Team an contact links-->
|
||||
<i class="fas fa-envelope mr-2"></i>
|
||||
Contact
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<div class="link-effect clipped"></div>
|
||||
<a class="nav-link" href="<?= $relativePath ?>about.php">
|
||||
<!--Place and access-->
|
||||
<i class="fas fa-info-circle mr-2"></i>
|
||||
À Propos
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<div class="link-effect clipped"></div>
|
||||
<a class="nav-link" href="<?= $relativePath ?>about.php">
|
||||
<!--Place and access-->
|
||||
<i class="fas fa-sign-in-alt mr-2"></i>
|
||||
Connexion
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
77
includes/template.php
Normal file
77
includes/template.php
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
<?php
|
||||
|
||||
if (!isset($relativePath))
|
||||
$relativePath = "";
|
||||
|
||||
if (!isset($pageScripts))
|
||||
$pageScripts = "";
|
||||
|
||||
?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title><?= $pageTitle ?> | Proximo</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+sans|Roboto" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
|
||||
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
|
||||
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
|
||||
<link type="text/css" rel="stylesheet" href="<?= $relativePath ?>assets/css/general.css" media="screen,projection"/>
|
||||
<link type="text/css" rel="stylesheet" href="<?= $relativePath ?>assets/css/index.css" media="screen,projection"/>
|
||||
<link type="text/css" rel="stylesheet" href="<?= $relativePath ?>assets/css/hamburger.css" media="screen,projection"/>
|
||||
<link type="text/css" rel="stylesheet" href="<?= $relativePath ?>assets/css/sidenav.css" media="screen,projection"/>
|
||||
<link type="text/css" rel="stylesheet" href="<?= $relativePath ?>assets/css/bootstrapOverwrite.css"
|
||||
media="screen,projection"/>
|
||||
<link rel="icon" type="image/png" href="<?= $relativePath ?>assets/images/favicon.png">
|
||||
<!--Let browser know website is optimized for mobile-->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="mainContainer">
|
||||
|
||||
<div id="headerJumbotron" class="jumbotron text-center d-flex">
|
||||
<div id="headerTitleContainer">
|
||||
<h1 id="headerTitle"><?= $title ?></h1>
|
||||
<h2 id="headerSubTitle"><?= $subTitle ?></h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<?php
|
||||
include($relativePath . "includes/navbar.php");
|
||||
include($relativePath . "includes/sidenav.php");
|
||||
?>
|
||||
|
||||
<div class="mt-4" id="contentContainer">
|
||||
<?= $pageContent ?>
|
||||
</div>
|
||||
<?php include($relativePath . "includes/footer.php") ?>
|
||||
</div>
|
||||
|
||||
<div id="scrollIndicator" style="display: none;">
|
||||
<i class="fas fa-angle-double-down"></i>
|
||||
</div>
|
||||
|
||||
<!--JavaScript at end of body for optimized loading-->
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
|
||||
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
|
||||
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
|
||||
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
|
||||
<script type="text/javascript" src="<?= $relativePath ?>assets/js/init.js"></script>
|
||||
<script type="text/javascript" src="<?= $relativePath ?>assets/js/sidenav.js"></script>
|
||||
<?= $pageScripts ?>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
17
index.php
Normal file
17
index.php
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<?php
|
||||
ob_start();
|
||||
?>
|
||||
<div class="container">
|
||||
<h1 class="text-center">Coucou</h1>
|
||||
<p class="text-center">Ceci est du texte</p>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
$pageContent = ob_get_clean();
|
||||
$pageTitle = "Accueil";
|
||||
$title = "Proximo";
|
||||
$subTitle = "La supérette de l'INSA !";
|
||||
$relativePath = "";
|
||||
|
||||
include($relativePath . "includes/template.php");
|
||||
?>
|
||||
Loading…
Reference in a new issue