RecycledCloud/recycled.cloud
6
0
Fork 0
Code Issues 5 Pull requests Releases Wiki Activity

Various UX improvments, add terms page and contact form

Browse source
This commit is contained in:
Timothée Floure 2021-01-25 09:44:48 +01:00
parent 9429ced222
commit bffa8e5bad
Signed by: tfloure
GPG key ID: 4502C902C00A1E12
10 changed files with 137 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored Normal file
View file

@ -0,0 +1 @@
*.html

3
Makefile
View file

@ -5,7 +5,7 @@
.EXPORT_ALL_VARIABLES:
BASE_TITLE = Recycled Cloud
PAGES = index.html services.html manifesto.html contact.html
PAGES = index.html services.html manifesto.html contact.html terms.html
BLOBS = assets/
all: $(PAGES)
@ -24,3 +24,4 @@ index.html: TITLE = "$(BASE_TITLE) | Home"
services.html: TITLE = "$(BASE_TITLE) | Services"
manifesto.html: TITLE = "$(BASE_TITLE) | Manifesto"
contact.html: TITLE = "$(BASE_TITLE) | Contact"
terms.html: TITLE = "$(BASE_TITLE) | Terms"

55
assets/css/main.css
View file

@ -25,6 +25,10 @@ h2 {
margin-bottom: 20px;
}
.margin-right-20 {
margin-right: 20px;
}
#section-nav {
padding-top: 25px;
height: 75px;
@ -36,9 +40,26 @@ h2 {
top: -15px;
}
a {
color: #000;
text-decoration: underline;
}
a:hover {
color: #000;
text-decoration: none;
}
#section-nav a {
color: #000;
padding-left: 10px;
text-decoration: none;
}
#section-nav a:hover {
color: #000;
padding-left: 10px;
text-decoration: underline;
}
#section-members a {
@ -52,7 +73,7 @@ h2 {
.nav-current {
font-weight: bold;
text-decoration: underline;
text-decoration: underline !important;
}
#section-hero, #section-services, #section-members, #section-contact,
@ -83,7 +104,7 @@ h2 .service-logo {
color: #fff;
}
.btn:link, .btn:visited {
.btn:link, .btn:visited, .btn {
background-color: #fff;
color: #013366;
padding: 10px 15px;
@ -148,12 +169,16 @@ h2 .service-logo {
color: #003366;
}
#section-tech a, #section-members a {
#section a, #section-members a {
color: black;
font-weight: bold;
text-decoration: underline;
}
#section-tech a {
font-weight: bold;
}
#section-tech a:hover, #section-members a:hover {
text-decoration: none;
}
@ -209,6 +234,11 @@ footer p {
color: #003366;
}
.contact-rightpane {
padding-top: 20px;
padding-right: 50px;
}
hr {
background-image: linear-gradient(to right, #003366, #5d0066);
height: 2px;
@ -217,3 +247,22 @@ hr {
.center {
text-align: center;
}
input[type=text], input[type=email], textarea {
margin-top: 5px;
padding: 5px;
border-radius: 5px;
border: 1px solid gray;
background-color: white;
color: black;
width: 100%;
}
input[type=submit] {
border: 0;
float: right;
}
textarea {
height: 150px;
}

BIN
assets/images/contact.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.4 KiB

12
contact.part
View file

@ -14,12 +14,20 @@
</p>
<p>
$PHONE<br />
$MAIL
<img src="assets/images/contact.png" />
</p>
</div>
<div class="col contact-rightpane">
<h2>Send a message</h2>
<form action="https://meta.recycled.cloud/support">
<input type="text" name="name" placeholder="Name">
<br />
<input type="email" name="email" placeholder="Email">
<br />
<textarea name="content" placeholder="Your Message"></textarea>
<br />
<input type="submit" class="btn btn-green" value="Send">
</form>
</div>
</div>
</div>

21
index.part
View file

@ -2,6 +2,7 @@
<h1>Local and recycled cloud services.</h1>
<p>Swiss-based and as sustainable as we can.</p>
<a href="https://meta.recycled.cloud" class="btn btn-bold margin-right-20">Access the Console</a>
<a href="/manifesto.html" class="btn btn-bold">Read our Manifesto</a>
</div>
<div id="section-services">
@ -13,18 +14,18 @@
<h3>Web Hosting</h3>
<p class="service-description">
Low-footprint, static website hosting. Wordpress and generic PHP hosting.
Low-footprint (static website), Wordpress and generic PHP hosting.
</p>
<a href="/manifesto.html" class="btn btn-bold">Learn more</a>
<a href="services.html" class="btn btn-bold">Learn more</a>
</div>
<div class="col">
<img src="assets/images/nas.svg" class="service-logo" />
<h3>Storage</h3>
<p class="service-description">Borg based backup service or file sharing with NextCloud.</p>
<p class="service-description">Borg-based backup service and file syncing with NextCloud.</p>
<a href="/manifesto.html" class="btn btn-bold">Learn more</a>
<a href="services.html" class="btn btn-bold">Learn more</a>
</div>
<div class="col">
<img src="assets/images/server.svg" class="service-logo" />
@ -33,7 +34,7 @@
<p class="service-description">KVM virtual machines, running either one of our images or your
own.</p>
<a href="/manifesto.html" class="btn btn-bold">Learn more</a>
<a href="services.html" class="btn btn-bold">Learn more</a>
</div>
</div>
</div>
@ -57,9 +58,9 @@
</div>
<ul>
<li><a href="">IT Support</a></li>
<li><a href="">Project Management</a></li>
<li><a href="">Website Design</a></li>
<li><a href="https://e-durable.ch/support_services">IT Support</a></li>
<li><a href="https://e-durable.ch/project_management">Project Management</a></li>
<li><a href="https://e-durable.ch/contact.html">Website UX & Design</a></li>
</ul>
</div>
<div class="col">
@ -67,8 +68,8 @@
<img id="member-logo-ungleich" src="assets/images/ungleich-logo-black.svg" />
</div>
<ul>
<li><a href="">Server Colocation</a></li>
<li><a href="">IPv6-Everywhere</a></li>
<li><a href="https://ungleich.ch/u/products/colocation/">Server Colocation</a></li>
<li><a href="https://ungleich.ch/u/products/ipv6-mobile-internet-router/">IPv6-Everywhere</a></li>
</ul>
</div>
</div>

86
manifesto.part
View file

@ -1,7 +1,7 @@
<div class="section" id="section-manifesto">
<div class="container">
<div class="row">
<div class="col-6">
<div class="col-9">
<h1>Manifesto</h1>
<p>
We are saddened by the state of the world, and role that IT - which,
@ -17,52 +17,50 @@
</p>
</div>
</div>
<div class="row">
<div class="col-1"></div>
<div class="col-5">
<p>
<strong>There is no such thing as 'green' or 'sustainable' IT.</strong>
<br />
It will always require high-tech globalised insdustries, as well as
rare and hard to get resources. A maddening amount of those are throwed
away: we get (most of) our hardware from the second-hand market... and
landfills. We try to be the lesser evil but are not and will never be
'green'.
</p>
</div>
<div class="col-1"></div>
<div class="col-5">
<p>
<strong>IT and 'high tech' in general is not necessarly the right solution to a
problem.</strong>
<br />
They are no different from any other tool. You can't work around a
<div class="container">
<div class="row">
<div class="col-6">
<p>
<strong>There is no such thing as 'green' or 'sustainable' IT.</strong>
<br />
It will always require high-tech globalised insdustries, as well as
rare and hard to get resources. A maddening amount of those are throwed
away: we get (most of) our hardware from the second-hand market... and
landfills. We try to be the lesser evil but are not and will never be
'green'.
</p>
</div>
<div class="col-6">
<p>
<strong>IT and 'high tech' in general is not necessarly the right solution to a
problem.</strong>
<br />
They are no different from any other tool*. You can't work around a
ill-defined problem by aimlessly throwing resources and 'solutions'
at it.
</p>
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-1"></div>
<div class="col-5">
<p>
<strong>For the better or worse, we already live in a world controlled by
technology.</strong>
<br />
We can't let an anyone size its control: we work in the open, with open
tools, gladly welcome anyone who want to join and don't lock them in.
</p>
</div>
<div class="col-1"></div>
<div class="col-5">
<p>
<strong>We fight against the use of technology as a mean of control an
manipulation.</strong>
<br />
We fight against centralization, both from technical and governance
reasons. We are not one, but a federation of small hosting providers
with similar ideology.
</p>
<div class="row">
<div class="col-6">
<p>
<strong>For the better or worse, we already live in a world controlled by
technology.</strong>
<br />
We can't let an anyone size its control: we work in the open, with open
tools, gladly welcome anyone who want to join and don't lock them in.
</p>
</div>
<div class="col-6">
<p>
<strong>We fight against the use of technology as a mean of control an
manipulation.</strong>
<br />
We fight against centralization, both from technical and governance
reasons. We are not one, but a federation of small hosting providers
with similar ideology.
</p>
</div>
</div>
</div>
</div>

6
page-template.sh
View file

@ -35,7 +35,7 @@ cat << EOF
</nav>
</div>
<div class="col-2">
<a href="/" class="nav-current">EN</a>
<a href="/" class="nav-current">EN</a><!-- <a href="/" class="">FR</a> -->
</div>
</div>
</div>
@ -45,10 +45,10 @@ cat << EOF
<div class="container">
<div class="row">
<div class="col-5">
<p><a href="/terms">Terms of Usage & Privacy Policy</a></p>
<p><a href="terms.html">Terms of Usage & Privacy Policy</a></p>
</div>
<div class="col-7">
<p>CC-BY e-Durable SA | <a href="https://e-durable.ch">More about e-Durable SA<a/></p>
<p>CC-BY e-Durable SA | <a href="https://e-durable.ch">More about e-Durable SA</a></p>
</div>
</div>
</div>

6
services.part
View file

@ -103,18 +103,18 @@
<h3>Linthal GL, Switzerland</h3>
<p>
100 Mbps (burstable to 1Gbps) upstream, operated by e-Durable SA in ungleich's Datacenterlight.
Three shelves, 100 Mbps (burstable to 1Gbps) upstream, operated by <a href="https://e-durable.ch">e-Durable SA</a> in <a href="https://ungleich.ch">ungleich</a>'s Datacenterlight.
</p>
</div>
<div class="col">
<h3>Lausanne VD, Switzerland</h3>
<p>100 Mbps upstream, operated by e-Durable SA.</p>
<p>One 42U rack, 100 Mbps upstream, operated by <a href="https://e-durable.ch">e-Durable SA</a>.</p>
</div>
<div class="col">
<h3>Froideville VD, Switzerland</h3>
<p>1 Gbps upstream, operated by e-Durable SA.</p>
<p>Two 42 racks, 1 Gbps upstream, operated by <a href="https://e-durable.ch">e-Durable SA</a>.</p>
</div>
</div>
</div>

13
terms.part Normal file
View file

@ -0,0 +1,13 @@
<h1>Terms of Usage & Privacy Policy</h1>
<p>
We have yet to write proper terms, but it'll be along the lines of:
<ul>
<li>Use our services in good faith and don't get us in trouble.</li>
<li>We collect only what is strictly necessary (email, name and billing address).</li>
<li>We do not share your data with anyone outside our organization.</li>
<li>We'll email you before these terms change.</li>
</ul>
Please <a href="contact.html">contact us</a> if you have any questions.
<p/>