-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
247 lines (202 loc) · 12.8 KB
/
index.html
File metadata and controls
247 lines (202 loc) · 12.8 KB
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<title>SplitBox.me</title>
<link rel="icon" type="image/png" href="images/logo.png" />
<meta property="og:title" content="SplitBox.me - Secure Cloud Sharing" />
<meta property="og:site_name" content="SplitBox.me"/>
<meta property="og:description" content="SplitBox lets you securely share any file for free - and we mean it. Your file will never be stored completely on any server, and not even parts of it will ever leave your device unencrypted. We achieve this by localy encrypting your file, then splitting it up into unusable parts and finally uploading it to your connected cloud services." />
<meta property="og:image" content="images/logo.png" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400' rel='stylesheet' type='text/css'>
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="css/dropzone.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
</head>
<body>
<header>
<nav class="primary-color-dark" role="navigation">
<div class="nav-wrapper container">
<a id="logo-left-container" href="#" class="brand-logo hide-on-small-only">
<img src="images/logo.png" />
</a>
<ul class="right hide-on-med-and-down">
<li><a href="http://splitbox.me">Home</a></li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li><a href="http://splitbox.me">Home</a></li>
</ul>
<a href="#" data-activates="nav-mobile" class="button-collapse"><i
class="material-icons accent-color-text">menu</i></a>
</div>
</nav>
</header>
<main>
<div class="container">
<h4>SplitBox.me - <a href="about.html">Secure File Sharing</a></h4>
<p>SplitBox lets you securely share any file for free - and we mean it. Your file will never be stored completely on any server, and not even parts of it will ever leave your device unencrypted. We achieve this by localy encrypting your file using <a href="https://en.wikipedia.org/wiki/One-time_pad" target="_blank">one-time pad</a>, then splitting it up into unusable parts and finally uploading these to your connected cloud services. If you are suspicious, feel free to check out our code on <a href="https://github.com/SplitBoxMe" target="_blank">GitHub</a>.</p>
<div class="divider"></div>
<div class="section">
<h5>Connect your cloud storage</h5>
<p>The more cloud services you connect, the better your files will be protected. Make sure to use at least two, otherwise your encrypted file will not be split up into unusable parts.</p>
<p><b>Notice:</b> Right now the safest way is to have at least Dropbox connected as a cloud service. We are still figuring out a safe way to overcome the not set cross-origin headers on Microsoft OneDrive and Google Drive. This files are currently transferred through a Proxy.</p>
<a id="cloud_dropbox" class="waves-effect waves-light btn-large" href="javascript:authorizeWithDropbox();" style="background-color: #00aced;"><i class="material-icons left">cloud_queue</i>Dropbox</a>
<a id="cloud_googledrive" class="waves-effect waves-light btn-large" style="background-color: #dd4b39;" href="javascript:authorizeWithGoogleDrive();"><i class="material-icons left">cloud_queue</i>Google Drive</a>
<a id="cloud_onedrive" class="waves-effect waves-light btn-large" href="https://login.live.com/oauth20_authorize.srf?client_id=000000004816FB64&scope=onedrive.readwrite&response_type=token&redirect_uri=https://splitbox.me" style="background-color: #094AB2;"><i class="material-icons left">cloud_queue</i>OneDrive</a>
<a id="cloud_box" class="waves-effect waves-light btn-large tooltipped disabled" data-position="bottom" data-delay="50" data-tooltip="coming soon" style="background-color: #3B5998;"><i class="material-icons left">cloud_off</i>Box</a>
<a id="cloud_owncloud" class="waves-effect waves-light btn-large tooltipped disabled" data-position="bottom" data-delay="50" data-tooltip="coming soon" style="background-color: #1D2D44;"><i class="material-icons left">cloud_off</i>OwnCloud</a>
</div>
<div class="divider"></div>
<div class="section">
<h5>Select your file</h5>
<p>If you selected your file and connected your cloud services, click here and we'll start to process your file. This will be done on your machine, your file will not be transferred to our servers. Encryption and uploading may take a few seconds.</p>
<p id="compatibilityWarning" class="hide"><span class="red-text">Compatibility warning:</span> This app has been developed using new web technologies to increase performance and save server costs. Not all browsers support these technologies yet. Please switch to <a href="http://www.google.com/chrome/" target="_blnak">Chrome</a> if you are having issues.</p>
<form action="#" class="dropzone" id="imageDropzone"></form>
</div>
<div class="section hide">
<h5>Encrypt, Split & Upload</h5>
<p>If you selected your file and connected your cloud services, click here and we'll start to process your file. This will be done on your machine, your file will not be transferred to our servers. Encryption and uploading may take a few seconds.</p>
<a id="processButton" href="javascript:processFile();" class="primary-color-dark waves-effect waves-light btn-large disabled"><i class="material-icons left">backup</i>Process File</a>
</div>
<div class="section hide">
<h5>Share</h5>
<p>You can now share a link to your file. Anyone with that link can download the encrypted parts of your file and restore the original file. However, you may want to add <a href="https://en.wikipedia.org/wiki/Two-factor_authentication" target="_blank">two-factor authentication</a> to make sure that you are in control of who gets access to your file.</p>
<a id="shareButton" href="javascript:shareFile();" class="primary-color-dark waves-effect waves-light btn-large disabled"><i class="material-icons left">share</i>Share</a>
</div>
<div id="modalDownload" class="modal">
<div class="modal-content">
<h4 id="downloadHeader">You just received a file</h4>
<p id="downloadDescription">We'll download, merge and decrypt it now.</p>
<div id="downloadAnimationContainer">
<div id="boxDownloadLeft"> </div>
<div id="boxDownloadRight"> </div>
</div>
</div>
</div>
<div id="modalUpload" class="modal">
<div class="modal-content">
<h4 id="uploadHeader">Modal Header</h4>
<p id="uploadDescription">A bunch of text</p>
<div id="uploadAnimationContainer">
<div id="boxLeft"> </div>
<div id="boxRight"> </div>
</div>
</div>
</div>
<div id="modalKey" class="modal">
<div class="modal-content">
<h4 id="uploadHeader">Decrypt Link</h4>
<p id="uploadDescription">The download links for this file have been encrypted. Please enter the decrypt key:</p>
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<input id="downloadKey" type="text" value="">
<label class="active" for="downloadLink">Key</label>
</div>
</div>
</form>
<a id="decryptLink" href="javascript:decryptLink();" class="primary-color-dark waves-effect waves-light btn"><i class="material-icons left">file_download</i>Download</a>
</div>
</div>
<div id="modalShare" class="modal">
<div class="modal-content">
<h4 id="uploadHeader">Share your file</h4>
<p id="uploadDescription">Your file has been securely uploaded to the cloud storage providers you selected. You can now share the download link. You may want to encrypt the link and add <a href="https://en.wikipedia.org/wiki/Two-factor_authentication" target="_blank">two-factor authentication</a> to make sure that you are in control of who gets access to your file.</p>
<a id="encryptLink" href="javascript:encryptLink();" class="primary-color-dark waves-effect waves-light btn"><i class="material-icons left">lock</i>Encrypt Link</a>
<div id="sendSMSForm" class="hide">
<br/><br/>
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<input id="decryptPass" type="text" value=" " placeholder="8 digit code">
<label class="active" for="decryptPass">Key</label>
</div>
<div class="input-field col s6">
<input id="phoneNumber" type="tel" value="" placeholder="+491234567890">
<label class="active" for="phoneNumber">Phone number</label>
</div>
</div>
</form>
<a id="sendSMS" href="javascript:sharePassViaSMS();" class="primary-color-dark waves-effect waves-light btn"><i class="material-icons left">textsms</i>Send SMS</a>
</div>
<br/><br/>
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<input id="downloadLink" type="text" value="" onClick="this.setSelectionRange(0, this.value.length); copyToClipboard(this);">
<label class="active" for="downloadLink">Download Link</label>
</div>
<div class="input-field col s12">
<input id="mailAddress" type="email" value="" placeholder="john.doe@mail.com">
<label class="active" for="mailAddress">E-Mail Address</label>
</div>
<div class="input-field col s12">
<textarea id="mailMessage" class="materialize-textarea" placeholder="Some details about that file you just uploaded"></textarea>
<label class="active" for="mailMessage">Message</label>
</div>
</div>
</form>
<a id="sendMail" href="javascript:shareLinkViaMail();" class="primary-color-dark waves-effect waves-light btn"><i class="material-icons left">mail</i>Send Mail</a>
</div>
</div>
</div>
<!-- preoading stuff -->
<div class="hide">
<img src="images/logo_left.png">
<img src="images/logo_right.png">
</div>
</main>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://www.dropbox.com/static/api/dropbox-datastores-1.2-latest.js" type="text/javascript"></script>
<script src="https://apis.google.com/js/client.js"></script>
<script src="js/aes.js"></script>
<script src="js/materialize.js"></script>
<script src="js/q.js"></script>
<script src="js/dropzone.js"></script>
<script src="js/dropboxconnector.js" type="text/javascript"></script>
<script src="js/googledriveconnector.js" type="text/javascript"></script>
<script src="js/uploadmanager.js"></script>
<script src="js/downloadmanager.js"></script>
<script src="js/onedriveconnector.js"></script>
<script src="js/main.js"></script>
<script src="js/blob.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-68614535-1', 'auto');
ga('send', 'pageview');
</script>
</body>
<footer class="page-footer primary-color">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">SplitBox.me</h5>
<p class="grey-text text-lighten-4">SplitBox lets you securely share any file for free - and we mean it. Your file will never be stored completely on any server, and not even parts of it will ever leave your device unencrypted. We achieve this by localy encrypting your file, then splitting it up into unusable parts and finally uploading it to your connected cloud services.</p>
</div>
<div class="col l3 s12">
<h5 class="white-text">Connect</h5>
<ul>
<li><a class="white-text" href="https://www.facebook.com/SplitBox">Facebook</a></li>
<li><a class="white-text" href="https://twitter.com/SplitBoxMe">Twitter</a></li>
<li><a class="white-text" href="mailto:contact@steppschuh.net">E-Mail</a></li>
</ul>
</div>
<div class="col l3 s12">
</div>
</div>
</div>
<div class="footer-copyright primary-color-dark">
<div class="container">
Developed with love by
<a class="accent-color-text text-lighten-3" href="http://carl-ambroselli.de/">Carl</a>,
<a class="accent-color-text text-lighten-3" href="http://markus-petrykowski.de/">Markus</a> and
<a class="accent-color-text text-lighten-3" href="http://steppschuh.net/">Stephan</a>
</div>
</div>
</footer>
</html>