Files
RaccoonWebsite/en/index.html
2019-05-03 17:58:47 +02:00

147 lines
9.4 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
<title>Opus - RaccoonSDG</title>
<link rel="alternate" href="www.raccoon-sdg.fr/fr" hreflang="fr" />
<link rel="shortcut icon" type="image/png" href="../drawables/Opus/logo.png"/>
<meta name="theme-color" content="#3949AB"/>
<meta name="Description" content="Opus is an android application that allow you to play musics from youtube or from your local storage.">
<link rel="stylesheet" href="../scss/custom.css" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<header id="nav" style="height: 56px;"></header>
<main role="main">
<div class="container-fluid cover" style="background-image: url(../drawables/Opus/Header.jpg);">
<div class="row align-items-center text-center text-light">
<div class="col-6 mx-auto">
<h1>Opus</h1>
<p>A music player for android whitch can play both youtube songs and local songs.</p>
<a class="btn btn-outline-primary download-btn" href="https://github.com/AnonymusRaccoon/Opus/releases/latest">Download</a>
</div>
</div>
</div>
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 order-md-2 mx-auto section-img">
<img style="max-height: 35rem;" src="../drawables/Opus/Download.png" />
</div>
<div class="col-md-6 text-center text-md-left pt-2 pb-4">
<h2>Download songs / Sync playlists</h2>
<p>The app allows you to download the audio of any existing video on youtube. You can download songs one by one or you can download a whole playlist.
<br/><br/>You can also keep a playlist synced. So every update made to the youtube playlist will be applied to your downloaded playlist.</p>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-6 mx-auto p-1 p-md-4 section-img">
<img src="../drawables/Opus/Placeholder.png" style="max-width: 100%;" />
</div>
<div class="col-md-6 text-center text-md-right pt-5">
<h2>Chromecast <span class="badge badge-primary">Beta</span></h2>
<p>Controls playback with multiples devices all around your house. Don't let your friends fight again for the control of the bluetooth speaker.
<br/><br/><i>NB: The UI may change in a near future so there is no screenshots of the chromecast UI in the website, instead you can find this beautiful raccoon. For now the cast system doesn't work, please wait before using it.</i></p>
</div>
</div>
<hr style="height: 0.2rem">
<div class="row align-items-center text-center pt-3 pb-3">
<div class="col">
<h2>Autoplay</h2>
<p>Don't know what you want to play next? Don't worry, the app will choose for you.</p>
<img class="mb-5" max-width="380" height="260" src="../drawables/Opus/Autoplay.jpg" />
</div>
<div class="col">
<h2>Song mixes</h2>
<p>Plays songs whitch are similar to the one you are playing. Kinda like youtube mixes.</p>
<img class="mb-5" height="260" src="../drawables/Opus/Song-Mixes.jpg" />
</div>
<div class="col">
<h2>Artist mixes</h2>
<p>Creates a mixes of songs made of a particular artists.</p>
<img class="mb-5" height="260" src="../drawables/Opus/Artist-Mixes.jpg" />
</div>
</div>
<hr style="height: 0.1rem">
<div class="row align-items-center">
<div class="col-md-6 text-center text-md-left">
<h2>Edit metadata</h2>
<p>Manually edit metadata for your downloaded songs or download metadata directly from youtube.</p>
</div>
<div class="col-md-6 order-md-1 mx-auto section-img">
<img class="img-fluid" style="max-height: 35rem;" src="../drawables/Opus/EditMetadata.jpg" />
</div>
</div>
</div>
<div class="container-fluid" style="background-color: rgb(88, 88, 88);">
<div class="row align-items-center text-center text-light pt-3 pb-3" style="position: relative;">
<h1 class="pl-5 pb-2">Screenshots</h1>
<button class="scroller" id="left-scroll" style="left: 0; display: none;"><i class="fas fa-chevron-left"></i></button>
<button class="scroller" id="right-scroll" style="right: 0;"><i class="fas fa-chevron-right"></i></button>
<div class="screenshots">
<img class="screenshot" style="padding-left: 4rem;" src="../drawables/Opus/Screenshots/1.jpg" ondragstart="return false;">
<img class="screenshot" src="../drawables/Opus/Screenshots/2.jpg" ondragstart="return false;">
<img class="screenshot" src="../drawables/Opus/Screenshots/3.jpg" ondragstart="return false;">
<img class="screenshot" src="../drawables/Opus/Screenshots/4.jpg" ondragstart="return false;">
<img class="screenshot" src="../drawables/Opus/Screenshots/5.jpg" ondragstart="return false;">
<img class="screenshot" src="../drawables/Opus/Screenshots/6.jpg" ondragstart="return false;">
<!-- <img class="screenshot" src="../drawables/Opus/Screenshots/7.jpg" ondragstart="return false;"> -->
<img class="screenshot" src="../drawables/Opus/Screenshots/8.jpg" ondragstart="return false;">
<img class="screenshot" style="padding-right: 4rem;" src="../drawables/Opus/Screenshots/9.jpg" ondragstart="return false;">
</div>
</div>
</div>
<div class="container">
<div class="row text-center py-3">
<div class="col-md">
<img style="max-height: 330px;" class="svg" src="../drawables/Github.svg" />
<h2 class="pt-2">Open Source</h2>
<p>The full source code can be found on github. Feel free to report bugs, send message, request features or make pull request.</p>
<div class="row">
<a class="col-md btn btn-outline-primary w-100 h-100 mx-2 mb-2 py-md-3" href="https://github.com/AnonymusRaccoon/Opus">Browse Source</a>
<a class="col-md btn btn-outline-primary w-100 h-100 mx-2 mb-2 py-md-3" href="https://github.com/AnonymusRaccoon/Opus/issues/new">Report or Ask</a>
</div>
</div>
<div class="col-md">
<img style="max-height: 330px;" src="../drawables/Opus/logo.svg" />
<h2 class="pt-2">Download the app</h2>
<p>You can find the lastest version of the app here. After the download, the app will update automatically when a newer version will be out.</p>
<div class="row">
<a class="col-md btn btn-outline-primary w-100 h-100 mx-2 mb-2 py-md-3 download-btn" href="https://github.com/AnonymusRaccoon/Opus/releases/latest">Download</a>
</div>
</div>
</div>
</div>
</main>
<footer class="bg-dark" id="footer"></footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script>
$(function()
{
$("#nav").load("/fragments/navBar.html");
$("#footer").load("/fragments/footer.html");
$.getJSON("https://api.github.com/repos/AnonymusRaccoon/Opus/releases/latest").done(function (release)
{
var asset = release.assets[0];
$(".download-btn").attr("href", asset.browser_download_url);
});
$(document).on("click touchstart", function()
{
$(".mobile-nav").collapse("hide");
});
});
</script>
<script src="../js/horizontalScrolling.js"></script>
</body>
</html>