commit
198ecfaa7c
20 changed files with 380 additions and 313 deletions
81
public/assets/css/allStyle.css
Normal file
81
public/assets/css/allStyle.css
Normal file
|
@ -0,0 +1,81 @@
|
|||
/* Containters */
|
||||
.wrapper {
|
||||
margin-left: 20%;
|
||||
width:60%;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
width: 100%;
|
||||
margin-bottom: 2px;
|
||||
padding-bottom: 2px;
|
||||
border-bottom: 1px lightgrey solid;
|
||||
}
|
||||
|
||||
.main {
|
||||
float: left;
|
||||
width: 75%;
|
||||
margin-right: 1%;
|
||||
padding-right: 1%;
|
||||
border-right: 1px lightgrey solid;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
float: left;
|
||||
width: 22%;
|
||||
}
|
||||
|
||||
/* panels */
|
||||
|
||||
.panel {
|
||||
overflow: auto;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.col-left, .col-right {
|
||||
overflow: auto;
|
||||
margin: 0px;
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
.col-left {
|
||||
padding: 5px 10px 5px 0px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.col-right {
|
||||
padding: 5px 0px 5px 10px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* text */
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
h1 {
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: medium;
|
||||
border-top: 1px #999 solid;
|
||||
background-color: lightgray;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.code {
|
||||
font-family: monospace;
|
||||
color: darkgrey;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* other */
|
||||
|
||||
.stop-float {
|
||||
clear: both;
|
||||
}
|
74
public/assets/css/componentStyle.css
Normal file
74
public/assets/css/componentStyle.css
Normal file
|
@ -0,0 +1,74 @@
|
|||
|
||||
/* top bar */
|
||||
#logo, #title {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#logo {
|
||||
height: 1.5em;
|
||||
}
|
||||
|
||||
#title {
|
||||
margin: 2px 5px 2px 5px;
|
||||
}
|
||||
|
||||
/* examples */
|
||||
.example {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.example-image {
|
||||
float: left;
|
||||
width: 20%;
|
||||
margin: 5px 15px 5px 0px;
|
||||
}
|
||||
|
||||
/* meme */
|
||||
canvas {
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* publish */
|
||||
#drop-zone {
|
||||
border: 1px dashed lightgrey;
|
||||
padding: 1em;
|
||||
height: 6em;
|
||||
}
|
||||
|
||||
#image-preview {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* all claims */
|
||||
|
||||
.all-claims-img {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
/* footer */
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
margin-bottom: 2px;
|
||||
padding-bottom: 2px;
|
||||
border-bottom: 1px lightgrey solid;
|
||||
margin-top: 2px;
|
||||
padding-top: 2px;
|
||||
border-top: 1px lightgrey solid;
|
||||
text-align: center;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
/* meme fodder */
|
||||
|
||||
.meme-fodder-img {
|
||||
width: 21%;
|
||||
padding: 0px;
|
||||
margin: 2% 4% 2% 0px;
|
||||
float: left;
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
canvas {
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#drop-zone {
|
||||
border: 1px dashed lightgrey;
|
||||
padding: 1em;
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#image-preview {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#tweet-meme-button {
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin: 10px 0px 10px 0px;
|
||||
}
|
||||
|
||||
.all-claims-img {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -137,22 +137,27 @@ socket.on('publish-complete', function(msg){
|
|||
var publishResults;
|
||||
var directUrl = '/' + msg.name + '/' + msg.result.claim_id;
|
||||
// build new publish area
|
||||
publishResults = '<p><span id="tweet-meme-button"></span>Your publish is complete! <a target="_blank" href="' + directUrl + '">View it here!</a></p>';
|
||||
publishResults = '<p>Your publish is complete! View it here:</p>';
|
||||
publishResults += `<p><a id="text-to-copy" target="_blank" href="${directUrl}">spee.ch' + directUrl + '</a></p>`;
|
||||
publishResults += '<p><button class="copy-button">Copy to clipboard</button></p>';
|
||||
publishResults += '<p><a target="_blank" href="https://explorer.lbry.io/#!/transaction/' + msg.result.txid + '">View the transaction details</a></p>';
|
||||
publishResults += '<a href="/"><button>Reload</button></a></p>';
|
||||
// update publish area
|
||||
document.getElementById('publish-active-area').innerHTML = publishResults;
|
||||
// add a tweet button
|
||||
twttr.widgets
|
||||
.createShareButton(
|
||||
document.getElementById('tweet-meme-button'),
|
||||
{
|
||||
text: 'Check out my image, hosted for free on the distributed awesomeness that is the LBRY blockchain!',
|
||||
url: 'https://spee.ch/' + directUrl,
|
||||
hashtags: 'LBRY',
|
||||
via: 'lbryio'
|
||||
})
|
||||
.then( function( el ) {
|
||||
console.log('Tweet button added.');
|
||||
});
|
||||
// update the link holder
|
||||
document.getElementById('direct-link-holder').innerHTML = 'https://spee.ch' + directUrl;
|
||||
// enable copy-to-clipboard
|
||||
var copyBtn = document.querySelector('.copy-button');
|
||||
copyBtn.addEventListener('click', function(event) {
|
||||
// select the text
|
||||
var text = document.getElementById('direct-link-holder');
|
||||
text.select();
|
||||
try {
|
||||
var successful = document.execCommand('copy');
|
||||
var msg = successful ? 'successful' : 'unsuccessful';
|
||||
console.log('Copying text command was ' + msg);
|
||||
} catch (err) {
|
||||
alert('Oops, unable to copy');
|
||||
}
|
||||
});
|
||||
});
|
|
@ -116,22 +116,27 @@ socket.on('publish-complete', function(msg){
|
|||
var publishResults;
|
||||
var directUrl = '/' + msg.name + '/' + msg.result.claim_id;
|
||||
// build new publish area
|
||||
publishResults = '<p><span id="tweet-meme-button"></span>Your publish is complete! <a target="_blank" href="' + directUrl + '">View it here!</a></p>';
|
||||
publishResults = '<p>Your publish is complete! View it here:</p>';
|
||||
publishResults += '<p><a target="_blank" href="' + directUrl + '">spee.ch' + directUrl + '</a></p>';
|
||||
publishResults += '<p><button class="copy-button">Copy to clipboard</button></p>';
|
||||
publishResults += '<p><a target="_blank" href="https://explorer.lbry.io/#!/transaction/' + msg.result.txid + '">View the transaction details</a></p>';
|
||||
publishResults += '<a href="/"><button>Reload</button></a></p>';
|
||||
publishResults += '<a href="/meme-fodder/play"><button>Reload</button></a></p>';
|
||||
// update publish area
|
||||
document.getElementById('publish-active-area').innerHTML = publishResults;
|
||||
// add a tweet button
|
||||
twttr.widgets
|
||||
.createShareButton(
|
||||
document.getElementById('tweet-meme-button'),
|
||||
{
|
||||
text: 'Check out my meme creation on the LBRY blockchain!',
|
||||
url: 'https://spee.ch/' + directUrl,
|
||||
hashtags: 'LBRYMemeFodder',
|
||||
via: 'lbryio'
|
||||
})
|
||||
.then( function( el ) {
|
||||
console.log('Tweet button added.');
|
||||
});
|
||||
// update the link holder
|
||||
document.getElementById('direct-link-holder').innerHTML = 'https://spee.ch' + directUrl;
|
||||
// enable copy-to-clipboard
|
||||
var copyBtn = document.querySelector('.copy-button');
|
||||
copyBtn.addEventListener('click', function(event) {
|
||||
// select the text
|
||||
var text = document.getElementById('direct-link-holder');
|
||||
text.select();
|
||||
try {
|
||||
var successful = document.execCommand('copy');
|
||||
var msg = successful ? 'successful' : 'unsuccessful';
|
||||
console.log('Copying text command was ' + msg);
|
||||
} catch (err) {
|
||||
alert('Oops, unable to copy');
|
||||
}
|
||||
});
|
||||
});
|
|
@ -1,20 +1,20 @@
|
|||
<div class="container">
|
||||
{{> topBar}}
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h3>All Claims</h3>
|
||||
<p>These are all the free, public assets at that claim. You can publish more at <a href="/">spee.ch</a>.</p>
|
||||
{{#each claims}}
|
||||
<img class="all-claims-img" src="/{{this.name}}/{{this.claim_id}}" />
|
||||
<div class="card card-block">
|
||||
<p>claim_id: {{this.claim_id}}</p>
|
||||
<p>direct link <a href="/{{this.name}}/{{this.claim_id}}">here</a></p>
|
||||
<p>author: {{this.value.stream.metadata.author}}</p>
|
||||
<p>description: {{this.value.stream.metadata.description}}</p>
|
||||
<p>license: {{this.value.stream.metadata.license}}</p>
|
||||
</div>
|
||||
<hr>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="top-bar">
|
||||
{{> topBar}}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3>All Claims</h3>
|
||||
<p>These are all the free, public assets at that claim. You can publish more at <a href="/">spee.ch</a>.</p>
|
||||
{{#each claims}}
|
||||
<img class="all-claims-img" src="/{{this.name}}/{{this.claim_id}}" />
|
||||
<div class="card card-block">
|
||||
<p>claim_id: {{this.claim_id}}</p>
|
||||
<p>direct link <a href="/{{this.name}}/{{this.claim_id}}">here</a></p>
|
||||
<p>author: {{this.value.stream.metadata.author}}</p>
|
||||
<p>description: {{this.value.stream.metadata.description}}</p>
|
||||
<p>license: {{this.value.stream.metadata.license}}</p>
|
||||
</div>
|
||||
<hr>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
|
@ -1,9 +1,9 @@
|
|||
<div class="container">
|
||||
{{> topBar}}
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h3>404: Not Found</h3>
|
||||
<p>That page does not exist. Return <a href="/">home</a>.</p>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="top-bar">
|
||||
{{> topBar}}
|
||||
</div>
|
||||
<div>
|
||||
<h3>404: Not Found</h3>
|
||||
<p>That page does not exist. Return <a href="/">home</a>.</p>
|
||||
</div>
|
||||
</div>
|
|
@ -1,21 +1,22 @@
|
|||
<div class="container">
|
||||
{{> topBar}}
|
||||
<div class="row">
|
||||
<div class="wrapper">
|
||||
<div class="top-bar">
|
||||
{{> topBar}}
|
||||
</div>
|
||||
<div class="main">
|
||||
{{> publish}}
|
||||
</div>
|
||||
<div class="row">
|
||||
{{> examples}}
|
||||
</div>
|
||||
<div class="row">
|
||||
{{> documentation}}
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sidebar">
|
||||
<p>Spee.ch is a single-serving site that reads and publishes images to and from the <a class="white-text" href="https://lbry.io">LBRY</a> blockchain.</p>
|
||||
{{> contribute}}
|
||||
</div>
|
||||
<div class="footer">
|
||||
{{> footer}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script src="/siofu/client.js"></script>
|
||||
|
||||
|
|
|
@ -5,25 +5,11 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Spee.ch</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/vendors/MDB/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link href="/vendors/MDB/css/mdb.min.css" rel="stylesheet">
|
||||
<!-- custom styles -->
|
||||
<link rel="stylesheet" href="/assets/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="/assets/css/allStyle.css" type="text/css">
|
||||
<link rel="stylesheet" href="/assets/css/componentStyle.css" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
{{{ body }}}
|
||||
<!-- JQuery -->
|
||||
<script type="text/javascript" src="/vendors/MDB/js/jquery-3.1.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="/vendors/MDB/js/tether.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="/vendors/MDB/js/bootstrap.min.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="/vendors/MDB/js/mdb.min.js"></script>
|
||||
<!-- google analytics -->
|
||||
{{ googleAnalytics }}
|
||||
</body>
|
||||
|
|
|
@ -1,16 +1,20 @@
|
|||
<div class="container">
|
||||
{{> topBar}}
|
||||
<div class="row">
|
||||
{{> memeFodderMaker}}
|
||||
<div class="wrapper">
|
||||
<div class="top-bar">
|
||||
{{> topBar}}
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="main">
|
||||
{{> memeFodderMaker}}
|
||||
{{> memeFodderResults}}
|
||||
</div>
|
||||
<div class="sidebar">
|
||||
<p>Spee.ch is a single-serving site that reads and publishes images to and from the <a class="white-text" href="https://lbry.io">LBRY</a> blockchain.</p>
|
||||
{{> contribute}}
|
||||
</div>
|
||||
<div class="footer">
|
||||
{{> footer}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script src="/siofu/client.js"></script>
|
||||
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
<div class="container">
|
||||
{{> topBar}}
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h3>No Claims</h3>
|
||||
<p>There are no free, public images at that claim. You should publish one at <a href="/">spee.ch</a>.</p>
|
||||
<p>NOTE: it is possible your claim was published, but it is still being processed by the blockchain</p>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="top-bar">
|
||||
{{> topBar}}
|
||||
</div>
|
||||
<div>
|
||||
<h3>No Claims</h3>
|
||||
<p>There are no free, public images at that claim. You should publish one at <a href="/">spee.ch</a>.</p>
|
||||
<p>NOTE: it is possible your claim was published, but it is still being processed by the blockchain</p>
|
||||
</div>
|
||||
</div>
|
|
@ -1,14 +1,8 @@
|
|||
<div class="col-md-12">
|
||||
<div class="card card-block">
|
||||
<div class="row">
|
||||
<div class="col-md-6" id="contribute">
|
||||
<h2>Contribute</h2>
|
||||
<p>If you would like to help make Spee.ch amazing, join our <a href="https://lbry.slack.com">slack</a> channel!</p>
|
||||
</div>
|
||||
<div class="col-md-6" id="bugs">
|
||||
<h2>Bugs</h2>
|
||||
<p>Spee.ch is young and under continuous development so it will have bugs. Please leave an issue on our <a href="https://github.com/lbryio/spee.ch">github</a> if you experience a problem or have suggestions.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="" id="contribute">
|
||||
<h2>Contribute</h2>
|
||||
<p>If you would like to help make Spee.ch amazing, join our <a href="https://lbry.slack.com">slack</a> channel!</p>
|
||||
</div>
|
||||
<div class="" id="bugs">
|
||||
<h2>Bugs</h2>
|
||||
<p>Spee.ch is young and under continuous development so it will have bugs. Please leave an issue on our <a href="https://github.com/lbryio/spee.ch">github</a> if you experience a problem or have suggestions.</p>
|
||||
</div>
|
||||
|
|
|
@ -1,26 +1,23 @@
|
|||
<div class="col-md-12">
|
||||
<div class="card" id="documentation">
|
||||
<div class="card-title card-block grey lighten-1 white-text">
|
||||
<h2>Documentation</h2>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<strong>spee.ch/</strong>
|
||||
<li><a href="/">https://spee.ch</a></li>
|
||||
<li>Learn about Spee.ch and publish your own media</li>
|
||||
<br>
|
||||
<strong>spee.ch/<the name of the claim></strong>
|
||||
<li >Serves the newest file with the largest bid at a claim</li>
|
||||
<li >E.g. <a href="/doitlive">spee.ch/doitlive</a>.</li>
|
||||
<br>
|
||||
<strong>spee.ch/< the name of the claim >/< the claim_id ></strong>
|
||||
<li >Serves a specific file at a claim</li>
|
||||
<li >E.g. <a href="/doitlive/c496c8c55ed79816fec39e36a78645aa4458edb5">spee.ch/doitlive/c496c8c55ed79816fec39e36a78645aa4458edb5</a></li>
|
||||
<br>
|
||||
<strong>spee.ch/<the name of the claim>/all</strong>
|
||||
<li >Displays a list of all files at a claim</li>
|
||||
<li >E.g. <a href="/doitlive/all">spee.ch/doitlive/all</a></li>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<h2>Documentation</h2>
|
||||
<strong>spee.ch/</strong>
|
||||
<ul>
|
||||
<li><a href="/">https://spee.ch</a></li>
|
||||
<li>Learn about Spee.ch and publish your own media</li>
|
||||
</ul>
|
||||
<strong>spee.ch/<the name of the claim></strong>
|
||||
<ul>
|
||||
<li >Serves the newest file with the largest bid at a claim</li>
|
||||
<li >E.g. <a href="/doitlive">spee.ch/doitlive</a></li>
|
||||
</ul>
|
||||
<strong>spee.ch/< the name of the claim >/< the claim_id ></strong>
|
||||
<ul>
|
||||
<li >Serves a specific file at a claim</li>
|
||||
<li >E.g. <a href="/doitlive/c496c8c55ed79816fec39e36a78645aa4458edb5">spee.ch/doitlive/c496c8c55ed79816fec39e36a78645aa4458edb5</a></li>
|
||||
</ul>
|
||||
<strong>spee.ch/<the name of the claim>/all</strong>
|
||||
<ul>
|
||||
<li >Displays a list of all files at a claim</li>
|
||||
<li >E.g. <a href="/doitlive/all">spee.ch/doitlive/all</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
@ -1,26 +1,23 @@
|
|||
<div class="col-md-12">
|
||||
<div class="card" id="examples">
|
||||
<div class="card-title card-block grey lighten-1 white-text">
|
||||
<h2>What Is Spee.ch?</h2>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6" id="contribute">
|
||||
<h2>Spee.ch is for sharing</h2>
|
||||
<p>Spee.ch is a platform by which you can publish images to the Lbry blockchain. Just upload an image, title it, and send it off into the lbry ecosystem.</p>
|
||||
<p>Spee.ch is also a platform to serve you those images. It's like have a personal chef that will serve you a meal anywhere in the world. All you have to do is ask for it, by using "spee.ch/" + the name of a claim.</p>
|
||||
<p>If you want a specific image, just ask for it with the claim_id by using "spee.ch/" + the name of the claim + "/" + the claim id.</p>
|
||||
</div>
|
||||
<div class="col-md-6" id="bugs">
|
||||
<h2>Examples</h2>
|
||||
<h5>Use spee.ch to serve the top asset at a lbry claim:</h5>
|
||||
<a href="/coconuts">spee.ch/coconuts</a><br>
|
||||
<a href="/wood">spee.ch/wood</a><br>
|
||||
<a href="/doitlive">spee.ch/doitlive</a><br>
|
||||
<h5>Use spee.ch to show you all the assets at a lbry claim:</h5>
|
||||
<a href="/doitlive/all">spee.ch/doitlive/all</a>
|
||||
<h5>Use spee.ch to serve you a specific asset by claim id:</h5>
|
||||
<a href="/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0">spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0</a>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<h2>What is spee.ch? </h2>
|
||||
<p>Spee.ch is an image hosting service based on the LBRY blockchain. It reads and publishes free, public images.</p>
|
||||
<div class="example">
|
||||
<h4>Use spee.ch to embed a specific image:</h4>
|
||||
|
||||
<img class="example-image" src="/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0"/>
|
||||
<span class="code"><img src="https://spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0"/></span>
|
||||
<p><a href="/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0">spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0</a></p>
|
||||
</div>
|
||||
<div class="example">
|
||||
<h4>Use spee.ch to serve a top LBRY claim:</h4>
|
||||
<img class="example-image" src="/doitlive"/>
|
||||
<span class="code"><img src="https://spee.ch/doitlive"/></span>
|
||||
<p><a href="/doitlive">spee.ch/doitlive</a></p>
|
||||
</div>
|
||||
<div class="example">
|
||||
<h4>Use spee.ch to view all the assets at a LBRY claim:</h4>
|
||||
<div class="example">
|
||||
<a href="/doitlive/all">spee.ch/doitlive/all</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
3
views/partials/footer.handlebars
Normal file
3
views/partials/footer.handlebars
Normal file
|
@ -0,0 +1,3 @@
|
|||
<footer class="stop-float">
|
||||
<p>thanks for visiting spee.ch</p>
|
||||
</footer>
|
|
@ -1,50 +1,31 @@
|
|||
<div class="col-md-12">
|
||||
<div class="card" id="publish">
|
||||
<div class="card-title card-block grey lighten-1 white-text">
|
||||
<h2>#LBRYMemeFodder</h2>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h3>Congratulations, you found the /meme-fodder game</h3>
|
||||
<p>Create a meme based on the current <i>lbry://meme-fodder</i> claims using the tool below. Got a masterpiece? <a href="https://twitter.com/hashtag/LBRYMemeFodder" target="_blank">Share it with the community</a> and see what they think!</p>
|
||||
<p>Spee.ch/meme-fodder/play uses the free, public images at the claim <a href="lbry://meme-fodder">lbry://meme-fodder</a>. Want to put a different image on the chopping block? Go publish it!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<canvas id="meme-canvas">
|
||||
If you can see this, the meme generator is not supported by your browser.
|
||||
</canvas>
|
||||
<img id="start-image" src="/meme-fodder" alt="a picture to make your meme with"/>
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
<div id="publish-active-area">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<label for="top-text">Meme:</label>
|
||||
<input id="top-text" type="text" value="Hello" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<input id="bottom-text" type="text" value="world!" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<label for="meme-name">Claim Name:</label>
|
||||
<input id="file-name-input" type="text" value="My-Claim-Name" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<button onclick="startPublish()">Save and Publish</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" id="publish">
|
||||
<h2>#LBRYMemeFodder</h2>
|
||||
<div class="col-md-12">
|
||||
<h3>Congratulations, you found the /meme-fodder game!</h3>
|
||||
<p>Create a meme based on the current <i>lbry://meme-fodder</i> claims using the tool below.</p>
|
||||
</div>
|
||||
<div class="col-left">
|
||||
<canvas id="meme-canvas">
|
||||
If you can see this, the meme generator is not supported by your browser.
|
||||
</canvas>
|
||||
<img id="start-image" src="/meme-fodder" alt="a picture to make your meme with"/>
|
||||
</div>
|
||||
<div class="col-right">
|
||||
<textarea id="direct-link-holder" hidden="true">No URL yet</textarea>
|
||||
<div id="publish-active-area">
|
||||
<p>
|
||||
<label for="top-text">Meme:</label><br/>
|
||||
<input id="top-text" type="text" value="Hello" /><br/>
|
||||
<input id="bottom-text" type="text" value="world!" /><br/>
|
||||
</p>
|
||||
<p>
|
||||
<label for="meme-name">Claim Name:</label></br>
|
||||
<input id="file-name-input" type="text" value="My-Claim-Name" />
|
||||
</p>
|
||||
<p>
|
||||
<button onclick="startPublish()">Save and Publish</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="stop-float">Got a masterpiece? <a href="https://twitter.com/hashtag/LBRYMemeFodder" target="_blank">Share it with the community</a> and see what they think!</p>
|
||||
</div>
|
|
@ -1,22 +1,11 @@
|
|||
<div class="col-md-12">
|
||||
<div class="card" id="publish">
|
||||
<div class="card-title card-block grey lighten-1 white-text">
|
||||
<h2>Recent Meme Fodder</h2>
|
||||
</div>
|
||||
<div class="card-block" id="publish-active-area">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<p>Below are the images published to /meme-fodder. Click one to choose it as your canvas.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
{{#each claims}}
|
||||
<div class="col-md-3">
|
||||
<img class="all-claims-img" src="/{{this.name}}/{{this.claim_id}}" onclick="newCanvas(this)"/>
|
||||
</div>
|
||||
<hr>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stop-float" id="publish">
|
||||
<h2>Recent Meme Fodder</h2>
|
||||
<div class="row">
|
||||
<p>Below are the free, public images published to <a href="lbry://meme-fodder">lbry://meme-fodder</a>. Want to put a different image on the chopping block? Go publish it!</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
{{#each claims}}
|
||||
<img class="meme-fodder-img" src="/{{this.name}}/{{this.claim_id}}" onclick="newCanvas(this)"/>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
|
@ -1,39 +1,33 @@
|
|||
<div class="col-md-12">
|
||||
<div class="card" id="publish">
|
||||
<div class="card-title card-block grey lighten-1 white-text">
|
||||
<h2>Publish Your Own</h2>
|
||||
<div class="panel">
|
||||
<h2>Publish</h2>
|
||||
<div class="col-left">
|
||||
<div id="drop-zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
|
||||
<p>Drag and drop your file here, or choose your file below.</p>
|
||||
<input type="file" id="siofu_input" name="file" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div id="drop-zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
|
||||
<p>Drag and drop your file here, or choose your file below.</p>
|
||||
<input type="file" id="siofu_input" name="file" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
|
||||
</div>
|
||||
<img id="image-preview" src="" height="200" alt="Image preview..."/>
|
||||
</div>
|
||||
<div id="publish-active-area" class="col-md-6">
|
||||
<form>
|
||||
<div class="md-form">
|
||||
<input type="text" id="publish-name" value="Name" class="form-control">
|
||||
</div>
|
||||
<fieldset class="form-group">
|
||||
License:
|
||||
<select type="text" id="publish-license" name="license" value="license">
|
||||
<option value="Public Domain">Public Domain</option>
|
||||
<option value="Creative Commons">Creative Commons</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<input type="checkbox" id="publish-nsfw">
|
||||
<label for="publish-nsfw">NSFW</label>
|
||||
</fieldset>
|
||||
<p><i>By clicking 'Publish' I attest that I have read and agree to the <a href="https://lbry.io/termsofservice" target="_blank">LBRY terms of service</a>.</i></p>
|
||||
<button id="publish-submit">Publish</button>
|
||||
<button id="publish-reset">Reset</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<img id="image-preview" src="" height="200" alt="Image preview..."/>
|
||||
</div>
|
||||
<div class="col-right">
|
||||
<textarea id="direct-link-holder" hidden="true">No URL yet</textarea>
|
||||
<div id="publish-active-area">
|
||||
<input type="text" id="publish-name" value="Name" class="form-control">
|
||||
<p>
|
||||
<label for="publish-license">License:</label>
|
||||
<br/>
|
||||
<select type="text" id="publish-license" name="license" value="license">
|
||||
<option value="Public Domain">Public Domain</option>
|
||||
<option value="Creative Commons">Creative Commons</option>
|
||||
</select>
|
||||
</p>
|
||||
<p>
|
||||
<input type="checkbox" id="publish-nsfw">
|
||||
<label for="publish-nsfw">NSFW</label>
|
||||
</p>
|
||||
<p>
|
||||
<button id="publish-submit">Publish</button>
|
||||
<a href="/"><button id="publish-reset">Reset</button></a>
|
||||
</p>
|
||||
<p><i>By clicking 'Publish' I attest that I have read and agree to the <a href="https://lbry.io/termsofservice" target="_blank">LBRY terms of service</a>.</i></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,21 +1,4 @@
|
|||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card card-block grey white-text">
|
||||
<div class="card-title">
|
||||
<div class="row">
|
||||
<div class="col-md-2">
|
||||
<img src="/speech/900227fe5c778eb2a6424d923af806c669ea3a3c"/>
|
||||
</div>
|
||||
<div class="col-md-10 align-self-center">
|
||||
<h1><a class="white-text" href="/">Spee.ch</a></h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<p>Spee.ch is a single-serving site that reads and publishes images to and from the <a class="white-text" href="https://lbry.io">LBRY</a> blockchain.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img id="logo" src="/speech/900227fe5c778eb2a6424d923af806c669ea3a3c"/>
|
||||
<h1 id="title"><a href="/">Spee.ch</a></h1>
|
||||
</div>
|
5
views/partials/whatIsSpeech.handlebars
Normal file
5
views/partials/whatIsSpeech.handlebars
Normal file
|
@ -0,0 +1,5 @@
|
|||
<h2>What Is Spee.ch?</h2>
|
||||
<h3>Spee.ch is for sharing</h3>
|
||||
<p>Spee.ch is a platform by which you can publish images to the Lbry blockchain. Just upload an image, title it, and send it off into the lbry ecosystem.</p>
|
||||
<p>Spee.ch is also a platform to serve you those images. It's like have a personal chef that will serve you a meal anywhere in the world. All you have to do is ask for it, by using "spee.ch/" + the name of a claim.</p>
|
||||
<p>If you want a specific image, just ask for it with the claim_id by using "spee.ch/" + the name of the claim + "/" + the claim id.</p>
|
Loading…
Add table
Reference in a new issue