feat: landing page done
Signed-off-by: Ameya Shenoy <shenoy.ameya@gmail.com>
This commit is contained in:
parent
1eff15f08d
commit
92169c0800
GPG key ID:
F7D58AAC5DACF8D3
8 changed files with 262 additions and 2 deletions
|
|
@ -1,12 +1,19 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<v-app>
|
||||
<NavBar/>
|
||||
<GitHubCorner/>
|
||||
<router-view/>
|
||||
<Footer/>
|
||||
</v-app>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GitHubCorner from './components/GitHubCorner.vue'
|
||||
import NavBar from './components/NavBar.vue'
|
||||
import Footer from './components/Footer.vue'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
watch: {
|
||||
|
|
@ -17,6 +24,11 @@ export default {
|
|||
immediate: true
|
||||
}
|
||||
},
|
||||
components: {
|
||||
GitHubCorner,
|
||||
NavBar,
|
||||
Footer,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -24,11 +36,15 @@ export default {
|
|||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #f8f8f8 !important;
|
||||
}
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
background: #7f7fd5; /* fallback for old browsers */
|
||||
background: -webkit-linear-gradient(to bottom, #7f7fd5, #86a8e7, #91eae4); /* Chrome 10-25, Safari 5.1-6 */
|
||||
background: linear-gradient(to bottom, #7f7fd5, #86a8e7, #91eae4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 12 KiB |
|
|
@ -1 +1,50 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="162.711px" height="162.712px" viewBox="0 0 162.711 162.712" style="enable-background:new 0 0 162.711 162.712;"
|
||||
xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M149.77,96.17l-9.688-5.688c0,0,2.351-4.576,3.069-10.288c20.137,13.691,19.559-20.508,19.559-20.508l-3.526,5.693
|
||||
C159,88.613,145.161,77.202,143.309,75.57c-0.523-7.776-5.432-15.938-23.096-17.253c0,0-12.824-1.304-24.844-13.862
|
||||
c0,0-35.056-43.945-66.701-3.666c0,0-7.712,9.021-9.414,13.99c0,0-11.512-1.303-17.521,8.245c0,0,8.104-2.356,9.542-0.922
|
||||
c0,0-11.898,5.623-11.25,17.527c0,0,7.974-11.643,15.826-10.726c0,0,1.309,4.838,3.791,8.238v4.707c0,0-0.131,2.743,8.628,3.267
|
||||
c0,0,4.186-0.393,4.71-11.38c0,0,1.047-4.707,5.623-2.088c0,0,12.702,10.464,0,14.775c-5.599,1.899-22.234,3.008-20.664,11.509
|
||||
l12.952,4.444c0,0-0.648-4.707,2.874-7.709c0,0,12.419,1.505,18.7-0.073c0,0-20.788,6.869-19.032,19.224h13.731
|
||||
c0,0-3.337-8.232,4.707-8.823c0,0,15.101-5.096,22.56-19.418c0,0,21.187-3.528,41.385,20.398c0,0,1.96,10.205-11.771,14.322
|
||||
c0,0-12.556,2.947-12.556,13.134h14.517c0,0-4.123-7.058,5.304-7.446c0,0,21.963-2.162,19.813-8.635c0,0,0.591-7.843,4.519-7.843
|
||||
c0,0,9.608,1.564,15.101,21.573c0,0-5.693,3.137-5.693,7.844h14.328c0,0,6.668-13.342-7.654-35.701L149.77,96.17z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 539 B After Width: | Height: | Size: 1.8 KiB |
27
frontend/src/components/Footer.vue
Normal file
27
frontend/src/components/Footer.vue
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
|
||||
|
||||
<template>
|
||||
<div class="footer">
|
||||
<div>Crafted with ☕ by Ameya Shenoy</div>
|
||||
<div>Powered by Vue and K3s</div>
|
||||
<div>© 2021</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Footer',
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.footer {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
57
frontend/src/components/GitHubCorner.vue
Normal file
57
frontend/src/components/GitHubCorner.vue
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
|
||||
<template>
|
||||
<a
|
||||
href="https://gitea.codingcoffee.me/codingcoffee/bullish"
|
||||
class="github-corner"
|
||||
target="_blank"
|
||||
aria-label="View source on GitHub"
|
||||
>
|
||||
<svg
|
||||
width="80"
|
||||
height="80"
|
||||
viewBox="0 0 250 250"
|
||||
style="fill:#387ED1; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"
|
||||
></path>
|
||||
<path
|
||||
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
|
||||
fill="currentColor"
|
||||
style="transform-origin: 130px 106px;"
|
||||
class="octo-arm">
|
||||
</path>
|
||||
<path
|
||||
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
|
||||
fill="currentColor"
|
||||
class="octo-body"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'GitHubCorner',
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.github-corner:hover
|
||||
.octo-arm {
|
||||
animation:octocat-wave 560ms ease-in-out
|
||||
}
|
||||
@keyframes octocat-wave {
|
||||
0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}
|
||||
}
|
||||
@media (max-width:500px){
|
||||
.github-corner:hover .octo-arm{animation:none}
|
||||
.github-corner
|
||||
.octo-arm {
|
||||
animation:octocat-wave 560ms ease-in-out
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
51
frontend/src/components/NavBar.vue
Normal file
51
frontend/src/components/NavBar.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
|
||||
<template>
|
||||
<nav>
|
||||
<ul class="nav-links">
|
||||
<li>
|
||||
<v-btn
|
||||
x-large
|
||||
plain
|
||||
>
|
||||
<router-link to="/">Bullish</router-link>
|
||||
</v-btn>
|
||||
</li>
|
||||
<li>
|
||||
<v-btn
|
||||
x-large
|
||||
plain
|
||||
>
|
||||
<router-link to="Bhavcopy">Bhav Copy - Equity</router-link>
|
||||
</v-btn>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'NavBar',
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
nav {
|
||||
height: 8vh;
|
||||
}
|
||||
.nav-links {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
.nav-links li a {
|
||||
text-decoration: none;
|
||||
font-size: 20px;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import BhavCopy from './views/BhavCopy'
|
||||
import Landing from './views/Landing'
|
||||
|
||||
// ensure Router added to middleware
|
||||
Vue.use(VueRouter)
|
||||
|
|
@ -16,6 +17,14 @@ export default new VueRouter({
|
|||
meta: {
|
||||
title: 'Bhav Copy - Equity'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
name: 'landing',
|
||||
component: Landing,
|
||||
meta: {
|
||||
title: 'Bullish - Home'
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
|
|
|
|||
51
frontend/src/views/Landing.vue
Normal file
51
frontend/src/views/Landing.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
|
||||
<template>
|
||||
<div class="main">
|
||||
<div></div>
|
||||
<div>
|
||||
<img :src="image"/>
|
||||
</div>
|
||||
<div class="details">
|
||||
<h1>Bullish</h1>
|
||||
<p>A simple webapp to explore Bhav Copy Equity data</p>
|
||||
<v-btn
|
||||
x-large
|
||||
>
|
||||
<router-link to="bhavcopy">Explore Now</router-link>
|
||||
</v-btn>
|
||||
<div></div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import image from "../assets/logo.png"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
image: image
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.main {
|
||||
height: 70%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 100px;
|
||||
}
|
||||
p {
|
||||
font-size: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Loading…
Reference in a new issue