mirror of
https://github.com/amark/gun.git
synced 2025-10-14 00:59:35 +00:00
for Forrest
This commit is contained in:
Mark Nadal
parent
02c3425829
commit
3c7fddd724
1
gun.js
1
gun.js
@ -292,6 +292,7 @@
|
||||
if(Gun.fns.is(gun.__.opt.hooks.key)){
|
||||
gun.__.opt.hooks.key(key, cb.soul || (cb.node||{_:{}})._[Gun._.soul], function(err, data){
|
||||
//Gun.log.call(gun, "key made", key);
|
||||
gun.__.keys[key] = cb.node; // once more for good luck.
|
||||
if(err){ return cb(err) }
|
||||
return cb(null);
|
||||
});
|
||||
|
||||
431
index.html
431
index.html
@ -1,17 +1,370 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>gun</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
||||
<!--
|
||||
<script src="../gun.js"></script>
|
||||
<link id="style" rel="stylesheet" href="https://yandex.st/highlightjs/8.0/styles/sunburst.min.css">
|
||||
<script src="https://yandex.st/highlightjs/8.0/highlight.min.js"></script>
|
||||
<script src="https://dl.dropboxusercontent.com/u/4374976/random/phrase.js"></script>
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
body {
|
||||
background-image: url(./web/img/kimber.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: left top;
|
||||
font-family: Arial;
|
||||
font-size: 18pt;
|
||||
text-shadow: 0px 0px 7px #DDD;
|
||||
line-height: 20pt;
|
||||
@import url(https://fonts.googleapis.com/css?family=Dosis|Poiret+One|Oxygen);
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
font-family: 'Oxygen', Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
.lean {
|
||||
font-family: 'Poiret One', Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
|
||||
}
|
||||
.clean {
|
||||
font-family: 'Dosis', Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
|
||||
}
|
||||
.crisp {
|
||||
font-family: 'Oxygen', Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
|
||||
}
|
||||
pre {
|
||||
background-color: black;
|
||||
border: 1px dashed white;
|
||||
color: white;
|
||||
line-height: 1.5em;
|
||||
padding: 1em;
|
||||
overflow: hidden;
|
||||
}
|
||||
button {
|
||||
border: none;
|
||||
color: white;
|
||||
background: skyblue;
|
||||
padding: 1em;
|
||||
cursor: pointer;
|
||||
}
|
||||
input {
|
||||
background: transparent;
|
||||
border: 2px dashed grey;
|
||||
padding: 1em;
|
||||
}
|
||||
.step {
|
||||
display: none;
|
||||
}
|
||||
.step:target {
|
||||
display: block;
|
||||
}
|
||||
.grid {
|
||||
text-align: center;
|
||||
}
|
||||
.unit {
|
||||
display: inline-block;
|
||||
}
|
||||
.learn {
|
||||
min-width: 250px;
|
||||
max-width: 400px;
|
||||
width: 30%;
|
||||
padding: 2em;
|
||||
}
|
||||
.svg {
|
||||
background: white url('./web/img/devices.svg') no-repeat 50% 50%;
|
||||
height: 40em;
|
||||
}
|
||||
.GUN {
|
||||
background: transparent url('./web/img/gun.svg') no-repeat 50% 50%;
|
||||
background-size: 60%;
|
||||
}
|
||||
.dull {
|
||||
background-color: #EEE;
|
||||
-webkit-transition: background-color 600ms linear;
|
||||
-moz-transition: background-color 600ms linear;
|
||||
transition: background-color 600ms linear;
|
||||
}
|
||||
.blue {
|
||||
background-color: skyblue;
|
||||
-webkit-transition: background-color 600ms linear;
|
||||
-moz-transition: background-color 600ms linear;
|
||||
transition: background-color 600ms linear;
|
||||
}
|
||||
.red {
|
||||
background-color: red;
|
||||
-webkit-transition: background-color 600ms linear;
|
||||
-moz-transition: background-color 600ms linear;
|
||||
transition: background-color 600ms linear;
|
||||
}
|
||||
.green {
|
||||
background-color: MediumSpringGreen;
|
||||
-webkit-transition: background-color 600ms linear;
|
||||
-moz-transition: background-color 600ms linear;
|
||||
transition: background-color 600ms linear;
|
||||
}
|
||||
.fold {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 450px;
|
||||
position: relative;
|
||||
}
|
||||
.grid {
|
||||
display: inline-block;
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
body {
|
||||
font-siz----e: 10pt;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1279px) {
|
||||
.wide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="fold">
|
||||
|
||||
<div class="behold" style="overflow: hidden; position: relative; width: 100%; min-height 400px; margin: -200px 0 0; padding:0; top: 40%; text-align: center;">
|
||||
|
||||
<div class="graphic grid" style="min-width: 300px; max-width: 600px; height: 400px;
|
||||
position: relative; margin:0 auto; padding:0;">
|
||||
|
||||
<img src="./web/img/server.png" class="server" style="position: absolute; top: 2%; left: 35%; wid-th: 50%;">
|
||||
|
||||
<div class="desktop" style="height: 10em; width: 17em; position: absolute; top: 36%; left: 3%;">
|
||||
<div class="monitor" style="height: 100%; width: 100%; background: #222; padding: .75em; margin-left: -.75em; border-radius: 1em;">
|
||||
<div class="dull screen GUN" style="height: 100%; width: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="stand" style="margin: 1px auto 0px;
|
||||
border-bottom: 2.75em solid #888;
|
||||
border-left: .5em solid transparent;
|
||||
border-right: .5em solid transparent;
|
||||
height: 0;
|
||||
width: 3.2em;">
|
||||
</div>
|
||||
<div class="stand" style="width: 6em; height: .5em; background: #888; margin: 0px auto"></div>
|
||||
</div>
|
||||
|
||||
<div class="laptop" style="height: 7em; width: 12em; position: absolute; top: 60%; left: 48%;">
|
||||
<div class="lid" style="height: 100%; width: 100%; background: #222; padding: .6em; margin-left: -.6em; border-radius: .6em .6em 0em 0em;">
|
||||
<div class="dull screen GUN" style="height: 100%; width: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="case" style="height: .75em; width: 140%; margin-left: -20%; background: #999; border-radius: 0em 0em 5em 5em;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="phone" style="height: 3.75em; width: 2.25em; position: absolute; top: 35%; left: 70%;">
|
||||
<div class="case" style="height: 100%; width: 100%; background: #222; padding: .5em .2em; margin-left: -.2em; border-radius: 0.25em;">
|
||||
<div class="dull screen GUN" style="height: 100%; width: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow desktop-server" style="width: 52px; height: 52px; border: dashed 0px FireBrick; border-radius: 50px 0 0 0;
|
||||
position: absolute; left: 20%; top: 15%; border-width: 3px 0px 0px 3px;">
|
||||
<div class="rarr" style="position: absolute; top: -.59em; right: -.7em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: .5em solid transparent;
|
||||
border-left: 1em solid FireBrick;
|
||||
border-bottom: .5em solid transparent;">
|
||||
</div>
|
||||
<div class="darr" style="position: absolute; bottom: -.75em; left: -.59em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: .5em solid transparent;
|
||||
border-right: .5em solid transparent;
|
||||
border-top: 1em solid FireBrick;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow phone-server" style="width: 26px; height: 52px; border: dashed 0px FireBrick; border-radius: 0 0 50px 0;
|
||||
position: absolute; left: 80%; top: 35%; border-width: 0px 3px 3px 0px;">
|
||||
<div class="uarr" style="position: absolute; top: -.9em; right: -.59em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: .5em solid transparent;
|
||||
border-right: .5em solid transparent;
|
||||
border-bottom: 1em solid FireBrick;">
|
||||
</div>
|
||||
<div class="larr" style="position: absolute; bottom: -.55em; left: -.59em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: .5em solid transparent;
|
||||
border-right: 1em solid FireBrick;
|
||||
border-bottom: .5em solid transparent;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow updown laptop-server" style="height: 50px; border: dashed 0px FireBrick; border-radius: 0;
|
||||
position: absolute; left: 60%; top: 40%; border-width: 0px 3px 0px 0px;">
|
||||
<div class="uarr" style="position: absolute; top: -1em; left: -.45em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: .5em solid transparent;
|
||||
border-right: .5em solid transparent;
|
||||
border-bottom: 1em solid FireBrick;">
|
||||
</div>
|
||||
<div class="darr" style="position: absolute; bottom: -1em; left: -.45em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: .5em solid transparent;
|
||||
border-right: .5em solid transparent;
|
||||
border-top: 1em solid FireBrick;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span style="color: transparent">Distributed embedded graph database engine. The no pain, no cost, no backend, NoDB database, gun.</span>
|
||||
</div>
|
||||
<div class="graphic wide grid" style="min-width: 300px; max-width: 600px; height: 400px;
|
||||
position: relative; margin:0 auto; padding:0;">
|
||||
|
||||
<div class="arrow server-server" style="width: 100px; height: 0px; border: dashed 0px FireBrick; border-radius: 0;
|
||||
position: absolute; left: -9%; top: 15%; border-width: 3px 0px 0px 0px;">
|
||||
<div class="rarr" style="position: absolute; top: -.59em; left: -.5em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: .5em solid transparent;
|
||||
border-right: 1em solid FireBrick;
|
||||
border-bottom: .5em solid transparent;">
|
||||
</div>
|
||||
<div class="larr" style="position: absolute; top: -.59em; right: -.6em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 1em solid FireBrick;
|
||||
border-bottom: .5em solid transparent;
|
||||
border-top: .5em solid transparent;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img src="./web/img/server.png" class="server" style="position: absolute; top: 2%; right: 35%;">
|
||||
|
||||
<div class="desktop" style="height: 10em; width: 17em; position: absolute; top: 36%; right: 3%;">
|
||||
<div class="monitor" style="height: 100%; width: 100%; background: #222; padding: .75em; margin-left: -.75em; border-radius: 1em;">
|
||||
<div class="dull screen GUN" style="height: 100%; width: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="stand" style="margin: 1px auto 0px;
|
||||
border-bottom: 2.75em solid #888;
|
||||
border-left: .5em solid transparent;
|
||||
border-right: .5em solid transparent;
|
||||
height: 0;
|
||||
width: 3.2em;">
|
||||
</div>
|
||||
<div class="stand" style="width: 6em; height: .5em; background: #888; margin: 0px auto"></div>
|
||||
</div>
|
||||
|
||||
<div class="laptop" style="height: 7em; width: 12em; position: absolute; top: 60%; right: 48%;">
|
||||
<div class="lid" style="height: 100%; width: 100%; background: #222; padding: .6em; margin-left: -.6em; border-radius: .6em .6em 0em 0em;">
|
||||
<div class="dull screen GUN" style="height: 100%; width: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="case" style="height: .75em; width: 140%; margin-left: -20%; background: #999; border-radius: 0em 0em 5em 5em;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="phone" style="height: 3.75em; width: 2.25em; position: absolute; top: 35%; right: 70%;">
|
||||
<div class="case" style="height: 100%; width: 100%; background: #222; padding: .5em .2em; margin-left: -.2em; border-radius: 0.25em;">
|
||||
<div class="dull screen GUN" style="height: 100%; width: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow desktop-server" style="width: 52px; height: 52px; border: dashed 0px FireBrick; border-radius: 0 50px 0 0;
|
||||
position: absolute; right: 20%; top: 15%; border-width: 3px 3px 0px 0px;">
|
||||
<div class="rarr" style="position: absolute; top: -.59em; left: -.5em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: .5em solid transparent;
|
||||
border-right: 1em solid FireBrick;
|
||||
border-bottom: .5em solid transparent;">
|
||||
</div>
|
||||
<div class="darr" style="position: absolute; bottom: -.75em; right: -.59em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: .5em solid transparent;
|
||||
border-right: .5em solid transparent;
|
||||
border-top: 1em solid FireBrick;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="arrow phone-server" style="width: 26px; height: 52px; border: dashed 0px FireBrick; border-radius: 0 0 0px 50px;
|
||||
position: absolute; right: 80.3%; top: 34.3%; border-width: 0px 0px 3px 3px;">
|
||||
<div class="uarr" style="position: absolute; top: -.8em; left: -.59em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: .5em solid transparent;
|
||||
border-right: .5em solid transparent;
|
||||
border-bottom: 1em solid FireBrick;">
|
||||
</div>
|
||||
<div class="rarr" style="position: absolute; bottom: -.55em; right: -.7em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: .5em solid transparent;
|
||||
border-left: 1em solid FireBrick;
|
||||
border-bottom: .5em solid transparent;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow updown laptop-server" style="height: 50px; border: dashed 0px FireBrick; border-radius: 0;
|
||||
position: absolute; right: 60%; top: 40%; border-width: 0px 3px 0px 0px;">
|
||||
<div class="uarr" style="position: absolute; top: -1em; left: -.45em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: .5em solid transparent;
|
||||
border-right: .5em solid transparent;
|
||||
border-bottom: 1em solid FireBrick;">
|
||||
</div>
|
||||
<div class="darr" style="position: absolute; bottom: -1em; left: -.45em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: .5em solid transparent;
|
||||
border-right: .5em solid transparent;
|
||||
border-top: 1em solid FireBrick;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span style="color: transparent">Distributed embedded graph database engine. The no pain, no cost, no backend, NoDB database, gun.</span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
var c = ['dull', 'blue', 'green']
|
||||
, a = 'dull blue red green';
|
||||
$(".screen").click(function(){
|
||||
c.push(c.shift());
|
||||
var to = c[0];
|
||||
$(this).removeClass(a).addClass(to);
|
||||
$('.screen').not(this).each(function(){
|
||||
var t = $(this);
|
||||
setTimeout(function(){
|
||||
t.removeClass(a).addClass(to);
|
||||
}, rand(400,700));
|
||||
});
|
||||
});
|
||||
function rand(min, max) {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="center" style="margin-top: 2%;">
|
||||
<div class="lean" style="font-size: 400%;">Easiest Database Ever</div>
|
||||
<div class="lean" style="font-size: 225%;">Sync state in a cinch at a distributed system scale.</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<a href="https://github.com/amark/gun" target="_blank" class="wide"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
|
||||
<!-- END FOLD -->
|
||||
|
||||
<! OLD BLOG POST HERE -->
|
||||
|
||||
<style>
|
||||
#main {
|
||||
min-width: 250px;
|
||||
max-width: 700px;
|
||||
@ -20,34 +373,24 @@
|
||||
padding: 2% 5%;
|
||||
background: white;
|
||||
background: rgba(100%,100%,100%,.6);
|
||||
font-family: Arial;
|
||||
font-size: 18pt;
|
||||
text-shadow: 0px 0px 7px #DDD;
|
||||
line-height: 20pt;
|
||||
}
|
||||
#main p {
|
||||
text-indent: 2em;
|
||||
}
|
||||
form input {
|
||||
font-size: 18pt;
|
||||
padding: .75em;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
</head>
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1><i>gun</i></h1>
|
||||
<h3>Massively distributed, embedded graph engine.</h3>
|
||||
<h3>The blog that started it all...</h3>
|
||||
<p>
|
||||
Gun is a persisted distributed cache, part of a NoDB movement.
|
||||
It requires zero maintenance and runs on your own infrastructure.
|
||||
Think of it as <i>"Dropbox for Databases"</i> or a <i>"Self-hosted Firebase"</i>.
|
||||
This is an early preview, so check out the quick demo below and then read on.
|
||||
This is an early preview, so check out the <a href="http://github.com/amark/gun">github</a> and read on.
|
||||
</p>
|
||||
<center><iframe src="https://www.screenr.com/embed/ZDdN" width="80%" height="396" frameborder="0"></iframe></center>
|
||||
<!--
|
||||
<center><a href="http://www.screenr.com/ZDdN"><img src="./img/screenr.png" height="396" frameborder="0"></img></a></center>
|
||||
-->
|
||||
<p>
|
||||
As a reminder, this is running entirely without any database.
|
||||
Everything gets cached, so your users experience lightning fast response times.
|
||||
Since gun can be embedded anywhere javascript can run,
|
||||
that cache can optionally be right inside your user's browser using localstorage fallbacks.
|
||||
@ -56,9 +399,7 @@
|
||||
<p>
|
||||
All conflict resolution happens locally in each peer using a deterministic algorithm.
|
||||
Such that eventual consistency is guaranteed across all writes within the mesh,
|
||||
with fault tolerant retries built in at each step.
|
||||
Gun will even automatically use, configure, and optionally install Redis as a cache on your server nodes for you.
|
||||
Data integrity is now a breeze.
|
||||
with fault tolerant retries built in at each step. Data integrity is now a breeze.
|
||||
</p>
|
||||
<p>
|
||||
Gun also establishes and repairs server to server communication across geographically separated machines,
|
||||
@ -90,12 +431,10 @@
|
||||
We are excited about this and working hard to finish the first release.
|
||||
</p>
|
||||
<p>
|
||||
If you would like to learn more, please let us know...
|
||||
If you would like to learn more, email <a href="mailto:hi@gunDB.io">hi@gunDB.io</a> -
|
||||
or join the <a href="http://groups.google.com/forum/#!forum/g-u-n" target="_blank">Google Group</a>.
|
||||
Plus we're hiring, so contact us!
|
||||
</p>
|
||||
<center><form class="signup" target="_self" onsubmit="" action="javascript: submitForm()">
|
||||
<input class="email" value="email@example.org">
|
||||
<input class="submit" type="button" value="I'm interested!">
|
||||
</form></center>
|
||||
<h2>FAQ</h2>
|
||||
<h4>Why did you build this thing?</h4>
|
||||
<p>
|
||||
@ -144,25 +483,9 @@
|
||||
Your app is nothing without your data.
|
||||
</p>
|
||||
</div>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
|
||||
<script>
|
||||
function submitForm(e){
|
||||
var google = {"entry.294216585": $('.email').val()}
|
||||
, done = function(){
|
||||
$("form").slideUp();
|
||||
};
|
||||
$.post(
|
||||
"https://docs.google.com/forms/d/1uhl2W1wdj70LaZu1Zkf94SQioxERTtrJAM_UIWAZNdE/formResponse"
|
||||
,$.param(google), done).error(done);
|
||||
console.log(google, $.param(google));
|
||||
if(e){
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
}
|
||||
$(function(){
|
||||
$(document).on('click','.submit',submitForm);
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
<!-- END OLD BLOG POST -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
web/img/server.png
Normal file
BIN
web/img/server.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
@ -1,47 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.1"
|
||||
width="104.80719"
|
||||
height="52.775127"
|
||||
id="svg7584">
|
||||
<defs
|
||||
id="defs7586" />
|
||||
<metadata
|
||||
id="metadata7589">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
transform="translate(-304.73926,-448.83176)"
|
||||
id="layer1">
|
||||
<g
|
||||
transform="translate(176.16559,-378.81147)"
|
||||
id="g7567">
|
||||
<path
|
||||
d="m 151.79064,827.64323 58.37326,0 6.88337,46.98126 -72.14001,0 z"
|
||||
id="rect3979"
|
||||
style="fill:#868686;fill-opacity:1" />
|
||||
<rect
|
||||
width="104.80719"
|
||||
height="7.1926503"
|
||||
x="128.57367"
|
||||
y="873.22571"
|
||||
id="rect3982"
|
||||
style="fill:#868686;fill-opacity:1" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
299
web/time.html
299
web/time.html
@ -3,15 +3,20 @@
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
||||
<!--
|
||||
<script src="../gun.js"></script>
|
||||
<link id="style" rel="stylesheet" href="https://yandex.st/highlightjs/8.0/styles/sunburst.min.css">
|
||||
<script src="https://yandex.st/highlightjs/8.0/highlight.min.js"></script>
|
||||
<script src="https://dl.dropboxusercontent.com/u/4374976/random/phrase.js"></script>
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
@import url(http://fonts.googleapis.com/css?family=Dosis|Poiret+One|Oxygen);
|
||||
@import url(https://fonts.googleapis.com/css?family=Dosis|Poiret+One|Oxygen);
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
font-family: 'Oxygen', Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
|
||||
}
|
||||
.center {
|
||||
@ -68,26 +73,297 @@
|
||||
background: white url('./img/devices.svg') no-repeat 50% 50%;
|
||||
height: 40em;
|
||||
}
|
||||
.GUN {
|
||||
background: transparent url('./img/gun.svg') no-repeat 50% 50%;
|
||||
background-size: 60%;
|
||||
}
|
||||
.dull {
|
||||
background-color: #EEE;
|
||||
-webkit-transition: background-color 600ms linear;
|
||||
-moz-transition: background-color 600ms linear;
|
||||
transition: background-color 600ms linear;
|
||||
}
|
||||
.blue {
|
||||
background-color: skyblue;
|
||||
-webkit-transition: background-color 600ms linear;
|
||||
-moz-transition: background-color 600ms linear;
|
||||
transition: background-color 600ms linear;
|
||||
}
|
||||
.red {
|
||||
background-color: red;
|
||||
-webkit-transition: background-color 600ms linear;
|
||||
-moz-transition: background-color 600ms linear;
|
||||
transition: background-color 600ms linear;
|
||||
}
|
||||
.green {
|
||||
background-color: MediumSpringGreen;
|
||||
-webkit-transition: background-color 600ms linear;
|
||||
-moz-transition: background-color 600ms linear;
|
||||
transition: background-color 600ms linear;
|
||||
}
|
||||
.fold {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 450px;
|
||||
position: relative;
|
||||
}
|
||||
.grid {
|
||||
display: inline-block;
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
body {
|
||||
font-siz----e: 10pt;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1279px) {
|
||||
.wide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="html" style="width: 100%; height: 40em; margin:0;padding:0;">
|
||||
|
||||
<div class="desktop" style="height: 10em; width: 17em; position: absolute; top: 40%; left: 20%;">
|
||||
<div class="fold">
|
||||
|
||||
<div class="behold" style="overflow: hidden; position: relative; width: 100%; min-height 400px; margin: -200px 0 0; padding:0; top: 40%; text-align: center;">
|
||||
|
||||
<div class="graphic grid" style="min-width: 300px; max-width: 600px; height: 400px;
|
||||
position: relative; margin:0 auto; padding:0;">
|
||||
|
||||
<img src="./img/server.png" class="server" style="position: absolute; top: 2%; left: 35%; wid-th: 50%;">
|
||||
|
||||
<div class="desktop" style="height: 10em; width: 17em; position: absolute; top: 36%; left: 3%;">
|
||||
<div class="monitor" style="height: 100%; width: 100%; background: #222; padding: .75em; margin-left: -.75em; border-radius: 1em;">
|
||||
<div class="monitor" style="height: 100%; width: 100%; background: #999;">
|
||||
<div class="dull screen GUN" style="height: 100%; width: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
<center><img src="./img/stand.svg" style="margin-top: 1px;"></img></center>
|
||||
<div class="stand" style="margin: 1px auto 0px;
|
||||
border-bottom: 2.75em solid #888;
|
||||
border-left: .5em solid transparent;
|
||||
border-right: .5em solid transparent;
|
||||
height: 0;
|
||||
width: 3.2em;">
|
||||
</div>
|
||||
<div class="stand" style="width: 6em; height: .5em; background: #888; margin: 0px auto"></div>
|
||||
</div>
|
||||
|
||||
<div class="laptop" style="height: 7em; width: 12em; position: absolute; top: 60%; left: 48%;">
|
||||
<div class="lid" style="height: 100%; width: 100%; background: #222; padding: .6em; margin-left: -.6em; border-radius: .6em .6em 0em 0em;">
|
||||
<div class="dull screen GUN" style="height: 100%; width: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="case" style="height: .75em; width: 140%; margin-left: -20%; background: #999; border-radius: 0em 0em 5em 5em;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="phone" style="height: 3.75em; width: 2.25em; position: absolute; top: 35%; left: 70%;">
|
||||
<div class="case" style="height: 100%; width: 100%; background: #222; padding: .5em .2em; margin-left: -.2em; border-radius: 0.25em;">
|
||||
<div class="dull screen GUN" style="height: 100%; width: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow desktop-server" style="width: 52px; height: 52px; border: dashed 0px FireBrick; border-radius: 50px 0 0 0;
|
||||
position: absolute; left: 20%; top: 15%; border-width: 3px 0px 0px 3px;">
|
||||
<div class="rarr" style="position: absolute; top: -.59em; right: -.7em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: .5em solid transparent;
|
||||
border-left: 1em solid FireBrick;
|
||||
border-bottom: .5em solid transparent;">
|
||||
</div>
|
||||
<div class="darr" style="position: absolute; bottom: -.75em; left: -.59em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: .5em solid transparent;
|
||||
border-right: .5em solid transparent;
|
||||
border-top: 1em solid FireBrick;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow phone-server" style="width: 26px; height: 52px; border: dashed 0px FireBrick; border-radius: 0 0 50px 0;
|
||||
position: absolute; left: 80%; top: 35%; border-width: 0px 3px 3px 0px;">
|
||||
<div class="uarr" style="position: absolute; top: -.9em; right: -.59em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: .5em solid transparent;
|
||||
border-right: .5em solid transparent;
|
||||
border-bottom: 1em solid FireBrick;">
|
||||
</div>
|
||||
<div class="larr" style="position: absolute; bottom: -.55em; left: -.59em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: .5em solid transparent;
|
||||
border-right: 1em solid FireBrick;
|
||||
border-bottom: .5em solid transparent;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow updown laptop-server" style="height: 50px; border: dashed 0px FireBrick; border-radius: 0;
|
||||
position: absolute; left: 60%; top: 40%; border-width: 0px 3px 0px 0px;">
|
||||
<div class="uarr" style="position: absolute; top: -1em; left: -.45em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: .5em solid transparent;
|
||||
border-right: .5em solid transparent;
|
||||
border-bottom: 1em solid FireBrick;">
|
||||
</div>
|
||||
<div class="darr" style="position: absolute; bottom: -1em; left: -.45em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: .5em solid transparent;
|
||||
border-right: .5em solid transparent;
|
||||
border-top: 1em solid FireBrick;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span style="color: transparent">Distributed embedded graph database engine. The no pain, no cost, no backend, NoDB database, gun.</span>
|
||||
</div>
|
||||
<div class="graphic wide grid" style="min-width: 300px; max-width: 600px; height: 400px;
|
||||
position: relative; margin:0 auto; padding:0;">
|
||||
|
||||
<div class="arrow server-server" style="width: 100px; height: 0px; border: dashed 0px FireBrick; border-radius: 0;
|
||||
position: absolute; left: -9%; top: 15%; border-width: 3px 0px 0px 0px;">
|
||||
<div class="rarr" style="position: absolute; top: -.59em; left: -.5em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: .5em solid transparent;
|
||||
border-right: 1em solid FireBrick;
|
||||
border-bottom: .5em solid transparent;">
|
||||
</div>
|
||||
<div class="larr" style="position: absolute; top: -.59em; right: -.6em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 1em solid FireBrick;
|
||||
border-bottom: .5em solid transparent;
|
||||
border-top: .5em solid transparent;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img src="./img/server.png" class="server" style="position: absolute; top: 2%; right: 35%;">
|
||||
|
||||
<div class="desktop" style="height: 10em; width: 17em; position: absolute; top: 36%; right: 3%;">
|
||||
<div class="monitor" style="height: 100%; width: 100%; background: #222; padding: .75em; margin-left: -.75em; border-radius: 1em;">
|
||||
<div class="dull screen GUN" style="height: 100%; width: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="stand" style="margin: 1px auto 0px;
|
||||
border-bottom: 2.75em solid #888;
|
||||
border-left: .5em solid transparent;
|
||||
border-right: .5em solid transparent;
|
||||
height: 0;
|
||||
width: 3.2em;">
|
||||
</div>
|
||||
<div class="stand" style="width: 6em; height: .5em; background: #888; margin: 0px auto"></div>
|
||||
</div>
|
||||
|
||||
<div class="laptop" style="height: 7em; width: 12em; position: absolute; top: 60%; right: 48%;">
|
||||
<div class="lid" style="height: 100%; width: 100%; background: #222; padding: .6em; margin-left: -.6em; border-radius: .6em .6em 0em 0em;">
|
||||
<div class="dull screen GUN" style="height: 100%; width: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="case" style="height: .75em; width: 140%; margin-left: -20%; background: #999; border-radius: 0em 0em 5em 5em;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="phone" style="height: 3.75em; width: 2.25em; position: absolute; top: 35%; right: 70%;">
|
||||
<div class="case" style="height: 100%; width: 100%; background: #222; padding: .5em .2em; margin-left: -.2em; border-radius: 0.25em;">
|
||||
<div class="dull screen GUN" style="height: 100%; width: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow desktop-server" style="width: 52px; height: 52px; border: dashed 0px FireBrick; border-radius: 0 50px 0 0;
|
||||
position: absolute; right: 20%; top: 15%; border-width: 3px 3px 0px 0px;">
|
||||
<div class="rarr" style="position: absolute; top: -.59em; left: -.5em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: .5em solid transparent;
|
||||
border-right: 1em solid FireBrick;
|
||||
border-bottom: .5em solid transparent;">
|
||||
</div>
|
||||
<div class="darr" style="position: absolute; bottom: -.75em; right: -.59em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: .5em solid transparent;
|
||||
border-right: .5em solid transparent;
|
||||
border-top: 1em solid FireBrick;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="arrow phone-server" style="width: 26px; height: 52px; border: dashed 0px FireBrick; border-radius: 0 0 0px 50px;
|
||||
position: absolute; right: 80.3%; top: 34.3%; border-width: 0px 0px 3px 3px;">
|
||||
<div class="uarr" style="position: absolute; top: -.8em; left: -.59em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: .5em solid transparent;
|
||||
border-right: .5em solid transparent;
|
||||
border-bottom: 1em solid FireBrick;">
|
||||
</div>
|
||||
<div class="rarr" style="position: absolute; bottom: -.55em; right: -.7em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: .5em solid transparent;
|
||||
border-left: 1em solid FireBrick;
|
||||
border-bottom: .5em solid transparent;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow updown laptop-server" style="height: 50px; border: dashed 0px FireBrick; border-radius: 0;
|
||||
position: absolute; right: 60%; top: 40%; border-width: 0px 3px 0px 0px;">
|
||||
<div class="uarr" style="position: absolute; top: -1em; left: -.45em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: .5em solid transparent;
|
||||
border-right: .5em solid transparent;
|
||||
border-bottom: 1em solid FireBrick;">
|
||||
</div>
|
||||
<div class="darr" style="position: absolute; bottom: -1em; left: -.45em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: .5em solid transparent;
|
||||
border-right: .5em solid transparent;
|
||||
border-top: 1em solid FireBrick;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span style="color: transparent">Distributed embedded graph database engine. The no pain, no cost, no backend, NoDB database, gun.</span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
var c = ['dull', 'blue', 'green']
|
||||
, a = 'dull blue red green';
|
||||
$(".screen").click(function(){
|
||||
c.push(c.shift());
|
||||
var to = c[0];
|
||||
$(this).removeClass(a).addClass(to);
|
||||
$('.screen').not(this).each(function(){
|
||||
var t = $(this);
|
||||
setTimeout(function(){
|
||||
t.removeClass(a).addClass(to);
|
||||
}, rand(400,700));
|
||||
});
|
||||
});
|
||||
function rand(min, max) {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="center" style="margin-top: 2%;">
|
||||
<div class="lean" style="font-size: 400%;">Easiest Database Ever</div>
|
||||
<div class="lean" style="font-size: 225%;">Sync state in a cinch at a distributed system scale.</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div> <!-- END FOLD -->
|
||||
|
||||
<div style="display: none;">
|
||||
<div class="svg">
|
||||
AWESOME SAUCE COLOR SYNCING
|
||||
</div>
|
||||
|
||||
<div class="center">
|
||||
<h1 class="lean">Easiest . Database . Ever</h1>
|
||||
<h2 class="lean">Scale without pain, because it is decentralized.</h2>
|
||||
</div>
|
||||
<div id="steps">
|
||||
<div id="step1">
|
||||
As easy as 1, 2, 3!
|
||||
@ -224,6 +500,7 @@ gun.load('<span class="random">my/first/data</span>', function(err, data){
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<a href="https://github.com/amark/gun"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
|
||||
</div>
|
||||
<a href="https://github.com/amark/gun" target="_blank" class="wide"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user