forked from LycheeOrg/LycheeOrg.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
274 lines (215 loc) · 20.1 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
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
<!doctype html>
<html lang="en">
<head>
<title>Lychee — Self-hosted photo-management done right</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta charset="utf-8">
<meta name="description" content="Lychee is a free photo-management tool, which runs on your server or web-space. Upload, manage and share photos like from a native application. Lychee comes with everything you need and all your photos are stored securely.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Open Graph Protocol -->
<meta property="og:title" content="Lychee — Self-hosted photo-management done right">
<meta property="og:description" content="Lychee is a free photo-management tool, which runs on your server or web-space. Upload, manage and share photos like from a native application. Lychee comes with everything you need and all your photos are stored securely.">
<meta property="og:image" content="https://LycheeOrg.github.io/assets/images/og.jpg">
<meta property="og:type" content="website">
<meta property="og:url" content="https://LycheeOrg.github.io/">
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@getlychee">
<meta name="twitter:title" content="Lychee — Self-hosted photo-management done right">
<meta name="twitter:description" content="Lychee is a free photo-management tool, which runs on your server or web-space. Upload, manage and share photos like from a native application. Lychee comes with everything you need and all your photos are stored securely.">
<meta name="twitter:image" content="https://LycheeOrg.github.io/assets/images/og.jpg">
<!-- schema.org -->
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebApplication",
"name": "Lychee",
"url": "https://LycheeOrg.github.io/",
"image": "https://LycheeOrg.github.io/assets/images/og.jpg",
"description": "Lychee is a free photo-management tool, which runs on your server or web-space. Upload, manage and share photos like from a native application. Lychee comes with everything you need and all your photos are stored securely.",
"softwareVersion": "4.1.0",
"applicationCategory": "Photo Management",
"sameAs": [
"https://twitter.com/getlychee"
]
}
</script>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- CSS -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400">
<link rel="stylesheet" href="assets/bower/normalize-css/normalize.css">
<link rel="stylesheet" href="assets/styles/main.css">
</head>
<body>
<div class="wrap">
<!-- Page Content -->
<!-- Hero -->
<div class="hero">
<!-- Header -->
<header class="header">
<div class="header__column">
<div class="align align--left">
<p class="header__headline">
<a href=".">Lychee <span>4.1.0</span></a>
</p>
</div>
</div>
<div class="header__column">
<div class="align align--right">
<p class="header__text">
<a href="docs/">Documentation</a><a href="https://github.com/LycheeOrg/Lychee">See on GitHub</a>
</p>
</div>
</div>
</header>
<!-- Inner -->
<div class="hero__inner">
<div class="window" data-top="transform: translate3D(0px, 0px, 0px)" data-top-bottom="transform: translate3D(0px, 100px, 0px)">
<div class="window__bar">
<div class="window__dots">
<div class="window__dot window__dot--red"></div>
<div class="window__dot window__dot--orange"></div>
<div class="window__dot window__dot--green"></div>
</div>
<div class="window__menuitem window__button"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 512 512"><path d="M352 128.4L319.7 96 160 256l159.7 160 32.3-32.4L224.7 256z"/></svg></div>
<div class="window__menuitem window__button"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 512 512"><path d="M160 128.4L192.3 96 352 256 192.3 416 160 383.6 287.3 256z"/></svg></div>
<div class="window__menuitem window__adress">LycheeOrg.github.io
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 512 512"><path d="M256 384.1c-70.7 0-128-57.3-128-128.1s57.3-128.1 128-128.1V84l96 64-96 55.7v-55.8c-59.6 0-108.1 48.5-108.1 108.1 0 59.6 48.5 108.1 108.1 108.1S364.1 316 364.1 256H384c0 71-57.3 128.1-128 128.1z"/></svg>
</div>
</div>
<img class="window__content" src="assets/images/showcase.jpg" width="1194" height="525" alt="Screenshot of Lychee">
</div>
</div>
</div>
<!-- Introduction -->
<div class="introduction">
<h1>Self-hosted photo-management done right</h1>
<p>Lychee is a free photo-management tool, which runs on your server or web-space. Installing is a matter of seconds. Upload, manage and share photos like from a native application. Lychee comes with everything you need and all your photos are
stored securely.</p>
<div class="introduction__buttons">
<a href="https://lycheeorg.github.io/demo/" target="_blank" rel="noopener" class="btn btn--grey">Live Demo</a>
<a href="https://github.com/LycheeOrg/Lychee" class="btn btn--blue">See on GitHub</a>
</div>
</div>
<!-- Features -->
<div class="features features--gradient">
<div class="features__feature">
<div class="features__icon features__icon--green"><svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M464 144v288H48V144h416m16-16H32v320h448V128zM72 96h368v16H72zM104 64h304v16H104z"/></svg></div>
<h2 class="h1 features__headline">Manage</h2>
<p class="features__text">Managing your photos has never been easier. Upload, move, rename, describe, delete or search your photos in seconds. All in one place, right from your browser.</p>
</div>
<div class="features__feature">
<div class="features__icon features__icon--purple"><svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M288 144v16h112v272H112V160h112v-16H96v304h320V144zM193.1 118.1l-11.6-11.6L256 32l74.5 74.5-11.6 11.6-54.7-54.7v243h-16.4v-243z"/></svg></div>
<h2 class="h1 features__headline">Share</h2>
<p class="features__text">Sharing like it should be. One click and every photo and album is ready for the public. You can also protect albums with passwords if you want. It's under your control.</p>
</div>
<div class="features__feature">
<div class="features__icon features__icon--purple features__icon--eye"><svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M447.1 256.2C401.8 204 339.2 144 256 144c-33.6 0-64.4 9.5-96.9 29.8C131.7 191 103.6 215.2 65 255l-1 1 6.7 6.9C125.8 319.3 173.4 368 256 368c36.5 0 71.9-11.9 108.2-36.4 30.9-20.9 57.2-47.4 78.3-68.8l5.5-5.5-.9-1.1zM256 160c33.1 0 64.9 9.5 97.2 30.6 23.9 15.6 47.4 36.7 73.7 66.1C388.6 295.4 331.1 352 256 352c-34.2 0-64.2-8.4-94.2-28.2-27.5-18.1-52.3-43.3-76.2-67.8 59.1-59.7 108.4-96 170.4-96zM256 336c44.1 0 80-35.9 80-80s-35.9-80-80-80-80 35.9-80 80 35.9 80 80 80zm0-143.7c35.2 0 64 28.6 64 63.7s-28.8 63.7-64 63.7-63.9-28.6-63.9-63.7 28.7-63.7 63.9-63.7zM288 256c0 17.5-14.4 32-31.8 32S224 272.8 224 255.3s15.8-31.3 32-31.3v-16c-26.5 0-47.9 21.6-47.9 48.2s21.5 48.1 47.9 48.1 48-21.6 48-48.1v-.2h-16z"/></svg></div>
<h2 class="h1 features__headline">View</h2>
<p class="features__text">Look at all your images in full-screen mode, navigate forward and backward by using your keyboard or let others enjoy your photos by making them public.</p>
</div>
</div>
<!-- Showcase -->
<div class="showcase">
<div class="window" data-bottom-top="transform: translate3D(-100px, 0px, 0px)" data-center="transform: translate3D(0px, 0px, 0px)">
<div class="window__bar">
<div class="window__menuitem window__adress">LycheeOrg.github.io
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 512 512"><path d="M256 384.1c-70.7 0-128-57.3-128-128.1s57.3-128.1 128-128.1V84l96 64-96 55.7v-55.8c-59.6 0-108.1 48.5-108.1 108.1 0 59.6 48.5 108.1 108.1 108.1S364.1 316 364.1 256H384c0 71-57.3 128.1-128 128.1z"/></svg>
</div>
</div>
<img class="window__content" src="assets/images/showcase/0.jpg" width="700" height="700" alt="Screenshot of Lychee" data-id="0">
</div>
<div class="showcase__features">
<a href="#" class="showcase__feature showcase__feature--active" data-id="0">
<span class="showcase__point">1</span>
<p class="showcase__text">Upload your photos or create a new album for them.</p>
</a>
<a href="#" class="showcase__feature" data-id="1">
<span class="showcase__point">2</span>
<p class="showcase__text">See all the information from your photos.</p>
</a>
<a href="#" class="showcase__feature" data-id="2">
<span class="showcase__point">3</span>
<p class="showcase__text">Batch editing with desktop-like multi-select.</p>
</a>
<a href="#" class="showcase__feature" data-id="3">
<span class="showcase__point">4</span>
<p class="showcase__text">Share your albums or photos with your favorite service.</p>
</a>
</div>
</div>
<!-- Features -->
<div class="features">
<div class="features__feature">
<div class="features__icon features__icon--green"><svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9 1.4.3 2.6.4 3.8.4 8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1-8.4 1.9-15.9 2.7-22.6 2.7-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1 10.5 0 20-3.4 25.6-6 2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8 0 0 1.6-.5 5-.5 8.1 0 26.4 3.1 56.6 24.1 17.9-5.1 37-7.6 56.1-7.7 19 .1 38.2 2.6 56.1 7.7 30.2-21 48.5-24.1 56.6-24.1 3.4 0 5 .5 5 .5 12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5 1.2 0 2.6-.1 4-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32zm-78.4 416.1c2.2 0 4.4-.1 6.7-.2 0 2.8 0 5.5.1 7.9 0 2.4 0 4.6.1 6.5-15.6-5.8-30.3-13.5-44.1-23 9.8 5.3 22.1 8.8 37.2 8.8zm11.4-72.9c-.8 2.2-1.5 4.5-2.1 6.9-3.4 1-7.5 1.8-11.7 1.8-10.9 0-19-5.4-25.6-16.9-2.4-4.6-6.8-10.7-12.9-16.3 16.8 14.1 36.3 20.9 52.3 24.5zm190 58.9c-15.8 11.9-33 21.3-51 28.2v-56.9c0-12.4-2.1-22.5-5-30.5 37.2-8.3 92-33.7 92-125.4 0-24.6-7.1-46.5-21.2-65.1 3.1-12.9 5.5-35.6-5.1-63l-2.7-7.1-7.2-2.4c-1.5-.5-4.8-1.3-10-1.3-11.5 0-30.9 4.1-59.5 22.8-17-4.2-34.8-6.4-53.1-6.4H255.9c-18.3 0-36.2 2.2-53.1 6.4-28.6-18.7-48-22.8-59.5-22.8-5.2 0-8.5.9-10 1.4l-7.2 2.4-2.7 7.1c-10.6 27.5-8.2 50.2-5.1 63-14.1 18.7-21.2 40.6-21.2 65.1 0 49.6 16 79.9 36.6 98.5-8.1-6.6-18.6-12.1-31.2-13h-1.3c-13.1 0-22.3 5.4-25.2 14.7-4.7 14.8 9.8 25 14.6 28.4l.5.6 1.5.6c1.6 1 10.1 7 16.9 24.5 2 6.2 6.3 14.5 13.6 22.2-13.1-11.2-24.8-24-34.9-38.1C61.9 351.2 48 307.5 48 261.7c0-28.9 5.5-56.9 16.4-83.3 10.5-25.5 25.5-48.3 44.7-67.9 19.1-19.6 41.4-35 66.1-45.7C200.8 53.7 228 48 256 48s55.2 5.6 80.8 16.7c24.8 10.7 47 26.1 66.1 45.7 19.1 19.6 34.2 42.5 44.7 67.9 10.9 26.4 16.4 54.4 16.4 83.3 0 45.8-13.8 89.5-40.1 126.3-12.6 17.7-27.7 33.2-44.9 46.2z"/></svg></div>
<h2 class="h1 features__headline">Open</h2>
<p class="features__text">Lychee is completely <a href="https://github.com/LycheeOrg/Lychee">open-source</a>. Everyone can take advantage of the work we have already done and improve it. We are open for every suggestion or help.</p>
</div>
<div class="features__feature">
<div class="features__icon features__icon--purple"><svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M360 224v-72c0-57.43-46.562-104-103.984-104C198.562 48 152 94.57 152 152v72H96v240h320V224h-56zm-192-72c0-48.523 39.484-88 88.016-88C304.53 64 344 103.477 344 152v72H168v-72zm232 296H112V240h288v208zM256 288c-17.673 0-32 14.327-32 32 0 14.91 10.198 27.44 24 30.992V384h16v-33.008c13.802-3.553 24-16.082 24-30.992 0-17.673-14.327-32-32-32zm0 48c-8.822 0-16-7.178-16-16s7.178-16 16-16 16 7.178 16 16-7.178 16-16 16z"/></svg></div>
<h2 class="h1 features__headline">Secure</h2>
<p class="features__text">Your server, your data, your rules. Never depend on someone else. Lychee is a self-hosted solution, so you are in the full control of your photos.</p>
</div>
<div class="features__feature">
<div class="features__icon features__icon--purple"><svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M359.385 80C319.965 80 277.17 97.6 256 132.8 234.83 97.6 192.034 80 152.615 80 83.647 80 32 123.238 32 195.78c0 31.287 12.562 71.923 40.923 105.656 28.36 33.735 45.23 51.7 100.153 88C228 425.738 256 432 256 432s28-6.262 82.924-42.564c54.923-36.3 71.794-54.265 100.153-88C467.437 267.703 480 227.066 480 195.78 480 123.237 428.353 80 359.385 80zm67.445 211.14c-26.852 31.94-42.18 48.896-96.73 84.948-40.236 26.596-65.25 36.3-74.1 39.233-8.85-2.932-33.865-12.638-74.103-39.232-54.548-36.052-69.876-53.006-96.73-84.948-12.064-14.35-21.856-31.274-28.315-48.943C51.062 226.355 48 210.304 48 195.78c0-30.285 10.13-55.644 29.297-73.336 9.14-8.437 20.158-14.992 32.752-19.484 12.944-4.62 27.265-6.96 42.565-6.96 38.018 0 73.217 17.682 89.674 45.046L256 163.844l13.71-22.798C286.17 113.682 321.37 96 359.386 96c15.3 0 29.62 2.34 42.566 6.96 12.595 4.492 23.613 11.047 32.753 19.483C453.87 140.136 464 165.495 464 195.78c0 14.524-3.062 30.575-8.854 46.417-6.458 17.668-16.25 34.592-28.316 48.944z"/></svg></div>
<h2 class="h1 features__headline">Beautiful</h2>
<p class="features__text">Our goal was to create a web app everyone can use. Lychee works intuitive and comes with a stunning, beautiful interface.</p>
</div>
</div>
<!-- Made For -->
<div class="madefor">
<div class="madefor__bg" data-bottom-top="transform: translate3D(0px, -40px, 0px)" data-top-bottom="transform: translate3D(0px, 40px, 0px)"></div>
<div class="madefor__content">
<h2 class="h1">Made for photographers</h2>
<p>Lychee is the perfect place to store all your photos. No storage limit, no compression, no loss in data. We even support and display your EXIF and IPTC Metadata. And if you want, you can make your photos public for your audience. With
just one click.</p>
</div>
</div>
<!-- Features -->
<div class="features">
<div class="features__feature">
<div class="features__icon features__icon--green"><svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M417.5 160h-61.7c-32.1-36-42.2-48-54.5-48h-88.5c-12.3 0-22.2 12-54.5 48H145v-16h-34v16H97.5C79.9 160 64 173.2 64 190.7v176c0 17.5 15.9 33.3 33.5 33.3h320c17.6 0 30.5-15.8 30.5-33.3v-176c0-17.5-12.9-30.7-30.5-30.7zM432 366.7c0 9.3-6.2 17.3-14.5 17.3h-320c-8.7 0-17.5-8.7-17.5-17.3v-176c0-8.2 8.1-14.7 17.5-14.7h67.8l4.8-3.2c4-4.5 7.7-10 11.1-13.8 11.3-12.7 19.5-21.7 25.3-26.9 4.7-4.2 6.2-4.1 6.2-4.1h88.5s1.6-.1 6.7 4.5c6.1 5.5 14.7 16.5 26.6 29.8 2.9 3.3 6 6.8 9.3 10.5l4.8 3.2h68.9c8.8 0 14.5 6 14.5 14.7v176zM256 189.5c-47.1 0-85.5 38.4-85.5 85.5s38.4 85.5 85.5 85.5 85.5-38.4 85.5-85.5-38.4-85.5-85.5-85.5zm0 155c-38.4 0-69.5-31.1-69.5-69.5s31.1-69.5 69.5-69.5 69.5 31.1 69.5 69.5-31.1 69.5-69.5 69.5zM352 192h17v17h-17z"/><circle cx="256" cy="275" r="32"/></svg></div>
<h2 class="h1 features__headline">EXIF</h2>
<p class="features__text">Get the most out of our photos. Lychee supports EXIF and IPTC Metadata. Always available one click away. Clearly listed next to all other information.</p>
</div>
<div class="features__feature">
<div class="features__icon features__icon--purple"><svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M193.3 260.4l-11.6-11.6 74.5-74.3 74.5 74.3-11.7 11.6-54.6-54.6v241.8h-16.5V205.8zM399.3 183.6c0-1.2.2-2.4.2-3.6 0-64.3-52.8-116.4-116.8-116.4-46.1 0-85.8 27.1-104.4 66.3-8.1-4.1-17.1-6.4-26.8-6.4-29.6 0-54.1 23.6-58.9 52C57.4 187.6 32 222.2 32 261.8c0 49.7 40.1 90.2 89.6 90.2H213v-16h-90.6c-40.9 0-74.2-33.5-74.2-74.6 0-31.8 20.2-61.2 50.2-71.6l8.4-2.9 1.5-8.8c3.6-21.6 22.1-39.3 43.9-39.3 6.9 0 13.7 1.6 19.9 4.8l13.5 6.8 6.5-13.7c16.6-34.9 52.1-57.4 90.4-57.4 55.3 0 100.9 43.3 100.9 98.9 0 13.3-.2 20.3-.2 20.3l15.2.1c36.6.5 65.6 33.4 65.6 70.3 0 36.8-29.8 66.9-66.5 67.1H297v16h101c45 0 82-37.3 82-82.8s-35.5-85.5-80.7-85.6z"/></svg></div>
<h2 class="h1 features__headline">Import</h2>
<p class="features__text">Import your photos from various sources. From you local computer, server, via URL or even from your Dropbox.</p>
</div>
<div class="features__feature">
<div class="features__icon features__icon--purple features__icon--tag"><svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M464 32H304L48 320l160 160 256-288V32zm-16 152L208.125 456 72.062 320 311.587 48H448v136zM368 160c17.645 0 32-14.355 32-32s-14.355-32-32-32-32 14.355-32 32 14.355 32 32 32zm0-48c8.836 0 16 7.163 16 16s-7.164 16-16 16-16-7.163-16-16 7.164-16 16-16z"/></svg></div>
<h2 class="h1 features__headline">Tag</h2>
<p class="features__text">Never lose one of your photos in the depth of your albums. Tag them or mark them as important. Every single photo or all selected photos at once.</p>
</div>
</div>
<!-- Donate -->
<div class="donate">
<h1>Support</h1>
<p class="donate__description">If you enjoy Lychee, please consider <a href="support.html">supporting us</a>.</p>
</div><!-- Footer -->
<footer class="footer">
<div class="footer__column">
<div class="align align--left">
<p>Made by <a class="footer__link" href="https://electerious.com">Electerious</a><a class="footer__link" href="https://github.com/LycheeOrg">LycheeOrg</a></p>
</div>
</div>
<!-- <div class="footer__column">
<div class="align align--right">
<p>
<a class="footer__link" href="https://s.electerious.com/legal/imprint.html">Imprint</a>
<a class="footer__link" href="https://s.electerious.com/legal/disclaimer.html">Disclaimer</a>
<a class="footer__link" href="https://s.electerious.com/legal/privacy_policy.html">Privacy Policy</a>
<a class="footer__link" href="assets/files/PressKit.zip">PressKit</a>
<a class="footer__link" href="https://github.com/electerious/Lychee">GitHub</a>
<a class="footer__link" href="https://twitter.com/getlychee">Twitter</a>
</p>
</div>
</div> -->
</footer>
</div>
<!-- JS -->
<script src="assets/bower/skrollr/dist/skrollr.min.js"></script>
<script src="assets/scripts/main.js"></script>
</body>
</html>