removed bootstrap for basic html

This commit is contained in:
bill bittner 2017-06-22 21:43:53 -07:00
parent a5256c27f5
commit c63ce03029
18 changed files with 342 additions and 276 deletions

View 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 lightgray solid;
background-color: lightcyan;
padding: 6px;
}
h4 {
padding: 3px;
}
.code {
font-family: monospace;
color: darkgrey;
word-wrap: break-word;
}
/* other */
.stop-float {
clear: both;
}

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

View file

@ -1,27 +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;
}
.row {
margin: 10px 0px 10px 0px;
}
.all-claims-img {
height: 200px;
}

View file

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

View file

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

View file

@ -1,17 +1,20 @@
<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 src="/socket.io/socket.io.js"></script>

View file

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

View file

@ -1,11 +1,18 @@
<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 src="/socket.io/socket.io.js"></script>

View file

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

View file

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

View file

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

View file

@ -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">&lt;img src="https://spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0"/&gt;</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">&lt;img src="https://spee.ch/doitlive"/&gt;</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>

View file

@ -0,0 +1,3 @@
<footer class="stop-float">
<p>thanks for visiting spee.ch</p>
</footer>

View file

@ -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>
</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">
<textarea id="direct-link-holder" hidden="true">No URL yet</textarea>
<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>

View file

@ -1,23 +1,12 @@
<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>
<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">
{{#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 images published to /meme-fodder. Click one to choose it as your canvas.</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 class="row">
{{#each claims}}
<img class="meme-fodder-img" src="/{{this.name}}/{{this.claim_id}}" onclick="newCanvas(this)"/>
{{/each}}
</div>
</div>

View file

@ -1,40 +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 class="col-md-6">
<textarea id="direct-link-holder" hidden="true">No URL yet</textarea>
<div id="publish-active-area">
<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>
</div>
</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>

View file

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

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