initial commit
commit
4a53f21281
@ -0,0 +1,118 @@
|
||||
@font-face {
|
||||
font-family: "RobotoSlab";
|
||||
src: url("../fonts/RobotoSlab-Regular.ttf");
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: RobotoSlab;
|
||||
color: #707070;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
scrollbar-color: #969696 #d8d8d8;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 25vw auto;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"comments video"
|
||||
"comments text";
|
||||
}
|
||||
|
||||
aside {
|
||||
grid-area: comments;
|
||||
background-color: #ededed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
main {
|
||||
background-color: #282828;
|
||||
grid-area: video;
|
||||
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
video {
|
||||
max-width: 100%;
|
||||
max-height: 75vh;
|
||||
}
|
||||
|
||||
article {
|
||||
grid-area: text;
|
||||
background-color: white;
|
||||
padding: 4vh 5vw 4vh 2vw;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
article h1:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
article p:last-child {
|
||||
margin-bottom: 2vw;
|
||||
}
|
||||
|
||||
.comment {
|
||||
display: grid;
|
||||
padding: 3vh 2vw 3vh 1.5vw;
|
||||
font-size: 0.88rem;
|
||||
|
||||
column-gap: 12px;
|
||||
row-gap: 2px;
|
||||
grid-template-columns: max-content auto;
|
||||
grid-template-rows: max-content max-content;
|
||||
grid-template-areas:
|
||||
"icon time"
|
||||
"icon comment";
|
||||
border-bottom: 0.1vh solid #707070;
|
||||
}
|
||||
.comment:last-child {
|
||||
border: none;
|
||||
}
|
||||
.activeComment {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.icon {
|
||||
grid-area: icon;
|
||||
margin-top: 4px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.time {
|
||||
grid-area: time;
|
||||
color: #c1c1c1;
|
||||
}
|
||||
|
||||
.commentText {
|
||||
grid-area: comment;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
@ -0,0 +1,61 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
viewBox="0 0 36 32.400002"
|
||||
width="36"
|
||||
height="32.400002"
|
||||
version="1.1"
|
||||
id="svg6"
|
||||
sodipodi:docname="closed-captioning-active.svg"
|
||||
inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07, custom)">
|
||||
<metadata
|
||||
id="metadata12">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs10" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="746"
|
||||
inkscape:window-height="1005"
|
||||
id="namedview8"
|
||||
showgrid="false"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
inkscape:zoom="4.6927083"
|
||||
inkscape:cx="-19.78161"
|
||||
inkscape:cy="26.506288"
|
||||
inkscape:window-x="1920"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg6"
|
||||
inkscape:document-rotation="0" />
|
||||
<path
|
||||
d="M 34.2,0 C 35.1936,0 36,0.8064 36,1.8 v 28.8 c 0,0.9936 -0.8064,1.8 -1.8,1.8 H 1.8 C 0.8064,32.4 0,31.5936 0,30.6 V 1.8 C 0,0.8064 0.8064,0 1.8,0 Z M 12.6,9 c -3.9744,0 -7.2,3.2256 -7.2,7.2 0,3.9744 3.2256,7.2 7.2,7.2 1.98,0 3.78,-0.81 5.0904,-2.1096 L 15.1452,18.7452 C 14.4954,19.3968 13.5954,19.8 12.6,19.8 10.611,19.8 9,18.189 9,16.2 c 0,-1.989 1.611,-3.6 3.6,-3.6 0.99,0 1.8864,0.396 2.547,1.0566 l 2.5452,-2.5452 C 16.389,9.8064 14.589,9 12.6,9 Z m 12.6,0 c -3.9744,0 -7.2,3.2256 -7.2,7.2 0,3.9744 3.2256,7.2 7.2,7.2 1.9872,0 3.7872,-0.8064 5.0904,-2.1096 L 27.7452,18.7452 C 27.0936,19.3968 26.1936,19.8 25.2,19.8 c -1.989,0 -3.6,-1.611 -3.6,-3.6 0,-1.989 1.611,-3.6 3.6,-3.6 0.9954,0 1.8954,0.4032 2.547,1.0566 l 2.5452,-2.5452 C 28.989,9.8064 27.189,9 25.2,9 Z"
|
||||
id="path4"
|
||||
style="fill:#ffa800;fill-opacity:1;stroke-width:1.8"
|
||||
sodipodi:nodetypes="ssssssssssssccsssccssssccsssccs" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
@ -0,0 +1,61 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
viewBox="0 0 36 32.400002"
|
||||
width="36"
|
||||
height="32.400002"
|
||||
version="1.1"
|
||||
id="svg6"
|
||||
sodipodi:docname="closed-captioning.svg"
|
||||
inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07, custom)">
|
||||
<metadata
|
||||
id="metadata12">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs10" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="746"
|
||||
inkscape:window-height="1005"
|
||||
id="namedview8"
|
||||
showgrid="false"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
inkscape:zoom="4.6927083"
|
||||
inkscape:cx="-19.78161"
|
||||
inkscape:cy="26.506288"
|
||||
inkscape:window-x="1920"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg6"
|
||||
inkscape:document-rotation="0" />
|
||||
<path
|
||||
d="M 34.2,0 C 35.1936,0 36,0.8064 36,1.8 v 28.8 c 0,0.9936 -0.8064,1.8 -1.8,1.8 H 1.8 C 0.8064,32.4 0,31.5936 0,30.6 V 1.8 C 0,0.8064 0.8064,0 1.8,0 Z M 12.6,9 c -3.9744,0 -7.2,3.2256 -7.2,7.2 0,3.9744 3.2256,7.2 7.2,7.2 1.98,0 3.78,-0.81 5.0904,-2.1096 L 15.1452,18.7452 C 14.4954,19.3968 13.5954,19.8 12.6,19.8 10.611,19.8 9,18.189 9,16.2 c 0,-1.989 1.611,-3.6 3.6,-3.6 0.99,0 1.8864,0.396 2.547,1.0566 l 2.5452,-2.5452 C 16.389,9.8064 14.589,9 12.6,9 Z m 12.6,0 c -3.9744,0 -7.2,3.2256 -7.2,7.2 0,3.9744 3.2256,7.2 7.2,7.2 1.9872,0 3.7872,-0.8064 5.0904,-2.1096 L 27.7452,18.7452 C 27.0936,19.3968 26.1936,19.8 25.2,19.8 c -1.989,0 -3.6,-1.611 -3.6,-3.6 0,-1.989 1.611,-3.6 3.6,-3.6 0.9954,0 1.8954,0.4032 2.547,1.0566 l 2.5452,-2.5452 C 28.989,9.8064 27.189,9 25.2,9 Z"
|
||||
id="path4"
|
||||
style="fill:#c1c1c1;fill-opacity:1;stroke-width:1.8"
|
||||
sodipodi:nodetypes="ssssssssssssccsssccssssccsssccs" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
@ -0,0 +1,60 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
viewBox="0 0 33.929565 40"
|
||||
width="33.929565"
|
||||
height="40"
|
||||
version="1.1"
|
||||
id="svg6"
|
||||
sodipodi:docname="play-active.svg"
|
||||
inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07, custom)">
|
||||
<metadata
|
||||
id="metadata12">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs10" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="746"
|
||||
inkscape:window-height="1005"
|
||||
id="namedview8"
|
||||
showgrid="false"
|
||||
fit-margin-top="7"
|
||||
fit-margin-left="7"
|
||||
fit-margin-right="7"
|
||||
fit-margin-bottom="7"
|
||||
inkscape:zoom="9.3854166"
|
||||
inkscape:cx="1.9933429"
|
||||
inkscape:cy="32.174597"
|
||||
inkscape:window-x="1920"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg6"
|
||||
inkscape:document-rotation="0" />
|
||||
<path
|
||||
d="M 26.547059,20.714801 8.3350972,32.856109 A 0.85913585,0.85913585 0 0 1 7,32.141308 V 7.8586921 A 0.85913585,0.85913585 0 0 1 8.3350972,7.1438911 L 26.547059,19.285199 a 0.85913585,0.85913585 0 0 1 0,1.429602 z"
|
||||
id="path4"
|
||||
style="fill:#ffa800;fill-opacity:1;stroke-width:1.71827" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@ -0,0 +1,60 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
viewBox="0 0 33.929565 40"
|
||||
width="33.929565"
|
||||
height="40"
|
||||
version="1.1"
|
||||
id="svg6"
|
||||
sodipodi:docname="play-fill.svg"
|
||||
inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07, custom)">
|
||||
<metadata
|
||||
id="metadata12">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs10" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1280"
|
||||
inkscape:window-height="1007"
|
||||
id="namedview8"
|
||||
showgrid="false"
|
||||
fit-margin-top="7"
|
||||
fit-margin-left="7"
|
||||
fit-margin-right="7"
|
||||
fit-margin-bottom="7"
|
||||
inkscape:zoom="9.3854166"
|
||||
inkscape:cx="19.520535"
|
||||
inkscape:cy="32.174597"
|
||||
inkscape:window-x="1920"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg6"
|
||||
inkscape:document-rotation="0" />
|
||||
<path
|
||||
d="M 26.547059,20.714801 8.3350972,32.856109 A 0.85913585,0.85913585 0 0 1 7,32.141308 V 7.8586921 A 0.85913585,0.85913585 0 0 1 8.3350972,7.1438911 L 26.547059,19.285199 a 0.85913585,0.85913585 0 0 1 0,1.429602 z"
|
||||
id="path4"
|
||||
style="fill:#c1c1c1;fill-opacity:1;stroke-width:1.71827" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M21 15l-6 5.996L4.002 21A.998.998 0 0 1 3 20.007V3.993C3 3.445 3.445 3 3.993 3h16.014c.548 0 .993.456.993 1.002V15zM19 5H5v14h8v-5a1 1 0 0 1 .883-.993L14 13l5-.001V5zm-.829 9.999L15 15v3.169l3.171-3.17z"/></svg>
|
||||
|
After Width: | Height: | Size: 340 B |
@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ToViCo</title>
|
||||
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="./js/controller.js"></script>
|
||||
|
||||
<script src="./js/main.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<aside>
|
||||
<div class="comment">
|
||||
<object data="./img/closed-captioning.svg" type="image/svg+xml" class="icon"></object>
|
||||
<div class="time">01:74</div>
|
||||
<div class="commentText">Lorem ipsum dolor sit amet.</div>
|
||||
</div>
|
||||
<div class="comment activeComment">
|
||||
<object data="./img/play.svg" type="image/svg+xml" class="icon activeIcon"></object>
|
||||
<div class="time">02:62</div>
|
||||
<div class="commentText">Lorem ipsum, dolor sit amet consectetur.</div>
|
||||
</div>
|
||||
<div class="comment">
|
||||
<object data="./img/closed-captioning.svg" type="image/svg+xml" class="icon"></object>
|
||||
<div class="time">02:62</div>
|
||||
<div class="commentText">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas magni qui itaque? Magnam dolorum et, iure nobis velit sed minima repudiandae.</div>
|
||||
</div>
|
||||
<div class="comment">
|
||||
<object data="./img/closed-captioning.svg" type="image/svg+xml" class="icon"></object>
|
||||
<div class="time">02:62</div>
|
||||
<div class="commentText">Lorem ipsum, dolor sit amet consectetur.</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main>
|
||||
<video controls preload="auto">
|
||||
<source src="video.mp4" type="video/mp4">
|
||||
</souce>
|
||||
</video>
|
||||
<div class="video-controls hidden" id="video-controls">
|
||||
<div class="video-progress">
|
||||
<progress id="progress-bar" value="0" min="0"></progress>
|
||||
<input class="seek" id="seek" value="0" min="0" type="range" step="1">
|
||||
<div class="seek-tooltip" id="seek-tooltip">00:00</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<article>
|
||||
<h1>Nadpis velký</h1>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum sunt, quo incidunt modi nostrum harum. Deserunt accusamus doloribus numquam ut? Sequi et provident modi eveniet enim repellat error mollitia explicabo!</p>
|
||||
|
||||
<h2>Nadpis menší</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores sunt animi veritatis.</p>
|
||||
|
||||
<h3>Nadpis nejmenší</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores sunt animi veritatis.</p>
|
||||
|
||||
</article>
|
||||
</body>
|
||||
<script>
|
||||
var mySVG = document.getElementsByClassName("activeIcon")[0];
|
||||
var svgDoc;
|
||||
mySVG.addEventListener("load", function() {
|
||||
svgDoc = mySVG.contentDocument;
|
||||
svgDoc.getElementById("path4").style.fill = "#ffa800";
|
||||
}, false);
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,9 @@
|
||||
class Controller {
|
||||
constructor() {
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
console.log("here");
|
||||
}
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
const app = new Controller();
|
||||
Reference in New Issue