-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
192 lines (184 loc) · 10.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>PhotoStack</title>
<meta name="description" content="PhotoStack can convert, resize, watermark, and crop images in a few clicks.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/css/photostack-styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<script src="js/shared.js"></script>
<!-- Icons and theme -->
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="24x24" href="img/icon_x24.png">
<link rel="manifest" href="site.webmanifest">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="color-scheme" content="dark light">
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#FFF">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#212529">
<!-- Open Graph card -->
<meta property="og:type" content="website" />
<meta property="og:title" content="PhotoStack" />
<meta property="og:description" content="Convert, resize, watermark, and crop images in a few clicks." />
<meta property="og:image" content="https://photostack.app/img/maskable_icon_x512.png" />
<meta property="og:image:width" content="512" />
<meta property="og:image:height" content="512" />
<meta name="og:image:alt" content="PhotoStack icon" />
<meta name="twitter:card" content="summary" />
<!-- Analytics -->
<script defer data-domain="photostack.app" src="https://plausible.io/js/plausible.js"></script>
</head>
<body style="padding-top: 40px;">
<!-- Nav bar -->
<nav class="navbar fixed-top navbar-expand-sm bg-body-secondary border-bottom">
<div class="container-fluid">
<a class="navbar-brand d-sm-none" href="#">PhotoStack</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
<i class="bi bi-house-fill"></i>
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/edit/">
<i class="bi bi-images"></i>
Editor
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/watermarks/">
<i class="bi bi-pencil"></i>
Watermarks
</a>
</li>
</ul>
<form class="d-flex">
<!-- Theme toggle -->
<div class="dropdown">
<button class="btn btn-outline-primary dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme">
<i class="bi bi-moon-stars-fill"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item photostack-theme-btn" data-theme="light" href="#">
<i class="bi bi-brightness-high-fill me-2"></i>
Light mode
</a></li>
<li><a class="dropdown-item photostack-theme-btn" data-theme="dark" href="#">
<i class="bi bi-moon-fill me-2"></i>
Dark mode
</a></li>
<li><a class="dropdown-item photostack-theme-btn" data-theme="auto" href="#">
<i class="bi bi-circle-half me-2"></i>
Auto theme
</a></li>
</ul>
</div>
</form>
</div>
</div>
</nav>
<!-- Main container -->
<div class="container mt-5 mb-5">
<div class="display-1 mb-2">
Welcome to PhotoStack
</div>
<div class="display-6 mb-5">
The ultimate batch photo editor
</div>
<div class="row">
<div class="col-md-4">
<a href="/edit/">
<button type="button" class="btn btn-primary mb-2 btn-lg w-100">
<i class="bi bi-images"></i>
<br>
Start editing your photos
</button>
</a>
</div>
<div class="col-md-4">
<a href="/watermarks/">
<button type="button" class="btn btn-primary mb-2 btn-lg w-100">
<i class="bi bi-pencil"></i>
<br>
Make some watermarks
</button>
</a>
</div>
<div class="col-md-4">
<a href="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/corbindavenport/photostack" target="_blank">
<button type="button" class="btn btn-primary mb-2 btn-lg w-100">
<i class="bi bi-github"></i>
<br>
See PhotoStack on GitHub
</button>
</a>
</div>
</div>
<!-- TODO: Merge content from former About dialog -->
<div class="row mt-5">
<div class="col-12 col-md-6">
<h3>Feature-packed</h3>
<p>PhotoStack can import multiple photos from your local storage. From there, you can resize images, set the desired format, add a watermark, and remove EXIF data.</p>
<p>Afterwards, just press the Export button, and all your photos will be ready to go.</p>
</div>
<div class="col-12 col-md-6">
<h3>Powerful watermarking</h3>
<p>If you need to protect your images, you can easily create watermarks in PhotoStack for later use. You can set the image, positioning, opacity, size, and more. If you've ever used Adobe Lightroom, you'll feel right at home.</p>
<p>Once you're done creating a watermark, you can save it to your device's local storage for later use, and even export the data to a file for use on another device.</p>
</div>
<div class="col-12 col-md-6">
<h3>Free as in freedom</h3>
<p>PhotoStack doesn't lock you down to certain platforms or require a monthly subscription. It runs on everything with a modern web browser.</p>
<p>All the source code is <a href="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/corbindavenport/photostack" target="_blank">available on GitHub</a> under the GPLv3 license. If you're a developer, you can help fix bugs, or even create your own fork of PhotoStack.</p>
</div>
<div class="col-12 col-md-6">
<h3>Privacy-first</h3>
<p>All image processing is done locally in your browser. Your images are never uploaded anywhere, and the only data collected by PhotoStack is basic analytics.</p>
</div>
<div class="col-12 col-md-6">
<h3>Offline support</h3>
<p>PhotoStack can function entirely offline on most browsers, thanks to a web technology called Service Workers. When you run PhotoStack for the first time, the app is saved to your device's storage, so typing in "photostack.app" will always work — even when you're away from Wi-Fi.</p>
</div>
<div class="col-12 col-md-6">
<h3>Wide compatibility</h3>
<p>PhotoStack works on any modern browser or platform that supports modern web features, including Chrome, Firefox, Opera, Microsoft Edge, and others.</p>
<p>For devices and browsers that aren't up-to-date, you can still use <a href="https://classic.photostack.app">PhotoStack Classic</a>. It has most of the same features, but works on browsers as old as Internet Explorer 10.</p>
</div>
</div>
<!-- Quotes -->
<div class="row mt-5">
<div class="col-12 display-6 mb-5">
PhotoStack in the Press
</div>
<div class="col-12 col-md-6">
<figure>
<blockquote class="blockquote">
<p>Photostack would be a truly useful tool for bloggers, influencers, social media marketers, and anyone else who works with many images online regularly.</p>
</blockquote>
<figcaption class="blockquote-footer">
MakeUseOf
</figcaption>
</figure>
</div>
<div class="col-12 col-md-6">
<figure>
<blockquote class="blockquote">
<p>For bulk resizing and adjusting of images [...] the delightfully simple PhotoStack is exactly the progressive web app you need.</p>
</blockquote>
<figcaption class="blockquote-footer">
ComputerWorld
</figcaption>
</figure>
</div>
</div>
</div>
</body>
</html>