simplified homepage

This commit is contained in:
bill bittner 2017-07-03 11:16:51 -07:00
parent 35f9551533
commit 2206a60af5
18 changed files with 119 additions and 70 deletions

View file

@ -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;

View file

@ -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%;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

View file

@ -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
View 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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View 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>

View file

@ -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>

View file

@ -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/&ltthe name of the claim&gt</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/&lt the name of the claim &gt/&lt the claim_id &gt</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/&ltthe name of the claim&gt/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>

View file

@ -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">&lt;img src="https://spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0"/&gt;</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">&lt;img src="https://spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0"/&gt;</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">&lt;img src="https://spee.ch/doitlive"/&gt;</span>
<p><a href="/doitlive">spee.ch/doitlive</a></p>
<a href="/doitlive"><img class="example-image" src="/doitlive"/></a>
<div class="example-code">&lt;img src="https://spee.ch/doitlive"/&gt;</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>

View 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>

View file

@ -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>

View file

@ -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>