-
Notifications
You must be signed in to change notification settings - Fork 7
/
content.mustache
55 lines (55 loc) · 3.88 KB
/
content.mustache
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="content.css">
</head>
<body>
<div class="background" id="gradient"></div>
{{> menu}}
<div id="wrap" class="needsfocus" onclick="">
<a id="noanim"></a>
{{!
The ​ below are zero-width spaces, to help Chrome break off between characters and punctuation and inside ligatures.
Another option would be <wbr>, which would fix ligatures in Firefox (with display: none) but break them in Chrome.
}}
<div class="header annotation" id="header-1">Even if we get hacked​,</div>
<div class="header annotation" id="header-2"><span class="header-hidden">Even if we get hacked​,</span><span> they can​'​t read your </span><span class="marquee-placeholder">documents​.</span><div class="marquee"><div class="marquee-el">documents.</div><div class="marquee-hidden">,</div> <div class="marquee-el">presentations.</div> <div class="marquee-hidden">and</div> <div class="marquee-el">notes.</div></div></div>
<div class="header annotation" id="header-3"><span class="header-hidden">Even if we get hacked​, they can​'​t read your <div class="marquee"><div class="marquee-el">documents.</div><div class="marquee-hidden">,</div> <div class="marquee-el">presentations.</div> <div class="marquee-hidden">and</div> <div class="marquee-el">notes.</div></div> </span><span class="header-smaller">(​<a href="#documents-encrypted">How​?</a>​)</span></div>
<a href="#noanim" id="fastforward"><i class="icon-play"></i><i class="icon-play"></i></a>
<div class="annotation" id="annotation-1">Create and edit f​iles online​, <a target="_top" href="/docs/security">securely</a>​.</div>
<div class="annotation" id="annotation-2">Give it a try​!</div>
<div class="arrow" id="arrow-1"><img src="images/arrow.svg"></div>
<div id="demo-bar">
{{> menu}}
</div>
<div id="contents">
<div class="row">
<div class="img" style="float: right; background-image: url(images/collaborate.png); --height: 343;"></div>
<p class="title">Collaborate in real-time</p>
<p>Work together on documents with your teammates or classmates. Even when you share a document, we (the makers of Airborn) <em>still</em> can't read your documents. You can even set a password on your document for extra protection.</p>
<p>Also, we made it so that only one person at a time can type in a paragraph. No longer can that annoying classmate delete what you just typed.</p>
</div>
<div class="row">
<div class="img" style="float: left; background-image: url(images/presentations.png); --height: 408;"></div>
<p class="title">Make fancy 3D presentations</p>
<p>Airborn is not just for text documents! You can make presentations as well.</p>
<p>You can add videos to your slides, and make awesome 3D transitions between slides. Or keep it simple, it's up to you.</p>
<p>Just as with text documents, we can't see your presentations. Now, you can keep the presentation on your company's finance forecasts in the cloud without fear of spying eyes.</p>
</div>
<div class="row" id="documents-encrypted">
<div class="img" style="float: right; background-image: url(images/documents-encrypted.png); --height: 357;"></div>
<p class="title">This is what your documents look like to us.</p>
<p>As you can see,</p>
<ul>
<li>They're encrypted with AES.</li>
<li>The contents (on the right) are gibberish. Even if we wanted to read them, we can't. And neither can someone who hacks us.</li>
<li>The names of the documents (on the left) are gibberish as well. So not only can't we read your documents, we also can't see what you name them.</li>
</ul>
<p><a target="_top" href="/docs/security">Read more…</a></p>
</div>
</div>
</div>
</body>
</html>