web-development/savvy-firebase
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

adding latest

Browse Source
This commit is contained in:
dtomlinson
2020-04-09 01:05:22 +01:00
parent fa7308339b
commit a082bfb4c0
8 changed files with 344 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/assets/images/background.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 297 KiB

19
src/components/Appbar.vue
View File

@@ -3,6 +3,7 @@
<v-app-bar
flat
app
hide-on-scroll
color="#EEEEEE"
v-if="!this.$store.getters.fullScreen"
>
@@ -16,7 +17,23 @@
</router-link>
</v-col>
<v-col cols="4" class="d-flex justify-end align-self-center">
<router-link :to="{ name: 'Triangle'}" class="routerLink ma-0 pr-2">
<router-link
:to="{ name: 'Playground' }"
class="routerLink ma-0 pr-2"
>
<p class="mb-0 underline">
Playground
</p>
</router-link>
<router-link
:to="{ name: 'Backgrounds' }"
class="routerLink ma-0 pr-2"
>
<p class="mb-0 underline">
Backgrounds
</p>
</router-link>
<router-link :to="{ name: 'Triangle' }" class="routerLink ma-0 pr-2">
<p class="mb-0 underline">
Triangle
</p>

12
src/router/index.js
View File

@@ -36,6 +36,18 @@ const routes = [
name: "Triangle",
component: () =>
import(/* webpackChunkName: "triangle" */ "../views/Triangle.vue")
},
{
path: "/backgrounds",
name: "Backgrounds",
component: () =>
import(/* webpackChunkName: "backgrounds" */ "../views/Backgrounds.vue")
},
{
path: "/playground",
name: "Playground",
component: () =>
import(/* webpackChunkName: "playground" */ "../views/Playground.vue")
}
];

162
src/views/Backgrounds.vue Normal file
View File

@@ -0,0 +1,162 @@
<template>
<div>
<v-container>
<v-row>
<v-col>
<h1>Backgrounds</h1>
</v-col>
</v-row>
<v-row>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1440 320"
style="width: 500px;"
>
<path
fill="#0099ff"
fill-opacity="1"
d="M0,0L48,42.7C96,85,192,171,288,176C384,181,480,107,576,101.3C672,96,768,160,864,154.7C960,149,1056,75,1152,85.3C1248,96,1344,192,1392,240L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
></path>
</svg>
</v-row>
<v-row class="mt-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path
fill="#0099ff"
fill-opacity="0.5"
d="M0,0L48,42.7C96,85,192,171,288,176C384,181,480,107,576,101.3C672,96,768,160,864,154.7C960,149,1056,75,1152,85.3C1248,96,1344,192,1392,240L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
transform="rotate(-10 50 100)"
></path>
<path
fill="#0099ff"
fill-opacity="0.6"
d="M0,0L48,42.7C96,85,192,171,288,176C384,181,480,107,576,101.3C672,96,768,160,864,154.7C960,149,1056,75,1152,85.3C1248,96,1344,192,1392,240L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
transform="rotate(10 50 100)"
></path>
</svg>
</v-row>
</v-container>
<v-container>
<v-row>
<v-col>
<svg
width="200"
height="200"
viewBox="0 0 600 600"
xmlns="http://www.w3.org/2000/svg"
>
<g transform="translate(300,300)">
<path
d="M154.5,-209.4C196.2,-182.4,223.2,-131.8,227.9,-82.3C232.7,-32.8,215.3,15.8,199.3,64.8C183.4,113.8,169,163.3,136,199.9C103.1,236.5,51.5,260.3,3.5,255.4C-44.5,250.5,-89,217.1,-129.7,183C-170.4,148.9,-207.4,114.2,-226.4,70.2C-245.4,26.2,-246.3,-27.1,-228.4,-71.7C-210.5,-116.4,-173.7,-152.4,-132.5,-179.6C-91.3,-206.7,-45.7,-224.8,5.4,-232.2C56.4,-239.7,112.9,-236.3,154.5,-209.4Z"
fill="#FFB4BC"
/>
</g>
</svg>
</v-col>
</v-row>
</v-container>
<v-container>
<v-row>
<v-img src="https://cdn.vuetifyjs.com/images/cards/server-room.jpg">
<v-col class="fill-height d-flex align-center justify-center">
<h1 class="display-4 black--text">Text</h1>
</v-col>
</v-img>
</v-row>
</v-container>
<v-container fluid class="newtriangle">
<v-row class="fill-height d-flex align-center">
<v-col class="">
<h1 class="display-2 white--text">
CSS polygon background with clip-path.
</h1>
</v-col>
</v-row>
</v-container>
<v-container>
<v-row>
<v-col class="fill-height d-flex justify-center">
<svg
width="120"
height="120"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<radialGradient
id="Gradient"
cx="0.5"
cy="0.5"
r="0.5"
fx="0.25"
fy="0.25"
>
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</radialGradient>
</defs>
<rect
x="10"
y="10"
rx="15"
ry="15"
width="100"
height="100"
fill="url(#Gradient)"
stroke="black"
stroke-width="2"
/>
<circle
cx="60"
cy="60"
r="50"
fill="transparent"
stroke="white"
stroke-width="2"
/>
<circle cx="35" cy="35" r="2" fill="white" stroke="white" />
<circle cx="60" cy="60" r="2" fill="white" stroke="white" />
<text
x="38"
y="40"
fill="white"
font-family="sans-serif"
font-size="10pt"
>
(fx,fy)
</text>
<text
x="63"
y="63"
fill="white"
font-family="sans-serif"
font-size="10pt"
>
(cx,cy)
</text>
</svg>
</v-col>
</v-row>
</v-container>
</div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
.newtriangle {
width: 105vw;
height: 50vh;
background-image: radial-gradient(
circle farthest-corner at 7.5% 54.1%,
rgba(0, 0, 0, 1) 0%,
rgba(39, 0, 89, 1) 74.9%
);
-webkit-clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
}
</style>

41
src/views/Playground.vue Normal file
View File

@@ -0,0 +1,41 @@
<template>
<div>
<v-container fluid fill-height class="mr-0 pr-0 mt-0 pt-0">
<v-img
src="../assets/images/background.svg"
height="100vh"
width="auto"
contain="false"
position="bottom 0px right 0px"
></v-img>
</v-container>
<v-container>
<div style="position: relative; z-index: 1">
<v-row>
<v-col>
<h1 class="display-2">Playground</h1>
</v-col>
</v-row>
<v-row>
<v-col>
<h1 class="display-2">Playground</h1>
</v-col>
</v-row>
<v-row>
<v-col>
<h1 class="display-2">Playground</h1>
</v-col>
</v-row>
<v-row>
<v-col> </v-col>
</v-row>
</div>
</v-container>
</div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped></style>

168
src/views/Triangle.vue
View File

@@ -1,92 +1,96 @@
<template>
<v-container fluid class="pa-0">
<v-row class="d-flex newtriangle" style="position: absolute; z-index: 1;">
<v-col
class="d-flex align-center pt-0 ml-8"
style="position: relative; z-index: 10;"
>
<v-card flat color="rgb(0, 0, 0, 0)">
<h1 class="display" style="position: relative;">
Welcome to Savvy Firebox Tutorial
</h1>
<v-btn
x-large
color="primary"
style="position: relative; z-index: 10;"
class="lighten-1"
>Click Here</v-btn
>
</v-card>
</v-col>
</v-row>
<v-row class="d-flex" style="position: relative; height: 50vh;"> </v-row>
<v-row class="d-flex justify-space-around">
<v-col class="d-flex justify-center" md="6" xs="12">
<v-card
flat
color="rgb(0, 0, 0, 0)"
class="d-flex align-center justify-center flex-column pa-6"
data-aos="zoom-in"
data-aos-duration="3000"
<div>
<v-container fluid class="pa-0">
<v-row class="d-flex newtriangle" style="position: absolute; z-index: 1;">
<v-col
class="d-flex align-center pt-0 ml-8"
style="position: relative; z-index: 10;"
>
<v-card-title>
<span class="display-2 font-weight-bold">Learn more</span>
</v-card-title>
<v-card-text class="d-flex justify-center flex-column align-center">
<transition name="bounce">
<v-card flat color="rgb(0, 0, 0, 0)">
<h1 class="display" style="position: relative;">
Welcome to Savvy Firebox Tutorial
</h1>
<v-btn
x-large
color="primary"
style="position: relative; z-index: 10;"
class="lighten-1"
>Click Here</v-btn
>
</v-card>
</v-col>
</v-row>
</v-container>
<v-container>
<v-row class="d-flex" style="position: relative; height: 50vh;"> </v-row>
<v-row class="d-flex justify-space-around">
<v-col class="d-flex justify-center" md="6" xs="12">
<v-card
flat
color="rgb(0, 0, 0, 0)"
class="d-flex align-center justify-center flex-column pa-6"
data-aos="zoom-in"
data-aos-duration="3000"
>
<v-card-title>
<span class="display-2 font-weight-bold">Learn more</span>
</v-card-title>
<v-card-text class="d-flex justify-center flex-column align-center">
<transition name="bounce">
<v-img
src="@/assets/images/11-Casino chip.png"
max-height="150px"
max-width="150px"
class="mb-5"
></v-img>
</transition>
<span
class="d-flex justify-center display body-1"
style="color: black;"
>
More information about what we do and why.
</span>
</v-card-text>
<v-card-actions>
<v-btn color="secondary" medium>Click here</v-btn>
</v-card-actions>
</v-card>
</v-col>
<v-col class="d-flex justify-center" md="6" xs="12">
<v-card
flat
color="rgb(0, 0, 0, 0)"
class="d-flex align-center justify-center flex-column pa-6"
data-aos="test-roll"
data-aos-duration="3000"
data-aos-easing="new-easing"
>
<v-card-title>
<span class="display-2 font-weight-bold">See more</span>
</v-card-title>
<v-card-text class="d-flex flex-column justify-center align-center">
<v-img
src="@/assets/images/11-Casino chip.png"
src="@/assets/images/12-Casino chip.png"
max-height="150px"
max-width="150px"
class="mb-5"
></v-img>
</transition>
<span
class="d-flex justify-center display body-1"
style="color: black;"
>
More information about what we do and why.
</span>
</v-card-text>
<v-card-actions>
<v-btn color="secondary" medium>Click here</v-btn>
</v-card-actions>
</v-card>
</v-col>
<v-col class="d-flex justify-center" md="6" xs="12">
<v-card
flat
color="rgb(0, 0, 0, 0)"
class="d-flex align-center justify-center flex-column pa-6"
data-aos="test-roll"
data-aos-duration="3000"
data-aos-easing="new-easing"
>
<v-card-title>
<span class="display-2 font-weight-bold">See more</span>
</v-card-title>
<v-card-text class="d-flex flex-column justify-center align-center">
<v-img
src="@/assets/images/12-Casino chip.png"
max-height="150px"
max-width="150px"
class="mb-5"
></v-img>
<span
class="d-flex justify-center display body-1"
style="color: black;"
>
Additional things about what it is.
</span>
</v-card-text>
<v-card-actions>
<v-btn color="secondary" medium>Click here</v-btn>
</v-card-actions>
</v-card>
</v-col>
<!-- <v-col md="1" xs="0"></v-col> -->
</v-row>
</v-container>
<span
class="d-flex justify-center display body-1"
style="color: black;"
>
Additional things about what it is.
</span>
</v-card-text>
<v-card-actions>
<v-btn color="secondary" medium>Click here</v-btn>
</v-card-actions>
</v-card>
</v-col>
<!-- <v-col md="1" xs="0"></v-col> -->
</v-row>
</v-container>
</div>
</template>
<script>

2
src/views/forms/LoginForm.vue
View File

@@ -1,5 +1,5 @@
<template>
<v-container fluid class="d-flex align-center" style="height: 100vh;">
<v-container fluid fill-height class="d-flex align-center justify-center">
<v-row>
<v-col
sm="6"