diff --git a/assets/css/bootstrapOverwrite.css b/assets/css/bootstrapOverwrite.css new file mode 100644 index 0000000..ec56f83 --- /dev/null +++ b/assets/css/bootstrapOverwrite.css @@ -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; + } +} diff --git a/assets/css/general.css b/assets/css/general.css new file mode 100644 index 0000000..c12ad08 --- /dev/null +++ b/assets/css/general.css @@ -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; + } +} diff --git a/assets/css/hamburger.css b/assets/css/hamburger.css new file mode 100755 index 0000000..b4c3870 --- /dev/null +++ b/assets/css/hamburger.css @@ -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); +} diff --git a/assets/css/index.css b/assets/css/index.css new file mode 100644 index 0000000..e69de29 diff --git a/assets/css/sidenav.css b/assets/css/sidenav.css new file mode 100755 index 0000000..361303c --- /dev/null +++ b/assets/css/sidenav.css @@ -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; +} diff --git a/assets/images/favicon.png b/assets/images/favicon.png new file mode 100644 index 0000000..5a77ab1 Binary files /dev/null and b/assets/images/favicon.png differ diff --git a/assets/images/proximo.png b/assets/images/proximo.png new file mode 100644 index 0000000..8a8c2bf Binary files /dev/null and b/assets/images/proximo.png differ diff --git a/assets/js/init.js b/assets/js/init.js new file mode 100644 index 0000000..3f9b005 --- /dev/null +++ b/assets/js/init.js @@ -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 () { + } +}; diff --git a/assets/js/sidenav.js b/assets/js/sidenav.js new file mode 100755 index 0000000..c6f0607 --- /dev/null +++ b/assets/js/sidenav.js @@ -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"); +}); diff --git a/includes/footer.php b/includes/footer.php new file mode 100644 index 0000000..d88e423 --- /dev/null +++ b/includes/footer.php @@ -0,0 +1,31 @@ + diff --git a/includes/navbar.php b/includes/navbar.php new file mode 100644 index 0000000..291216e --- /dev/null +++ b/includes/navbar.php @@ -0,0 +1,55 @@ + + diff --git a/includes/sidenav.php b/includes/sidenav.php new file mode 100755 index 0000000..ba5cabb --- /dev/null +++ b/includes/sidenav.php @@ -0,0 +1,49 @@ +
+
+
+
+
+
+
+
+ +
+
diff --git a/includes/template.php b/includes/template.php new file mode 100644 index 0000000..a30e060 --- /dev/null +++ b/includes/template.php @@ -0,0 +1,77 @@ + + + + + + + <?= $pageTitle ?> | Proximo + + + + + + + + + + + + + + + + + +
+ +
+
+

+

+
+
+ + + + +
+ +
+ +
+ + + + + + + + + + + + + + diff --git a/index.php b/index.php new file mode 100644 index 0000000..3d48103 --- /dev/null +++ b/index.php @@ -0,0 +1,17 @@ + +
+

Coucou

+

Ceci est du texte

+
+ +