448 lines
20 KiB
HTML
448 lines
20 KiB
HTML
<!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.svg" />
|
|
<div class="group-24">
|
|
<div class="flex-row">
|
|
<img class="brand bp3-animate-enter" src="img/brand-1@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/stack-3.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-2@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-3@2x.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@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@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.png" />
|
|
<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-1@1x.svg" />
|
|
</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-1@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@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@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@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@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@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@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>
|