Browse Source

Added basic website template

keplyx 4 years ago
parent
commit
57b8c341bc

+ 94
- 0
assets/css/bootstrapOverwrite.css View File

@@ -0,0 +1,94 @@
1
+html, body {
2
+    font-family: 'Open Sans', sans-serif;
3
+    height: 100%;
4
+    padding: 0;
5
+    margin: 0;
6
+}
7
+
8
+h1, h2, h3, h4, h5, h6 {
9
+    font-family: 'Roboto', sans-serif;
10
+}
11
+
12
+a {
13
+    color: #FB5F03;
14
+    transition: 0.2s;
15
+}
16
+
17
+a:hover {
18
+    text-decoration: none;
19
+    color: #7a2e01;
20
+}
21
+
22
+footer {
23
+    background-color: #dedede;
24
+    position: absolute;
25
+    width: 100%;
26
+    bottom: 0;
27
+    height: 250px;
28
+    font-size: 0.9rem;
29
+}
30
+
31
+footer h5 {
32
+    font-size: 1.1rem;
33
+}
34
+
35
+.navbar {
36
+    width: 100%;
37
+    padding: 0 20px;
38
+    background-color: #dedede;
39
+    margin-top: -64px; /* make the navbar visible on the main jumbotron */
40
+}
41
+
42
+.nav-item a {
43
+    font-size: 1.2rem;
44
+}
45
+
46
+.navbar-nav {
47
+    width: 100%;
48
+    display: inline-flex;
49
+}
50
+
51
+.nav-item {
52
+    margin: auto;
53
+    position: relative;
54
+    overflow: hidden;
55
+}
56
+
57
+.nav-link:hover  {
58
+    color: #FB5F03 !important;
59
+    cursor: pointer;
60
+}
61
+
62
+.navbar, .navbar-nav, .nav-link {
63
+    height: 64px;
64
+}
65
+
66
+.nav-link {
67
+    height: 64px;
68
+    line-height: 64px;
69
+    padding: 0 10px;
70
+    position: relative;
71
+    color: black;
72
+}
73
+
74
+.navbar {
75
+    padding: auto;
76
+}
77
+
78
+.jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-title-c .jconfirm-title {
79
+    line-height: 30px;
80
+    color: #FB5F03;
81
+}
82
+
83
+.btn-danger {
84
+    background-color: #FB5F03;
85
+    border-color: #FB5F03;
86
+}
87
+
88
+@media
89
+only screen and (max-width: 575px) {
90
+    footer {
91
+        height: 300px;
92
+        font-size: 0.8rem;
93
+    }
94
+}

+ 239
- 0
assets/css/general.css View File

@@ -0,0 +1,239 @@
1
+.text-proximo {
2
+    color: #FB5F03 !important;
3
+}
4
+
5
+.bg-proximo {
6
+    background: #FB5F03 !important;
7
+}
8
+
9
+#mainContainer {
10
+    min-height:100%;
11
+    position:relative;
12
+}
13
+
14
+#contentContainer {
15
+    margin-bottom: 0;
16
+    /* Height of the footer */
17
+    padding: 0 0 250px;
18
+    overflow: hidden;
19
+}
20
+
21
+.footer-copyright {
22
+    background-color: #e5e5e5;
23
+}
24
+
25
+#navbarLogo, #navbarNav, #navbarLogoMobile {
26
+    height: 64px;
27
+    line-height: 64px;
28
+}
29
+
30
+#navbarLogo img, #navbarLogoMobile img {
31
+    max-height: 100%;
32
+    max-width: 100%;
33
+    padding: 12px;
34
+}
35
+
36
+#navbarLogoMobile {
37
+    display: none;
38
+}
39
+
40
+.main-section-text {
41
+    font-size: 2rem;
42
+}
43
+
44
+.section-text {
45
+    font-size: 1.5rem;
46
+}
47
+
48
+.main-section-title {
49
+    font-size: 3rem;
50
+}
51
+
52
+.scrollingload {
53
+    opacity: 0;
54
+}
55
+
56
+.jarallax {
57
+    overflow: hidden;
58
+}
59
+
60
+.link-effect {
61
+    position: absolute;
62
+    bottom: 0;
63
+    height: 10px;
64
+    width: 100%;
65
+    background-color: #FB5F03;
66
+    transition: 0.1s;
67
+    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
68
+    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
69
+}
70
+
71
+.link-hovered {
72
+    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
73
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
74
+}
75
+
76
+.link-active {
77
+    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
78
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
79
+}
80
+
81
+#headerJumbotron {
82
+    padding: 0;
83
+    height: 40vh;
84
+    border-radius: 0;
85
+    margin: 0 0 64px; /* height of navbar */
86
+    background: rgb(166,61,0);
87
+    background: linear-gradient(157deg, rgba(166,61,0,1) 0%, rgba(251,95,3,1) 35%, rgba(255,162,108,1) 100%);
88
+}
89
+
90
+#headerTitleContainer{
91
+    z-index: 1;
92
+    position: absolute;
93
+    top: 10%;
94
+    width: 100%;
95
+    color: #e8e8e8;
96
+}
97
+
98
+#headerTitle {
99
+    font-size: 5rem;
100
+    text-shadow: 0 0 10px #555555;
101
+    opacity: 0;
102
+}
103
+
104
+#headerSubTitle {
105
+    text-shadow: 0 0 5px #4c4c4c;
106
+    opacity: 0;
107
+}
108
+
109
+
110
+.jconfirm.jconfirm-supervan .jconfirm-bg {
111
+    background-color: rgb(0, 0, 0);
112
+}
113
+
114
+.section-separator-top, .section-separator-bottom {
115
+    background-color: #FB5F03;
116
+    height: 50px;
117
+    width: 100%;
118
+}
119
+
120
+.section-separator-top {
121
+    -webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%);
122
+    clip-path: polygon(0 0, 0% 100%, 100% 100%);
123
+}
124
+
125
+.section-separator-bottom {
126
+    -webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
127
+    clip-path: polygon(0 0, 0% 100%, 100% 0);
128
+}
129
+
130
+#socialLinks {
131
+    font-size: 4rem;
132
+}
133
+
134
+.hamburger {
135
+    display: none;
136
+}
137
+
138
+.jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-content {
139
+    font-size: 1.2rem;
140
+    color: #d7d7d7;
141
+}
142
+
143
+@media
144
+only screen and (max-width: 1199px) {
145
+    .hamburger {
146
+        display: inline-block;
147
+    }
148
+
149
+    .section-separator-top, .section-separator-bottom {
150
+        height: 35px;
151
+    }
152
+
153
+    #mainJumbotron:after {
154
+        box-shadow: inset 0 0 150px 50px rgba(0, 0, 0, 0.8);
155
+    }
156
+
157
+    .main-section-text {
158
+        font-size: 1.8rem;
159
+    }
160
+
161
+    .section-text {
162
+        font-size: 1.4rem;
163
+    }
164
+
165
+    .main-section-title {
166
+        font-size: 2.5rem;
167
+    }
168
+
169
+    #headerTitle {
170
+        font-size: 4rem;
171
+    }
172
+
173
+    #headerSubTitle {
174
+        font-size: 1.8rem;
175
+    }
176
+
177
+    #navbarLogoMobile {
178
+        display: block;
179
+        margin: auto;
180
+    }
181
+}
182
+
183
+@media
184
+only screen and (max-width: 575px) {
185
+    #contentContainer {
186
+        /* Height of the footer */
187
+        padding-bottom: 300px;
188
+    }
189
+
190
+    .section-separator-top, .section-separator-bottom {
191
+        height: 20px;
192
+    }
193
+
194
+    #mainJumbotron:after {
195
+        box-shadow: inset 0 0 150px 50px rgba(0, 0, 0, 0.8);
196
+    }
197
+
198
+    .main-section-text {
199
+        font-size: 1.2rem;
200
+    }
201
+
202
+    .section-text {
203
+        font-size: 1.1rem;
204
+    }
205
+
206
+    .main-section-title {
207
+        font-size: 2rem;
208
+    }
209
+
210
+    #headerTitle {
211
+        font-size: 3rem;
212
+        width: 100%;
213
+    }
214
+
215
+    #headerSubTitle {
216
+        font-size: 1.2rem;
217
+        text-align: center;
218
+    }
219
+
220
+    #navbarLogoMobile {
221
+        width: 70%;
222
+    }
223
+
224
+    .image-fixed-text-container {
225
+        width: 90%;
226
+    }
227
+
228
+    .jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-content {
229
+        font-size: 1rem;
230
+    }
231
+
232
+    .jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-title-c .jconfirm-title {
233
+        font-size: 1.4rem;
234
+    }
235
+
236
+    .jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-title-c > * {
237
+        padding-bottom: 0;
238
+    }
239
+}

+ 69
- 0
assets/css/hamburger.css View File

@@ -0,0 +1,69 @@
1
+.hamburger {
2
+    position: relative;
3
+    cursor: pointer;
4
+    font-size: 32px;
5
+    margin: auto 5px;
6
+    height: 40px;
7
+    width: 40px;
8
+    pointer-events: auto;
9
+}
10
+
11
+.bar1, .bar2-1, .bar2-2, .bar3 {
12
+    position: absolute;
13
+    width: 40px;
14
+    height: 5px;
15
+    background-color: #404040;
16
+    margin: 5px 0;
17
+    transition: 0.3s;
18
+}
19
+
20
+.bar1 {
21
+    top: 0;
22
+}
23
+
24
+.bar2-1, .bar2-2 {
25
+    margin: 0;
26
+    width: 20px;
27
+    top: 50%;
28
+    transform: translateY(-50%);
29
+}
30
+
31
+.bar2-1 {
32
+    left: 0;
33
+}
34
+
35
+.bar2-2 {
36
+    right: 0;
37
+}
38
+
39
+.bar3 {
40
+    bottom: 0;
41
+}
42
+
43
+/* Rotate first bar */
44
+
45
+.change .bar1 {
46
+    -webkit-transform: rotate(-45deg) translate(-10px, 10px);
47
+    transform: rotate(-45deg) translate(-8px, 8px);
48
+}
49
+
50
+/* Fade out the second bar */
51
+
52
+.change .bar2-1 {
53
+    opacity: 0;
54
+    -webkit-transform: translateX(-50%);
55
+    transform: translateX(-50%);
56
+}
57
+
58
+.change .bar2-2 {
59
+    opacity: 0;
60
+    -webkit-transform: translateX(50%);
61
+    transform: translateX(50%);
62
+}
63
+
64
+/* Rotate last bar */
65
+
66
+.change .bar3 {
67
+    -webkit-transform: rotate(45deg) translate(-10px, -10px);
68
+    transform: rotate(45deg) translate(-10px, -10px);
69
+}

+ 0
- 0
assets/css/index.css View File


+ 37
- 0
assets/css/sidenav.css View File

@@ -0,0 +1,37 @@
1
+/* The side navigation menu */
2
+
3
+#sidenav {
4
+    position: fixed;
5
+    height: 100%;
6
+    width: 100%;
7
+    z-index: 1300;
8
+    top: 0;
9
+    left: 0;
10
+    transition: 0.5s;
11
+    text-align: center;
12
+    background: #ffffff;
13
+    transform: translateX(-100%);
14
+    padding-top: 30px;
15
+    -webkit-clip-path: circle(0% at 50% 50%);
16
+    clip-path: circle(0% at 50% 50%);
17
+}
18
+
19
+.sidenav-open {
20
+    transform: translateX(0%) !important;
21
+    -webkit-clip-path: circle(70.7% at 50% 50%) !important;
22
+    clip-path: circle(70.7% at 50% 50%) !important;
23
+}
24
+
25
+#sidenavScroll {
26
+    height: 100%;
27
+    width: 100%;
28
+    overflow-y: auto;
29
+    display: block;
30
+}
31
+
32
+
33
+#sidenavList {
34
+    padding: 0;
35
+    width: 300px;
36
+    margin: auto;
37
+}

BIN
assets/images/favicon.png View File


BIN
assets/images/proximo.png View File


+ 147
- 0
assets/js/init.js View File

@@ -0,0 +1,147 @@
1
+(function ($) {
2
+    /**
3
+     * Get an HTMLElement using Jquery, and store them in a cache for a faster access later
4
+     * @param selector {String} The Jquery selector to use
5
+     * @return {(jQuery.fn.init | jQuery | HTMLElement)} The JQuery HTMLElement
6
+     */
7
+    $.selector_cache = function (selector) {
8
+        if (!$.selector_cache[selector]) {
9
+            $.selector_cache[selector] = $(selector);
10
+        }
11
+        return $.selector_cache[selector];
12
+    };
13
+})(jQuery); // Edit JQuery namespace to use the function as $.selector_cache('#elements');
14
+
15
+
16
+$(document).ready(function () {
17
+    loadHeader();
18
+    fixheader();
19
+});
20
+
21
+
22
+
23
+$.selector_cache('.nav-item')
24
+    .on('mouseover', function () {
25
+        $(this).find('.link-effect').addClass('link-hovered');
26
+    })
27
+    .on('mouseleave', function () {
28
+        $(this).find('.link-effect').removeClass('link-hovered');
29
+    }).on('click', function () {
30
+    $(this).find('.link-effect').removeClass('link-hovered');
31
+    $(this).find('.link-effect').addClass('link-active');
32
+});
33
+
34
+/**
35
+ * Stop the header from changing height on mobile (with fullscreen browsing)
36
+ */
37
+function fixheader() {
38
+    if ($.selector_cache("#headerJumbotron").length > 0) {
39
+        let height = $(window).height() * 0.4;
40
+        $.selector_cache('#headerJumbotron').css('height', height);
41
+    }
42
+}
43
+
44
+function loadHeader() {
45
+    if ($.selector_cache("#headerJumbotron").length > 0) {
46
+        animateCss($.selector_cache('#headerTitle'), 'fadeInUp faster');
47
+        $.selector_cache('#headerTitle').css('opacity', 1);
48
+        setTimeout(function () {
49
+            animateCss($.selector_cache('#headerSubTitle'), 'fadeInUp faster');
50
+            $.selector_cache('#headerSubTitle').css('opacity', 1);
51
+        }, 100);
52
+
53
+        setTimeout(function () {
54
+            $.selector_cache('#headerTop').addClass('loaded');
55
+        }, 100);
56
+
57
+        setTimeout(function () {
58
+            $.selector_cache('#headerBottom').addClass('loaded');
59
+        }, 300);
60
+    }
61
+}
62
+
63
+// Using animate.css, translated into jquery
64
+// https://github.com/daneden/animate.css
65
+function animateCss($elem, animationName, callback) {
66
+    $elem.addClass('animated ' + animationName);
67
+    $elem.on('animationend', function () {
68
+        $elem.removeClass('animated ' + animationName);
69
+        if (typeof callback === 'function')
70
+            callback();
71
+    });
72
+}
73
+
74
+
75
+jconfirm.defaults = {
76
+    title: 'Title',
77
+    titleClass: '',
78
+    type: 'red',
79
+    typeAnimated: true,
80
+    draggable: false,
81
+    dragWindowGap: 15,
82
+    dragWindowBorder: true,
83
+    animateFromElement: true,
84
+    smoothContent: true,
85
+    content: 'content',
86
+    escapeKey: 'ok',
87
+    buttons: {},
88
+    defaultButtons: {
89
+        ok: {
90
+            keys: ['enter'],
91
+            text: 'OK',
92
+            action: function () {
93
+            }
94
+        },
95
+        close: {
96
+            action: function () {
97
+            }
98
+        },
99
+    },
100
+    contentLoaded: function (data, status, xhr) {
101
+    },
102
+    icon: '',
103
+    lazyOpen: false,
104
+    bgOpacity: null,
105
+    theme: 'supervan',
106
+    animation: 'scale',
107
+    closeAnimation: 'scale',
108
+    animationSpeed: 300,
109
+    animationBounce: 1,
110
+    rtl: false,
111
+    container: 'body',
112
+    containerFluid: false,
113
+    backgroundDismiss: false,
114
+    backgroundDismissAnimation: 'shake',
115
+    autoClose: false,
116
+    closeIcon: null,
117
+    closeIconClass: false,
118
+    watchInterval: 100,
119
+    columnClass: 'xlarge',
120
+    boxWidth: '50%',
121
+    scrollToPreviousElement: true,
122
+    scrollToPreviousElementAnimate: true,
123
+    useBootstrap: true,
124
+    offsetTop: 40,
125
+    offsetBottom: 40,
126
+    bootstrapClasses: {
127
+        container: 'container',
128
+        containerFluid: 'container-fluid',
129
+        row: 'row',
130
+    },
131
+    onContentReady: function () {
132
+    },
133
+    onOpenBefore: function () {
134
+        // after the modal is displayed.
135
+        $('body').css('overflow', 'hidden');
136
+    },
137
+    onOpen: function () {
138
+    },
139
+    onClose: function () {
140
+        // before the modal is hidden.
141
+        $('body').css('overflow', 'auto');
142
+    },
143
+    onDestroy: function () {
144
+    },
145
+    onAction: function () {
146
+    }
147
+};

+ 61
- 0
assets/js/sidenav.js View File

@@ -0,0 +1,61 @@
1
+let menuOpen = false;
2
+let hamburger = $(".hamburger");
3
+
4
+/*
5
+ * Open navigation menu, change Hamburger icon to selected state
6
+ * and display the back button overlay over the page
7
+ */
8
+
9
+function openNav() {
10
+    $.selector_cache('#sidenav').addClass("sidenav-open");
11
+    enableHamburger();
12
+    menuOpen = true;
13
+}
14
+
15
+
16
+/*
17
+ * Close navigation menu, change Hamburger icon back to default state
18
+ * and hide the back button overlay
19
+ */
20
+function closeNav() {
21
+    $.selector_cache('#sidenav').removeClass("sidenav-open");
22
+    disableHamburger();
23
+    menuOpen = false;
24
+}
25
+
26
+
27
+/*
28
+ * Toggle the navigation bar
29
+ */
30
+function toggleNav() {
31
+    if (menuOpen) {
32
+        closeNav();
33
+    } else {
34
+        openNav();
35
+    }
36
+}
37
+
38
+function disableHamburger() {
39
+    $.selector_cache('.hamburger').removeClass("change");
40
+}
41
+
42
+function enableHamburger() {
43
+    $.selector_cache('.hamburger').addClass("change");
44
+}
45
+
46
+// Animate hamburger on hover
47
+$.selector_cache('.hamburger').hover(function(){
48
+    $.selector_cache('.bar1').css("background-color", "#e62b1e");
49
+    $.selector_cache('.bar2-1').css("background-color", "#e62b1e");
50
+    $.selector_cache('.bar2-2').css("background-color", "#e62b1e");
51
+    $.selector_cache('.bar2-1').css("left", "-5px");
52
+    $.selector_cache('.bar2-2').css("right", "-5px");
53
+    $.selector_cache('.bar3').css("background-color", "#e62b1e");
54
+}, function(){
55
+    $.selector_cache('.bar1').css("background-color", "#404040");
56
+    $.selector_cache('.bar2-1').css("background-color", "#404040");
57
+    $.selector_cache('.bar2-2').css("background-color", "#404040");
58
+    $.selector_cache('.bar2-1').css("left", "0");
59
+    $.selector_cache('.bar2-2').css("right", "0");
60
+    $.selector_cache('.bar3').css("background-color", "#404040");
61
+});

+ 31
- 0
includes/footer.php View File

@@ -0,0 +1,31 @@
1
+<footer class="p-0 shadow">
2
+    <div class="container-fluid text-center">
3
+        <div class="row">
4
+            <div class="col-lg p-3">
5
+                <h5 class="text-uppercase">À Propos de Proximo</h5>
6
+                <p class="text-center">
7
+                    Coucou
8
+                </p>
9
+            </div>
10
+            <div class="col-lg-2 text-center p-3">
11
+                <h3>SUIVEZ NOUS</h3>
12
+                <ul class="list-unstyled" id="socialLinks">
13
+                    <li>
14
+                        <a href="https://www.facebook.com/" target="_blank">
15
+                            <i class="fab fa-facebook"></i>
16
+                        </a>
17
+                    </li>
18
+                </ul>
19
+            </div>
20
+        </div>
21
+        <div class="footer-copyright text-center py-3 shadow">
22
+            Site du Proximo de l'INSA Toulouse
23
+            <br>
24
+            Copyright ©
25
+            <script type="text/javascript">
26
+                document.write(new Date().getFullYear().toString())
27
+            </script>
28
+            Arnaud VERGNET. Tous droits réservés.
29
+        </div>
30
+    </div>
31
+</footer>

+ 55
- 0
includes/navbar.php View File

@@ -0,0 +1,55 @@
1
+<!--NAVBAR-->
2
+<nav class="navbar navbar-expand-xl sticky-top">
3
+    <div class="container-fluid">
4
+        <div class="hamburger" onclick="openNav()">
5
+            <div class="bar1"></div>
6
+            <div class="bar2-1"></div>
7
+            <div class="bar2-2"></div>
8
+            <div class="bar3"></div>
9
+        </div>
10
+        <a href="<?= $relativePath ?>index.php" id="navbarLogoMobile">
11
+            <img src="<?= $relativePath ?>assets/images/proximo.png" alt="">
12
+        </a>
13
+        <div class="collapse navbar-collapse" id="navbarNav">
14
+            <ul class="navbar-nav">
15
+                <li class="nav-item">
16
+                    <div class="link-effect clipped clipped"></div>
17
+                    <a class="nav-link" href="<?= $relativePath ?>index.php" id="navbarLogo">
18
+                        <img src="<?= $relativePath ?>assets/images/proximo.png" alt="">
19
+                    </a>
20
+                </li>
21
+                <li class="nav-item">
22
+                    <div class="link-effect clipped"></div>
23
+                    <a class="nav-link" href="<?= $relativePath ?>event.php">
24
+                        <i class="fas fa-cubes mr-2"></i>
25
+                        Stock
26
+                    </a>
27
+                </li>
28
+                <li class="nav-item">
29
+                    <div class="link-effect clipped"></div>
30
+                    <a class="nav-link" href="<?= $relativePath ?>contact.php">
31
+                        <!--Team an contact links-->
32
+                        <i class="fas fa-envelope mr-2"></i>
33
+                        Contact
34
+                    </a>
35
+                </li>
36
+                <li class="nav-item">
37
+                    <div class="link-effect clipped"></div>
38
+                    <a class="nav-link" href="<?= $relativePath ?>about.php">
39
+                        <!--Place and access-->
40
+                        <i class="fas fa-info-circle mr-2"></i>
41
+                        À Propos
42
+                    </a>
43
+                </li>
44
+                <li class="nav-item">
45
+                    <div class="link-effect clipped"></div>
46
+                    <a class="nav-link" href="<?= $relativePath ?>about.php">
47
+                        <!--Place and access-->
48
+                        <i class="fas fa-sign-in-alt mr-2"></i>
49
+                        Connexion
50
+                    </a>
51
+                </li>
52
+            </ul>
53
+        </div>
54
+    </div>
55
+</nav>

+ 49
- 0
includes/sidenav.php View File

@@ -0,0 +1,49 @@
1
+<div id="sidenav" onclick="closeNav()">
2
+    <div id="sidenavScroll">
3
+        <div class="hamburger" onclick="closeNav()">
4
+            <div class="bar1"></div>
5
+            <div class="bar2-1"></div>
6
+            <div class="bar2-2"></div>
7
+            <div class="bar3"></div>
8
+        </div>
9
+        <ul id="sidenavList">
10
+            <li class="nav-item">
11
+                <div class="link-effect clipped clipped"></div>
12
+                <a class="nav-link" href="<?= $relativePath ?>index.php" id="navbarLogo">
13
+                    <img src="<?= $relativePath ?>assets/images/proximo.png" alt="">
14
+                </a>
15
+            </li>
16
+            <li class="nav-item">
17
+                <div class="link-effect clipped"></div>
18
+                <a class="nav-link" href="<?= $relativePath ?>event.php">
19
+                    <i class="fas fa-cubes mr-2"></i>
20
+                    Stock
21
+                </a>
22
+            </li>
23
+            <li class="nav-item">
24
+                <div class="link-effect clipped"></div>
25
+                <a class="nav-link" href="<?= $relativePath ?>contact.php">
26
+                    <!--Team an contact links-->
27
+                    <i class="fas fa-envelope mr-2"></i>
28
+                    Contact
29
+                </a>
30
+            </li>
31
+            <li class="nav-item">
32
+                <div class="link-effect clipped"></div>
33
+                <a class="nav-link" href="<?= $relativePath ?>about.php">
34
+                    <!--Place and access-->
35
+                    <i class="fas fa-info-circle mr-2"></i>
36
+                    À Propos
37
+                </a>
38
+            </li>
39
+            <li class="nav-item">
40
+                <div class="link-effect clipped"></div>
41
+                <a class="nav-link" href="<?= $relativePath ?>about.php">
42
+                    <!--Place and access-->
43
+                    <i class="fas fa-sign-in-alt mr-2"></i>
44
+                    Connexion
45
+                </a>
46
+            </li>
47
+        </ul>
48
+    </div>
49
+</div>

+ 77
- 0
includes/template.php View File

@@ -0,0 +1,77 @@
1
+<?php
2
+
3
+if (!isset($relativePath))
4
+    $relativePath = "";
5
+
6
+if (!isset($pageScripts))
7
+    $pageScripts = "";
8
+
9
+?>
10
+
11
+<!DOCTYPE html>
12
+<html>
13
+<head>
14
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
15
+    <title><?= $pageTitle ?> | Proximo</title>
16
+    <link href="https://fonts.googleapis.com/css?family=Open+sans|Roboto" rel="stylesheet">
17
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
18
+          integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
19
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
20
+          integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
21
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
22
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
23
+    <link type="text/css" rel="stylesheet" href="<?= $relativePath ?>assets/css/general.css" media="screen,projection"/>
24
+    <link type="text/css" rel="stylesheet" href="<?= $relativePath ?>assets/css/index.css" media="screen,projection"/>
25
+    <link type="text/css" rel="stylesheet" href="<?= $relativePath ?>assets/css/hamburger.css" media="screen,projection"/>
26
+    <link type="text/css" rel="stylesheet" href="<?= $relativePath ?>assets/css/sidenav.css" media="screen,projection"/>
27
+    <link type="text/css" rel="stylesheet" href="<?= $relativePath ?>assets/css/bootstrapOverwrite.css"
28
+          media="screen,projection"/>
29
+    <link rel="icon" type="image/png" href="<?= $relativePath ?>assets/images/favicon.png">
30
+    <!--Let browser know website is optimized for mobile-->
31
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
32
+</head>
33
+
34
+<body>
35
+
36
+<div id="mainContainer">
37
+
38
+    <div id="headerJumbotron" class="jumbotron text-center d-flex">
39
+        <div id="headerTitleContainer">
40
+            <h1 id="headerTitle"><?= $title ?></h1>
41
+            <h2 id="headerSubTitle"><?= $subTitle ?></h2>
42
+        </div>
43
+    </div>
44
+
45
+
46
+    <?php
47
+    include($relativePath . "includes/navbar.php");
48
+    include($relativePath . "includes/sidenav.php");
49
+    ?>
50
+
51
+    <div class="mt-4" id="contentContainer">
52
+        <?= $pageContent ?>
53
+    </div>
54
+    <?php include($relativePath . "includes/footer.php") ?>
55
+</div>
56
+
57
+<div id="scrollIndicator" style="display: none;">
58
+    <i class="fas fa-angle-double-down"></i>
59
+</div>
60
+
61
+<!--JavaScript at end of body for optimized loading-->
62
+<script src="https://code.jquery.com/jquery-3.3.1.min.js"
63
+        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
64
+        crossorigin="anonymous"></script>
65
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
66
+        integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
67
+        crossorigin="anonymous"></script>
68
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
69
+        integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
70
+        crossorigin="anonymous"></script>
71
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
72
+<script type="text/javascript" src="<?= $relativePath ?>assets/js/init.js"></script>
73
+<script type="text/javascript" src="<?= $relativePath ?>assets/js/sidenav.js"></script>
74
+<?= $pageScripts ?>
75
+
76
+</body>
77
+</html>

+ 17
- 0
index.php View File

@@ -0,0 +1,17 @@
1
+<?php
2
+ob_start();
3
+?>
4
+<div class="container">
5
+    <h1 class="text-center">Coucou</h1>
6
+    <p class="text-center">Ceci est du texte</p>
7
+</div>
8
+
9
+<?php
10
+$pageContent = ob_get_clean();
11
+$pageTitle = "Accueil";
12
+$title = "Proximo";
13
+$subTitle = "La supérette de l'INSA !";
14
+$relativePath = "";
15
+
16
+include($relativePath . "includes/template.php");
17
+?>

Loading…
Cancel
Save