Files
RaccoonWebsite/en/index.html
2019-01-23 16:42:06 +01:00

117 lines
7.1 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>MusicApp - RaccoonSDG</title>
<link rel="shortcut icon" type="image/png" href="../drawables/MusicApp/icon.png"/>
<link rel="stylesheet" href="../scss/custom.css" type="text/css">
<link rel="stylesheet" href="../style.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-1.10.2.js"></script>
</head>
<body>
<header id="nav" style="height: 56px;"></header>
<main role="main">
<div class="container-fluid cover" style="background-image: url(../drawables/MusicApp/Header.jpg);">
<div class="row align-items-center text-center text-light">
<div class="col-6 mx-auto">
<h1>MusicApp</h1>
<p>A music player for android whitch can play both youtube songs and local songs.</p>
<a id="download" href="https://github.com/AnonymusRaccoon/MusicApp/releases/latest" ><button type="button" class="btn btn-outline-primary">Download</button></a>
</div>
</div>
</div>
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 order-md-2 mx-auto p-1 p-md-4 section-img">
<img src="../drawables/MusicApp/icon.png" />
</div>
<div class="col-md-6 text-center text-md-left">
<h2>Download songs / Sync playlists</h2>
<p>The app allow 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 applyed 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/MusicApp/icon.png" />
</div>
<div class="col-md-6 text-center text-md-right">
<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.</p>
</div>
</div>
<hr>
<div class="row align-items-center text-center pt-3 pb-3">
<div class="col">
<h2>Autoplay</h2>
<img height="260" src="../drawables/MusicApp/Autoplay.jpg" />
<p class="pt-4">Don't know what you want to play next? Don't worry, the app will choose for you.</p>
</div>
<div class="col">
<h2>Song mixes</h2>
<p>Play songs whitch are similar to the one you are playing. Kinda like youtube mixes.</p>
</div>
<div class="col">
<h2>Artist mixes</h2>
<img height="260" src="../drawables/MusicApp/Artist-Mixes.jpg" />
<p class="pt-4">Create a mixes of songs made of a particular artists.</p>
</div>
</div>
<hr>
<div class="row align-items-center">
<div class="col-md-6 text-center text-md-left">
<h2>Edit metadata</h2>
<p>Edit manually 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/MusicApp/EditMetadata.jpg" />
</div>
</div>
</div>
<div class="container-fluid" style="background-color: darkslategray;">
<div class="row align-items-center text-center text-light pt-3 pb-3" style="position: relative;">
<h1 class="pl-5">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/MusicApp/Screenshots/1.jpg" ondragstart="return false;">
<img class="screenshot" src="../drawables/MusicApp/Screenshots/2.jpg" ondragstart="return false;">
<img class="screenshot" src="../drawables/MusicApp/Screenshots/3.jpg" ondragstart="return false;">
<img class="screenshot" src="../drawables/MusicApp/Screenshots/4.jpg" ondragstart="return false;">
<img class="screenshot" src="../drawables/MusicApp/Screenshots/5.jpg" ondragstart="return false;">
<img class="screenshot" src="../drawables/MusicApp/Screenshots/6.jpg" ondragstart="return false;">
<img class="screenshot" src="../drawables/MusicApp/Screenshots/7.jpg" ondragstart="return false;">
<img class="screenshot" src="../drawables/MusicApp/Screenshots/8.jpg" ondragstart="return false;">
<img class="screenshot" style="padding-right: 4rem;" src="../drawables/MusicApp/Screenshots/9.jpg" ondragstart="return false;">
</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/MusicApp/releases/latest").done(function (release)
{
var asset = release.assets[0];
$("#download").attr("href", asset.browser_download_url);
});
});
</script>
<script src="../js/horizontalScrolling.js"></script>
</body>
</html>