docs: add website

srevinsaju · Mar 4, 2021 · 151f8d2 · 151f8d2 · vercel · Mar 4, 2021
1 parent 4daecae
commit 151f8d2
Show file tree

Hide file tree

Showing 17 changed files with 1,226 additions and 0 deletions.
diff --git a/www/css/bulma/bulma-switch.min.css b/www/css/bulma/bulma-switch.min.css
diff --git a/www/css/main.css b/www/css/main.css
diff --git a/www/css/termynal.css b/www/css/termynal.css
@@ -0,0 +1,101 @@
+/**
+ * termynal.js
+ *
+ * @author Ines Montani <[email protected]>
+ * @version 0.0.1
+ * @license MIT
+ */
+
+ :root {
+    --color-bg: #252a33;
+    --color-text: #eee;
+    --color-text-subtle: #a2a2a2;
+}
+
+[data-termynal] {
+    width: 750px;
+    max-width: 100%;
+    background: var(--color-bg);
+    color: var(--color-text);
+    font-size: 18px;
+    font-family: 'Fira Mono', Consolas, Menlo, Monaco, 'Courier New', Courier, monospace;
+    border-radius: 4px;
+    padding: 75px 45px 35px;
+    position: relative;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+}
+
+[data-termynal]:before {
+    content: '';
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    display: inline-block;
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    /* A little hack to display the window buttons in one pseudo element. */
+    background: #d9515d;
+    -webkit-box-shadow: 25px 0 0 #f4c025, 50px 0 0 #3ec930;
+            box-shadow: 25px 0 0 #f4c025, 50px 0 0 #3ec930;
+}
+
+[data-termynal]:after {
+    content: 'bash';
+    position: absolute;
+    color: var(--color-text-subtle);
+    top: 5px;
+    left: 0;
+    width: 100%;
+    text-align: center;
+}
+
+[data-ty] {
+    display: block;
+    line-height: 2;
+}
+
+[data-ty]:before {
+    /* Set up defaults and ensure empty lines are displayed. */
+    content: '';
+    display: inline-block;
+    vertical-align: middle;
+}
+
+[data-ty="input"]:before,
+[data-ty-prompt]:before {
+    margin-right: 0.75em;
+    color: var(--color-text-subtle);
+}
+
+[data-ty="input"]:before {
+    content: '$';
+}
+
+[data-ty][data-ty-prompt]:before {
+    content: attr(data-ty-prompt);
+}
+
+[data-ty-cursor]:after {
+    content: attr(data-ty-cursor);
+    font-family: monospace;
+    margin-left: 0.5em;
+    -webkit-animation: blink 1s infinite;
+            animation: blink 1s infinite;
+}
+
+
+/* Cursor animation */
+
+@-webkit-keyframes blink {
+    50% {
+        opacity: 0;
+    }
+}
+
+@keyframes blink {
+    50% {
+        opacity: 0;
+    }
+}
diff --git a/www/img/appimage_branding.png b/www/img/appimage_branding.png
diff --git a/www/img/by-nc-nd.svg b/www/img/by-nc-nd.svg
diff --git a/www/img/flux-feature.png b/www/img/flux-feature.png
diff --git a/www/img/flux-logo.png b/www/img/flux-logo.png
diff --git a/www/img/get-appimage-feature2.png b/www/img/get-appimage-feature2.png
diff --git a/www/img/logo-circle-white-blu-bg.png b/www/img/logo-circle-white-blu-bg.png
diff --git a/www/img/made-with-bulma--black.png b/www/img/made-with-bulma--black.png
diff --git a/www/img/made-with-bulma--white.png b/www/img/made-with-bulma--white.png
diff --git a/www/img/ss-logo-small.png b/www/img/ss-logo-small.png
diff --git a/www/img/zap-feature.png b/www/img/zap-feature.png
diff --git a/www/img/zap.png b/www/img/zap.png
diff --git a/www/index.html b/www/index.html
@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>guiscrcpy | Open Source Android Screen Mirroring</title>
+    <meta name="description" content="guiscrcpy, an open source android screen mirroring system built on python, based on the award winning scrcpy, by rom1v and Genymobile">
+    <meta name="keywords" content="Srevin Saju, Open Source, AppImage, guiscrcpy, android, screen, mirroring, client, fast, adb">
+    <meta name="author" content="Srevin Saju">
+
+    <!-- OG -->
+    <meta property="og:title" content="guiscrcpy" />
+    <meta property="og:url" content="https://guiscrcpy.srevinsaju.me" />
+    <meta property="og:image" content="https://srevinsaju.me/img/ss-logo-small.png" />
+    <meta property="og:description" content="guiscrcpy | an open source android screen mirroring system built on python, based on the award winning scrcpy, by rom1v and Genymobile" />
+    <meta property="og:site_name" content="srevinsaju" />
+
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://kit.fontawesome.com/">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/termynal.css">
+    <link rel="stylesheet" href="/css/bulma/bulma-switch.min.css">
+    <script src="https://kit.fontawesome.com/52ec62d041.js" crossorigin="anonymous" async></script>
+
+  </head>
+  <body>
+    <!-- Navbar -->
+    <nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
+      <div class="navbar-brand">
+        <a class="navbar-item" href="#main">
+          <img src="/img/ss-logo-small.png" height="28" alt="Srevin Saju Logo">
+        </a>
+
+        <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="ssNavBarTop"
+        onclick="document.querySelector('.navbar-menu').classList.toggle('is-active');">
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+        </a>
+      </div>
+
+      <div id="ssNavBarTop" class="navbar-menu">
+        <div class="navbar-start">
+          <a class="navbar-item" href="#main">
+            Home
+          </a>
+          <a class="navbar-item" href="#projects">
+            Projects
+          </a>
+          <div class="navbar-item has-dropdown is-hoverable">
+            <a class="navbar-link" href="#"  onclick="return false;">
+              More
+            </a>
+
+            <div class="navbar-dropdown">
+              <a class="navbar-item" href="#about">
+                About
+              </a>
+              <a class="navbar-item" href="#contact">
+                Contact
+              </a>
+              <hr class="navbar-divider">
+              <a class="navbar-item" href="https://github.com/srevinsaju/zap/issues">
+                Report an issue
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <div class="navbar-end">
+          <div class="navbar-item">
+            <div class="field" style="margin: 0.5em;">
+              <input id="themeSwitch" type="checkbox" name="switchRoundedDefault" class="switch is-rounded">
+              <label for="themeSwitch">
+                <i class="fa fa-sun"></i><span class="sr-only">Light Mode</span>
+              </label>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </nav>
+
+    <!-- HOME SECTION -->
+    <section id="main" class="section" >
+      <div class="ss-aboutbox">
+        <div class="ss-aboutbox-content">
+          <img src="https://raw.githubusercontent.com/srevinsaju/guiscrcpy/master/guiscrcpy/ui/ui/guiscrcpy_logo.png" style="height: 9em;">
+          <h1 class="title" style="font-size: 6em; line-height: 0.5em;">guiscrcpy </h1>
+          <h2 class="subtitle">
+            The fastest ⚡️ <br>
+            open source <br>
+            Android Screen Mirroring 📱<br>
+            GUI 💻</h2>
+        </div>
+
+      </div>
+    </section>
+
+    <!-- FEATURE SECTION -->
+    <section id="main" class="section">
+      <div class="ss-aboutbox">
+        <div class="ss-aboutbox-content">
+          <h1 class="title">
+            Yet another Android Mirroring Software? 🤔
+          </h1>
+          <img src="https://github.com/srevinsaju/guiscrcpy/raw/master/screen39.jpg" alt="Image showing a demonstration of guiscrcpy">
+          <p class="subtitle">
+            <strong>guiscrcpy</strong> provides a stable, user friendly graphical user interface 
+            for the fastest Android screen mirroring software, <strong>scrcpy</strong>! 
+            guiscrcpy makes it amazingly easy to use scrcpy
+            right from your desktop, one click away!
+          </p>
+        </div>
+
+      </div>
+    </section>
+
+    <!-- INSTALL SECTION -->
+    <section id="main" class="section" >
+      <div class="ss-aboutbox">
+        <div class="ss-aboutbox-content">
+          <h1 class="title">Get it now! 🚀</h1>
+          <p class="subtitle">
+            guiscrcpy is available as precompiled binaries for almost all popular platforms, 
+            Windows (.exe), AppImages for Linux, and for macOS
+          </p>
+          <a class="button" href="https://github.com/srevinsaju/guiscrcpy/releases/latest"><i class="fa fa-download"></i><span class="sr-only"> Download</span>  Stable Release</a>
+          <a class="button" href="https://github.com/srevinsaju/guiscrcpy/releases/tag/continuous"><i class="fa fa-download"></i><span class="sr-only"> Download</span>  Beta Release</a>
+        </div>
+
+
+      </div>
+    </section>
+
+    <!-- FSF SECTION -->
+    <section id="main" class="section" >
+      <div class="ss-aboutbox">
+        <div class="ss-aboutbox-content">
+          <h1 class="title">Free as in Freedom</h1>
+          <h2 class="subtitle">Customizable. Open Source.</h1>
+          <p class="subtitle">
+            guiscrcpy is an GPL-3.0 Licensed Open source software.
+            You can get the complete source code at
+            <a href="https://github.com/srevinsaju/guiscrcpy">
+            <i class="fa fa-github"></i>  GitHub</a>. Feel free to
+            open an issue or create a pull request. Contributions are welcome!
+          </p>
+
+        </div>
+      </div>
+    </section>
+
+    <!-- scripts -->
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="./js/termynal.js" data-termynal-container="#termynal"></script>
+    <script src="./js/clipboard.js"></script>
+    <!-- <script src="./js/index.js" defer></script> -->
+    <script>
+      function onClickAnnounce() {
+        new ClipboardJS('#copyToClipboardButton').text("Copied!")
+      }
+
+      function darkTheme() {
+        $(":root").get(0).style.setProperty("--foreground-color", "#ffffff");
+        $(":root").get(0).style.setProperty("--foreground-color-2", "#fafafa");
+        $(":root").get(0).style.setProperty("--background-color", " #121212");
+        $(":root").get(0).style.setProperty("--background-color-2", " #000000");
+        $("label[for='themeSwitch']").html('<i class="fa fa-moon"></i><span class="sr-only">Dark Mode</span>')
+        $('#themeSwitch').prop('checked', true);
+        $("#bulma").attr("src","/img/made-with-bulma--white.png");
+        $(":root").get(0).style.setProperty("--cth", "0");
+      }
+
+      function lightTheme() {
+        $(":root").get(0).style.setProperty("--foreground-color", "#000");
+        $(":root").get(0).style.setProperty("--foreground-color-2", "#121212");
+        $(":root").get(0).style.setProperty("--background-color", " #fafafa");
+        $(":root").get(0).style.setProperty("--background-color-2", " #ffffff");
+        $("label[for='themeSwitch']").html('<i class="fa fa-sun"></i><span class="sr-only">Light Mode</span>')
+        $('#themeSwitch').prop('checked', false);
+        $("#bulma").attr("src","/img/made-with-bulma--black.png");
+        $(":root").get(0).style.setProperty("--cth", "255");
+      }
+
+      $(document).ready(function(){
+        const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+        if ( userPrefersDark ) {
+            darkTheme();
+        }
+
+        $('#themeSwitch').change(function() {
+          if (this.checked) {
+            darkTheme();
+          } else {
+            lightTheme();
+          };
+        });
+
+      });
+    </script>
+
+  </body>
+  <footer class="footer">
+    <div class="content has-text-centered">
+      <p>
+        &copy; <strong>Srevin Saju</strong> 2020.
+        <br>
+        This website is licensed under a <a href="http://creativecommons.org/licenses/by-nc-nd/4.0" target="_blank" rel="noreferrer">
+          Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.
+        </a>
+        <br>
+        <a href="https://bulma.io">
+          <img id="bulma" src="/img/made-with-bulma--black.png" alt="Made with Proudly built with Bulma" width="128" height="24" style="margin-bottom: 0;">
+        </a>
+        <br>
+        Icons provided by <a href="https://fontawesome.com/" target="_blank" rel="noreferrer">FontAwesome</a> and <a href="https://vedico-org.github.io/" target="_blank" rel="noreferrer">Vedico</a>
+        <br>
+
+      </p>
+      <a href="http://creativecommons.org/licenses/by-nc-nd/4.0" target="_blank" rel="noreferrer"><img src="img/by-nc-nd.svg" alt="CC-BY-NC-ND"></a>
+
+    </div>
+  </footer>
+
+</html>