forked from MartinLalanne/filestash-website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
240 lines (226 loc) · 10.5 KB
/
index.html
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
---
layout: default
head:
- <link rel="alternate" href="/fr/" hreflang="fr" />
---
{% include menu.html context="homepage" %}
<link rel="stylesheet" href="/css/landing-page.css">
<div id="splash" class="slant down">
<div class="row">
<div class="col-sm-12">
<div class="iframe-wrapper onlyForDesktop">
<iframe id="appframe" frameborder="0" src="https://demo.filestash.app/login?type=webdav&url=http://server_webdav" allow="fullscreen;speaker"></iframe>
<div class="arrow-top">
<i class="arrow top"></i>
<i class="arrow top"></i>
try me
<i class="arrow top"></i>
<i class="arrow top"></i>
</div>
</div>
<div class="hgroup">
<h1>Filestash</h1>
<h2>
turns your <br>
<noscript>
<a href="{% post_url 2019-11-26-ftp-web-client %}">FTP</a> / WebDav / <a href="{% post_url 2020-04-30-sftp-browser %}">SFTP</a> / <a href="{% post_url 2019-11-21-s3-browser %}">S3</a> / <a href="{% post_url 2019-11-21-s3-browser %}">Minio</a> / Git / Google drive / Dropbox server
</noscript>
<span id="typing"></span> <br>
into this
<span class="arrow-right onlyForDesktop">
<i class="arrow right"></i>
<i class="arrow right"></i>
<i class="arrow right"></i>
</span>
</h2>
</div>
<div class="screenshot onlyForMobile">
<img alt="Filestash screenshot" src="/img/screenshots/viewerpage.png" />
</div>
<script src="/js/typed.min.js"></script>
<script>
new Typed('#typing', {
strings: [
"rock solid FTP server",
"rock solid SFTP server",
"shiny S3 buckets",
"shiny Minio server",
"awesome Webdav server",
"awesome CardDav/CalDav server",
"Backblaze B2",
"backend systems",
"reliable Git repo",
"reliable mysql server",
"old school LDAP server",
"boring Google Drive",
"boring Dropbox",
],
typeSpeed: 50,
backSpeed: 30,
startDelay: 100,
backDelay: 500,
smartBackspace: true,
loop: true
});
</script>
<p class="button">
<a class="btn" href="/docs">Start now</a>
</p>
</div>
</div>
</div>
<h2 id="introduce-second-heading">An awesome web-based file manager to:</h2>
<div id="features">
<div class="container">
<div class="row features main">
<div class="feature">
<img alt="screenshot of Filestash when uploading files/folders" class="lazy fancy pull-right hidden-xs" data-src="/img/screenshots/feature1.png" />
<h3>Manage your data online</h3>
<p>
Filestash lets you easily manage your data regardless of where it is store: <a href="{% post_url 2019-11-26-ftp-web-client %}">FTP</a> / WebDav / <a href="{% post_url 2020-04-30-sftp-browser %}">SFTP</a> / Git / <a href="{% post_url 2019-11-21-s3-browser %}">S3</a> / <a href="{% post_url 2019-11-21-s3-browser %}">Minio</a> / Dropbox / Google Drive
</p>
<img alt="screenshot of Filestash when uploading files/folders" class="lazy fancy visible-xs" data-src="/img/screenshots/feature1.png" />
</div>
<div class="feature">
<img alt="screenshot while creating a shared link" class="lazy fancy pull-left hidden-xs" data-src="/img/screenshots/feature_share_0000.png" />
<h3>Collaborate</h3>
<p>
With its flexible sharing mechanism, Filestash allows the creation of shared links that can be mounted as a network drive
</p>
<img alt="screenshot while creating a shared link" class="lazy fancy visible-xs" data-src="/img/screenshots/feature_share_0000.png" />
</div>
<div class="feature">
<img alt="Filestash as a photo gallery" class="lazy fancy pull-right hidden-xs" data-src="/img/screenshots/feature_image_0000.jpg" />
<h3>Explore your Photos</h3>
<p>
Upload your photos and share a link to your friends. The image viewer exposes all the metadata in your pictures
</p>
<img alt="Filestash as a photo gallery" class="lazy fancy visible-xs" data-src="/img/screenshots/feature_image_0000.jpg" />
</div>
<div class="feature">
<img alt="Filestash as a media viewer" class="lazy fancy pull-left hidden-xs" data-src="/img/screenshots/feature_media.png" />
<h3>Enjoy your media</h3>
<p>
Filestash lets you stream your videos and music straight from your browser
</p>
<img alt="Filestash as a media viewer" class="lazy fancy visible-xs" data-src="/img/screenshots/feature_media.png" />
</div>
<div class="feature">
<img alt="org-mode client" class="lazy fancy pull-right hidden-xs" data-src="/img/screenshots/feature_orgmode_0000.png" />
<h3>Take notes</h3>
<p>
Filestash's powerfull editor support <i>org-mode</i>. It can be used to create reports, notes, agendas and todos
</p>
<img alt="org-mode client" class="lazy fancy visible-xs" data-src="/img/screenshots/feature_orgmode_0000.png" />
</div>
<div class="feature">
<img alt="example of login screen after configuring Filestash" class="lazy fancy pull-left hidden-xs" data-src="/img/screenshots/feature3.png" />
<h3>Make it exactly the way you need it</h3>
<p>
Filestash can be configure to fit your use case. In need of more flexibility? Create your own plugin and make it happen
</p>
<img alt="example of login screen after configuring Filestash" class="lazy fancy visible-xs" data-src="/img/screenshots/feature3.png" />
</div>
<div>
<h3> The coolest part of Filestash is its core ideas </h3>
<p> Filestash aims to solve the Dropbox problem by abstracting the storage aspect. This makes it possible to bring your own backend or create your own by implementing a <a href="https://github.com/mickael-kerjean/filestash/blob/8004ca7c4809a3e81682df51bf718d6b8e3a615d/server/common/types.go#L10-L20">simple interface</a>. The power of that model makes it possible for non nerds to easily interact with complex systems without prior training (assuming they are familiar with Dropbox)
</div>
<br><br><br><br><br><br>
</div>
</div>
<div class="call-to-action slant down up">
<h2> Let's try now? </h2>
<a class="btn" href="/docs">GETTING STARTED</a>
<a class="btn" href="https://demo.filestash.app">DEMO</a>
</div>
<div class="container">
<h2> More Features</h2>
<div class="row">
<div class="col-sm-4 feature center">
<h3>Open Source</h3>
<p>Our entire source code is available on github</p>
</div>
<div class="col-sm-4 feature center">
<h3>Low resources</h3>
<p>No supercomputer was ever harmed while using Filestash</p>
</div>
<div class="col-sm-4 feature center">
<h3>Powerfull Search</h3>
<p>To let you find your files in an instant</p>
</div>
</div>
<div class="row">
<div class="col-sm-4 feature center">
<h3>Video transcoding</h3>
<p>Automatically transcode videos on demand</p>
</div>
<div class="col-sm-4 feature center">
<h3>Network Drive</h3>
<p>Shared links are full fledge network drive</p>
</div>
<div class="col-sm-4 feature center">
<h3>Image optimisation</h3>
<p>Pictures are transcoded on demand to fit your screen without waste</p>
</div>
</div>
<div class="row">
<div class="col-sm-4 feature center">
<h3>Works everywhere</h3>
<p>The web app works flowlessly on all devices</p>
</div>
<div class="col-sm-4 feature center">
<h3>Super fast</h3>
<p>The web app feels extremely fast, see by yourself!</p>
</div>
<div class="col-sm-4 feature center">
<h3>No bloat</h3>
<p>We just focus on our core misssion without unrelated things on top</p>
</div>
</div>
<div class="row">
<div class="col-sm-4 feature center">
<h3>Secure</h3>
<p>We've passed agressive security audit to deploy in a F500 company</p>
</div>
<div class="col-sm-4 feature center">
<h3>Quick Access</h3>
<p>Your most visited files are pined to your homepage for quick access</p>
</div>
<div class="col-sm-4 feature center">
<h3>Admin area</h3>
<p>An easy to use admin panel to configure your instance</p>
</div>
</div>
<div class="row">
<div class="col-sm-4 feature center">
<h3>Shortcuts</h3>
<p>Padawans use their keyboard and have a healthy shift ctrl routine</p>
</div>
<div class="col-sm-4 feature center">
<h3>Database plugins</h3>
<p>New connectors to explore data in relational databases</p>
</div>
<div class="col-sm-4 feature center">
<h3>Automatic SSL</h3>
<p>Automatically generate your SSL certificate so that you don't have to do it yourself</p>
</div>
</div>
<div class="row">
<div class="col-sm-4 feature center">
<h3>Automatic config</h3>
<p>Automagically configure itself to be publicly accessible from a public URL</p>
</div>
<div class="col-sm-4 feature center">
<h3>Simple but powerfull</h3>
<p>Our only mission: "Filestash let you manage your data"</p>
</div>
<div class="col-sm-4 feature center">
<span>In the roadmap</span>
<h3>Automatic Upgrade</h3>
<p>Filestash automatically update itself without any action required from your end</p>
</div>
</div>
</div>
</div>
{% include support.html %}
{% include footer.html %}