forked from sam/fedifeed
improve landing page
This commit is contained in:
Drew Harwell
parent
de53c677a6
commit
5b6fc4a099
2 changed files with 94 additions and 77 deletions
|
|
@ -1,66 +1,95 @@
|
|||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="initial-scale=1">
|
||||
<title>Mastofeed - embeddable Mastodon feeds</title>
|
||||
<link rel="stylesheet" href="./stylesheet.css">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="initial-scale=1">
|
||||
<title>Mastofeed - embeddable Mastodon feeds</title>
|
||||
<link rel="stylesheet" href="./stylesheet.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<br>
|
||||
<div>
|
||||
<h1>Mastofeed</h1>
|
||||
<h4>Embedded Mastodon feeds for blogs etc.</h4>
|
||||
<a href="https://github.com/fenwick67/mastofeed" class="cta button alt">Fork on Github <img class="link-logo after" src="github-logo.svg" alt="Github Logo" data-reactid="19"></a><br>
|
||||
<br><hr><br>
|
||||
<form action="javascript:genUrl()">
|
||||
<label>Instance URL:<input required type="text" id="urlin" placeholder="octodon.social" oninvalid="this.setCustomValidity('Insert your instance URL. Example: octodon.social')" oninput="this.setCustomValidity('')"></label><br>
|
||||
<label>Username:<input required type="text" id="usernamein" placeholder="fenwick67" oninvalid="this.setCustomValidity('Insert your username. Example: fenwick67')" oninput="this.setCustomValidity('')"></label><br>
|
||||
<label>Width (px):<input required type="number" id="width" value="400" oninvalid="this.setCustomValidity('Insert width of generated feed. Default: 400')" oninput="this.setCustomValidity('')"></label><br>
|
||||
<label>Height (px):<input required type="number" id="height" value="800" oninvalid="this.setCustomValidity('Insert height of generated feed. Default: 800')" oninput="this.setCustomValidity('')"></label><br>
|
||||
<label>UI Scale (percent):<input required type="number" id="size" value="100" oninvalid="this.setCustomValidity('Insert UI scale. Default: 100')" oninput="this.setCustomValidity('')"></label><br>
|
||||
<label>Theme:
|
||||
<select id="theme">
|
||||
<option value="dark">dark</option>
|
||||
<option value="light">light</option>
|
||||
<option value="auto">auto (based on css prefers-color-scheme)</option>
|
||||
</select>
|
||||
</label><br>
|
||||
<label>Show Header?<input id="header" type="checkbox" checked="checked"></label><br>
|
||||
<label>Hide replies?<input type="checkbox" id="hidereplies" checked="checked"></label><br>
|
||||
<label>Hide boosts?<input type="checkbox" id="hideboosts" checked="checked"></label><br>
|
||||
<br>
|
||||
<div>
|
||||
<h1>Mastofeed</h1>
|
||||
<h4>Embedded Mastodon feeds for blogs etc.</h4>
|
||||
<a href="https://github.com/fenwick67/mastofeed" class="cta button alt">Fork on Github <img
|
||||
class="link-logo after" src="github-logo.svg" alt="Github Logo" data-reactid="19"></a><br>
|
||||
<br>
|
||||
<hr><br>
|
||||
<form action="javascript:genUrl()">
|
||||
<label>Instance URL:<input required type="text" id="urlin" placeholder="octodon.social"
|
||||
oninvalid="this.setCustomValidity('Insert your instance URL. Example: octodon.social')"
|
||||
oninput="this.setCustomValidity('')"></label>
|
||||
<br>
|
||||
<label>Username:<input required type="text" id="usernamein" placeholder="fenwick67"
|
||||
oninvalid="this.setCustomValidity('Insert your username. Example: fenwick67')"
|
||||
oninput="this.setCustomValidity('')"></label>
|
||||
<br>
|
||||
<label>Width (px):<input required type="number" id="width" value="400"
|
||||
oninvalid="this.setCustomValidity('Insert width of generated feed. Default: 400')"
|
||||
oninput="this.setCustomValidity('')"></label>
|
||||
<br>
|
||||
<label>Height (px):<input required type="number" id="height" value="800"
|
||||
oninvalid="this.setCustomValidity('Insert height of generated feed. Default: 800')"
|
||||
oninput="this.setCustomValidity('')"></label>
|
||||
<br>
|
||||
<label>UI Scale (percent):<input required type="number" id="size" value="100"
|
||||
oninvalid="this.setCustomValidity('Insert UI scale. Default: 100')"
|
||||
oninput="this.setCustomValidity('')"></label>
|
||||
<br>
|
||||
<label>Theme:
|
||||
<select id="theme">
|
||||
<option value="dark">Dark</option>
|
||||
<option value="light">Light</option>
|
||||
<option value="auto">Auto (based on css prefers-color-scheme)</option>
|
||||
</select>
|
||||
</label>
|
||||
<br>
|
||||
<label>Show Header?<input id="header" type="checkbox" checked="checked"></label>
|
||||
<br>
|
||||
<label>Hide replies?<input type="checkbox" id="hidereplies" checked="checked"></label>
|
||||
<br>
|
||||
<label>Hide boosts?<input type="checkbox" id="hideboosts" checked="checked"></label>
|
||||
<br>
|
||||
<br>
|
||||
<button value="generate">Generate</button>
|
||||
</form>
|
||||
<br><br>
|
||||
<label>Use this markup in your HTML: <br><textarea id="result"
|
||||
placeholder="result will go here"></textarea></label>
|
||||
<br><br>
|
||||
<h3>Live Preview:</h3>
|
||||
<span class="iframe-contain">
|
||||
<iframe id="frame" allowfullscreen sandbox="allow-top-navigation allow-scripts" width="400" height="800"
|
||||
src="/apiv2/feed?userurl=https%3A%2F%2Foctodon.social%2Fusers%2Ffenwick67&replies=false&boosts=true"></iframe>
|
||||
</span>
|
||||
<br>
|
||||
</div>
|
||||
<script>
|
||||
window.genUrl = function genUrl() {
|
||||
function val(id) {
|
||||
return document.getElementById(id).value;
|
||||
}
|
||||
|
||||
<button value="generate">Generate</button>
|
||||
</form>
|
||||
<br>
|
||||
<br>
|
||||
<label>Use this markup in your HTML: <br><textarea id="result" placeholder="result will go here"></textarea></label>
|
||||
<br>
|
||||
<h3>Live Preview:</h3>
|
||||
<iframe id="frame" allowfullscreen sandbox="allow-top-navigation allow-scripts" width="400" height="800" src="/apiv2/feed?userurl=https%3A%2F%2Foctodon.social%2Fusers%2Ffenwick67&replies=false&boosts=true"></iframe>
|
||||
<br>
|
||||
</div>
|
||||
<script>
|
||||
window.genUrl = function genUrl(){
|
||||
function val(id){
|
||||
return document.getElementById(id).value;
|
||||
}
|
||||
var inUrl = 'https://' + val('urlin') + '/users/' + val('usernamein');
|
||||
|
||||
var inUrl = 'https://' + val('urlin') + '/users/'+val('usernamein');
|
||||
var showBoosts = (!document.getElementById('hideboosts').checked).toString();
|
||||
var showReplies = (!document.getElementById('hidereplies').checked).toString();
|
||||
var showHeader = document.getElementById('header').checked.toString()
|
||||
var portStr = (window.location.port && window.location.port != 80) ? (':' + window.location.port) : ''
|
||||
|
||||
var showBoosts = (!document.getElementById('hideboosts').checked).toString();
|
||||
var showReplies = (!document.getElementById('hidereplies').checked).toString();
|
||||
var iframeUrl = window.location.protocol + '//' + window.location.hostname + portStr
|
||||
+ "/apiv2/feed?userurl=" + encodeURIComponent(inUrl) + "&theme=" + val('theme') + '&size=' + val('size')
|
||||
+ "&header=" + showHeader + '&replies=' + showReplies + '&boosts=' + showBoosts;
|
||||
|
||||
var iframeUrl = window.location.protocol + '//'+ window.location.hostname +((window.location.port && window.location.port!=80)?(':'+window.location.port):'')
|
||||
+"/apiv2/feed?userurl="+encodeURIComponent(inUrl)+"&theme="+val('theme')+'&size='+val('size')
|
||||
+ "&header="+(document.getElementById('header').checked.toString())+'&replies='+showReplies+'&boosts='+showBoosts;
|
||||
document.getElementById('result').value = '<iframe allowfullscreen sandbox="allow-top-navigation allow-scripts" width="' + val('width') + '" height="' + val('height') + '" src="' + iframeUrl + '"></iframe>';
|
||||
|
||||
document.getElementById('result').value = '<iframe allowfullscreen sandbox="allow-top-navigation allow-scripts" width="'+val('width')+'" height="'+val('height')+'" src="'+iframeUrl+'"></iframe>';
|
||||
|
||||
var iframe = document.getElementById('frame');
|
||||
iframe.src = iframeUrl;
|
||||
iframe.width = val('width');
|
||||
iframe.height = val('height');
|
||||
}
|
||||
</script>
|
||||
var iframe = document.getElementById('frame');
|
||||
iframe.src = iframeUrl;
|
||||
iframe.width = val('width');
|
||||
iframe.height = val('height');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -3,7 +3,6 @@
|
|||
*/
|
||||
|
||||
@import url(https://fonts.googleapis.com/css?family=Quando|Judson|Montserrat:500|Roboto:400,500);
|
||||
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
|
||||
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote,
|
||||
body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl,
|
||||
dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4,
|
||||
|
|
@ -58,22 +57,7 @@ h1 {
|
|||
margin-bottom: 20px
|
||||
}
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
border: 1px solid #9baec8;
|
||||
padding: 3px 15px;
|
||||
color: #9baec8;
|
||||
margin-left: 4px;
|
||||
font-weight: 500;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, .1)
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #b5c3d6
|
||||
}
|
||||
|
||||
input[type="text"], input[type="number"] {
|
||||
input[type="text"], input[type="number"], select {
|
||||
outline: 0;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
|
|
@ -110,11 +94,12 @@ div {
|
|||
margin: 0 auto
|
||||
}
|
||||
|
||||
iframe {
|
||||
float: middle;
|
||||
.iframe-contain {
|
||||
display:block;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
a {
|
||||
button, a {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
|
|
@ -126,5 +111,8 @@ a {
|
|||
border-radius: 4px;
|
||||
padding: 3px 15px;
|
||||
color: #9baec8;
|
||||
margin-left: 4px
|
||||
cursor:pointer;
|
||||
}
|
||||
button:hover, a:hover {
|
||||
background-color: #394150;
|
||||
}
|
||||
Loading…
Reference in a new issue