simplified homepage
This commit is contained in:
parent
35f9551533
commit
2206a60af5
18 changed files with 119 additions and 70 deletions
|
@ -84,13 +84,12 @@ h4 {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.code {
|
||||
font-family: monospace;
|
||||
color: darkgrey;
|
||||
word-wrap: break-word;
|
||||
/* other */
|
||||
|
||||
input {
|
||||
padding: 0.3em;
|
||||
}
|
||||
|
||||
/* other */
|
||||
table {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
|
|
|
@ -12,17 +12,44 @@
|
|||
margin: 2px 5px 2px 5px;
|
||||
}
|
||||
|
||||
/* learn more */
|
||||
.learn-more {
|
||||
text-align: center;
|
||||
margin-top: 2px;
|
||||
padding-top: 2px;
|
||||
border-top: 1px lightgrey solid;
|
||||
}
|
||||
|
||||
/* examples */
|
||||
.example {
|
||||
display: inline-block;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.example-image, .example-code {
|
||||
float: left;
|
||||
margin: 5px 15px 5px 0px;
|
||||
}
|
||||
|
||||
.example-image {
|
||||
float: left;
|
||||
width: 20%;
|
||||
margin: 5px 15px 5px 0px;
|
||||
}
|
||||
|
||||
.example-code {
|
||||
padding: 2em;
|
||||
width: 60%;
|
||||
background-color: lightgrey;
|
||||
font-family: monospace;
|
||||
color: #666;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* contribute */
|
||||
#github-logo {
|
||||
float: right;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
/* all claims */
|
||||
|
@ -40,6 +67,12 @@
|
|||
margin: 5px 30px 5px 0px;
|
||||
}
|
||||
|
||||
.all-claims-details {
|
||||
word-wrap: break-word;
|
||||
list-style: none;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
/* publish */
|
||||
#drop-zone {
|
||||
border: 1px dashed lightgrey;
|
||||
|
@ -72,3 +105,22 @@ canvas {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (max-width: 750px) {
|
||||
|
||||
.all-claims-img {
|
||||
width:30%;
|
||||
}
|
||||
|
||||
.all-claims-details {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 475px) {
|
||||
|
||||
.all-claims-img {
|
||||
width:50%;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
BIN
public/assets/img/GitHub-Mark-32px.png
Normal file
BIN
public/assets/img/GitHub-Mark-32px.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.7 KiB |
BIN
public/assets/img/GitHub-Mark-64px.png
Normal file
BIN
public/assets/img/GitHub-Mark-64px.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.6 KiB |
|
@ -12,6 +12,12 @@ function sendAnalyticsAndLog (ip, originalUrl) {
|
|||
}
|
||||
|
||||
module.exports = (app) => {
|
||||
// route to show 'about' page for spee.ch
|
||||
app.get('/about', ({ ip, originalUrl }, res) => {
|
||||
sendAnalyticsAndLog(ip, originalUrl);
|
||||
// get and render the content
|
||||
res.status(200).render('about');
|
||||
});
|
||||
// route to show the meme-fodder meme maker
|
||||
app.get('/meme-fodder/play', ({ ip, originalUrl }, res) => {
|
||||
sendAnalyticsAndLog(ip, originalUrl);
|
||||
|
|
16
views/about.handlebars
Normal file
16
views/about.handlebars
Normal file
|
@ -0,0 +1,16 @@
|
|||
<div class="wrapper">
|
||||
{{> topBar}}
|
||||
<div class="main">
|
||||
<h2>About Spee.ch</h2>
|
||||
<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>
|
||||
<p>Spee.ch is an image hosting service, but with the added benefit that it stores your images on a decentralized network of computers -- the LBRY network. This means that your images are stored in multiple locations without a single point of failure.</p>
|
||||
{{> examples}}
|
||||
{{> documentation}}
|
||||
{{> bugs}}
|
||||
</div>
|
||||
<div class="sidebar">
|
||||
{{> contribute}}
|
||||
</div>
|
||||
{{> footer}}
|
||||
</div>
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
<div class="wrapper">
|
||||
<div class="top-bar">
|
||||
{{> topBar}}
|
||||
</div>
|
||||
{{> topBar}}
|
||||
<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>
|
||||
|
@ -21,7 +19,5 @@
|
|||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="footer">
|
||||
{{> footer}}
|
||||
</div>
|
||||
{{> footer}}
|
||||
</div>
|
|
@ -1,7 +1,5 @@
|
|||
<div class="wrapper">
|
||||
<div class="top-bar">
|
||||
{{> topBar}}
|
||||
</div>
|
||||
{{> topBar}}
|
||||
<div>
|
||||
<h3>404: Not Found</h3>
|
||||
<p>That page does not exist. Return <a href="/">home</a>.</p>
|
||||
|
|
|
@ -1,19 +1,8 @@
|
|||
<div class="wrapper">
|
||||
<div class="top-bar">
|
||||
{{> topBar}}
|
||||
</div>
|
||||
<div class="main">
|
||||
{{> topBar}}
|
||||
<div class="full">
|
||||
{{> publish}}
|
||||
{{> examples}}
|
||||
{{> documentation}}
|
||||
|
||||
</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}}
|
||||
{{> learnMore}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -1,18 +1,10 @@
|
|||
<div class="wrapper">
|
||||
<div class="top-bar">
|
||||
{{> topBar}}
|
||||
</div>
|
||||
<div class="main">
|
||||
{{> topBar}}
|
||||
<div class="full">
|
||||
{{> 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>
|
||||
{{> footer}}
|
||||
</div>
|
||||
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
|
|
|
@ -1,7 +1,5 @@
|
|||
<div class="wrapper">
|
||||
<div class="top-bar">
|
||||
{{> topBar}}
|
||||
</div>
|
||||
{{> topBar}}
|
||||
<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>
|
||||
|
|
4
views/partials/bugs.handlebars
Normal file
4
views/partials/bugs.handlebars
Normal file
|
@ -0,0 +1,4 @@
|
|||
<div>
|
||||
<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,8 +1,8 @@
|
|||
<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>
|
||||
<h2>Contribute
|
||||
<a href="https://github.com/lbryio/spee.ch" target="_blank"><img id="github-logo" class="img-right" src="/assets/img/GitHub-Mark-64px.png"/></a>
|
||||
</h2>
|
||||
<p><strong>Spee.ch is an open source project. We would love for you to contribute to the existing site, or fork it and make your own!</strong></p>
|
||||
<p>If you have an idea for your own spee.ch-like site on top of LBRY, fork our <a href="https://github.com/lbryio/spee.ch">github repo</a> and go to town!</p>
|
||||
<p>If you want to improve spee.ch, join our <a href="https://lbry.slack.com">slack channel</a> or solve one of our <a href="https://github.com/lbryio/spee.ch/issues">github issues</a>.</p>
|
||||
</div>
|
||||
|
|
|
@ -3,22 +3,21 @@
|
|||
<a class="toggle-link" id="documentation-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-slaveelementid="documentation-detail">[open]</a>
|
||||
</h2>
|
||||
<div id="documentation-detail" hidden="true">
|
||||
<strong>spee.ch/</strong>
|
||||
<code>https://spee.ch/</code>
|
||||
<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>
|
||||
<code>https://spee.ch/:name</code>
|
||||
<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>
|
||||
<code>https://spee.ch/:name/:claim_id</code>
|
||||
<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>
|
||||
<code>https://spee.ch/:name/all</code>
|
||||
<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>
|
||||
|
|
|
@ -1,27 +1,21 @@
|
|||
<div class="panel">
|
||||
<h2>What is spee.ch?
|
||||
<h2>Examples
|
||||
<a class="toggle-link" id="examples-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-slaveelementid="examples-detail">[open]</a>
|
||||
</h2>
|
||||
<div id="examples-detail" hidden="true">
|
||||
<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>
|
||||
<a href="/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0"><img class="example-image" src="/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0"/></a>
|
||||
<div class="example-code"><img src="https://spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0"/></div>
|
||||
</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>
|
||||
<a href="/doitlive"><img class="example-image" src="/doitlive"/></a>
|
||||
<div class="example-code"><img src="https://spee.ch/doitlive"/></div>
|
||||
</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>
|
||||
<a href="/doitlive/all">spee.ch/doitlive/all</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
4
views/partials/learnMore.handlebars
Normal file
4
views/partials/learnMore.handlebars
Normal file
|
@ -0,0 +1,4 @@
|
|||
<div class="learn-more stop-float">
|
||||
<p><i>Spee.ch is an open-source project. We would love it if you <a href="https://github.com/lbryio/spee.ch/issues">contributed</a> to the existing site, or <a href="https://github.com/lbryio/spee.ch">forked it</a> and made your own!</i></p>
|
||||
<p><a href="/about">Learn more about spee.ch</a></p>
|
||||
</div>
|
|
@ -12,6 +12,7 @@
|
|||
<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" placeholder="Your claim name" class="form-control">
|
||||
<p>
|
||||
<label for="publish-license">License:</label>
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
<div>
|
||||
<div class="top-bar">
|
||||
<img id="logo" src="/speech/900227fe5c778eb2a6424d923af806c669ea3a3c"/>
|
||||
<h1 id="title"><a href="/">Spee.ch</a></h1>
|
||||
|
||||
</div>
|
Loading…
Reference in a new issue