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

Various UX improvments, add terms page and contact form

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: .EXPORT_ALL_VARIABLES:
BASE_TITLE = Recycled Cloud 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/ BLOBS = assets/
all: $(PAGES) all: $(PAGES)
@ -24,3 +24,4 @@ index.html: TITLE = "$(BASE_TITLE) | Home"
services.html: TITLE = "$(BASE_TITLE) | Services" services.html: TITLE = "$(BASE_TITLE) | Services"
manifesto.html: TITLE = "$(BASE_TITLE) | Manifesto" manifesto.html: TITLE = "$(BASE_TITLE) | Manifesto"
contact.html: TITLE = "$(BASE_TITLE) | Contact" 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-bottom: 20px;
} }
.margin-right-20 {
margin-right: 20px;
}
#section-nav { #section-nav {
padding-top: 25px; padding-top: 25px;
height: 75px; height: 75px;
@ -36,9 +40,26 @@ h2 {
top: -15px; top: -15px;
} }
a {
color: #000;
text-decoration: underline;
}
a:hover {
color: #000;
text-decoration: none;
}
#section-nav a { #section-nav a {
color: #000; color: #000;
padding-left: 10px; padding-left: 10px;
text-decoration: none;
}
#section-nav a:hover {
color: #000;
padding-left: 10px;
text-decoration: underline;
} }
#section-members a { #section-members a {
@ -52,7 +73,7 @@ h2 {
.nav-current { .nav-current {
font-weight: bold; font-weight: bold;
text-decoration: underline; text-decoration: underline !important;
} }
#section-hero, #section-services, #section-members, #section-contact, #section-hero, #section-services, #section-members, #section-contact,
@ -83,7 +104,7 @@ h2 .service-logo {
color: #fff; color: #fff;
} }
.btn:link, .btn:visited { .btn:link, .btn:visited, .btn {
background-color: #fff; background-color: #fff;
color: #013366; color: #013366;
padding: 10px 15px; padding: 10px 15px;
@ -148,12 +169,16 @@ h2 .service-logo {
color: #003366; color: #003366;
} }
#section-tech a, #section-members a { #section a, #section-members a {
color: black; color: black;
font-weight: bold; font-weight: bold;
text-decoration: underline; text-decoration: underline;
} }
#section-tech a {
font-weight: bold;
}
#section-tech a:hover, #section-members a:hover { #section-tech a:hover, #section-members a:hover {
text-decoration: none; text-decoration: none;
} }
@ -209,6 +234,11 @@ footer p {
color: #003366; color: #003366;
} }
.contact-rightpane {
padding-top: 20px;
padding-right: 50px;
}
hr { hr {
background-image: linear-gradient(to right, #003366, #5d0066); background-image: linear-gradient(to right, #003366, #5d0066);
height: 2px; height: 2px;
@ -217,3 +247,22 @@ hr {
.center { .center {
text-align: 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>
<p> <p>
$PHONE<br /> <img src="assets/images/contact.png" />
$MAIL
</p> </p>
</div> </div>
<div class="col contact-rightpane"> <div class="col contact-rightpane">
<h2>Send a message</h2> <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> </div>
</div> </div>

21
index.part
View File

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

86
manifesto.part
View File

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

6
page-template.sh
View File

@ -35,7 +35,7 @@ cat << EOF
</nav> </nav>
</div> </div>
<div class="col-2"> <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> </div>
</div> </div>
@ -45,10 +45,10 @@ cat << EOF
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-5"> <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>
<div class="col-7"> <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> </div>
</div> </div>

6
services.part
View File

@ -103,18 +103,18 @@
<h3>Linthal GL, Switzerland</h3> <h3>Linthal GL, Switzerland</h3>
<p> <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> </p>
</div> </div>
<div class="col"> <div class="col">
<h3>Lausanne VD, Switzerland</h3> <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>
<div class="col"> <div class="col">
<h3>Froideville VD, Switzerland</h3> <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> </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/>