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: .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>

18
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,9 +17,9 @@
</p> </p>
</div> </div>
</div> </div>
<div class="container">
<div class="row"> <div class="row">
<div class="col-1"></div> <div class="col-6">
<div class="col-5">
<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 />
@ -30,21 +30,19 @@
'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-1"></div> <div class="col-6">
<div class="col-5">
<p> <p>
<strong>For the better or worse, we already live in a world controlled by <strong>For the better or worse, we already live in a world controlled by
technology.</strong> technology.</strong>
@ -53,8 +51,7 @@
tools, gladly welcome anyone who want to join and don't lock them in. tools, gladly welcome anyone who want to join and don't lock them in.
</p> </p>
</div> </div>
<div class="col-1"></div> <div class="col-6">
<div class="col-5">
<p> <p>
<strong>We fight against the use of technology as a mean of control an <strong>We fight against the use of technology as a mean of control an
manipulation.</strong> manipulation.</strong>
@ -67,6 +64,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div id="section-contact"> <div id="section-contact">
<div class="container"> <div class="container">

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/>