servers.coop/index.html
decentral1se 659ec15322
All checks were successful
continuous-integration/drone/push Build is passing
Fix mail link and more copy/pasta
I have no idea what I'm doing
2021-08-01 10:47:41 +02:00

656 lines
24 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="img/favicon.ico" />
<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="Servers.coop" />
<title>Servers.coop</title>
</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">
<a
href="#reclaim-hosting"
class="liberationmono-bold-black-18px"
>ABOUT</a
>
</div>
<div class="support liberationmono-bold-black-18px">
<a
href="#joint-mission"
class="liberationmono-bold-black-18px"
>PARTNERS</a
>
</div>
</div>
</div>
<div class="overlap-group2">
<div class="overlap-group1">
<h1 class="hero-text liberationsans-bold-jade-48px">
The recipe for self-managed co-operative computing
</h1>
<div class="hero-text-1 liberationsans-bold-black-18px">
Servers.coop is an algorithm for co-operation: a technical,
governance, and cost-sharing stack which radically reduces
the cost and complexity of setting up a server hosting
provider.
</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"
>
<a
class="liberationmono-bold-white-14px"
href="https://yolo.servers.coop"
>TRY IT OUT</a
>
</div>
</div>
<div class="button-1">
<div
class="text-i13631422432 valign-text-middle liberationmono-bold-jade-14px"
>
<a id="get-in-touch" href="mailto:hello@servers.coop"
>GET IN TOUCH</a
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="aim" id="reclaim-hosting">
<div
class="reclaim-hosting liberationsans-bold-jade-48px bp3-animate-enter2"
show-on-scroll
>
Reclaiming digital infrastructure
</div>
<div
class="hero-text-2 liberationsans-bold-black-18px bp3-animate-enter3"
>
Our goal is to support an emerging ecosystem of grassroots,
decentralised server hosting providers by stewarding a technical and
social toolkit designed for free software communities worldwide.
</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
id="joint-mission"
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-mc3.png"
/><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"
><a
href="https://creativecommons.org/licenses/by-sa/4.0/"
class="liberationsans-bold-black-18px"
>CC BY-SA</a
></span
><span class="liberationsans-bold-white-18px"> | </span
><span class="liberationsans-bold-black-18px"
><a
href="git.coopcloud.tech/servers.coop/servers.coop"
class="liberationsans-bold-black-18px"
>(source code)</a
></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">
<a href="#reclaim-hosting" class="liberationmono-bold-black-18px"
>ABOUT</a
>
</div>
<div class="support liberationmono-bold-black-18px">
<a href="#joint-mission" class="liberationmono-bold-black-18px"
>PARTNERS</a
>
</div>
</div>
<div class="hero-text liberationsans-bold-jade-32px">
The recipe for self-managed co-operative computing
</div>
<div class="hero-text-1 liberationsans-bold-black-18px">
Servers.coop is an algorithm for co-operation: a technical,
governance, and cost-sharing stack which radically reduces the cost
and complexity of setting up a server hosting provider.
</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"
>
<a
class="liberationmono-bold-white-14px"
href="https://yolo.servers.coop"
>TRY IT OUT</a
>
</div>
</div>
<div class="button-1">
<div
class="text-i13629857432 valign-text-middle liberationmono-bold-jade-14px"
>
<a id="get-in-touch" href="mailto:hello@servers.coop"
>GET IN TOUCH</a
>
</div>
</div>
</div>
<img class="hero-tilt" src="img/hero-tilt-1@1x.svg" />
</div>
<div class="aim" id="reclaim-hosting">
<div class="group-23">
<div
class="reclaim-hosting liberationsans-bold-jade-32px bp1-animate-enter2"
show-on-scroll
>
Reclaiming digital <br />
infrastructure
</div>
<div
class="hero-text-2 liberationsans-bold-black-18px bp1-animate-enter3 reclaiming-text"
>
Our goal is to support an emerging ecosystem of grassroots,
decentralised server hosting providers by stewarding a technical
and social toolkit designed for free software communities
worldwide.
</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
id="joint-mission"
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-mc3.png"
/><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"
><a
href="https://creativecommons.org/licenses/by-sa/4.0/"
class="liberationsans-bold-black-18px"
>CC BY-SA</a
></span
><span class="liberationsans-bold-white-18px"> | </span
><span class="liberationsans-bold-black-18px"
><a
href="git.coopcloud.tech/servers.coop/servers.coop"
class="liberationsans-bold-black-18px"
>(source code)</a
></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">
<a
href="#reclaim-hosting"
class="liberationmono-bold-black-18px"
>ABOUT</a
>
</div>
<div class="support liberationmono-bold-black-18px">
<a href="#joint-mission" class="liberationmono-bold-black-18px"
>PARTNERS</a
>
</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"
>
<a
class="liberationmono-bold-white-14px"
href="https://yolo.servers.coop"
>TRY IT OUT</a
>
</div>
</div>
<div class="button-1">
<div
class="text-i13630521432 valign-text-middle liberationmono-bold-jade-14px"
>
<a id="get-in-touch" href="mailto:hello@servers.coop"
>GET IN TOUCH</a
>
</div>
</div>
</div>
</div>
<img class="hero-tilt" src="img/hero-tilt-4@1x.png" />
</div>
<div class="aim" id="reclaim-hosting">
<div class="group-23">
<div
class="reclaim-hosting liberationsans-bold-jade-32px bp2-animate-enter2"
show-on-scroll
>
Reclaiming digital infrastructure
</div>
<div
class="hero-text-2 liberationsans-bold-black-18px bp2-animate-enter3"
>
Our goal is to support an emerging ecosystem of grassroots,
decentralised server hosting providers by stewarding a technical
and social toolkit designed for free software communities
worldwide.
</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
id="joint-mission"
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-mc3.png"
/><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"
><a
href="https://creativecommons.org/licenses/by-sa/4.0/"
class="liberationsans-bold-black-18px"
>CC BY-SA</a
> </span
><span class="liberationsans-bold-white-18px"> | </span
><span class="liberationsans-bold-black-18px"
><a
href="git.coopcloud.tech/servers.coop/servers.coop"
class="liberationsans-bold-black-18px"
>(source code)</a
></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>