Files
website/index.html
2025-02-01 00:37:45 +02:00

234 lines
9.4 KiB
HTML
Executable File

---
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&amp;autopause=0&amp;player_id=0&amp;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 milestones for upcoming features in the next versions
<a href="https://github.com/stashapp/stash/milestones" target="_blank">here</a>.
</p>
</div>
</section>
</div>