forked from ohmyform/website
-
-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
executable file
·233 lines (210 loc) · 9.46 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
---
title: Stash
description: An organizer for your porn
---
<script>
var images = [
"../images/scenes.png",
"../images/playScene.png",
"../images/editScene.png",
"../images/performers_2.png",
"../images/performer2.png",
"../images/studios.png",
"../images/studio.png",
];
var currentImage = 0;
var useAlt = false;
function loadImages() {
function loadImage(index) {
var img = new Image();
img.src = images[index];
img.onload = function () {
if (index + 1 < images.length) {
loadImage(index + 1);
} else {
doSlideShow();
}
}
}
loadImage(0);
}
loadImages();
function doSlideShow() {
currentImage = (currentImage + 1) % images.length;
var currentId = "hero-image";
var altId = currentId;
if (!useAlt) {
currentId += "-alt";
} else {
altId += "-alt";
}
var currentElement = document.getElementById(currentId);
var nextElement = document.getElementById(altId);
var nextImage = "url('" + images[currentImage] + "')";
if (nextElement) {
nextElement.style.backgroundImage = nextImage;
nextElement.style.opacity = 0.25;
}
if (currentElement) {
currentElement.style.opacity = 0;
}
useAlt = !useAlt;
setTimeout(doSlideShow, 5000);
}
</script>
<section class="hero">
<div id="hero-image" style="background-image: '../images/scenes.png';">
</div>
<div id="hero-image-alt">
</div>
<div class="text-container">
<div>
<h1>Stash - an organizer for your porn</h1>
<div class="button-group">
<div class="button alt">
<a href="https://github.com/stashapp/stash/releases">Download from Github</a>
</div>
</div>
</div>
</div>
</section>
<div class="content">
<section>
<div class="container">
<div class="main">
<h2>What is Stash?</h2>
<p>
Stash allows you to organize and view your own collection of adult video and image files.
Think of it like a private PornHub site for your personal porn collection.
</p>
</div>
<div class="concepts">
<div class="concept">
<div class="icon">
<!-- icons courtesy of FontAwesome using CC BY 4.0 License: https://fontawesome.com/license/free -->
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="play-circle" class="svg-inline--fa fa-play-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z"></path></svg>
</div>
<h3>Scenes</h3>
<p>Every video file has its own scene. Scenes can be rated and tagged with performers, tags, movies and a studio.</p>
</div>
<div class="concept">
<div class="icon">
<!-- icons courtesy of FontAwesome using CC BY 4.0 License: https://fontawesome.com/license/free -->
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="map-marker-alt" class="svg-inline--fa fa-map-marker-alt fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"></path></svg>
</div>
<h3>Markers</h3>
<p>Bookmark your favorite parts of a scene with markers. Markers can be tagged and appear in the video scrubber when viewing a scene.</p>
</div>
<div class="concept">
<div class="icon">
<!-- icons courtesy of FontAwesome using CC BY 4.0 License: https://fontawesome.com/license/free -->
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="image" class="svg-inline--fa fa-image fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z"></path></svg>
</div>
<h3>Images</h3>
<p>Images can be rated and tagged with performers, tags and a studio.</p>
</div>
<div class="concept">
<div class="icon">
<!-- icons courtesy of FontAwesome using CC BY 4.0 License: https://fontawesome.com/license/free -->
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="images" class="svg-inline--fa fa-images fa-w-18 fa-icon undefined" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M480 416v16c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V176c0-26.51 21.49-48 48-48h16v208c0 44.112 35.888 80 80 80h336zm96-80V80c0-26.51-21.49-48-48-48H144c-26.51 0-48 21.49-48 48v256c0 26.51 21.49 48 48 48h384c26.51 0 48-21.49 48-48zM256 128c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-96 144l55.515-55.515c4.686-4.686 12.284-4.686 16.971 0L272 256l135.515-135.515c4.686-4.686 12.284-4.686 16.971 0L512 208v112H160v-48z"></path></svg>
</div>
<h3>Galleries</h3>
<p>Galleries are collections of images. Galleries can be automatically created from zip files and folders containing image files.</p>
</div>
</div>
</div>
</section>
<section>
<div class="container feature">
<div class="half">
<a href="/images/playScene.png"><img src="/images/thumbs/playScene.png" /></a>
</div>
<div class="half">
<div>
<h2>View your content</h2>
<p>
Preview and view all of your scenes and galleries from your web browser on your PC, tablet or phone. Stash directly streams videos to your web browser.
Stash supports streaming of a large variety of formats and codecs to most web browsers.
</p>
</div>
</div>
</div>
</section>
<section>
<div class="container feature">
<div class="half">
<div>
<h2>Curate your content</h2>
<p>Rate your scenes and images, and tag them with performers, tags, movies and studios. Filter and sort your content with a variety of filter and sorting options.</p>
<p>Stash also allows you to derive metadata from filenames. Alternatively, you can scrape metadata from websites using community-curated scrapers.</p>
</div>
</div>
<div class="half">
<a href="/images/editScene.png"><img src="/images/thumbs/editScene.png" /></a>
</div>
</div>
</section>
<section>
<div class="container feature">
<div class="half">
<div class="icon">
<!-- icons courtesy of FontAwesome using CC BY 4.0 License: https://fontawesome.com/license/free -->
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-lock" class="svg-inline--fa fa-user-lock fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M224 256A128 128 0 1 0 96 128a128 128 0 0 0 128 128zm96 64a63.08 63.08 0 0 1 8.1-30.5c-4.8-.5-9.5-1.5-14.5-1.5h-16.7a174.08 174.08 0 0 1-145.8 0h-16.7A134.43 134.43 0 0 0 0 422.4V464a48 48 0 0 0 48 48h280.9a63.54 63.54 0 0 1-8.9-32zm288-32h-32v-80a80 80 0 0 0-160 0v80h-32a32 32 0 0 0-32 32v160a32 32 0 0 0 32 32h224a32 32 0 0 0 32-32V320a32 32 0 0 0-32-32zM496 432a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm32-144h-64v-80a32 32 0 0 1 64 0z"></path></svg>
</div>
</div>
<div class="half">
<div>
<h2>Stash is <strong>private</strong></h2>
<p>Stash operates on your own network. Your collection is not shared anywhere.</p>
<p>You can even password protect it.</p>
</div>
</div>
</div>
</section>
<section>
<div class="feature container">
<div class="half">
<div>
<h2>Stash is <strong>free</strong></h2>
<p>Stash is developed by volunteers and is licensed under the GNU AGPL. This means that it is, and always will be, free.</p>
</div>
</div>
<div class="half">
<img src="/images/AGPLv3_Logo.svg" class="agpl-logo" />
</div>
</div>
</section>
<section>
<div class="main">
<h2>See it in action</h2>
<div>Checkout the (safe for work) demo video below.</div>
<div class="video">
<iframe src="https://player.vimeo.com/video/545323354?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen title="Stash 0.5.0 SFW demo (2021-02-23)"></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
</div>
</section>
<section>
<div class="main">
<h2>Screenshots</h2>
<div class="screenshots">
<a href="/images/scenes.png"><img src="/images/thumbs/scenes.png" /></a>
<a href="/images/playScene.png"><img src="/images/thumbs/playScene.png" /></a>
<a href="/images/editScene.png"><img src="/images/thumbs/editScene.png" /></a>
<a href="/images/performers_2.png"><img src="/images/thumbs/performers_2.png" /></a>
<a href="/images/performer2.png"><img src="/images/thumbs/performer2.png" /></a>
<a href="/images/studios.png"><img src="/images/thumbs/studios.png" /></a>
<a href="/images/studio.png"><img src="/images/thumbs/studio.png" /></a>
</div>
</div>
</section>
<section>
<div class="main">
<h2>Upcoming features</h2>
<p>
View the changelog for the development build
<a href="https://github.com/stashapp/stash/blob/develop/ui/v2.5/src/components/Changelog/versions" target="_blank">here</a>.
</p>
</div>
</section>
</div>