forked from cory/tildefriends
261 lines
7.6 KiB
HTML
261 lines
7.6 KiB
HTML
<!doctype html>
|
|
<html style="height: 100%; margin: 0; padding: 0; box-sizing: border-box">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="stylesheet" type="text/css" href="w3.css" />
|
|
<style>
|
|
.slide {
|
|
display: none;
|
|
}
|
|
.dot {
|
|
width: 1em;
|
|
height: 1em;
|
|
cursor: pointer;
|
|
}
|
|
.w3-left,
|
|
.w3-right {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body
|
|
style="
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
flex-direction: column;
|
|
"
|
|
class="w3-flex w3-dark-gray w3-center"
|
|
>
|
|
<div
|
|
style="flex: 1 1 auto; overflow: auto; contain: content; padding: 64px"
|
|
>
|
|
<div
|
|
class="slide w3-content w3-xlarge w3-blue w3-card-4 w3-panel w3-padding-32 w3-round-xlarge"
|
|
>
|
|
<div>
|
|
<div>Welcome to</div>
|
|
<div>~😎 Tilde Friends.</div>
|
|
</div>
|
|
<footer>
|
|
<button class="w3-button w3-yellow" onclick="show(1)">Next</button>
|
|
</footer>
|
|
</div>
|
|
<div class="slide w3-card-4 w3-gray" style="width: 90%">
|
|
<header class="w3-container w3-blue w3-xlarge">
|
|
<h1>This brief tutorial will introduce:</h1>
|
|
</header>
|
|
<ul class="w3-xlarge w3-left-align">
|
|
<li><b>Secure Scuttlebutt</b>, a decentralized social network.</li>
|
|
<li>
|
|
<b>Tilde Friends</b>, the application platform that you are using
|
|
right now.
|
|
</li>
|
|
<li>
|
|
<b>How to get started</b> if you want to get gossiping right away.
|
|
</li>
|
|
</ul>
|
|
<footer class="w3-center w3-xlarge w3-padding">
|
|
<button class="w3-button w3-yellow" onclick="show(1)">Onward</button>
|
|
</footer>
|
|
</div>
|
|
<div class="slide w3-gray" style="width: 90%">
|
|
<div class="w3-card-4 w3-xlarge">
|
|
<header class="w3-container w3-blue">
|
|
<h1>Secure Scuttlebutt in a nutshell:</h1>
|
|
</header>
|
|
<div class="w3-container w3-xlarge w3-left-align">
|
|
<ul>
|
|
<li>
|
|
You create your own account and post to your own feed. This is
|
|
all <b>local</b> and happens <b>offline</b>. You are fully in
|
|
charge, and you can do most things with no reception whatsoever.
|
|
</li>
|
|
<li>
|
|
To interact with others, <b>connect over the network</b>, either
|
|
directly to your friends (ie, on coffee shop Wi-Fi), to
|
|
<i>rooms</i> (search the web for <i>#ssbroom</i>), or to
|
|
<i>pubs</i>.
|
|
</li>
|
|
<li>
|
|
To start seeing content, you need to make some connections and
|
|
then <b>follow accounts</b>. By default you see your direct
|
|
friends and friends of those friends. If you encounter content
|
|
you'd rather not see, <b>block</b> the offending account to
|
|
improve the experience for you and your followers.
|
|
</li>
|
|
<li>
|
|
Your feed is an <b>immutable</b> log of your activity. Post with
|
|
care, because like your words in real life, posts can't be taken
|
|
back.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<footer class="w3-center w3-xlarge w3-padding">
|
|
<a
|
|
class="w3-button w3-light-gray"
|
|
href="https://scuttlebutt.nz/"
|
|
target="_blank"
|
|
>See scuttlebutt.nz</a
|
|
>
|
|
<button class="w3-button w3-yellow" onclick="show(1)">
|
|
Got It
|
|
</button>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
<div class="slide w3-gray" style="width: 90%">
|
|
<div class="w3-card-4 w3-xlarge">
|
|
<header class="w3-container w3-blue w3-center">
|
|
<h1>~😎 Let's Talk Tilde Friends ~😎</h1>
|
|
</header>
|
|
<div class="w3-container w3-xlarge w3-left-align">
|
|
Tilde Friends is an application platform that is an application of
|
|
its own.
|
|
<ul>
|
|
<li>
|
|
This intro is a Tilde Friends app. You can click <b>edit</b> at
|
|
the top to look under the hood and make changes if so inclined.
|
|
</li>
|
|
<li>
|
|
But it's also set up so that you can't just break an instance of
|
|
an app that everybody is using. There are <b>protections</b> in
|
|
place like an operating system. The intent is also for it to be
|
|
<b>safe</b>
|
|
to run strange apps without worrying about adverse effects.
|
|
</li>
|
|
<li>
|
|
But this is all a big 🚧work in progress🚧 and
|
|
<b>experiment</b>. Let's see where it takes us.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<footer class="w3-center w3-xlarge w3-padding">
|
|
<a class="w3-button w3-yellow" target="_top" href="/~core/ssb/"
|
|
>Okay</a
|
|
>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
<div class="slide w3-gray" style="width: 90%">
|
|
<div class="w3-card-4 w3-xlarge">
|
|
<header class="w3-container w3-blue w3-center">
|
|
<h1>🦀Let's Get this Tilde Friends Party Started🎉</h1>
|
|
</header>
|
|
<div class="w3-container w3-xlarge w3-left-align">
|
|
<ul>
|
|
<li>
|
|
The button below will take you to the Secure Scuttlebutt app.
|
|
</li>
|
|
<li>
|
|
Remember:
|
|
<ol>
|
|
<li>You are in charge. This is all on your device.</li>
|
|
<li>Make network connections to replicate with others.</li>
|
|
<li>Follow more accounts to see more content.</li>
|
|
<li>
|
|
Post respectfully, and block those you'd rather not see.
|
|
</li>
|
|
<li>
|
|
This is all under active development. Exercise patience, and
|
|
report issues encountered.
|
|
</li>
|
|
</ol>
|
|
</li>
|
|
<li>
|
|
To see this tutorial again later, select <b>apps</b> ->
|
|
<b>Core Apps</b> -> <b>intro</b>.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<footer class="w3-center w3-xlarge w3-padding">
|
|
<a class="w3-button w3-yellow" target="_top" href="/~core/ssb/"
|
|
>Let's Go!</a
|
|
>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="w3-text-white w3-xlarge w3-center w3-flex"
|
|
style="width: 100%; flex: 0 1; flex-direction: row; align-items: center"
|
|
>
|
|
<div
|
|
class="w3-jumbo"
|
|
onclick="show(-1)"
|
|
style="flex: 1 0; cursor: pointer"
|
|
>
|
|
❮
|
|
</div>
|
|
<span
|
|
class="w3-badge dot w3-border w3-hover-yellow"
|
|
onclick="set(0)"
|
|
></span>
|
|
<span
|
|
class="w3-badge dot w3-border w3-hover-yellow"
|
|
onclick="set(1)"
|
|
></span>
|
|
<span
|
|
class="w3-badge dot w3-border w3-hover-yellow"
|
|
onclick="set(2)"
|
|
></span>
|
|
<span
|
|
class="w3-badge dot w3-border w3-hover-yellow"
|
|
onclick="set(3)"
|
|
></span>
|
|
<span
|
|
class="w3-badge dot w3-border w3-hover-yellow"
|
|
onclick="set(4)"
|
|
></span>
|
|
<div
|
|
class="w3-jumbo"
|
|
style="flex: 1 0; cursor: pointer"
|
|
onclick="show(1)"
|
|
>
|
|
❯
|
|
</div>
|
|
</div>
|
|
<script>
|
|
let index = 0;
|
|
function set(i) {
|
|
show(i - index);
|
|
}
|
|
function show(delta) {
|
|
let slides = [...document.getElementsByClassName('slide')];
|
|
let dots = [...document.getElementsByClassName('dot')];
|
|
index = (index + delta + slides.length) % slides.length;
|
|
for (let slide of slides) {
|
|
slide.style.display =
|
|
slides.indexOf(slide) == index ? 'block' : 'none';
|
|
}
|
|
for (let dot of dots) {
|
|
if (dots.indexOf(dot) == index) {
|
|
dot.classList.add('w3-white');
|
|
} else {
|
|
dot.classList.remove('w3-white');
|
|
}
|
|
}
|
|
for (let left of document.getElementsByClassName('w3-left')) {
|
|
left.style.visibility = index == 0 ? 'hidden' : 'visible';
|
|
}
|
|
for (let right of document.getElementsByClassName('w3-right')) {
|
|
console.log(index, slides.length - 1);
|
|
right.style.visibility =
|
|
index == slides.length - 1 ? 'hidden' : 'visible';
|
|
}
|
|
}
|
|
window.addEventListener('keyup', function (event) {
|
|
if (event.key == 'ArrowLeft') {
|
|
show(-1);
|
|
} else if (event.key == 'ArrowRight') {
|
|
show(1);
|
|
}
|
|
});
|
|
show(0);
|
|
</script>
|
|
</body>
|
|
</html>
|