amark · May 21, 2020 05:11
diff --git a/meething.html b/meething.html
 <!DOCTYPE html>
 <html>
 <head>
 <!-- always start with these two lines to set a clean baseline for different devices -->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/gun/examples/style.css">
 <script src="https://cdn.jsdelivr.net/npm/gun/examples/jquery.js"></script>

 <title>Secure Branded Video Conferencing</title>
 <link rel="icon" href="./media/icon.png">
 </head>
 <body class="black whitet">
 <style>
 	/*
 		Choose white text on a black background so you can add color in.
 		Pick your favorite font and choose a font size.
 	*/
 	@import url('https://fonts.googleapis.com/css?family=Oxygen');
 	html, body {
 		font-family: "Oxygen", sans-serif;
 	}
 	p a { border-bottom: dashed white 1px; cursor: pointer; }
 	.unit img {
 		max-height: 90vh;
 	}
 	.board {
 		padding: 7% 1em;
 	}
 	.ton {
 		border-radius: 1em;
 		font-size: 150%;
 		font-size: 2.25vmax;
 		margin: 1em;
 		background: transparent;
 		border: 1px solid white;
 		color: white;
 		font-family: 'Raleway', sans-serif;
 		padding: 0.5em 1.5em;
 	}
 	.ton:hover {
 		background: white;
 		color: black;
 	}
 </style>

 <!-- for educational sites, consider starting with a nice full screen welcome message -->
 <div id="hello" class="hold full center" style="padding-top: 9%; /*background: url(https://meething.space/assets/images/background.png) no-repeat center center;*/ background-size: cover; background-color: #22143c;">
 	<div class="focus row">
 		<p class="shout">Meething</p>
 		<!-- just like in real life, say who you are and give a concise reason why you add value to someone's life and then make a call to action, if they want to learn more they can always scroll to learn more -->
 		<p>Secure in-browser video conferencing controlled by your brand, not theirs.</p>
 		<a id="create" href="https://meething.space/?room=any"><button class="ton">Create Room</button></a>
 		<script>$('#create').attr('href', 'https://meething.space/?room='+Math.random().toString(32).slice(2));</script>
 	</div>
 	<div class="focus min row leak">
 		<!-- just like in real life, looking pretty attracts attention, so show off and look glamorous! -->
 		<img src="https://era.eco/media/world.png" class="row" style="position: absolute; top:0;left:0;">
 	</div>
 </div>

 <div class="hold hue4 board center">
 	<div class="unit col">
 		<div class="left">
 			<p class="loud crack">Your Brand Paramount</p>
 			<p>Why pay Zoom to give them your customers when you can instead have video conferencing on your own site? No install, no hassle. You and your customers were being held hostage by inferior brands with poor security. Now you can protect your business, your customers, and your brand experience with Meething.</p>
 		</div>
 	</div>
 	<div class="unit leak col">
 		<img src="https://era.eco/media/world.png">
 	</div>
 </div>

 <div class="hold hue board center">
 	<div class="unit leak col">
 		<img class="right" src="https://era.eco/media/world.png">
 	</div>
 	<div class="unit col">
 		<div class="right">
 			<p class="loud crack">Secure</p>
 			<p>Meething integrates into your website and uses end-to-end encryption for your 1-1 video calls. Perfect for telehealth, customer support, consulting, internal team calls, or even just catching up with a friend. Group calls are also secure and can be managed with our on-premise or cloud solutions.</p>
 		</div>
 	</div>
 </div>

 <div id="accountable" class="hold black center">
 	<div class="pad" style="z-index: 9;">
 		<div class="left">
 			<p class="loud crack">Accountable</p>
 			<p>Meething is <a href="https://github.com/meething/meething">Open Source</a>, backed by Mozilla's "<a href="mozilla.org/builders">Fix the Internet</a>" incubator, secured by the <a href="https://gun.eco">GUN protocol</a> to protect your data, and operated by the industry experts at <a href="http://qxip.net/">QXIP</a>.</p>
 			<center>
 				<a href="#hello"><button class="ton">Try Free Now</button></a>
 				<a href="mailto:hi@era.eco?subject=Meething Enterprise Edition"><button class="ton">Get Brand Quote</button></a>
 			</center>
 		</div>
 	</div>
 	<div>
 		<img src="https://era.eco/media/world.png" class="row">
 	</div>
 </div>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<!-- always start with these two lines to set a clean baseline for different devices -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/gun/examples/style.css">
	<script src="https://cdn.jsdelivr.net/npm/gun/examples/jquery.js"></script>

	<title>Secure Branded Video Conferencing</title>
	<link rel="icon" href="./media/icon.png">
	</head>
	<body class="black whitet">
	<style>
	/*
	Choose white text on a black background so you can add color in.
	Pick your favorite font and choose a font size.
	*/
	@import url('https://fonts.googleapis.com/css?family=Oxygen');
	html, body {
	font-family: "Oxygen", sans-serif;
	}
	p a { border-bottom: dashed white 1px; cursor: pointer; }
	.unit img {
	max-height: 90vh;
	}
	.board {
	padding: 7% 1em;
	}
	.ton {
	border-radius: 1em;
	font-size: 150%;
	font-size: 2.25vmax;
	margin: 1em;
	background: transparent;
	border: 1px solid white;
	color: white;
	font-family: 'Raleway', sans-serif;
	padding: 0.5em 1.5em;
	}
	.ton:hover {
	background: white;
	color: black;
	}
	</style>

	<!-- for educational sites, consider starting with a nice full screen welcome message -->
	<div id="hello" class="hold full center" style="padding-top: 9%; /background: url(https://meething.space/assets/images/background.png) no-repeat center center;/ background-size: cover; background-color: #22143c;">
	<div class="focus row">
	<p class="shout">Meething</p>
	<!-- just like in real life, say who you are and give a concise reason why you add value to someone's life and then make a call to action, if they want to learn more they can always scroll to learn more -->
	<p>Secure in-browser video conferencing controlled by your brand, not theirs.</p>
	<a id="create" href="https://meething.space/?room=any"><button class="ton">Create Room</button></a>
	<script>$('#create').attr('href', 'https://meething.space/?room='+Math.random().toString(32).slice(2));</script>
	</div>
	<div class="focus min row leak">
	<!-- just like in real life, looking pretty attracts attention, so show off and look glamorous! -->
	<img src="https://era.eco/media/world.png" class="row" style="position: absolute; top:0;left:0;">
	</div>
	</div>

	<div class="hold hue4 board center">
	<div class="unit col">
	<div class="left">
	<p class="loud crack">Your Brand Paramount</p>
	<p>Why pay Zoom to give them your customers when you can instead have video conferencing on your own site? No install, no hassle. You and your customers were being held hostage by inferior brands with poor security. Now you can protect your business, your customers, and your brand experience with Meething.</p>
	</div>
	</div>
	<div class="unit leak col">
	<img src="https://era.eco/media/world.png">
	</div>
	</div>

	<div class="hold hue board center">
	<div class="unit leak col">
	<img class="right" src="https://era.eco/media/world.png">
	</div>
	<div class="unit col">
	<div class="right">
	<p class="loud crack">Secure</p>
	<p>Meething integrates into your website and uses end-to-end encryption for your 1-1 video calls. Perfect for telehealth, customer support, consulting, internal team calls, or even just catching up with a friend. Group calls are also secure and can be managed with our on-premise or cloud solutions.</p>
	</div>
	</div>
	</div>

	<div id="accountable" class="hold black center">
	<div class="pad" style="z-index: 9;">
	<div class="left">
	<p class="loud crack">Accountable</p>
	<p>Meething is <a href="https://github.com/meething/meething">Open Source</a>, backed by Mozilla's "<a href="mozilla.org/builders">Fix the Internet</a>" incubator, secured by the <a href="https://gun.eco">GUN protocol</a> to protect your data, and operated by the industry experts at <a href="http://qxip.net/">QXIP</a>.</p>
	<center>
	<a href="#hello"><button class="ton">Try Free Now</button></a>
	<a href="mailto:hi@era.eco?subject=Meething Enterprise Edition"><button class="ton">Get Brand Quote</button></a>
	</center>
	</div>
	</div>
	<div>
	<img src="https://era.eco/media/world.png" class="row">
	</div>
	</div>

	</body>
	</html>