zoriya/RaccoonWebsite
1
0
Fork 0
mirror of https://github.com/zoriya/RaccoonWebsite.git synced 2025-12-06 07:56:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adding french translation & creating language btn.

Browse Source
This commit is contained in:
Tristan Roux
2019-04-30 23:18:02 +02:00
parent 969c1a190d
commit 8955218361
9 changed files with 614 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
drawables/Flags/en.svg Normal file
View File

@@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-gb" viewBox="0 0 640 480">
<defs>
<clipPath id="a">
<path fill-opacity=".7" d="M-85.3 0h682.6v512H-85.3z"/>
</clipPath>
</defs>
<g clip-path="url(#a)" transform="translate(80) scale(.94)">
<g stroke-width="1pt">
<path fill="#012169" d="M-256 0H768v512H-256z"/>
<path fill="#fff" d="M-256 0v57.2L653.5 512H768v-57.2L-141.5 0H-256zM768 0v57.2L-141.5 512H-256v-57.2L653.5 0H768z"/>
<path fill="#fff" d="M170.7 0v512h170.6V0H170.7zM-256 170.7v170.6H768V170.7H-256z"/>
<path fill="#c8102e" d="M-256 204.8v102.4H768V204.8H-256zM204.8 0v512h102.4V0H204.8zM-256 512L85.3 341.3h76.4L-179.7 512H-256zm0-512L85.3 170.7H9L-256 38.2V0zm606.4 170.7L691.7 0H768L426.7 170.7h-76.3zM768 512L426.7 341.3H503l265 132.5V512z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 837 B

7
drawables/Flags/fr.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-fr" viewBox="0 0 640 480">
<g fill-rule="evenodd" stroke-width="1pt">
<path fill="#fff" d="M0 0h640v480H0z"/>
<path fill="#00267f" d="M0 0h213.3v480H0z"/>
<path fill="#f31830" d="M426.7 0H640v480H426.7z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 292 B

5
en/index.html
View File

@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-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"/>
@@ -126,8 +127,8 @@
<script>
$(function()
{
$("#nav").load("fragments/navBar.html");
$("#footer").load("fragments/footer.html");
$("#nav").load("/fragments/navBar.html");
$("#footer").load("/fragments/footer.html");
$.getJSON("https://api.github.com/repos/AnonymusRaccoon/Opus/releases/latest").done(function (release)
{

148
fr/index.html Normal file
View File

@@ -0,0 +1,148 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Opus - RaccoonSDG</title>
<link rel="alternate" href="www.raccoon-sdg.fr/en" hreflang="en" />
<link rel="shortcut icon" type="image/png" href="../drawables/Opus/logo.png"/>
<meta name="theme-color" content="#3949AB"/>
<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-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>Un lecteur de musique pour android qui peut lire des musiques depuis youtube ou depuis des fichiers mp3.</p>
<a class="btn btn-outline-primary download-btn" href="https://github.com/AnonymusRaccoon/Opus/releases/latest">Télécharger</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>Télécharger des musiques / Synchroniser des playlists</h2>
<p>L'application vous permet de télécharger l'audio de n'importe quelle vidéo présente sur youtube. Vous pouvez télécharger les musiques une à une ou vous pouvez télécharger une playlist entiere.
<br/><br/>Vous pouvez aussi garder une playlist synchronisée. A chaque fois qu'un changement est fait sur la playlist youtube, ces changements se mettent a jours localement sur votre téléphone.</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" />
</div>
<div class="col-md-6 text-center text-md-right pt-5">
<h2>Chromecast <span class="badge badge-primary">Beta</span></h2>
<p>Controller la musique depuis plusieurs appareils dans l'intégralité de la maison. Ne laissez plus vos amis ce battre pour controller la musique.
<br/><i>Pour le moment, le chromecast ne fonctione pas.</i>
<br/><br/><i>PS : Les menus vont changer dans un futur proche donc il n'y a pas de screenshot pour le moment. A la place, vous pouvez observer ce magnifique raton laveur.</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>Vous ne savez pas quoi écouter après ? Ne vous en faites pas, l'application va trouver quelque chose pour vous.</p>
<img class="mb-5" max-width="380" height="260" src="../drawables/Opus/Autoplay.jpg" />
</div>
<div class="col">
<h2>Mix</h2>
<p>Créer une playlist contenant des musiques similaires a celle que vous écoutez. Un peu comme les mixes youtubes.</p>
<img class="mb-5" height="260" src="../drawables/Opus/Song-Mixes.jpg" />
</div>
<div class="col">
<h2>Mix d'artiste</h2>
<p>Créer une playlist avec les meilleurs musiques d'un artiste de votre choix.</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>Modifier les metadatas</h2>
<p>Vous pouvez éditer manuellement les metadatas des musiques que vous avez localement ou vous pouvez télécharger ces métadatas directement depuis 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>Le code source peut être trouvé sur github. N'hesitez pas a signaler les bugs, demander de nouvelles fonctionnalités ou faire des pull-requests.</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">Regarder le code</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">Signaler ou Demander</a>
</div>
</div>
<div class="col-md">
<img style="max-height: 330px;" src="../drawables/Opus/logo.svg" />
<h2 class="pt-2">Téléchargé l'application</h2>
<p>Vous pouvez trouver la dernière version de l'application ici. Après l'avoir installée, Opus se mettra a jour automatiquement.</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">Télécharger</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>

0
en/fragments/footer.html → fragments/footer.html
View File

1
en/fragments/navBar.html → fragments/navBar.html
View File

@@ -1,4 +1,5 @@
<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-primary" style="height: 56px;">
<button id="searchBtn" type="button" class="btn icon" style="position: absolute; top: 0; bottom: 0; margin: auto;"><i class="fas fa-globe-americas"></i></button>
<!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".mobile-nav" style="position: absolute;">
<span class="navbar-toggler-icon"></span>
</button> -->

650
scss/custom.css
View File

File diff suppressed because it is too large Load Diff

5
scss/custom.css.map
View File

File diff suppressed because one or more lines are too long

16
scss/custom.scss
View File

@@ -111,3 +111,19 @@ h2
{
height: 100vh;
}
.icon
{
color: #d3d3d3;
&:hover
{
color: #ffffff;
}
&:focus
{
box-shadow: none !important;
outline: none !important;
}
}