FAQ and Install

This commit is contained in:
Christoph Stahl 2025-07-01 20:46:55 +02:00
parent 86031b5286
commit 5b727a408f
7 changed files with 959 additions and 12 deletions

View file

@ -7,15 +7,32 @@
border-radius: 10px; border-radius: 10px;
} }
.work-feature-block-image { .textleft .work-feature-block-image {
display: block; display: block;
margin-right: 0; margin-right: auto;
margin-left: auto; margin-left: auto;
max-height: 500px; max-height: 500px;
/* width: 100%; */ /* width: 100%; */
padding: 10px 0; padding: 10px 0;
} }
.textleft .text {
text-align: right;
}
.grid-container h1 {
border-bottom: 1px solid #0a0a0a;
}
.textright .work-feature-block-image {
display: block;
margin-left: auto;
margin-right: auto;
max-height: 500px;
/* width: 100%; */
padding: 10px 0;
}
.hero-full-screen { .hero-full-screen {
padding-top: 100px; padding-top: 100px;
margin-bottom: 100px; margin-bottom: 100px;
@ -33,7 +50,7 @@
justify-content: space-between; justify-content: space-between;
} }
body { body {
background: url("../images/background.jpg") center center no-repeat; background: url("../images/background_small.jpg") center center no-repeat;
background-size: cover; background-size: cover;
background-attachment: fixed; background-attachment: fixed;
} }

110
faq.html Normal file
View file

@ -0,0 +1,110 @@
<!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.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="top-content-section">
<div class="top-bar">
<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="#">Server</a></li>
<li><a href="#privacy">Privacy Policy</a></li>
</ul>
</div>
</div>
</div>
<div id="main-content-section" style="padding-top: 100px;">
<div class="grid-container">
<h1>FAQ</h1>
<dl>
<dt>Does Syng.Rocks! cost money?</dt>
<dd>
No, Syng.Rocks! is free software and licensed under the GNU Affero General Public License v3.0 (AGPL-3.0). You can use it for free without any limitations.
</dd>
<dt>Can you add song XYZ?</dt>
<dd>
Syng.Rocks! does not host any songs itself.
The client fetches songs from YouTube or any of your configured sources.
</dd>
<dt>What are sources?</dt>
<dd>
Since Syng.Rocks! does not host any songs itself, songs played by the playback client, need to come from external sources. Currently the following sources can be added:
<ul>
<li>YouTube</li>
<li>A S3 compatible server</li>
<li>A local directory</li>
</ul>
The sources are accessed from the playback client directly, the server is mostly unaware of the sources. It currently is sent a list of files to utilize the search feature.
</dd>
<dt>What file format can Syng.Rocks! play?</dt>
<dd>
Syng.Rocks! uses <a href="https://mpv.io" target="_blank">MPV</a> to play the karaoke songs, so it supports most video formats including <code>cdg+mp3</code>.
</dd>
<dt>What do you mean by <emph>Playback Client</emph>,<emph>Web Client</emph> and <emph>Server</emph>?</dt>
<dd>
<p></p>The <emph>Playback Client</emph> is the application that plays the songs and displays the lyrics. It is a desktop application.
The <emph>Web Client</emph> is the web application that allows you to manage the queue and search for songs. It is used by the guests to add songs to the queue.
The <emph>Server</emph> is the backend that manages the queue and handles connection between web clients and playback clients.</p>
<p>
If you only want to host a karaoke event, you only need the playback client.
The server is optional, as you can use the public server at <a href="https://syng.rocks" target="_blank">syng.rocks</a>.
</p>
</dd>
<dt>Can I use Syng.Rocks! without internet?</dt>
<dd>
Yes and no. The playback client needs to connect to a server instance. While you can host the server yourself in your intranet, the featureset will be limited, as some source (such as YouTube) need the playback client to reach YouTube. You can however use local and s3 sources, that are reachable from the playback client.
</dd>
<dt>Can I use Syng.Rocks! without a server?</dt>
<dd>
You can use the public server at <a href="https://syng.rocks" target="_blank">syng.rocks</a> to host your karaoke events. No need to roll up your own server.
</dd>
<dt>Can I host my own server?</dt>
<dd>
Yes, you can host your own server. The server is available as a Docker image on GitHub, or you can install it using the Python Package Index (PyPI) package <code>syng[server]</code>.
For more information, see the <a href="install.html">installation instructions</a>.
</dd>
<dt><a id="waiting-room"></a>What is the waiting room?</dt>
<dd>
The waiting room is a feature that allows you to limit the amount of songs a guest can have in the queue.
If the waiting room is enabled, guests can only add songs to the queue if they have no songs in the queue. All additional songs are placed in a waiting room and automatically leave the queue once no songs of the guest are left in the queue.
</dd>
<dt>What data do you store?</dt>
<dd>
Syng.Rocks! does not store any personal data. The server only stores the current state of the queue.
If you use the public server at <a href="https://syng.rocks" target="_blank">syng.rocks</a>, the server will also store your IP address for a limited time to prevent abuse.
For more information, see the <a href="#privacy">privacy policy</a>.
</dd>
<dt>I cannot connect to <a href="https://syng.rocks" target="_blank">https://syng.rocks</a>.</dt>
<dd>
Sometimes the server is down for maintenance. Check the official <a href="https://floss.social/@syng" target="_blank">Mastodon account</a> for announcements. Also check, if your client is up to date. The server is only compatible with the latest release.
</dd>
<dt>What is the restricted mode of the server?</dt>
<dd>
When the server is in restricted mode, <i>server side search</i> is only available to authenticated rooms. For other rooms, a search request is forwarded to the playback client and results are then send back to the web client.
</dd>
<dt>Something does not work, or I have questions not covered here</dt>
<dd>
Feel free to open an issue on the official issue tracker on <a href="https://github.com/christofsteel/syng/issues" target="_blank">GitHub</a> or reach out to us at our official Mastodon account: <a href="https://floss.social/@syng" target="_blank">@syng@floss.social</a> account or join our official matrix room: <a href="https://matrix.to/#/#syng:matrix.org" target="_blank">#syng:matrix.org</a>.
</dd>
</dl>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>

BIN
images/background_small.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 348 KiB

BIN
images/sources.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 183 KiB

742
images/sources.svg Normal file
View file

@ -0,0 +1,742 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="210.547mm"
height="87.391151mm"
viewBox="0 0 210.547 87.391151"
version="1.1"
id="svg1"
xml:space="preserve"
inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
sodipodi:docname="sources.svg"
inkscape:export-filename="sources.png"
inkscape:export-xdpi="266.60046"
inkscape:export-ydpi="266.60046"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:i="&amp;ns_ai;"
xmlns:ns="&amp;#38;ns_ai;"><sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
inkscape:zoom="0.54440085"
inkscape:cx="451.87291"
inkscape:cy="-17.450377"
inkscape:window-width="1440"
inkscape:window-height="888"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg1" /><defs
id="defs1"><clipPath
id="_clipPath_iJhCLJIxvnBD6H216wD2nheMtI7NQsNe"><rect
width="48"
height="48"
id="rect1"
x="0"
y="0" /></clipPath><clipPath
id="_clipPath_iJhCLJIxvnBD6H216wD2nheMtI7NQsNe-3"><rect
width="48"
height="48"
id="rect1-5"
x="0"
y="0" /></clipPath><filter
style="color-interpolation-filters:sRGB"
inkscape:label="Blur"
id="filter44"
x="-0.039903544"
y="-0.020766242"
width="1.0798071"
height="1.0415325"><feGaussianBlur
stdDeviation="2 2"
result="fbSourceGraphic"
id="feGaussianBlur44" /><feColorMatrix
result="fbSourceGraphicAlpha"
in="fbSourceGraphic"
values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
id="feColorMatrix78" /><feGaussianBlur
id="feGaussianBlur78"
stdDeviation="3 3"
result="blur"
in="fbSourceGraphic" /></filter><filter
style="color-interpolation-filters:sRGB"
inkscape:label="Blur"
id="filter45"
x="-0.20689655"
y="-0.3"
width="1.4137931"
height="1.6"><feGaussianBlur
stdDeviation="2 2"
result="blur"
id="feGaussianBlur45" /></filter><filter
style="color-interpolation-filters:sRGB"
inkscape:label="Blur"
id="filter46"
x="-0.025940825"
y="-0.019008118"
width="1.0518816"
height="1.0380162"><feGaussianBlur
stdDeviation="2 2"
result="fbSourceGraphic"
id="feGaussianBlur46" /><feColorMatrix
result="fbSourceGraphicAlpha"
in="fbSourceGraphic"
values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
id="feColorMatrix77" /><feGaussianBlur
id="feGaussianBlur77"
stdDeviation="3 3"
result="blur"
in="fbSourceGraphic" /></filter></defs><g
clip-path="url(#_clipPath_iJhCLJIxvnBD6H216wD2nheMtI7NQsNe-3)"
inkscape:label="Design.svg"
transform="matrix(2.9374705,0,0,3.4117573,-19.762837,-35.044531)"
id="g2-9"
style="fill:#000000;filter:url(#filter45)"><rect
x="19.393"
y="19.603001"
width="9.8009996"
height="9.0889997"
fill="#ffffff"
id="rect2-1"
style="fill:#000000" /><path
d="m 35.2,18.5 c 0,-0.1 0,-0.2 -0.1,-0.3 0,0 0,-0.1 0,-0.1 C 34.8,17.2 34,16.6 33,16.6 h 0.2 c 0,0 -3.9,-0.6 -9.2,-0.6 -5.2,0 -9.2,0.6 -9.2,0.6 H 15 c -1,0 -1.8,0.6 -2.1,1.5 0,0 0,0.1 0,0.1 0,0.1 0,0.2 -0.1,0.3 -0.1,1 -0.4,3.1 -0.4,5.5 0,2.4 0.3,4.5 0.4,5.5 0,0.1 0,0.2 0.1,0.3 0,0 0,0.1 0,0.1 0.3,0.9 1.1,1.5 2.1,1.5 h -0.2 c 0,0 3.9,0.6 9.2,0.6 5.2,0 9.2,-0.6 9.2,-0.6 H 33 c 1,0 1.8,-0.6 2.1,-1.5 0,0 0,-0.1 0,-0.1 0,-0.1 0,-0.2 0.1,-0.3 0.1,-1 0.4,-3.1 0.4,-5.5 0,-2.4 -0.2,-4.5 -0.4,-5.5 z m -7.8,6 -4.7,3.4 C 22.6,28 22.5,28 22.4,28 c -0.1,0 -0.2,0 -0.3,-0.1 -0.2,-0.1 -0.3,-0.3 -0.3,-0.5 v -6.8 c 0,-0.2 0.1,-0.4 0.3,-0.5 0.2,-0.1 0.4,-0.1 0.6,0 l 4.7,3.4 c 0.1,0.1 0.2,0.3 0.2,0.5 0.1,0.2 0,0.4 -0.2,0.5 z"
fill="#ca3737"
id="path2-2"
style="fill:#000000" /></g><switch
id="switch3-7"
transform="matrix(0.14520157,0,0,0.14520157,146.27311,-11.962151)"
style="fill:#000000;filter:url(#filter44)">
<foreignObject
requiredExtensions="http://ns.adobe.com/AdobeIllustrator/10.0/"
x="0"
y="0"
width="1"
height="1">
</foreignObject>
<g
ns:extraneous="self"
id="g3-0"
style="fill:#000000">
<g
id="g2-3-9"
style="fill:#000000">
<path
fill="#f15a29"
d="m 319.096,122.504 c 0,0 56.734,91.377 75.696,123.853 0.306,0.529 0.176,1.228 -0.28,1.684 -0.575,0.57 -1.441,0.637 -2.011,0.062 L 294.745,145.864 Z"
id="path1-3"
style="fill:#000000" />
<path
d="m 151.967,455.475 c 16.593,-35.104 38.975,-66.865 66.674,-94.564 10.535,-10.53 21.656,-20.288 33.321,-29.253 v 72.348 z m -57.734,66.818 157.729,-80.297 v 183.557 l 35.544,46.691 V 423.713 l 21.589,-11.105 c 9.945,-4.996 19.272,-11.644 27.569,-19.946 41.115,-41.11 41.768,-107.467 1.824,-149.293 l -81.484,-84.894 c -3.249,-3.472 -4.954,-8.017 -4.804,-12.795 0.15,-4.809 2.161,-9.276 5.659,-12.572 7.214,-6.783 18.708,-6.327 25.491,0.881 l 11.396,11.878 24.351,-23.361 C 290.326,85.189 255.123,89.874 234.732,108.54 c -10.053,9.463 -15.826,22.278 -16.262,36.083 -0.435,13.826 4.545,26.978 14.013,37.037 l 0.109,0.119 81.909,85.324 c 26.937,28.668 26.398,73.758 -1.622,101.772 -4.369,4.369 -9.157,8.069 -14.23,11.105 l -11.142,5.731 V 269.746 c -34.078,17.562 -65.155,40.125 -92.553,67.529 -34.124,34.119 -60.916,73.861 -79.634,118.117 -9.184,21.708 -16.221,44.064 -21.087,66.901"
id="path2-6-6"
style="fill:#000000" />
</g>
</g>
</switch><g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-4.2133262,-15.880973)"><g
clip-path="url(#_clipPath_iJhCLJIxvnBD6H216wD2nheMtI7NQsNe)"
inkscape:label="Design.svg"
transform="matrix(2.9374705,0,0,3.4117573,-17.394632,-23.446126)"
id="g2"><rect
x="19.393"
y="19.603001"
width="9.8009996"
height="9.0889997"
fill="#ffffff"
id="rect2" /><path
d="m 35.2,18.5 c 0,-0.1 0,-0.2 -0.1,-0.3 0,0 0,-0.1 0,-0.1 C 34.8,17.2 34,16.6 33,16.6 h 0.2 c 0,0 -3.9,-0.6 -9.2,-0.6 -5.2,0 -9.2,0.6 -9.2,0.6 H 15 c -1,0 -1.8,0.6 -2.1,1.5 0,0 0,0.1 0,0.1 0,0.1 0,0.2 -0.1,0.3 -0.1,1 -0.4,3.1 -0.4,5.5 0,2.4 0.3,4.5 0.4,5.5 0,0.1 0,0.2 0.1,0.3 0,0 0,0.1 0,0.1 0.3,0.9 1.1,1.5 2.1,1.5 h -0.2 c 0,0 3.9,0.6 9.2,0.6 5.2,0 9.2,-0.6 9.2,-0.6 H 33 c 1,0 1.8,-0.6 2.1,-1.5 0,0 0,-0.1 0,-0.1 0,-0.1 0,-0.2 0.1,-0.3 0.1,-1 0.4,-3.1 0.4,-5.5 0,-2.4 -0.2,-4.5 -0.4,-5.5 z m -7.8,6 -4.7,3.4 C 22.6,28 22.5,28 22.4,28 c -0.1,0 -0.2,0 -0.3,-0.1 -0.2,-0.1 -0.3,-0.3 -0.3,-0.5 v -6.8 c 0,-0.2 0.1,-0.4 0.3,-0.5 0.2,-0.1 0.4,-0.1 0.6,0 l 4.7,3.4 c 0.1,0.1 0.2,0.3 0.2,0.5 0.1,0.2 0,0.4 -0.2,0.5 z"
fill="#ca3737"
id="path2" /></g><switch
id="switch3"
transform="matrix(0.14520157,0,0,0.14520157,149.58394,2.7783219)">
<foreignObject
requiredExtensions="http://ns.adobe.com/AdobeIllustrator/10.0/"
x="0"
y="0"
width="1"
height="1">
</foreignObject>
<g
i:extraneous="self"
id="g3">
<g
id="g2-3">
<path
fill="#f15a29"
d="m 319.096,122.504 c 0,0 56.734,91.377 75.696,123.853 0.306,0.529 0.176,1.228 -0.28,1.684 -0.575,0.57 -1.441,0.637 -2.011,0.062 L 294.745,145.864 Z"
id="path1" />
<path
d="m 151.967,455.475 c 16.593,-35.104 38.975,-66.865 66.674,-94.564 10.535,-10.53 21.656,-20.288 33.321,-29.253 v 72.348 z m -57.734,66.818 157.729,-80.297 v 183.557 l 35.544,46.691 V 423.713 l 21.589,-11.105 c 9.945,-4.996 19.272,-11.644 27.569,-19.946 41.115,-41.11 41.768,-107.467 1.824,-149.293 l -81.484,-84.894 c -3.249,-3.472 -4.954,-8.017 -4.804,-12.795 0.15,-4.809 2.161,-9.276 5.659,-12.572 7.214,-6.783 18.708,-6.327 25.491,0.881 l 11.396,11.878 24.351,-23.361 C 290.326,85.189 255.123,89.874 234.732,108.54 c -10.053,9.463 -15.826,22.278 -16.262,36.083 -0.435,13.826 4.545,26.978 14.013,37.037 l 0.109,0.119 81.909,85.324 c 26.937,28.668 26.398,73.758 -1.622,101.772 -4.369,4.369 -9.157,8.069 -14.23,11.105 l -11.142,5.731 V 269.746 c -34.078,17.562 -65.155,40.125 -92.553,67.529 -34.124,34.119 -60.916,73.861 -79.634,118.117 -9.184,21.708 -16.221,44.064 -21.087,66.901"
id="path2-6" />
</g>
</g>
</switch></g><g
inkscape:label="hdd.svg"
id="layer1-1-0"
transform="matrix(0.11642098,0,0,0.11642098,64.699557,-2.316239)"
style="fill:#000000;filter:url(#filter46)">
<rect
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="rect11036-6"
width="462.5799"
height="631.18384"
x="260.13293"
y="79.689705"
ry="10"
rx="10" />
<path
style="fill:#000000;fill-opacity:1;stroke:none"
d="m 336.50948,472.01841 v 35.6662 l -39.2688,33.8649 v 65.9284 l 35.8463,35.8464 v 26.8397 h 285.5098 l 60.3443,-60.3444 v -66.4688 l -36.8371,-36.8372 v -34.4952 z"
id="path11038-2"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccccccc" />
<path
style="fill:#000000;fill-opacity:1;stroke:none"
d="m 518.83658,541.83781 v 27.7658 h -28.5315 v 83.5567 h 112.3426 l 37.8298,-37.8299 v -48.0193 l 17.7686,-17.7686 -23.8824,-23.8824 -16.9405,16.1777 z"
id="path11042-6"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccc" />
<path
style="fill:#000000;fill-opacity:1;stroke:none"
d="m 311.29088,535.78531 v 67.3695 l 56.0212,56.0211 h 68.2702 v -40.1696 h -64.8476 l -19.8146,-19.8144 v -63.4066 z"
id="path11045-1"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccc" />
<circle
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#333c45;stroke-width:4.70599;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path11047-8"
transform="matrix(3.187429,0,0,3.187429,19262.69,14995.327)"
cx="-5889.75"
cy="-4606.25"
r="67.25" />
<circle
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#333c45;stroke-width:12.2273;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path11049-7"
transform="matrix(0.81784386,0,0,0.81784386,5306.4261,4080.4251)"
cx="-5889.75"
cy="-4606.25"
r="67.25" />
<circle
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path11051-9"
transform="matrix(4.8829271,0,0,4.8829271,29486.67,22593.13)"
cx="-5960"
cy="-4506.6875"
r="7.5625" />
<path
style="fill:#000000;fill-opacity:1;stroke:none"
d="m 554.46978,419.78001 -144.6591,194.3395 -52.2033,-52.2035 z"
id="path11053-2"
inkscape:connector-curvature="0"
inkscape:transform-center-x="-67.882251"
inkscape:transform-center-y="-69.296465" />
<circle
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#333c45;stroke-width:1.15912;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path11055-0"
transform="matrix(3.4509084,0,0,3.4509084,20951.838,16139.469)"
cx="-5960"
cy="-4506.6875"
r="7.5625" />
<path
style="fill:#000000;fill-opacity:1;stroke:none"
d="m 552.20808,548.71451 v 44.3257 h -52.9869 v 51.7136 h 99.0959 l 33.3717,-33.3719 v -18.851 h -25.9841 v -43.8164 z"
id="path11057-2"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccccc" />
<rect
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="rect11059-3"
width="29.361576"
height="29.901972"
x="564.27551"
y="555.67114" />
<circle
transform="matrix(2.8821179,0,0,2.8821179,17559.96,13576.481)"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path11062-7"
cx="-5917.644"
cy="-4508.8921"
r="2.1655145" />
<circle
id="path11065-5"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(2.8821179,0,0,2.8821179,17691.848,13542.296)"
cx="-5917.644"
cy="-4508.8921"
r="2.1655145" />
<g
transform="matrix(-1,0,0,1,-4012.4724,6304.2598)"
id="g11089-9"
style="fill:#000000">
<g
style="fill:#000000;fill-opacity:1"
id="g11091-2"
transform="matrix(2.8821179,0,0,2.8821179,12565.448,7645.2124)">
<path
inkscape:connector-curvature="0"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m -4302.875,-6966.4375 c -8.7807,0 -15.9063,7.1255 -15.9062,15.9063 0,8.7807 7.1255,15.9062 15.9062,15.9062 h 30.2812 v -31.8125 z"
transform="matrix(-0.34696707,0,0,0.34696707,-7485.2033,-2258.3505)"
id="rect11093-2" />
</g>
<circle
transform="matrix(3.9132938,0,0,3.9132938,18734.2,12451.798)"
id="path11097-8"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
cx="-5989.9604"
cy="-4667.6646"
r="2.2894223" />
</g>
<path
style="fill:#000000;stroke:#fab82e;stroke-width:4.84193;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 534.91288,592.01131 c 0,0 -52.2205,-83.9328 -114.2875,11.3002"
id="path11102-9"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<circle
transform="matrix(2.8821179,0,0,2.8821179,17544.878,13273.391)"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path11105-7"
cx="-5917.644"
cy="-4508.8921"
r="2.1655145" />
<circle
id="path11107-3"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(2.8821179,0,0,2.8821179,17543.166,13343.54)"
cx="-5917.644"
cy="-4508.8921"
r="2.1655145" />
<circle
inkscape:transform-center-x="-34.999423"
inkscape:transform-center-y="-0.00011176152"
id="path11110-6"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(0,2.8821179,-2.8821179,0,-12470.629,17368.58)"
cx="-5917.644"
cy="-4508.8921"
r="2.1655145" />
<circle
inkscape:transform-center-x="34.99928"
inkscape:transform-center-y="-0.00046723847"
id="path11114-1"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(0,-2.8821179,2.8821179,0,13449.69,-16742.117)"
cx="-5917.644"
cy="-4508.8921"
r="2.1655145" />
<circle
id="path11118-2"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(2.8821179,0,0,2.8821179,17544.878,13273.391)"
cx="-5917.644"
cy="-4508.8921"
r="2.1655145" />
<g
id="g11120-9"
transform="matrix(0,1,1,0,6516.7671,4810.6757)"
style="fill:#000000">
<g
transform="matrix(2.0379651,-2.0379651,2.0379651,2.0379651,17022.519,-8513.1716)"
id="g11123-3"
style="fill:#000000;fill-opacity:1">
<path
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m -4298.6562,-7356.7812 c -8.7807,0 -15.9063,7.1255 -15.9063,15.9062 0,8.7704 7.1085,15.8895 15.875,15.9062 6.164,0 12.3339,0 18.5,0 l 8.8125,-8.8124 c 1.9587,-1.9587 2.9688,-4.5377 2.9688,-7.0938 0,-2.5562 -1.0101,-5.1038 -2.9688,-7.0625 l -8.8125,-8.8125 z"
transform="matrix(-0.34696707,0,0,0.34696707,-7483.7515,-2122.9129)"
id="path11126-1"
inkscape:connector-curvature="0"
sodipodi:nodetypes="csccssscc" />
</g>
<circle
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path11134-9"
transform="matrix(2.7671166,-2.7671166,2.7671166,2.7671166,24783.255,-9476.3687)"
cx="-5989.9604"
cy="-4667.6646"
r="2.2894223" />
</g>
<g
id="g11160-4"
transform="translate(4995.3295,6304.2598)"
style="fill:#000000">
<g
transform="matrix(2.8821179,0,0,2.8821179,12565.448,7645.2124)"
id="g11163-7"
style="fill:#000000;fill-opacity:1">
<path
id="path11165-8"
transform="matrix(-0.34696707,0,0,0.34696707,-7485.2033,-2258.3505)"
d="m -4302.875,-6966.4375 c -8.7807,0 -15.9063,7.1255 -15.9062,15.9063 0,8.7807 7.1255,15.9062 15.9062,15.9062 h 30.2812 v -31.8125 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
inkscape:connector-curvature="0" />
</g>
<circle
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path11167-4"
transform="matrix(3.9132938,0,0,3.9132938,18734.2,12451.798)"
cx="-5989.9604"
cy="-4667.6646"
r="2.2894223" />
</g>
<g
transform="rotate(90,-5172.2358,-361.68515)"
id="g11171-5"
style="fill:#000000">
<g
style="fill:#000000;fill-opacity:1"
id="g11173-0"
transform="matrix(2.0379651,-2.0379651,2.0379651,2.0379651,17022.519,-8513.1716)">
<path
sodipodi:nodetypes="csccssscc"
inkscape:connector-curvature="0"
id="path11175-3"
transform="matrix(-0.34696707,0,0,0.34696707,-7483.7515,-2122.9129)"
d="m -4298.6562,-7356.7812 c -8.7807,0 -15.9063,7.1255 -15.9063,15.9062 0,8.7704 7.1085,15.8895 15.875,15.9062 6.164,0 12.3339,0 18.5,0 l 8.8125,-8.8124 c 1.9587,-1.9587 2.9688,-4.5377 2.9688,-7.0938 0,-2.5562 -1.0101,-5.1038 -2.9688,-7.0625 l -8.8125,-8.8125 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" />
</g>
<circle
transform="matrix(2.7671166,-2.7671166,2.7671166,2.7671166,24783.255,-9476.3687)"
id="path11177-6"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
cx="-5989.9604"
cy="-4667.6646"
r="2.2894223" />
</g>
<g
transform="rotate(-90,1248.3275,-5268.4396)"
id="g11179-1"
style="fill:#000000">
<g
style="fill:#000000;fill-opacity:1"
id="g11181-0"
transform="matrix(2.0379651,-2.0379651,2.0379651,2.0379651,17022.519,-8513.1716)">
<path
sodipodi:nodetypes="csccssscc"
inkscape:connector-curvature="0"
id="path11183-6"
transform="matrix(-0.34696707,0,0,0.34696707,-7483.7515,-2122.9129)"
d="m -4298.6562,-7356.7812 c -8.7807,0 -15.9063,7.1255 -15.9063,15.9062 0,8.7704 7.1085,15.8895 15.875,15.9062 6.164,0 12.3339,0 18.5,0 l 8.8125,-8.8124 c 1.9587,-1.9587 2.9688,-4.5377 2.9688,-7.0938 0,-2.5562 -1.0101,-5.1038 -2.9688,-7.0625 l -8.8125,-8.8125 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" />
</g>
<circle
transform="matrix(2.7671166,-2.7671166,2.7671166,2.7671166,24783.255,-9476.3687)"
id="path11185-3"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
cx="-5989.9604"
cy="-4667.6646"
r="2.2894223" />
</g>
<g
id="g11187-2"
transform="matrix(0,-1,-1,0,-5533.921,-4020.1121)"
style="fill:#000000">
<g
transform="matrix(2.0379651,-2.0379651,2.0379651,2.0379651,17022.519,-8513.1716)"
id="g11189-0"
style="fill:#000000;fill-opacity:1">
<path
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m -4298.6562,-7356.7812 c -8.7807,0 -15.9063,7.1255 -15.9063,15.9062 0,8.7704 7.1085,15.8895 15.875,15.9062 6.164,0 12.3339,0 18.5,0 l 8.8125,-8.8124 c 1.9587,-1.9587 2.9688,-4.5377 2.9688,-7.0938 0,-2.5562 -1.0101,-5.1038 -2.9688,-7.0625 l -8.8125,-8.8125 z"
transform="matrix(-0.34696707,0,0,0.34696707,-7483.7515,-2122.9129)"
id="path11191-6"
inkscape:connector-curvature="0"
sodipodi:nodetypes="csccssscc" />
</g>
<circle
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path11193-1"
transform="matrix(2.7671166,-2.7671166,2.7671166,2.7671166,24783.255,-9476.3687)"
cx="-5989.9604"
cy="-4667.6646"
r="2.2894223" />
</g>
</g><g
inkscape:label="hdd.svg"
id="layer1-1"
transform="matrix(0.11642098,0,0,0.11642098,63.797057,-3.456739)">
<rect
style="fill:#414d5b;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="rect11036"
width="462.5799"
height="631.18384"
x="260.13293"
y="79.689705"
ry="10"
rx="10" />
<path
style="fill:#333c45;fill-opacity:1;stroke:none"
d="m 336.50948,472.01841 v 35.6662 l -39.2688,33.8649 v 65.9284 l 35.8463,35.8464 v 26.8397 h 285.5098 l 60.3443,-60.3444 v -66.4688 l -36.8371,-36.8372 v -34.4952 z"
id="path11038"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccccccc" />
<path
style="fill:#eaeaea;fill-opacity:1;stroke:none"
d="m 518.83658,541.83781 v 27.7658 h -28.5315 v 83.5567 h 112.3426 l 37.8298,-37.8299 v -48.0193 l 17.7686,-17.7686 -23.8824,-23.8824 -16.9405,16.1777 z"
id="path11042"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccc" />
<path
style="fill:#eaeaea;fill-opacity:1;stroke:none"
d="m 311.29088,535.78531 v 67.3695 l 56.0212,56.0211 h 68.2702 v -40.1696 h -64.8476 l -19.8146,-19.8144 v -63.4066 z"
id="path11045"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccc" />
<circle
style="fill:#eaeaea;fill-opacity:1;fill-rule:nonzero;stroke:#333c45;stroke-width:4.70599;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path11047"
transform="matrix(3.187429,0,0,3.187429,19262.69,14995.327)"
cx="-5889.75"
cy="-4606.25"
r="67.25" />
<circle
style="fill:#eaeaea;fill-opacity:1;fill-rule:nonzero;stroke:#333c45;stroke-width:12.2273;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path11049"
transform="matrix(0.81784386,0,0,0.81784386,5306.4261,4080.4251)"
cx="-5889.75"
cy="-4606.25"
r="67.25" />
<circle
style="fill:#f9794c;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path11051"
transform="matrix(4.8829271,0,0,4.8829271,29486.67,22593.13)"
cx="-5960"
cy="-4506.6875"
r="7.5625" />
<path
style="fill:#f9794c;fill-opacity:1;stroke:none"
d="m 554.46978,419.78001 -144.6591,194.3395 -52.2033,-52.2035 z"
id="path11053"
inkscape:connector-curvature="0"
inkscape:transform-center-x="-67.882251"
inkscape:transform-center-y="-69.296465" />
<circle
style="fill:#eaeaea;fill-opacity:1;fill-rule:nonzero;stroke:#333c45;stroke-width:1.15912;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path11055"
transform="matrix(3.4509084,0,0,3.4509084,20951.838,16139.469)"
cx="-5960"
cy="-4506.6875"
r="7.5625" />
<path
style="fill:#f9cd54;fill-opacity:1;stroke:none"
d="m 552.20808,548.71451 v 44.3257 h -52.9869 v 51.7136 h 99.0959 l 33.3717,-33.3719 v -18.851 h -25.9841 v -43.8164 z"
id="path11057"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccccc" />
<rect
style="fill:#3e3e40;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="rect11059"
width="29.361576"
height="29.901972"
x="564.27551"
y="555.67114" />
<circle
transform="matrix(2.8821179,0,0,2.8821179,17559.96,13576.481)"
style="fill:#76a8d4;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path11062"
cx="-5917.644"
cy="-4508.8921"
r="2.1655145" />
<circle
id="path11065"
style="fill:#76a8d4;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(2.8821179,0,0,2.8821179,17691.848,13542.296)"
cx="-5917.644"
cy="-4508.8921"
r="2.1655145" />
<g
transform="matrix(-1,0,0,1,-4012.4724,6304.2598)"
id="g11089">
<g
style="fill:#eaeaea;fill-opacity:1"
id="g11091"
transform="matrix(2.8821179,0,0,2.8821179,12565.448,7645.2124)">
<path
inkscape:connector-curvature="0"
style="fill:#eaeaea;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m -4302.875,-6966.4375 c -8.7807,0 -15.9063,7.1255 -15.9062,15.9063 0,8.7807 7.1255,15.9062 15.9062,15.9062 h 30.2812 v -31.8125 z"
transform="matrix(-0.34696707,0,0,0.34696707,-7485.2033,-2258.3505)"
id="rect11093" />
</g>
<circle
transform="matrix(3.9132938,0,0,3.9132938,18734.2,12451.798)"
id="path11097"
style="fill:#353c46;fill-opacity:1;fill-rule:nonzero;stroke:none"
cx="-5989.9604"
cy="-4667.6646"
r="2.2894223" />
</g>
<path
style="fill:none;stroke:#fab82e;stroke-width:4.84193;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 534.91288,592.01131 c 0,0 -52.2205,-83.9328 -114.2875,11.3002"
id="path11102"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<circle
transform="matrix(2.8821179,0,0,2.8821179,17544.878,13273.391)"
style="fill:#cccccc;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path11105"
cx="-5917.644"
cy="-4508.8921"
r="2.1655145" />
<circle
id="path11107"
style="fill:#76a8d4;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(2.8821179,0,0,2.8821179,17543.166,13343.54)"
cx="-5917.644"
cy="-4508.8921"
r="2.1655145" />
<circle
inkscape:transform-center-x="-34.999423"
inkscape:transform-center-y="-0.00011176152"
id="path11110"
style="fill:#76a8d4;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(0,2.8821179,-2.8821179,0,-12470.629,17368.58)"
cx="-5917.644"
cy="-4508.8921"
r="2.1655145" />
<circle
inkscape:transform-center-x="34.99928"
inkscape:transform-center-y="-0.00046723847"
id="path11114"
style="fill:#76a8d4;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(0,-2.8821179,2.8821179,0,13449.69,-16742.117)"
cx="-5917.644"
cy="-4508.8921"
r="2.1655145" />
<circle
id="path11118"
style="fill:#76a8d4;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(2.8821179,0,0,2.8821179,17544.878,13273.391)"
cx="-5917.644"
cy="-4508.8921"
r="2.1655145" />
<g
id="g11120"
transform="matrix(0,1,1,0,6516.7671,4810.6757)">
<g
transform="matrix(2.0379651,-2.0379651,2.0379651,2.0379651,17022.519,-8513.1716)"
id="g11123"
style="fill:#eaeaea;fill-opacity:1">
<path
style="fill:#eaeaea;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m -4298.6562,-7356.7812 c -8.7807,0 -15.9063,7.1255 -15.9063,15.9062 0,8.7704 7.1085,15.8895 15.875,15.9062 6.164,0 12.3339,0 18.5,0 l 8.8125,-8.8124 c 1.9587,-1.9587 2.9688,-4.5377 2.9688,-7.0938 0,-2.5562 -1.0101,-5.1038 -2.9688,-7.0625 l -8.8125,-8.8125 z"
transform="matrix(-0.34696707,0,0,0.34696707,-7483.7515,-2122.9129)"
id="path11126"
inkscape:connector-curvature="0"
sodipodi:nodetypes="csccssscc" />
</g>
<circle
style="fill:#353c46;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path11134"
transform="matrix(2.7671166,-2.7671166,2.7671166,2.7671166,24783.255,-9476.3687)"
cx="-5989.9604"
cy="-4667.6646"
r="2.2894223" />
</g>
<g
id="g11160"
transform="translate(4995.3295,6304.2598)">
<g
transform="matrix(2.8821179,0,0,2.8821179,12565.448,7645.2124)"
id="g11163"
style="fill:#eaeaea;fill-opacity:1">
<path
id="path11165"
transform="matrix(-0.34696707,0,0,0.34696707,-7485.2033,-2258.3505)"
d="m -4302.875,-6966.4375 c -8.7807,0 -15.9063,7.1255 -15.9062,15.9063 0,8.7807 7.1255,15.9062 15.9062,15.9062 h 30.2812 v -31.8125 z"
style="fill:#eaeaea;fill-opacity:1;fill-rule:nonzero;stroke:none"
inkscape:connector-curvature="0" />
</g>
<circle
style="fill:#353c46;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path11167"
transform="matrix(3.9132938,0,0,3.9132938,18734.2,12451.798)"
cx="-5989.9604"
cy="-4667.6646"
r="2.2894223" />
</g>
<g
transform="rotate(90,-5172.2358,-361.68515)"
id="g11171">
<g
style="fill:#eaeaea;fill-opacity:1"
id="g11173"
transform="matrix(2.0379651,-2.0379651,2.0379651,2.0379651,17022.519,-8513.1716)">
<path
sodipodi:nodetypes="csccssscc"
inkscape:connector-curvature="0"
id="path11175"
transform="matrix(-0.34696707,0,0,0.34696707,-7483.7515,-2122.9129)"
d="m -4298.6562,-7356.7812 c -8.7807,0 -15.9063,7.1255 -15.9063,15.9062 0,8.7704 7.1085,15.8895 15.875,15.9062 6.164,0 12.3339,0 18.5,0 l 8.8125,-8.8124 c 1.9587,-1.9587 2.9688,-4.5377 2.9688,-7.0938 0,-2.5562 -1.0101,-5.1038 -2.9688,-7.0625 l -8.8125,-8.8125 z"
style="fill:#eaeaea;fill-opacity:1;fill-rule:nonzero;stroke:none" />
</g>
<circle
transform="matrix(2.7671166,-2.7671166,2.7671166,2.7671166,24783.255,-9476.3687)"
id="path11177"
style="fill:#353c46;fill-opacity:1;fill-rule:nonzero;stroke:none"
cx="-5989.9604"
cy="-4667.6646"
r="2.2894223" />
</g>
<g
transform="rotate(-90,1248.3275,-5268.4396)"
id="g11179">
<g
style="fill:#eaeaea;fill-opacity:1"
id="g11181"
transform="matrix(2.0379651,-2.0379651,2.0379651,2.0379651,17022.519,-8513.1716)">
<path
sodipodi:nodetypes="csccssscc"
inkscape:connector-curvature="0"
id="path11183"
transform="matrix(-0.34696707,0,0,0.34696707,-7483.7515,-2122.9129)"
d="m -4298.6562,-7356.7812 c -8.7807,0 -15.9063,7.1255 -15.9063,15.9062 0,8.7704 7.1085,15.8895 15.875,15.9062 6.164,0 12.3339,0 18.5,0 l 8.8125,-8.8124 c 1.9587,-1.9587 2.9688,-4.5377 2.9688,-7.0938 0,-2.5562 -1.0101,-5.1038 -2.9688,-7.0625 l -8.8125,-8.8125 z"
style="fill:#eaeaea;fill-opacity:1;fill-rule:nonzero;stroke:none" />
</g>
<circle
transform="matrix(2.7671166,-2.7671166,2.7671166,2.7671166,24783.255,-9476.3687)"
id="path11185"
style="fill:#353c46;fill-opacity:1;fill-rule:nonzero;stroke:none"
cx="-5989.9604"
cy="-4667.6646"
r="2.2894223" />
</g>
<g
id="g11187"
transform="matrix(0,-1,-1,0,-5533.921,-4020.1121)">
<g
transform="matrix(2.0379651,-2.0379651,2.0379651,2.0379651,17022.519,-8513.1716)"
id="g11189"
style="fill:#eaeaea;fill-opacity:1">
<path
style="fill:#eaeaea;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m -4298.6562,-7356.7812 c -8.7807,0 -15.9063,7.1255 -15.9063,15.9062 0,8.7704 7.1085,15.8895 15.875,15.9062 6.164,0 12.3339,0 18.5,0 l 8.8125,-8.8124 c 1.9587,-1.9587 2.9688,-4.5377 2.9688,-7.0938 0,-2.5562 -1.0101,-5.1038 -2.9688,-7.0625 l -8.8125,-8.8125 z"
transform="matrix(-0.34696707,0,0,0.34696707,-7483.7515,-2122.9129)"
id="path11191"
inkscape:connector-curvature="0"
sodipodi:nodetypes="csccssscc" />
</g>
<circle
style="fill:#353c46;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path11193"
transform="matrix(2.7671166,-2.7671166,2.7671166,2.7671166,24783.255,-9476.3687)"
cx="-5989.9604"
cy="-4667.6646"
r="2.2894223" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 30 KiB

View file

@ -1,4 +1,3 @@
<!doctype html> <!doctype html>
<html class="no-js" lang="en" dir="ltr"> <html class="no-js" lang="en" dir="ltr">
<head> <head>
@ -16,8 +15,9 @@
<div class="top-bar-left"> <div class="top-bar-left">
<ul class="menu"> <ul class="menu">
<li class="menu-text"><img src="images/rocks.syng.Syng.png" alt="Syng.Rocks! Logo" height=30></li> <li class="menu-text"><img src="images/rocks.syng.Syng.png" alt="Syng.Rocks! Logo" height=30></li>
<li><a href="#install">Installation</a></li> <li><a href="index.html">Home</a></li>
<li><a href="#">FAQ</a></li> <li><a href="install.html">Installation</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="#">Server</a></li> <li><a href="#">Server</a></li>
<li><a href="#privacy">Privacy Policy</a></li> <li><a href="#privacy">Privacy Policy</a></li>
</ul> </ul>
@ -54,18 +54,18 @@
<div id="main-content-section"> <div id="main-content-section">
<div class="grid-container"> <div class="grid-container">
<div class="grid-x grid-padding-x"> <div class="grid-x grid-padding-x textleft align-right">
<div class="cell medium-4"> <div class="cell medium-5 text-right">
<h2>Get started</h2> <h2>Get started</h2>
<p> <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. 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> </p>
</div> </div>
<div class="cell medium-8"> <div class="cell medium-5">
<img src="images/syng.png" alt="Syng.Rocks Client" class="work-feature-block-image"/> <img src="images/syng.png" alt="Syng.Rocks Client" class="work-feature-block-image"/>
</div> </div>
</div> </div>
<div class="grid-x grid-padding-x"> <div class="grid-x grid-padding-x textright">
<div class="cell medium-8"> <div class="cell medium-8">
<img src="images/web-shadows.png" alt="Syng.Rocks Web Client" class="work-feature-block-image"/> <img src="images/web-shadows.png" alt="Syng.Rocks Web Client" class="work-feature-block-image"/>
</div> </div>
@ -77,17 +77,28 @@
</p> </p>
</div> </div>
</div> </div>
<div class="grid-x grid-padding-x"> <div class="grid-x grid-padding-x textleft">
<div class="cell medium-4"> <div class="cell medium-4">
<h2>Configure to your needs</h2> <h2>Configure to your needs</h2>
<p> <p>
Syng allows for a lot of configuration options. You can set up your own song database, you can set up a <a href="#waiting-room">waiting room</a>, a set time the event ends and much more. Syng 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> </p>
</div> </div>
<div class="cell medium-8"> <div class="cell medium-8">
<img src="./images/syng_advanced.png" alt="Syng.Rocks Client" class="work-feature-block-image"/> <img src="./images/syng_advanced.png" alt="Syng.Rocks Client" class="work-feature-block-image"/>
</div> </div>
</div> </div>
<div class="grid-x grid-padding-x textright">
<div class="cell medium-7">
<img src="images/sources.svg" style="max-height:250px" alt="Syng.Rocks Web Client" class="work-feature-block-image"/>
</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>
</div> </div>

67
install.html Normal file
View file

@ -0,0 +1,67 @@
<!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.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="top-content-section">
<div class="top-bar">
<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</a></li>
<li><a href="#">Server</a></li>
<li><a href="#privacy">Privacy Policy</a></li>
</ul>
</div>
</div>
</div>
<div id="main-content-section" style="padding-top: 100px;">
<div class="grid-container">
<h1>Installation</h1>
<h2>Client</h2>
<p>
Depending on your platform, you can install Syng.Rocks! in different ways.
<dl>
<dt>Linux</dt>
<dd>
Syng.Rocks! is available as a Flatpak on <a href="https://flathub.org/apps/rocks.syng.Syng" target="_blank">Flathub</a>. You can install it using the command line with:
<pre>flatpak install rocks.syng.Syng</pre>
There also exists an Arch Linux package in the <a href="https://aur.archlinux.org/packages/syng-client" target="_blank">AUR</a>.
</dd>
<dt>Windows</dt>
<dd>
Windows binaries are available on <a href="https://github.com/christofsteel/syng/releases">GitHub</a>. This is a portable version and does not require installation.
</dd>
<dt>Generic</dt>
<dd>
The Syng.Rocks! client is available in the Python Package Index (PyPI) as <code>syng</code>. You can install it using pip:
<pre>pip install syng[client]</pre>
</dd>
</dl>
</p>
<h2>Server</h2>
<p>
The server is available as a Docker image hosted on GitHub. You can install it with
<pre>docker run ghcr.io/christofsteel/syng</pre>
Alternatively, you can also run the server using the Python Package Index (PyPI) package <code>syng</code>:
<pre>pip install syng[server]</pre>
</p>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>