Merge branch 'master' of github.com:EaterOfCode/zer.ooo into addEmailToUser

LICENSE

@@ -1,7 +1,14 @@
-Copyright © 2016 Corné Oppelaar
+Copyright (C) 2016 Corné Oppelaar
 
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or any later version.
 
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
 
-THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.

public/css/main.css

@@ -18,7 +18,7 @@
 @import url(vendors/flaticon.css);
 @import url(vendors/font-awesome.min.css);
 body {
-  background-color: #7aa2cb; }
+  background-color: #eee9d9; }
 
 .flexcontainer {
   display: -webkit-flex;
@@ -48,7 +48,7 @@ body {
   background: linear-gradient(#F1D4AF, #eee9d9);
   flex-direction: row;
   -webkit-flex-direction: row;
-  min-height: 80vh; }
+  min-height: 65vh; }
   @media (max-width: 1200px) {
     .info-page {
       flex-direction: column;
@@ -57,6 +57,32 @@ body {
 .info-page-item {
   margin: 100px 50px 50px; }
 
+/**
+ * Page with the technical details.
+ */
+.technical-page {
+  background: #24242f;
+  min-height: 30vh; }
+
+.flex-table {
+  display: flex;
+  margin: 50px auto;
+  max-width: 800px;
+  flex-wrap: wrap;
+  padding: 0 10px; }
+  @media (max-width: 1200px) {
+    .flex-table {
+      max-width: 400px;
+      flex-direction: column; } }
+
+.flex-table-header, .flex-table-value {
+  width: 200px;
+  float: left;
+  box-sizing: border-box; }
+
+.flex-table-row {
+  max-width: 400px; }
+
 /**
  * Third section of the main page, containing the link to the Github page.
  */
@@ -199,7 +225,8 @@ body {
   color: #424769; }
 
 /**
- * Second section of the main page, containing the three descriptive column and flaticons (http://www.flaticon.com/authors/madebyoliver).
+ * Second section of the main page, containing the three descriptive columns, flaticons (http://www.flaticon.com/authors/madebyoliver)
+ and the technical details.
  */
 .info-page h1 {
   font-family: 'Rubik';
@@ -226,6 +253,25 @@ body {
     [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
       font-size: 5em; } }
 
+.technical-page {
+  color: #fff;
+  font-size: 1.2em;
+  line-height: 2em; }
+
+.technical-page h1 {
+  font-family: 'Montserrat';
+  color: #dab199;
+  text-align: center;
+  font-size: 2em;
+  text-transform: uppercase;
+  line-height: 2em; }
+  @media (max-width: 1200px) {
+    .technical-page h1 {
+      line-height: 1em; } }
+
+.flex-table-header {
+  color: #E08E79; }
+
 /**
  * Third section of the main page, containing the link to the Github page.
  */
@@ -258,4 +304,38 @@ body {
   color: #E08E79;
   text-shadow: 0px 0px 0px #e9bd84, 1px 1px 0px #e9bd84, 2px 2px 0px #e9bd84, 3px 3px 0px #e9bd84, 4px 4px 0px #e9bd84, 5px 5px 0px #e9bd84, 6px 6px 0px #e9bd84, 7px 7px 0px #e9bd84, 8px 8px 0px #e9bd84, 9px 9px 0px #e9bd84, 10px 10px 0px #e9bd84; }
 
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px solid #8684d3; }
+
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 250px;
+  background-color: white;
+  color: black;
+  text-align: left;
+  border-radius: 6px;
+  padding: 15px;
+  position: absolute;
+  z-index: 1;
+  bottom: 150%;
+  left: 50%;
+  margin-left: -60px;
+  font-size: 0.8em;
+  line-height: 1.5em; }
+
+.tooltip .tooltiptext::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 10%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: white transparent transparent transparent; }
+
+.tooltip:hover .tooltiptext {
+  visibility: visible; }
+
 /*# sourceMappingURL=main.css.map */

public/css/main.css.map

@@ -1,7 +1,7 @@
 {
 "version": 3,
-"mappings": "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",
+"mappings": "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",
-"sources": ["main.scss","modules/_modules.scss","partials/_base.scss","partials/_navigation.sass","partials/_messages.scss","partials/_forms.sass","partials/_fonts.scss","partials/_typography.scss"],
+"sources": ["main.scss","modules/_modules.scss","partials/_base.scss","partials/_navigation.sass","partials/_messages.scss","partials/_forms.sass","partials/_fonts.scss","partials/_typography.scss","partials/_tooltips.scss"],
 "names": [],
 "file": "main.css"
 }

public/css/main.scss

@@ -17,6 +17,7 @@
 @import "partials/_forms";
 @import "partials/_fonts";
 @import "partials/_typography";
+@import "partials/_tooltips";
 
 // vendors
 @import "vendors/normalize.css";

public/css/partials/_base.scss

@@ -3,7 +3,7 @@
  */
 
 body {
-  background-color: #7aa2cb;
+  background-color: #eee9d9;
 }
 
 .flexcontainer {
@@ -41,7 +41,7 @@ body {
   background: linear-gradient(#F1D4AF, #eee9d9);
   flex-direction: row;
   -webkit-flex-direction: row;
-  min-height: 80vh;
+  min-height: 65vh;
   @include break-small {
    flex-direction: column;
    -webkit-flex-direction: column;
@@ -52,6 +52,38 @@ body {
   margin: 100px 50px 50px;
 }
 
+/**
+ * Page with the technical details.
+ */
+
+.technical-page {
+  background: #24242f;
+  min-height: 30vh;
+}
+
+.flex-table {
+  display: flex;
+  margin: 50px auto;
+  max-width: 800px;
+  flex-wrap: wrap;
+  padding: 0 10px;
+  @include break-small {
+    max-width: 400px;
+    flex-direction: column;
+  }
+}
+
+.flex-table-header, .flex-table-value {
+  width: 200px;
+  float: left;
+  box-sizing: border-box;
+
+}
+
+.flex-table-row {
+  max-width: 400px;
+}
+
 /**
  * Third section of the main page, containing the link to the Github page.
  */

public/css/partials/_tooltips.scss

@@ -0,0 +1,37 @@
+.tooltip {
+    position: relative;
+    display: inline-block;
+    border-bottom: 1px solid #8684d3;
+}
+
+.tooltip .tooltiptext {
+    visibility: hidden;
+    width: 250px;
+    background-color: white;
+    color: black;
+    text-align: left;
+    border-radius: 6px;
+    padding: 15px;
+    position: absolute;
+    z-index: 1;
+    bottom: 150%;
+    left: 50%;
+    margin-left: -60px;
+    font-size: 0.8em;
+    line-height: 1.5em;
+}
+
+.tooltip .tooltiptext::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 10%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: white transparent transparent transparent;
+}
+
+.tooltip:hover .tooltiptext {
+    visibility: visible;
+}

public/css/partials/_typography.scss

@@ -40,7 +40,8 @@
 }
 
 /**
- * Second section of the main page, containing the three descriptive column and flaticons (http://www.flaticon.com/authors/madebyoliver).
+ * Second section of the main page, containing the three descriptive columns, flaticons (http://www.flaticon.com/authors/madebyoliver)
+ and the technical details.
  */
 
  .info-page h1 {
@@ -69,6 +70,28 @@
   }
 }
 
+.technical-page {
+  color: #fff;
+  font-size: 1.2em;
+  line-height: 2em;
+}
+
+.technical-page h1 {
+ font-family: 'Montserrat';
+ color: #dab199;
+ text-align: center;
+ font-size: 2em;
+ text-transform: uppercase;
+ line-height: 2em;
+ @include break-small {
+  line-height: 1em;}
+}
+
+.flex-table-header {
+  color: #E08E79;
+}
+
+
 /**
  * Third section of the main page, containing the link to the Github page.
  */

src/Handler/Home.php

@@ -2,6 +2,7 @@
 
 namespace Eater\Glim\Handler;
 
+use Eater\Glim\Model\ServerQuery;
 use Eater\Glim\Service\GitHub;
 
 class Home extends Session
@@ -28,7 +29,8 @@ class Home extends Session
         return $this->render("home.html.twig", [
             'author' => $author,
             'contributors' => $github->getContributors(),
-            'githubRepo' => $repo
+            'githubRepo' => $repo,
+            'serverCount' => ServerQuery::create()->findByStatus('signed')->count()
         ]);
     }
 }

views/home.html.twig

@@ -15,8 +15,7 @@
     <a href="#info-page"><i class="fa fa-angle-double-down fa-5x" aria-hidden="true"></i></a>
   </div>
 
-<div class="info-page">
+<div class="info-page" name="info-page">
-<a name="info-page"></a>
 
 <div class="info-page-item">
 <center><span class="flaticon-user-3"></span></center>
@@ -27,16 +26,59 @@
 <div class="info-page-item">
 <center><span class="flaticon-like-1"></span></center>
 <h1>Open Source</h1>
-<p>We believe in the power of open source. Zer.ooo offers OpenVPN and is available for free on GitHub under an MIT license. </p>
+<p>We believe in the power of open source. Zer.ooo offers OpenVPN and is available for free on GitHub under an AGPL license. </p>
 </div>
 
 <div class="info-page-item">
 <center><span class="flaticon-key"></span></center>
 <h1>Secure</h1>
 <p>We are located outside the Five Eyes countries. We do not log traffic or store any traffic details.</p>
-
 </div>
 </div>
+
+<div class="technical-page">
+  <h1>The technical details</h1>
+    <div class="flex-table">
+      <div class="flex-table-row">
+        <div class="flex-table-header">Logging</div>
+        <div class="flex-table-value">None</div>
+      </div>
+      <div class="flex-table-row">
+        <div class="flex-table-header">Five Eyes?</div>
+        <div class="flex-table-value">
+          <div class="tooltip">Nine Eyes
+          <span class="tooltiptext">Only our team has access to the datacenter racks where the hypervisor is stored, so this should not be a concern.</span>
+          </div>
+        </div>
+      </div>
+      <div class="flex-table-row">
+        <div class="flex-table-header">Amount of servers</div>
+        <div class="flex-table-value">{{ serverCount }}</div>
+      </div>
+      <div class="flex-table-row">
+        <div class="flex-table-header">VPN Type</div>
+        <div class="flex-table-value">OpenVPN exclusive</div>
+      </div>
+      <div class="flex-table-row">
+        <div class="flex-table-header">IPv6</div>
+        <div class="flex-table-value">Coming soon</div>
+      </div>
+      <div class="flex-table-row">
+        <div class="flex-table-header">Multihop</div>
+        <div class="flex-table-value">Coming soon</div>
+      </div>
+      <div class="flex-table-row">
+        <div class="flex-table-header">P2P</div>
+        <div class="flex-table-value">Allowed</div>
+        </div>
+      <div class="flex-table-row">
+        <div class="flex-table-header">OpenVPN on port 443</div>
+        <div class="flex-table-value">Coming soon</div>
+      </div>
+    </div>
+</div>
+
+
 <div class="footer-page">
   <h1>a {{ author }} production</h1>
 <a href="https://github.com/{{ githubRepo }}"><i class="fa fa-github fa-4x" aria-hidden="true"></i></a>