www/index.html
<!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.srev.in" />
<meta property="og:image" content="https://srev.in/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/bulma@0.9.0/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://raw.githubusercontent.com/srevinsaju/guiscrcpy/main/docs/img/screenshot.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>
© <strong>Srevin Saju</strong> 2020-2023.
<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>