Browse Source

WhiteLayout + a bit views

vue
Lev 2 years ago
parent
commit
b66765668d
  1. 31
      .idea/workspace.xml
  2. 122
      src/assets/getting_ton_domain.svg
  3. 122
      src/assets/i-know.svg
  4. 7
      src/assets/main.css
  5. 84
      src/assets/ton_bottom.svg
  6. BIN
      src/assets/ton_right.png
  7. 87
      src/assets/ton_right.svg
  8. 84
      src/assets/ton_top.svg
  9. BIN
      src/assets/tondns.png
  10. 84
      src/assets/tondns.svg
  11. BIN
      src/assets/tonweb.png
  12. 115
      src/assets/tonweb.svg
  13. BIN
      src/assets/tonweb_duck.png
  14. 58
      src/components/WhiteLayout.vue
  15. 7
      src/router/index.ts
  16. 34
      src/views/IKnow.vue
  17. 39
      src/views/TonDns.vue
  18. 45
      src/views/TonWeb.vue

31
.idea/workspace.xml

@ -1,14 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<project version="4"> <project version="4">
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="Wrote the landing"> <list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="TON Web page">
<change afterPath="$PROJECT_DIR$/src/views/IKnow.vue" afterDir="false" /> <change afterPath="$PROJECT_DIR$/src/assets/getting_ton_domain.svg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/assets/ton_right.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/assets/ton_right.svg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/assets/tondns.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/assets/tondns.svg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/assets/tonweb.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/assets/tonweb.svg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/assets/tonweb_duck.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/components/WhiteLayout.vue" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/views/TonDns.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/assets/logo.png" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/logo.png" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/assets/main.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/main.css" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/assets/main.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/main.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/Header.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Header.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/router/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/router/index.ts" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/router/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/router/index.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/views/Landing.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Landing.vue" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/views/IKnow.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/IKnow.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/views/TonWeb.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/TonWeb.vue" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/views/TonWeb.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/TonWeb.vue" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
@ -65,7 +72,7 @@
<option name="number" value="Default" /> <option name="number" value="Default" />
<option name="presentableId" value="Default" /> <option name="presentableId" value="Default" />
<updated>1670839492682</updated> <updated>1670839492682</updated>
<workItem from="1670839496719" duration="7098000" /> <workItem from="1670839496719" duration="9645000" />
</task> </task>
<task id="LOCAL-00001" summary="Wrote the landing"> <task id="LOCAL-00001" summary="Wrote the landing">
<created>1670844191163</created> <created>1670844191163</created>
@ -74,7 +81,14 @@
<option name="project" value="LOCAL" /> <option name="project" value="LOCAL" />
<updated>1670844191164</updated> <updated>1670844191164</updated>
</task> </task>
<option name="localTasksCounter" value="2" /> <task id="LOCAL-00002" summary="TON Web page">
<created>1670847897936</created>
<option name="number" value="00002" />
<option name="presentableId" value="LOCAL-00002" />
<option name="project" value="LOCAL" />
<updated>1670847897937</updated>
</task>
<option name="localTasksCounter" value="3" />
<servers /> <servers />
</component> </component>
<component name="TypeScriptGeneratedFilesManager"> <component name="TypeScriptGeneratedFilesManager">
@ -93,6 +107,7 @@
</component> </component>
<component name="VcsManagerConfiguration"> <component name="VcsManagerConfiguration">
<MESSAGE value="Wrote the landing" /> <MESSAGE value="Wrote the landing" />
<option name="LAST_COMMIT_MESSAGE" value="Wrote the landing" /> <MESSAGE value="TON Web page" />
<option name="LAST_COMMIT_MESSAGE" value="TON Web page" />
</component> </component>
</project> </project>

122
src/assets/getting_ton_domain.svg

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 94 KiB

122
src/assets/i-know.svg

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 94 KiB

7
src/assets/main.css

@ -57,7 +57,12 @@ a,
border-radius: 1rem; border-radius: 1rem;
} }
.b > img { .b > img:first-child {
max-height: 1.4rem;
margin-right: 0.7rem;
}
.b > img:not(:first-child) {
max-height: 1.4rem; max-height: 1.4rem;
margin-left: 2rem; margin-left: 2rem;
} }

84
src/assets/ton_bottom.svg

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 90 KiB

BIN
src/assets/ton_right.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

87
src/assets/ton_right.svg

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 90 KiB

84
src/assets/ton_top.svg

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 90 KiB

BIN
src/assets/tondns.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 147 KiB

84
src/assets/tondns.svg

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 92 KiB

BIN
src/assets/tonweb.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 155 KiB

115
src/assets/tonweb.svg

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 93 KiB

BIN
src/assets/tonweb_duck.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

58
src/components/WhiteLayout.vue

@ -0,0 +1,58 @@
<template>
<div style="width: 100vw">
<Header/>
<div class="header-logo">
<slot name="header"></slot>
</div>
<div>
<div class="rbox" style="width: 90%; min-height: 50vh">
<slot name="content"></slot>
</div>
</div>
<div class="buttons">
<slot name="buttons">
<router-link :to="next">
<!-- "Next" button of class "bblue wide" with @/assets/ton_right.svg icon on the right -->
<button class="b blue wide">
<span>{{nexttext}}</span>
<img src="@/assets/ton_right.svg" alt="Next"/>
</button>
</router-link>
</slot>
</div>
</div>
</template>
<script>
import Header from "../components/Header.vue";
export default {
name: "WhiteLayout",
components: {Header},
props: {
next: {
type: String
},
nexttext: {
type: String,
default: "Next"
}
}
}
</script>
<style scoped>
.header-logo {
display: block;
text-align: center;
justify-content: center;
height: 4rem;
margin: 0 auto 1.5rem;
}
.buttons {
display: flex;
justify-content: center;
margin: 1rem 0;
}
</style>

7
src/router/index.ts

@ -16,8 +16,13 @@ const router = createRouter({
}, },
{ {
path: '/i-know', path: '/i-know',
name: 'i-know', name: 'IKnow',
component: () => import('../views/IKnow.vue') component: () => import('../views/IKnow.vue')
},
{
path: '/tondns',
name: 'tondns',
component: () => import('../views/TonDns.vue')
} }
] ]
}) })

34
src/views/IKnow.vue

@ -1,10 +1,40 @@
<template> <template>
<div></div> <WhiteLayout next="">
<template v-slot:header>
<img src="@/assets/i-know.svg" style="height: 100%" alt="TON DNS"/>
</template>
<template v-slot:content>
<div class="columns-3" style="display: flex; columns: 3; justify-content: center; align-items: center">
<div>
</div>
<div>
<p>That's great!<br/>Maybe, you even have a domain already?</p>
</div>
</div>
</template>
<template v-slot:buttons>
<router-link to="tondns">
<button class="b blue wide">
<img src="@/assets/ton_top.svg" alt="Next"/>
<span>Yes</span>
</button>
</router-link>
<router-link to="tondns">
<button class="b blue wide">
<img src="@/assets/ton_bottom.svg" alt="Next"/>
<span>No</span>
</button>
</router-link>
</template>
</WhiteLayout>
</template> </template>
<script> <script>
import WhiteLayout from "../components/WhiteLayout.vue";
export default { export default {
name: "IKnow" name: "IKnow",
components: {WhiteLayout}
} }
</script> </script>

39
src/views/TonDns.vue

@ -0,0 +1,39 @@
<template>
<WhiteLayout>
<template v-slot:header>
<img src="@/assets/tondns.svg" style="height: 100%" alt="TON DNS"/>
</template>
<template v-slot:content>
<div class="columns-3" style="display: flex; columns: 3; justify-content: center; align-items: center">
<div>
</div>
<div>
<p>TON domains .ton and .t.me are your names in the TON world.<br/>
They can be used to host a website or to transfer money.<br/>
You can host a TON website for your personal brand.</p>
</div>
</div>
</template>
<template v-slot:buttons>
<router-link to="/get_tondon">
<button class="b blue wide">
<span>Omg, can I get one?</span>
<img src="@/assets/ton_right.svg" alt="Next"/>
</button>
</router-link>
</template>
</WhiteLayout>
</template>
<script>
import WhiteLayout from "../components/WhiteLayout.vue";
export default {
name: "TonDns",
components: {WhiteLayout}
}
</script>
<style scoped>
</style>

45
src/views/TonWeb.vue

@ -1,12 +1,9 @@
<template> <template>
<div style="width: 100vw"> <WhiteLayout next="tondns" nexttext="Wow, what else?">
<Header/> <template v-slot:header>
<!-- Centered logo from @/assets/tonweb.svg -->
<div class="header-logo">
<img src="@/assets/tonweb.svg" style="height: 100%" alt="TON Web"/> <img src="@/assets/tonweb.svg" style="height: 100%" alt="TON Web"/>
</div> </template>
<div> <template v-slot:content>
<div class="rbox" style="width: 90%">
<div class="columns-2" style="display: flex; columns: 2"> <div class="columns-2" style="display: flex; columns: 2">
<div> <div>
<img src="@/assets/tonweb_duck.png" alt="TON Web" style="width: 20rem"/> <img src="@/assets/tonweb_duck.png" alt="TON Web" style="width: 20rem"/>
@ -17,8 +14,7 @@
<p>They have a lot of advantages:</p> <p>They have a lot of advantages:</p>
<ul style="text-align: left; padding: 0 5rem; font-size: 1.4rem"> <ul style="text-align: left; padding: 0 5rem; font-size: 1.4rem">
<li> The DApps are truly D: they cannot be banned or pressured, the servers cannot be traced, the apps <li> The DApps are truly D: they cannot be banned or pressured, the servers cannot be traced, the apps
don't don't get the user's IP
get the user's IP
</li> </li>
<li> There can be no censorship</li> <li> There can be no censorship</li>
<li> Validity of websites is determined on the blockchain instead of trusting authorities for SSL</li> <li> Validity of websites is determined on the blockchain instead of trusting authorities for SSL</li>
@ -28,42 +24,19 @@
</ul> </ul>
</div> </div>
</div> </div>
</template>
</div> </WhiteLayout>
</div>
<div class="buttons">
<router-link to="/tondns">
<!-- "Next" button of class "bblue wide" with @/assets/ton_right.svg icon on the right -->
<button class="b blue wide">
<span>Next</span>
<img src="@/assets/ton_right.svg" alt="Next"/>
</button>
</router-link>
</div>
</div>
</template> </template>
<script> <script>
import Header from "../components/Header.vue"; import WhiteLayout from "../components/WhiteLayout.vue";
export default { export default {
name: "TonWeb", name: "TonWeb",
components: {Header} components: {WhiteLayout}
} }
</script> </script>
<style scoped> <style scoped>
.header-logo {
display: block;
text-align: center;
justify-content: center;
height: 4rem;
margin: 0 auto 1.5rem;
}
.buttons {
display: flex;
justify-content: center;
margin: 1rem 0;
}
</style> </style>
Loading…
Cancel
Save