index.html

<!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/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="/css/photostack-styles.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="theme-color" content="#6c757d">
    <!-- 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: 56px;">

    <!-- Nav bar -->
    <nav class="navbar fixed-top bg-body-secondary navbar-expand-sm">
        <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 flex-column flex-sm-row">
                    <!-- Theme toggle -->
                    <button class="btn btn-primary dropdown-toggle mt-2 mt-sm-0" role="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme">
                        <i class="bi bi-moon-stars-fill me-2 me-sm-0 me-md-2"></i>
                        <span class="d-sm-none">Change theme</span>
                    </button>
                    <div class="dropdown">
                        <ul class="dropdown-menu dropdown-menu-end w-100 w-sm-auto">
                            <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>

    <!-- Banner container -->
    <div class="container-fluid bg-body-secondary">
        <div class="container pb-5 pt-5">
            <div class="display-1 mb-2">
                Welcome to PhotoStack
            </div>
            <div class="display-6 mb-5">
                The ultimate batch photo editor
            </div>
            <!-- Main buttons -->
            <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>
                            Edit images
                        </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>
                            Create watermarks
                        </button>
                    </a>
                </div>
                <div class="col-md-4">
                    <a href="https://github.com/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>
        </div>
    </div>
    <div class="border-bottom" style="position: sticky; top: 56px; z-index: 1030;"></div>

    <!-- Main container -->

    <div class="container mt-5 mb-5">
        <!-- Advertisement -->
        <div class="row mt-5">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        Advertisement
                    </div>
                    <div class="card-body" style="padding: 0; overflow: hidden;">
                        <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8658798838164073" data-ad-slot="4927660646" data-ad-format="auto" data-full-width-responsive="true">
                        </ins>
                        <div class="photostack-ads-fallback p-3">
                            You're blocking ads! Please <a href="#support">donate</a> to support continued development!
                        </div>
                        <script>
                            (adsbygoogle = window.adsbygoogle || []).push({});
                        </script>
                    </div>
                </div>
            </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 images from your local storage, then resize them, crop, add a watermark, remove EXIF data, and more. When you're done, the images can be exported to individual files or packaged in a ZIP file for easy sharing.</p>
            </div>
            <div class="col-12 col-md-6">
                <h3>Powerful watermarking</h3>
                <p>PhotoStack can create and save custom watermarks to protect your images. 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>Watermarks are saved in your browser's storage for later use, and you can export them to a file for use on other browsers or devices.</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>The PhotoStack source code is also <a href="https://github.com/corbindavenport/photostack" target="_blank">available on GitHub</a> under the GPLv3 license.</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. 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. For devices and browsers that aren't up-to-date, you can still use <a href="https://classic.photostack.app">PhotoStack Classic</a>.</p>
            </div>
        </div>
        <!-- Support info -->
        <div class="row mt-3">
            <div class="col-12 display-6 mb-3" id="support">
                Support PhotoStack
            </div>
            <div class="col-12 mb-3">
                If you find PhotoStack useful, please donate to support continued development. It would mean a lot!
            </div>
            <div class="col-12 col-md-4">
                <a href="https://www.patreon.com/corbindavenport" target="_blank">
                    <button type="button" class="btn btn-success w-100 mb-2">Support via Patreon</button>
                </a>
            </div>
            <div class="col-12 col-md-4">
                <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&amp;business=4SZVSMJKDS35J&amp;lc=US&amp;item_name=PhotoStack%20Donation&amp;currency_code=USD&amp;bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted" target="_blank">
                    <button type="button" class="btn btn-success w-100 mb-2">Donate via PayPal</button>
                </a>
            </div>
            <div class="col-12 col-md-4">
                <a href="https://cash.app/$corbdav" target="_blank">
                    <button type="button" class="btn btn-success w-100">Donate via Cash App</button>
                </a>
            </div>
        </div>
        <!-- Privacy policy link -->
        <div class="row mt-3 mb-3">
            <div class="col-12">
                PhotoStack is built to be private and secure. Check the <a href="https://github.com/corbindavenport/photostack/blob/main/PRIVACY.md" target="_blank">Privacy Policy</a> for more information.
            </div>
        </div>

    </div>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8658798838164073" crossorigin="anonymous"></script>

</body>

</html>