Browse Source

DarkLayout + Domain Bar

vue
Lev 2 years ago
parent
commit
5d53d8bb4d
  1. 36
      .idea/workspace.xml
  2. 15
      package-lock.json
  3. 1
      package.json
  4. BIN
      src/assets/images/usage.png
  5. 44
      src/components/DarkLayout.vue
  6. 127
      src/components/DomainBar.vue
  7. 5
      src/router/index.ts
  8. 18
      src/views/Get.vue
  9. 22
      src/views/TonDns.vue

36
.idea/workspace.xml

@ -2,30 +2,15 @@
<project version="4"> <project version="4">
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="Adaptivity + more assets"> <list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="Adaptivity + more assets">
<change afterPath="$PROJECT_DIR$/src/assets/images/anton_ton.png" afterDir="false" /> <change afterPath="$PROJECT_DIR$/src/assets/images/usage.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/assets/images/my_name_is.png" afterDir="false" /> <change afterPath="$PROJECT_DIR$/src/components/DarkLayout.vue" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/assets/images/personal_page.png" afterDir="false" /> <change afterPath="$PROJECT_DIR$/src/components/DomainBar.vue" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/assets/images/send_by_name.png" afterDir="false" /> <change afterPath="$PROJECT_DIR$/src/views/Get.vue" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/assets/images/tg_nft.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/assets/images/tondns_nft.png" 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-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$/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/router/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/router/index.ts" 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/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/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/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" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -91,7 +76,7 @@
<workItem from="1670839496719" duration="10862000" /> <workItem from="1670839496719" duration="10862000" />
<workItem from="1670927344373" duration="29000" /> <workItem from="1670927344373" duration="29000" />
<workItem from="1670927391338" duration="2277000" /> <workItem from="1670927391338" duration="2277000" />
<workItem from="1671024025708" duration="1539000" /> <workItem from="1671024025708" duration="5450000" />
</task> </task>
<task id="LOCAL-00001" summary="Wrote the landing"> <task id="LOCAL-00001" summary="Wrote the landing">
<created>1670844191163</created> <created>1670844191163</created>
@ -107,7 +92,14 @@
<option name="project" value="LOCAL" /> <option name="project" value="LOCAL" />
<updated>1670847897937</updated> <updated>1670847897937</updated>
</task> </task>
<option name="localTasksCounter" value="3" /> <task id="LOCAL-00003" summary="Adaptivity + more assets">
<created>1671026238851</created>
<option name="number" value="00003" />
<option name="presentableId" value="LOCAL-00003" />
<option name="project" value="LOCAL" />
<updated>1671026238851</updated>
</task>
<option name="localTasksCounter" value="4" />
<servers /> <servers />
</component> </component>
<component name="TypeScriptGeneratedFilesManager"> <component name="TypeScriptGeneratedFilesManager">

15
package-lock.json generated

@ -11,6 +11,7 @@
"bulma": "^0.9.4", "bulma": "^0.9.4",
"sass": "^1.56.2", "sass": "^1.56.2",
"vue": "^3.2.45", "vue": "^3.2.45",
"vue-contenteditable": "^4.1.0",
"vue-router": "^4.1.6" "vue-router": "^4.1.6"
}, },
"devDependencies": { "devDependencies": {
@ -2557,6 +2558,14 @@
"@vue/shared": "3.2.45" "@vue/shared": "3.2.45"
} }
}, },
"node_modules/vue-contenteditable": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/vue-contenteditable/-/vue-contenteditable-4.1.0.tgz",
"integrity": "sha512-PCQD8JNYt6lbocYvquHB0p3SWd0QGtHNydfbO4Ma3wOMiUTwjJiCyBv3vJRf7WvTkuLObn66GqEYUurfBLfrRQ==",
"peerDependencies": {
"vue": "^3.2.25"
}
},
"node_modules/vue-router": { "node_modules/vue-router": {
"version": "4.1.6", "version": "4.1.6",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.6.tgz", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.6.tgz",
@ -4309,6 +4318,12 @@
"@vue/shared": "3.2.45" "@vue/shared": "3.2.45"
} }
}, },
"vue-contenteditable": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/vue-contenteditable/-/vue-contenteditable-4.1.0.tgz",
"integrity": "sha512-PCQD8JNYt6lbocYvquHB0p3SWd0QGtHNydfbO4Ma3wOMiUTwjJiCyBv3vJRf7WvTkuLObn66GqEYUurfBLfrRQ==",
"requires": {}
},
"vue-router": { "vue-router": {
"version": "4.1.6", "version": "4.1.6",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.6.tgz", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.6.tgz",

1
package.json

@ -13,6 +13,7 @@
"bulma": "^0.9.4", "bulma": "^0.9.4",
"sass": "^1.56.2", "sass": "^1.56.2",
"vue": "^3.2.45", "vue": "^3.2.45",
"vue-contenteditable": "^4.1.0",
"vue-router": "^4.1.6" "vue-router": "^4.1.6"
}, },
"devDependencies": { "devDependencies": {

BIN
src/assets/images/usage.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 221 KiB

44
src/components/DarkLayout.vue

@ -0,0 +1,44 @@
<template>
<main style="width: 100vw; min-height: 100vh; height: 100%;" id="dark_body">
<Header/>
<div class="center">
<div class="content">
<slot></slot>
</div>
</div>
</main>
</template>
<script>
import Header from "../components/Header.vue";
export default {
name: "DarkLayout",
components: {Header}
}
</script>
<style scoped>
#dark_body {
background-color: #282e46;
}
.content {
padding: 2.5rem 32px;
text-align: center;
display: inline-block;
font-size: 1.6rem;
color: white;
min-height: 50vh;
min-width: 16rem;
margin: 0.5rem 3rem;
}
.center {
display: flex;
justify-content: center;
align-items: center;
place-items: center;
flex-direction: column;
}
</style>

127
src/components/DomainBar.vue

@ -0,0 +1,127 @@
<template>
<div class="domain-bar">
<div style="display: flex" class="prompt-cont">
<contenteditable :contenteditable="editable" tag="div" class="prompt" v-model="val" :no-html="true" @returned="search()"></contenteditable>
<div class="post-prompt">{{ postprompt }}</div>
</div>
<div class="search" v-if="has_button" @click="search()">Search</div>
</div>
</template>
<script>
import contenteditable from 'vue-contenteditable';
export default {
name: "DomainBar",
components: {contenteditable},
props: {
postprompt: {
type: String,
default: ".ton"
},
has_button: {
type: Boolean,
default: true
},
value: {
type: String,
default: "example"
},
editable: {
type: Boolean,
default: true
}
},
data() {
return {
val: this.value
}
},
methods: {
search() {
this.$emit("search", this.val);
}
},
watch: {
value: function (val) {
this.val = val;
},
val: function (val) {
this.$emit("input", val);
}
}
}
</script>
<style scoped>
.domain-bar {
border-radius: 1rem;
width: 30rem;
min-height: 5rem;
padding: 0 0.5rem;
background-color: #4e5a88;
display: flex;
justify-content: center;
align-items: center;
place-items: center;
}
/* flex container with vertical centering */
.prompt-cont {
display: flex;
justify-content: center;
align-items: center;
place-items: center;
}
/* the bar is narrower on mobile (90% of the screen) */
@media only screen and (max-width: 800px) {
.domain-bar {
width: 90vw;
/* allow multiple rows with 0.5 spacing */
flex-wrap: wrap;
}
}
.prompt {
border-radius: 0.5rem;
min-width: 40%;
height: 3rem;
background-color: #363e5e;
display: flex;
justify-content: center;
align-items: center;
place-items: center;
color: white;
font-size: 1.5rem;
font-weight: 500;
padding: 0 1rem;
outline: none;
user-select: none;
cursor: text;
margin-right: 0.4rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
/* #e36464 search button with #363e5e text */
.search {
border-radius: 0.5rem;
height: 3rem;
background-color: #e36464;
display: flex;
justify-content: center;
align-items: center;
place-items: center;
color: #363e5e;
font-size: 1.3rem;
font-weight: 500;
padding: 0 1rem;
cursor: pointer;
margin-left: 1rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
</style>

5
src/router/index.ts

@ -23,6 +23,11 @@ const router = createRouter({
path: '/tondns', path: '/tondns',
name: 'tondns', name: 'tondns',
component: () => import('../views/TonDns.vue') component: () => import('../views/TonDns.vue')
},
{
path: '/get',
name: 'get',
component: () => import('../views/Get.vue')
} }
] ]
}) })

18
src/views/Get.vue

@ -0,0 +1,18 @@
<template>
<DarkLayout>
<DomainBar/>
</DarkLayout>
</template>
<script>
import DarkLayout from "../components/DarkLayout.vue";
import DomainBar from "../components/DomainBar.vue";
export default {
name: "Get",
components: {DomainBar, DarkLayout}
}
</script>
<style scoped>
</style>

22
src/views/TonDns.vue

@ -4,18 +4,21 @@
<img src="@/assets/tondns.svg" style="height: 100%" alt="TON DNS"/> <img src="@/assets/tondns.svg" style="height: 100%" 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 style="justify-content: center; align-items: center">
<div>
</div>
<div> <div>
<p>TON domains .ton and .t.me are your names in the TON world.<br/> <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/> They can be used to host a website or to transfer money.<br/>
You can host a TON website for your personal brand.</p> You can host a TON website for your personal brand.</p>
</div> </div>
<div class="columns-3 images">
<img class="img" src="@/assets/images/usage.png" alt="Usage"/>
<img class="img" src="@/assets/images/my_name_is.png" alt="lame"/>
<img class="img" src="@/assets/images/anton_ton.png" alt="cool"/>
</div>
</div> </div>
</template> </template>
<template v-slot:buttons> <template v-slot:buttons>
<router-link to="/get_tondon"> <router-link to="/get">
<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/icons/ton_right.svg" alt="Next"/> <img src="@/assets/icons/ton_right.svg" alt="Next"/>
@ -35,5 +38,14 @@ export default {
</script> </script>
<style scoped> <style scoped>
.img {
width: 25%;
margin: 0 1rem;
}
/* Fix width and not height on mobile */
@media only screen and (max-width: 800px) {
.img {
width: 75vw;
}
}
</style> </style>
Loading…
Cancel
Save