serverscoop-site/index.html

448 lines
20 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="shortcut icon" type="image/png" href="https://animaproject.s3.amazonaws.com/home/favicon.png" />
<meta name="og:type" content="website" />
<meta name="twitter:card" content="photo" />
<link rel="stylesheet" type="text/css" href="css/mobile.css" />
<style></style>
<link rel="stylesheet" type="text/css" href="css/styleguide.css" />
<link rel="stylesheet" type="text/css" href="css/globals.css" />
<meta name="author" content="AnimaApp.com - Design to code, Automated." />
</head>
<body style="margin: 0; background: #ffffff">
<input type="hidden" id="anPageName" name="page" value="mobile" />
<div class="container-center-horizontal">
<div class="desktop screen">
<div class="header">
<div class="overlap-group-1">
<img class="hero-tilt" src="img/hero-tilt@1x.png" />
<div class="group-24">
<div class="flex-row">
<img class="brand bp3-animate-enter" src="img/brand@2x.svg" />
<div class="menu bp3-animate-enter1">
<div class="about liberationmono-bold-black-18px">ABOUT</div>
<div class="support liberationmono-bold-black-18px">SUPPORT</div>
<div class="connect liberationmono-bold-black-18px">CONNECT</div>
</div>
</div>
<div class="overlap-group2">
<div class="overlap-group1">
<h1 class="hero-text liberationsans-bold-jade-48px">A DIY framework for community-owned computing</h1>
<div class="hero-text-1 liberationsans-bold-black-18px">
We believe in a world where our technology services are run by people we know, instead of remote,
profit-hungry advertising companies.
</div>
<img class="stack4" src="img/stack4-3@1x.svg" /><img class="human1" src="img/human1@2x.svg" />
</div>
<div class="buttons">
<div class="button smart-layers-pointers">
<div class="text-i13631421432 valign-text-middle liberationmono-bold-white-14px">TRY IT OUT</div>
</div>
<div class="button-1">
<div class="text-i13631422432 valign-text-middle liberationmono-bold-jade-14px">GET IN TOUCH</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="aim">
<div class="reclaim-hosting liberationsans-bold-jade-48px bp3-animate-enter2" show-on-scroll>
Reclaim hosting
</div>
<div class="hero-text-2 liberationsans-bold-black-18px bp3-animate-enter3">
Our goal is to reclaim the means of hosting, by making it easy for small organisations to run servers using
their own hardware.
</div>
<div class="flex-row-1">
<div class="box bp3-animate-enter4">
<div class="frame-4">
<div class="overlap-group">
<div class="text liberationsans-bold-jade-32px">libre software platform</div>
<img class="icon-dove" src="img/icon-dove-6@2x.svg" />
</div>
</div>
<div class="text-1 liberationsans-bold-black-18px">
<span class="liberationsans-bold-black-18px">Open source server hosting using </span
><span class="liberationmono-bold-black-18px">capsul-flask</span>
</div>
</div>
<div class="box-1 bp3-animate-enter5">
<div class="frame-4">
<div class="overlap-group">
<div class="text liberationsans-bold-jade-32px">co-operative algorithm</div>
<img class="icon-dove-1" src="img/icon-dove-1@2x.svg" />
</div>
</div>
<div class="text-1 liberationsans-bold-black-18px">
<span class="liberationsans-bold-black-18px">Open source server hosting using </span
><span class="liberationmono-bold-black-18px">capsul-flask</span>
</div>
</div>
</div>
<p class="text-5 liberationsans-regular-normal-black-16px bp3-animate-enter6">
Fig. 2: The two parts of Serverscoop. Part platform, part community.
</p>
</div>
<div class="frame-25">
<div class="overlap-group2-1">
<img class="hero-tilt-1" src="img/hero-tilt-1@1x.png" />
<div class="frame-26"></div>
<div class="group-26">
<img class="human2" src="img/human2@2x.svg" />
<div class="overlap-group-2">
<div class="a-joint-mission liberationsans-bold-jade-48px bp3-animate-enter7" show-on-scroll>
A joint mission
</div>
<div class="hero-text-3 liberationsans-bold-black-18px bp3-animate-enter8">
Serverscoop is the collective effort of new and established entities in the tech co-operative space.
</div>
</div>
<div class="frame-20">
<img class="logo-autonomic bp3-animate-enter9" src="img/logo-autonomic-3@2x.svg" /><img
class="logo-platform6 bp3-animate-enter10"
src="img/logo-platform6@2x.svg"
/><img class="logo-wa bp3-animate-enter11" src="img/logo-wa@2x.svg" />
</div>
<div class="frame-21">
<img class="logo-cni bp3-animate-enter12" src="img/logo-cni@2x.svg" /><img
class="logo-mediablaze bp3-animate-enter13"
src="img/logo-mediablaze-3@2x.svg"
/>
</div>
</div>
</div>
</div>
<div class="frame-28">
<div class="hero-text-4 liberationsans-bold-white-18px-2">
<span class="liberationsans-bold-black-18px">LINKS </span
><span class="liberationsans-bold-white-18px">| </span
><span class="liberationsans-bold-black-18px">MAY</span
><span class="liberationsans-bold-white-18px"> | </span
><span class="liberationsans-bold-black-18px">LOOK</span
><span class="liberationsans-bold-white-18px"> | </span
><span class="liberationsans-bold-black-18px">LIKE</span
><span class="liberationsans-bold-white-18px"> | </span
><span class="liberationsans-bold-black-18px">THIS</span>
</div>
</div>
</div>
</div>
<div class="container-center-horizontal">
<div class="mobile screen">
<div class="header">
<img class="brand bp1-animate-enter" src="img/brand-5@2x.svg" />
<div class="menu bp1-animate-enter1">
<div class="about liberationmono-bold-black-18px">ABOUT</div>
<div class="support liberationmono-bold-black-18px">SUPPORT</div>
<div class="connect liberationmono-bold-black-18px">CONNECT</div>
</div>
<div class="hero-text liberationsans-bold-jade-32px">A DIY framework for community-owned computing</div>
<div class="hero-text-1 liberationsans-bold-black-18px">
We believe in a world where our technology services are run by people we know, instead of remote,
profit-hungry advertising companies.
</div>
<div class="overlap-group">
<img class="stack4" src="img/stack4-1@2x.svg" /><img class="human1" src="img/human1-1@2x.svg" />
</div>
<div class="buttons">
<div class="button smart-layers-pointers">
<div class="text-i13629856432 valign-text-middle liberationmono-bold-white-14px">TRY IT OUT</div>
</div>
<div class="button-1">
<div class="text-i13629857432 valign-text-middle liberationmono-bold-jade-14px">GET IN TOUCH</div>
</div>
</div>
<img class="hero-tilt" src="img/hero-tilt-10@2x.png" />
</div>
<div class="aim">
<div class="group-23">
<div class="reclaim-hosting liberationsans-bold-jade-32px bp1-animate-enter2" show-on-scroll>
Reclaim hosting
</div>
<div class="hero-text-2 liberationsans-bold-black-18px bp1-animate-enter3">
Our goal is to reclaim the means of hosting, by making it easy for small organisations to run servers
using their own hardware.
</div>
</div>
<div class="box bp1-animate-enter4">
<div class="frame-4">
<div class="text">libre software platform</div>
<img class="icon-dove" src="img/icon-dove-10@2x.svg" />
</div>
<div class="text-1 liberationsans-bold-black-18px">
<span class="liberationsans-bold-black-18px">Open source server hosting using </span
><span class="liberationmono-bold-black-18px">capsul-flask</span>
</div>
</div>
<div class="box-1 bp1-animate-enter5">
<div class="frame-4">
<div class="text">co-operative algorithm</div>
<img class="icon-dove" src="img/icon-handshake@2x.svg" />
</div>
<div class="text-1 liberationsans-bold-black-18px">
<span class="liberationsans-bold-black-18px">Open source server hosting using </span
><span class="liberationmono-bold-black-18px">capsul-flask</span>
</div>
</div>
<p class="text-10 liberationsans-regular-normal-black-16px bp1-animate-enter6">
Fig. 2: The two parts of Serverscoop. Part platform, part community.
</p>
</div>
<div class="frame-25">
<div class="overlap-group1">
<img class="hero-tilt-1" src="img/hero-tilt-3@2x.png" />
<div class="frame-26"></div>
<img class="human2" src="img/human2-1@2x.svg" />
</div>
<div class="a-joint-mission liberationsans-bold-jade-32px bp1-animate-enter7" show-on-scroll>
A joint mission
</div>
<div class="hero-text-3 liberationsans-bold-black-18px bp1-animate-enter8">
Serverscoop is the collective effort of new and established entities in the tech co-operative space.
</div>
<div class="frame-20">
<img class="logo-autonomic bp1-animate-enter9" src="img/logo-autonomic-5@2x.svg" /><img
class="logo-platform6 bp1-animate-enter10"
src="img/logo-platform6-1@2x.svg"
/><img class="logo-wa bp1-animate-enter11" src="img/logo-wa-5@2x.svg" />
</div>
<div class="frame-21">
<img class="logo-cni bp1-animate-enter12" src="img/logo-cni-5@2x.svg" /><img
class="logo-mediablaze bp1-animate-enter13"
src="img/logo-mediablaze-5@2x.svg"
/>
</div>
</div>
<div class="frame-28">
<div class="hero-text-4 liberationsans-bold-white-18px-2">
<span class="liberationsans-bold-black-18px">LINKS </span
><span class="liberationsans-bold-white-18px">| </span
><span class="liberationsans-bold-black-18px">MAY</span
><span class="liberationsans-bold-white-18px"> | </span
><span class="liberationsans-bold-black-18px">LOOK</span
><span class="liberationsans-bold-white-18px"> | </span
><span class="liberationsans-bold-black-18px">LIKE</span
><span class="liberationsans-bold-white-18px"> | </span
><span class="liberationsans-bold-black-18px">THIS</span>
</div>
</div>
</div>
</div>
<div class="container-center-horizontal">
<div class="tablet screen">
<div class="overlap-group">
<div class="header">
<img class="brand bp2-animate-enter" src="img/brand-7@2x.svg" />
<div class="menu bp2-animate-enter1">
<div class="about liberationmono-bold-black-18px">ABOUT</div>
<div class="support liberationmono-bold-black-18px">SUPPORT</div>
<div class="connect liberationmono-bold-black-18px">CONNECT</div>
</div>
<div class="hero-text liberationsans-bold-jade-32px">A DIY framework for community-owned computing</div>
<div class="hero-text-1 liberationsans-bold-black-18px">
We believe in a world where our technology services are run by people we know, instead of remote,
profit-hungry advertising companies.
</div>
<div class="overlap-group1-1">
<img class="stack4" src="img/stack4-2@2x.svg" /><img class="human1" src="img/human1-2@2x.svg" />
<div class="buttons">
<div class="button smart-layers-pointers">
<div class="text-i13630520432 valign-text-middle liberationmono-bold-white-14px">TRY IT OUT</div>
</div>
<div class="button-1">
<div class="text-i13630521432 valign-text-middle liberationmono-bold-jade-14px">GET IN TOUCH</div>
</div>
</div>
</div>
<img class="hero-tilt" src="img/hero-tilt-4@1x.png" />
</div>
<div class="aim">
<div class="group-23">
<div class="reclaim-hosting liberationsans-bold-jade-32px bp2-animate-enter2" show-on-scroll>
Reclaim hosting
</div>
<div class="hero-text-2 liberationsans-bold-black-18px bp2-animate-enter3">
Our goal is to reclaim the means of hosting, by making it easy for small organisations to run servers
using their own hardware.
</div>
</div>
<div class="flex-row">
<div class="box bp2-animate-enter4">
<div class="frame-4">
<div class="overlap-group1">
<div class="text-1 liberationsans-bold-jade-32px">libre software platform</div>
<img class="icon-dove" src="img/icon-dove-6@2x.svg" />
</div>
</div>
<div class="text-1-1 liberationsans-bold-black-18px">
<span class="liberationsans-bold-black-18px">Open source server hosting using </span
><span class="liberationmono-bold-black-18px">capsul-flask</span>
</div>
</div>
<div class="box-1 bp2-animate-enter5">
<div class="frame-4">
<div class="overlap-group1">
<div class="text-1 liberationsans-bold-jade-32px">co-operative algorithm</div>
<img class="icon-dove" src="img/icon-handshake@2x.svg" />
</div>
</div>
<div class="text-1-1 liberationsans-bold-black-18px">
<span class="liberationsans-bold-black-18px">Open source server hosting using </span
><span class="liberationmono-bold-black-18px">capsul-flask</span>
</div>
</div>
</div>
<p class="text-15 liberationsans-regular-normal-black-16px bp2-animate-enter6">
Fig. 2: The two parts of Serverscoop. Part platform, part community.
</p>
</div>
</div>
<div class="frame-25">
<div class="overlap-group2">
<img class="hero-tilt-1" src="img/hero-tilt-5@1x.png" />
<div class="frame-26"></div>
<img class="human2" src="img/human2-2@2x.svg" />
</div>
<div class="a-joint-mission liberationsans-bold-jade-32px bp2-animate-enter7" show-on-scroll>
A joint mission
</div>
<div class="hero-text-3 liberationsans-bold-black-18px bp2-animate-enter8">
Serverscoop is the collective effort of new and established entities in the tech co-operative space.
</div>
<div class="frame-20">
<img class="logo-autonomic bp2-animate-enter9" src="img/logo-autonomic-5@2x.svg" /><img
class="logo-platform6 bp2-animate-enter10"
src="img/logo-platform6-2@2x.svg"
/><img class="logo-wa bp2-animate-enter11" src="img/logo-wa-2@2x.svg" />
</div>
<div class="frame-21">
<img class="logo-cni bp2-animate-enter12" src="img/logo-cni-7@2x.svg" /><img
class="logo-mediablaze bp2-animate-enter13"
src="img/logo-mediablaze-3@2x.svg"
/>
</div>
</div>
<div class="frame-28">
<div class="hero-text-4 liberationsans-bold-white-18px-2">
<span class="liberationsans-bold-black-18px">LINKS </span
><span class="liberationsans-bold-white-18px">| </span
><span class="liberationsans-bold-black-18px">MAY</span
><span class="liberationsans-bold-white-18px"> | </span
><span class="liberationsans-bold-black-18px">LOOK</span
><span class="liberationsans-bold-white-18px"> | </span
><span class="liberationsans-bold-black-18px">LIKE</span
><span class="liberationsans-bold-white-18px"> | </span
><span class="liberationsans-bold-black-18px">THIS</span>
</div>
</div>
</div>
</div>
<script>
function ShowOnScroll() {
this.toShow = [];
this.nextEventY = undefined;
}
ShowOnScroll.prototype.show = function (e) {
e.style.display = "";
};
ShowOnScroll.prototype.hide = function (e) {
e.style.display = "none";
};
ShowOnScroll.prototype.getTop = function (e) {
if (e.Top != undefined && e.Top != 0) {
return e.Top;
}
var top = 0;
var iter = e;
do {
top += iter.offsetTop || 0;
iter = iter.offsetParent;
} while (iter);
e.Top = top;
return top;
};
ShowOnScroll.prototype.onScroll = function () {
var screenBottom = window.pageYOffset + window.innerHeight;
if (this.nextEventY == undefined || this.nextEventY > screenBottom) {
return;
}
this.nextEventY = undefined;
for (var i = 0; i < this.toShow.length; i++) {
var e = this.toShow[i];
var top = this.getTop(e);
if (top < screenBottom) {
this.show(e);
this.toShow.shift();
i--;
} else {
this.nextEventY = top;
break;
}
}
};
ShowOnScroll.prototype.resetScrolling = function () {
// Clear state
var screenBottom = window.pageYOffset + window.innerHeight;
for (var i = 0; i < this.toShow.length; i++) {
var e = this.toShow[i];
this.show(e);
}
this.toShow = [];
this.nextEventY == undefined;
// Collect items
var itemsToShowOnScroll = Array.prototype.slice.call(document.getElementsByTagName("*"));
itemsToShowOnScroll = itemsToShowOnScroll.filter(function (e) {
return e.getAttribute("show-on-scroll") != undefined;
});
var getTop = this.getTop;
itemsToShowOnScroll.sort(function (a, b) {
return getTop(a) - getTop(b);
});
for (var i = 0; i < itemsToShowOnScroll.length; i++) {
var e = itemsToShowOnScroll[i];
var top = this.getTop(e);
if (top < screenBottom) {
continue;
}
this.toShow.push(e);
this.hide(e);
this.nextEventY = this.nextEventY != undefined ? this.nextEventY : top;
}
};
ShowOnScroll.prototype.handleEvent = function (e) {
switch (e.type) {
case "scroll":
this.onScroll();
break;
case "resize":
this.resetScrolling();
break;
}
};
ShowOnScroll.prototype.init = function () {
this.resetScrolling();
window.addEventListener("scroll", this);
window.addEventListener("resize", this);
};
// After anima-src
setTimeout(function () {
var instShowOnScroll = new ShowOnScroll();
instShowOnScroll.init();
}, 250);
</script>
</body>
</html>