Merge branch 'hook-rebuild', Closes #39
This commit is contained in:
Kristian Polso
commit
c85d769da3
6 changed files with 299 additions and 248 deletions
|
|
@ -1,44 +1,40 @@
|
||||||
<template>
|
<template>
|
||||||
<v-container fluid grid-list-md text-xs-center id="hook">
|
<div id="hook">
|
||||||
<v-layout row wrap id="hook-navigation">
|
<div id="hook-navigation">
|
||||||
<v-flex xs4>
|
<div class="step">
|
||||||
<a href="#" v-on:click="activeStep = 1" v-bind:class="{active: (activeStep==1)}">
|
<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
|
Resolve a claim
|
||||||
</a>
|
</a>
|
||||||
</v-flex>
|
</div>
|
||||||
<v-flex xs4>
|
<div class="step">
|
||||||
<a href="#" v-on:click="activeStep = 2" v-bind:class="{active: (activeStep==2)}">
|
<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
|
Publish content
|
||||||
</a>
|
</a>
|
||||||
</v-flex>
|
</div>
|
||||||
<v-flex xs4>
|
<div class="step">
|
||||||
<a href="#" v-on:click="activeStep = 3" v-bind:class="{active: (activeStep==3)}">
|
<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
|
Support with LBC
|
||||||
</a>
|
</a>
|
||||||
</v-flex>
|
</div>
|
||||||
</v-layout>
|
</div>
|
||||||
<Step1 v-if="activeStep == 1"></Step1>
|
<Step1 v-if="activeStep == 1"></Step1>
|
||||||
<Step2 v-if="activeStep == 2"></Step2>
|
<Step2 v-if="activeStep == 2"></Step2>
|
||||||
<Step3 v-if="activeStep == 3"></Step3>
|
<Step3 v-if="activeStep == 3"></Step3>
|
||||||
<v-dialog v-model="uploadDialog" hide-overlay persistent width="30rem">
|
<div class="modal" v-model="uploadDialog" v-if="uploadDialog != false">
|
||||||
<v-card>
|
|
||||||
<template v-if="confirmed">
|
<template v-if="confirmed">
|
||||||
<v-card-title class="headline">Your image has been published!</v-card-title>
|
<h3>Your image has been published!</h3>
|
||||||
<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>
|
<p><a v-bind:href="'https://explorer.lbry.io/tx/' + txhash" target="_blank">Check out your content on the LBRY blockchain explorer</a></p>
|
||||||
<v-card-actions>
|
<a href="#" class="__button-black" v-on:click="uploadDialog = false">Dismiss this dialog</a>
|
||||||
<v-btn v-on:click="uploadDialog = false" flat>Dismiss this dialog</v-btn>
|
|
||||||
</v-card-actions>
|
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<v-card-title class="headline"><v-progress-circular indeterminate color="primary"></v-progress-circular> Waiting for confirmations...</v-card-title>
|
<h3><div class="loader small"></div> Waiting for confirmations...</h3>
|
||||||
<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>
|
<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>
|
</template>
|
||||||
</v-card>
|
</div>
|
||||||
</v-dialog>
|
</div>
|
||||||
</v-container>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -81,7 +77,7 @@ export default {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
name: 'Hook'
|
name: 'Hook'
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
@ -98,33 +94,96 @@ export default {
|
||||||
#hook {
|
#hook {
|
||||||
background: url(https://lbry.io/img/youtube/hero@2x.jpg) no-repeat center center;
|
background: url(https://lbry.io/img/youtube/hero@2x.jpg) no-repeat center center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
color: $text-color;
|
text-align: center;
|
||||||
.display-2,
|
h1,
|
||||||
.subheading {
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
p {
|
||||||
color: white;
|
color: white;
|
||||||
text-shadow: 0px 0px 1rem rgba(0,0,0,0.5);
|
text-shadow: 0px 0px 1rem rgba(0,0,0,0.5);
|
||||||
a {
|
a {
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
input[type='text'] {
|
||||||
|
background: white;
|
||||||
|
padding: 0.5rem 0.5rem;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
.flex {
|
.flex {
|
||||||
margin-bottom: 2rem;
|
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;
|
||||||
|
&.small {
|
||||||
|
border: 4px solid #f3f3f3; /* Light grey */
|
||||||
|
border-top: 4px solid #3498db; /* Blue */
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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%;
|
||||||
|
&: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 {
|
#hook-navigation {
|
||||||
margin-bottom: 1.5rem;
|
.step {
|
||||||
|
width: 30%;
|
||||||
|
float: left;
|
||||||
|
margin: 0 1.5%;
|
||||||
|
background: black;
|
||||||
|
padding: 0.5rem 0;
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
color: white;
|
||||||
color: $text-color;
|
|
||||||
}
|
|
||||||
.active {
|
|
||||||
font-weight: bold;
|
|
||||||
.btn {
|
|
||||||
background: $primary-color !important;
|
|
||||||
color: white !important;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
0% { transform: rotate(0deg); }
|
||||||
|
100% { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,82 +1,60 @@
|
||||||
<template>
|
<template>
|
||||||
<v-container fluid id="step1-page">
|
<div id="step1-page">
|
||||||
<v-layout row wrap>
|
<div class="xs12">
|
||||||
<v-flex xs12>
|
<h1>Learn the LBRY protocol by examples</h1>
|
||||||
<h1 class="display-2">Learn the LBRY protocol by examples</h1>
|
<p>Let's start by getting the associated metadata for <a href="#">a claim</a>.</p>
|
||||||
<p class="subheading">Let's start by getting the associated metadata for <a href="#">a claim</a>.</p>
|
</div>
|
||||||
</v-flex>
|
<div class="xs12 sm10">
|
||||||
<v-flex xs12 sm10>
|
lbry://<input type="text" v-model="address" />
|
||||||
<v-text-field v-model="address" solo dark prefix="lbry://"></v-text-field>
|
</div>
|
||||||
</v-flex>
|
<div class="xs12 sm2">
|
||||||
<v-flex xs12 sm2>
|
<a href="#" class="__button-black" v-on:click="fetchMetadata">Execute</a>
|
||||||
<v-btn large v-on:click="fetchMetadata" class="mt-0">Execute</v-btn>
|
</div>
|
||||||
</v-flex>
|
<div class="xs12" v-if="exampleCode != ''">
|
||||||
<v-flex xs12 v-if="exampleCode != ''">
|
|
||||||
<pre v-highlightjs="exampleCode"><code class="bash"></code></pre>
|
<pre v-highlightjs="exampleCode"><code class="bash"></code></pre>
|
||||||
</v-flex>
|
</div>
|
||||||
<v-flex xs12 v-if="isLoading">
|
<div class="xs12" v-if="isLoading">
|
||||||
<v-progress-circular indeterminate color="white"></v-progress-circular>
|
<div class="loader"></div>
|
||||||
</v-flex>
|
</div>
|
||||||
<v-flex xs12 v-if="jsonData">
|
<div class="xs12" v-if="jsonData">
|
||||||
<p class="subheading">Success! Here is the response for <strong>lbry://{{ address }}</strong>:</p>
|
<p>Success! Here is the response for <strong>lbry://{{ address }}</strong>:</p>
|
||||||
<pre v-highlightjs="jsonData" class="json-example"><code class="json"></code></pre>
|
<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>
|
<a href="#" class="__button-black" v-on:click="goTo(2)">Go to next step</a>
|
||||||
</v-flex>
|
</div>
|
||||||
<template v-if="!isLoading && !jsonData">
|
<template v-if="!isLoading && !jsonData">
|
||||||
<v-flex xs12>
|
<div class="xs12">
|
||||||
<p class="subheading">... or select a live example from below</p>
|
<p>... or select a live example from below</p>
|
||||||
</v-flex>
|
</div>
|
||||||
<v-flex xs12 sm3>
|
<div class="card">
|
||||||
<v-card hover>
|
<img src="https://spee.ch/0654f2e2322ccfefa02a956d252df9ac7611d8b0/placeholder-itsadisaster.jpeg" v-on:click="chooseClaim('itsadisaster')">
|
||||||
<v-card-media src="https://spee.ch/0654f2e2322ccfefa02a956d252df9ac7611d8b0/placeholder-itsadisaster.jpeg" height="200px" v-on:click="chooseClaim('itsadisaster')">
|
<div v-on:click="chooseClaim('itsadisaster')">
|
||||||
</v-card-media>
|
<h4>It's a Disaster</h4>
|
||||||
<v-card-title v-on:click="chooseClaim('itsadisaster')">
|
|
||||||
<div>
|
|
||||||
<h4 class="mb-0">It's a Disaster</h4>
|
|
||||||
<div class="account">Anonymous</div>
|
<div class="account">Anonymous</div>
|
||||||
</div>
|
</div>
|
||||||
</v-card-title>
|
</div>
|
||||||
</v-card>
|
<div class="card">
|
||||||
</v-flex>
|
<img src="https://spee.ch/b1bd330e048fc22dc7bf941c33dd8245eef492c1/unbubbled.png" v-on:click="chooseClaim('unbubbled1-1')">
|
||||||
<v-flex xs12 sm3>
|
<div v-on:click="chooseClaim('unbubbled1-1')">
|
||||||
<v-card hover>
|
<h4>Unbubbled with Jamie King, Ep1.1 - Bitcoin, Boom or Bust</h4>
|
||||||
<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 class="account">@Unbubbled</div>
|
||||||
</div>
|
</div>
|
||||||
</v-card-title>
|
</div>
|
||||||
</v-card>
|
<div class="card">
|
||||||
</v-flex>
|
<img src="https://spee.ch/9880947df41af880bc19724ceddd1cce957a07e2/placeholder-fortninte.jpeg" v-on:click="chooseClaim('fortnite-top-stream-moments-nickatnyte')">
|
||||||
<v-flex xs12 sm3>
|
<div v-on:click="chooseClaim('fortnite-top-stream-moments-nickatnyte')">
|
||||||
<v-card hover>
|
<h4>FORTNITE TOP STREAM MOMENTS - Nickatnyte & GamingwithMolt</h4>
|
||||||
<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 class="account">@nickatnyte</div>
|
||||||
</div>
|
</div>
|
||||||
</v-card-title>
|
</div>
|
||||||
</v-card>
|
<div class="card">
|
||||||
</v-flex>
|
<img src="https://spee.ch/a3b8258478ad88954f42f6ac3427eab380720f60/placeholder-lbrymine.png" v-on:click="chooseClaim('six')">
|
||||||
<v-flex xs12 sm3>
|
<div v-on:click="chooseClaim('six')">
|
||||||
<v-card hover>
|
<h4>LBRY Coin (LBC) GPU Miner for AMD and NVIDIA</h4>
|
||||||
<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 class="account">Anonymous</div>
|
||||||
</div>
|
</div>
|
||||||
</v-card-title>
|
</div>
|
||||||
</v-card>
|
|
||||||
</v-flex>
|
|
||||||
</template>
|
</template>
|
||||||
</v-layout>
|
</div>
|
||||||
</v-container>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -112,7 +90,7 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
name: 'Step1'
|
name: 'Step1'
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,18 @@
|
||||||
<template>
|
<template>
|
||||||
<v-container fluid id="step2-page">
|
<div id="step2-page">
|
||||||
<v-layout row wrap v-images-loaded="imagesLoaded">
|
<div v-images-loaded="imagesLoaded">
|
||||||
<v-flex xs12>
|
<div class="xs12">
|
||||||
<h1 class="display-2">Publish your content on the blockchain</h1>
|
<h1>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>
|
<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>
|
||||||
</v-flex>
|
</div>
|
||||||
<v-flex xs12 sm8>
|
<div class="xs12 sm8">
|
||||||
<img src="https://spee.ch/40ac6818bbac87a208722bf4467653341d460908/lbry-green.png" id="base-image">
|
<img src="https://spee.ch/40ac6818bbac87a208722bf4467653341d460908/lbry-green.png" id="base-image">
|
||||||
<canvas id="meme-canvas" width="400" height="300">
|
<canvas id="meme-canvas" width="400" height="300">
|
||||||
Sorry, canvas not supported
|
Sorry, canvas not supported
|
||||||
</canvas>
|
</canvas>
|
||||||
<v-flex xs12 sm6 class="mx-auto">
|
<div class="xs12 sm6">
|
||||||
<v-card class="pa-3">
|
<div class="image-upload-container">
|
||||||
<p class="subheading">Upload a background image</p>
|
<p>Upload a background image</p>
|
||||||
<image-uploader
|
<image-uploader
|
||||||
:quality="0.8"
|
:quality="0.8"
|
||||||
:autoRotate=true
|
:autoRotate=true
|
||||||
|
|
@ -22,29 +22,30 @@
|
||||||
@input="setImage"
|
@input="setImage"
|
||||||
@onComplete="imageUploaded"
|
@onComplete="imageUploaded"
|
||||||
></image-uploader>
|
></image-uploader>
|
||||||
</v-card>
|
</div>
|
||||||
</v-flex>
|
</div>
|
||||||
</v-flex>
|
</div>
|
||||||
<v-flex xs12 sm4>
|
<div class="xs12 sm4">
|
||||||
<v-card class="pa-3">
|
<div class="form-container">
|
||||||
<v-form ref="form" v-model="valid" lazy-validation>
|
<form>
|
||||||
<v-text-field v-model="topLine" dark solo :rules="textFieldRules" required></v-text-field>
|
<input type="text" v-model="topLine" placeholder="Top line" required />
|
||||||
<v-text-field v-model="bottomLine" dark solo :rules="textFieldRules" required></v-text-field>
|
<input type="text" v-model="bottomLine" placeholder="Bottom line" required />
|
||||||
<v-text-field v-model="title" label="Title" :rules="textFieldRules" required></v-text-field>
|
<input type="text" v-model="title" placeholder="Title" required />
|
||||||
<v-text-field v-model="description" label="Description" :rules="textFieldRules" required></v-text-field>
|
<input type="text" v-model="description" placeholder="Description" required />
|
||||||
<v-text-field v-model="author" label="Author" :rules="textFieldRules" required></v-text-field>
|
<input type="text" v-model="author" placeholder="Author" required />
|
||||||
<v-text-field v-model="language" label="Language" :rules="textFieldRules" required></v-text-field>
|
<input type="text" v-model="language" placeholder="Language" required />
|
||||||
<v-text-field v-model="license" label="License" :rules="textFieldRules" required></v-text-field>
|
<input type="text" v-model="license" placeholder="License" required />
|
||||||
<v-checkbox label="NSFW" v-model="nsfw"></v-checkbox>
|
<label><input type="checkbox" v-model="nsfw" name="nsfw" />NSFW</label>
|
||||||
<v-btn v-on:click="submit" :disabled="!valid">Submit</v-btn>
|
<input type="submit" class="__button-black" v-on:click="submit" value="Submit" />
|
||||||
</v-form>
|
</form>
|
||||||
</v-card>
|
</div>
|
||||||
</v-flex>
|
</div>
|
||||||
<v-flex xs12 v-if="isLoading">
|
<div class="clear"></div>
|
||||||
<v-progress-circular indeterminate color="white"></v-progress-circular>
|
<div class="xs12" v-if="isLoading">
|
||||||
</v-flex>
|
<div class="loader"></div>
|
||||||
</v-layout>
|
</div>
|
||||||
</v-container>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -134,14 +135,20 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
name: 'Step2'
|
name: 'Step2'
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
||||||
@import '../scss/variables';
|
|
||||||
|
|
||||||
#step2-page {
|
#step2-page {
|
||||||
|
.sm8 {
|
||||||
|
float: left;
|
||||||
|
width: 66%;
|
||||||
|
}
|
||||||
|
.sm4 {
|
||||||
|
float: right;
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
#meme-canvas {
|
#meme-canvas {
|
||||||
width: 400px;
|
width: 400px;
|
||||||
height: 300px;
|
height: 300px;
|
||||||
|
|
@ -151,8 +158,35 @@ export default {
|
||||||
top: -10000px;
|
top: -10000px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
.input-group--text-field {
|
.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;
|
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 {
|
#fileInput {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
|
|
@ -1,90 +1,65 @@
|
||||||
<template>
|
<template>
|
||||||
<v-container fluid id="step3-page">
|
<div id="step3-page">
|
||||||
<v-layout row wrap>
|
<div class="xs12">
|
||||||
<v-flex xs12>
|
<h1>Support your favorite content creators with LBRY</h1>
|
||||||
<h1 class="display-2">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 class="subheading">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/>
|
||||||
<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/>
|
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>
|
Or you can use the examples below.</p>
|
||||||
</v-flex>
|
</div>
|
||||||
<v-flex xs12 sm8>
|
<div class="xs12 sm10">
|
||||||
<v-text-field v-model="claimId" solo dark></v-text-field>
|
<input type="text" v-model="claimId" />
|
||||||
</v-flex>
|
</div>
|
||||||
<v-flex xs12 sm2>
|
<div class="xs12 sm2">
|
||||||
<v-tooltip bottom>
|
<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
|
||||||
<v-text-field v-model="amount" solo dark suffix="LBC" disabled hint="Hardcoded" slot="activator"></v-text-field>
|
</div>
|
||||||
<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>
|
<div class="xs12 sm2">
|
||||||
</v-tooltip>
|
<a href="#" class="__button-black" v-on:click="send">Execute</a>
|
||||||
</v-flex>
|
</div>
|
||||||
<v-flex xs12 sm2>
|
<div class="xs12" v-if="exampleCode != ''">
|
||||||
<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>
|
<pre v-highlightjs="exampleCode"><code class="bash"></code></pre>
|
||||||
</v-flex>
|
</div>
|
||||||
<v-flex xs12 v-if="isLoading">
|
<div class="xs12" v-if="isLoading">
|
||||||
<v-progress-circular indeterminate color="white"></v-progress-circular>
|
<div class="loader"></div>
|
||||||
</v-flex>
|
</div>
|
||||||
<v-flex xs12 v-if="jsonData">
|
<div class="xs12" v-if="jsonData">
|
||||||
<p class="subheading">Success! Here is the response:</p>
|
<p>Success! Here is the response:</p>
|
||||||
<pre v-highlightjs="jsonData" class="json-example"><code class="json"></code></pre>
|
<pre v-highlightjs="jsonData" class="json-example"><code class="json"></code></pre>
|
||||||
</v-flex>
|
</div>
|
||||||
<template v-if="!isLoading && !jsonData">
|
<template v-if="!isLoading && !jsonData">
|
||||||
<v-flex xs12>
|
<div class="xs12">
|
||||||
<p class="subheading">Click on below claims to support them!</p>
|
<p>Click on below claims to support them!</p>
|
||||||
</v-flex>
|
</div>
|
||||||
<v-flex xs12 sm3>
|
<div class="card">
|
||||||
<v-card hover>
|
<img src="https://spee.ch/0654f2e2322ccfefa02a956d252df9ac7611d8b0/placeholder-itsadisaster.jpeg" v-on:click="chooseClaim('fbdcd44a97810522d23d5f1335b8ca04be9d776c')">
|
||||||
<v-card-media src="https://spee.ch/0654f2e2322ccfefa02a956d252df9ac7611d8b0/placeholder-itsadisaster.jpeg" height="200px" v-on:click="chooseClaim('fbdcd44a97810522d23d5f1335b8ca04be9d776c')">
|
<div v-on:click="chooseClaim('fbdcd44a97810522d23d5f1335b8ca04be9d776c')">
|
||||||
</v-card-media>
|
<h4>It's a Disaster</h4>
|
||||||
<v-card-title v-on:click="chooseClaim('fbdcd44a97810522d23d5f1335b8ca04be9d776c')">
|
|
||||||
<div>
|
|
||||||
<h4 class="mb-0">It's a Disaster</h4>
|
|
||||||
<div class="account">Anonymous</div>
|
<div class="account">Anonymous</div>
|
||||||
</div>
|
</div>
|
||||||
</v-card-title>
|
</div>
|
||||||
</v-card>
|
<div class="card">
|
||||||
</v-flex>
|
<img src="https://spee.ch/b1bd330e048fc22dc7bf941c33dd8245eef492c1/unbubbled.png" v-on:click="chooseClaim('de7f7fa33e8d879b2bae7238d2bdf827a39f9301')">
|
||||||
<v-flex xs12 sm3>
|
<div v-on:click="chooseClaim('de7f7fa33e8d879b2bae7238d2bdf827a39f9301')">
|
||||||
<v-card hover>
|
<h4>Unbubbled with Jamie King, Ep1.1 - Bitcoin, Boom or Bust</h4>
|
||||||
<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 class="account">@Unbubbled</div>
|
||||||
</div>
|
</div>
|
||||||
</v-card-title>
|
</div>
|
||||||
</v-card>
|
<div class="card">
|
||||||
</v-flex>
|
<img src="https://spee.ch/9880947df41af880bc19724ceddd1cce957a07e2/placeholder-fortninte.jpeg" v-on:click="chooseClaim('5b7c7a202201033d99e1be2930d290c127c0f4fe')">
|
||||||
<v-flex xs12 sm3>
|
<div v-on:click="chooseClaim('5b7c7a202201033d99e1be2930d290c127c0f4fe')">
|
||||||
<v-card hover>
|
<h4>FORTNITE TOP STREAM MOMENTS - Nickatnyte & GamingwithMolt</h4>
|
||||||
<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 class="account">@nickatnyte</div>
|
||||||
</div>
|
</div>
|
||||||
</v-card-title>
|
</div>
|
||||||
</v-card>
|
<div class="card">
|
||||||
</v-flex>
|
<img src="https://spee.ch/a3b8258478ad88954f42f6ac3427eab380720f60/placeholder-lbrymine.png" v-on:click="chooseClaim('a1372cf5523885f5923237bfe522f02f5f054362')">
|
||||||
<v-flex xs12 sm3>
|
<div v-on:click="chooseClaim('a1372cf5523885f5923237bfe522f02f5f054362')">
|
||||||
<v-card hover>
|
<h4>LBRY Coin (LBC) GPU Miner for AMD and NVIDIA</h4>
|
||||||
<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 class="account">Anonymous</div>
|
||||||
</div>
|
</div>
|
||||||
</v-card-title>
|
</div>
|
||||||
</v-card>
|
|
||||||
</v-flex>
|
|
||||||
</template>
|
</template>
|
||||||
</v-layout>
|
</div>
|
||||||
</v-container>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -97,7 +97,7 @@ iframe {
|
||||||
|
|
||||||
img {
|
img {
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
|
max-width: 100%;
|
||||||
&::after {
|
&::after {
|
||||||
width: 100%; height: 100%;
|
width: 100%; height: 100%;
|
||||||
top: -100%; left: 0;
|
top: -100%; left: 0;
|
||||||
|
|
|
||||||
5
hook.md
Normal file
5
hook.md
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
title: Hook Demo
|
||||||
|
---
|
||||||
|
|
||||||
|
<Hook></Hook>
|
||||||
Loading…
Reference in a new issue