tasiaiso/tildefriends
1
0
Fork 0
forked from cory/tildefriends
Code Issues Pull Requests Releases Wiki Activity

intro: Add an intro app that aims to ease in completely new users. Needs some clean-up and to be hooked into the flow. #19

Browse Source
This commit is contained in:
Cory McWilliams
2025-05-21 18:08:08 -04:00
parent 8a0e190a86
commit 5a1303149f
4 changed files with 503 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

242
apps/intro/index.html Normal file
View File

@ -0,0 +1,242 @@
<!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> -&gt;
<b>Core Apps</b> -&gt; <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">&#10094;</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)">&#10095;</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>