<?php
require_once __DIR__ . "/settings.php";
$page = "index";
?>
<!DOCTYPE HTML>
<title><?php echo SITE_TITLE; ?></title>
<?php
include __DIR__ . '/inc/meta.php';
include __DIR__ . '/inc/piwik.php';
?>
<!-- Wrapper -->
<div id="wrapper">

    <?php include __DIR__ . '/inc/header.php'; ?>

    <!-- Banner -->
    <section id="banner">
        <div class="content primary">
            <header>
                <img src="assets/logo.svg" alt="" style="max-height: 100px; max-width: 25%;"/>
                <h1>Don't Sell.Me</h1>
                <p>Cloud services that don't sell your data</p>
            </header>
        </div>
        <div class="content secondary">
            <div class="inner">
                <h2>Privacy first</h2>
                <p>We will never sell or share you or any of your data to third parties, and you can opt out of usage tracking by <a href="https://netsyms.com/tracking-opt-out/" target="_BLANK">clicking here</a>.</p>
            </div>
        </div>
        <video src="images/banner.mp4" muted autoplay loop playsinline></video>
    </section>

    <section id="features" class="main">
        <header class="accent1">
            <h2>Features</h2>
        </header>
        <ul class="tabs">
            <li>
                <h3>Store <span class="extra">files</span></h3>
                <div class="spotlight">
                    <ul>
                        <li id="uploadanything">
                            <h4>Upload Anything</h4>
                            <p>Text, images, videos, music, archives, anything goes.</p>
                        </li>
                        <li id="quota">
                            <h4>Simple Quota</h4>
                            <p>You get a single quota no matter what you upload, and you can easily see how much you have left.</p>
                        </li>
                    </ul>
                    <div class="image circle">
                        <i class="fa fa-hdd-o fa-fw large-circle-icon" id="store-icon"></i>
                    </div>
                    <ul>
                        <li id="unlimband">
                            <h4>Unlimited Bandwidth</h4>
                            <p>Share photos and send documents with no bandwidth cutoff.</p>
                        </li>
                        <li id="serverraid">
                            <h4>Reliable Servers</h4>
                            <p>Our servers are powered by redundant power grids and fiber connections, and your data is stored with RAID mirroring to ensure safety and reliability.</p>
                        </li>
                        <!--
                        <li id="nooversell">
                            <h4>No Overselling</h4>
                            <p>We don't sell more space than we have, so you can use your entire quota freely.</p>
                        </li>
                        -->
                    </ul>
                </div>
            </li>
            <li>
                <h3>Edit <span class="extra">documents</span></h3>
                <div class="spotlight">
                    <ul>
                        <li id="nodownload">
                            <h4>No Downloading Needed</h4>
                            <p>View and edit common file formats in your browser.</p>
                        </li>
                        <li id="collaboration">
                            <h4>Live Collaboration</h4>
                            <p>Simply copy-paste or share a link to allow team members to collaborate in real-time.  They don't even need an account.</p>
                        </li>
                    </ul>
                    <div class="image circle">
                        <i class="fa fa-file-text-o fa-fw large-circle-icon" id="edit-icon"></i>
                    </div>
                    <ul>
                        <li id="notjustdocs">
                            <h4>Not Just Documents</h4>
                            <p>Edit presentations, spreadsheets, text files, and more.</p>
                        </li>
                        <li id="libreoffice">
                            <h4>Powered by LibreOffice Online</h4>
                            <p><a href="https://www.libreoffice.org/">Download the free LibreOffice suite</a> on your computer to enjoy 100% compatability with our services.</p>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <h3><span class="extra">Do </span>More</h3>
                <div class="spotlight">
                    <ul>
                        <li id="photogallery">
                            <h4>Photo Gallery</h4>
                            <p>Organize and share photos with a built-in photo gallery.</p>
                        </li>
                        <li id="passman">
                            <h4>Password Manager</h4>
                            <p>Create encrypted password vaults only you can open, so you can memorize a single password, not a dozen.</p>
                        </li>
                    </ul>
                    <div class="image circle">
                        <i class="fa fa-rocket fa-fw large-circle-icon" id="more-icon"></i>
                    </div>
                    <ul>
                        <li id="orglife">
                            <h4>Organize Your Life</h4>
                            <p>Keep a calendar, make lists, save contacts, and more.</p>
                        </li>
                        <li id="extstorage">
                            <h4>External Storage</h4>
                            <p>Connect to and access other cloud storage from one convenient place.  Supports Dropbox, Google Drive, SFTP, Amazon S3, WebDAV, and more.</p>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </section>

    <!-- Section -->
    <section id="pricing" class="main accent2">
        <header>
            <h2>Pricing</h2>
            <p>We don't sell your data to third-parties and we hate ads, so that leaves us only one option for paying the bills. Is your privacy worth a cup of coffee?
        </header>
        <div class="inner">
            <div class="posts" style="color: black;">
                <?php
                foreach (PLANS as $id => $p) {
                    ?>
                    <div>
                        <article style="min-height: 250px;">
                            <div class="content">
                                <?php
                                echo "<h3>" . $p["name"] . "</h3>";
                                ?>
                                <p>$<?php echo $p["monthly"]; ?> per month
                                    <br><?php echo number_format($p["mb"]); ?> Megabytes
                                    <br><i><?php
                                        $coffee = round($p["monthly"] / COFFEE_AVG, 1);
                                        if ($coffee == 0) {
                                            echo "<br>";
                                        } else if ($coffee > 0 && $coffee < 1) {
                                            echo "Less than one cup of coffee";
                                        } else if ($coffee >= 5) {
                                            $toast = round($p["monthly"] / TOAST_AVG, 1);
                                            echo "$toast avocado toasts";
                                        } else if (ceil($coffee) - $coffee <= .2 && ceil($coffee) - $coffee > 0) {
                                            echo ceil($coffee) . " cups of coffee";
                                        } else if ($coffee >= 1 && $coffee < 6) {
                                            echo "$coffee cups of coffee";
                                        }
                                        ?></i>
                                <ul class="actions">
                                    <li><a href="purchase.php?plan=<?php echo $id; ?>" class="button">Sign Up</a></li>
                                </ul>
                            </div>
                        </article>
                    </div>
                    <?php
                }
                ?>
            </div>
            <div style="text-align: center;"><small>Assuming $<?php echo money_format('%i', COFFEE_AVG); ?> per coffee and $<?php echo money_format('%i', TOAST_AVG); ?> per avocado toast.</small></div>
        </div>
    </section>

    <?php include __DIR__ . "/inc/footer.php"; ?>

</div>

<?php include __DIR__ . "/inc/scripts.php"; ?>

<script>
    var icons = {
        "store-icon": {
            "default": "fa-hdd-o",
            "hover": {
                "uploadanything": "fa-upload",
                "quota": "fa-tasks",
                "unlimband": "fa-tachometer",
                "nooversell": "fa-usd",
                "serverraid": "fa-server"
            }
        },
        "edit-icon": {
            "default": "fa-file-text-o",
            "hover": {
                "nodownload": "fa-pencil-square-o",
                "collaboration": "fa-users",
                "notjustdocs": "fa-files-o",
                "libreoffice": "icon-libreoffice"
            }
        },
        "more-icon": {
            "default": "fa-rocket",
            "hover": {
                "photogallery": "fa-picture-o",
                "passman": "fa-lock",
                "orglife": "fa-calendar-check-o",
                "extstorage": "fa-globe"
            }
        }
    };

    /* Thanks to https://stackoverflow.com/a/30293936 for the jQuery anchor/hash scrolling */
    $(document).ready(function () {
        if (window.location.hash) {
            $('html, body').animate({
                scrollTop: $(window.location.hash).offset().top + 'px'
            }, 1000, 'swing');
        }

        Object.keys(icons).forEach(function (icon) {
            var defaulticon = icons[icon]["default"];
            Object.keys(icons[icon]["hover"]).forEach(function (hover) {
                var tempicon = icons[icon]["hover"][hover];
                $("#" + hover).hover(
                        function () {
                            $("#" + icon).removeClass(defaulticon);
                            $("#" + icon).addClass(icons[icon]["hover"][hover]);
                        },
                        function () {
                            $("#" + icon).removeClass(icons[icon]["hover"][hover]);
                            $("#" + icon).addClass(defaulticon);
                        }
                );
            });
        });
    });

    if (window.location.hash) {
        scroll(0, 0);
    }
    setTimeout(function () {
        scroll(0, 0);
    }, 1);
    $('.scroll').on('click', function (e) {
        e.preventDefault();
        $('html, body').animate({
            scrollTop: $($(this).attr('href')).offset().top + 'px'
        }, 1000, 'swing');
    });
</script>