Skip to content

Commit

Permalink
adding must agree because dominator Ken told me to do so
Browse files Browse the repository at this point in the history
  • Loading branch information
@jdelrue
jdelrue committed Feb 24, 2021
1 parent 6468d98 commit 47ab2bb
Showing 1 changed file with 110 additions and 47 deletions.
157 changes: 110 additions & 47 deletions wizard/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,61 +10,106 @@
<v-carousel-item>
<header>
<h2>Welcome to</h2>
<img class="logo" src="threefold_connect_logo.svg" alt="threefold connect">
<img
class="logo"
src="threefold_connect_logo.svg"
alt="threefold connect"
/>
</header>
<main>
<p>
ThreeFold Connect is your main access point to the ThreeFold Grid and more. Please allow us to quickly
show you around!
ThreeFold Connect is your main access point to the ThreeFold Grid
and more. Please allow us to quickly show you around!
</p>
</main>
</v-carousel-item>
<v-carousel-item>
<header>
<h1>MAXIMUM <br> <b>SECURITY</b></h1>
<img class="finger-print" src="fingerprint.svg" alt="threefold connect">
<h1>
MAXIMUM <br />
<b>SECURITY</b>
</h1>
<img
class="finger-print"
src="fingerprint.svg"
alt="threefold connect"
/>
</header>
<main>
<p>
The app provides a secure authentication mechanism that protects your identity on the ThreeFold Grid.
The app provides a secure authentication mechanism that protects
your identity on the ThreeFold Grid.
</p>
</main>
</v-carousel-item>
<v-carousel-item>
<header>
<h1 style="font-size: 39px;">THREEFOLD <br> <b style="font-size: 58px;">WALLET</b></h1>
<img style="width: 170px;height: 170.95px;position: absolute;top: 24vh;" src="TFT.svg"
alt="threefold connect">
<h1 style="font-size: 39px">
THREEFOLD <br />
<b style="font-size: 58px">WALLET</b>
</h1>
<img
style="
width: 170px;
height: 170.95px;
position: absolute;
top: 24vh;
"
src="TFT.svg"
alt="threefold connect"
/>
</header>
<main>
<p>
Access your ThreeFold Wallet and your ThreeFold Tokens (TFT). More currencies are to be added in the
future.
Access your ThreeFold Wallet and your ThreeFold Tokens (TFT). More
currencies are to be added in the future.
</p>
</main>
</v-carousel-item>
<v-carousel-item>
<header>
<h1 style="font-size: 32px;">THREEFOLD <br> <b style="font-size: 64px;">NEWS</b></h1>
<img style="width: 200px;height: 355.56px;position: absolute;top: 15vh;" src="news.svg"
alt="threefold connect">
<h1 style="font-size: 32px">
THREEFOLD <br />
<b style="font-size: 64px">NEWS</b>
</h1>
<img
style="
width: 200px;
height: 355.56px;
position: absolute;
top: 15vh;
"
src="news.svg"
alt="threefold connect"
/>
</header>
<main>
<p>
Stay updated with ThreeFold’s latest updates via the News section within the app.
Stay updated with ThreeFold’s latest updates via the News section
within the app.
</p>
</main>
</v-carousel-item>
<v-carousel-item>
<div class="journey">
<img style="width: 200px;height: 355.56px;" src="journey.svg" alt="threefold connect">
<h1 class="pt-8 pb-4" style="font-size: 38px;">START YOUR <br> <b style="font-size: 39px;">THREEFOLD</b> <br> <i style="font-size: 49px;">JOURNEY</i>
<img
style="width: 200px; height: 355.56px"
src="journey.svg"
alt="threefold connect"
/>
<h1 class="pt-8 pb-4" style="font-size: 38px">
START YOUR <br />
<b style="font-size: 39px">THREEFOLD</b> <br />
<i style="font-size: 49px">JOURNEY</i>
</h1>
<v-btn @click="finish" color="#57BE8E" dark elevation="0">GET STARTED</v-btn>
<v-checkbox v-model="acceptedTT" style="width: 70vw; font-size: 11px;">
<v-checkbox
v-model="acceptedTT"
style="width: 70vw; font-size: 11px"
>
<template v-slot:label>
<div>
By clicking ‘Get Started’, I agree to Threefold’s
<div :class="{'red--text':getStartedClicked}">
I agree to Threefold’s
<button
style="text-decoration: underline"
@click="showDisclaimer = true"
Expand All @@ -78,22 +123,31 @@
</div>
</v-carousel-item>
</v-carousel>
<v-btn id="skip" @click="showDisclaimerBeforeSkip" class="mt-5" absolute top right text>Skip</v-btn>
<v-btn
id="skip"
@click="showDisclaimerBeforeSkip"
class="mt-5"
absolute
top
right
text
>Skip</v-btn
>
</v-main>
<v-dialog v-model="showDialog" width="500">
<v-card>
<v-card-title>Accept the terms and conditions?</v-card-title>
<v-card-text>
<p>
Before you can start using the app, you must accept the
<v-btn
text
small
@click="showDisclaimer = true"
>Terms and conditions
<v-btn text small @click="showDisclaimer = true"
>Terms and conditions
</v-btn>
</p>
<v-checkbox v-model="acceptedTT" label="I Accept the terms and conditions"></v-checkbox>
<v-checkbox
v-model="acceptedTT"
label="I Accept the terms and conditions"
></v-checkbox>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
Expand All @@ -112,8 +166,11 @@
</v-btn>
</v-row>
</v-card-title>
<iframe style="height:calc(100vh - 62px); width: 100%" src="https://wiki.threefold.io/#/legal"
frameborder="0"></iframe>
<iframe
style="height: calc(100vh - 62px); width: 100%"
src="https://wiki.threefold.io/#/legal"
frameborder="0"
></iframe>
</v-card>
</v-dialog>
</v-app>
Expand All @@ -126,26 +183,32 @@ export default {
return {
acceptedTT: false,
showDisclaimer: false,
showDialog: false
showDialog: false,
getStartedClicked: false
}
},
methods: {
showDisclaimerBeforeSkip () {
this.showDialog = true
},
finish () {
this.acceptedTT = true
window.flutter_inappwebview.callHandler('FINISH')
if (this.acceptedTT) {
window.flutter_inappwebview.callHandler('FINISH')
return
}
this.getStartedClicked = true
}
}
}
</script>
<style lang="scss">
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
@import url('https://use.fontawesome.com/releases/v5.6.3/css/all.css');
@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
@import url("https://use.fontawesome.com/releases/v5.6.3/css/all.css");
*, .v-application, .v-application * {
font-family: 'Lato', serif !important;
*,
.v-application,
.v-application * {
font-family: "Lato", serif !important;
}
h2 {
Expand Down Expand Up @@ -181,7 +244,7 @@ h2 {
letter-spacing: 0.03em;
b {
color: #57BE8E;
color: #57be8e;
font-size: 50px;
}
}
Expand Down Expand Up @@ -212,7 +275,6 @@ h2 {
font-size: 20px;
width: 77.77%;
text-align: center;
}
}
}
Expand All @@ -232,7 +294,7 @@ h2 {
button {
height: 4.5vw !important;
width: 4.5vw !important;
background: #1272B8;
background: #1272b8;
* {
display: none;
Expand All @@ -241,13 +303,14 @@ h2 {
&.v-btn--active {
height: 5vw !important;
width: 5vw !important;
background: #57BE8E;
background: #57be8e;
}
}
}
}
.v-window__next, .v-window__prev {
.v-window__next,
.v-window__prev {
display: none !important;
}
Expand All @@ -260,7 +323,7 @@ h2 {
h1 {
line-height: 33px;
b {
color: #57BE8E;
color: #57be8e;
}
i {
font-style: normal;
Expand All @@ -272,17 +335,17 @@ h2 {
width: 230px;
height: 39px;
border-radius: 80px;
background: #57BE8E;
background: #57be8e;
}
.v-btn--disabled{
.v-btn--disabled {
}
.spacer {
height: 20vh;
width: 100%;
}
}
.v-input--selection-controls__ripple, .v-icon{
font-family: 'Font Awesome 5 Free' !important;
.v-input--selection-controls__ripple,
.v-icon {
font-family: "Font Awesome 5 Free" !important;
}
</style>

0 comments on commit 47ab2bb

Please sign in to comment.