richard
/
doccano
mirror of https://github.com/doccano/doccano.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Divide landing page into components

pull/341/head
Hironsan 5 years ago
parent
1ea7ad832a
commit
fd38075dbd
8 changed files with 268 additions and 205 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 38
      frontend/components/organisms/FeatureCard.vue
  2. 68
      frontend/components/organisms/FeatureCards.vue
  3. 48
      frontend/components/organisms/TheBottomBanner.vue
  4. 22
      frontend/components/organisms/TheFooter.vue
  5. 26
      frontend/components/organisms/TheHeader.vue
  6. 46
      frontend/components/organisms/TheTopBanner.vue
  7. 54
      frontend/layouts/default.vue
  8. 171
      frontend/pages/index.vue

38
frontend/components/organisms/FeatureCard.vue
View File

@ -0,0 +1,38 @@
<template>
<v-card>
<v-img
:src="imageSrc"
height="200px"
/>
<v-card-title primary-title class="layout justify-center">
<div class="headline text-xs-center font-weight-bold mb-2">
{{ title }}
</div>
</v-card-title>
<v-card-text class="subtitle-1 layout justify-center">
{{ text }}
</v-card-text>
</v-card>
</template>
<script>
export default {
props: {
title: {
type: String,
default: '',
required: true
},
text: {
type: String,
default: '',
required: true
},
imageSrc: {
type: String,
default: '',
required: true
}
}
}
</script>

68
frontend/components/organisms/FeatureCards.vue
View File

@ -0,0 +1,68 @@
<template>
<v-container>
<v-layout
column
wrap
class="my-5"
align-center
>
<v-flex xs12 sm4 class="my-3">
<div class="text-xs-center">
<h2 class="headline">
The best features
</h2>
</div>
</v-flex>
<v-flex xs12>
<v-container grid-list-xl>
<v-layout wrap align-center>
<v-flex
v-for="(item, index) in featureCards"
:key="index"
xs12
md4
>
<feature-card
:image-src="item.imageSrc"
:title="item.title"
:text="item.text"
/>
</v-flex>
</v-layout>
</v-container>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import FeatureCard from '@/components/organisms/FeatureCard'
export default {
components: {
FeatureCard
},
data() {
return {
featureCards: [
{
imageSrc: '/images/feature3.png',
title: 'Team Collaboration',
text: 'Annotation with your team mates.'
},
{
imageSrc: '/images/feature2.png',
title: 'Any Language',
text: 'Annotation with any language.'
},
{
imageSrc: '/images/feature1.png',
title: 'Open Source',
text: 'Annotation with free and customizable.'
}
]
}
}
}
</script>

48
frontend/components/organisms/TheBottomBanner.vue
View File

@ -0,0 +1,48 @@
<template>
<section>
<v-parallax
src="/images/vbanner.jpg"
height="400"
dark
>
<v-container>
<v-layout
wrap
align-center
justify-center
class="white--text"
>
<v-flex
xs12
md7
>
<v-img
src="http://doccano.herokuapp.com/static/images/named_entity_recognition.6fb82064e7aa.png"
max-height="380"
contain
class="ma-5"
/>
</v-flex>
<v-flex
xs12
md5
>
<h1 class="mb-2 display-1 text-xs-center">
Realize your ideas quickly
</h1>
<div class="mt-4">
<v-btn
class="blue lighten-2"
dark
large
href="/demo"
>
Try demo
</v-btn>
</div>
</v-flex>
</v-layout>
</v-container>
</v-parallax>
</section>
</template>

22
frontend/components/organisms/TheFooter.vue
View File

@ -0,0 +1,22 @@
<template>
<v-footer
color="primary lighten-1"
padless
>
<v-layout
justify-center
wrap
>
<v-flex
black
lighten-2
py-4
text-center
white--text
xs12
>
&copy; {{ new Date().getFullYear() }} doccano
</v-flex>
</v-layout>
</v-footer>
</template>

26
frontend/components/organisms/TheHeader.vue
View File

@ -0,0 +1,26 @@
<template>
<v-app-bar
app
color=""
>
<nuxt-link to="/" style="line-height:0;">
<img src="~/assets/icon.png" height="48">
</nuxt-link>
<v-toolbar-title class="align-center ml-2">
doccano
</v-toolbar-title>
<div class="flex-grow-1" />
<v-btn
outlined
href="auth"
>
Sign in
</v-btn>
</v-app-bar>
</template>
<style scoped>
.top{
text-decoration: none;
}
</style>

46
frontend/components/organisms/TheTopBanner.vue
View File

@ -0,0 +1,46 @@
<template>
<section>
<v-parallax
src="/images/vbanner.jpg"
height="400"
dark
>
<v-layout
wrap
align-center
justify-center
class="white--text"
>
<v-flex text-right class="mr-5">
<img src="~/assets/icon.png" alt="doccano" height="200">
</v-flex>
<v-flex>
<h1 class="mb-2 display-1 text-xs-center">
Text Annotation for Human
</h1>
<div class="mt-4">
<v-btn
large
outlined
color="white"
href="https://github.com/chakki-works/doccano"
>
<v-icon left>
mdi-github-circle
</v-icon>
GitHub
</v-btn>
<v-btn
class="blue lighten-2 ml-5"
dark
large
href="/auth"
>
Get Started
</v-btn>
</div>
</v-flex>
</v-layout>
</v-parallax>
</section>
</template>

54
frontend/layouts/default.vue
View File

@ -1,53 +1,19 @@
<template> <template>
<v-app> <v-app>
<v-app-bar
app
color=""
>
<nuxt-link to="/" style="line-height:0;">
<img src="~/assets/icon.png" height="48">
</nuxt-link>
<v-toolbar-title class="align-center ml-2">
doccano
</v-toolbar-title>
<div class="flex-grow-1" />
<v-btn
outlined
href="auth"
>
Sign in
</v-btn>
</v-app-bar>
<the-header />
<nuxt /> <nuxt />
<v-footer
color="primary lighten-1"
padless
>
<v-layout
justify-center
wrap
>
<v-flex
black
lighten-2
py-4
text-center
white--text
xs12
>
&copy; {{ new Date().getFullYear() }} doccano
</v-flex>
</v-layout>
</v-footer>
<the-footer />
</v-app> </v-app>
</template> </template>
<script> <script>
export default {}
</script>
import TheFooter from '@/components/organisms/TheFooter'
import TheHeader from '@/components/organisms/TheHeader'
<style scoped>
.top{
text-decoration: none;
export default {
components: {
TheFooter,
TheHeader
}
} }
</style>
</script>

171
frontend/pages/index.vue
View File

@ -1,172 +1,21 @@
<template> <template>
<v-content> <v-content>
<section>
<v-parallax
src="/images/vbanner.jpg"
height="400"
dark
>
<v-layout
wrap
align-center
justify-center
class="white--text"
>
<v-flex text-right class="mr-5">
<img src="~/assets/icon.png" alt="doccano" height="200">
</v-flex>
<v-flex>
<h1 class="mb-2 display-1 text-xs-center">
Text Annotation for Human
</h1>
<div class="mt-4">
<v-btn
large
outlined
color="white"
href="https://github.com/chakki-works/doccano"
>
<v-icon left>
mdi-github-circle
</v-icon>
GitHub
</v-btn>
<v-btn
class="blue lighten-2 ml-5"
dark
large
href="/auth"
>
Get Started
</v-btn>
</div>
</v-flex>
</v-layout>
</v-parallax>
</section>
<v-container>
<v-layout
column
wrap
class="my-5"
align-center
>
<v-flex xs12 sm4 class="my-3">
<div class="text-xs-center">
<h2 class="headline">
The best features
</h2>
</div>
</v-flex>
<v-flex xs12>
<v-container grid-list-xl>
<v-layout wrap align-center>
<v-flex xs12 md4>
<v-card>
<v-img
src="/images/feature3.png"
height="200px"
/>
<v-card-title primary-title class="layout justify-center">
<div class="headline text-xs-center font-weight-bold mb-2">
Team Collaboration
</div>
</v-card-title>
<v-card-text class="subtitle-1 layout justify-center">
Annotation with your team mates.
</v-card-text>
</v-card>
</v-flex>
<v-flex xs12 md4>
<v-card>
<v-img
src="/images/feature2.png"
height="200px"
/>
<v-card-title primary-title class="layout justify-center">
<div class="headline text-xs-center font-weight-bold mb-2">
Any Language
</div>
</v-card-title>
<v-card-text class="subtitle-1 layout justify-center">
Annotation with any language.
</v-card-text>
</v-card>
</v-flex>
<v-flex xs12 md4>
<v-card>
<v-img
src="/images/feature1.png"
height="200px"
/>
<v-card-title primary-title class="layout justify-center">
<div class="headline text-xs-center font-weight-bold mb-2">
Open Source
</div>
</v-card-title>
<v-card-text class="subtitle-1 layout justify-center">
Annotation with free and customizable.
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-flex>
</v-layout>
</v-container>
<section>
<v-parallax
src="/images/vbanner.jpg"
height="400"
dark
>
<v-container>
<v-layout
wrap
align-center
justify-center
class="white--text"
>
<v-flex
xs12
md7
>
<v-img
src="http://doccano.herokuapp.com/static/images/named_entity_recognition.6fb82064e7aa.png"
max-height="380"
contain
class="ma-5"
/>
</v-flex>
<v-flex
xs12
md5
>
<h1 class="mb-2 display-1 text-xs-center">
Realize your ideas quickly
</h1>
<div class="mt-4">
<v-btn
class="blue lighten-2"
dark
large
href="/demo"
>
Try demo
</v-btn>
</div>
</v-flex>
</v-layout>
</v-container>
</v-parallax>
</section>
<the-top-banner />
<feature-cards />
<the-bottom-banner />
</v-content> </v-content>
</template> </template>
<script> <script>
import FeatureCards from '@/components/organisms/FeatureCards'
import TheTopBanner from '@/components/organisms/TheTopBanner'
import TheBottomBanner from '@/components/organisms/TheBottomBanner'
export default { export default {
components: { components: {
FeatureCards,
TheTopBanner,
TheBottomBanner
} }
} }
</script> </script>
Write Preview
Loading…
Cancel
Save