feature: footer

2 files changed, 138 insertions, 0 deletions

diff --git a/src/site/components/footer/Footer.vue b/src/site/components/footer/Footer.vue
new file mode 100644
index 0000000..5df8ac3
--- /dev/null
+++ b/src/site/components/footer/Footer.vue
@@ -0,0 +1,135 @@
+<template>
+	<footer>
+		<svg viewBox="0 0 1920 250"
+			class="waves">
+			<path d="M1920 250H0V0s126.707 78.536 349.975 80.05c177.852 1.203 362.805-63.874 553.803-63.874 290.517 0 383.458 57.712 603.992 61.408 220.527 3.696 278.059-61.408 412.23-17.239"
+				class="wave-1" />
+			<path d="M1920 144s-467.917 116.857-1027.243-17.294C369.986 1.322 0 45.578 0 45.578V250h1920V144z"
+				class="wave-2" />
+			<path d="M0 195.553s208.547-75.581 701.325-20.768c376.707 41.908 520.834-67.962 722.545-67.962 222.926 0 311.553 83.523 496.129 86.394V250H0v-54.447z"
+				class="wave-3" />
+		</svg>
+		<div>
+			<div class="container">
+				<div class="columns">
+					<div class="column is-narrow">
+						<h4>lolisafe</h4>
+						<span>© 2017-2020
+							<a href="https://github.com/pitu"
+								class="no-block">Pitu</a>
+						</span><br>
+						<span>v{{ version }}</span>
+					</div>
+					<div class="column">
+						<div class="columns is-gapless">
+							<div class="column" />
+							<div class="column">
+								<nuxt-link to="/">Home</nuxt-link>
+								<nuxt-link to="/faq">FAQ</nuxt-link>
+							</div>
+							<div class="column">
+								<nuxt-link to="/dashboard">Dashboard</nuxt-link>
+								<nuxt-link to="/dashboard">Files</nuxt-link>
+								<nuxt-link to="/dashboard/albums">Albums</nuxt-link>
+								<nuxt-link to="/dashboard/account">Account</nuxt-link>
+							</div>
+							<div class="column">
+								<a href="https://github.com/weebdev/lolisafe">GitHub</a>
+								<a href="https://patreon.com/pitu">Patreon</a>
+								<a href="https://discord.gg/5g6vgwn">Discord</a>
+							</div>
+							<div class="column">
+								<a v-if="loggedIn"
+									@click="createShareXThing">ShareX Config</a>
+								<a href="https://chrome.google.com/webstore/detail/lolisafe-uploader/enkkmplljfjppcdaancckgilmgoiofnj">Chrome Extension</a>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</footer>
+</template>
+<script>
+import { saveAs } from 'file-saver';
+export default {
+	computed: {
+		loggedIn() {
+			return this.$store.state.loggedIn;
+		},
+		version() {
+			return this.$store.state.config.version;
+		}
+	},
+	methods: {
+		createShareXThing() {
+			const sharexFile = `{
+				"Name": "${this.$store.state.config.serviceName}",
+				"DestinationType": "ImageUploader, FileUploader",
+				"RequestType": "POST",
+				"RequestURL": "${location.origin}/api/upload",
+				"FileFormName": "files[]",
+				"Headers": {
+					"authorization": "Bearer ${this.$store.state.token}",
+					"accept": "application/vnd.lolisafe.json"
+				},
+				"ResponseType": "Text",
+				"URL": "$json:url$",
+				"ThumbnailURL": "$json:url$"
+			}`;
+			const sharexBlob = new Blob([sharexFile], { type: 'application/octet-binary' });
+			saveAs(sharexBlob, `${location.hostname}.sxcu`);
+		}
+	}
+};
+</script>
+<style lang="scss" scoped>
+	@import '~/assets/styles/_colors.scss';
+	footer {
+		svg.waves {
+			display: block;
+			bottom: -1px;
+			left: 0px;
+			right: 0px;
+			width: 100%;
+			background-color: transparent;
+			pointer-events: none;
+			user-select: none;
+			overflow: hidden;
+
+			.wave-1 {
+				fill: rgb(55, 61, 76);
+				transition: fill 400ms ease-in-out 0s;
+			}
+
+			.wave-2 {
+				fill: rgb(57, 64, 79);
+				transition: fill 400ms ease-in-out 0s;
+			}
+
+			.wave-3 {
+				fill: rgb(59, 66, 82);
+				transition: fill 400ms ease-in-out 0s;
+			}
+		}
+
+		> div {
+			background: rgb(59, 66, 82);
+			padding: 3em 0;
+			@media screen and (max-width: 1024px) {
+				padding: 3em 3em;
+			}
+		}
+
+		.container .column a {
+			display: block;
+			color: $textColor;
+			&:hover {
+				color: white
+			}
+			&.no-block {
+				display: inherit;
+			}
+		}
+	}
+</style>
diff --git a/src/site/layouts/default.vue b/src/site/layouts/default.vue
index e69a21c..4dc8c0e 100644
--- a/src/site/layouts/default.vue
+++ b/src/site/layouts/default.vue
@@ -3,12 +3,15 @@
 		<div>
 			<div class="layout">
 				<nuxt-child id="app" />
+				<Footer />
 			</div>
 		</div>
 	</div>
 </template>
 <script>
+import Footer from '~/components/footer/Footer';
 export default {
+	components: { Footer },
 	computed: {
 		config() {
 			return this.$store.state.config;