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