lychee help screen

cddd0541 · Bob Mottram · 2595c4b5 · cddd0541
Commit cddd0541 authored 6 years ago by Bob Mottram
--- a/webadmin/EN/help_lychee.html
+++ b/webadmin/EN/help_lychee.html
+<!DOCTYPE html>
+<html lang="en">
+  <meta charset="utf-8">
+  <style>
+    body {
+        margin: 0;
+        font-family: Arial;
+        background-color: white;
+        color: black;
+    }
+
+    * {
+        box-sizing: border-box;
+    }
+
+    a, u {
+        text-decoration: none;
+        color: #72a7cf;
+        font-weight: bold;
+    }
+
+    a:visited{
+        color: #72a7cf;
+        font-weight: bold;
+    }
+
+    #headerpic {
+        width: 60%;
+        height: auto;
+        margin-right : auto;
+        margin-left : auto;
+        min-width : 220px;
+    }
+
+    .header {
+        text-align: center;
+        padding: 32px;
+    }
+
+    .headertext {
+        text-align: center;
+        font-size: 120%;
+        font-weight: bold;
+    }
+
+    .subheadertext {
+        margin-left : 10%;
+        text-align: left;
+        font-size: 110%;
+        font-weight: bold;
+    }
+
+    .subheaderports {
+        margin-left : 10%;
+        text-align: left;
+        font-size: 110%;
+        font-weight: bold;
+    }
+
+    .helptext {
+        width: 80%;
+        text-align: left;
+        font-size: 100%;
+        margin-left : 10%;
+    }
+
+    .codetext {
+        font-family: Courier;
+        width: 80%;
+        text-align: left;
+        font-size: 100%;
+        margin-left : 10%;
+    }
+
+    .portstext {
+        width: 80%;
+        text-align: left;
+        font-size: 100%;
+        margin-left : 10%;
+    }
+
+    .row {
+        display: -ms-flexbox;
+        display: flex;
+        -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+        padding: 0 4px;
+    }
+
+    .column {
+        -ms-flex: 25%;
+        flex: 15%;
+        max-width: 25%;
+        padding: 0 4px;
+    }
+
+    .column img {
+        margin-top: 8px;
+        vertical-align: middle;
+    }
+
+    @media screen and (max-width: 800px) {
+        .column {
+            -ms-flex: 50%;
+            flex: 50%;
+            max-width: 50%;
+        }
+    }
+
+    @media screen and (max-width: 200px) {
+        .column {
+            -ms-flex: 100%;
+            flex: 100%;
+            max-width: 100%;
+        }
+    }
+  </style>
+  <body>
+
+    <div class="header">
+      <a href="app_lychee.html"><img id="headerpic" class="img-responsive" src="images/logo.png" alt="Freedombone"></a>
+    </div>
+
+    <p class="headertext" translate="no">Lychee</p>
+
+    <p class="helptext" translate="yes">This is a simple and lightweight photo album for the web. Whether you're an amateur or professional photographer, or want to publish random holiday pics or cat pictures. Lychee just does what it says it does without any fuss.</p>
+
+    <p class="subheaderports" translate="yes">Ports</p>
+
+    <p class="portstext" translate="yes">Forward port 80 and 443 from your internet router</p>
+
+  </body>
+</html>