forked from cory/tildefriends
287 lines
8.8 KiB
HTML
287 lines
8.8 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;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.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;
|
|
align-items: center;
|
|
"
|
|
class="w3-flex w3-dark-gray w3-center"
|
|
>
|
|
<div
|
|
style="
|
|
flex: 1 1 auto;
|
|
overflow: auto;
|
|
contain: content;
|
|
padding-top: 16px;
|
|
padding-bottom: 16px;
|
|
"
|
|
>
|
|
<div class="slide">
|
|
<div
|
|
class="w3-content w3-xlarge w3-card-4 w3-blue w3-panel w3-padding-32 w3-round-xlarge"
|
|
style="margin: 32px"
|
|
>
|
|
<div>
|
|
<div>Welcome to</div>
|
|
<div>~😎 Tilde Friends.</div>
|
|
</div>
|
|
<footer>
|
|
<button class="w3-button w3-yellow proceed">Next</button>
|
|
</footer>
|
|
</div>
|
|
</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-large 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 proceed">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-large w3-left-align">
|
|
<p>
|
|
Secure Scuttlebutt is a social network whose technical operation
|
|
attempts to mirror human social interaction.
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
You can create your own account and post to your own feed on
|
|
your own device. This is all <b>local</b> with no external
|
|
communication. This puts you fully in control of your own words
|
|
and actions.
|
|
</li>
|
|
<li>
|
|
Before you can interact with others, you need to
|
|
<b>connect over the network</b>, either directly to your friends
|
|
(i.e., peer-to-peer between your phones on coffee shop Wi-Fi) or
|
|
to 🚪<i>rooms</i> and 🍻<i>pubs</i> (hint: search the web for
|
|
<i>#ssbroom</i>).
|
|
</li>
|
|
<li>
|
|
Who you choose to <b>follow</b> determines what you see, with
|
|
most people choosing to see messages from 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 proceed">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-large w3-left-align">
|
|
<p>
|
|
Tilde Friends is an application platform that is an application of
|
|
its own.
|
|
</p>
|
|
<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.
|
|
</li>
|
|
<li>
|
|
It is already possible to make and share new applications using
|
|
only Tilde Friends and Secure Scuttlebutt without having to set
|
|
up development environments, configure web servers, register
|
|
domain names, or pay for hosting services.
|
|
</li>
|
|
<li>
|
|
But it's also set up so that you can't just break an app that
|
|
everybody is using or do malicious things with personal content.
|
|
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">
|
|
<button class="w3-button w3-yellow proceed">Okay</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 Get this Tilde Friends Party Started🎉</h1>
|
|
</header>
|
|
<div class="w3-container w3-large w3-left-align">
|
|
<p>The button below will take you to the Secure Scuttlebutt app.</p>
|
|
<ul>
|
|
<li>
|
|
Remember:
|
|
<ol>
|
|
<li>You are in charge. This is all on your device.</li>
|
|
<li>
|
|
Make network connections to exchange messages with others.
|
|
</li>
|
|
<li>
|
|
Follow more accounts to see more content, and block those
|
|
posting content you'd rather not see.
|
|
</li>
|
|
<li>
|
|
Be respectful, and consider the consequences of what you
|
|
post.
|
|
</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">
|
|
<button class="w3-button w3-yellow" id="complete">Let's Go!</button>
|
|
</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;
|
|
gap: 8px;
|
|
"
|
|
>
|
|
<div class="w3-jumbo" id="left" style="flex: 1 0; cursor: pointer">
|
|
❮
|
|
</div>
|
|
<span class="w3-badge dot w3-border w3-hover-yellow"></span>
|
|
<span class="w3-badge dot w3-border w3-hover-yellow"></span>
|
|
<span class="w3-badge dot w3-border w3-hover-yellow"></span>
|
|
<span class="w3-badge dot w3-border w3-hover-yellow"></span>
|
|
<span class="w3-badge dot w3-border w3-hover-yellow"></span>
|
|
<div class="w3-jumbo" style="flex: 1 0; cursor: pointer" id="right">
|
|
❯
|
|
</div>
|
|
</div>
|
|
<script type="module">
|
|
import * as tfrpc from '/static/tfrpc.js';
|
|
|
|
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');
|
|
}
|
|
}
|
|
document.getElementById('left').style.visibility =
|
|
index == 0 ? 'hidden' : 'visible';
|
|
document.getElementById('right').style.visibility =
|
|
index == slides.length - 1 ? 'hidden' : 'visible';
|
|
}
|
|
|
|
let dots = [...document.getElementsByClassName('dot')];
|
|
for (let dot of dots) {
|
|
dot.onclick = () => set(dots.indexOf(dot));
|
|
}
|
|
for (let button of document.getElementsByClassName('proceed')) {
|
|
button.onclick = () => show(1);
|
|
}
|
|
document.getElementById('left').onclick = () => show(-1);
|
|
document.getElementById('right').onclick = () => show(1);
|
|
document.getElementById('complete').onclick = function () {
|
|
console.log('completing');
|
|
tfrpc.rpc.complete().finally(function () {
|
|
console.log('completed');
|
|
let a = document.createElement('a');
|
|
a.href = '/~core/ssb/';
|
|
a.target = '_top';
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
});
|
|
};
|
|
window.addEventListener('keyup', function (event) {
|
|
if (event.key == 'ArrowLeft') {
|
|
show(-1);
|
|
} else if (event.key == 'ArrowRight') {
|
|
show(1);
|
|
}
|
|
});
|
|
show(0);
|
|
</script>
|
|
</body>
|
|
</html>
|