112 lines
No EOL
5.2 KiB
HTML
112 lines
No EOL
5.2 KiB
HTML
|
|
<!doctype html>
|
|
<html class="no-js" lang="en" dir="ltr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Syng.Rocks</title>
|
|
<link rel="stylesheet" href="css/foundation.min.css">
|
|
<link rel="stylesheet" href="css/app.css">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="top-content-section">
|
|
<div class="title-bar" style="background: transparent" data-responsive-toggle="main-menu" data-hide-for="medium">
|
|
<button class="menu-icon" type="button" data-toggle="main-menu"></button>
|
|
<div class="title-bar-title">Menu</div>
|
|
</div>
|
|
<div class="top-bar" id="main-menu" style="background: unset;">
|
|
<div class="top-bar-left">
|
|
<ul class="menu">
|
|
<li class="menu-text"><img src="images/rocks.syng.Syng.png" alt="Syng.Rocks! Logo" height=30></li>
|
|
|
|
<li><a href="index.html">Home</a></li>
|
|
|
|
<li><a href="install.html">Installation</a></li>
|
|
|
|
<li><a href="faq.html">FAQ</a></li>
|
|
|
|
<li><a href="privacy.html">Privacy Policy</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
<div class="top-bar-right">
|
|
<ul class="menu">
|
|
<li><a href="https://matrix.to/#/#syng:matrix.org" target="_blank"><img alt="Matrix" src="images/matrix.svg" style="max-height:24px;"></a></li>
|
|
<li><a href="https://floss.social/@syng" target="_blank"><img alt="Mastodon" src="images/mastodon.svg" style="max-height:24px;"></a></p></li>
|
|
<li><a href="https://github.com/christofsteel/syng" target="_blank"><img alt="Github" src="images/github.svg" style="max-height:24px; max-width:24px"></a></p></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-full-screen">
|
|
<div class="middle-content-section grid-container">
|
|
<div class="grid-x align-middle grid-padding-x">
|
|
<div class="cell large-6">
|
|
<p><img alt="Syng.Rocks! Overview" src="images/overview.png" /></p>
|
|
</div>
|
|
<div class="cell large-6">
|
|
<div class="hero-section-text">
|
|
<h1>Syng.Rocks!</h1>
|
|
<h5>Easily host karaoke events</h5>
|
|
<p>Syng.Rocks! is a karaoke app that allows you to host karaoke events without much hassle. Whether you have a big collection of karaoke songs, or just want to stream karaoke songs from YouTube, whether you want to sing with a couple of friends or with a crowd of over 100 people, Syng.Rocks! has you covered in a privacy-friendly manner. No need to register, no need to log in, Syng.Rocks! will never collect any personal data from you. You can even host your own server if you want to.</p>
|
|
<p><a class="button" href="https://flathub.org/apps/rocks.syng.Syng" target="_blank">Linux/Flatpak</a>
|
|
<a class="button" href="https://github.com/christofsteel/syng/releases" target="_blank">Windows</a>
|
|
<a class="button hollow" href="https://syng.rocks" target="_blank">Web Client</a>
|
|
<a class="button hollow" href="https://github.com/christofsteel/syng" target="_blank">Source Code</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="main-content-section">
|
|
<div class="grid-container">
|
|
<div class="grid-x grid-padding align-center grid-padding-x">
|
|
<div class="cell medium-4 text-right">
|
|
<h2>Start Singing</h2>
|
|
<p>If you only want to have a small YouTube based karaoke event, you can just download the app, share the generated QR Code and start singing. No registration, no login and no configuration required. </p>
|
|
</div>
|
|
<div class="cell medium-5 showcase-image">
|
|
<p><img alt="Syng.Rocks! Client" src="images/syng.png" /></p>
|
|
</div>
|
|
</div>
|
|
<div class="grid-x grid-padding-x">
|
|
<div class="cell medium-7 showcase-image">
|
|
<p><img alt="Syng.Rocks! Web Client" src="images/web-shadows.png" /></p>
|
|
</div>
|
|
<div class="cell medium-4">
|
|
<h2>Web client</h2>
|
|
<p>Let your guests join your karaoke event using the web client. They can use their browser on their own devices to search for songs and queue them up.
|
|
The web client also contains an admin mode, that allows for manual moderation of the song queue.</p>
|
|
</div>
|
|
</div>
|
|
<div class="grid-x grid-padding-x align-right">
|
|
<div class="cell medium-5 text-right">
|
|
<h2>Configure to your needs</h2>
|
|
<p>Syng.Rocks! allows for a lot of configuration options. You can set up your own song database, you can set up a <a href="faq.html#waiting-room">waiting room</a>, a set time the event ends and much more.</p>
|
|
</div>
|
|
<div class="cell medium-6 showcase-image">
|
|
<p><img alt="Syng.Rocks! Web Client" src="images/syng_advanced.png" /></p>
|
|
</div>
|
|
</div>
|
|
<div class="grid-x grid-padding-x">
|
|
<div class="cell medium-7 showcase-image">
|
|
<p><img alt="Syng.Rocks! Web Client" src="images/sources.svg" /></p>
|
|
</div>
|
|
<div class="cell medium-5">
|
|
<h2>Multiple Sources</h2>
|
|
<p>Syng.Rocks! supports multiple sources for karaoke songs. The default source is YouTube, but you can configure a remote S3 compatible server or simply a folder on your system. The client connects directly to the sources, no login data is ever shared with the server.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script src="js/vendor/jquery.js"></script>
|
|
<script src="js/vendor/what-input.js"></script>
|
|
<script src="js/vendor/foundation.min.js"></script>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html> |