<!doctype html>
<html>
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="stylesheet" href="w3.css" />
		<link rel="stylesheet" href="fontawesome.min.css" />
		<link rel="stylesheet" href="regular.min.css" />
		<link rel="stylesheet" href="solid.min.css" />
		<link rel="stylesheet" href="brands.min.css" />

		<style>
			body,
			h1,
			h2,
			h3,
			h4,
			h5 {
				font-family: 'Poppins', sans-serif;
			}
			body {
				font-size: 16px;
			}
			img {
				margin-bottom: -8px;
			}
			.mySlides {
				display: none;
			}
		</style>
		<base target="_top" />
	</head>
	<body class="w3-content w3-black" style="max-width: 1500px">
		<!-- The App Section -->
		<div class="w3-padding-64 w3-white">
			<div class="w3-row-padding">
				<div class="w3-col l8 m6 w3-padding-32">
					<h1 class="w3-jumbo">
						<b>😎 Tilde Friends</b>
					</h1>
					<h1 class="w3-xxlarge w3-text-green">
						<b>Make apps and friends from the comfort of your web browser.</b>
					</h1>
					<p>
						Tilde Friends is a platform for building, running, and sharing web
						applications.
					</p>
					<p>
						Available for lots of devices:
						<i class="fa-brands fa-linux w3-xlarge"></i>
						<i class="fa-brands fa-android w3-xlarge"></i>
						<i class="fa-brands fa-apple w3-xlarge"></i>
						<i class="fa fa-mobile-screen w3-xlarge"></i>
						<i class="fa-brands fa-windows w3-xlarge"></i>
					</p>
					<a
						class="w3-button w3-black w3-padding-large"
						href="https://dev.tildefriends.net/cory/tildefriends/releases"
						><i class="fa fa-download"></i> Download</a
					>
					<a
						class="w3-button w3-black w3-padding-large"
						href="https://www.tildefriends.net/~cory/apps/"
						><i class="fa fa-link"></i> Try It</a
					>
					<a
						class="w3-button w3-black w3-padding-large"
						href="https://dev.tildefriends.net/"
						><i class="fa fa-mug-hot"></i> Code</a
					>
				</div>
				<div class="w3-col l4 m6">
					<img src="tildefriends.png" class="w3-image w3-right w3-hide-small" />
				</div>
			</div>
		</div>

		<!-- Getting Starting Section -->
		<div class="w3-indigo w3-center">
			<div class="w3-row-padding w3-padding-64">
				<div class="w3-jumbo">
					<i class="fa fa-rocket"></i> <b>Getting Started</b>
				</div>
				<div>
					<h2>First-time user checklist:</h2>
					<ol type="1" style="text-align: left">
						<li>
							<a href="https://dev.tildefriends.net/cory/tildefriends/releases"
								>Download</a
							>
							Tilde Friends and run your own instance, or use
							<a href="https://www.tildefriends.net/"
								>https://www.tildefriends.net/</a
							>.
						</li>
						<li>
							Create an account to identify yourself with that instance by
							username and password.
						</li>
						<li>
							Create an SSB identity in the <b>ssb</b> app. This will generate a
							keypair used to identify yourself to other users and sign your
							messages so that they can be verified as from you.
						</li>
						<li>
							Describe yourself in your profile in the <b>ssb</b> app. Give
							yourself a name and an avatar if you like.
						</li>
						<li>
							Connect to others. You will automatically discover peers on the
							same instance and same network if there are any. Or use
							<a href="https://github.com/staltz/ssb-room/blob/master/FAQ.md"
								>rooms</a
							>
							and pubs to reach more distant users.
							<a href="https://www.tildefriends.net/~cory/room/"
								>tildefriends.net itself</a
							>
							operates as a room, so you can connect and see who else is online
							and establish a connection.
						</li>
						<li>Follow people to grow your network.</li>
						<li>
							Use the <b>edit</b> link at the top of any page to start modifying
							and making apps.
						</li>
					</ol>
				</div>
			</div>
		</div>

		<!-- SSB Section -->
		<div class="w3-light-grey">
			<div class="w3-row-padding w3-padding-64">
				<div class="w3-col l4 m6 s4">
					<a href="https://scuttlebutt.nz/"
						><img
							class="w3-image w3-round-large"
							src="ssb.png"
							alt="Secure Scuttlebutt"
					/></a>
				</div>
				<div class="w3-col l8 m6" style="height: auto">
					<h1 class="w3-jumbo"><b>Built for Sharing</b></h1>
					<p>
						Tilde Friends participates in the
						<a href="https://scuttlebutt.nz/">Secure Scuttlebutt</a> distributed
						social network.
					</p>
					<p>
						Share apps with friends. Discover new apps made by enemies. Post
						pictures of your coffee. Or just lurk.
					</p>
					<p>
						The social network integration provides tools for connecting with
						other people world-wide while still allowing apps and everything to
						operate offline.
					</p>
				</div>
			</div>
		</div>

		<!-- Editor Section -->
		<div class="w3-container w3-padding-64 w3-light-blue">
			<div class="w3-row-padding">
				<div class="w3-col l8 m6">
					<h1 class="w3-jumbo"><b>Edit Anything</b></h1>
					<i
						class="fa fa-pen-to-square w3-left w3-jumbo w3-text-gray"
						style="padding: 32px"
					></i>
					<p>
						See that <code><b>edit</b></code> link near the top left corner of
						this page? It's there for every Tilde Friends app, so you can modify
						and see your changes right away.
					</p>
					<p>It's kind of like a wiki, but for code!</p>
				</div>
			</div>
		</div>

		<!-- Sandbox Section -->
		<div class="w3-padding-64 w3-grey">
			<div class="w3-row-padding">
				<div class="w3-col">
					<h1 class="w3-jumbo" style="text-align: right">
						<b>Sandbox Security</b>
					</h1>
					<i
						class="fa fa-road-barrier w3-right w3-jumbo w3-text-yellow"
						style="padding: 32px"
					></i>
					<p>
						Tilde Friends tries to make sure apps can be trusted using similar
						techniques to how web browsers and operating systems do it.
					</p>
					<p>
						This is all a work in progress, and it varies by platform, so don't
						give it all your innermost secrets yet, but do kick its tires and
						<a href="mailto:cory@tildefriends.net">share</a> any surprises you
						find.
					</p>
				</div>
			</div>
		</div>

		<!-- Technlology Section -->
		<div class="w3-container w3-padding-64 w3-light-grey w3-center">
			<h1 class="w3-jumbo"><b>Trusted Technology</b></h1>
			<p>Tilde Friends is built using boring, trusted tech.</p>
			<p>
				Though of course for building Tilde Friends apps, you are free to use
				whatever fits.
			</p>

			<div class="w3-row" style="margin-top: 64px">
				<a
					href="https://en.wikipedia.org/wiki/C_(programming_language)"
					class="w3-col s3"
				>
					<i class="fa fa-c w3-text-blue w3-jumbo"></i>
					<p>C</p>
				</a>
				<a href="https://bellard.org/quickjs/" class="w3-col s3">
					<i class="fa-brands fa-js w3-text-orange w3-jumbo"></i>
					<p>QuickJS</p>
				</a>
				<a href="https://www.sqlite.org/" class="w3-col s3">
					<i class="fa fa-database w3-text-red w3-jumbo"></i>
					<p>SQLite</p>
				</a>
				<a href="https://github.com/libuv/libuv" class="w3-col s3">
					<i class="fa fa-bolt w3-text-yellow w3-jumbo"></i>
					<p>libuv</p>
				</a>
			</div>

			<div class="w3-row" style="margin-top: 64px">
				<a href="https://www.zlib.net/" class="w3-col s3">
					<i class="fa fa-file-zipper w3-text-cyan w3-jumbo"></i>
					<p>zlib</p>
				</a>
				<a href="https://doc.libsodium.org/" class="w3-col s3">
					<i class="fa fa-lock w3-text-purple w3-jumbo"></i>
					<p>libsodium</p>
				</a>
				<a href="https://www.openssl.org/" class="w3-col s3">
					<i class="fa fa-shield-halved w3-text-green w3-jumbo"></i>
					<p>OpenSSL</p>
				</a>
				<a
					href="https://github.com/ianlancetaylor/libbacktrace"
					class="w3-col s3"
				>
					<i class="fa fa-burst w3-text-pink w3-jumbo"></i>
					<p>libbacktrace</p>
				</a>
			</div>

			<div class="w3-row" style="margin-top: 64px">
				<a href="https://codemirror.net/docs/changelog/" class="w3-col s3">
					<i class="fa fa-keyboard w3-text-indigo w3-jumbo"></i>
					<p>CodeMirror</p>
				</a>
				<a href="https://github.com/jlfwong/speedscope/" class="w3-col s3">
					<i class="fa fa-microscope w3-text-orange w3-jumbo"></i>
					<p>Speedscope</p>
				</a>
				<a href="https://github.com/lit/lit/" class="w3-col s3">
					<i class="fa fa-fire w3-text-cyan w3-jumbo"></i>
					<p>Lit</p>
				</a>
				<a href="https://www.gnu.org/software/make/" class="w3-col s3">
					<i class="fa fa-hammer w3-text-teal w3-jumbo"></i>
					<p>GNU Make</p>
				</a>
			</div>
		</div>

		<!-- Footer -->
		<footer class="w3-container w3-padding-32 w3-blue-grey w3-center w3-xlarge">
			<p class="w3-medium">
				This page and Tilde Friends itself was made by Cory mostly in coffee
				shops and a local pizza place.
			</p>
		</footer>
	</body>
</html>