Adding images and adding sections.

drawables/Github.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120.78 117.79"><defs><style>.cls-1,.cls-2{fill:#191717;}.cls-1{fill-rule:evenodd;}</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M60.39,0A60.39,60.39,0,0,0,41.3,117.69c3,.56,4.12-1.31,4.12-2.91,0-1.44-.05-6.19-.08-11.24C28.54,107.19,25,96.42,25,96.42c-2.75-7-6.71-8.84-6.71-8.84-5.48-3.75.41-3.67.41-3.67,6.07.43,9.26,6.22,9.26,6.22,5.39,9.23,14.13,6.57,17.57,5,.55-3.9,2.11-6.56,3.84-8.07C36,85.55,21.85,80.37,21.85,57.23A23.35,23.35,0,0,1,28.08,41c-.63-1.52-2.7-7.66.58-16,0,0,5.07-1.62,16.61,6.19a57.36,57.36,0,0,1,30.25,0C87,23.42,92.11,25,92.11,25c3.28,8.32,1.22,14.46.59,16a23.34,23.34,0,0,1,6.21,16.21c0,23.2-14.12,28.3-27.57,29.8,2.16,1.87,4.09,5.55,4.09,11.18,0,8.08-.06,14.59-.06,16.57,0,1.61,1.08,3.49,4.14,2.9A60.39,60.39,0,0,0,60.39,0Z"/><path class="cls-2" d="M22.87,86.7c-.13.3-.6.39-1,.19s-.69-.61-.55-.91.61-.39,1-.19.69.61.54.91Z"/><path class="cls-2" d="M25.32,89.43c-.29.27-.85.14-1.24-.28a.92.92,0,0,1-.17-1.25c.3-.27.84-.14,1.24.28s.47,1,.17,1.25Z"/><path class="cls-2" d="M27.7,92.91c-.37.26-1,0-1.35-.52s-.37-1.18,0-1.44,1,0,1.35.51.37,1.19,0,1.45Z"/><path class="cls-2" d="M31,96.27A1.13,1.13,0,0,1,29.41,96c-.53-.49-.68-1.18-.34-1.54s1-.27,1.56.23.68,1.18.33,1.54Z"/><path class="cls-2" d="M35.46,98.22c-.15.47-.82.69-1.51.49s-1.13-.76-1-1.24.82-.7,1.51-.49,1.13.76,1,1.24Z"/><path class="cls-2" d="M40.4,98.58c0,.5-.56.91-1.28.92s-1.3-.38-1.31-.87.56-.92,1.29-.93,1.3.39,1.3.88Z"/><path class="cls-2" d="M45,97.8c.09.49-.41,1-1.12,1.12s-1.35-.17-1.44-.66.42-1,1.12-1.12,1.35.17,1.44.66Z"/></g></g></svg>

drawables/MusicApp/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 192 192"><defs><style>.cls-1{isolation:isolate;}.cls-2{fill:#0cc;}.cls-3{fill:url(#radial-gradient);}.cls-4{opacity:0.75;mix-blend-mode:multiply;}.cls-5{fill:#fff;}</style><radialGradient id="radial-gradient" cx="96" cy="96" r="96" gradientTransform="translate(0 -192) scale(1 3)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="red"/><stop offset="1" stop-color="blue"/></radialGradient></defs><title>Artboard 1</title><g class="cls-1"><g id="Layer_1" data-name="Layer 1"><circle class="cls-2" cx="96" cy="96" r="96"/><path class="cls-3" d="M96,22A74,74,0,1,1,22,96,74.09,74.09,0,0,1,96,22M96,0a96,96,0,1,0,96,96A96,96,0,0,0,96,0Z"/><image class="cls-4" width="114" height="145" transform="translate(48 35)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHIAAACRCAYAAAAfDexRAAAACXBIWXMAAAsSAAALEgHS3X78AAALeElEQVR4Xu2daXcTORaGH4eEEAgkYWm2mT40nPn/f2iY7mmGJSzZA9lrPly90S2lHDtgOypF7zl1yk4ItvTUe3WlUkmDpmmo6r/mR/2DPmkwGAz08tJ/2F81AE2H+wYlODIA1DEXDr0vQU04zsLRYDzP4fUeZIA4B9zCIsztcL5FBNpnCeApcAIchfMpcCaYJYTWAQbtNnAXWA5nAe2zM+VEAfwO7IXzkft9v0G6kDqPwVsFfgPWMKC3Mch9BnmKQdsDNoHP4XdnwOlgMBg0TdP0GmSQ3LgMPAXeAC+Ah8A9oiv7KLlxH9gAPmBl8SH2DHruSGLY9I58AfwBPAPuY5D7DPII2AU+hZ99w5y5Qyx/EY70beQy5sRnwEtgJfx8buhf560zDOR2eL/NkCajFJBzWFkWsXB6H4O4Gn7WZ5CH4fUOVrZFrKytjLwEkNDuP84DC9hVu0j/QYKVZYEI8EK3qhSQUjoo4I++ypdhaFeqzwWscqogC1EFWYgqyEJUQRaiCrIQVZCFqIIsRBVkIaogC1EFWYgqyEJUQRai0u5+zEJNcp6mzpLjfLJVqgpyfDXuGFmxE5JuLB8Bx8Q5Ovrsc1WQ4+nSuaVMD6af6rGLTcI6JAI9/9wKcjz5aYnp3NITpufMdPLVBvbZR9j3qSCvID9J+Duwhc0t3WRIpU5QXdMht7Dv0bqAKsjx5CcJrwNvsUrdwCpZlTppDZug7C8goIIcR12O/AD8iYW7XeL0/UnLf3Ya1k8gPshTQY6n1BkbGMT3WCJyRJzxNmldlmjVNvKKUmWeYFnjPubEbcyhh0wPJAzp9vjH6irI8eUr8gTr1x1hEKcNUmqAzgddK8irK3XHGfac4ixADlUday1EFWQhqiALUQVZiCrIQlRBFqIKshBVkIWogixEFWQhqiALUQVZiCrIQlRBFqIKshBVkIWogixEFWQhqiALUQVZiCrIQlRBFqIKshBVkIWogixEFWQhqiALUVbPflxht7lpPIvYa10byASaXs+5910LsTfJAe3NzEZdAMVqpiCT7QG7dgPQjnNdcPxTUHrosyFuDbGQ/N2N0tRBOud5WALmj4VwLNLe48KD9M8mHmJA57DdaZaBO7SB3hhNDWTiPoETqNtYpd9x7xfD+7tEmH7bID3+LYh+670l4Am2+87d8Lc3ypkTB9kBUKFPkJaxrYHuEfd6XApnbYfk93+Us+RGLYqwS1wUYQF4gO2J9SB8Vp+3G7yyJgoy2V1VAAXoAeaYh9ieVSvEfR4FU0DHdeRBeD/A4N0HHofPu1GunAhI50KF0EWi+1YxYE+wSv4Ng7mCwV3CINwmOrcrcfGJzjER4kn4/S3sc1dog7wR+mWQzoXzGIglzBlrGLCnGLxnGMxHWGXLiT65uWrW6teC0/fQRTGf/H3R+mmQzoVzGIg7GJwVDNizcLzAYD7B4D4gbp+Xbmx91X5kukKjooL/v26EfgpkEkrVDq5gbnuKbcL5T+B5eO9duEQboC4GiBU/CkAz5AztC2DU/1OMrgwygbiIwVkjAnwJ/B7Oag99Jqq261dGY24cqFG6EsgEokLpYyx8/g68wpz4AoMoF6ZZ6M8CrBqisUF2QFSq/w8M4Jtwfh5+vkIMo3U8dMoaC+QIiK+Bf2E7jb/E2sP7GETfDlaAU9RYILnYJgriGwzi6/D+MXHMMx0rrZqiRoJ0/URtD5868TXWLj7GnKhduasLZ6hLQTqIC1jWuYYlMq/ohujHOCvEGWrUENYAg30HS16eYtnpG6xNVDitEK9ZQ0EGN6rDv4wlMS8xN74KryvETNQJMhk/XcIGvtMRm0fEPmKFeM0a5kifpaqroRGbF7SdWBObDHQBpOsz+gTnGeZEDbups18hZqJhjvRt40MM5HMuQqz9xEzUBdK3jQ8weLqL8RC7BaVhtwoxE7VAJv3GJcx9j4n3EjVqUyFmptSR6VDcQ8yRGgS/kTPU+qBRIFeJ82sUUivEDHUOMgmrute4hsFUf7EmOJnKO9KP5NzDAPopGr7jX5WZukAuYiBXMJjq+Ne2MWPNwYUhOQ/yAXHKYnVjxkodqTsdAqlJU+ms76rMJJAaZrtFTHbu0Z66WIfiMlbqSIVXPR3lH6SpEDNWClIwBVSvqxszV9eAgIdZIfZEw+5+VPVMFWQhqiALUQVZiCrI8dS1QbZ/LvPaVUGOVgrxhAxhVpCjla7vc0Rcu0Awr10V5OWS4/wCFH41kVMycWUKMvu24BrUYO7TkjBa30crb2VRNx5kL9qCGUv1cYqF1B/APu2lYc6aprn2uklBZt8WzFi+To6IofUQq5uz4X86Wwlkb9qCGaurTn5gULO6wFNH+rZghxhG9KVvknThqk5+AHvhfEiOIEOM922BGvU9DOQRGX3pGcm7URf2FrFOtF5sFkod6Rv1XWKGll0omYFUHz5CbWNR6tyROSQ60J3sHBNBbmMFEMxs0u0py9fFAVYXW7RBZlUXaT/Sh9Zt4CuwgcH04SSbAkxJ3o17WF18w2Duk+FFfQ4yhAg17j8weN8wmGobsivAFOS7HAK5BWwS28djMgqrcNGRKsABBvIL8CmctzGnHlO2KwXyCHPfNhaVdDFnF1ahe6xV4XUfuwo/h2ODTMPKBOXbRt+8qPz9AOnCqwqyhbnxYzhvEV1ZWgarsp8SE5xNrNyKSD/IMKxCtyN9N2QfuxI/A+tYm7mLFbS00R7lB4dYGTewZuUDbZBZDo5cWPmqaZpmMBikrlzHCvSIuIr/AvExg75Pl/QhVU2KIH7CLmDfrGSnYUuYeVfuYQX5SATpH+zp+9zXtF0UxHfA31i5N3GJXm5hFYaA7HDlJlYgrUcukP5xAp37JN/lOsDC5zoG8C8M5hcs1GaZ5EiXLSooV6rN+EJ7fw6/mv8cFmqhPzBTiOpuvQf+i8H8RNuN2SU50lCQwZVpyPHbHt3j4gOw+v9yh+kzVHX61Xy8C8cnYpcra4gwYpnPBKYyWD1yp1WStUAE9GPBXe9ERZuvmBP/Av4E/oe5c4c4QJ4tRBhj4V3ahd4hblTm1ysHSxh8RptjEqTERuF0D4P4DvgP8BYLqetYe3k+vpyzG2EMkMGV0E4ItO+VICrDPaa9Hk8uodaHUo0l72Lh9D0G8d+YGz/Qk3bRayRI6GwvN4jh1N/DPAyv14i77VxnF0UA0wlUGnr7iIXTtxjE9+HnukHQC4gwJkhowdSID8TBZc0o2CcCXaO9Iohf03XaQBvaLjymfUvqM+a8dxjIv8N7Qcy6q9GlsUEG+UxPV7qfmKTJSd+xFSW1dcQkd+G5TF0A/YWm4cb3GLz34Vgn3qY6h9gXN8IVQbr2UjD99MlDDKjmfu4QYQ7bF8sD/VmojTsrhGr64nfsu2xh7eE6sYshgN+It+jO7+z0CSJcESRwfockjPyk7Y+f3/ItHF071WkwQSH3Z8Kud98Z8aLS/FOFUd2K03jxJ9r3WFs3i+khRPgJkFKSAPmMUJW4gVXWUy7uHXmfCNTvHzluyE0vIgH0YVS3oD5jLhTMjfC7XZI5qn0EKA1+9bu7pbM1TLfI6N1cV4mLFd7l4p7K44D0keCA2E7vYLC+Ys7TjfFN4l3+78SOfi9DaapfBim5ZdC06JL2lezaX3kNc+dq+J0GEsZdmdknMwdYO7hPnO321R0CuE9sBzV7vtcu9JoYSGi5c0AbqMZnl4nDe9owW4f6nXLlZfLtoVy46w5N49Rs+RRgQwEu9JooSKkD6Dwx7GrgXbfD7hGX2E77m11KuxeHxP6rDnWDNEu+WIDSVEBKASjEvqMyVDnVg00TnsukNtJ3fZTsqO94gmsDKRSgNFWQXolLPdR5uvuVl6kraz0Nh36m31MyQGlmIL0SqAL7K/1IQdPrGwHP61pAernwOy7AVDcSXKprB1k1Gf0fANb6hgbxeZgAAAAASUVORK5CYII="/><path class="cls-5" d="M114.16,125.84V55.78H145.3V32.43H90.81V96.7a35,35,0,1,0,23.35,33"/></g></g></svg>

en/index.html

@@ -5,7 +5,7 @@
         <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="shortcut icon" type="image/png" href="../drawables/MusicApp/icon.svg"/>
 
         <link rel="stylesheet" href="../scss/custom.css" type="text/css">
         <link rel="stylesheet" href="../style.css" type="text/css">
@@ -23,16 +23,16 @@
                     <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>
+                        <a class="btn btn-outline-primary download-btn" href="https://github.com/AnonymusRaccoon/MusicApp/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 p-1 p-md-4 section-img">
-                        <img src="../drawables/MusicApp/icon.png" />
+                    <div class="col-md-6 order-md-2 mx-auto section-img">
+                        <img style="max-height: 35rem;" src="../drawables/MusicApp/Download.png" />
                     </div>
-                    <div class="col-md-6 text-center text-md-left">
+                    <div class="col-md-6 text-center text-md-left pt-2 pb-4">
                         <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>
@@ -40,9 +40,9 @@
                 </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" />
+                        <img src="../drawables/MusicApp/icon.svg" />
                     </div>
-                    <div class="col-md-6 text-center text-md-right">
+                    <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.</p>
                     </div>
@@ -51,17 +51,18 @@
                 <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>
+                        <p>Don't know what you want to play next? Don't worry, the app will choose for you.</p>
+                        <img class="mb-5" height="260" src="../drawables/MusicApp/Autoplay.jpg" />
                     </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>
+                        <img class="mb-5" height="260" src="../drawables/MusicApp/Song-Mixes.jpg" />
                     </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>
+                        <p>Create a mixes of songs made of a particular artists.</p>
+                        <img class="mb-5" height="260" src="../drawables/MusicApp/Artist-Mixes.jpg" />
                     </div>
                 </div>
                 <hr>
@@ -75,9 +76,9 @@
                     </div>
                 </div>
             </div>
-            <div class="container-fluid" style="background-color: darkslategray;">
+            <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">Screenshots</h1>
+                    <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">
@@ -93,6 +94,33 @@
                     </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/Github.svg" />
+                    </div>
+                    <div class="col-md-6 text-center text-md-left py-md-3">
+                        <h2>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/MusicApp">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/MusicApp/issues/new">Report or Ask</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="row align-items-center">
+                    <div class="col-md-6 my-auto p-1 section-img">
+                        <img src="../drawables/MusicApp/icon.svg" />
+                    </div>
+                    <div class="col-md-6 text-center text-md-left pt-5">
+                        <h2>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/MusicApp/releases/latest">Download</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </main>
 
         <footer class="bg-dark" id="footer"></footer>
@@ -108,7 +136,7 @@
                 $.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);
+                    $(".download-btn").attr("href", asset.browser_download_url);
                 });
             });
         </script>