Commit 651d7de8 authored by Marianne's avatar Marianne

working on demo

parent 6d7b6f04
@font-face {
font-family: "alphabet";
src: url("../fonts/osp_alfphabet/Alfphabet-IV.ttf");
font-weight: normal;
font-style: normal; }
main {
font-family: "alphabet"; }
main .slides {
font-size: 8rem; }
main .slides div.sing {
background: linear-gradient(#f1f441, #f44141);
text-align: center; }
main .slides div.sing .blue {
color: blue;
display: inline; }
@font-face{
font-family: "alphabet";
src:url("../fonts/osp_alfphabet/Alfphabet-IV.ttf");
font-weight: normal;
font-style: normal;
}
main{
font-family: "alphabet";
.slides{
font-size: 8rem;
div.sing{
background: linear-gradient(#f1f441, #f44141);
text-align: center;
.blue{
color: blue;
display: inline;
}
}
}
}
\ No newline at end of file
main .frames div.sing {
display: block;
background-color: lightyellow;
min-width: 100%;
height: 100vh;
text-align: center;
padding: 4rem 0 4rem 0; }
main{
.frames{
div.sing{
display: block;
background-color: lightyellow;
min-width: 100%;
height: 100vh;
text-align: center;
padding: 4rem 0 4rem 0;
}
}
}
\ No newline at end of file
......@@ -66,6 +66,12 @@ select {
select::-ms-expand {
display: none; }
@font-face {
font-family: "archivo";
src: url("../fonts/archivo/ArchivoBlack-Regular.otf");
font-style: normal;
font-weight: normal; }
@font-face {
font-family: "not-courr";
src: url("../fonts/not-courrier/NotCourierSans.otf");
......@@ -75,26 +81,30 @@ select::-ms-expand {
html {
font-size: 20px; }
body header {
font-family: "not-courr";
padding: 1rem;
background-color: #000;
color: #fff; }
body .track {
display: none; }
body {
width: 100%; }
body > header {
font-family: "archivo";
padding: 1rem;
position: fixed;
bottom: 0;
right: 0.5rem; }
body > header h1 > span {
color: blue; }
body .track {
display: none; }
main {
font-size: 10rem; }
main .controls {
position: absolute;
width: 2rem;
font-size: 1rem;
margin: -4rem 0.5rem 0 1.5rem;
display: flex;
width: 100%; }
width: calc(100% - 2rem);
font-family: "not-courr"; }
main .controls > div {
padding: 0.25rem 0 0.1rem 0;
padding: 0.25rem 0 0.25rem 0;
margin: 0.5rem;
background-color: white;
border: solid 1px; }
......@@ -115,8 +125,10 @@ main {
content: "▶"; }
main .controls .seconds {
padding: 0.25rem 0.25rem 0.1rem 0.25rem; }
main .frames {
padding: 1rem;
background-color: #000; }
main .frames > div {
display: none; }
main .slides > div {
display: none; }
main .slides div.sing {
display: block;
min-width: 100%;
height: 100vh;
padding: 4rem; }
@import "reset";
@font-face{
font-family: "archivo";
src:url("../fonts/archivo/ArchivoBlack-Regular.otf");
font-style: normal;
font-weight: normal;
}
@font-face{
font-family: "not-courr";
......@@ -8,7 +17,6 @@
font-weight: normal;
}
html{
font-size: 20px;
......@@ -16,12 +24,23 @@ html{
body{
header{
width: 100%;
font-family: "not-courr";
>header{
font-family: "archivo";
padding: 1rem;
background-color: #000;
color: #fff;
position: fixed;
bottom: 0;
right: 0.5rem;
h1{
>span{
color: blue;
}
}
}
......@@ -33,20 +52,18 @@ body{
main{
font-size: 10rem;
.controls{
position: absolute;
width: 2rem;
font-size: 1rem;
margin: -4rem 0.5rem 0 1.5rem;
display: flex;
width: 100%;
width: calc(100% - 2rem);
font-family: "not-courr";
>div{
padding: 0.25rem 0 0.1rem 0;
padding: 0.25rem 0 0.25rem 0;
margin: 0.5rem;
background-color: white;
border: solid 1px;
......@@ -92,10 +109,7 @@ main{
}
.frames{
padding: 1rem;
background-color: #000;
.slides{
>div{
......@@ -103,6 +117,15 @@ main{
}
div.sing{
display: block;
min-width: 100%;
height: 100vh;
padding: 4rem;
}
}
......
@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
* {
box-sizing: border-box; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-decoration: none;
box-sizing: border-box;
font-style: normal;
font-weight: normal; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
a {
color: inherit;
cursor: pointer; }
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0; }
select::-ms-expand {
display: none; }
html {
font-size: 20px; }
body .track {
display: none; }
main {
font-size: 10rem; }
main .controls {
position: absolute;
width: 2rem;
font-size: 1rem;
margin: -3rem 0.5rem 0 0.5rem;
display: flex;
width: 100%; }
main .controls > div {
padding: 0.25rem 0 0.1rem 0;
margin: 0.5rem;
background-color: white; }
main .controls .bar {
width: 20rem;
padding: 0; }
main .controls .bar .progress {
width: 0;
background-color: magenta;
height: 100%; }
main .controls .play,
main .controls .pause {
width: 2rem;
text-align: center; }
main .controls .play::before {
content: "❙❙"; }
main .controls .pause::before {
content: "▶"; }
main .controls .seconds {
padding: 0.25rem 0.25rem 0.1rem 0.25rem; }
main .frames > div {
display: none; }
main .frames div.sing {
display: block;
background-color: yellow;
min-width: 100%;
height: 100vh;
text-align: center;
padding: 4rem 0 4rem 0; }
......@@ -52,13 +52,13 @@ function counter(track, index){
if(!nowFrame.classList.contains("sing")){
var frames = karaokes[index].querySelectorAll(".frames>div");
var slides = karaokes[index].querySelectorAll(".slides>div");
frames.forEach((frame) => {
slides.forEach((slide) => {
if(frame.classList.contains("sing")){
if(slide.classList.contains("sing")){
frame.classList.remove("sing");
slide.classList.remove("sing");
}
});
......@@ -101,29 +101,29 @@ function setKaraoke(player, event, index){
function setCurrentFrame(index, seconds){
var frames = karaokes[index].querySelectorAll(".frames>div");
var frameTimes = [];
var slides = karaokes[index].querySelectorAll(".slides>div");
var slideTimes = [];
frames.forEach((frame) => {
slides.forEach((slide) => {
var slideTime = parseFloat(frame.dataset.slide);
var slideTime = parseFloat(slide.dataset.slide);
if(slideTime <= seconds){
frameTimes.push(slideTime);
slideTimes.push(slideTime);
}
if(frame.classList.contains("sing")){
if(slide.classList.contains("sing")){
frame.classList.remove("sing");
slide.classList.remove("sing");
}
});
var thatSlide = karaokes[index].querySelector("[data-slide='"+frameTimes[frameTimes.length-1]+"']");
var thatSlide = karaokes[index].querySelector("[data-slide='"+slideTimes[slideTimes.length-1]+"']");
thatSlide.classList.add("sing");
......@@ -190,7 +190,6 @@ function navigateInProgressBar(player, index){
function setPlayPauseButton(player, index){
console.log(index);
var playButt = karaokes[index].querySelector("[data-action='playpause']");
playButt.addEventListener("click", () => {
......@@ -222,6 +221,7 @@ function onYouTubeIframeAPIReady(){
players[index] = new YT.Player(track.id, {
videoId: getVidId(track.dataset.src),
playerVars: { 'autoplay': 0, 'controls': 0,'autohide':1,'wmode':'opaque','origin':'http://localhost:80' },
events: {
'onReady': onPlayerReady,
......
if (!window['YT']) {var YT = {loading: 0,loaded: 0};}if (!window['YTConfig']) {var YTConfig = {'host': 'http://www.youtube.com'};}if (!YT.loading) {YT.loading = 1;(function(){var l = [];YT.ready = function(f) {if (YT.loaded) {f();} else {l.push(f);}};window.onYTReady = function() {YT.loaded = 1;for (var i = 0; i < l.length; i++) {try {l[i]();} catch (e) {}}};YT.setConfig = function(c) {for (var k in c) {if (c.hasOwnProperty(k)) {YTConfig[k] = c[k];}}};var a = document.createElement('script');a.type = 'text/javascript';a.id = 'www-widgetapi-script';a.src = 'https://s.ytimg.com/yts/jsbin/www-widgetapi-vfljrlvNi/www-widgetapi.js';a.async = true;var c = document.currentScript;if (c) {var n = c.nonce || c.getAttribute('nonce');if (n) {a.setAttribute('nonce', n);}}var b = document.getElementsByTagName('script')[0];b.parentNode.insertBefore(a, b);})();}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
\ No newline at end of file
......@@ -2,57 +2,193 @@
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="assets/css/frame.css">
<link rel="stylesheet" type="text/css" href="assets/css/karaoke.css">
<title>KaraoPrint</title>
<link rel="stylesheet" type="text/css" href="assets/css/karaoprint.css">
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
<title>☆☆ KaraoPrint / Demo ☆☆</title>
</head>
<body>
<header>
<h1>Karaoprint</h1>
<h1><span>KaraoPr</span>int.js
</div></h1>
</header>
<main>
<section id="salut" class="karaoke">
<div class="frames">
<section id="marianne" class="karaoke">
<div class="slides">
<div data-slide="0" class="sing">
HEY DUDE
Welcome to
<div>Karaoprint.js</div>
</div>
<div data-slide="10">
YEAH
<div data-slide="1">
Welcome to
<div>
<span class="blue">K</span>araoprint.js
</div>
</div>
</div>
<div class="controls">
<div class="pause" data-action="playpause"></div>
<div class="bar">
<div class="progress"></div>
<div data-slide="1.2">
Welcome to
<div>
<span class="blue">Ka</span>raoprint.js
</div>
</div>
<div class="seconds">
0 (s)
<div data-slide="1.4">
Welcome to
<div>
<span class="blue">Kar</span>aoprint.js
</div>
</div>
</div>
<div class="track" data-src="https://www.youtube.com/watch?v=H9tEvfIsDyo"></div>
</section>
<section id="marianne" class="karaoke">
<div class="frames">
<div data-slide="0" class="sing">
WELCOME TO KARAOPRINT
<div data-slide="1.6">
Welcome to
<div>
<span class="blue">Kara</span>oprint.js
</div>
</div>
<div data-slide="1.8">
Welcome to
<div>
<span class="blue">Karao</span>print.js
</div>
</div>
<div data-slide="2">
YEAH
Welcome to
<div>
<span class="blue">Karaop</span>rint.js
</div>
</div>
<div data-slide="2.2">
Welcome to
<div>
<span class="blue">Karaopr</span>int.js
</div>
</div>
<div data-slide="2.4" >
Welcome to
<div>
<span class="blue">Karaopri</span>nt.js
</div>
</div>
<div data-slide="2.6" >
Welcome to
<div>
<span class="blue">Karaoprin</span>t.js
</div>
</div>
<div data-slide="2.8">
Welcome to
<div>
<span class="blue">Karaoprint</span>.js
</div>
</div>
<div data-slide="3" >
Welcome to
<div>
<span class="blue">Karaoprint.</span>js
</div>
</div>
<div data-slide="3.2">
Welcome to
<div>
<span class="blue">Karaoprint.j</span>s
</div>
</div>
<div data-slide="3.4">
Welcome to
<div>
<span class="blue">Karaoprint.js</span>
</div>
</div>
<div data-slide="3.6">
Welcome to
<div>
<span class="blue">Karaoprint.js</span>
</div>
<div>
</div>
</div>
<div data-slide="3.8">
Welcome to
<div>
<span class="blue">Karaoprint.js</span>
</div>
<div>
☺☺
</div>
</div>
<div data-slide="4">
EST-CE QUE VOUS ÊTES PRÊTS ???
Welcome to
<div>
<span class="blue">Karaoprint.js</span>
</div>
<div>
☺☺☺
</div>
</div>
<div data-slide="6">
OUIIIIIIIII
<div data-slide="4.2">
Welcome to
<div>
<span class="blue">Karaoprint.js</span>
</div>
<div class="blue">
☺☺☺
</div>
</div>
<div data-slide="4.4">
Welcome to
<div>
<span class="blue">Karaoprint.js</span>
</div>
<div>
☺☺☺
</div>
</div>
<div data-slide="4.6">
Welcome to
<div>
<span class="blue">Karaoprint.js</span>
</div>
<div class="blue">
☺☺☺
</div>
</div>
<div data-slide="4.8">
Welcome to
<div>
<span class="blue">Karaoprint.js</span>
</div>
<div>
☺☺☺
</div>
</div>
<div data-slide="10">
GROSSE AMBIANCE
<div data-slide="5">
Welcome to
<div>
<span class="blue">Karaoprint.js</span>
</div>
<div>
☺☺☺
</div>
</div>
<div data-slide="5.2">
Welcome to
<div>
<span class="blue">Karaoprint.js</span>
</div>
<div>
☺☺☺
</div>
</div>
<div data-slide="6">
WITH
</div>
<div data-slide="12.5">
INSTRUMENTAL
<div data-slide="8">
<div>
G
</div>
</div>
<div data-slide="29">
Eisbär
<div data-slide="8.2">
<div>
GI
</div>
</div>
</div>
<div class="controls">
......@@ -64,10 +200,9 @@
0 (s)
</div>
</div>
<div class="track" data-src="https://www.youtube.com/watch?v=7RI3-JkaWnk"></div>
<div class="track" data-src="https://www.youtube.com/watch?v=6iUAu3aBSlI"></div>
</section>