You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

256 lines
11 KiB
PHP

<?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>