new termscp site

2025-12-06 09:05:36 -08:00 · 2023-07-05 12:33:17 +02:00
parent 00a6c53178
commit b7d4c68ebe
25 changed files with 996 additions and 1224 deletions
--- a/site/assets/images/og_preview.jpg
+++ b/site/assets/images/og_preview.jpg
--- a/site/changelog.html
+++ b/site/changelog.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en_US">
+
+<head>
+  <title>
+    termscp is a terminal file transfer and explorer for SCP/SFTP/FTP/S3/SMB | termscp
+  </title>
+  <meta property="og:description"
+    content="termscp is a feature rich terminal file transfer and explorer, with support for SCP/SFTP/FTP/S3. It is Linux, MacOS, FreeBSD, NetBSD and Windows compatible" />
+  <meta name="description"
+    content="termscp is a feature rich terminal file transfer and explorer, with support for SCP/SFTP/FTP/S3. It is Linux, MacOS, FreeBSD, NetBSD and Windows compatible" />
+  <meta property="og:title" content="termscp is a terminal file transfer and explorer for SCP/SFTP/FTP/S3 | termscp" />
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="robots" content="index, follow" />
+  <meta property="og:image" content="https://termscp.veeso.dev/assets/images/og_preview.jpg" />
+  <meta property="og:image:type" content="image/jpg" />
+  <meta property="og:image:width" content="1280" />
+  <meta property="og:image:height" content="640" />
+  <meta property="og:type" content="website" />
+  <meta property="og:site_name" content="termscp" />
+  <meta property="og:locale" content="en_US" />
+  <meta property="og:url" content="https://termscp.veeso.dev" />
+  <!-- Icons -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.11.0/devicon.min.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
+    integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
+    crossorigin="anonymous" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/fontawesome.min.css"
+    integrity="sha512-OdEXQYCOldjqUEsuMKsZRj93Ht23QRlhIb8E/X0sbwZhme8eUw6g8q7AdxGJKakcBbv7+/PX0Gc2btf7Ru8cZA=="
+    crossorigin="anonymous" />
+  <!-- tailwind -->
+  <link href="output.css" rel="stylesheet" />
+  <!-- Favicons -->
+  <link rel="icon" type="image/png" sizes="96x96" href="assets/images/favicon-96x96.png" />
+  <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon-32x32.png" />
+  <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon-16x16.png" />
+</head>
+
+<body>
+  <div id="layout">
+    <!-- Menu -->
+    <header id="menu"></header>
+    <main>
+      <div id="main" class="w-8/12 sm:w-full mx-auto pt-4 pb-8"></div>
+    </main>
+    <footer id="footer"></footer>
+  </div>
+  <!-- Scripts -->
+  <!-- jQuery -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+  <!-- Showdown JS-->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"
+    integrity="sha512-L03kznCrNOfVxOUovR6ESfCz9Gfny7gihUX/huVbQB9zjODtYpxaVtIaAkpetoiyV2eqWbvxMH9fiSv5enX7bw=="
+    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <!-- Local -->
+  <script src="js/lang.min.js"></script>
+  <script src="js/core.js"></script>
+  <script src="js/events.js"></script>
+  <script src="js/resolvers.js"></script>
+  <!-- ko-fi -->
+  <script src="https://storage.ko-fi.com/cdn/scripts/overlay-widget.js"></script>
+  <script>
+    kofiWidgetOverlay.draw("veeso", {
+      type: "floating-chat",
+      "floating-chat.donateButton.text": "Support me",
+      "floating-chat.donateButton.background-color": "#31363b",
+      "floating-chat.donateButton.text-color": "#fff",
+    });
+  </script>
+</body>
+
+</html>
--- a/site/css/get-started.css
+++ b/site/css/get-started.css
@@ -1,45 +0,0 @@
-.start h1 {
-  font-size: 2.5em;
-}
-
-.start h2 {
-  font-size: 2em;
-}
-
-.start h3 {
-  font-size: 1.6em;
-}
-
-.start h2 i,
-h3 i {
-  color: #606060;
-}
-
-.start .sub-system {
-  padding: 0px 2em;
-}
-
-.start .sub-system .installation {
-  padding: 0px 2em;
-  width: 80%;
-}
-
-.start .installation {
-  padding: 2px 4em;
-  width: 80%;
-}
-
-.start .installation p {
-  font-size: 1.3em;
-  font-weight: 300;
-}
-
-.start .installation li {
-  font-size: 1.1em;
-  font-weight: 300;
-}
-
-.start .installation a {
-  text-decoration: none;
-  color: dodgerblue;
-}
--- a/site/css/intro.css
+++ b/site/css/intro.css
@@ -1,121 +0,0 @@
-/** Intro */
-
-.intro {
-  text-align: center;
-}
-
-.intro .title {
-  font-size: 5em;
-}
-
-.intro .logo {
-  border-radius: 25%;
-  height: auto;
-  width: 256px;
-}
-
-.intro .caption {
-  font-size: 2em;
-  font-weight: 300;
-  width: 100%;
-}
-
-.intro .get-started {
-  background-color: #404040;
-  border-radius: 0.5em;
-  color: snow;
-  font-size: 1.5em;
-}
-
-.intro .get-started a {
-  color: snow;
-  text-decoration: none;
-}
-
-.intro .features {
-  align-content: stretch;
-  align-items: flex-start;
-  border-top: 1px solid #eee;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  margin-top: 2.5rem;
-  padding: 1.2rem 0;
-}
-
-.intro .feature {
-  flex: auto;
-}
-
-@media (min-width: 600px) {
-  .intro .feature {
-    flex-grow: 1;
-    flex-basis: 30%;
-    max-width: 30%;
-  }
-}
-
-.intro .feature h3 {
-  color: #101010;
-  font-size: 1.5em;
-  font-weight: 400;
-}
-
-.intro .feature p {
-  color: #303030;
-}
-
-.intro .preview {
-  border-radius: 5px;
-  padding: 5% 10%;
-  width: 80%;
-}
-
-.intro .preview video {
-  height: auto;
-  width: 100%;
-}
-
-.intro .discover {
-  align-content: stretch;
-  align-items: flex-start;
-  border-top: 1px solid #eee;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  margin-left: 0;
-  margin-top: 2.5rem;
-  padding: 1.2rem 0;
-  width: 100%;
-}
-
-@media (min-width: 600px) {
-  .intro .discover {
-    margin-left: 20%;
-    width: 60%;
-  }
-}
-
-.intro .discover .hook {
-  flex-grow: 1;
-  flex-basis: 30%;
-  font-size: 1.5em;
-  max-width: 30%;
-}
-
-.intro .discover .hook a {
-  text-decoration: none;
-  color: #404040;
-}
-
-.intro .discover .hook a i {
-  font-size: 0.8em;
-}
-
-.intro .discover .hook a {
-  transition: all 0.4s ease-in;
-}
-
-.intro .discover .hook a:hover {
-  color: dodgerblue;
-}
--- a/site/css/main.css
+++ b/site/css/main.css
@@ -1,197 +0,0 @@
-html {
-  scroll-behavior: smooth;
-}
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-}
-
-pre {
-  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
-  padding: 16px;
-  overflow: auto;
-  font-size: 85%;
-  line-height: 1.45;
-  color: #d0d0d0;
-  background-color: #222629;
-  border-radius: 3px;
-  word-wrap: normal;
-  border-radius: 0.5em;
-}
-
-pre .function {
-  color: #f08d49;
-}
-
-pre .string {
-  color: #7ec699;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5 {
-  font-weight: 300;
-}
-
-header {
-  margin: 0 2em 0 0;
-}
-
-.img-circle {
-  border-radius: 50%;
-}
-
-.pull-left {
-  float: left;
-}
-
-.pull-right {
-  float: right;
-}
-
-section.page {
-  width: 100%;
-  height: auto;
-  border-top: 1px solid #aaa;
-  display: inline-block;
-  padding-bottom: 2em;
-}
-
-section.page hr {
-  margin: 1em 0 1em 0;
-}
-
-.container {
-  width: 90%;
-  height: auto;
-  margin-left: auto;
-  margin-right: auto;
-  overflow: auto;
-}
-
-.container header a {
-  color: inherit;
-  text-decoration: none;
-  border-bottom: dotted 1px #80808080;
-  cursor: text;
-}
-
-.container header a i {
-  color: #606060;
-}
-
-/** Footer */
-
-footer {
-  text-align: center;
-  background-color: #eee;
-  padding: 1em;
-}
-
-footer .contacts {
-  list-style: none;
-  cursor: default;
-  margin-block-start: 0;
-  padding-inline-start: 0;
-}
-
-footer .contacts li {
-  display: inline-block;
-}
-
-footer .contacts a {
-  border: 0;
-  font-size: 3em;
-  color: #606060;
-  display: inline-block;
-  width: 2em;
-  height: 2em;
-  line-height: 2em;
-  text-align: center;
-  text-decoration: none;
-}
-
-footer .contacts a i {
-  transition: all 0.4s ease-in;
-}
-
-footer .contacts li a:hover i {
-  color: #202020 !important;
-}
-
-.footer--vat {
-  color: #404040;
-  font-weight: 300;
-  text-align: center;
-}
-
-.footer--address {
-  color: #505050;
-  font-size: 0.8em;
-  font-weight: 300;
-  text-align: center;
-}
-
-.footer--copyright {
-  color: #606060;
-  font-size: 0.7em;
-  font-weight: 300;
-  text-align: center;
-}
-
-.footer--link {
-  color: #606060;
-}
-
-.alert {
-  border: 1px solid transparent;
-  border-radius: 0.25rem;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  padding: 0.5rem;
-  position: relative;
-}
-
-.alert-center {
-  margin-left: auto;
-  margin-right: auto;
-  width: 50%;
-}
-
-.alert-warning {
-  background-color: #fff3cd;
-  border-color: #ffeeba;
-  color: #856404;
-}
-
-.alert-danger {
-  background-color: #f8d7da;
-  border-color: #f5c6cb;
-  color: #721c24;
-}
-
-.alert-success {
-  background-color: #d4edda;
-  border-color: #c3e6cb;
-  color: #155724;
-}
-
-.alert-primary {
-  background-color: #cce5ff;
-  border-color: #b8daff;
-  color: #004085;
-}
-
-/* ko-fi */
-.floatingchat-container-wrap {
-  left: auto !important;
-  right: 16px !important;
-}
-
-.floating-chat-kofi-popup-iframe {
-  left: auto !important;
-  right: 16px !important;
-}
--- a/site/css/markdown.css
+++ b/site/css/markdown.css
@@ -12,7 +12,6 @@
 }

 .markdown p {
-  color: #202020;
  font-size: 1.1em;
 }

@@ -46,16 +45,11 @@

 .markdown blockquote {
  border-left: 0.25em solid #ccc;
-  color: #606060;
  font-size: 90%;
  padding: 0.1em;
  padding-left: 0.5em;
 }

-.markdown blockquote p {
-  color: #606060;
-}
-
 .markdown pre code {
  background-color: inherit;
  font-size: 100%;
@@ -68,6 +62,12 @@
  padding: 0.2em 0.4em;
 }

+@media (prefers-color-scheme: dark) {
+  .markdown code {
+    background-color: #404040;
+  }
+}
+
 .markdown table {
  border-collapse: collapse;
  border-spacing: 0;
@@ -82,14 +82,6 @@
  border-top: 1px solid #c6cbd1;
 }

-.markdown table tr {
-  background-color: white;
-}
-
-.markdown table tr:nth-child(even) {
-  background-color: #dfe2e5;
-}
-
 .markdown table td,
 .markdown table th {
  border: 1px solid #c6cbd1;
--- a/site/css/menu.css
+++ b/site/css/menu.css
@@ -1,268 +0,0 @@
-/** Menu */
-
-#menu {
-  margin-left: -20vw; /* "#menu" width */
-  width: 20vw;
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  z-index: 1000; /* so the menu or its navicon stays above all content */
-  background: #f0f0f0;
-  overflow-y: auto;
-}
-/*
-  All anchors inside the menu should be styled like this.
-  */
-#menu a {
-  color: #606060;
-  border: none;
-  padding: 0.6em 0 0.6em 0.6em;
-  font-size: 1.4em;
-}
-
-/*
-  Remove all background/borders, since we are applying them to #menu.
-  */
-#menu .pure-menu,
-#menu .pure-menu ul {
-  border: none;
-  background: transparent;
-}
-
-/*
-  Add that light border to separate items into groups.
-  */
-#menu .pure-menu ul,
-#menu .pure-menu .menu-item-divided {
-  border-top: 1px solid #808080;
-}
-
-#menu .pure-menu i {
-  margin-right: 1ch;
-}
-
-#menu .pure-menu-item i {
-  font-size: 0.6em;
-}
-
-/*
-      Change color of the anchor links on hover/focus.
-      */
-#menu .pure-menu li a:hover,
-#menu .pure-menu li a:focus {
-  background: #ccc;
-}
-
-/*
-  This styles the selected menu item `<li>`.
-  */
-#menu .pure-menu-selected {
-  background: #ddd;
-}
-
-#menu .pure-menu-selected i {
-  color: dodgerblue;
-}
-
-/*
-      This styles a link within a selected menu item `<li>`.
-      */
-#menu .pure-menu-selected a {
-  color: dodgerblue;
-  font-weight: 500;
-}
-
-/*
-  This styles the menu heading.
-  */
-#menu .pure-menu-heading {
-  color: #202020;
-  margin: 0;
-  margin: 10% 5% 10% 5%;
-  position: relative;
-  font-weight: 700;
-}
-
-#menu .pure-menu-heading .avatar {
-  width: 30%;
-  border-radius: 0.5em;
-}
-
-#menu .pure-menu-heading h1 {
-  font-size: 1.4em;
-  text-transform: none;
-}
-
-#menu .pure-menu-heading p {
-  color: #404040;
-  font-size: 1.1em;
-  font-weight: 300;
-  text-transform: none;
-  white-space: normal;
-}
-
-#menu .pure-menu-bottom {
-  bottom: 0;
-  display: none;
-  left: 0;
-  position: absolute;
-  text-align: center;
-  width: 100%;
-}
-
-@media (min-width: 640px) {
-  #menu .pure-menu-bottom {
-    display: block;
-  }
-}
-
-#menu .pure-menu-bottom a {
-  font-size: 1.5em;
-  color: #606060;
-  display: inline-block;
-  text-align: center;
-  border: 0;
-  text-decoration: none;
-  text-align: center;
-  white-space: normal;
-}
-
-#menu .pure-menu-bottom a:hover {
-  color: #404040;
-}
-
-#menu .pure-menu-bottom ul {
-  list-style: none;
-  cursor: default;
-  margin-block-start: 0;
-  padding-inline-start: 0;
-}
-
-#menu .pure-menu-bottom ul li {
-  display: inline-block;
-  text-align: center;
-}
-
-/* -- Dynamic Button For Responsive Menu -------------------------------------*/
-
-/*
-The button to open/close the Menu is custom-made and not part of Pure. Here's
-how it works:
-*/
-
-/*
-`.menu-link` represents the responsive menu toggle that shows/hides on
-small screens.
-*/
-.menu-link {
-  position: fixed;
-  display: block; /* show this only on small screens */
-  top: 0;
-  left: 0; /* "#menu width" */
-  background: #eee;
-  background: rgba(0, 0, 0, 0.7);
-  font-size: 10px; /* change this value to increase/decrease button size */
-  z-index: 10;
-  width: 2em;
-  height: auto;
-  padding: 2.1em 1.6em;
-}
-
-.menu-link:hover,
-.menu-link:focus {
-  background: #202020;
-}
-
-.menu-link span {
-  position: relative;
-  display: block;
-}
-
-.menu-link span,
-.menu-link span:before,
-.menu-link span:after {
-  background-color: #fff;
-  pointer-events: none;
-  width: 100%;
-  height: 0.2em;
-}
-
-.menu-link span:before,
-.menu-link span:after {
-  position: absolute;
-  margin-top: -0.6em;
-  content: " ";
-}
-
-.menu-link span:after {
-  margin-top: 0.6em;
-}
-
-/* -- Responsive Styles (Media Queries) ------------------------------------- */
-
-#layout,
-#menu,
-.menu-link {
-  -webkit-transition: all 0.2s ease-out;
-  -moz-transition: all 0.2s ease-out;
-  -ms-transition: all 0.2s ease-out;
-  -o-transition: all 0.2s ease-out;
-  transition: all 0.2s ease-out;
-}
-
-#layout {
-  position: relative;
-  left: 0;
-  padding-left: 0;
-}
-
-#layout.active #menu {
-  left: 20vw;
-  width: 240px;
-}
-
-#layout.active .menu-link {
-  left: 240px;
-}
-
-/*
-Hides the menu at `640px`, but modify this based on your app's needs.
-*/
-@media (min-width: 640px) {
-  .header {
-    padding-left: 2em;
-    padding-right: 2em;
-  }
-
-  #layout {
-    padding-left: 20vw; /* left col width "#menu" */
-    left: 0;
-  }
-  #menu {
-    left: 20vw;
-  }
-
-  .menu-link {
-    position: fixed;
-    left: 20vw;
-    display: none;
-  }
-
-  #layout.active .menu-link {
-    left: 20vw;
-  }
-}
-
-@media (max-width: 640px) {
-  /* Only apply this when the window is small. Otherwise, the following
-  case results in extra padding on the left:
-      * Make the window small.
-      * Tap the menu to trigger the active state.
-      * Make the window large again.
-  */
-  #main.active {
-    position: relative;
-    left: 20vw;
-  }
-}
--- a/site/css/updates.css
+++ b/site/css/updates.css
@@ -1,38 +0,0 @@
-.updates h1 {
-  font-size: 2.5em;
-}
-
-.updates h2 {
-  font-size: 2em;
-}
-
-.updates h3 {
-  font-size: 1.6em;
-}
-
-.updates h2 i,
-h3 i {
-  color: #606060;
-}
-
-.updates .desc {
-  font-size: 1.1em;
-  text-align: justify;
-}
-
-.updates ol {
-  font-size: 1.2em;
-}
-
-.wall-of-text {
-  color: #444;
-  line-height: 1.8em;
-  margin: 0 auto;
-  text-align: justify;
-  width: 90%;
-}
-
-.tl-dr {
-  font-size: 1.2em;
-  font-weight: bold;
-}
--- a/site/get-started.html
+++ b/site/get-started.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en_US">
+
+<head>
+  <title>
+    get started with termscp | termscp
+  </title>
+  <meta property="og:description"
+    content="Install termscp within a couple of minutes with the shell script" />
+  <meta name="description"
+    content="Install termscp within a couple of minutes with the shell script" />
+  <meta property="og:title" content="get started with termscp | termscp" />
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="robots" content="index, follow" />
+  <meta property="og:image" content="https://termscp.veeso.dev/assets/images/og_preview.jpg" />
+  <meta property="og:image:type" content="image/jpg" />
+  <meta property="og:image:width" content="1280" />
+  <meta property="og:image:height" content="640" />
+  <meta property="og:type" content="website" />
+  <meta property="og:site_name" content="termscp" />
+  <meta property="og:locale" content="en_US" />
+  <meta property="og:url" content="https://termscp.veeso.dev" />
+  <!-- Icons -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.11.0/devicon.min.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
+    integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
+    crossorigin="anonymous" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/fontawesome.min.css"
+    integrity="sha512-OdEXQYCOldjqUEsuMKsZRj93Ht23QRlhIb8E/X0sbwZhme8eUw6g8q7AdxGJKakcBbv7+/PX0Gc2btf7Ru8cZA=="
+    crossorigin="anonymous" />
+  <!-- tailwind -->
+  <link href="output.css" rel="stylesheet" />
+  <!-- Favicons -->
+  <link rel="icon" type="image/png" sizes="96x96" href="assets/images/favicon-96x96.png" />
+  <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon-32x32.png" />
+  <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon-16x16.png" />
+</head>
+
+<body>
+  <div id="layout">
+    
+    <!-- Menu -->
+    <header id="menu"></header>
+    <main>
+      <div id="main" class="w-8/12 sm:w-full mx-auto pt-4 pb-8"></div>
+    </main>
+    <footer id="footer"></footer>
+  </div>
+  <!-- Scripts -->
+  <!-- jQuery -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+  <!-- Showdown JS-->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"
+    integrity="sha512-L03kznCrNOfVxOUovR6ESfCz9Gfny7gihUX/huVbQB9zjODtYpxaVtIaAkpetoiyV2eqWbvxMH9fiSv5enX7bw=="
+    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <!-- Local -->
+  <script src="js/lang.min.js"></script>
+  <script src="js/core.js"></script>
+  <script src="js/events.js"></script>
+  <script src="js/resolvers.js"></script>
+  <!-- ko-fi -->
+  <script src="https://storage.ko-fi.com/cdn/scripts/overlay-widget.js"></script>
+  <script>
+    kofiWidgetOverlay.draw("veeso", {
+      type: "floating-chat",
+      "floating-chat.donateButton.text": "Support me",
+      "floating-chat.donateButton.background-color": "#31363b",
+      "floating-chat.donateButton.text-color": "#fff",
+    });
+  </script>
+</body>
+
+</html>
--- a/site/html/components/footer.html
+++ b/site/html/components/footer.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<div class="flex flex-col bg-brand text-gray-200 justify-around items-center gap-12 p-8 sm:pb-24">
+  <div class="flex flex-row justify-around items-center gap-16 w-3/6 sm:w-full">
+    <div>
+      <a href="https://github.com/veeso/termscp" class="text-3xl sm:text-xl no-underline" target="_blank"><i
+          class="devicon-github-original"></i></a>
+    </div>
+    <div>
+      <a href="https://crates.io/crates/termscp" class="text-3xl sm:text-xl no-underline" target="_blank"><i
+          class="devicon-rust-plain"></i></a>
+    </div>
+    <div>
+      <a href="https://community.chocolatey.org/packages/termscp" class="text-3xl sm:text-xl no-underline"
+        target="_blank"><i class="devicon-windows8-plain"></i></a>
+    </div>
+    <div>
+      <a href="https://ko-fi.com/veeso" target="_blank" class="text-3xl sm:text-xl no-underline"><i
+          class="fa fa-coffee"></i></a>
+    </div>
+  </div>
+  <div class="flex flex-col justify-around gap-1 items-center w-full">
+    <!-- vat number -->
+    <p class="text-sm font-thin">
+      <span>P.IVA IT03104140300 </span>
+    </p>
+    <p class="text-xs font-thin">
+      <span>Via Antonio Marangoni 33, 33100, Udine (UD)</span>
+    </p>
+    <!-- Copyright -->
+    <p class="text-xs font-thin">
+      <span>Christian Visintin © </span><span resolve-copyright></span>
+      <span>&nbsp;|&nbsp;</span>
+      <a class="text-xs font-thin" href="https://veeso.dev/en/privacy" target="_blank">Privacy policy</a>
+      <span>&nbsp;|&nbsp;</span>
+      <a class="text-xs font-thin" href="https://veeso.dev/en/cookie-policy" target="_blank">Cookie policy</a>
+    </p>
+  </div>
+</div>
--- a/site/html/components/menu.html
+++ b/site/html/components/menu.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<div
+  class="flex flex-row fixed bg-gray-100 dark:bg-brand text-brand dark:text-gray-100 border-b border-gray-400 dark:border-gray-800 items-center justify-between w-screen h-auto py-4 px-8">
+  <!-- Desktop menu-->
+  <div class="sm:hidden flex flex-row justify-start items-center gap-12 w-full">
+    <h2 class="lg:text-xl md:text-lg dark:text-gray-100">
+      <a href="/">
+        <img class="w-[32px] h-auto m-auto inline-block mr-2" alt="logo"
+          src="assets/images/termscp.webp" />&nbsp;termscp
+      </a>
+    </h2>
+    <h2 class="lg:text-xl md:text-lg dark:text-gray-100">
+      <a translate="menu.getStarted" href="/get-started.html"></a>
+    </h2>
+    <h2 class="lg:text-xl md:text-lg dark:text-gray-100">
+      <a translate="menu.updates" href="/updates.html"></a>
+    </h2>
+    <h2 class="lg:text-xl md:text-lg dark:text-gray-100">
+      <a translate="menu.manual" href="/user-manual.html"></a>
+    </h2>
+    <h2 class="lg:text-xl md:text-lg dark:text-gray-100">
+      <a translate="menu.changelog" href="/changelog.html"></a>
+    </h2>
+    <!-- End region -->
+    <div class="flex flex-row self-end justify-end items-center gap-8 flex-1">
+      <!-- Dark/light theme toggle -->
+      <button id="theme-toggle" type="button" onclick="toggleTheme()"
+        class="text-brand dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg lg:text-2xl md:text-lg p-2.5">
+        <svg id="theme-toggle-dark-icon" class="w-5 h-5 hidden" fill="currentColor" viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg">
+          <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+        </svg>
+        <svg id="theme-toggle-light-icon" class="w-5 h-5 hidden" fill="currentColor" viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+            fill-rule="evenodd" clip-rule="evenodd"></path>
+        </svg>
+      </button>
+      <!-- Socials -->
+      <div>
+        <a href="https://github.com/veeso/termscp" class="lg:text-2xl md:text-lg dark:text-gray-100" target="_blank"><i
+            class="devicon-github-original"></i></a>
+      </div>
+      <div>
+        <a href="https://crates.io/crates/termscp" class="lg:text-2xl md:text-lg dark:text-gray-100" target="_blank"><i
+            class="devicon-rust-plain"></i></a>
+      </div>
+      <div>
+        <a href="https://www.linkedin.com/in/christian-visintin/" class="lg:text-2xl md:text-lg dark:text-gray-100"
+          target="_blank"><i class="devicon-linkedin-plain"></i></a>
+      </div>
+      <div>
+        <a href="https://twitter.com/veeso_dev" target="_blank" class="lg:text-2xl md:text-lg dark:text-gray-100"><i
+            class="devicon-twitter-plain"></i></a>
+      </div>
+    </div>
+  </div>
+  <!-- Mobile topbar -->
+  <div class="sm:flex hidden flex-row justify-start items-center gap-8 w-full">
+    <h2 class="text-2xl dark:text-gray-100">
+      <a href="/">
+        <img class="w-[32px] h-auto m-auto inline-block mr-2" alt="logo"
+          src="assets/images/termscp.webp" />&nbsp;termscp
+      </a>
+    </h2>
+    <div id="menu-icon" class="justify-self-end flex-1 flex justify-end">
+      <i onclick="onToggleMenu()" class="fa fa-bars text-2xl cursor-pointer"></i>
+    </div>
+  </div>
+</div>
+<!-- Mobile menu -->
+<div id="mobile-menu"
+  class="hidden transition-all fixed top-0 left-0 h-screen bg-brand text-white w-screen flex-col justify-start items-center p-8">
+  <div class="flex flex-row justify-end items-end w-full">
+    <div id="menu-icon" class="justify-self-end flex-1 flex justify-end">
+      <i onclick="onToggleMenu()" class="fa fa-bars text-2xl cursor-pointer"></i>
+    </div>
+  </div>
+  <div class="flex flex-col justify-start items-center w-full gap-4">
+    <h2 class="text-2xl text-white">
+      <a translate="menu.intro" href="/"></a>
+    </h2>
+    <h2 class="text-2xl text-white">
+      <a translate="menu.getStarted" href="/get-started.html"></a>
+    </h2>
+    <h2 class="text-2xl text-white">
+      <a translate="menu.updates" href="/updates.html"></a>
+    </h2>
+    <h2 class="text-2xl text-white">
+      <a translate="menu.manual" href="/user-manual.html"></a>
+    </h2>
+    <h2 class="text-2xl text-white">
+      <a translate="menu.changelog" href="/changelog.html"></a>
+    </h2>
+  </div>
+</div>
--- a/site/html/get-started.html
+++ b/site/html/get-started.html
@@ -1,17 +1,15 @@
-<head>
-  <link rel="stylesheet" href="css/get-started.css" />
-</head>
+<!DOCTYPE html>

 <body>
-  <section id="start" class="container start">
-    <h1 translate="getStarted.title">Get started</h1>
-    <section>
-      <h2>
+  <section id="start" class="flex flex-col mx-auto items-center justify-center w-full px-12 gap-8 dark:text-gray-100">
+    <h1 translate="getStarted.title" class="text-3xl font-thin">Get started</h1>
+    <section class="w-full">
+      <h2 class="text-2xl font-thin">
        <i class="fa fa-rocket"></i>&nbsp;<span translate="getStarted.quickSetup">Quick setup</span>
      </h2>
      <div class="installation">
-        <div class="alert alert-primary">
-          <p>
+        <div class="p-4 my-4 text-sm text-blue-800 rounded-lg bg-blue-50">
+          <p class="text-lg">
            <i class="fas fa-info-circle"></i>
            <span translate="getStarted.suggested">We strongly suggest this method to install termscp</span>
          </p>
@@ -23,8 +21,8 @@
        <pre><span class="function">curl</span> --proto <span class="string">'=https'</span> --tlsv1.2 -sSLf <span class="string">"https://git.io/JBhDb"</span> | sh</pre>
      </div>
    </section>
-    <section>
-      <h2>
+    <section class="w-full">
+      <h2 class="text-2xl font-thin">
        <i class="devicon-windows8-plain"></i>&nbsp;<span translate="getStarted.windows.title">Windows users</span>
      </h2>
      <div class="installation">
@@ -44,13 +42,13 @@
        <pre><span class="function">choco</span> install <span class="string">termscp</span> -s .</pre>
      </div>
    </section>
-    <section>
-      <h2>
+    <section class="w-full">
+      <h2 class="text-2xl font-thin">
        <i class="devicon-linux-plain"></i>&nbsp;<span translate="getStarted.linuxUsers">Linux users</span>
      </h2>
      <div class="sub-system">
-        <div class="alert alert-warning">
-          <p>
+        <div class="p-4 my-4 text-sm text-yellow-800 rounded-lg bg-yellow-50">
+          <p class="text-lg">
            <i class="fas fa-exclamation-triangle"></i>
            <span translate="getStarted.notConfident">Opt for these methods instead if you don't feel confident using
              the shell script</span>
@@ -104,16 +102,16 @@ sudo <span class="function">rpm</span> -U <span class="string">termscp.rpm</span
        </div>
      </div>
    </section>
-    <section>
-      <h2>
+    <section class="w-full">
+      <h2 class="text-2xl font-thin">
        <i class="devicon-apple-plain"></i>&nbsp;<span translate="getStarted.macos.title">MacOS users</span>
      </h2>
      <div class="installation">
-        <div class="alert alert-warning">
-          <p>
+        <div class="p-4 my-4 text-sm text-yellow-800 rounded-lg bg-yellow-50">
+          <p class="text-lg">
            <i class="fas fa-exclamation-triangle"></i>
-            <span translate="getStarted.notConfident">Opt for this method instead if you don't feel confident using the
-              shell script</span>
+            <span translate="getStarted.notConfident">Opt for these methods instead if you don't feel confident using
+              the shell script</span>
          </p>
        </div>
        <p>
@@ -123,13 +121,13 @@ sudo <span class="function">rpm</span> -U <span class="string">termscp.rpm</span
        <pre><span class="function">brew</span> install <span class="string">veeso/termscp/termscp</span></pre>
      </div>
    </section>
-    <section>
-      <h2>
+    <section class="w-full">
+      <h2 class="text-2xl font-thin">
        <i class="devicon-rust-plain"></i>&nbsp;<span translate="getStarted.cargo.title">Install with Cargo</span>
      </h2>
      <div class="installation">
-        <div class="alert alert-warning">
-          <p>
+        <div class="p-4 my-4 text-sm text-yellow-800 rounded-lg bg-yellow-50">
+          <p class="text-lg">
            <i class="fas fa-exclamation-triangle"></i>
            <span translate="getStarted.noBinary">Opt for this method instead if binaries for your platform are not
              available</span>
@@ -142,10 +140,10 @@ sudo <span class="function">rpm</span> -U <span class="string">termscp.rpm</span
          <span translate="getStarted.cargo.requirements">To install termscp via Cargo, these requirements must be
            satisfied:</span>
        </p>
-        <ul>
+        <ul class="list-disc px-8">
          <li>
            Linux:
-            <ul>
+            <ul class="list-disc px-12">
              <li>pkg-config</li>
              <li>libssh2</li>
              <li>openssl-dev</li>
@@ -153,7 +151,7 @@ sudo <span class="function">rpm</span> -U <span class="string">termscp.rpm</span
          </li>
          <li>
            FreeBSD:
-            <ul>
+            <ul class="list-disc px-12">
              <li>libssh</li>
              <li>dbus</li>
              <li>pkg-conf</li>
--- a/site/html/home.html
+++ b/site/html/home.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<section id="intro" class="flex flex-col mx-auto items-center justify-center w-full px-4 dark:bg-brand dark:text-gray-100">
+  <h1 class="text-3xl text-center font-thin">termscp</h1>
+  <img class="w-[256px] h-auto m-auto" alt="logo" src="assets/images/termscp.webp" />
+  <h2 class="text-xl font-thin text-center py-6" translate="intro.caption">
+    A feature rich terminal UI file transfer and explorer with support for
+    SCP/SFTP/FTP/S3/SMB
+  </h2>
+  <button class="bg-brand hover:bg-gray-800 text-white font-thin text-xl py-2 px-4 rounded-xl max-w-fit">
+    <a href="/get-started.html" class="no-underline" translate="intro.getStarted">Get started →</a>
+  </button>
+  <div class="p-4 my-4 text-sm text-green-800 rounded-lg bg-green-50">
+    <p class="text-lg">
+      <span translate="intro.versionAlert">termscp 0.12.0 is NOW out! Download it from</span>&nbsp;
+      <a href="/get-started.html" translate="intro.here">here!</a>
+    </p>
+  </div>
+  <div class="grid grid-cols-3 sm:grid-cols-1 gap-8 py-8 w-4/6 sm:w-full">
+    <div class="feature">
+      <h3 translate="intro.features.handy.title" class="text-center text-lg">Handy UI</h3>
+      <p translate="intro.features.handy.body" class="text-center">
+        Explore and operate on the remote and on the local machine file system
+        with a handy UI.
+      </p>
+    </div>
+    <div class="feature">
+      <h3 translate="intro.features.crossPlatform.title" class="text-center text-lg">Cross platform</h3>
+      <p translate="intro.features.crossPlatform.body" class="text-center">
+        Runs on Windows, MacOS, Linux and BSD
+      </p>
+    </div>
+    <div class="feature">
+      <h3 translate="intro.features.customizable.title" class="text-center text-lg">Customizable</h3>
+      <p translate="intro.features.customizable.body" class="text-center">
+        Customize the file explorer, the text editor to use and default
+        options
+      </p>
+    </div>
+    <div class="feature">
+      <h3 translate="intro.features.bookmarks.title" class="text-center text-lg">Bookmarks</h3>
+      <p translate="intro.features.bookmarks.body" class="text-center">
+        Connect to your favourite hosts through built-in bookmarks and recent
+        connections support
+      </p>
+    </div>
+    <div class="feature">
+      <h3 translate="intro.features.security.title" class="text-center text-lg">Security first</h3>
+      <p translate="intro.features.security.body" class="text-center">
+        Save your password into your operating system key vault
+      </p>
+    </div>
+    <div class="feature">
+      <h3 translate="intro.features.performance.title" class="text-center text-lg">Eye on performance</h3>
+      <p translate="intro.features.performance.body" class="text-center">
+        termscp has been developed keeping an eye on performance to prevent
+        cpu usage
+      </p>
+    </div>
+  </div>
+  <div class="w-4/6 sm:w-5/6">
+    <video autoplay muted loop>
+      <source src="assets/videos/explorer.mp4" type="video/mp4" resolve-video-fallback="assets/images/explorer.gif" />
+    </video>
+  </div>
+  <hr class="h-px my-8 bg-gray-800 border-0" />
+  <div class="flex flex-row sm:flex-col justify-around gap-12">
+    <div class="hook">
+      <h3 class="text-center text-gray-500 dark:text-gray-100 font-light text-xl">
+        <a href="/get-started.html" class="no-underline hover:underline" translate="intro.footer.getStarted">Get started</a>
+      </h3>
+    </div>
+    <div class="hook">
+      <h3 class="text-center text-gray-500 dark:text-gray-100 font-light text-xl">
+        <a href="/user-manual.html" class="no-underline hover:underline" translate="intro.footer.manual">User manual</a>
+      </h3>
+    </div>
+    <div class="hook">
+      <h3 class="text-center text-gray-500 dark:text-gray-100 font-light text-xl">
+        <a href="/updates.html" class="no-underline hover:underline" translate="intro.footer.updates">Install updates</a>
+      </h3>
+    </div>
+  </div>
+</section>
--- a/site/html/intro.html
+++ b/site/html/intro.html
@@ -1,96 +0,0 @@
-<head>
-  <link rel="stylesheet" href="css/intro.css" />
-</head>
-<body>
-  <section id="intro" class="container intro">
-    <h1 class="title">termscp</h1>
-    <img class="logo" alt="logo" src="assets/images/termscp.webp" />
-    <h2 class="caption" translate="intro.caption">
-      A feature rich terminal UI file transfer and explorer with support for
-      SCP/SFTP/FTP/S3
-    </h2>
-    <button class="pure-button get-started">
-      <a href="#get-started" translate="intro.getStarted">Get started →</a>
-    </button>
-    <div class="alert alert-center alert-success">
-      <p>
-        <span translate="intro.versionAlert"
-          >termscp 0.12.0 is NOW out! Download it from</span
-        >&nbsp;
-        <a href="#get-started" translate="intro.here">here!</a>
-      </p>
-    </div>
-    <div class="features">
-      <div class="feature">
-        <h3 translate="intro.features.handy.title">Handy UI</h3>
-        <p translate="intro.features.handy.body">
-          Explore and operate on the remote and on the local machine file system
-          with a handy UI.
-        </p>
-      </div>
-      <div class="feature">
-        <h3 translate="intro.features.crossPlatform.title">Cross platform</h3>
-        <p translate="intro.features.crossPlatform.body">
-          Runs on Windows, MacOS, Linux and BSD
-        </p>
-      </div>
-      <div class="feature">
-        <h3 translate="intro.features.customizable.title">Customizable</h3>
-        <p translate="intro.features.customizable.body">
-          Customize the file explorer, the text editor to use and default
-          options
-        </p>
-      </div>
-      <div class="feature">
-        <h3 translate="intro.features.bookmarks.title">Bookmarks</h3>
-        <p translate="intro.features.bookmarks.body">
-          Connect to your favourite hosts through built-in bookmarks and recent
-          connections support
-        </p>
-      </div>
-      <div class="feature">
-        <h3 translate="intro.features.security.title">Security first</h3>
-        <p translate="intro.features.security.body">
-          Save your password into your operating system key vault
-        </p>
-      </div>
-      <div class="feature">
-        <h3 translate="intro.features.performance.title">Eye on performance</h3>
-        <p translate="intro.features.performance.body">
-          termscp has been developed keeping an eye on performance to prevent
-          cpu usage
-        </p>
-      </div>
-    </div>
-    <div class="preview">
-      <video autoplay muted loop>
-        <source
-          src="assets/videos/explorer.mp4"
-          type="video/mp4"
-          resolve-video-fallback="assets/images/explorer.gif"
-        />
-      </video>
-    </div>
-    <div class="discover">
-      <div class="hook">
-        <h3>
-          <a href="#get-started" translate="intro.footer.getStarted"
-            >Get started</a
-          >
-        </h3>
-      </div>
-      <div class="hook">
-        <h3>
-          <a href="#user-manual" translate="intro.footer.manual">User manual</a>
-        </h3>
-      </div>
-      <div class="hook">
-        <h3>
-          <a href="#updates" translate="intro.footer.updates"
-            >Install updates</a
-          >
-        </h3>
-      </div>
-    </div>
-  </section>
-</body>
--- a/site/html/updates.html
+++ b/site/html/updates.html
@@ -2,25 +2,16 @@
  <link rel="stylesheet" href="css/updates.css" />
 </head>
 <body>
-  <section id="updates" class="container updates">
-    <h1 translate="updates.title">Keeping termscp up to date</h1>
-    <div class="alert alert-warning">
-      <p>
-        <i class="fas fa-exclamation-triangle"></i>
-        <span translate="updates.disclaimer">
-        Updating termscp with this method is only available for 0.7.x versions
-        or higher. If you have an older version, you have to install updates
-        using the</span>&nbsp;<a href="#get-started">install.sh script</a>
-      </p>
-    </div>
+  <section id="updates" class="flex flex-col mx-auto items-center justify-center w-full px-12 gap-8 dark:text-gray-100">
+    <h1 translate="updates.title" class="text-3xl font-thin">Keeping termscp up to date</h1>
    <!-- Reasons -->
    <section>
-      <h2>
+      <h2 class="text-2xl font-thin">
        <i class="fa fa-question-circle"></i>&nbsp;<span translate="updates.reasons.title">Why should you install
        updates</span>
      </h2>
      <div class="wall-of-text">
-        <p translate="updates.reasons.wallOfText">
+        <p translate="updates.reasons.wallOfText" class="text-gray-700 dark:text-gray-300">
          Termscp is an application that is still in its early stage of
          development, the first version has been released in december in 2020
          and practically there's only one
@@ -42,7 +33,7 @@
          awesome features 🦄 you can't miss and the application is getting more
          reliable and stable after each update 😄
        </p>
-        <p class="tl-dr">
+        <p class="italic text-xl text-gray-700 dark:text-gray-300">
          <span>TL;DR</span>
          <span translate="updates.reasons.tldr"></span>
        </p>
@@ -50,26 +41,26 @@
    </section>
    <!-- Gui method -->
    <section>
-      <h2><i class="fa fa-desktop"></i>&nbsp;<span translate="updates.gui.title">GUI method</span></h2>
+      <h2 class="text-2xl font-thin"><i class="fa fa-desktop"></i>&nbsp;<span translate="updates.gui.title">GUI method</span></h2>
      <div class="installation">
-        <p translate="updates.gui.body" class="description">
+        <p translate="updates.gui.body" class="text-gray-700 dark:text-gray-300">
          The GUI method just consists in starting termscp with no options, you
          then should be in front of the authentication form. If there's an
          update available a message like "termscp x.y.z is OUT! Update and read
          release notes with CTRL+R". All you have to do at this point to update
          termscp, is:
        </p>
-        <ol>
+        <ol class="list-decimal px-8 text-gray-700 dark:text-gray-300">
          <li translate="updates.gui.steps.st">press CTRL+R. The release notes should now be displayed.</li>
          <li translate="updates.gui.steps.nd">Select "YES" in the "Install update?" radio input</li>
          <li translate="updates.gui.steps.rd">Press "ENTER"</li>
        </ol>
-        <p translate="updates.gui.then" class="description">
+        <p translate="updates.gui.then" class="text-gray-700 dark:text-gray-300">
          If everything worked correctly a green message "termscp x.y.z has been
          installed!" will be displayed. Just restart termscp and enjoy the
          update 😄
        </p>
-        <div class="alert alert-warning">
+        <div class="p-4 my-4 text-sm text-yellow-800 rounded-lg bg-yellow-50">
          <p>
            <i class="fas fa-exclamation-triangle"></i>
            <span translate="updates.gui.pex">
@@ -82,20 +73,20 @@
    </section>
    <!-- CLI method -->
    <section>
-      <h2><i class="fa fa-glasses"></i>&nbsp;<span translate="updates.cli.title">CLI method</span></h2>
+      <h2 class="text-2xl font-thin"><i class="fa fa-glasses"></i>&nbsp;<span translate="updates.cli.title">CLI method</span></h2>
      <div class="installation">
-        <p translate="updates.cli.body" class="description">
+        <p translate="updates.cli.body" class="text-gray-700 dark:text-gray-300">
          If you prefer, you can install a new update just using the dedicated
          CLI option:
        </p>
        <pre><span class="function">termscp</span> --update</pre>
-        <div class="alert alert-warning">
+        <div class="p-4 my-4 text-sm text-yellow-800 rounded-lg bg-yellow-50">
          <p>
            <i class="fas fa-exclamation-triangle"></i>
            <span translate="updates.cli.pex">Run with sudo if necessary (Debian/FreeBSD/RedHat users)</span>
          </p>
        </div>
-        <p translate="updates.cli.then" class="description">
+        <p translate="updates.cli.then" class="text-gray-700 dark:text-gray-300">
          Once started, you will be prompted whether to install or not the
          update. Confirm the installation and ta-dah, the new version of
          termscp should now be available on your machine
--- a/site/index.html
+++ b/site/index.html
@@ -1,272 +1,75 @@
 <!DOCTYPE html>
-<html lang="en_US">
-  <head>
-    <title>
-      termscp is a terminal file transfer and explorer for SCP/SFTP/FTP/S3
-    </title>
-    <meta
-      property="og:description"
-      content="termscp is a feature rich terminal file transfer and explorer, with support for SCP/SFTP/FTP/S3. It is Linux, MacOS, FreeBSD, NetBSD and Windows compatible"
-    />
-    <meta
-      name="description"
-      content="termscp is a feature rich terminal file transfer and explorer, with support for SCP/SFTP/FTP/S3. It is Linux, MacOS, FreeBSD, NetBSD and Windows compatible"
-    />
-    <meta
-      property="og:title"
-      content="termscp is a terminal file transfer and explorer for SCP/SFTP/FTP/S3"
-    />
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="robots" content="index, follow" />
-    <meta
-      property="og:image"
-      content="https://termscp.veeso.dev/assets/images/og_preview.jpg"
-    />
-    <meta property="og:image:type" content="image/jpg" />
-    <meta property="og:image:width" content="1024" />
-    <meta property="og:image:height" content="820" />
-    <meta property="og:type" content="website" />
-    <meta property="og:site_name" content="termscp" />
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:url" content="https://termscp.veeso.dev" />
-    <!-- Pure.css -->
-    <link
-      rel="stylesheet"
-      href="https://unpkg.com/purecss@2.0.5/build/pure-min.css"
-    />
-    <!-- Icons -->
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.11.0/devicon.min.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
-      integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
-      crossorigin="anonymous"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/fontawesome.min.css"
-      integrity="sha512-OdEXQYCOldjqUEsuMKsZRj93Ht23QRlhIb8E/X0sbwZhme8eUw6g8q7AdxGJKakcBbv7+/PX0Gc2btf7Ru8cZA=="
-      crossorigin="anonymous"
-    />
-    <!-- Main -->
-    <link rel="stylesheet" href="css/markdown.css" />
-    <link rel="stylesheet" href="css/menu.css" />
-    <link rel="stylesheet" href="css/main.css" />
-    <!-- Favicons -->
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="96x96"
-      href="assets/images/favicon-96x96.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="32x32"
-      href="assets/images/favicon-32x32.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="16x16"
-      href="assets/images/favicon-16x16.png"
-    />
-  </head>
-  <body>
-    <div id="layout">
-      <!-- Menu toggle -->
-      <a href="#menu" id="menu-burger" class="menu-link">
-        <!-- Hamburger icon -->
-        <span></span>
-      </a>
-      <!-- Menu -->
-      <header id="menu">
-        <div class="pure-menu">
-          <div class="pure-menu-heading">
-            <div class="pic-box">
-              <img class="avatar" alt="logo" src="assets/images/termscp.webp" />
-            </div>
-            <h1>termscp</h1>
-            <p translate="menu.desc">
-              A feature rich terminal UI file transfer
-            </p>
-            <a href="https://github.com/veeso/termscp/stargazers/">
-              <img
-                src="https://img.shields.io/github/stars/veeso/termscp.svg?style=social&label=Star&maxAge=2592000"
-              />
-            </a>
-          </div>
-          <ul class="pure-menu-list">
-            <li class="pure-menu-item pure-menu-selected">
-              <a href="#intro" class="pure-menu-link" translate="menu.intro"
-                >Intro</a
-              >
-            </li>
-            <li class="pure-menu-item">
-              <a
-                href="#get-started"
-                class="pure-menu-link"
-                translate="menu.getStarted"
-                >Get started</a
-              >
-            </li>
-            <li class="pure-menu-item">
-              <a href="#updates" class="pure-menu-link" translate="menu.updates"
-                >Install updates</a
-              >
-            </li>
-            <li class="pure-menu-item">
-              <a
-                href="#user-manual"
-                class="pure-menu-link"
-                translate="menu.manual"
-                >User manual</a
-              >
-            </li>
-            <li class="pure-menu-item">
-              <a
-                href="#changelog"
-                class="pure-menu-link"
-                translate="menu.changelog"
-                >Release history</a
-              >
-            </li>
-            <li class="pure-menu-item">
-              <a
-                href="https://github.com/veeso/termscp"
-                class="pure-menu-link"
-                target="_blank"
-                >Github&nbsp;<i class="fas fa-external-link-alt"></i
-              ></a>
-            </li>
-            <li class="pure-menu-item">
-              <a
-                href="https://veeso.dev/"
-                class="pure-menu-link"
-                target="_blank"
-                ><span translate="menu.author">About the author</span>&nbsp;<i
-                  class="fas fa-external-link-alt"
-                ></i
-              ></a>
-            </li>
-            <li class="pure-menu-item">
-              <a
-                href="https://ko-fi.com/veeso"
-                class="pure-menu-link"
-                target="_blank"
-                ><span translate="menu.support">Support me</span>&nbsp;<i
-                  class="fas fa-external-link-alt"
-                ></i
-              ></a>
-            </li>
-          </ul>
-          <div class="pure-menu-bottom">
-            <ul>
-              <li>
-                <a href="https://github.com/veeso/termscp" target="_blank"
-                  ><i class="devicon-github-original"></i
-                ></a>
-              </li>
-              <li>
-                <a href="https://crates.io/crates/termscp" target="_blank"
-                  ><i class="devicon-rust-plain"></i
-                ></a>
-              </li>
-              <li>
-                <a
-                  href="https://community.chocolatey.org/packages/termscp"
-                  target="_blank"
-                  ><i class="devicon-windows8-plain"></i
-                ></a>
-              </li>
-              <li>
-                <a href="https://ko-fi.com/veeso" target="_blank"
-                  ><i class="fa fa-coffee"></i
-                ></a>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </header>
-      <main>
-        <div id="main"></div>
-      </main>
-      <footer>
-        <div class="container">
-          <ul class="contacts">
-            <li>
-              <a href="https://github.com/veeso/termscp" target="_blank"
-                ><i class="devicon-github-original"></i
-              ></a>
-            </li>
-            <li>
-              <a href="https://crates.io/crates/termscp" target="_blank"
-                ><i class="devicon-rust-plain"></i
-              ></a>
-            </li>
-            <li>
-              <a
-                href="https://community.chocolatey.org/packages/termscp"
-                target="_blank"
-                ><i class="devicon-windows8-plain"></i
-              ></a>
-            </li>
-            <li>
-              <a href="https://ko-fi.com/veeso" target="_blank"
-                ><i class="fa fa-coffee"></i
-              ></a>
-            </li>
-          </ul>
-          <!-- vat number -->
-          <p class="footer--vat">
-            <span>P.IVA IT03104140300 </span>
-          </p>
-          <p class="footer--address">
-            <span>Via Antonio Marangoni 33, 33100, Udine (UD)</span>
-          </p>
-          <!-- Copyright -->
-          <p class="footer--copyright">
-            <span>Christian Visintin © </span><span resolve-copyright></span>
-            <span>&nbsp;|&nbsp;</span>
-            <a class="footer--link" href="https://veeso.dev/en/privacy" target="_blank"
-              >Privacy policy</a
-            >
-            <span>&nbsp;|&nbsp;</span>
-            <a class="footer--link" href="https://veeso.dev/en/cookie-policy" target="_blank"
-              >Cookie policy</a
-            >
-          </p>
-        </div>
-      </footer>
-    </div>
-    <!-- Scripts -->
-    <!-- jQuery -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-    <!-- Showdown JS-->
-    <script
-      src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"
-      integrity="sha512-L03kznCrNOfVxOUovR6ESfCz9Gfny7gihUX/huVbQB9zjODtYpxaVtIaAkpetoiyV2eqWbvxMH9fiSv5enX7bw=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    ></script>
-    <!-- Local -->
-    <script src="js/lang.min.js"></script>
-    <script src="js/core.js"></script>
-    <script src="js/events.js"></script>
-    <script src="js/resolvers.js"></script>
-    <!-- ko-fi -->
-    <script src="https://storage.ko-fi.com/cdn/scripts/overlay-widget.js"></script>
-    <script>
-      kofiWidgetOverlay.draw("veeso", {
-        type: "floating-chat",
-        "floating-chat.donateButton.text": "Support me",
-        "floating-chat.donateButton.background-color": "#323842",
-        "floating-chat.donateButton.text-color": "#fff",
-      });
-    </script>
-  </body>
-</html>
+<html lang="en_US" class="dark">
+
+<head>
+  <title>
+    termscp is a terminal file transfer and explorer for SCP/SFTP/FTP/S3/SMB | termscp
+  </title>
+  <meta property="og:description"
+    content="a WinSCP alternative for Linux and MacOS with support for SCP/SFTP/FTP/S3/SMB. Command line file transfer with user interface compatible with all the operating systems." />
+  <meta name="description"
+    content="a WinSCP alternative for Linux and MacOS with support for SCP/SFTP/FTP/S3/SMB. Command line file transfer with user interface compatible with all the operating systems." />
+  <meta property="og:title" content="termscp is a terminal file transfer and explorer for SCP/SFTP/FTP/S3/SMB | termscp" />
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="robots" content="index, follow" />
+  <meta property="og:image" content="https://termscp.veeso.dev/assets/images/og_preview.jpg" />
+  <meta property="og:image:type" content="image/jpg" />
+  <meta property="og:image:width" content="1280" />
+  <meta property="og:image:height" content="640" />
+  <meta property="og:type" content="website" />
+  <meta property="og:site_name" content="termscp" />
+  <meta property="og:locale" content="en_US" />
+  <meta property="og:url" content="https://termscp.veeso.dev" />
+  <!-- Icons -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.11.0/devicon.min.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
+    integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
+    crossorigin="anonymous" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/fontawesome.min.css"
+    integrity="sha512-OdEXQYCOldjqUEsuMKsZRj93Ht23QRlhIb8E/X0sbwZhme8eUw6g8q7AdxGJKakcBbv7+/PX0Gc2btf7Ru8cZA=="
+    crossorigin="anonymous" />
+  <!-- tailwind -->
+  <link href="output.css" rel="stylesheet" />
+  <!-- Favicons -->
+  <link rel="icon" type="image/png" sizes="96x96" href="assets/images/favicon-96x96.png" />
+  <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon-32x32.png" />
+  <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon-16x16.png" />
+</head>
+
+<body>
+  <div id="layout" class="dark:bg-brand dark:text-gray-100">
+    
+    <!-- Menu -->
+    <header id="menu"></header>
+    <main>
+      <div id="main" class="w-8/12 sm:w-full mx-auto pt-4 pb-8"></div>
+    </main>
+    <footer id="footer"></footer>
+  </div>
+  <!-- Scripts -->
+  <!-- jQuery -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+  <!-- Showdown JS-->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"
+    integrity="sha512-L03kznCrNOfVxOUovR6ESfCz9Gfny7gihUX/huVbQB9zjODtYpxaVtIaAkpetoiyV2eqWbvxMH9fiSv5enX7bw=="
+    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <!-- Local -->
+  <script src="js/lang.min.js"></script>
+  <script src="js/core.js"></script>
+  <script src="js/events.js"></script>
+  <script src="js/resolvers.js"></script>
+  <!-- ko-fi -->
+  <script src="https://storage.ko-fi.com/cdn/scripts/overlay-widget.js"></script>
+  <script>
+    kofiWidgetOverlay.draw("veeso", {
+      type: "floating-chat",
+      "floating-chat.donateButton.text": "Support me",
+      "floating-chat.donateButton.background-color": "#31363b",
+      "floating-chat.donateButton.text-color": "#fff",
+    });
+  </script>
+</body>
+
+</html>
--- a/site/input.css
+++ b/site/input.css
@@ -0,0 +1,132 @@
+@import "css/markdown.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+  font-family: "Sora";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/sora/v11/xMQ9uFFYT72X5wkB_18qmnndmSdSnx2BAfO5mnuyOo1l_iMwWa-xsaQ.woff2)
+    format("woff2");
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: "Sora";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/sora/v11/xMQ9uFFYT72X5wkB_18qmnndmSdSnx2BAfO5mnuyOo1l_iMwV6-x.woff2)
+    format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: "Sora";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/sora/v11/xMQ9uFFYT72X5wkB_18qmnndmSdSnx2BAfO5mnuyOo1l_iMwWa-xsaQ.woff2)
+    format("woff2");
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: "Sora";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/sora/v11/xMQ9uFFYT72X5wkB_18qmnndmSdSnx2BAfO5mnuyOo1l_iMwV6-x.woff2)
+    format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: "Sora", sans-serif;
+  margin: 0;
+  min-width: 100vw;
+  overflow-x: hidden;
+  padding: 0;
+}
+
+main {
+  padding-top: 5rem;
+}
+
+p {
+  font-weight: 300;
+}
+
+input {
+  font-family: "Sora", sans-serif;
+  font-size: 1em;
+}
+
+textarea {
+  font-family: "Sora", sans-serif;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+button {
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+button,
+input {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: none;
+}
+
+pre {
+  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  padding: 16px;
+  overflow: auto;
+  font-size: 85%;
+  line-height: 1.45;
+  color: #d0d0d0;
+  background-color: #222629;
+  border-radius: 3px;
+  word-wrap: normal;
+  border-radius: 0.5em;
+}
+
+pre .function {
+  color: #f08d49;
+}
+
+pre .string {
+  color: #7ec699;
+}
--- a/site/js/core.js
+++ b/site/js/core.js
@@ -33,3 +33,99 @@ function languageSupported(lang) {
 function setSiteLanguage(lang) {
  setLanguage(lang);
 }
+
+const converter = new showdown.Converter({ tables: true });
+
+/**
+ * @description load page associated to hash
+ * @param {string} hash
+ */
+function loadPage(path) {
+  switch (path) {
+    case "/":
+    case "/index.html":
+      loadHtml("home.html");
+      break;
+    case "/get-started.html":
+      loadHtml("get-started.html");
+      break;
+    case "/user-manual.html":
+      loadUserManual();
+      break;
+    case "/updates.html":
+      loadHtml("updates.html");
+      break;
+    case "/changelog.html":
+      loadMarkdown(
+        "https://raw.githubusercontent.com/veeso/termscp/main/CHANGELOG.md"
+      );
+      break;
+  }
+}
+
+function loadHtml(page) {
+  const url = "html/" + page;
+  $("#main").load(url, function () {
+    onPageLoaded();
+  });
+}
+
+function loadMenu() {
+  $("#menu").load("html/components/menu.html", function () {
+    onPageLoaded();
+  });
+}
+
+function loadFooter() {
+  $("#footer").load("html/components/footer.html", function () {
+    onPageLoaded();
+  });
+}
+
+function loadMarkdown(page) {
+  getMarkdown(page, function (md) {
+    const div = jQuery("<div/>", {
+      id: page,
+      class: "container markdown",
+    });
+    div.html(converter.makeHtml(md));
+    $("#main").empty();
+    $("#main").append(div);
+    onPageLoaded();
+  });
+}
+
+/**
+ * @description get markdown and pass result to onLoaded
+ * @param {string} url
+ * @param {function} onLoaded
+ */
+function getMarkdown(url, onLoaded) {
+  $.ajax({
+    url,
+    type: "GET",
+    dataType: "text",
+    success: onLoaded,
+  });
+}
+
+function loadUserManual() {
+  // Load language
+  const lang = getNavigatorLanguage();
+  if (lang === "en") {
+    loadMarkdown(
+      `https://raw.githubusercontent.com/veeso/termscp/main/docs/man.md`
+    );
+  } else {
+    loadMarkdown(
+      `https://raw.githubusercontent.com/veeso/termscp/main/docs/${lang}/man.md`
+    );
+  }
+}
+
+// startup
+$(function () {
+  loadPage(window.location.pathname);
+  loadMenu();
+  loadFooter();
+});
--- a/site/js/events.js
+++ b/site/js/events.js
@@ -1,133 +1,81 @@
-const hashBlacklist = ["#menu"];
-const converter = new showdown.Converter({ tables: true });
-
-/**
- * @description handle hash change
- */
-function onHashChange() {
-  const hash = location.hash;
-  if (!hashBlacklist.includes(hash) && hash.length > 0) {
-    selectMenuEntry(location.hash);
-    loadPage(hash);
-  } else if (hash.length === 0 || hash === "#") {
-    loadPage("#intro");
-  }
-}
-
-/**
- * @description select menu entry
- * @param {*} hash
- */
-function selectMenuEntry(hash) {
-  // Remove current entry
-  $(".pure-menu-selected").removeClass("pure-menu-selected");
-  $('a[href$="' + hash + '"]')
-    .parent()
-    .addClass("pure-menu-selected");
-}
-
-/**
- * @description load page associated to hash
- * @param {string} hash
- */
-function loadPage(hash) {
-  switch (hash) {
-    case "#intro":
-      loadHtml("intro.html");
-      break;
-    case "#get-started":
-      loadHtml("get-started.html");
-      break;
-    case "#user-manual":
-      loadUserManual();
-      break;
-    case "#updates":
-      loadHtml("updates.html");
-      break;
-    case "#changelog":
-      loadMarkdown(
-        "https://raw.githubusercontent.com/veeso/termscp/main/CHANGELOG.md"
-      );
-      break;
-  }
-  window.scrollTo(0, 0);
-}
-
-function loadHtml(page) {
-  const url = "html/" + page;
-  $("#main").load(url, function () {
-    onPageLoaded();
-  });
-}
-
-function loadMarkdown(page) {
-  getMarkdown(page, function (md) {
-    const div = jQuery("<div/>", {
-      id: page,
-      class: "container markdown",
-    });
-    div.html(converter.makeHtml(md));
-    $("#main").empty();
-    $("#main").append(div);
-    onPageLoaded();
-  });
-}
-
-/**
- * @description get markdown and pass result to onLoaded
- * @param {string} url
- * @param {function} onLoaded
- */
-function getMarkdown(url, onLoaded) {
-  $.ajax({
-    url,
-    type: "GET",
-    dataType: "text",
-    success: onLoaded,
-  });
-}
-
-function onMenuBurgerClick() {
-  const active = $("#menu").hasClass("active");
-  if (active) {
-    $("#layout").removeClass("active");
-    $("#menu").removeClass("active");
-  } else {
-    $("#layout").addClass("active");
-    $("#menu").addClass("active");
-  }
-}
-
-function loadUserManual() {
-  // Load language
-  const lang = getNavigatorLanguage();
-  if (lang === "en") {
-    loadMarkdown(
-      `https://raw.githubusercontent.com/veeso/termscp/main/docs/man.md`
-    );
-  } else {
-    loadMarkdown(
-      `https://raw.githubusercontent.com/veeso/termscp/main/docs/${lang}/man.md`
-    );
-  }
-}
-
 function onPageLoaded() {
  reloadTranslations();
+  setThemeToggle();
+  setTheme(getTheme());
 }

-// Register
-window.onhashchange = onHashChange;
+function onToggleMenu() {
+  const mobileMenu = $("#mobile-menu");
+  let wasVisible = false;
+  // if not visible set flex and slide in, otherwise slide out
+  if (!mobileMenu.is(":visible")) {
+    mobileMenu.css("display", "flex");
+    mobileMenu.addClass("animate__animated animate__slideInLeft");
+  } else {
+    mobileMenu.addClass("animate__animated animate__slideOutLeft");
+    wasVisible = true;
+  }
+
+  // on animation end remove animation, if visible set hidden
+  mobileMenu.on("animationend", () => {
+    mobileMenu.removeClass(
+      "animate__animated animate__slideOutLeft animate__slideInLeft"
+    );
+    if (wasVisible) {
+      mobileMenu.css("display", "none");
+    }
+    mobileMenu.off("animationend");
+  });
+}
+
+function getTheme() {
+  const theme = localStorage.getItem("theme");
+
+  if (!theme) {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "theme-dark"
+      : "theme-light";
+  }
+
+  return theme;
+}
+
+function setThemeToggle() {
+  if (getTheme() === "theme-dark") {
+    $("#theme-toggle-dark-icon").css("display", "block");
+    $("#theme-toggle-light-icon").css("display", "none");
+  } else {
+    $("#theme-toggle-dark-icon").css("display", "none");
+    $("#theme-toggle-light-icon").css("display", "block");
+  }
+}
+
+// function to set a given theme/color-scheme
+function setTheme(themeName) {
+  localStorage.setItem("theme", themeName);
+  if (themeName === "theme-dark") {
+    document.documentElement.classList.add("dark");
+  } else {
+    document.documentElement.classList.remove("dark");
+  }
+  setThemeToggle();
+}
+
+// function to toggle between light and dark theme
+function toggleTheme() {
+  console.log("theme", getTheme());
+  if (getTheme() === "theme-dark") {
+    setTheme("theme-light");
+  } else {
+    setTheme("theme-dark");
+  }
+}

 // Startup
 $(function () {
-  onHashChange();
  // Init language
  setSiteLanguage(getNavigatorLanguage());
-  // Burger event listener
-  $("#menu-burger").on("click", onMenuBurgerClick);
-  $(".pure-menu-heading").on("click", function () {
-    location.hash = "#";
-    onHashChange();
-  });
+
+  // init theme
+  setTheme(getTheme());
 });
--- a/site/output.css
+++ b/site/output.css
--- a/site/robots.txt
+++ b/site/robots.txt
@@ -0,0 +1,2 @@
+User-Agent: *
+Allow: /
--- a/site/sitemap.xml
+++ b/site/sitemap.xml
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+  xmlns:xhtml="http://www.w3.org/1999/xhtml">
+  <url>
+    <loc>https://termscp.veeso.dev/</loc>
+    <lastmod>2023-07-05</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://termscp.veeso.dev/get-started.html</loc>
+    <lastmod>2023-07-05</lastmod>
+    <priority>0.95</priority>
+  </url>
+  <url>
+    <loc>https://termscp.veeso.dev/updates.html</loc>
+    <lastmod>2023-07-05</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://termscp.veeso.dev/user-manual.html</loc>
+    <lastmod>2023-07-05</lastmod>
+    <priority>0.90</priority>
+  </url>
+  <url>
+    <loc>https://termscp.veeso.dev/changelog.html</loc>
+    <lastmod>2023-07-05</lastmod>
+    <priority>0.50</priority>
+  </url>
+</urlset>
--- a/site/updates.html
+++ b/site/updates.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en_US">
+
+<head>
+  <title>
+    Install termscp updates | termscp
+  </title>
+  <meta property="og:description"
+    content="How to update termscp. Keep termscp up to date with the built-in command." />
+  <meta name="description"
+    content="How to update termscp. Keep termscp up to date with the built-in command." />
+  <meta property="og:title" content="Install termscp updates | termscp" />
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="robots" content="index, follow" />
+  <meta property="og:image" content="https://termscp.veeso.dev/assets/images/og_preview.jpg" />
+  <meta property="og:image:type" content="image/jpg" />
+  <meta property="og:image:width" content="1280" />
+  <meta property="og:image:height" content="640" />
+  <meta property="og:type" content="website" />
+  <meta property="og:site_name" content="termscp" />
+  <meta property="og:locale" content="en_US" />
+  <meta property="og:url" content="https://termscp.veeso.dev" />
+  <!-- Icons -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.11.0/devicon.min.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
+    integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
+    crossorigin="anonymous" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/fontawesome.min.css"
+    integrity="sha512-OdEXQYCOldjqUEsuMKsZRj93Ht23QRlhIb8E/X0sbwZhme8eUw6g8q7AdxGJKakcBbv7+/PX0Gc2btf7Ru8cZA=="
+    crossorigin="anonymous" />
+  <!-- tailwind -->
+  <link href="output.css" rel="stylesheet" />
+  <!-- Favicons -->
+  <link rel="icon" type="image/png" sizes="96x96" href="assets/images/favicon-96x96.png" />
+  <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon-32x32.png" />
+  <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon-16x16.png" />
+</head>
+
+<body>
+  <div id="layout">
+    
+    <!-- Menu -->
+    <header id="menu"></header>
+    <main>
+      <div id="main" class="w-8/12 sm:w-full mx-auto pt-4 pb-8"></div>
+    </main>
+    <footer id="footer"></footer>
+  </div>
+  <!-- Scripts -->
+  <!-- jQuery -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+  <!-- Showdown JS-->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"
+    integrity="sha512-L03kznCrNOfVxOUovR6ESfCz9Gfny7gihUX/huVbQB9zjODtYpxaVtIaAkpetoiyV2eqWbvxMH9fiSv5enX7bw=="
+    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <!-- Local -->
+  <script src="js/lang.min.js"></script>
+  <script src="js/core.js"></script>
+  <script src="js/events.js"></script>
+  <script src="js/resolvers.js"></script>
+  <!-- ko-fi -->
+  <script src="https://storage.ko-fi.com/cdn/scripts/overlay-widget.js"></script>
+  <script>
+    kofiWidgetOverlay.draw("veeso", {
+      type: "floating-chat",
+      "floating-chat.donateButton.text": "Support me",
+      "floating-chat.donateButton.background-color": "#31363b",
+      "floating-chat.donateButton.text-color": "#fff",
+    });
+  </script>
+</body>
+
+</html>
--- a/site/user-manual.html
+++ b/site/user-manual.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en_US">
+
+<head>
+  <title>
+    termscp user manual | termscp
+  </title>
+  <meta property="og:description"
+    content="How to use termscp. User manual for termscp. How to setup ssh keys in termscp? How to set color themes in termscp?" />
+  <meta name="description"
+    content="How to use termscp. User manual for termscp. How to setup ssh keys in termscp? How to set color themes in termscp?" />
+  <meta property="og:title" content="termscp user manual | termscp" />
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="robots" content="index, follow" />
+  <meta property="og:image" content="https://termscp.veeso.dev/assets/images/og_preview.jpg" />
+  <meta property="og:image:type" content="image/jpg" />
+  <meta property="og:image:width" content="1280" />
+  <meta property="og:image:height" content="640" />
+  <meta property="og:type" content="website" />
+  <meta property="og:site_name" content="termscp" />
+  <meta property="og:locale" content="en_US" />
+  <meta property="og:url" content="https://termscp.veeso.dev" />
+  <!-- Icons -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.11.0/devicon.min.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
+    integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
+    crossorigin="anonymous" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/fontawesome.min.css"
+    integrity="sha512-OdEXQYCOldjqUEsuMKsZRj93Ht23QRlhIb8E/X0sbwZhme8eUw6g8q7AdxGJKakcBbv7+/PX0Gc2btf7Ru8cZA=="
+    crossorigin="anonymous" />
+  <!-- tailwind -->
+  <link href="output.css" rel="stylesheet" />
+  <!-- Favicons -->
+  <link rel="icon" type="image/png" sizes="96x96" href="assets/images/favicon-96x96.png" />
+  <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon-32x32.png" />
+  <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon-16x16.png" />
+</head>
+
+<body>
+  <div id="layout">
+    
+    <!-- Menu -->
+    <header id="menu"></header>
+    <main>
+      <div id="main" class="w-8/12 sm:w-full mx-auto pt-4 pb-8"></div>
+    </main>
+    <footer id="footer"></footer>
+  </div>
+  <!-- Scripts -->
+  <!-- jQuery -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+  <!-- Showdown JS-->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"
+    integrity="sha512-L03kznCrNOfVxOUovR6ESfCz9Gfny7gihUX/huVbQB9zjODtYpxaVtIaAkpetoiyV2eqWbvxMH9fiSv5enX7bw=="
+    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <!-- Local -->
+  <script src="js/lang.min.js"></script>
+  <script src="js/core.js"></script>
+  <script src="js/events.js"></script>
+  <script src="js/resolvers.js"></script>
+  <!-- ko-fi -->
+  <script src="https://storage.ko-fi.com/cdn/scripts/overlay-widget.js"></script>
+  <script>
+    kofiWidgetOverlay.draw("veeso", {
+      type: "floating-chat",
+      "floating-chat.donateButton.text": "Support me",
+      "floating-chat.donateButton.background-color": "#31363b",
+      "floating-chat.donateButton.text-color": "#fff",
+    });
+  </script>
+</body>
+
+</html>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,26 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./site/**/*.{html,js}"],
+  darkMode: "class",
+  theme: {
+    screens: {
+      sm: { max: "640px" },
+      md: "768px",
+      lg: "1024px",
+      xl: "1280px",
+      "2xl": "1536px",
+    },
+    extend: {
+      colors: {
+        brand: "#31363b",
+      },
+      fontSize: {
+        xl: "1.5rem",
+        "2xl": "2rem",
+        "3xl": "3.5rem",
+        "4xl": "7rem",
+      },
+    },
+  },
+  plugins: [],
+};