From 0d1f576cdb413aa9906e67df80ad0cee69dd53a8 Mon Sep 17 00:00:00 2001
From: Kristian Polso <kristian.polso@gmail.com>
Date: Wed, 9 May 2018 22:13:03 +0300
Subject: [PATCH 1/2] Start of rebuild

---
 .vuepress/components/Hook.vue  |  70 +++++++++++++----
 .vuepress/components/Step1.vue | 136 ++++++++++++++-------------------
 .vuepress/scss/init/_base.scss |   2 +-
 hook.md                        |   5 ++
 4 files changed, 117 insertions(+), 96 deletions(-)
 create mode 100644 hook.md

diff --git a/.vuepress/components/Hook.vue b/.vuepress/components/Hook.vue
index ad3380f..bdb682c 100644
--- a/.vuepress/components/Hook.vue
+++ b/.vuepress/components/Hook.vue
@@ -1,25 +1,25 @@
 <template>
-  <v-container fluid grid-list-md text-xs-center id="hook">
-    <v-layout row wrap id="hook-navigation">
-      <v-flex xs4>
+  <div id="hook">
+    <div id="hook-navigation">
+      <div class="step">
         <a href="#" v-on:click="activeStep = 1" v-bind:class="{active: (activeStep==1)}">
-          <v-btn color="grey lighten-1" fab>1</v-btn>
+          <span class="number">1</span>
           Resolve a claim
         </a>
-      </v-flex>
-      <v-flex xs4>
+      </div>
+      <div class="step">
         <a href="#" v-on:click="activeStep = 2" v-bind:class="{active: (activeStep==2)}">
-          <v-btn color="grey lighten-1" fab>2</v-btn>
+          <span class="number">2</span>
           Publish content
         </a>
-      </v-flex>
-      <v-flex xs4>
+      </div>
+      <div class="step">
         <a href="#" v-on:click="activeStep = 3" v-bind:class="{active: (activeStep==3)}">
-          <v-btn color="grey lighten-1" fab>3</v-btn>
+          <span class="number">3</span>
           Support with LBC
         </a>
-      </v-flex>
-    </v-layout>
+      </div>
+    </div>
     <Step1 v-if="activeStep == 1"></Step1>
     <Step2 v-if="activeStep == 2"></Step2>
     <Step3 v-if="activeStep == 3"></Step3>
@@ -38,7 +38,7 @@
         </template>
       </v-card>
     </v-dialog>
-  </v-container>
+  </div>
 </template>
 
 <script>
@@ -81,7 +81,7 @@ export default {
     });
   },
   name: 'Hook'
-}
+};
 </script>
 
 <style lang="scss">
@@ -99,17 +99,50 @@ export default {
   background: url(https://lbry.io/img/youtube/hero@2x.jpg) no-repeat center center;
   background-size: cover;
   color: $text-color;
-  .display-2,
-  .subheading {
+  text-align: center;
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  p {
     color: white;
     text-shadow: 0px 0px 1rem rgba(0,0,0,0.5);
     a {
       color: white;
     }
   }
+  input[type='text'] {
+    background: white;
+    padding: 0.5rem 0.5rem;
+  }
+  pre {
+    text-align: left;
+  }
   .flex {
     margin-bottom: 2rem;
   }
+  .loader {
+    border: 16px solid #f3f3f3; /* Light grey */
+    border-top: 16px solid #3498db; /* Blue */
+    border-radius: 50%;
+    width: 120px;
+    height: 120px;
+    animation: spin 2s linear infinite;
+  }
+  .card {
+    width: 20%;
+    display: inline-block;
+    vertical-align: top;
+    background: white;
+    box-shadow: 0 0 5px 5px rgba(0,0,0,0.2);
+    margin: 0 2.5%;
+    img {
+      width: 100%;
+      height: 6rem;
+      object-fit: cover;
+    }
+  }
 }
 
 #hook-navigation {
@@ -127,4 +160,9 @@ export default {
   }
 }
 
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
 </style>
diff --git a/.vuepress/components/Step1.vue b/.vuepress/components/Step1.vue
index 58da57d..9380c2e 100644
--- a/.vuepress/components/Step1.vue
+++ b/.vuepress/components/Step1.vue
@@ -1,82 +1,60 @@
 <template>
-  <v-container fluid id="step1-page">
-    <v-layout row wrap>
-      <v-flex xs12>
-        <h1 class="display-2">Learn the LBRY protocol by examples</h1>
-        <p class="subheading">Let's start by getting the associated metadata for <a href="#">a claim</a>.</p>
-      </v-flex>
-      <v-flex xs12 sm10>
-        <v-text-field v-model="address" solo dark prefix="lbry://"></v-text-field>
-      </v-flex>
-      <v-flex xs12 sm2>
-        <v-btn large v-on:click="fetchMetadata" class="mt-0">Execute</v-btn>
-      </v-flex>
-      <v-flex xs12 v-if="exampleCode != ''">
-        <pre v-highlightjs="exampleCode"><code class="bash"></code></pre>
-      </v-flex>
-      <v-flex xs12 v-if="isLoading">
-        <v-progress-circular indeterminate color="white"></v-progress-circular>
-      </v-flex>
-      <v-flex xs12 v-if="jsonData">
-        <p class="subheading">Success! Here is the response for <strong>lbry://{{ address }}</strong>:</p>
-        <pre v-highlightjs="jsonData" class="json-example"><code class="json"></code></pre>
-        <v-btn large v-on:click="goTo(2)" class="mt-3">Go to next step</v-btn>
-      </v-flex>
-      <template v-if="!isLoading && !jsonData">
-        <v-flex xs12>
-          <p class="subheading">... or select a live example from below</p>
-        </v-flex>
-        <v-flex xs12 sm3>
-          <v-card hover>
-            <v-card-media src="https://spee.ch/0654f2e2322ccfefa02a956d252df9ac7611d8b0/placeholder-itsadisaster.jpeg" height="200px" v-on:click="chooseClaim('itsadisaster')">
-            </v-card-media>
-            <v-card-title v-on:click="chooseClaim('itsadisaster')">
-              <div>
-                <h4 class="mb-0">It's a Disaster</h4>
-                <div class="account">Anonymous</div>
-              </div>
-            </v-card-title>
-          </v-card>
-        </v-flex>
-        <v-flex xs12 sm3>
-          <v-card hover>
-            <v-card-media src="https://spee.ch/b1bd330e048fc22dc7bf941c33dd8245eef492c1/unbubbled.png" height="200px" v-on:click="chooseClaim('unbubbled1-1')">
-            </v-card-media>
-            <v-card-title v-on:click="chooseClaim('unbubbled1-1')">
-              <div>
-                <h4 class="mb-0">Unbubbled with Jamie King, Ep1.1 - Bitcoin, Boom or Bust</h4>
-                <div class="account">@Unbubbled</div>
-              </div>
-            </v-card-title>
-          </v-card>
-        </v-flex>
-        <v-flex xs12 sm3>
-          <v-card hover>
-            <v-card-media src="https://spee.ch/9880947df41af880bc19724ceddd1cce957a07e2/placeholder-fortninte.jpeg" height="200px" v-on:click="chooseClaim('fortnite-top-stream-moments-nickatnyte')">
-            </v-card-media>
-            <v-card-title v-on:click="chooseClaim('fortnite-top-stream-moments-nickatnyte')">
-              <div>
-                <h4 class="mb-0">FORTNITE TOP STREAM MOMENTS - Nickatnyte & GamingwithMolt</h4>
-                <div class="account">@nickatnyte</div>
-              </div>
-            </v-card-title>
-          </v-card>
-        </v-flex>
-        <v-flex xs12 sm3>
-          <v-card hover>
-            <v-card-media src="https://spee.ch/a3b8258478ad88954f42f6ac3427eab380720f60/placeholder-lbrymine.png" height="200px" v-on:click="chooseClaim('six')">
-            </v-card-media>
-            <v-card-title v-on:click="chooseClaim('six')">
-              <div>
-                <h4 class="mb-0">LBRY Coin (LBC) GPU Miner for AMD and NVIDIA</h4>
-                <div class="account">Anonymous</div>
-              </div>
-            </v-card-title>
-          </v-card>
-        </v-flex>
-      </template>
-    </v-layout>
-  </v-container>
+  <div id="step1-page">
+    <div class="xs12">
+      <h1>Learn the LBRY protocol by examples</h1>
+      <p>Let's start by getting the associated metadata for <a href="#">a claim</a>.</p>
+    </div>
+    <div class="xs12 sm10">
+      <input type="text" v-model="address" prefix="lbry://" />
+    </div>
+    <div class="xs12 sm2">
+      <a href="#" class="__button-black" v-on:click="fetchMetadata">Execute</a>
+    </div>
+    <div class="xs12" v-if="exampleCode != ''">
+      <pre v-highlightjs="exampleCode"><code class="bash"></code></pre>
+    </div>
+    <div class="xs12" v-if="isLoading">
+      <div class="loader"></div>
+    </div>
+    <div class="xs12" v-if="jsonData">
+      <p>Success! Here is the response for <strong>lbry://{{ address }}</strong>:</p>
+      <pre v-highlightjs="jsonData" class="json-example"><code class="json"></code></pre>
+      <a href="#" class="__button-black" v-on:click="goTo(2)">Go to next step</a>
+    </div>
+    <template v-if="!isLoading && !jsonData">
+      <div class="xs12">
+        <p>... or select a live example from below</p>
+      </div>
+      <div class="card">
+        <img src="https://spee.ch/0654f2e2322ccfefa02a956d252df9ac7611d8b0/placeholder-itsadisaster.jpeg" v-on:click="chooseClaim('itsadisaster')">
+        <div v-on:click="chooseClaim('itsadisaster')">
+          <h4>It's a Disaster</h4>
+          <div class="account">Anonymous</div>
+        </div>
+      </div>
+      <div class="card">
+        <img src="https://spee.ch/b1bd330e048fc22dc7bf941c33dd8245eef492c1/unbubbled.png" v-on:click="chooseClaim('unbubbled1-1')">
+        <div v-on:click="chooseClaim('unbubbled1-1')">
+          <h4>Unbubbled with Jamie King, Ep1.1 - Bitcoin, Boom or Bust</h4>
+          <div class="account">@Unbubbled</div>
+        </div>
+      </div>
+      <div class="card">
+        <img src="https://spee.ch/9880947df41af880bc19724ceddd1cce957a07e2/placeholder-fortninte.jpeg" v-on:click="chooseClaim('fortnite-top-stream-moments-nickatnyte')">
+        <div v-on:click="chooseClaim('fortnite-top-stream-moments-nickatnyte')">
+          <h4>FORTNITE TOP STREAM MOMENTS - Nickatnyte & GamingwithMolt</h4>
+          <div class="account">@nickatnyte</div>
+        </div>
+      </div>
+      <div class="card">
+        <img src="https://spee.ch/a3b8258478ad88954f42f6ac3427eab380720f60/placeholder-lbrymine.png" v-on:click="chooseClaim('six')">
+        <div v-on:click="chooseClaim('six')">
+          <h4>LBRY Coin (LBC) GPU Miner for AMD and NVIDIA</h4>
+          <div class="account">Anonymous</div>
+        </div>
+      </div>
+    </template>
+  </div>
 </template>
 
 <script>
@@ -112,7 +90,7 @@ export default {
     }
   },
   name: 'Step1'
-}
+};
 </script>
 
 <style lang="scss">
diff --git a/.vuepress/scss/init/_base.scss b/.vuepress/scss/init/_base.scss
index 732d713..c3b3886 100644
--- a/.vuepress/scss/init/_base.scss
+++ b/.vuepress/scss/init/_base.scss
@@ -97,7 +97,7 @@ iframe {
 
 img {
   font-size: 0;
-
+  max-width: 100%;
   &::after {
     width: 100%; height: 100%;
     top: -100%; left: 0;
diff --git a/hook.md b/hook.md
new file mode 100644
index 0000000..c02b22f
--- /dev/null
+++ b/hook.md
@@ -0,0 +1,5 @@
+---
+title: Hook Demo
+---
+
+<Hook></Hook> 

From c22eb3244e663ed381a2c15574b2b58c2f365a2b Mon Sep 17 00:00:00 2001
From: Kristian Polso <kristian.polso@gmail.com>
Date: Thu, 10 May 2018 11:25:47 +0300
Subject: [PATCH 2/2] Remove Vuetify deps

---
 .vuepress/components/Hook.vue  |  73 ++++++++++------
 .vuepress/components/Step1.vue |   2 +-
 .vuepress/components/Step2.vue | 110 +++++++++++++++---------
 .vuepress/components/Step3.vue | 147 ++++++++++++++-------------------
 4 files changed, 181 insertions(+), 151 deletions(-)

diff --git a/.vuepress/components/Hook.vue b/.vuepress/components/Hook.vue
index bdb682c..b4ba101 100644
--- a/.vuepress/components/Hook.vue
+++ b/.vuepress/components/Hook.vue
@@ -23,21 +23,17 @@
     <Step1 v-if="activeStep == 1"></Step1>
     <Step2 v-if="activeStep == 2"></Step2>
     <Step3 v-if="activeStep == 3"></Step3>
-    <v-dialog v-model="uploadDialog" hide-overlay persistent width="30rem">
-      <v-card>
-        <template v-if="confirmed">
-          <v-card-title class="headline">Your image has been published!</v-card-title>
-          <v-card-text><a v-bind:href="'https://explorer.lbry.io/tx/' + txhash" target="_blank">Check out your content on the LBRY blockchain explorer</a></v-card-text>
-          <v-card-actions>
-            <v-btn v-on:click="uploadDialog = false" flat>Dismiss this dialog</v-btn>
-          </v-card-actions>
-        </template>
-        <template v-else>
-          <v-card-title class="headline"><v-progress-circular indeterminate color="primary"></v-progress-circular>&nbsp;Waiting for confirmations...</v-card-title>
-          <v-card-text>Your image was uploaded to the LBRY network but we are currently waiting for the first confirmation. This should take just a few minutes. In the mean time, go ahead and try the other steps!</v-card-text>
-        </template>
-      </v-card>
-    </v-dialog>
+    <div class="modal" v-model="uploadDialog" v-if="uploadDialog != false">
+      <template v-if="confirmed">
+        <h3>Your image has been published!</h3>
+        <p><a v-bind:href="'https://explorer.lbry.io/tx/' + txhash" target="_blank">Check out your content on the LBRY blockchain explorer</a></p>
+        <a href="#" class="__button-black" v-on:click="uploadDialog = false">Dismiss this dialog</a>
+      </template>
+      <template v-else>
+        <h3><div class="loader small"></div>&nbsp;Waiting for confirmations...</h3>
+        <p>Your image was uploaded to the LBRY network but we are currently waiting for the first confirmation. This should take just a few minutes. In the mean time, go ahead and try the other steps!</p>
+      </template>
+    </div>
   </div>
 </template>
 
@@ -98,7 +94,6 @@ export default {
 #hook {
   background: url(https://lbry.io/img/youtube/hero@2x.jpg) no-repeat center center;
   background-size: cover;
-  color: $text-color;
   text-align: center;
   h1,
   h2,
@@ -129,6 +124,12 @@ export default {
     width: 120px;
     height: 120px;
     animation: spin 2s linear infinite;
+    &.small {
+      border: 4px solid #f3f3f3; /* Light grey */
+      border-top: 4px solid #3498db; /* Blue */
+      width: 30px;
+      height: 30px;
+    }
   }
   .card {
     width: 20%;
@@ -137,25 +138,45 @@ export default {
     background: white;
     box-shadow: 0 0 5px 5px rgba(0,0,0,0.2);
     margin: 0 2.5%;
+    &:hover {
+      cursor: pointer;
+    }
     img {
       width: 100%;
       height: 6rem;
       object-fit: cover;
     }
+    h4, .account {
+      text-align: left;
+      color: black;
+      padding: 0.5rem 0.5rem;
+      text-shadow: none;
+    }
+  }
+  .modal {
+    position: fixed;
+    bottom: 0px;
+    right: 0px;
+    width: 25rem;
+    background: white;
+    text-align: left;
+    padding: 1rem;
+    h3, p, p > a {
+      color: black;
+      text-shadow: none;
+    }
   }
 }
 
 #hook-navigation {
-  margin-bottom: 1.5rem;
-  a {
-    text-decoration: none;
-    color: $text-color;
-  }
-  .active {
-    font-weight: bold;
-    .btn {
-      background: $primary-color !important;
-      color: white !important;
+  .step {
+    width: 30%;
+    float: left;
+    margin: 0 1.5%;
+    background: black;
+    padding: 0.5rem 0;
+    a {
+      color: white;
     }
   }
 }
diff --git a/.vuepress/components/Step1.vue b/.vuepress/components/Step1.vue
index 9380c2e..87ac2f7 100644
--- a/.vuepress/components/Step1.vue
+++ b/.vuepress/components/Step1.vue
@@ -5,7 +5,7 @@
       <p>Let's start by getting the associated metadata for <a href="#">a claim</a>.</p>
     </div>
     <div class="xs12 sm10">
-      <input type="text" v-model="address" prefix="lbry://" />
+      lbry://<input type="text" v-model="address" />
     </div>
     <div class="xs12 sm2">
       <a href="#" class="__button-black" v-on:click="fetchMetadata">Execute</a>
diff --git a/.vuepress/components/Step2.vue b/.vuepress/components/Step2.vue
index 8a2a27c..8108183 100644
--- a/.vuepress/components/Step2.vue
+++ b/.vuepress/components/Step2.vue
@@ -1,18 +1,18 @@
 <template>
-  <v-container fluid id="step2-page">
-    <v-layout row wrap v-images-loaded="imagesLoaded">
-      <v-flex xs12>
-        <h1 class="display-2">Publish your content on the blockchain</h1>
-        <p class="subheading">Upload an image to the blockchain and you are able to view it on the <a href='http://explorer.lbry.io' target='_blank'>LBRY Blockchain Explorer</a>.</p>
-      </v-flex>
-      <v-flex xs12 sm8>
+  <div id="step2-page">
+    <div v-images-loaded="imagesLoaded">
+      <div class="xs12">
+        <h1>Publish your content on the blockchain</h1>
+        <p>Upload an image to the blockchain and you are able to view it on the <a href='http://explorer.lbry.io' target='_blank'>LBRY Blockchain Explorer</a>.</p>
+      </div>
+      <div class="xs12 sm8">
         <img src="https://spee.ch/40ac6818bbac87a208722bf4467653341d460908/lbry-green.png" id="base-image">
         <canvas id="meme-canvas" width="400" height="300">
           Sorry, canvas not supported
         </canvas>
-        <v-flex xs12 sm6 class="mx-auto">
-          <v-card class="pa-3">
-            <p class="subheading">Upload a background image</p>
+        <div class="xs12 sm6">
+          <div class="image-upload-container">
+            <p>Upload a background image</p>
             <image-uploader
               :quality="0.8"
               :autoRotate=true
@@ -22,29 +22,30 @@
               @input="setImage"
               @onComplete="imageUploaded"
             ></image-uploader>
-          </v-card>
-        </v-flex>
-      </v-flex>
-      <v-flex xs12 sm4>
-        <v-card class="pa-3">
-          <v-form ref="form" v-model="valid" lazy-validation>
-            <v-text-field v-model="topLine" dark solo :rules="textFieldRules" required></v-text-field>
-            <v-text-field v-model="bottomLine" dark solo :rules="textFieldRules" required></v-text-field>
-            <v-text-field v-model="title" label="Title" :rules="textFieldRules" required></v-text-field>
-            <v-text-field v-model="description" label="Description" :rules="textFieldRules" required></v-text-field>
-            <v-text-field v-model="author" label="Author" :rules="textFieldRules" required></v-text-field>
-            <v-text-field v-model="language" label="Language" :rules="textFieldRules" required></v-text-field>
-            <v-text-field v-model="license" label="License" :rules="textFieldRules" required></v-text-field>
-            <v-checkbox label="NSFW" v-model="nsfw"></v-checkbox>
-            <v-btn v-on:click="submit" :disabled="!valid">Submit</v-btn>
-          </v-form>
-        </v-card>
-      </v-flex>
-      <v-flex xs12 v-if="isLoading">
-        <v-progress-circular indeterminate color="white"></v-progress-circular>
-      </v-flex>
-    </v-layout>
-  </v-container>
+          </div>
+        </div>
+      </div>
+      <div class="xs12 sm4">
+        <div class="form-container">
+          <form>
+            <input type="text" v-model="topLine" placeholder="Top line" required />
+            <input type="text" v-model="bottomLine" placeholder="Bottom line" required />
+            <input type="text" v-model="title" placeholder="Title" required />
+            <input type="text" v-model="description" placeholder="Description" required />
+            <input type="text" v-model="author" placeholder="Author" required />
+            <input type="text" v-model="language" placeholder="Language" required />
+            <input type="text" v-model="license" placeholder="License" required />
+            <label><input type="checkbox" v-model="nsfw" name="nsfw" />NSFW</label>
+            <input type="submit" class="__button-black" v-on:click="submit" value="Submit" />
+          </form>
+        </div>
+      </div>
+      <div class="clear"></div>
+      <div class="xs12" v-if="isLoading">
+        <div class="loader"></div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -134,14 +135,20 @@ export default {
     }
   },
   name: 'Step2'
-}
+};
 </script>
 
 <style lang="scss">
 
-@import '../scss/variables';
-
 #step2-page {
+  .sm8 {
+    float: left;
+    width: 66%;
+  }
+  .sm4 {
+    float: right;
+    width: 30%;
+  }
   #meme-canvas {
     width: 400px;
     height: 300px;
@@ -151,8 +158,35 @@ export default {
     top: -10000px;
     position: absolute;
   }
-  .input-group--text-field {
-    margin-bottom: 0.5rem;
+  .image-upload-container {
+    background: white;
+    width: 80%;
+    padding: 1rem;
+    margin: 1rem auto;
+    p {
+      color: black;
+      text-shadow: none;
+    }
+  }
+  .form-container {
+    input {
+      margin-bottom: 0.5rem;
+      display: block;
+      width: 80%;
+      &[type='checkbox'] {
+        margin: 0;
+        width: 1rem;
+        height: 1rem;
+        display: inline-block;
+        -moz-appearance: checkbox;
+        -webkit-appearance: checkbox;
+      }
+    }
+    label {
+      text-align: left;
+      display: block;
+      line-height: 2rem;
+    }
   }
   #fileInput {
     width: 100%;
diff --git a/.vuepress/components/Step3.vue b/.vuepress/components/Step3.vue
index dbe4750..7fe0197 100644
--- a/.vuepress/components/Step3.vue
+++ b/.vuepress/components/Step3.vue
@@ -1,90 +1,65 @@
 <template>
-  <v-container fluid id="step3-page">
-    <v-layout row wrap>
-      <v-flex xs12>
-        <h1 class="display-2">Support your favorite content creators with LBRY</h1>
-        <p class="subheading">Send LBRY coins to claim addresses and the owner will receive it in their wallet.</p>
-        <p class="subheading">To send LBC to someone, you need either their wallet address or claim ID.<br/>
-        You can get claim ID's by using resolve method in <a href="#" v-on:click.stop="goTo(1)">the first step</a><br/>
-        Or you can use the examples below.</p>
-      </v-flex>
-      <v-flex xs12 sm8>
-        <v-text-field v-model="claimId" solo dark></v-text-field>
-      </v-flex>
-      <v-flex xs12 sm2>
-        <v-tooltip bottom>
-          <v-text-field v-model="amount" solo dark suffix="LBC" disabled hint="Hardcoded" slot="activator"></v-text-field>
-          <span>You can set this value to any amount of LBC in your wallet, but for demonstration purposes we have hardcoded it to 0.01</span>
-        </v-tooltip>
-      </v-flex>
-      <v-flex xs12 sm2>
-        <v-btn large v-on:click="send" class="mt-0">Execute</v-btn>
-      </v-flex>
-      <v-flex xs12 v-if="exampleCode != ''">
-        <pre v-highlightjs="exampleCode"><code class="bash"></code></pre>
-      </v-flex>
-      <v-flex xs12 v-if="isLoading">
-        <v-progress-circular indeterminate color="white"></v-progress-circular>
-      </v-flex>
-      <v-flex xs12 v-if="jsonData">
-        <p class="subheading">Success! Here is the response:</p>
-        <pre v-highlightjs="jsonData" class="json-example"><code class="json"></code></pre>
-      </v-flex>
-      <template v-if="!isLoading && !jsonData">
-        <v-flex xs12>
-          <p class="subheading">Click on below claims to support them!</p>
-        </v-flex>
-        <v-flex xs12 sm3>
-          <v-card hover>
-            <v-card-media src="https://spee.ch/0654f2e2322ccfefa02a956d252df9ac7611d8b0/placeholder-itsadisaster.jpeg" height="200px" v-on:click="chooseClaim('fbdcd44a97810522d23d5f1335b8ca04be9d776c')">
-            </v-card-media>
-            <v-card-title v-on:click="chooseClaim('fbdcd44a97810522d23d5f1335b8ca04be9d776c')">
-              <div>
-                <h4 class="mb-0">It's a Disaster</h4>
-                <div class="account">Anonymous</div>
-              </div>
-            </v-card-title>
-          </v-card>
-        </v-flex>
-        <v-flex xs12 sm3>
-          <v-card hover>
-            <v-card-media src="https://spee.ch/b1bd330e048fc22dc7bf941c33dd8245eef492c1/unbubbled.png" height="200px" v-on:click="chooseClaim('de7f7fa33e8d879b2bae7238d2bdf827a39f9301')">
-            </v-card-media>
-            <v-card-title v-on:click="chooseClaim('de7f7fa33e8d879b2bae7238d2bdf827a39f9301')">
-              <div>
-                <h4 class="mb-0">Unbubbled with Jamie King, Ep1.1 - Bitcoin, Boom or Bust</h4>
-                <div class="account">@Unbubbled</div>
-              </div>
-            </v-card-title>
-          </v-card>
-        </v-flex>
-        <v-flex xs12 sm3>
-          <v-card hover>
-            <v-card-media src="https://spee.ch/9880947df41af880bc19724ceddd1cce957a07e2/placeholder-fortninte.jpeg" height="200px" v-on:click="chooseClaim('5b7c7a202201033d99e1be2930d290c127c0f4fe')">
-            </v-card-media>
-            <v-card-title v-on:click="chooseClaim('5b7c7a202201033d99e1be2930d290c127c0f4fe')">
-              <div>
-                <h4 class="mb-0">FORTNITE TOP STREAM MOMENTS - Nickatnyte & GamingwithMolt</h4>
-                <div class="account">@nickatnyte</div>
-              </div>
-            </v-card-title>
-          </v-card>
-        </v-flex>
-        <v-flex xs12 sm3>
-          <v-card hover>
-            <v-card-media src="https://spee.ch/a3b8258478ad88954f42f6ac3427eab380720f60/placeholder-lbrymine.png" height="200px" v-on:click="chooseClaim('a1372cf5523885f5923237bfe522f02f5f054362')">
-            </v-card-media>
-            <v-card-title v-on:click="chooseClaim('a1372cf5523885f5923237bfe522f02f5f054362')">
-              <div>
-                <h4 class="mb-0">LBRY Coin (LBC) GPU Miner for AMD and NVIDIA</h4>
-                <div class="account">Anonymous</div>
-              </div>
-            </v-card-title>
-          </v-card>
-        </v-flex>
-      </template>
-    </v-layout>
-  </v-container>
+  <div id="step3-page">
+    <div class="xs12">
+      <h1>Support your favorite content creators with LBRY</h1>
+      <p>Send LBRY coins to claim addresses and the owner will receive it in their wallet.</p>
+      <p>To send LBC to someone, you need either their wallet address or claim ID.<br/>
+      You can get claim ID's by using resolve method in <a href="#" v-on:click.stop="goTo(1)">the first step</a><br/>
+      Or you can use the examples below.</p>
+    </div>
+    <div class="xs12 sm10">
+      <input type="text" v-model="claimId" />
+    </div>
+    <div class="xs12 sm2">
+      <input type="text" v-model="amount" disabled title="You can set this value to any amount of LBC in your wallet, but for demonstration purposes we have hardcoded it to 0.01">LBC
+    </div>
+    <div class="xs12 sm2">
+      <a href="#" class="__button-black" v-on:click="send">Execute</a>
+    </div>
+    <div class="xs12" v-if="exampleCode != ''">
+      <pre v-highlightjs="exampleCode"><code class="bash"></code></pre>
+    </div>
+    <div class="xs12" v-if="isLoading">
+      <div class="loader"></div>
+    </div>
+    <div class="xs12" v-if="jsonData">
+      <p>Success! Here is the response:</p>
+      <pre v-highlightjs="jsonData" class="json-example"><code class="json"></code></pre>
+    </div>
+    <template v-if="!isLoading && !jsonData">
+      <div class="xs12">
+        <p>Click on below claims to support them!</p>
+      </div>
+      <div class="card">
+        <img src="https://spee.ch/0654f2e2322ccfefa02a956d252df9ac7611d8b0/placeholder-itsadisaster.jpeg" v-on:click="chooseClaim('fbdcd44a97810522d23d5f1335b8ca04be9d776c')">
+        <div v-on:click="chooseClaim('fbdcd44a97810522d23d5f1335b8ca04be9d776c')">
+          <h4>It's a Disaster</h4>
+          <div class="account">Anonymous</div>
+        </div>
+      </div>
+      <div class="card">
+        <img src="https://spee.ch/b1bd330e048fc22dc7bf941c33dd8245eef492c1/unbubbled.png" v-on:click="chooseClaim('de7f7fa33e8d879b2bae7238d2bdf827a39f9301')">
+        <div v-on:click="chooseClaim('de7f7fa33e8d879b2bae7238d2bdf827a39f9301')">
+          <h4>Unbubbled with Jamie King, Ep1.1 - Bitcoin, Boom or Bust</h4>
+          <div class="account">@Unbubbled</div>
+        </div>
+      </div>
+      <div class="card">
+        <img src="https://spee.ch/9880947df41af880bc19724ceddd1cce957a07e2/placeholder-fortninte.jpeg" v-on:click="chooseClaim('5b7c7a202201033d99e1be2930d290c127c0f4fe')">
+        <div v-on:click="chooseClaim('5b7c7a202201033d99e1be2930d290c127c0f4fe')">
+          <h4>FORTNITE TOP STREAM MOMENTS - Nickatnyte & GamingwithMolt</h4>
+          <div class="account">@nickatnyte</div>
+        </div>
+      </div>
+      <div class="card">
+        <img src="https://spee.ch/a3b8258478ad88954f42f6ac3427eab380720f60/placeholder-lbrymine.png" v-on:click="chooseClaim('a1372cf5523885f5923237bfe522f02f5f054362')">
+        <div v-on:click="chooseClaim('a1372cf5523885f5923237bfe522f02f5f054362')">
+          <h4>LBRY Coin (LBC) GPU Miner for AMD and NVIDIA</h4>
+          <div class="account">Anonymous</div>
+        </div>
+      </div>
+    </template>
+  </div>
 </template>
 
 <script>