Browse Source

Adaptivity + more assets

vue
Lev 2 years ago
parent
commit
22b4eac898
  1. 68
      .idea/workspace.xml
  2. 11
      package-lock.json
  3. 1
      package.json
  4. 53
      src/assets/headers/getting_ton_domain.svg
  5. 53
      src/assets/headers/i-know.svg
  6. 51
      src/assets/icons/ton_bottom.svg
  7. 56
      src/assets/icons/ton_right.svg
  8. 51
      src/assets/icons/ton_top.svg
  9. BIN
      src/assets/images/anton_ton.png
  10. BIN
      src/assets/images/my_name_is.png
  11. BIN
      src/assets/images/personal_page.png
  12. BIN
      src/assets/images/send_by_name.png
  13. BIN
      src/assets/images/tg_nft.png
  14. BIN
      src/assets/images/tondns_nft.png
  15. 0
      src/assets/images/tonweb_duck.png
  16. 20
      src/assets/main.css
  17. BIN
      src/assets/ton_right.png
  18. BIN
      src/assets/tondns.png
  19. BIN
      src/assets/tonweb.png
  20. 21
      src/components/WhiteLayout.vue
  21. 14
      src/views/IKnow.vue
  22. 8
      src/views/Landing.vue
  23. 2
      src/views/TonDns.vue
  24. 20
      src/views/TonWeb.vue

68
.idea/workspace.xml

@ -1,21 +1,30 @@
<?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="TON Web page"> <list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="Adaptivity + more assets">
<change afterPath="$PROJECT_DIR$/src/assets/getting_ton_domain.svg" afterDir="false" /> <change afterPath="$PROJECT_DIR$/src/assets/images/anton_ton.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/assets/ton_right.png" afterDir="false" /> <change afterPath="$PROJECT_DIR$/src/assets/images/my_name_is.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/assets/ton_right.svg" afterDir="false" /> <change afterPath="$PROJECT_DIR$/src/assets/images/personal_page.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/assets/tondns.png" afterDir="false" /> <change afterPath="$PROJECT_DIR$/src/assets/images/send_by_name.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/assets/tondns.svg" afterDir="false" /> <change afterPath="$PROJECT_DIR$/src/assets/images/tg_nft.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/assets/tonweb.png" afterDir="false" /> <change afterPath="$PROJECT_DIR$/src/assets/images/tondns_nft.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$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/assets/getting_ton_domain.svg" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/headers/getting_ton_domain.svg" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/assets/i-know.svg" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/headers/i-know.svg" 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/router/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/router/index.ts" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/assets/ton_bottom.svg" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/icons/ton_bottom.svg" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/assets/ton_right.png" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/assets/ton_right.svg" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/icons/ton_right.svg" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/assets/ton_top.svg" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/icons/ton_top.svg" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/assets/tondns.png" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/assets/tonweb.png" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/assets/tonweb_duck.png" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/images/tonweb_duck.png" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/WhiteLayout.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/WhiteLayout.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/IKnow.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/IKnow.vue" 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/TonDns.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/TonDns.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" />
@ -41,17 +50,24 @@
<option name="hideEmptyMiddlePackages" value="true" /> <option name="hideEmptyMiddlePackages" value="true" />
<option name="showLibraryContents" value="true" /> <option name="showLibraryContents" value="true" />
</component> </component>
<component name="PropertiesComponent"><![CDATA[{ <component name="PropertiesComponent">{
"keyToString": { &quot;keyToString&quot;: {
"RunOnceActivity.OpenProjectViewOnStart": "true", &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
"RunOnceActivity.ShowReadmeOnStart": "true", &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
"WebServerToolWindowFactoryState": "false", &quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;,
"last_opened_file_path": "/home/ennucore/dev/agorata/frontend", &quot;last_opened_file_path&quot;: &quot;/home/ennucore/dev/agorata/frontend&quot;,
"nodejs_package_manager_path": "npm", &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
"ts.external.directory.path": "/home/ennucore/dev/agorata/frontend/node_modules/typescript/lib", &quot;ts.external.directory.path&quot;: &quot;/home/ennucore/dev/agorata/frontend/node_modules/typescript/lib&quot;,
"vue.rearranger.settings.migration": "true" &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
} }
}]]></component> }</component>
<component name="RecentsManager">
<key name="MoveFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$/src/assets/headers" />
<recent name="$PROJECT_DIR$/src/assets/images" />
<recent name="$PROJECT_DIR$/src/assets/icons" />
</key>
</component>
<component name="RunManager"> <component name="RunManager">
<configuration name="dev" type="js.build_tools.npm" nameIsGenerated="true"> <configuration name="dev" type="js.build_tools.npm" nameIsGenerated="true">
<package-json value="$PROJECT_DIR$/package.json" /> <package-json value="$PROJECT_DIR$/package.json" />
@ -72,7 +88,10 @@
<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="9645000" /> <workItem from="1670839496719" duration="10862000" />
<workItem from="1670927344373" duration="29000" />
<workItem from="1670927391338" duration="2277000" />
<workItem from="1671024025708" duration="1539000" />
</task> </task>
<task id="LOCAL-00001" summary="Wrote the landing"> <task id="LOCAL-00001" summary="Wrote the landing">
<created>1670844191163</created> <created>1670844191163</created>
@ -108,6 +127,7 @@
<component name="VcsManagerConfiguration"> <component name="VcsManagerConfiguration">
<MESSAGE value="Wrote the landing" /> <MESSAGE value="Wrote the landing" />
<MESSAGE value="TON Web page" /> <MESSAGE value="TON Web page" />
<option name="LAST_COMMIT_MESSAGE" value="TON Web page" /> <MESSAGE value="Adaptivity + more assets" />
<option name="LAST_COMMIT_MESSAGE" value="Adaptivity + more assets" />
</component> </component>
</project> </project>

11
package-lock.json generated

@ -8,6 +8,7 @@
"name": "agorata", "name": "agorata",
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"bulma": "^0.9.4",
"sass": "^1.56.2", "sass": "^1.56.2",
"vue": "^3.2.45", "vue": "^3.2.45",
"vue-router": "^4.1.6" "vue-router": "^4.1.6"
@ -850,6 +851,11 @@
"optional": true, "optional": true,
"peer": true "peer": true
}, },
"node_modules/bulma": {
"version": "0.9.4",
"resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
"integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ=="
},
"node_modules/call-bind": { "node_modules/call-bind": {
"version": "1.0.2", "version": "1.0.2",
"dev": true, "dev": true,
@ -3181,6 +3187,11 @@
"optional": true, "optional": true,
"peer": true "peer": true
}, },
"bulma": {
"version": "0.9.4",
"resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
"integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ=="
},
"call-bind": { "call-bind": {
"version": "1.0.2", "version": "1.0.2",
"dev": true, "dev": true,

1
package.json

@ -10,6 +10,7 @@
"type-check": "vue-tsc --noEmit" "type-check": "vue-tsc --noEmit"
}, },
"dependencies": { "dependencies": {
"bulma": "^0.9.4",
"sass": "^1.56.2", "sass": "^1.56.2",
"vue": "^3.2.45", "vue": "^3.2.45",
"vue-router": "^4.1.6" "vue-router": "^4.1.6"

53
src/assets/getting_ton_domain.svg → src/assets/headers/getting_ton_domain.svg

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 109 KiB

53
src/assets/i-know.svg → src/assets/headers/i-know.svg

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 110 KiB

51
src/assets/ton_bottom.svg → src/assets/icons/ton_bottom.svg

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 90 KiB

After

Width:  |  Height:  |  Size: 106 KiB

56
src/assets/ton_right.svg → src/assets/icons/ton_right.svg

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 90 KiB

After

Width:  |  Height:  |  Size: 106 KiB

51
src/assets/ton_top.svg → src/assets/icons/ton_top.svg

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 90 KiB

After

Width:  |  Height:  |  Size: 106 KiB

BIN
src/assets/images/anton_ton.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
src/assets/images/my_name_is.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 818 KiB

BIN
src/assets/images/personal_page.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 370 KiB

BIN
src/assets/images/send_by_name.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB

BIN
src/assets/images/tg_nft.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB

BIN
src/assets/images/tondns_nft.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 120 KiB

0
src/assets/tonweb_duck.png → src/assets/images/tonweb_duck.png

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 1.3 MiB

20
src/assets/main.css

@ -1,4 +1,7 @@
@import './base.css'; @import './base.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
#app { #app {
margin: 0 auto; margin: 0 auto;
@ -30,16 +33,22 @@ a,
.b { .b {
border: 2px solid transparent; border: 2px solid transparent;
border-radius: 5px; border-radius: 5px;
padding: 16px 32px; padding: 16px 26px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
font-size: 1.6rem; font-size: 1.55rem;
margin: 4px 2px; margin: 4px 2px;
cursor: pointer; cursor: pointer;
font-weight: bold; font-weight: bold;
} }
@media (max-width: 800px) {
.b {
font-size: 1.4rem;
}
}
.b.white { .b.white {
background-color: white; background-color: white;
color: #282e46; color: #282e46;
@ -86,6 +95,13 @@ a,
margin: 0.5rem 3rem; margin: 0.5rem 3rem;
} }
/* small margin on mobile */
@media (max-width: 800px) {
.rbox {
margin: 0.5rem 0.5rem;
}
}
.rbox > p:not(:first-child) { .rbox > p:not(:first-child) {
margin-top: 1rem; margin-top: 1rem;
} }

BIN
src/assets/ton_right.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
src/assets/tondns.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 147 KiB

BIN
src/assets/tonweb.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 155 KiB

21
src/components/WhiteLayout.vue

@ -5,17 +5,17 @@
<slot name="header"></slot> <slot name="header"></slot>
</div> </div>
<div> <div>
<div class="rbox" style="width: 90%; min-height: 50vh"> <div class="rbox" style="min-height: 50vh">
<slot name="content"></slot> <slot name="content"></slot>
</div> </div>
</div> </div>
<div class="buttons"> <div class="buttons columns is-center is-centered">
<slot name="buttons"> <slot name="buttons">
<router-link :to="next"> <router-link :to="next">
<!-- "Next" button of class "bblue wide" with @/assets/ton_right.svg icon on the right --> <!-- "Next" button of class "bblue wide" with @/assets/icons/ton_right.svg icon on the right -->
<button class="b blue wide"> <button class="b blue wide">
<span>{{nexttext}}</span> <span>{{nexttext}}</span>
<img src="@/assets/ton_right.svg" alt="Next"/> <img src="@/assets/icons/ton_right.svg" alt="Next"/>
</button> </button>
</router-link> </router-link>
</slot> </slot>
@ -51,8 +51,19 @@ export default {
} }
.buttons { .buttons {
display: flex;
justify-content: center; justify-content: center;
margin: 1rem 0; margin: 1rem 0;
width: 100%;
display: flex;
/* Center the buttons */
align-items: center;
place-items: center;
/* Center the buttons */
}
.rbox {
min-width: 90%;
margin: auto 3%;
} }
</style> </style>

14
src/views/IKnow.vue

@ -1,7 +1,7 @@
<template> <template>
<WhiteLayout next=""> <WhiteLayout next="">
<template v-slot:header> <template v-slot:header>
<img src="@/assets/i-know.svg" style="height: 100%" alt="TON DNS"/> <img src="@/assets/headers/i-know.svg" style="max-height: 100%; max-width: 90%" alt="TON DNS"/>
</template> </template>
<template v-slot:content> <template v-slot:content>
<div class="columns-3" style="display: flex; columns: 3; justify-content: center; align-items: center"> <div class="columns-3" style="display: flex; columns: 3; justify-content: center; align-items: center">
@ -15,13 +15,13 @@
<template v-slot:buttons> <template v-slot:buttons>
<router-link to="tondns"> <router-link to="tondns">
<button class="b blue wide"> <button class="b blue wide">
<img src="@/assets/ton_top.svg" alt="Next"/> <img src="@/assets/icons/ton_top.svg" alt="Next"/>
<span>Yes</span> <span>Yes</span>
</button> </button>
</router-link> </router-link>
<router-link to="tondns"> <router-link to="tondns">
<button class="b blue wide"> <button class="b blue wide">
<img src="@/assets/ton_bottom.svg" alt="Next"/> <img src="@/assets/icons/ton_bottom.svg" alt="Next"/>
<span>No</span> <span>No</span>
</button> </button>
</router-link> </router-link>
@ -39,5 +39,11 @@ export default {
</script> </script>
<style scoped> <style scoped>
/* narrow buttons on mobile */
@media only screen and (max-width: 800px) {
.b.blue.wide {
max-width: 35vw;
min-width: revert;
}
}
</style> </style>

8
src/views/Landing.vue

@ -5,7 +5,7 @@
<main> <main>
<!-- @/assets/logo_single.png centered horizontally and slightly above center vertically --> <!-- @/assets/logo_single.png centered horizontally and slightly above center vertically -->
<img class="logo" src="@/assets/logo_landing.png" alt="Agorata" /> <img class="logo" src="@/assets/logo_landing.png" alt="Agorata" />
<p style="font-size: 1.8rem">Helping you <b style="font-weight: bold">be</b> the new internet</p> <p style="font-size: 1.8rem; padding: 2rem;">Helping you <b style="font-weight: bold">be</b> the new internet</p>
<div id="do-you-know"> <div id="do-you-know">
<p>Do you know what TON Web is?</p><br/> <p>Do you know what TON Web is?</p><br/>
@ -33,13 +33,14 @@ main {
color: white; color: white;
font-family: 'Raleway',serif; font-family: 'Raleway',serif;
font-size: 1.5rem; font-size: 1.5rem;
text-align: center;
} }
.logo { .logo {
display: block; display: block;
margin: 0 auto 2rem; margin: 0 auto 2rem;
max-width: 25%; width: 25%;
max-height: 25%; min-width: 13rem;
} }
#do-you-know { #do-you-know {
@ -49,6 +50,7 @@ main {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 2rem;
} }
</style> </style>

2
src/views/TonDns.vue

@ -18,7 +18,7 @@
<router-link to="/get_tondon"> <router-link to="/get_tondon">
<button class="b blue wide"> <button class="b blue wide">
<span>Omg, can I get one?</span> <span>Omg, can I get one?</span>
<img src="@/assets/ton_right.svg" alt="Next"/> <img src="@/assets/icons/ton_right.svg" alt="Next"/>
</button> </button>
</router-link> </router-link>
</template> </template>

20
src/views/TonWeb.vue

@ -4,15 +4,15 @@
<img src="@/assets/tonweb.svg" style="height: 100%" alt="TON Web"/> <img src="@/assets/tonweb.svg" style="height: 100%" alt="TON Web"/>
</template> </template>
<template v-slot:content> <template v-slot:content>
<div class="columns-2" style="display: flex; columns: 2"> <div class="columns-2">
<div> <div>
<img src="@/assets/tonweb_duck.png" alt="TON Web" style="width: 20rem"/> <img src="@/assets/images/tonweb_duck.png" alt="TON Web" style="width: 20rem"/>
</div> </div>
<div> <div>
<p>TON Sites are just websites hosted on the TON Network.<br/> <p>TON Sites are just websites hosted on the TON Network.<br/>
After some configuration, you can visit a website like foundation.ton.</p> After some configuration, you can visit a website like foundation.ton.</p>
<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 class="wbox_ul">
<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 get the user's IP don't get the user's IP
</li> </li>
@ -38,5 +38,19 @@ export default {
</script> </script>
<style scoped> <style scoped>
.wbox_ul {
text-align: left;
padding: 0 5rem;
font-size: 1.4rem;
}
/* less padding on mobile */
@media (max-width: 800px) {
.wbox_ul {
padding: 0 1rem;
}
}
img {
max-width: 80vw;
}
</style> </style>
Loading…
Cancel
Save