agorata
/
frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

TON Web page

vue
Lev 2 years ago
parent
fa34b1b1bc
commit
3e95861ea4
8 changed files with 137 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

@ -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
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 119 KiB

After

Width:  |  Height:  |  Size: 119 KiB

54
src/assets/main.css
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

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

4
src/views/Landing.vue
Unescape View File

@ -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
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save