Parcourir la source

Initial Checkin

master
George Williams il y a 5 ans
révision
527b63f735

+ 21
- 0
.gitignore Voir le fichier

@@ -0,0 +1,21 @@
1
+.DS_Store
2
+node_modules
3
+/dist
4
+
5
+# local env files
6
+.env.local
7
+.env.*.local
8
+
9
+# Log files
10
+npm-debug.log*
11
+yarn-debug.log*
12
+yarn-error.log*
13
+
14
+# Editor directories and files
15
+.idea
16
+.vscode
17
+*.suo
18
+*.ntvs*
19
+*.njsproj
20
+*.sln
21
+*.sw?

+ 24
- 0
README.md Voir le fichier

@@ -0,0 +1,24 @@
1
+# css_test
2
+
3
+## Project setup
4
+```
5
+npm install
6
+```
7
+
8
+### Compiles and hot-reloads for development
9
+```
10
+npm run serve
11
+```
12
+
13
+### Compiles and minifies for production
14
+```
15
+npm run build
16
+```
17
+
18
+### Lints and fixes files
19
+```
20
+npm run lint
21
+```
22
+
23
+### Customize configuration
24
+See [Configuration Reference](https://cli.vuejs.org/config/).

+ 3
- 0
babel.config.js Voir le fichier

@@ -0,0 +1,3 @@
1
+module.exports = {
2
+  presets: ["@vue/cli-plugin-babel/preset"]
3
+};

+ 11724
- 0
package-lock.json
Fichier diff supprimé car celui-ci est trop grand
Voir le fichier


+ 49
- 0
package.json Voir le fichier

@@ -0,0 +1,49 @@
1
+{
2
+  "name": "css_test",
3
+  "version": "0.1.0",
4
+  "private": true,
5
+  "scripts": {
6
+    "serve": "vue-cli-service serve",
7
+    "build": "vue-cli-service build",
8
+    "lint": "vue-cli-service lint"
9
+  },
10
+  "dependencies": {
11
+    "core-js": "^3.6.4",
12
+    "vue": "^2.6.11",
13
+    "vue-carousel": "^0.18.0",
14
+    "vue-router": "^3.1.6"
15
+  },
16
+  "devDependencies": {
17
+    "@vue/cli-plugin-babel": "~4.3.0",
18
+    "@vue/cli-plugin-eslint": "~4.3.0",
19
+    "@vue/cli-plugin-router": "~4.3.0",
20
+    "@vue/cli-service": "~4.3.0",
21
+    "@vue/eslint-config-prettier": "^6.0.0",
22
+    "babel-eslint": "^10.1.0",
23
+    "eslint": "^6.7.2",
24
+    "eslint-plugin-prettier": "^3.1.1",
25
+    "eslint-plugin-vue": "^6.2.2",
26
+    "prettier": "^1.19.1",
27
+    "vue-template-compiler": "^2.6.11"
28
+  },
29
+  "eslintConfig": {
30
+    "root": true,
31
+    "env": {
32
+      "node": true
33
+    },
34
+    "extends": [
35
+      "plugin:vue/essential",
36
+      "eslint:recommended",
37
+      "@vue/prettier"
38
+    ],
39
+    "parserOptions": {
40
+      "parser": "babel-eslint"
41
+    },
42
+    "rules": {}
43
+  },
44
+  "browserslist": [
45
+    "> 1%",
46
+    "last 2 versions",
47
+    "not dead"
48
+  ]
49
+}

BIN
public/favicon.ico Voir le fichier


+ 17
- 0
public/index.html Voir le fichier

@@ -0,0 +1,17 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+  <head>
4
+    <meta charset="utf-8">
5
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
7
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8
+    <title><%= htmlWebpackPlugin.options.title %></title>
9
+  </head>
10
+  <body>
11
+    <noscript>
12
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13
+    </noscript>
14
+    <div id="app"></div>
15
+    <!-- built files will be auto injected -->
16
+  </body>
17
+</html>

+ 48
- 0
src/App.vue Voir le fichier

@@ -0,0 +1,48 @@
1
+<template>
2
+  <div id="app">
3
+    <!-- <div id="nav">
4
+      <router-link to="/">Home</router-link> |
5
+      <router-link to="/about">About</router-link>
6
+    </div>-->
7
+    <NavBar @routerGoTo="routerGoTo" />
8
+    <router-view />
9
+  </div>
10
+</template>
11
+
12
+<script>
13
+import NavBar from "./components/shared/navBar";
14
+export default {
15
+  name: "app",
16
+  components: {
17
+    NavBar
18
+  },
19
+  methods: {
20
+    routerGoTo(path) {
21
+      this.$router.push(path);
22
+    }
23
+  }
24
+};
25
+</script>
26
+
27
+<style>
28
+#app {
29
+  font-family: Avenir, Helvetica, Arial, sans-serif;
30
+  -webkit-font-smoothing: antialiased;
31
+  -moz-osx-font-smoothing: grayscale;
32
+  text-align: center;
33
+  color: #2c3e50;
34
+}
35
+
36
+#nav {
37
+  padding: 30px;
38
+}
39
+
40
+#nav a {
41
+  font-weight: bold;
42
+  color: #2c3e50;
43
+}
44
+
45
+#nav a.router-link-exact-active {
46
+  color: #42b983;
47
+}
48
+</style>

+ 248
- 0
src/assets/assets/img/avataaars.svg Voir le fichier

@@ -0,0 +1,248 @@
1
+<?xml version="1.0" encoding="utf-8"?>
2
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
3
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4
+	 viewBox="0 0 264 280" style="enable-background:new 0 0 264 280;" xml:space="preserve">
5
+<style type="text/css">
6
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#E6E6E6;}
7
+	.st1{filter:url(#Adobe_OpacityMaskFilter);}
8
+	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
9
+	.st3{mask:url(#mask-2_1_);}
10
+	.st4{fill-rule:evenodd;clip-rule:evenodd;fill:#2C3E50;}
11
+	.st5{filter:url(#Adobe_OpacityMaskFilter_1_);}
12
+	.st6{mask:url(#mask-4_1_);}
13
+	.st7{fill-rule:evenodd;clip-rule:evenodd;fill:#D0C6AC;}
14
+	.st8{filter:url(#Adobe_OpacityMaskFilter_2_);}
15
+	.st9{mask:url(#mask-6_1_);}
16
+	.st10{fill-rule:evenodd;clip-rule:evenodd;fill:#EDB98A;}
17
+	.st11{filter:url(#Adobe_OpacityMaskFilter_3_);}
18
+	.st12{mask:url(#mask-6_2_);fill-rule:evenodd;clip-rule:evenodd;fill-opacity:0.1;}
19
+	.st13{filter:url(#Adobe_OpacityMaskFilter_4_);}
20
+	.st14{mask:url(#react-mask-952_1_);}
21
+	.st15{filter:url(#Adobe_OpacityMaskFilter_5_);}
22
+	.st16{opacity:0.6;mask:url(#react-mask-952_2_);}
23
+	.st17{fill-rule:evenodd;clip-rule:evenodd;fill-opacity:0.16;}
24
+	.st18{fill-rule:evenodd;clip-rule:evenodd;fill-opacity:0.7;}
25
+	.st19{filter:url(#Adobe_OpacityMaskFilter_6_);}
26
+	.st20{mask:url(#react-mask-934_1_);fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
27
+	.st21{filter:url(#Adobe_OpacityMaskFilter_7_);}
28
+	.st22{mask:url(#react-mask-934_2_);}
29
+	.st23{fill-rule:evenodd;clip-rule:evenodd;fill:#FF4F6D;}
30
+	.st24{fill-rule:evenodd;clip-rule:evenodd;fill-opacity:0.6;}
31
+	.st25{filter:url(#Adobe_OpacityMaskFilter_8_);}
32
+	.st26{mask:url(#react-mask-925_1_);}
33
+	.st27{fill-rule:evenodd;clip-rule:evenodd;fill:#28354B;}
34
+	.st28{filter:url(#Adobe_OpacityMaskFilter_9_);}
35
+	.st29{mask:url(#react-mask-924_1_);}
36
+	.st30{fill-rule:evenodd;clip-rule:evenodd;fill:#4A312C;}
37
+</style>
38
+<desc>Created with getavataaars.com</desc>
39
+<g>
40
+	<g transform="translate(-825.000000, -1100.000000)">
41
+		<g transform="translate(825.000000, 1100.000000)">
42
+			<g id="Circle" transform="translate(12.000000, 40.000000)">
43
+				<g id="Circle-Background">
44
+					<circle class="st0" cx="120" cy="120" r="120"/>
45
+				</g>
46
+				<defs>
47
+					<filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="240" height="240">
48
+						<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
49
+					</filter>
50
+				</defs>
51
+				<mask maskUnits="userSpaceOnUse" x="0" y="0" width="240" height="240" id="mask-2_1_">
52
+					<g class="st1">
53
+						<circle id="path-1_1_" class="st2" cx="120" cy="120" r="120"/>
54
+					</g>
55
+				</mask>
56
+				<g class="st3">
57
+					<rect class="st4" width="240" height="240"/>
58
+				</g>
59
+			</g>
60
+			<g id="Mask">
61
+			</g>
62
+			<defs>
63
+				<filter id="Adobe_OpacityMaskFilter_1_" filterUnits="userSpaceOnUse" x="-1" y="0" width="265" height="280">
64
+					<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
65
+				</filter>
66
+			</defs>
67
+			<mask maskUnits="userSpaceOnUse" x="-1" y="0" width="265" height="280" id="mask-4_1_">
68
+				<g class="st5">
69
+					<path id="path-3_1_" class="st2" d="M12,160c0,66.3,53.7,120,120,120s120-53.7,120-120h12V0H0v160H12z"/>
70
+				</g>
71
+			</mask>
72
+			<g id="Avataaar" class="st6">
73
+				<g id="Body" transform="translate(32.000000, 36.000000)">
74
+					<g>
75
+						<path class="st7" d="M124,144.6V163h4l0,0c39.8,0,72,32.2,72,72v9H0v-9c0-39.8,32.2-72,72-72l0,0h4v-18.4
76
+							c-17.2-8.2-29.6-24.9-31.7-44.7C38.5,99.1,34,94.1,34,88V74c0-5.9,4.3-10.9,10-11.8V56l0,0c0-30.9,25.1-56,56-56l0,0l0,0
77
+							c30.9,0,56,25.1,56,56v6.2c5.7,1,10,5.9,10,11.8v14c0,6.1-4.5,11.1-10.3,11.9C153.6,119.7,141.2,136.4,124,144.6z"/>
78
+					</g>
79
+					<defs>
80
+						<filter id="Adobe_OpacityMaskFilter_2_" filterUnits="userSpaceOnUse" x="-32" y="0" width="264" height="244">
81
+							<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
82
+						</filter>
83
+					</defs>
84
+					<mask maskUnits="userSpaceOnUse" x="-32" y="0" width="264" height="244" id="mask-6_1_">
85
+						<g class="st8">
86
+							<path id="path-5_1_" class="st2" d="M124,144.6V163h4l0,0c39.8,0,72,32.2,72,72v9H0v-9c0-39.8,32.2-72,72-72l0,0h4v-18.4
87
+								c-17.2-8.2-29.6-24.9-31.7-44.7C38.5,99.1,34,94.1,34,88V74c0-5.9,4.3-10.9,10-11.8V56l0,0c0-30.9,25.1-56,56-56l0,0l0,0
88
+								c30.9,0,56,25.1,56,56v6.2c5.7,1,10,5.9,10,11.8v14c0,6.1-4.5,11.1-10.3,11.9C153.6,119.7,141.2,136.4,124,144.6z"/>
89
+						</g>
90
+					</mask>
91
+					<g class="st9">
92
+						<g id="Color" transform="translate(-32.000000, 0.000000)">
93
+							<rect class="st10" width="264" height="244"/>
94
+						</g>
95
+					</g>
96
+					<defs>
97
+						<filter id="Adobe_OpacityMaskFilter_3_" filterUnits="userSpaceOnUse" x="44" y="79" width="112" height="79">
98
+							<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
99
+						</filter>
100
+					</defs>
101
+					<mask maskUnits="userSpaceOnUse" x="44" y="79" width="112" height="79" id="mask-6_2_">
102
+						<g class="st11">
103
+							<path id="path-5_2_" class="st2" d="M124,144.6V163h4l0,0c39.8,0,72,32.2,72,72v9H0v-9c0-39.8,32.2-72,72-72l0,0h4v-18.4
104
+								c-17.2-8.2-29.6-24.9-31.7-44.7C38.5,99.1,34,94.1,34,88V74c0-5.9,4.3-10.9,10-11.8V56l0,0c0-30.9,25.1-56,56-56l0,0l0,0
105
+								c30.9,0,56,25.1,56,56v6.2c5.7,1,10,5.9,10,11.8v14c0,6.1-4.5,11.1-10.3,11.9C153.6,119.7,141.2,136.4,124,144.6z"/>
106
+						</g>
107
+					</mask>
108
+					<path id="Neck-Shadow" class="st12" d="M156,79v23c0,30.9-25.1,56-56,56s-56-25.1-56-56V79v15c0,30.9,25.1,56,56,56
109
+						s56-25.1,56-56V79z"/>
110
+				</g>
111
+				<g transform="translate(0.000000, 170.000000)">
112
+					<g id="Clothes">
113
+						<path class="st0" d="M166,29.3c37,3,66,34,66,71.8v8.9H32v-8.9C32,63,61.6,31.8,99,29.2c0,0.4,0,0.7,0,1.1
114
+							c0,11.9,15,21.5,33.5,21.5S166,42.2,166,30.3C166,30,166,29.6,166,29.3z"/>
115
+					</g>
116
+					<defs>
117
+						<filter id="Adobe_OpacityMaskFilter_4_" filterUnits="userSpaceOnUse" x="0" y="0" width="264" height="110">
118
+							<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
119
+						</filter>
120
+					</defs>
121
+					<mask maskUnits="userSpaceOnUse" x="0" y="0" width="264" height="110" id="react-mask-952_1_">
122
+						<g class="st13">
123
+							<path id="react-path-951_1_" class="st2" d="M166,29.3c37,3,66,34,66,71.8v8.9H32v-8.9C32,63,61.6,31.8,99,29.2
124
+								c0,0.4,0,0.7,0,1.1c0,11.9,15,21.5,33.5,21.5S166,42.2,166,30.3C166,30,166,29.6,166,29.3z"/>
125
+						</g>
126
+					</mask>
127
+					<g class="st14">
128
+						<rect class="st2" width="264" height="110"/>
129
+					</g>
130
+					<defs>
131
+						<filter id="Adobe_OpacityMaskFilter_5_" filterUnits="userSpaceOnUse" x="92.9" y="4.9" width="79.3" height="53.8">
132
+							<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
133
+						</filter>
134
+					</defs>
135
+					<mask maskUnits="userSpaceOnUse" x="92.9" y="4.9" width="79.3" height="53.8" id="react-mask-952_2_">
136
+						<g class="st15">
137
+							<path id="react-path-951_2_" class="st2" d="M166,29.3c37,3,66,34,66,71.8v8.9H32v-8.9C32,63,61.6,31.8,99,29.2
138
+								c0,0.4,0,0.7,0,1.1c0,11.9,15,21.5,33.5,21.5S166,42.2,166,30.3C166,30,166,29.6,166,29.3z"/>
139
+						</g>
140
+					</mask>
141
+					<g id="Shadowy" class="st16">
142
+						<g transform="translate(92.000000, 4.000000)">
143
+							<ellipse class="st17" cx="40.5" cy="27.8" rx="39.6" ry="26.9"/>
144
+						</g>
145
+					</g>
146
+				</g>
147
+				<g id="Face" transform="translate(76.000000, 82.000000)">
148
+					<g transform="translate(2.000000, 52.000000)">
149
+						<g id="Mouth">
150
+							<path class="st18" d="M35.1,15.1C36.2,24.6,44.2,32,54,32c9.8,0,17.9-7.4,18.9-17c0.1-0.8-0.8-2-1.8-2c-14.9,0-26.3,0-34,0
151
+								C36,13,35,14.2,35.1,15.1z"/>
152
+						</g>
153
+						<defs>
154
+							<filter id="Adobe_OpacityMaskFilter_6_" filterUnits="userSpaceOnUse" x="39" y="2" width="31" height="16">
155
+								<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
156
+							</filter>
157
+						</defs>
158
+						<mask maskUnits="userSpaceOnUse" x="39" y="2" width="31" height="16" id="react-mask-934_1_">
159
+							<g class="st19">
160
+								<path id="react-path-933_1_" class="st2" d="M35.1,15.1C36.2,24.6,44.2,32,54,32c9.8,0,17.9-7.4,18.9-17
161
+									c0.1-0.8-0.8-2-1.8-2c-14.9,0-26.3,0-34,0C36,13,35,14.2,35.1,15.1z"/>
162
+							</g>
163
+						</mask>
164
+						<path id="Teeth" class="st20" d="M44,2h21c2.8,0,5,2.2,5,5v6c0,2.8-2.2,5-5,5H44c-2.8,0-5-2.2-5-5V7C39,4.2,41.2,2,44,2z"/>
165
+						<defs>
166
+							<filter id="Adobe_OpacityMaskFilter_7_" filterUnits="userSpaceOnUse" x="38" y="24" width="32" height="22">
167
+								<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
168
+							</filter>
169
+						</defs>
170
+						<mask maskUnits="userSpaceOnUse" x="38" y="24" width="32" height="22" id="react-mask-934_2_">
171
+							<g class="st21">
172
+								<path id="react-path-933_2_" class="st2" d="M35.1,15.1C36.2,24.6,44.2,32,54,32c9.8,0,17.9-7.4,18.9-17
173
+									c0.1-0.8-0.8-2-1.8-2c-14.9,0-26.3,0-34,0C36,13,35,14.2,35.1,15.1z"/>
174
+							</g>
175
+						</mask>
176
+						<g id="Tongue" class="st22">
177
+							<g transform="translate(38.000000, 24.000000)">
178
+								<circle class="st23" cx="11" cy="11" r="11"/>
179
+								<circle class="st23" cx="21" cy="11" r="11"/>
180
+							</g>
181
+						</g>
182
+					</g>
183
+					<g transform="translate(28.000000, 40.000000)">
184
+						<path id="Nose" class="st17" d="M16,8c0,4.4,5.4,8,12,8l0,0c6.6,0,12-3.6,12-8"/>
185
+					</g>
186
+					<g transform="translate(0.000000, 8.000000)">
187
+						<path id="Squint" class="st24" d="M16.2,22.4C18,18.6,22.2,16,27,16c4.8,0,9,2.6,10.8,6.4c0.6,1.1-0.2,2-1,1.4
188
+							c-2.5-2.1-5.9-3.4-9.8-3.4c-3.7,0-7.1,1.2-9.6,3.2C16.5,24.3,15.6,23.6,16.2,22.4z"/>
189
+						<path class="st24" d="M74.2,22.4C76,18.6,80.2,16,85,16c4.8,0,9,2.6,10.8,6.4c0.6,1.1-0.2,2-1,1.4c-2.5-2.1-5.9-3.4-9.8-3.4
190
+							c-3.7,0-7.1,1.2-9.6,3.2C74.5,24.3,73.6,23.6,74.2,22.4z"/>
191
+					</g>
192
+					<g>
193
+						<path id="Eyebrow" class="st24" d="M26.5,6.1c-5.8,0.3-15.2,4.5-15,10.3c0,0.2,0.3,0.3,0.4,0.1c2.8-3,22.3-5.9,29.2-4.4
194
+							c0.6,0.1,1.1-0.5,0.7-0.9C38.5,7.5,31.7,5.9,26.5,6.1"/>
195
+						<path class="st24" d="M86.5,6.1c5.8,0.3,15.2,4.5,15,10.3c0,0.2-0.3,0.3-0.4,0.1c-2.8-3-22.3-5.9-29.2-4.4
196
+							c-0.6,0.1-1.1-0.5-0.7-0.9C74.5,7.5,81.3,5.9,86.5,6.1"/>
197
+					</g>
198
+				</g>
199
+				<g id="Top">
200
+					<defs>
201
+						<filter id="Adobe_OpacityMaskFilter_8_" filterUnits="userSpaceOnUse" x="-1" y="0" width="264" height="280">
202
+							<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
203
+						</filter>
204
+					</defs>
205
+					<mask maskUnits="userSpaceOnUse" x="-1" y="0" width="264" height="280" id="react-mask-925_1_">
206
+						<g class="st25">
207
+							<rect id="react-path-927_1_" class="st2" width="264" height="280"/>
208
+						</g>
209
+					</mask>
210
+					<g class="st26">
211
+						<g transform="translate(-1.000000, 0.000000)">
212
+							<g id="Short-Hair">
213
+								<path class="st27" d="M183.7,38.9c5.4-5,6.7-15,3.6-21.5c-3.8-8-11.4-9-18.7-5.5c-6.9,3.3-13.1,4.4-20.6,2.8
214
+									c-7.3-1.5-14.1-4.3-21.6-4.7C114,9.3,102,13.9,93.6,23.1c-1.6,1.8-2.9,3.8-4.1,5.8c-1,1.6-2.1,3.4-2.5,5.3
215
+									c-0.2,0.9,0.2,3.1-0.3,3.8c-0.5,0.8-2.3,1.5-3.1,2.1c-1.6,1.2-2.9,2.5-4.2,4c-2.7,3.2-4.1,6.6-5.4,10.6
216
+									c-4.1,13.2-4.5,29,0.9,42c0.7,1.7,2.9,5.4,4.2,1.6c0.3-0.7-0.3-3.2-0.3-3.9c0-2.7,1.5-20.7,8-30.8c2.1-3.3,12-15.6,14-15.7
217
+									c1.1,1.7,11.9,12.5,39.9,11.2c12.7-0.6,22.4-6.3,24.7-8.7c1,5.5,13,13.8,14.8,17.2c5.3,9.8,6.4,30.3,8.4,30.3
218
+									s3.5-5.2,3.9-6.2c3.1-7.4,3.6-16.6,3.3-24.6C195.5,57,191.3,45.9,183.7,38.9z"/>
219
+							</g>
220
+							<defs>
221
+								<filter id="Adobe_OpacityMaskFilter_9_" filterUnits="userSpaceOnUse" x="0" y="0" width="264" height="280">
222
+									<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
223
+								</filter>
224
+							</defs>
225
+							<mask maskUnits="userSpaceOnUse" x="0" y="0" width="264" height="280" id="react-mask-924_1_">
226
+								<g class="st28">
227
+									<path id="react-path-926_1_" class="st2" d="M183.7,38.9c5.4-5,6.7-15,3.6-21.5c-3.8-8-11.4-9-18.7-5.5
228
+										c-6.9,3.3-13.1,4.4-20.6,2.8c-7.3-1.5-14.1-4.3-21.6-4.7C114,9.3,102,13.9,93.6,23.1c-1.6,1.8-2.9,3.8-4.1,5.8
229
+										c-1,1.6-2.1,3.4-2.5,5.3c-0.2,0.9,0.2,3.1-0.3,3.8c-0.5,0.8-2.3,1.5-3.1,2.1c-1.6,1.2-2.9,2.5-4.2,4
230
+										c-2.7,3.2-4.1,6.6-5.4,10.6c-4.1,13.2-4.5,29,0.9,42c0.7,1.7,2.9,5.4,4.2,1.6c0.3-0.7-0.3-3.2-0.3-3.9
231
+										c0-2.7,1.5-20.7,8-30.8c2.1-3.3,12-15.6,14-15.7c1.1,1.7,11.9,12.5,39.9,11.2c12.7-0.6,22.4-6.3,24.7-8.7
232
+										c1,5.5,13,13.8,14.8,17.2c5.3,9.8,6.4,30.3,8.4,30.3s3.5-5.2,3.9-6.2c3.1-7.4,3.6-16.6,3.3-24.6
233
+										C195.5,57,191.3,45.9,183.7,38.9z"/>
234
+								</g>
235
+							</mask>
236
+							<g class="st29">
237
+								<g transform="translate(0.000000, 0.000000) ">
238
+									<rect class="st30" width="264" height="280"/>
239
+								</g>
240
+							</g>
241
+						</g>
242
+					</g>
243
+				</g>
244
+			</g>
245
+		</g>
246
+	</g>
247
+</g>
248
+</svg>

BIN
src/assets/assets/img/favicon.ico Voir le fichier


BIN
src/assets/assets/img/portfolio/cabin.png Voir le fichier


BIN
src/assets/assets/img/portfolio/cake.png Voir le fichier


BIN
src/assets/assets/img/portfolio/circus.png Voir le fichier


BIN
src/assets/assets/img/portfolio/game.png Voir le fichier


BIN
src/assets/assets/img/portfolio/safe.png Voir le fichier


BIN
src/assets/assets/img/portfolio/submarine.png Voir le fichier


+ 88
- 0
src/assets/assets/mail/contact_me.js Voir le fichier

@@ -0,0 +1,88 @@
1
+$(function () {
2
+    $(
3
+        "#contactForm input,#contactForm textarea,#contactForm button"
4
+    ).jqBootstrapValidation({
5
+        preventSubmit: true,
6
+        submitError: function ($form, event, errors) {
7
+            // additional error messages or events
8
+        },
9
+        submitSuccess: function ($form, event) {
10
+            event.preventDefault(); // prevent default submit behaviour
11
+            // get values from FORM
12
+            var name = $("input#name").val();
13
+            var email = $("input#email").val();
14
+            var phone = $("input#phone").val();
15
+            var message = $("textarea#message").val();
16
+            var firstName = name; // For Success/Failure Message
17
+            // Check for white space in name for Success/Fail message
18
+            if (firstName.indexOf(" ") >= 0) {
19
+                firstName = name.split(" ").slice(0, -1).join(" ");
20
+            }
21
+            $this = $("#sendMessageButton");
22
+            $this.prop("disabled", true); // Disable submit button until AJAX call is complete to prevent duplicate messages
23
+            $.ajax({
24
+                url: "/assets/mail/contact_me.php",
25
+                type: "POST",
26
+                data: {
27
+                    name: name,
28
+                    phone: phone,
29
+                    email: email,
30
+                    message: message,
31
+                },
32
+                cache: false,
33
+                success: function () {
34
+                    // Success message
35
+                    $("#success").html("<div class='alert alert-success'>");
36
+                    $("#success > .alert-success")
37
+                        .html(
38
+                            "<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;"
39
+                        )
40
+                        .append("</button>");
41
+                    $("#success > .alert-success").append(
42
+                        "<strong>Your message has been sent. </strong>"
43
+                    );
44
+                    $("#success > .alert-success").append("</div>");
45
+                    //clear all fields
46
+                    $("#contactForm").trigger("reset");
47
+                },
48
+                error: function () {
49
+                    // Fail message
50
+                    $("#success").html("<div class='alert alert-danger'>");
51
+                    $("#success > .alert-danger")
52
+                        .html(
53
+                            "<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;"
54
+                        )
55
+                        .append("</button>");
56
+                    $("#success > .alert-danger").append(
57
+                        $("<strong>").text(
58
+                            "Sorry " +
59
+                                firstName +
60
+                                ", it seems that my mail server is not responding. Please try again later!"
61
+                        )
62
+                    );
63
+                    $("#success > .alert-danger").append("</div>");
64
+                    //clear all fields
65
+                    $("#contactForm").trigger("reset");
66
+                },
67
+                complete: function () {
68
+                    setTimeout(function () {
69
+                        $this.prop("disabled", false); // Re-enable submit button when AJAX call is complete
70
+                    }, 1000);
71
+                },
72
+            });
73
+        },
74
+        filter: function () {
75
+            return $(this).is(":visible");
76
+        },
77
+    });
78
+
79
+    $('a[data-toggle="tab"]').click(function (e) {
80
+        e.preventDefault();
81
+        $(this).tab("show");
82
+    });
83
+});
84
+
85
+/*When clicking on Full hide fail/success boxes */
86
+$("#name").focus(function () {
87
+    $("#success").html("");
88
+});

+ 22
- 0
src/assets/assets/mail/contact_me.php Voir le fichier

@@ -0,0 +1,22 @@
1
+<?php
2
+// Check for empty fields
3
+if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['phone']) || empty($_POST['message']) || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
4
+  http_response_code(500);
5
+  exit();
6
+}
7
+
8
+$name = strip_tags(htmlspecialchars($_POST['name']));
9
+$email = strip_tags(htmlspecialchars($_POST['email']));
10
+$phone = strip_tags(htmlspecialchars($_POST['phone']));
11
+$message = strip_tags(htmlspecialchars($_POST['message']));
12
+
13
+// Create the email and send the message
14
+$to = "yourname@yourdomain.com"; // Add your email address in between the "" replacing yourname@yourdomain.com - This is where the form will send a message to.
15
+$subject = "Website Contact Form:  $name";
16
+$body = "You have received a new message from your website contact form.\n\n"."Here are the details:\n\nName: $name\n\nEmail: $email\n\nPhone: $phone\n\nMessage:\n$message";
17
+$header = "From: noreply@yourdomain.com\n"; // This is the email address the generated message will be from. We recommend using something like noreply@yourdomain.com.
18
+$header .= "Reply-To: $email";	
19
+
20
+if(!mail($to, $subject, $body, $header))
21
+  http_response_code(500);
22
+?>

+ 912
- 0
src/assets/assets/mail/jqBootstrapValidation.js Voir le fichier

@@ -0,0 +1,912 @@
1
+/* jqBootstrapValidation
2
+ * A plugin for automating validation on Twitter Bootstrap formatted forms.
3
+ *
4
+ * v1.3.6
5
+ *
6
+ * License: MIT <http://opensource.org/licenses/mit-license.php> - see LICENSE file
7
+ *
8
+ * http://ReactiveRaven.github.com/jqBootstrapValidation/
9
+ */
10
+
11
+(function( $ ){
12
+
13
+	var createdElements = [];
14
+
15
+	var defaults = {
16
+		options: {
17
+			prependExistingHelpBlock: false,
18
+			sniffHtml: true, // sniff for 'required', 'maxlength', etc
19
+			preventSubmit: true, // stop the form submit event from firing if validation fails
20
+			submitError: false, // function called if there is an error when trying to submit
21
+			submitSuccess: false, // function called just before a successful submit event is sent to the server
22
+            semanticallyStrict: false, // set to true to tidy up generated HTML output
23
+			autoAdd: {
24
+				helpBlocks: true
25
+			},
26
+            filter: function () {
27
+                // return $(this).is(":visible"); // only validate elements you can see
28
+                return true; // validate everything
29
+            }
30
+		},
31
+    methods: {
32
+      init : function( options ) {
33
+
34
+        var settings = $.extend(true, {}, defaults);
35
+
36
+        settings.options = $.extend(true, settings.options, options);
37
+
38
+        var $siblingElements = this;
39
+
40
+        var uniqueForms = $.unique(
41
+          $siblingElements.map( function () {
42
+            return $(this).parents("form")[0];
43
+          }).toArray()
44
+        );
45
+
46
+        $(uniqueForms).bind("submit", function (e) {
47
+          var $form = $(this);
48
+          var warningsFound = 0;
49
+          var $inputs = $form.find("input,textarea,select").not("[type=submit],[type=image]").filter(settings.options.filter);
50
+          $inputs.trigger("submit.validation").trigger("validationLostFocus.validation");
51
+
52
+          $inputs.each(function (i, el) {
53
+            var $this = $(el),
54
+              $controlGroup = $this.parents(".control-group").first();
55
+            if (
56
+              $controlGroup.hasClass("warning")
57
+            ) {
58
+              $controlGroup.removeClass("warning").addClass("error");
59
+              warningsFound++;
60
+            }
61
+          });
62
+
63
+          $inputs.trigger("validationLostFocus.validation");
64
+
65
+          if (warningsFound) {
66
+            if (settings.options.preventSubmit) {
67
+              e.preventDefault();
68
+            }
69
+            $form.addClass("error");
70
+            if ($.isFunction(settings.options.submitError)) {
71
+              settings.options.submitError($form, e, $inputs.jqBootstrapValidation("collectErrors", true));
72
+            }
73
+          } else {
74
+            $form.removeClass("error");
75
+            if ($.isFunction(settings.options.submitSuccess)) {
76
+              settings.options.submitSuccess($form, e);
77
+            }
78
+          }
79
+        });
80
+
81
+        return this.each(function(){
82
+
83
+          // Get references to everything we're interested in
84
+          var $this = $(this),
85
+            $controlGroup = $this.parents(".control-group").first(),
86
+            $helpBlock = $controlGroup.find(".help-block").first(),
87
+            $form = $this.parents("form").first(),
88
+            validatorNames = [];
89
+
90
+          // create message container if not exists
91
+          if (!$helpBlock.length && settings.options.autoAdd && settings.options.autoAdd.helpBlocks) {
92
+              $helpBlock = $('<div class="help-block" />');
93
+              $controlGroup.find('.controls').append($helpBlock);
94
+							createdElements.push($helpBlock[0]);
95
+          }
96
+
97
+          // =============================================================
98
+          //                                     SNIFF HTML FOR VALIDATORS
99
+          // =============================================================
100
+
101
+          // *snort sniff snuffle*
102
+
103
+          if (settings.options.sniffHtml) {
104
+            var message = "";
105
+            // ---------------------------------------------------------
106
+            //                                                   PATTERN
107
+            // ---------------------------------------------------------
108
+            if ($this.attr("pattern") !== undefined) {
109
+              message = "Not in the expected format<!-- data-validation-pattern-message to override -->";
110
+              if ($this.data("validationPatternMessage")) {
111
+                message = $this.data("validationPatternMessage");
112
+              }
113
+              $this.data("validationPatternMessage", message);
114
+              $this.data("validationPatternRegex", $this.attr("pattern"));
115
+            }
116
+            // ---------------------------------------------------------
117
+            //                                                       MAX
118
+            // ---------------------------------------------------------
119
+            if ($this.attr("max") !== undefined || $this.attr("aria-valuemax") !== undefined) {
120
+              var max = ($this.attr("max") !== undefined ? $this.attr("max") : $this.attr("aria-valuemax"));
121
+              message = "Too high: Maximum of '" + max + "'<!-- data-validation-max-message to override -->";
122
+              if ($this.data("validationMaxMessage")) {
123
+                message = $this.data("validationMaxMessage");
124
+              }
125
+              $this.data("validationMaxMessage", message);
126
+              $this.data("validationMaxMax", max);
127
+            }
128
+            // ---------------------------------------------------------
129
+            //                                                       MIN
130
+            // ---------------------------------------------------------
131
+            if ($this.attr("min") !== undefined || $this.attr("aria-valuemin") !== undefined) {
132
+              var min = ($this.attr("min") !== undefined ? $this.attr("min") : $this.attr("aria-valuemin"));
133
+              message = "Too low: Minimum of '" + min + "'<!-- data-validation-min-message to override -->";
134
+              if ($this.data("validationMinMessage")) {
135
+                message = $this.data("validationMinMessage");
136
+              }
137
+              $this.data("validationMinMessage", message);
138
+              $this.data("validationMinMin", min);
139
+            }
140
+            // ---------------------------------------------------------
141
+            //                                                 MAXLENGTH
142
+            // ---------------------------------------------------------
143
+            if ($this.attr("maxlength") !== undefined) {
144
+              message = "Too long: Maximum of '" + $this.attr("maxlength") + "' characters<!-- data-validation-maxlength-message to override -->";
145
+              if ($this.data("validationMaxlengthMessage")) {
146
+                message = $this.data("validationMaxlengthMessage");
147
+              }
148
+              $this.data("validationMaxlengthMessage", message);
149
+              $this.data("validationMaxlengthMaxlength", $this.attr("maxlength"));
150
+            }
151
+            // ---------------------------------------------------------
152
+            //                                                 MINLENGTH
153
+            // ---------------------------------------------------------
154
+            if ($this.attr("minlength") !== undefined) {
155
+              message = "Too short: Minimum of '" + $this.attr("minlength") + "' characters<!-- data-validation-minlength-message to override -->";
156
+              if ($this.data("validationMinlengthMessage")) {
157
+                message = $this.data("validationMinlengthMessage");
158
+              }
159
+              $this.data("validationMinlengthMessage", message);
160
+              $this.data("validationMinlengthMinlength", $this.attr("minlength"));
161
+            }
162
+            // ---------------------------------------------------------
163
+            //                                                  REQUIRED
164
+            // ---------------------------------------------------------
165
+            if ($this.attr("required") !== undefined || $this.attr("aria-required") !== undefined) {
166
+              message = settings.builtInValidators.required.message;
167
+              if ($this.data("validationRequiredMessage")) {
168
+                message = $this.data("validationRequiredMessage");
169
+              }
170
+              $this.data("validationRequiredMessage", message);
171
+            }
172
+            // ---------------------------------------------------------
173
+            //                                                    NUMBER
174
+            // ---------------------------------------------------------
175
+            if ($this.attr("type") !== undefined && $this.attr("type").toLowerCase() === "number") {
176
+              message = settings.builtInValidators.number.message;
177
+              if ($this.data("validationNumberMessage")) {
178
+                message = $this.data("validationNumberMessage");
179
+              }
180
+              $this.data("validationNumberMessage", message);
181
+            }
182
+            // ---------------------------------------------------------
183
+            //                                                     EMAIL
184
+            // ---------------------------------------------------------
185
+            if ($this.attr("type") !== undefined && $this.attr("type").toLowerCase() === "email") {
186
+              message = "Not a valid email address<!-- data-validator-validemail-message to override -->";
187
+              if ($this.data("validationValidemailMessage")) {
188
+                message = $this.data("validationValidemailMessage");
189
+              } else if ($this.data("validationEmailMessage")) {
190
+                message = $this.data("validationEmailMessage");
191
+              }
192
+              $this.data("validationValidemailMessage", message);
193
+            }
194
+            // ---------------------------------------------------------
195
+            //                                                MINCHECKED
196
+            // ---------------------------------------------------------
197
+            if ($this.attr("minchecked") !== undefined) {
198
+              message = "Not enough options checked; Minimum of '" + $this.attr("minchecked") + "' required<!-- data-validation-minchecked-message to override -->";
199
+              if ($this.data("validationMincheckedMessage")) {
200
+                message = $this.data("validationMincheckedMessage");
201
+              }
202
+              $this.data("validationMincheckedMessage", message);
203
+              $this.data("validationMincheckedMinchecked", $this.attr("minchecked"));
204
+            }
205
+            // ---------------------------------------------------------
206
+            //                                                MAXCHECKED
207
+            // ---------------------------------------------------------
208
+            if ($this.attr("maxchecked") !== undefined) {
209
+              message = "Too many options checked; Maximum of '" + $this.attr("maxchecked") + "' required<!-- data-validation-maxchecked-message to override -->";
210
+              if ($this.data("validationMaxcheckedMessage")) {
211
+                message = $this.data("validationMaxcheckedMessage");
212
+              }
213
+              $this.data("validationMaxcheckedMessage", message);
214
+              $this.data("validationMaxcheckedMaxchecked", $this.attr("maxchecked"));
215
+            }
216
+          }
217
+
218
+          // =============================================================
219
+          //                                       COLLECT VALIDATOR NAMES
220
+          // =============================================================
221
+
222
+          // Get named validators
223
+          if ($this.data("validation") !== undefined) {
224
+            validatorNames = $this.data("validation").split(",");
225
+          }
226
+
227
+          // Get extra ones defined on the element's data attributes
228
+          $.each($this.data(), function (i, el) {
229
+            var parts = i.replace(/([A-Z])/g, ",$1").split(",");
230
+            if (parts[0] === "validation" && parts[1]) {
231
+              validatorNames.push(parts[1]);
232
+            }
233
+          });
234
+
235
+          // =============================================================
236
+          //                                     NORMALISE VALIDATOR NAMES
237
+          // =============================================================
238
+
239
+          var validatorNamesToInspect = validatorNames;
240
+          var newValidatorNamesToInspect = [];
241
+
242
+          do // repeatedly expand 'shortcut' validators into their real validators
243
+          {
244
+            // Uppercase only the first letter of each name
245
+            $.each(validatorNames, function (i, el) {
246
+              validatorNames[i] = formatValidatorName(el);
247
+            });
248
+
249
+            // Remove duplicate validator names
250
+            validatorNames = $.unique(validatorNames);
251
+
252
+            // Pull out the new validator names from each shortcut
253
+            newValidatorNamesToInspect = [];
254
+            $.each(validatorNamesToInspect, function(i, el) {
255
+              if ($this.data("validation" + el + "Shortcut") !== undefined) {
256
+                // Are these custom validators?
257
+                // Pull them out!
258
+                $.each($this.data("validation" + el + "Shortcut").split(","), function(i2, el2) {
259
+                  newValidatorNamesToInspect.push(el2);
260
+                });
261
+              } else if (settings.builtInValidators[el.toLowerCase()]) {
262
+                // Is this a recognised built-in?
263
+                // Pull it out!
264
+                var validator = settings.builtInValidators[el.toLowerCase()];
265
+                if (validator.type.toLowerCase() === "shortcut") {
266
+                  $.each(validator.shortcut.split(","), function (i, el) {
267
+                    el = formatValidatorName(el);
268
+                    newValidatorNamesToInspect.push(el);
269
+                    validatorNames.push(el);
270
+                  });
271
+                }
272
+              }
273
+            });
274
+
275
+            validatorNamesToInspect = newValidatorNamesToInspect;
276
+
277
+          } while (validatorNamesToInspect.length > 0)
278
+
279
+          // =============================================================
280
+          //                                       SET UP VALIDATOR ARRAYS
281
+          // =============================================================
282
+
283
+          var validators = {};
284
+
285
+          $.each(validatorNames, function (i, el) {
286
+            // Set up the 'override' message
287
+            var message = $this.data("validation" + el + "Message");
288
+            var hasOverrideMessage = (message !== undefined);
289
+            var foundValidator = false;
290
+            message =
291
+              (
292
+                message
293
+                  ? message
294
+                  : "'" + el + "' validation failed <!-- Add attribute 'data-validation-" + el.toLowerCase() + "-message' to input to change this message -->"
295
+              )
296
+            ;
297
+
298
+            $.each(
299
+              settings.validatorTypes,
300
+              function (validatorType, validatorTemplate) {
301
+                if (validators[validatorType] === undefined) {
302
+                  validators[validatorType] = [];
303
+                }
304
+                if (!foundValidator && $this.data("validation" + el + formatValidatorName(validatorTemplate.name)) !== undefined) {
305
+                  validators[validatorType].push(
306
+                    $.extend(
307
+                      true,
308
+                      {
309
+                        name: formatValidatorName(validatorTemplate.name),
310
+                        message: message
311
+                      },
312
+                      validatorTemplate.init($this, el)
313
+                    )
314
+                  );
315
+                  foundValidator = true;
316
+                }
317
+              }
318
+            );
319
+
320
+            if (!foundValidator && settings.builtInValidators[el.toLowerCase()]) {
321
+
322
+              var validator = $.extend(true, {}, settings.builtInValidators[el.toLowerCase()]);
323
+              if (hasOverrideMessage) {
324
+                validator.message = message;
325
+              }
326
+              var validatorType = validator.type.toLowerCase();
327
+
328
+              if (validatorType === "shortcut") {
329
+                foundValidator = true;
330
+              } else {
331
+                $.each(
332
+                  settings.validatorTypes,
333
+                  function (validatorTemplateType, validatorTemplate) {
334
+                    if (validators[validatorTemplateType] === undefined) {
335
+                      validators[validatorTemplateType] = [];
336
+                    }
337
+                    if (!foundValidator && validatorType === validatorTemplateType.toLowerCase()) {
338
+                      $this.data("validation" + el + formatValidatorName(validatorTemplate.name), validator[validatorTemplate.name.toLowerCase()]);
339
+                      validators[validatorType].push(
340
+                        $.extend(
341
+                          validator,
342
+                          validatorTemplate.init($this, el)
343
+                        )
344
+                      );
345
+                      foundValidator = true;
346
+                    }
347
+                  }
348
+                );
349
+              }
350
+            }
351
+
352
+            if (! foundValidator) {
353
+              $.error("Cannot find validation info for '" + el + "'");
354
+            }
355
+          });
356
+
357
+          // =============================================================
358
+          //                                         STORE FALLBACK VALUES
359
+          // =============================================================
360
+
361
+          $helpBlock.data(
362
+            "original-contents",
363
+            (
364
+              $helpBlock.data("original-contents")
365
+                ? $helpBlock.data("original-contents")
366
+                : $helpBlock.html()
367
+            )
368
+          );
369
+
370
+          $helpBlock.data(
371
+            "original-role",
372
+            (
373
+              $helpBlock.data("original-role")
374
+                ? $helpBlock.data("original-role")
375
+                : $helpBlock.attr("role")
376
+            )
377
+          );
378
+
379
+          $controlGroup.data(
380
+            "original-classes",
381
+            (
382
+              $controlGroup.data("original-clases")
383
+                ? $controlGroup.data("original-classes")
384
+                : $controlGroup.attr("class")
385
+            )
386
+          );
387
+
388
+          $this.data(
389
+            "original-aria-invalid",
390
+            (
391
+              $this.data("original-aria-invalid")
392
+                ? $this.data("original-aria-invalid")
393
+                : $this.attr("aria-invalid")
394
+            )
395
+          );
396
+
397
+          // =============================================================
398
+          //                                                    VALIDATION
399
+          // =============================================================
400
+
401
+          $this.bind(
402
+            "validation.validation",
403
+            function (event, params) {
404
+
405
+              var value = getValue($this);
406
+
407
+              // Get a list of the errors to apply
408
+              var errorsFound = [];
409
+
410
+              $.each(validators, function (validatorType, validatorTypeArray) {
411
+                if (value || value.length || (params && params.includeEmpty) || (!!settings.validatorTypes[validatorType].blockSubmit && params && !!params.submitting)) {
412
+                  $.each(validatorTypeArray, function (i, validator) {
413
+                    if (settings.validatorTypes[validatorType].validate($this, value, validator)) {
414
+                      errorsFound.push(validator.message);
415
+                    }
416
+                  });
417
+                }
418
+              });
419
+
420
+              return errorsFound;
421
+            }
422
+          );
423
+
424
+          $this.bind(
425
+            "getValidators.validation",
426
+            function () {
427
+              return validators;
428
+            }
429
+          );
430
+
431
+          // =============================================================
432
+          //                                             WATCH FOR CHANGES
433
+          // =============================================================
434
+          $this.bind(
435
+            "submit.validation",
436
+            function () {
437
+              return $this.triggerHandler("change.validation", {submitting: true});
438
+            }
439
+          );
440
+          $this.bind(
441
+            [
442
+              "keyup",
443
+              "focus",
444
+              "blur",
445
+              "click",
446
+              "keydown",
447
+              "keypress",
448
+              "change"
449
+            ].join(".validation ") + ".validation",
450
+            function (e, params) {
451
+
452
+              var value = getValue($this);
453
+
454
+              var errorsFound = [];
455
+
456
+              $controlGroup.find("input,textarea,select").each(function (i, el) {
457
+                var oldCount = errorsFound.length;
458
+                $.each($(el).triggerHandler("validation.validation", params), function (j, message) {
459
+                  errorsFound.push(message);
460
+                });
461
+                if (errorsFound.length > oldCount) {
462
+                  $(el).attr("aria-invalid", "true");
463
+                } else {
464
+                  var original = $this.data("original-aria-invalid");
465
+                  $(el).attr("aria-invalid", (original !== undefined ? original : false));
466
+                }
467
+              });
468
+
469
+              $form.find("input,select,textarea").not($this).not("[name=\"" + $this.attr("name") + "\"]").trigger("validationLostFocus.validation");
470
+
471
+              errorsFound = $.unique(errorsFound.sort());
472
+
473
+              // Were there any errors?
474
+              if (errorsFound.length) {
475
+                // Better flag it up as a warning.
476
+                $controlGroup.removeClass("success error").addClass("warning");
477
+
478
+                // How many errors did we find?
479
+                if (settings.options.semanticallyStrict && errorsFound.length === 1) {
480
+                  // Only one? Being strict? Just output it.
481
+                  $helpBlock.html(errorsFound[0] + 
482
+                    ( settings.options.prependExistingHelpBlock ? $helpBlock.data("original-contents") : "" ));
483
+                } else {
484
+                  // Multiple? Being sloppy? Glue them together into an UL.
485
+                  $helpBlock.html("<ul role=\"alert\"><li>" + errorsFound.join("</li><li>") + "</li></ul>" +
486
+                    ( settings.options.prependExistingHelpBlock ? $helpBlock.data("original-contents") : "" ));
487
+                }
488
+              } else {
489
+                $controlGroup.removeClass("warning error success");
490
+                if (value.length > 0) {
491
+                  $controlGroup.addClass("success");
492
+                }
493
+                $helpBlock.html($helpBlock.data("original-contents"));
494
+              }
495
+
496
+              if (e.type === "blur") {
497
+                $controlGroup.removeClass("success");
498
+              }
499
+            }
500
+          );
501
+          $this.bind("validationLostFocus.validation", function () {
502
+            $controlGroup.removeClass("success");
503
+          });
504
+        });
505
+      },
506
+      destroy : function( ) {
507
+
508
+        return this.each(
509
+          function() {
510
+
511
+            var
512
+              $this = $(this),
513
+              $controlGroup = $this.parents(".control-group").first(),
514
+              $helpBlock = $controlGroup.find(".help-block").first();
515
+
516
+            // remove our events
517
+            $this.unbind('.validation'); // events are namespaced.
518
+            // reset help text
519
+            $helpBlock.html($helpBlock.data("original-contents"));
520
+            // reset classes
521
+            $controlGroup.attr("class", $controlGroup.data("original-classes"));
522
+            // reset aria
523
+            $this.attr("aria-invalid", $this.data("original-aria-invalid"));
524
+            // reset role
525
+            $helpBlock.attr("role", $this.data("original-role"));
526
+						// remove all elements we created
527
+						if (createdElements.indexOf($helpBlock[0]) > -1) {
528
+							$helpBlock.remove();
529
+						}
530
+
531
+          }
532
+        );
533
+
534
+      },
535
+      collectErrors : function(includeEmpty) {
536
+
537
+        var errorMessages = {};
538
+        this.each(function (i, el) {
539
+          var $el = $(el);
540
+          var name = $el.attr("name");
541
+          var errors = $el.triggerHandler("validation.validation", {includeEmpty: true});
542
+          errorMessages[name] = $.extend(true, errors, errorMessages[name]);
543
+        });
544
+
545
+        $.each(errorMessages, function (i, el) {
546
+          if (el.length === 0) {
547
+            delete errorMessages[i];
548
+          }
549
+        });
550
+
551
+        return errorMessages;
552
+
553
+      },
554
+      hasErrors: function() {
555
+
556
+        var errorMessages = [];
557
+
558
+        this.each(function (i, el) {
559
+          errorMessages = errorMessages.concat(
560
+            $(el).triggerHandler("getValidators.validation") ? $(el).triggerHandler("validation.validation", {submitting: true}) : []
561
+          );
562
+        });
563
+
564
+        return (errorMessages.length > 0);
565
+      },
566
+      override : function (newDefaults) {
567
+        defaults = $.extend(true, defaults, newDefaults);
568
+      }
569
+    },
570
+		validatorTypes: {
571
+      callback: {
572
+        name: "callback",
573
+        init: function ($this, name) {
574
+          return {
575
+            validatorName: name,
576
+            callback: $this.data("validation" + name + "Callback"),
577
+            lastValue: $this.val(),
578
+            lastValid: true,
579
+            lastFinished: true
580
+          };
581
+        },
582
+        validate: function ($this, value, validator) {
583
+          if (validator.lastValue === value && validator.lastFinished) {
584
+            return !validator.lastValid;
585
+          }
586
+
587
+          if (validator.lastFinished === true)
588
+          {
589
+            validator.lastValue = value;
590
+            validator.lastValid = true;
591
+            validator.lastFinished = false;
592
+
593
+            var rrjqbvValidator = validator;
594
+            var rrjqbvThis = $this;
595
+            executeFunctionByName(
596
+              validator.callback,
597
+              window,
598
+              $this,
599
+              value,
600
+              function (data) {
601
+                if (rrjqbvValidator.lastValue === data.value) {
602
+                  rrjqbvValidator.lastValid = data.valid;
603
+                  if (data.message) {
604
+                    rrjqbvValidator.message = data.message;
605
+                  }
606
+                  rrjqbvValidator.lastFinished = true;
607
+                  rrjqbvThis.data("validation" + rrjqbvValidator.validatorName + "Message", rrjqbvValidator.message);
608
+                  // Timeout is set to avoid problems with the events being considered 'already fired'
609
+                  setTimeout(function () {
610
+                    rrjqbvThis.trigger("change.validation");
611
+                  }, 1); // doesn't need a long timeout, just long enough for the event bubble to burst
612
+                }
613
+              }
614
+            );
615
+          }
616
+
617
+          return false;
618
+
619
+        }
620
+      },
621
+      ajax: {
622
+        name: "ajax",
623
+        init: function ($this, name) {
624
+          return {
625
+            validatorName: name,
626
+            url: $this.data("validation" + name + "Ajax"),
627
+            lastValue: $this.val(),
628
+            lastValid: true,
629
+            lastFinished: true
630
+          };
631
+        },
632
+        validate: function ($this, value, validator) {
633
+          if (""+validator.lastValue === ""+value && validator.lastFinished === true) {
634
+            return validator.lastValid === false;
635
+          }
636
+
637
+          if (validator.lastFinished === true)
638
+          {
639
+            validator.lastValue = value;
640
+            validator.lastValid = true;
641
+            validator.lastFinished = false;
642
+            $.ajax({
643
+              url: validator.url,
644
+              data: "value=" + value + "&field=" + $this.attr("name"),
645
+              dataType: "json",
646
+              success: function (data) {
647
+                if (""+validator.lastValue === ""+data.value) {
648
+                  validator.lastValid = !!(data.valid);
649
+                  if (data.message) {
650
+                    validator.message = data.message;
651
+                  }
652
+                  validator.lastFinished = true;
653
+                  $this.data("validation" + validator.validatorName + "Message", validator.message);
654
+                  // Timeout is set to avoid problems with the events being considered 'already fired'
655
+                  setTimeout(function () {
656
+                    $this.trigger("change.validation");
657
+                  }, 1); // doesn't need a long timeout, just long enough for the event bubble to burst
658
+                }
659
+              },
660
+              failure: function () {
661
+                validator.lastValid = true;
662
+                validator.message = "ajax call failed";
663
+                validator.lastFinished = true;
664
+                $this.data("validation" + validator.validatorName + "Message", validator.message);
665
+                // Timeout is set to avoid problems with the events being considered 'already fired'
666
+                setTimeout(function () {
667
+                  $this.trigger("change.validation");
668
+                }, 1); // doesn't need a long timeout, just long enough for the event bubble to burst
669
+              }
670
+            });
671
+          }
672
+
673
+          return false;
674
+
675
+        }
676
+      },
677
+			regex: {
678
+				name: "regex",
679
+				init: function ($this, name) {
680
+					return {regex: regexFromString($this.data("validation" + name + "Regex"))};
681
+				},
682
+				validate: function ($this, value, validator) {
683
+					return (!validator.regex.test(value) && ! validator.negative)
684
+						|| (validator.regex.test(value) && validator.negative);
685
+				}
686
+			},
687
+			required: {
688
+				name: "required",
689
+				init: function ($this, name) {
690
+					return {};
691
+				},
692
+				validate: function ($this, value, validator) {
693
+					return !!(value.length === 0  && ! validator.negative)
694
+						|| !!(value.length > 0 && validator.negative);
695
+				},
696
+        blockSubmit: true
697
+			},
698
+			match: {
699
+				name: "match",
700
+				init: function ($this, name) {
701
+					var element = $this.parents("form").first().find("[name=\"" + $this.data("validation" + name + "Match") + "\"]").first();
702
+					element.bind("validation.validation", function () {
703
+						$this.trigger("change.validation", {submitting: true});
704
+					});
705
+					return {"element": element};
706
+				},
707
+				validate: function ($this, value, validator) {
708
+					return (value !== validator.element.val() && ! validator.negative)
709
+						|| (value === validator.element.val() && validator.negative);
710
+				},
711
+        blockSubmit: true
712
+			},
713
+			max: {
714
+				name: "max",
715
+				init: function ($this, name) {
716
+					return {max: $this.data("validation" + name + "Max")};
717
+				},
718
+				validate: function ($this, value, validator) {
719
+					return (parseFloat(value, 10) > parseFloat(validator.max, 10) && ! validator.negative)
720
+						|| (parseFloat(value, 10) <= parseFloat(validator.max, 10) && validator.negative);
721
+				}
722
+			},
723
+			min: {
724
+				name: "min",
725
+				init: function ($this, name) {
726
+					return {min: $this.data("validation" + name + "Min")};
727
+				},
728
+				validate: function ($this, value, validator) {
729
+					return (parseFloat(value) < parseFloat(validator.min) && ! validator.negative)
730
+						|| (parseFloat(value) >= parseFloat(validator.min) && validator.negative);
731
+				}
732
+			},
733
+			maxlength: {
734
+				name: "maxlength",
735
+				init: function ($this, name) {
736
+					return {maxlength: $this.data("validation" + name + "Maxlength")};
737
+				},
738
+				validate: function ($this, value, validator) {
739
+					return ((value.length > validator.maxlength) && ! validator.negative)
740
+						|| ((value.length <= validator.maxlength) && validator.negative);
741
+				}
742
+			},
743
+			minlength: {
744
+				name: "minlength",
745
+				init: function ($this, name) {
746
+					return {minlength: $this.data("validation" + name + "Minlength")};
747
+				},
748
+				validate: function ($this, value, validator) {
749
+					return ((value.length < validator.minlength) && ! validator.negative)
750
+						|| ((value.length >= validator.minlength) && validator.negative);
751
+				}
752
+			},
753
+			maxchecked: {
754
+				name: "maxchecked",
755
+				init: function ($this, name) {
756
+					var elements = $this.parents("form").first().find("[name=\"" + $this.attr("name") + "\"]");
757
+					elements.bind("click.validation", function () {
758
+						$this.trigger("change.validation", {includeEmpty: true});
759
+					});
760
+					return {maxchecked: $this.data("validation" + name + "Maxchecked"), elements: elements};
761
+				},
762
+				validate: function ($this, value, validator) {
763
+					return (validator.elements.filter(":checked").length > validator.maxchecked && ! validator.negative)
764
+						|| (validator.elements.filter(":checked").length <= validator.maxchecked && validator.negative);
765
+				},
766
+        blockSubmit: true
767
+			},
768
+			minchecked: {
769
+				name: "minchecked",
770
+				init: function ($this, name) {
771
+					var elements = $this.parents("form").first().find("[name=\"" + $this.attr("name") + "\"]");
772
+					elements.bind("click.validation", function () {
773
+						$this.trigger("change.validation", {includeEmpty: true});
774
+					});
775
+					return {minchecked: $this.data("validation" + name + "Minchecked"), elements: elements};
776
+				},
777
+				validate: function ($this, value, validator) {
778
+					return (validator.elements.filter(":checked").length < validator.minchecked && ! validator.negative)
779
+						|| (validator.elements.filter(":checked").length >= validator.minchecked && validator.negative);
780
+				},
781
+        blockSubmit: true
782
+			}
783
+		},
784
+		builtInValidators: {
785
+			email: {
786
+				name: "Email",
787
+				type: "shortcut",
788
+				shortcut: "validemail"
789
+			},
790
+			validemail: {
791
+				name: "Validemail",
792
+				type: "regex",
793
+				regex: "[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\\.[A-Za-z]{2,4}",
794
+				message: "Not a valid email address<!-- data-validator-validemail-message to override -->"
795
+			},
796
+			passwordagain: {
797
+				name: "Passwordagain",
798
+				type: "match",
799
+				match: "password",
800
+				message: "Does not match the given password<!-- data-validator-paswordagain-message to override -->"
801
+			},
802
+			positive: {
803
+				name: "Positive",
804
+				type: "shortcut",
805
+				shortcut: "number,positivenumber"
806
+			},
807
+			negative: {
808
+				name: "Negative",
809
+				type: "shortcut",
810
+				shortcut: "number,negativenumber"
811
+			},
812
+			number: {
813
+				name: "Number",
814
+				type: "regex",
815
+				regex: "([+-]?\\\d+(\\\.\\\d*)?([eE][+-]?[0-9]+)?)?",
816
+				message: "Must be a number<!-- data-validator-number-message to override -->"
817
+			},
818
+			integer: {
819
+				name: "Integer",
820
+				type: "regex",
821
+				regex: "[+-]?\\\d+",
822
+				message: "No decimal places allowed<!-- data-validator-integer-message to override -->"
823
+			},
824
+			positivenumber: {
825
+				name: "Positivenumber",
826
+				type: "min",
827
+				min: 0,
828
+				message: "Must be a positive number<!-- data-validator-positivenumber-message to override -->"
829
+			},
830
+			negativenumber: {
831
+				name: "Negativenumber",
832
+				type: "max",
833
+				max: 0,
834
+				message: "Must be a negative number<!-- data-validator-negativenumber-message to override -->"
835
+			},
836
+			required: {
837
+				name: "Required",
838
+				type: "required",
839
+				message: "This is required<!-- data-validator-required-message to override -->"
840
+			},
841
+			checkone: {
842
+				name: "Checkone",
843
+				type: "minchecked",
844
+				minchecked: 1,
845
+				message: "Check at least one option<!-- data-validation-checkone-message to override -->"
846
+			}
847
+		}
848
+	};
849
+
850
+	var formatValidatorName = function (name) {
851
+		return name
852
+			.toLowerCase()
853
+			.replace(
854
+				/(^|\s)([a-z])/g ,
855
+				function(m,p1,p2) {
856
+					return p1+p2.toUpperCase();
857
+				}
858
+			)
859
+		;
860
+	};
861
+
862
+	var getValue = function ($this) {
863
+		// Extract the value we're talking about
864
+		var value = $this.val();
865
+		var type = $this.attr("type");
866
+		if (type === "checkbox") {
867
+			value = ($this.is(":checked") ? value : "");
868
+		}
869
+		if (type === "radio") {
870
+			value = ($('input[name="' + $this.attr("name") + '"]:checked').length > 0 ? value : "");
871
+		}
872
+		return value;
873
+	};
874
+
875
+  function regexFromString(inputstring) {
876
+		return new RegExp("^" + inputstring + "$");
877
+	}
878
+
879
+  /**
880
+   * Thanks to Jason Bunting via StackOverflow.com
881
+   *
882
+   * http://stackoverflow.com/questions/359788/how-to-execute-a-javascript-function-when-i-have-its-name-as-a-string#answer-359910
883
+   * Short link: http://tinyurl.com/executeFunctionByName
884
+  **/
885
+  function executeFunctionByName(functionName, context /*, args*/) {
886
+    var args = Array.prototype.slice.call(arguments).splice(2);
887
+    var namespaces = functionName.split(".");
888
+    var func = namespaces.pop();
889
+    for(var i = 0; i < namespaces.length; i++) {
890
+      context = context[namespaces[i]];
891
+    }
892
+    return context[func].apply(this, args);
893
+  }
894
+
895
+	$.fn.jqBootstrapValidation = function( method ) {
896
+
897
+		if ( defaults.methods[method] ) {
898
+			return defaults.methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
899
+		} else if ( typeof method === 'object' || ! method ) {
900
+			return defaults.methods.init.apply( this, arguments );
901
+		} else {
902
+		$.error( 'Method ' +  method + ' does not exist on jQuery.jqBootstrapValidation' );
903
+			return null;
904
+		}
905
+
906
+	};
907
+
908
+  $.jqBootstrapValidation = function (options) {
909
+    $(":input").not("[type=image],[type=submit]").jqBootstrapValidation.apply(this,arguments);
910
+  };
911
+
912
+})( jQuery );

+ 10693
- 0
src/assets/css/styles.css
Fichier diff supprimé car celui-ci est trop grand
Voir le fichier


+ 69
- 0
src/assets/js/scripts.js Voir le fichier

@@ -0,0 +1,69 @@
1
+/*!
2
+    * Start Bootstrap - Freelancer v6.0.3 (https://startbootstrap.com/themes/freelancer)
3
+    * Copyright 2013-2020 Start Bootstrap
4
+    * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-freelancer/blob/master/LICENSE)
5
+    */
6
+    (function($) {
7
+    "use strict"; // Start of use strict
8
+  
9
+    // Smooth scrolling using jQuery easing
10
+    $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
11
+      if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
12
+        var target = $(this.hash);
13
+        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
14
+        if (target.length) {
15
+          $('html, body').animate({
16
+            scrollTop: (target.offset().top - 71)
17
+          }, 1000, "easeInOutExpo");
18
+          return false;
19
+        }
20
+      }
21
+    });
22
+  
23
+    // Scroll to top button appear
24
+    $(document).scroll(function() {
25
+      var scrollDistance = $(this).scrollTop();
26
+      if (scrollDistance > 100) {
27
+        $('.scroll-to-top').fadeIn();
28
+      } else {
29
+        $('.scroll-to-top').fadeOut();
30
+      }
31
+    });
32
+  
33
+    // Closes responsive menu when a scroll trigger link is clicked
34
+    $('.js-scroll-trigger').click(function() {
35
+      $('.navbar-collapse').collapse('hide');
36
+    });
37
+  
38
+    // Activate scrollspy to add active class to navbar items on scroll
39
+    $('body').scrollspy({
40
+      target: '#mainNav',
41
+      offset: 80
42
+    });
43
+  
44
+    // Collapse Navbar
45
+    var navbarCollapse = function() {
46
+      if ($("#mainNav").offset().top > 100) {
47
+        $("#mainNav").addClass("navbar-shrink");
48
+      } else {
49
+        $("#mainNav").removeClass("navbar-shrink");
50
+      }
51
+    };
52
+    // Collapse now if page is not at top
53
+    navbarCollapse();
54
+    // Collapse the navbar when page is scrolled
55
+    $(window).scroll(navbarCollapse);
56
+  
57
+    // Floating label headings for the contact form
58
+    $(function() {
59
+      $("body").on("input propertychange", ".floating-label-form-group", function(e) {
60
+        $(this).toggleClass("floating-label-form-group-with-value", !!$(e.target).val());
61
+      }).on("focus", ".floating-label-form-group", function() {
62
+        $(this).addClass("floating-label-form-group-with-focus");
63
+      }).on("blur", ".floating-label-form-group", function() {
64
+        $(this).removeClass("floating-label-form-group-with-focus");
65
+      });
66
+    });
67
+  
68
+  })(jQuery); // End of use strict
69
+  

BIN
src/assets/logo.png Voir le fichier


+ 122
- 0
src/components/HelloWorld.vue Voir le fichier

@@ -0,0 +1,122 @@
1
+<template>
2
+  <div class="hello">
3
+    <h1>{{ msg }}</h1>
4
+    <p>
5
+      For a guide and recipes on how to configure / customize this project,<br />
6
+      check out the
7
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
8
+        >vue-cli documentation</a
9
+      >.
10
+    </p>
11
+    <h3>Installed CLI Plugins</h3>
12
+    <ul>
13
+      <li>
14
+        <a
15
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
16
+          target="_blank"
17
+          rel="noopener"
18
+          >babel</a
19
+        >
20
+      </li>
21
+      <li>
22
+        <a
23
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
24
+          target="_blank"
25
+          rel="noopener"
26
+          >router</a
27
+        >
28
+      </li>
29
+      <li>
30
+        <a
31
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
32
+          target="_blank"
33
+          rel="noopener"
34
+          >eslint</a
35
+        >
36
+      </li>
37
+    </ul>
38
+    <h3>Essential Links</h3>
39
+    <ul>
40
+      <li>
41
+        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
42
+      </li>
43
+      <li>
44
+        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
45
+          >Forum</a
46
+        >
47
+      </li>
48
+      <li>
49
+        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
50
+          >Community Chat</a
51
+        >
52
+      </li>
53
+      <li>
54
+        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
55
+          >Twitter</a
56
+        >
57
+      </li>
58
+      <li>
59
+        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
60
+      </li>
61
+    </ul>
62
+    <h3>Ecosystem</h3>
63
+    <ul>
64
+      <li>
65
+        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
66
+          >vue-router</a
67
+        >
68
+      </li>
69
+      <li>
70
+        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
71
+      </li>
72
+      <li>
73
+        <a
74
+          href="https://github.com/vuejs/vue-devtools#vue-devtools"
75
+          target="_blank"
76
+          rel="noopener"
77
+          >vue-devtools</a
78
+        >
79
+      </li>
80
+      <li>
81
+        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
82
+          >vue-loader</a
83
+        >
84
+      </li>
85
+      <li>
86
+        <a
87
+          href="https://github.com/vuejs/awesome-vue"
88
+          target="_blank"
89
+          rel="noopener"
90
+          >awesome-vue</a
91
+        >
92
+      </li>
93
+    </ul>
94
+  </div>
95
+</template>
96
+
97
+<script>
98
+export default {
99
+  name: "HelloWorld",
100
+  props: {
101
+    msg: String
102
+  }
103
+};
104
+</script>
105
+
106
+<!-- Add "scoped" attribute to limit CSS to this component only -->
107
+<style scoped>
108
+h3 {
109
+  margin: 40px 0 0;
110
+}
111
+ul {
112
+  list-style-type: none;
113
+  padding: 0;
114
+}
115
+li {
116
+  display: inline-block;
117
+  margin: 0 10px;
118
+}
119
+a {
120
+  color: #42b983;
121
+}
122
+</style>

+ 123
- 0
src/components/accounts/register.vue Voir le fichier

@@ -0,0 +1,123 @@
1
+<template>
2
+	<div>
3
+		<br />
4
+		<br />
5
+		<br />
6
+		<br />
7
+		<br />
8
+		<div class="container">
9
+			<div class="col-md-12" style="text-align:left">
10
+				<h4>Private Individual</h4>
11
+				<div class="form-group row"></div>
12
+				<div class="row">
13
+					<div class="col-md-6" style="margin-bottom: 1em">
14
+						<div class="input-group-prepend">
15
+							<input
16
+								class="form-control"
17
+								type="text"
18
+								name="name"
19
+								placeholder="Name"
20
+							/>
21
+						</div>
22
+					</div>
23
+				</div>
24
+				<div class="row">
25
+					<div class="col-md-6" style="margin-bottom: 1em">
26
+						<div class="input-group-prepend">
27
+							<input
28
+								class="form-control"
29
+								type="text"
30
+								name="surname"
31
+								placeholder="Surname"
32
+							/>
33
+						</div>
34
+					</div>
35
+				</div>
36
+				<div class="row">
37
+					<div class="col-md-6" style="margin-bottom: 1em">
38
+						<div class="input-group-prepend">
39
+							<input
40
+								class="form-control"
41
+								type="text"
42
+								name="email"
43
+								placeholder="Email Address"
44
+							/>
45
+						</div>
46
+					</div>
47
+				</div>
48
+				<div class="row">
49
+					<div class="col-md-6" style="margin-bottom: 1em">
50
+						<div class="input-group-prepend">
51
+							<input
52
+								class="form-control"
53
+								type="text"
54
+								name="cellnumber"
55
+								placeholder="Cellphone Number"
56
+							/>
57
+						</div>
58
+					</div>
59
+				</div>
60
+				<div class="row">
61
+					<div class="col-md-6" style="margin-bottom: 1em">
62
+						<div class="input-group-prepend">
63
+							<input
64
+								class="form-control"
65
+								type="password"
66
+								name="password"
67
+								placeholder="Password"
68
+							/>
69
+						</div>
70
+					</div>
71
+				</div>
72
+				<div class="row">
73
+					<div class="col-md-6" style="margin-bottom: 1em">
74
+						<div class="input-group-prepend">
75
+							<input
76
+								class="form-control"
77
+								type="password"
78
+								name="confPassword"
79
+								placeholder="Confirm Password"
80
+							/>
81
+						</div>
82
+					</div>
83
+				</div>
84
+				<div class="row">
85
+					<div class="col-md-3">
86
+						<button
87
+							@click="SubmitData()"
88
+							class="btn btn-primary btn-xl"
89
+							type="submit"
90
+							data-dismiss="modal"
91
+						>
92
+							Submit
93
+						</button>
94
+					</div>
95
+					<div class="col-md-3">
96
+						<button
97
+							@click="Close()"
98
+							class="btn btn-primary btn-xl"
99
+							type="submit"
100
+							data-dismiss="modal"
101
+						>
102
+							Cancel
103
+						</button>
104
+					</div>
105
+				</div>
106
+			</div>
107
+		</div>
108
+	</div>
109
+</template>
110
+
111
+<script>
112
+export default {
113
+	name: 'registration',
114
+	methods: {
115
+		RegisterData() {
116
+			//submit data
117
+		},
118
+		Close() {
119
+			this.$router.push('/')
120
+		},
121
+	},
122
+}
123
+</script>

+ 34
- 0
src/components/shared/home.vue Voir le fichier

@@ -0,0 +1,34 @@
1
+<template>
2
+	<div class="col-md-12">
3
+		<header class="masthead bg-primary text-white text-center">
4
+			<div class="container d-flex align-items-center flex-column">
5
+				<!-- Masthead Avatar Image--><img
6
+					class="masthead-avatar mb-5"
7
+					src="../../assets/assets/img/avataaars.svg"
8
+					alt=""
9
+				/><!-- Masthead Heading-->
10
+				<h1 class="masthead-heading text-uppercase mb-0">
11
+					Start Bootstrap
12
+				</h1>
13
+				<!-- Icon Divider-->
14
+				<div class="divider-custom divider-light">
15
+					<div class="divider-custom-line"></div>
16
+					<div class="divider-custom-icon">
17
+						<i class="fas fa-star"></i>
18
+					</div>
19
+					<div class="divider-custom-line"></div>
20
+				</div>
21
+				<!-- Masthead Subheading-->
22
+				<p class="masthead-subheading font-weight-light mb-0">
23
+					Graphic Artist - Web Designer - Illustrator
24
+				</p>
25
+			</div>
26
+		</header>
27
+	</div>
28
+</template>
29
+
30
+<script>
31
+export default {
32
+	name: 'home',
33
+}
34
+</script>

+ 53
- 0
src/components/shared/navBar.vue Voir le fichier

@@ -0,0 +1,53 @@
1
+<template>
2
+	<nav
3
+		class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top"
4
+		id="mainNav"
5
+	>
6
+		<div class="container">
7
+			<a class="navbar-brand js-scroll-trigger" @click="routerGoTo('/')"
8
+				>Get Food</a
9
+			>
10
+			<button
11
+				class="navbar-toggler navbar-toggler-right text-uppercase font-weight-bold bg-primary text-white rounded"
12
+				type="button"
13
+				data-toggle="collapse"
14
+				data-target="#navbarResponsive"
15
+				aria-controls="navbarResponsive"
16
+				aria-expanded="false"
17
+				aria-label="Toggle navigation"
18
+			>
19
+				Menu
20
+				<i class="fas fa-bars"></i>
21
+			</button>
22
+			<div class="collapse navbar-collapse" id="navbarResponsive">
23
+				<ul class="navbar-nav ml-auto">
24
+					<li class="nav-item mx-0 mx-lg-1">
25
+						<a
26
+							class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"
27
+							@click="routerGoTo('/Registration')"
28
+							>Register</a
29
+						>
30
+					</li>
31
+					<li class="nav-item mx-0 mx-lg-1">
32
+						<a
33
+							class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"
34
+							@click="routerGoTo('/login')"
35
+							>Login</a
36
+						>
37
+					</li>
38
+				</ul>
39
+			</div>
40
+		</div>
41
+	</nav>
42
+</template>
43
+
44
+<script>
45
+export default {
46
+	name: 'navbar',
47
+	methods: {
48
+		routerGoTo(path) {
49
+			this.$emit('routerGoTo', path)
50
+		},
51
+	},
52
+}
53
+</script>

+ 12
- 0
src/main.js Voir le fichier

@@ -0,0 +1,12 @@
1
+import Vue from 'vue'
2
+import App from './App.vue'
3
+import router from './router'
4
+
5
+Vue.config.productionTip = false
6
+
7
+require('./assets/css/styles.css')
8
+
9
+new Vue({
10
+	router,
11
+	render: (h) => h(App),
12
+}).$mount('#app')

+ 26
- 0
src/router/index.js Voir le fichier

@@ -0,0 +1,26 @@
1
+import Vue from 'vue'
2
+import VueRouter from 'vue-router'
3
+import Home from '../components/shared/home.vue'
4
+
5
+import Registration from '../components/accounts/register.vue'
6
+
7
+Vue.use(VueRouter)
8
+
9
+const routes = [
10
+	{
11
+		path: '/',
12
+		name: 'Home',
13
+		component: Home,
14
+	},
15
+	{
16
+		path: '/Registration',
17
+		name: 'Registration',
18
+		component: Registration,
19
+	},
20
+]
21
+
22
+const router = new VueRouter({
23
+	routes,
24
+})
25
+
26
+export default router

+ 5
- 0
src/views/About.vue Voir le fichier

@@ -0,0 +1,5 @@
1
+<template>
2
+  <div class="about">
3
+    <h1>This is an about page</h1>
4
+  </div>
5
+</template>

+ 18
- 0
src/views/Home.vue Voir le fichier

@@ -0,0 +1,18 @@
1
+<template>
2
+  <div class="home">
3
+    <img alt="Vue logo" src="../assets/logo.png" />
4
+    <HelloWorld msg="Welcome to Your Vue.js App" />
5
+  </div>
6
+</template>
7
+
8
+<script>
9
+// @ is an alias to /src
10
+import HelloWorld from "@/components/HelloWorld.vue";
11
+
12
+export default {
13
+  name: "Home",
14
+  components: {
15
+    HelloWorld
16
+  }
17
+};
18
+</script>

Chargement…
Annuler
Enregistrer