<!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://www.tildefriends.net/~cory/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>
				</div>
				<div class="w3-col l4 m6">
					<img src="tildefriends.png" class="w3-image w3-right w3-hide-small">
				</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/5/" 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>