Browse Source

TON Web page

vue
Lev 2 years ago
parent
commit
3e95861ea4
  1. 21
      .idea/workspace.xml
  2. BIN
      src/assets/logo.png
  3. 54
      src/assets/main.css
  4. 5
      src/components/Header.vue
  5. 5
      src/router/index.ts
  6. 13
      src/views/IKnow.vue
  7. 4
      src/views/Landing.vue
  8. 56
      src/views/TonWeb.vue

21
.idea/workspace.xml

@ -1,16 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ChangeListManager">
<list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="">
<change afterPath="$PROJECT_DIR$/src/views/TonWeb.vue" afterDir="false" />
<list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="Wrote the landing">
<change afterPath="$PROJECT_DIR$/src/views/IKnow.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/index.html" 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/components/Header.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Header.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/TheWelcome.vue" beforeDir="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/TonWeb.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/TonWeb.vue" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -66,8 +65,16 @@
<option name="number" value="Default" />
<option name="presentableId" value="Default" />
<updated>1670839492682</updated>
<workItem from="1670839496719" duration="3412000" />
<workItem from="1670839496719" duration="7098000" />
</task>
<task id="LOCAL-00001" summary="Wrote the landing">
<created>1670844191163</created>
<option name="number" value="00001" />
<option name="presentableId" value="LOCAL-00001" />
<option name="project" value="LOCAL" />
<updated>1670844191164</updated>
</task>
<option name="localTasksCounter" value="2" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
@ -84,4 +91,8 @@
</map>
</option>
</component>
<component name="VcsManagerConfiguration">
<MESSAGE value="Wrote the landing" />
<option name="LAST_COMMIT_MESSAGE" value="Wrote the landing" />
</component>
</project>

BIN
src/assets/logo.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 119 KiB

After

Width:  |  Height:  |  Size: 119 KiB

54
src/assets/main.css

@ -14,12 +14,6 @@ a,
transition: 0.4s;
}
@media (hover: hover) {
a:hover {
background-color: hsla(160, 100%, 37%, 0.2);
}
}
@media (min-width: 1024px) {
body {
display: flex;
@ -33,10 +27,8 @@ a,
}
}
.bwhite {
background-color: white;
color: #282e46;
border: none;
.b {
border: 2px solid transparent;
border-radius: 5px;
padding: 16px 32px;
text-align: center;
@ -48,7 +40,47 @@ a,
font-weight: bold;
}
.wide.bwhite {
.b.white {
background-color: white;
color: #282e46;
}
.b.white:hover {
background-color: #282e46;
color: white;
border: 2px solid white;
}
.b.blue {
background-color: #0088cc;
color: white;
border-radius: 1rem;
}
.b > img {
max-height: 1.4rem;
margin-left: 2rem;
}
.wide.b {
min-width: 16rem;
margin: 0.5rem;
}
/* A #edeef1 box with rounded corners with black content color and content centered vertically and horizontally */
.rbox {
background-color: #edeef1;
border-radius: 2rem;
padding: 2.5rem 32px;
text-align: center;
display: inline-block;
font-size: 1.6rem;
font-weight: bold;
color: #282e46;
min-width: 16rem;
margin: 0.5rem 3rem;
}
.rbox > p:not(:first-child) {
margin-top: 1rem;
}

5
src/components/Header.vue

@ -1,7 +1,7 @@
<template>
<header>
<div class="wrapper">
<img class="logo" src="@/assets/logo.png" alt="Agorata" />
<router-link to="/"><img class="logo" src="@/assets/logo.png" alt="Agorata" /></router-link>
<nav>
<!-- <router-link to="/">Home</router-link>-->
<!-- <router-link to="/about">About</router-link>-->
@ -22,11 +22,12 @@ header {
line-height: 1.5;
max-height: 10rem;
padding-left: 1rem;
padding-top: 1rem;
}
.logo {
display: block;
margin: 0 auto 2rem;
max-width: 17rem;
width: 17rem;
}
nav {

5
src/router/index.ts

@ -13,6 +13,11 @@ const router = createRouter({
path: '/tonweb',
name: 'tonweb',
component: () => import('../views/TonWeb.vue')
},
{
path: '/i-know',
name: 'i-know',
component: () => import('../views/IKnow.vue')
}
]
})

13
src/views/IKnow.vue

@ -0,0 +1,13 @@
<template>
<div></div>
</template>
<script>
export default {
name: "IKnow"
}
</script>
<style scoped>
</style>

4
src/views/Landing.vue

@ -10,11 +10,11 @@
<div id="do-you-know">
<p>Do you know what TON Web is?</p><br/>
<router-link to="/i-know">
<button class="bwhite wide">Yes</button>
<button class="b white wide">Yes</button>
</router-link>
<br/>
<router-link to="/tonweb">
<button class="bwhite wide">No</button>
<button class="b white wide">No</button>
</router-link>
</div>
</main>

56
src/views/TonWeb.vue

@ -1,9 +1,51 @@
<template>
<Header/>
<div style="width: 100vw">
<Header/>
<!-- Centered logo from @/assets/tonweb.svg -->
<div class="header-logo">
<img src="@/assets/tonweb.svg" style="height: 100%" alt="TON Web"/>
</div>
<div>
<div class="rbox" style="width: 90%">
<div class="columns-2" style="display: flex; columns: 2">
<div>
<img src="@/assets/tonweb_duck.png" alt="TON Web" style="width: 20rem"/>
</div>
<div>
<p>TON Sites are just websites hosted on the TON Network.<br/>
After some configuration, you can visit a website like foundation.ton.</p>
<p>They have a lot of advantages:</p>
<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
don't
get the user's IP
</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> Domain ownership has clear rules on TON, there is no central authority, no registrators</li>
<li> The TON Web is nicely integrated with the TON blockchain</li>
<li> There is no need for logins and passwords you just use your TON account</li>
</ul>
</div>
</div>
</div>
</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>
<script>
import Header from "../components/Header.vue";
export default {
name: "TonWeb",
components: {Header}
@ -11,5 +53,17 @@ export default {
</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>
Loading…
Cancel
Save