Merge pull request #29 from zerooo-vpn/FixTechnicalDetailsPage

Fix technical details page

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.
  */
@@ -195,7 +221,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';
@@ -222,6 +249,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.
  */
@@ -254,4 +300,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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",
-"sources": ["main.scss","modules/_modules.scss","partials/_base.scss","partials/_navigation.sass","partials/_forms.sass","partials/_fonts.scss","partials/_typography.scss"],
+"mappings": "AAAA;gFACgF;AAEhF;;;;GAIG;ACPH;;GAEG;AAcH;;GAEG;AClBH;;GAEG;AFmBK,kCAAuB;AACvB,iCAAsB;AACtB,yCAA8B;AEnBtC,IAAK;EACH,gBAAgB,EAAE,OAAO;;AAG3B,cAAe;EACb,OAAO,EAAE,YAAY;EACrB,OAAO,EAAE,IAAI;EACb,sBAAsB,EAAE,MAAM;EAC9B,cAAc,EAAE,MAAM;;AAGxB,6DAAU;EACR,OAAO,EAAE,IAAI;EACb,OAAO,EAAE,YAAY;EACrB,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;;AAGrB;;GAEG;AAEH,WAAY;EAEV,UAAU,EAAE,iCAAiC;EAC7C,UAAU,EAAE,KAAK;EACjB,cAAc,EAAE,MAAM;EACtB,sBAAsB,EAAE,MAAM;;AAGhC;;GAEG;AAEH,UAAW;EAET,UAAU,EAAE,iCAAiC;EAC7C,cAAc,EAAE,GAAG;EACnB,sBAAsB,EAAE,GAAG;EAC3B,UAAU,EAAE,IAAI;EDpBhB,0BAAoC;ICetC,UAAW;MAOR,cAAc,EAAE,MAAM;MACtB,sBAAsB,EAAE,MAAM;;AAIjC,eAAgB;EACd,MAAM,EAAE,eAAe;;AAGzB;;GAEG;AAEH,eAAgB;EACd,UAAU,EAAE,OAAO;EACnB,UAAU,EAAE,IAAI;;AAGlB,WAAY;EACV,OAAO,EAAE,IAAI;EACb,MAAM,EAAE,SAAS;EACjB,SAAS,EAAE,KAAK;EAChB,SAAS,EAAE,IAAI;EACf,OAAO,EAAE,MAAM;ED7Cf,0BAAoC;ICwCtC,WAAY;MAOR,SAAS,EAAE,KAAK;MAChB,cAAc,EAAE,MAAM;;AAI1B,qCAAsC;EACpC,KAAK,EAAE,KAAK;EACZ,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,UAAU;;AAIxB,eAAgB;EACd,SAAS,EAAE,KAAK;;AAGlB;;GAEG;AAEF,YAAa;EAEZ,IAAI,EAAE,CAAC;EACP,gBAAgB,EAAE,OAAO;EACzB,cAAc,EAAE,MAAM;EACtB,sBAAsB,EAAE,MAAM;EAC9B,UAAU,EAAE,IAAI;EDzEhB,0BAAoC;ICmErC,YAAa;MAQX,MAAM,EAAE,IAAI;;AAIf;;GAEG;AAEH,WAAY;EAEV,UAAU,EAAE,iCAAiC;EAC7C,cAAc,EAAE,MAAM;EACtB,sBAAsB,EAAE,MAAM;;AAGhC,gBAAiB;EACf,gBAAgB,EAAE,IAAI;EACtB,UAAU,EAAE,UAAU;EACtB,aAAa,EAAE,GAAG;EAClB,UAAU,EAAE,CAAC;EACb,aAAa,EAAE,iBAAiB;EAChC,YAAY,EAAE,iBAAiB;EAC/B,WAAW,EAAE,CAAC;EACd,OAAO,EAAE,IAAI;;ACzHf,SAAS;EACP,eAAe,EAAE,IAAI;EACrB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,MAAM;;AAElB,YAAY;EACV,KAAK,EAAE,IAAI;;AAEb,cAAc;EACZ,OAAO,EAAE,YAAY;EACrB,OAAO,EAAE,SAAS;EAClB,eAAe,EAAE,IAAI;EACrB,SAAS,EAAE,IAAI;EACf,gBAAgB,EAAE,IAAI;EACtB,MAAM,EAAE,eAAe;EACvB,aAAa,EAAE,GAAG;EAClB,KAAK,EAAE,OAAO;;AAEhB,oBAAoB;EAClB,gBAAgB,EAAE,OAAO;EACzB,eAAe,EAAE,IAAI;;AAEvB,iBAAiB;EACf,OAAO,EAAE,IAAI;;ACxBf,KAAK;EACH,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,UAAU;EACtB,MAAM,EAAE,iBAAiB;EACzB,aAAa,EAAE,GAAG;EAClB,SAAS,EAAE,KAAK;EAChB,WAAW,EAAE,YAAY;;AAE3B,WAAW;EACT,MAAM,EAAE,cAAc;;AAExB,MAAM;EACJ,gBAAgB,EAAE,OAAO;EACzB,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,KAAK;EACZ,OAAO,EAAE,SAAS;EAClB,eAAe,EAAE,IAAI;EACrB,MAAM,EAAE,OAAO;EACf,SAAS,EAAE,KAAK;EAChB,WAAW,EAAE,YAAY;;ACnB3B,UAUC;EATC,WAAW,EAAE,aAAa;EAC1B,GAAG,EAAE,qCAAqC;EAC1C,GAAG,EAAE,sSAImD;EACxD,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM;AAGpB,UAUC;EATC,WAAW,EAAE,OAAO;EACpB,GAAG,EAAE,+BAA+B;EACpC,GAAG,EAAE,kQAI6C;EAClD,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM;AAGpB,UAUC;EATC,WAAW,EAAE,OAAO;EACpB,GAAG,EAAE,+BAA+B;EACpC,GAAG,EAAE,kPAI6C;EAClD,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM;AAGpB,UAUC;EATC,WAAW,EAAE,YAAY;EACzB,GAAG,EAAE,oCAAoC;EACzC,GAAG,EAAE,2QAIkD;EACvD,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM;AC7CpB;;GAEG;AAEF,IAAK;EACJ,WAAW,EAAE,mBAAmB;EAChC,SAAS,EAAE,IAAI;;AAGjB;;GAEG;AAEF,gBAAiB;EAChB,WAAW,EAAE,mBAAmB;EAChC,SAAS,EAAE,IAAI;EACf,cAAc,EAAE,SAAS;EACzB,KAAK,EAAE,OAAO;ELLd,WAAW,EAFC,mrBAAmD;EAa/D,0BAAoC;IKVrC,gBAAiB;MAOf,SAAS,EAAE,KAAK;MAChB,OAAO,EAAE,IAAI;MLTd,WAAW,EAFC,6cAAmD;;AKgBjE,wBAAyB;EACvB,WAAW,EAAE,oBAAoB;EACjC,SAAS,EAAE,GAAG;EACd,cAAc,EAAE,SAAS;EACzB,KAAK,EAAE,IAAI;ELPX,0BAAoC;IKGtC,wBAAyB;MAMtB,SAAS,EAAE,GAAG;MACd,WAAW,EAAE,IAAI;;AAIpB,qBAAsB;EACpB,KAAK,EAAE,OAAO;;AAGhB;;;GAGG;AAEF,aAAc;EACb,WAAW,EAAE,OAAO;EACpB,KAAK,EAAE,OAAO;EACd,UAAU,EAAE,MAAM;EAClB,SAAS,EAAE,GAAG;EACd,cAAc,EAAE,SAAS;EACzB,WAAW,EAAE,GAAG;EL7BhB,0BAAoC;IKuBrC,aAAc;MAQZ,WAAW,EAAE,GAAG;;AAGnB,eAAgB;EACd,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,KAAK;EAClB,KAAK,EAAE,OAAO;;AAGhB;uDACwD;EACtD,SAAS,EAAE,IAAI;EACf,KAAK,EAAE,IAAI;EL3CX,0BAAoC;IKwCtC;2DACwD;MAIpD,SAAS,EAAE,GAAG;;AAIlB,eAAgB;EACd,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,KAAK;EAChB,WAAW,EAAE,GAAG;;AAGlB,kBAAmB;EAClB,WAAW,EAAE,YAAY;EACzB,KAAK,EAAE,OAAO;EACd,UAAU,EAAE,MAAM;EAClB,SAAS,EAAE,GAAG;EACd,cAAc,EAAE,SAAS;EACzB,WAAW,EAAE,GAAG;EL7Df,0BAAoC;IKuDtC,kBAAmB;MAQjB,WAAW,EAAE,GAAG;;AAGlB,kBAAmB;EACjB,KAAK,EAAE,OAAO;;AAIhB;;GAEG;AAEF,cAAe;EACd,KAAK,EAAE,KAAK;;AAGd,oDAAmB;EACjB,WAAW,EAAE,wBAAwB;EACrC,KAAK,EAAE,OAAO;EACd,WAAW,EAAE,OAAO;EACpB,cAAc,EAAE,SAAS;;AAG3B,eAAgB;EAEd,SAAS,EAAE,KAAK;;AAGlB,eAAgB;EAEd,SAAS,EAAE,KAAK;EL7FhB,0BAAoC;IK2FtC,eAAgB;MAIZ,SAAS,EAAE,GAAG;MACd,MAAM,EAAE,IAAI;;AAIhB;;GAEG;AAEF,gBAAiB;EAChB,WAAW,EAAE,mBAAmB;EAChC,SAAS,EAAE,GAAG;EACd,cAAc,EAAE,SAAS;EACzB,KAAK,EAAE,OAAO;ELvHd,WAAW,EAFC,uOAAmD;;AMVjE,QAAS;EACL,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,YAAY;EACrB,aAAa,EAAE,iBAAiB;;AAGpC,qBAAsB;EAClB,UAAU,EAAE,MAAM;EAClB,KAAK,EAAE,KAAK;EACZ,gBAAgB,EAAE,KAAK;EACvB,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,IAAI;EAChB,aAAa,EAAE,GAAG;EAClB,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,IAAI;EACZ,IAAI,EAAE,GAAG;EACT,WAAW,EAAE,KAAK;EAClB,SAAS,EAAE,KAAK;EAChB,WAAW,EAAE,KAAK;;AAGtB,4BAA6B;EACzB,OAAO,EAAE,EAAE;EACX,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,IAAI;EACT,IAAI,EAAE,GAAG;EACT,WAAW,EAAE,IAAI;EACjB,YAAY,EAAE,GAAG;EACjB,YAAY,EAAE,KAAK;EACnB,YAAY,EAAE,yCAAyC;;AAG3D,2BAA4B;EACxB,UAAU,EAAE,OAAO",
+"sources": ["main.scss","modules/_modules.scss","partials/_base.scss","partials/_navigation.sass","partials/_forms.sass","partials/_fonts.scss","partials/_typography.scss","partials/_tooltips.scss"],
 "names": [],
 "file": "main.css"
 }

public/css/main.scss

@@ -16,6 +16,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">
-<a name="info-page"></a>
+<div class="info-page" name="info-page">
 
 <div class="info-page-item">
 <center><span class="flaticon-user-3"></span></center>
@@ -34,9 +33,52 @@
 <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>