FindQ, GetDomainBtn, loader (rotating square)

.idea/workspace.xml

@@ -1,13 +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="ZoneTable with ZonePricing">
+    <list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="/get/:zone/:domain">
+      <change afterPath="$PROJECT_DIR$/src/components/GetDomainBtn.vue" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/views/FindQ.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/DomainBar.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/DomainBar.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/ZoneTable.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ZoneTable.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/TonButton.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/TonButton.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/ZonePricing.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ZonePricing.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/views/Get.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Get.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/TonDns.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/TonDns.vue" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -75,7 +77,7 @@
       <workItem from="1670927344373" duration="29000" />
       <workItem from="1670927391338" duration="2277000" />
       <workItem from="1671024025708" duration="19806000" />
-      <workItem from="1671204365793" duration="4251000" />
+      <workItem from="1671204365793" duration="8038000" />
     </task>
     <task id="LOCAL-00001" summary="Wrote the landing">
       <created>1670844191163</created>
@@ -119,7 +121,14 @@
       <option name="project" value="LOCAL" />
       <updated>1671116726928</updated>
     </task>
-    <option name="localTasksCounter" value="7" />
+    <task id="LOCAL-00007" summary="/get/:zone/:domain">
+      <created>1671214435706</created>
+      <option name="number" value="00007" />
+      <option name="presentableId" value="LOCAL-00007" />
+      <option name="project" value="LOCAL" />
+      <updated>1671214435706</updated>
+    </task>
+    <option name="localTasksCounter" value="8" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -143,6 +152,7 @@
     <MESSAGE value="DarkLayout + Domain Bar" />
     <MESSAGE value="Started writing ZoneTable + improvements to the search bar" />
     <MESSAGE value="ZoneTable with ZonePricing" />
-    <option name="LAST_COMMIT_MESSAGE" value="ZoneTable with ZonePricing" />
+    <MESSAGE value="/get/:zone/:domain" />
+    <option name="LAST_COMMIT_MESSAGE" value="/get/:zone/:domain" />
   </component>
 </project>

src/components/DomainBar.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="domain-bar">
     <div style="display: flex" class="prompt-cont">
-      <contenteditable :contenteditable="editable" tag="div" class="prompt" :no-nl="true" v-model="val" :no-html="true" @returned="search()"></contenteditable>
+      <contenteditable :contenteditable="editable" tag="div" class="prompt" :no-nl="true" v-model="val" :no-html="true" @returned="search()" spellcheck="false"></contenteditable>
       <div class="post-prompt">{{ zone }}</div>
     </div>
     <div class="search" v-if="has_button" @click="search()">Search</div>

src/components/GetDomainBtn.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="get-domain">
+    Get<br/>
+    <p class="domain">{{domain}}</p>
+    for<br/>
+    <span class="price">
+      {{price}}
+      <img src="@/assets/icons/ton_bottom.svg" class="ton_img" alt="TON"/>
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "GetDomainBtn",
+  props: {
+    domain: {
+      type: String,
+      required: true
+    },
+    price: {
+      type: Number,
+      required: true
+    },
+  }
+}
+</script>
+
+<style scoped>
+/* #0088cc rounded box with cursor: pointer */
+.get-domain {
+  border-radius: 1rem;
+  background-color: #0088cc;
+  color: white;
+  font-size: 1.5rem;
+  text-align: center;
+  padding: 2rem;
+  cursor: pointer;
+}
+
+@media only screen and (max-width: 800px) {
+  .get-domain {
+    width: 90vw;
+    /* allow multiple rows with 0.5 spacing */
+    flex-wrap: wrap;
+
+  }
+}
+
+.domain {
+  font-family: 'Inconsolata', monospace;
+  font-weight: bold;
+  font-size: 2.5rem;
+}
+
+@media only screen and (max-width: 800px) {
+  .domain {
+    font-size: 1.7rem;
+  }
+}
+
+.price {
+  font-size: 3rem;
+  font-weight: bold;
+  font-family: 'Inconsolata', monospace;
+}
+
+.price > img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.3rem;
+}
+</style>

src/components/RotateSquare2.vue

@@ -0,0 +1,88 @@
+<template>
+    <div v-bind:style="styles" class="spinner spinner--rotate-square-2"></div>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      default: '40px'
+    },
+    background: {
+      default: '#0000'
+    }
+  },
+  computed: {
+    styles () {
+      return {
+        width: this.size,
+        height: this.size,
+        backgroundColor: this.background
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .spinner {
+    position: relative;
+    * {
+        line-height: 0;
+        box-sizing: border-box;
+    }
+    &:before {
+      content: '';
+      width: 100%;
+      height: 20%;
+      min-width: 5px;
+      background: #000;
+      opacity: 0.1;
+      position: absolute;
+      bottom: 0%;
+      left: 0;
+      border-radius: 50%;
+      animation: rotate-square-2-shadow .5s linear infinite;
+    }
+    &:after {
+      content: '';
+      width: 100%;
+      height: 100%;
+      background: #834c6e;
+      animation: rotate-square-2-animate .5s linear infinite;
+      position: absolute;
+      bottom:40%;
+      left: 0;
+      border-radius: 3px;
+    }
+  }
+
+  @keyframes rotate-square-2-animate {
+    17% {
+      border-bottom-right-radius: 3px;
+    }
+    25% {
+      transform: translateY(20%) rotate(22.5deg);
+    }
+    50% {
+      transform: translateY(40%) scale(1, .9) rotate(45deg);
+      border-bottom-right-radius: 50%;
+    }
+    75% {
+      transform: translateY(20%) rotate(67.5deg);
+    }
+    100% {
+      transform: translateY(0) rotate(90deg);
+    }
+  }
+
+
+  @keyframes rotate-square-2-shadow {
+    0%, 100% {
+      transform: scale(1, 1);
+    }
+    50% {
+      transform: scale(1.2, 1);
+    }
+  }
+</style>

src/components/TonButton.vue

@@ -1,7 +1,7 @@
 <template>
   <button class="b darkish">
     <span><slot></slot></span>
-    <img src="@/assets/icons/ton_bottom.svg" alt="Next"/>
+    <img src="@/assets/icons/ton_bottom.svg" alt="TON"/>
   </button>
 </template>
 

src/components/ZonePricing.vue

@@ -13,12 +13,12 @@
       <tr>
         <th></th>
         <th v-if="zone.canAuction()">
-          <Popper content="Buy on auction" placement="left" hover="true" arrow="true">
+          <Popper content="Buy on auction" placement="left" :hover="true" :arrow="true">
             <img src="@/assets/icons/buy.svg" class="buy_img" alt="Buy on auction"/>
           </Popper>
         </th>
         <th v-if="zone.canBuy()">
-          <Popper content="Buy instantly" placement="right" hover="true" arrow="true">
+          <Popper content="Buy instantly" placement="right" :hover="true" :arrow="true">
             <img src="@/assets/icons/instant_buy.svg" class="buy_img" alt="Instant Buy"/>
           </Popper>
         </th>
@@ -45,7 +45,7 @@
       </tr>
       </tbody>
     </table>
-    <router-link :to="{name: 'Get', params: {domain: 'example' + zone.zone}}">
+    <router-link :to="{name: 'Get', params: {domain_init: 'example', zone: zone.zone}}">
       <div v-if="has_get" class="get_b">
         Get
       </div>

src/router/index.ts

@@ -48,6 +48,12 @@ const router = createRouter({
             path: '/find',
             name: 'Find',
             component: () => import('../views/Find.vue')
+        },
+        {
+            path: '/find/:query',
+            name: 'FindQ',
+            component: () => import('../views/FindQ.vue'),
+            props: true
         }
     ]
 })

src/views/FindQ.vue

@@ -0,0 +1,46 @@
+<template>
+  <DarkLayout>
+    <div class="center">
+      <DomainBar zone="" :value="query_" @search="search()" @input_d="query_ = $event"/>
+      <RotateSquare2 v-if="results === null"/>
+      <div v-for="result in results" :key="result">
+
+      </div>
+    </div>
+  </DarkLayout>
+</template>
+
+<script>
+import DomainBar from "../components/DomainBar.vue";
+import DarkLayout from "../components/DarkLayout.vue";
+import RotateSquare2 from "../components/RotateSquare2.vue";
+
+export default {
+  name: "FindQ",
+  props: {
+    query: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      query_: this.query
+    }
+  },
+  components: {RotateSquare2, DarkLayout, DomainBar},
+  methods: {
+    search() {
+      this.$router.push({name: 'FindQ', params: {query: this.query_}});
+    }
+  },
+  computed: {
+    results() {
+      return [];
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Get.vue

@@ -2,12 +2,14 @@
   <DarkLayout>
     <router-link :to="{name: 'Find'}"><!-- todo: "All zones" button here --></router-link>
     <DomainBar :zone="zone" :value="domain" @search="search()" @input_d="handle_input($event)"/>
+    <GetDomain :domain="domain + zone" :price="5"/>
   </DarkLayout>
 </template>
 
 <script>
 import DarkLayout from "../components/DarkLayout.vue";
 import DomainBar from "../components/DomainBar.vue";
+import GetDomain from "../components/GetDomainBtn.vue";
 export default {
   name: "Get",
   props: {
@@ -18,7 +20,7 @@ export default {
       type: String,
     }
   },
-  components: {DomainBar, DarkLayout},
+  components: {GetDomain, DomainBar, DarkLayout},
   data() {
     return {
       domain: this.domain_init