Commit eed32b96 authored by Marianne's avatar Marianne

doc try

parent 062838d7
......@@ -94,40 +94,40 @@ body {
body .track {
display: none; }
main .controls {
.controls {
position: absolute;
font-size: 1rem;
margin: -4rem 0.5rem 0 1.5rem;
display: flex;
width: calc(100% - 2rem);
font-family: "not-courr"; }
main .controls > div {
.controls > div {
padding: 0.25rem 0 0.25rem 0;
margin: 0.5rem;
background-color: white;
border: solid 1px; }
main .controls .bar {
.controls .bar {
width: 20rem;
padding: 0; }
main .controls .bar .progress {
.controls .bar .progress {
width: 0;
background-color: blue;
height: 100%; }
main .controls .play,
main .controls .pause {
.controls .play,
.controls .pause {
width: 2rem;
text-align: center; }
main .controls .play::before {
.controls .play::before {
content: "❙❙"; }
main .controls .pause::before {
.controls .pause::before {
content: "▶"; }
main .controls .seconds {
.controls .seconds {
padding: 0.25rem 0.25rem 0.1rem 0.25rem; }
main .slides > div {
.slides > div {
display: none; }
main .slides div.sing {
.slides div.sing {
display: block;
min-width: 100%;
height: 100vh;
......
......@@ -50,85 +50,83 @@ body{
}
}
main{
.controls{
.controls{
position: absolute;
font-size: 1rem;
margin: -4rem 0.5rem 0 1.5rem;
display: flex;
width: calc(100% - 2rem);
font-family: "not-courr";
position: absolute;
font-size: 1rem;
margin: -4rem 0.5rem 0 1.5rem;
display: flex;
width: calc(100% - 2rem);
font-family: "not-courr";
>div{
>div{
padding: 0.25rem 0 0.25rem 0;
margin: 0.5rem;
background-color: white;
border: solid 1px;
padding: 0.25rem 0 0.25rem 0;
margin: 0.5rem;
background-color: white;
border: solid 1px;
}
}
.bar{
.bar{
width: 20rem;
padding: 0;
width: 20rem;
padding: 0;
.progress{
.progress{
width: 0;
background-color: blue;
height: 100%;
}
width: 0;
background-color: blue;
height: 100%;
}
}
.play,
.pause{
.play,
.pause{
width: 2rem;
text-align: center;
}
.play::before{
width: 2rem;
text-align: center;
}
content: "❙❙";
.play::before{
}
content: "❙❙";
.pause::before{
}
content: "▶";
}
.pause::before{
.seconds{
content: "▶";
}
padding: 0.25rem 0.25rem 0.1rem 0.25rem;
}
.seconds{
padding: 0.25rem 0.25rem 0.1rem 0.25rem;
}
.slides{
}
>div{
.slides{
display: none;
>div{
}
display: none;
div.sing{
}
display: block;
min-width: 100%;
height: 100vh;
padding: 4rem;
div.sing{
}
display: block;
min-width: 100%;
height: 100vh;
padding: 4rem;
}
}
}
@media only screen and (max-width: 1300px){
......
......@@ -104,8 +104,26 @@ strong {
color: magenta; }
a {
color: blue;
text-decoration: underline; }
color: magenta; }
a:hover {
color: blue; }
a::after {
display: inline-block;
content: '➹';
vertical-align: super;
line-height: 0;
font-size: 0.7rem;
width: 0.7rem;
text-align: right; }
pre {
font-family: "courr";
font-size: 0.7rem;
line-height: 1rem;
background-color: #eeeeee;
color: blue; }
header {
display: flex;
......
......@@ -59,8 +59,33 @@ strong{
a{
color: magenta;
}
a:hover{
color: blue;
text-decoration: underline;
}
a::after{
display: inline-block;
content: '➹';
vertical-align: super;
line-height: 0;
font-size: 0.7rem;
width: 0.7rem;
text-align: right;
}
pre{
font-family: "courr";
font-size: 0.7rem;
line-height: 1rem;
background-color: #eeeeee;
color: blue;
}
header{
......
......@@ -220,7 +220,7 @@ function onYouTubeIframeAPIReady(){
players[index] = new YT.Player(track.id, {
videoId: getVidId(track.dataset.src),
videoId: getVidId(songs[index]),
playerVars: { 'autoplay': 0, 'controls': 0,'autohide':1,'wmode':'opaque','origin':'http://localhost:80' },
events: {
......@@ -257,14 +257,22 @@ function onPlayerStateChange(event){
/* ---- LOAD ---- */
var karaokes = document.querySelectorAll(".karaoke");
var tracks = document.querySelectorAll(".track");
var karaokes = document.querySelectorAll(".karaoke")
var tracksIds = [];
var progressBars = document.querySelectorAll(".bar");
var players = [];
var counts = [];
var totalTimes = [];
// LOAD YT API
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
document.addEventListener("DOMContentLoaded", () => {
setIds();
......
......@@ -4,6 +4,9 @@
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="assets/css/karaoprint.css">
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
<script type="text/javascript">
const songs = ["https://www.youtube.com/watch?v=jNhHn0Nmi_E"];
</script>
<title>☆☆ karaoPrint / Demo ☆☆</title>
</head>
<body class="demo">
......@@ -398,9 +401,8 @@
0 (s)
</div>
</div>
<div class="track" data-src="https://www.youtube.com/watch?v=jNhHn0Nmi_E"></div>
<div class="track"></div>
</section>
<script type="text/javascript" src="https://www.youtube.com/player_api"></script>
<script type="text/javascript" src="assets/js/karaoPrint.js"></script>
</main>
</body>
......
......@@ -35,6 +35,36 @@
</nav>
</header>
<main>
<section>
<p>
Bienvenue sur <strong><span class="pink">karaoPr</span>int.js</strong>, un outil <span class="code">JS</span> pour créer des karaokés en <span class="code">HTML</span>&nbsp;/&nbsp;<span class="code">CSS</span>, basé sur la
<a href="https://developers.google.com/youtube/iframe_api_reference">YouTubePlayer</a> API.
</p>
</section>
<section class="howTo">
<h2>Getting Started</h2>
<div class="html">
<h3>Html → Head</h3>
<pre>
<code>
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;link rel="stylesheet" type="text/css" href="<span class="pink">assets/css/karaoprint.css</span>"&gt;
&lt;/head&gt;
</code>
</pre>
<h3>Html → Body</h3>
<pre>
<code>
&lt;body&gt;
&lt;main&gt;
&lt;/main&gt;
&lt;/body&gt;
</code>
</pre>
</div>
</section>
<section class="technic list">
<h2>Liens utiles</h2>
<h3>CSS</h3>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment