Matt Mascarenhas
parent
4572817837
commit
59d03c91bb
|
|
@ -1,80 +0,0 @@
|
|||
.title {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
.title > a {
|
||||
color: rgba(38, 139, 210, 1);
|
||||
}
|
||||
|
||||
.title > a:visited {
|
||||
color: rgba(38, 139, 210, 1);
|
||||
}
|
||||
|
||||
.title .refs_container {
|
||||
transition: box-shadow 800ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
box-shadow: inset 0 0 0 #B57714;
|
||||
}
|
||||
|
||||
.title .refs_container:hover {
|
||||
background-color: #666;
|
||||
}
|
||||
|
||||
.title .refs_container.current {
|
||||
box-shadow: inset 0px 0px 30px #B57714;
|
||||
}
|
||||
|
||||
.title .refs_container .refs {
|
||||
background-color: black;
|
||||
border: 3px solid #444;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.title .refs_container > .refs .ref {
|
||||
border-bottom: 1px solid rgb(51, 51, 51);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.title .refs_container > .refs .ref.current {
|
||||
background-color: #8B3D23;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.title .refs_container > .refs .ref:hover {
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
.title .refs_container > .refs .ref.current:hover {
|
||||
background-color: rgba(139, 61, 35, 0.7);
|
||||
}
|
||||
|
||||
.title .refs_container > .refs .ref .source {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.markers_container > .marker {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.markers_container > .marker:hover > .content {
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
.markers_container > .marker:hover .faded .content {
|
||||
background-color: rgba(139, 61, 35, 0.7);
|
||||
color: black;
|
||||
}
|
||||
|
||||
.markers_container > .marker > .content {
|
||||
background-color: #161616;
|
||||
color: #8A877D;
|
||||
}
|
||||
|
||||
.markers_container > .marker.current > .content {
|
||||
color: #B57714;
|
||||
}
|
||||
|
||||
.markers_container > .marker .progress .content {
|
||||
background-color: #8B3D23;
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
|
@ -1,145 +0,0 @@
|
|||
.title.hmdshow,
|
||||
.title.hmdshow > .menu .refs,
|
||||
.title.hmdshow > .menu .filter_container,
|
||||
.title.hmdshow > .menu > .refs .ref,
|
||||
.title.hmdshow > .menu > .filter_container .filter_mode,
|
||||
.title.hmdshow > .menu > .credits_container,
|
||||
.title.hmdshow > .menu > .credits_container .credit,
|
||||
.markers_container.hmdshow,
|
||||
.markers_container.hmdshow > .marker {
|
||||
background-color: #EEE;
|
||||
border-color: rgba(120, 4, 4, 0.8);
|
||||
}
|
||||
|
||||
.title.hmdshow,
|
||||
.title.hmdshow > .menu > .refs .ref,
|
||||
.title.hmdshow > .menu > .refs .ref .timecode.focused:before,
|
||||
.title.hmdshow > .menu > .credits_container .credit .name,
|
||||
.markers_container.hmdshow > .marker > .content {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.title.hmdshow > .menu {
|
||||
transition: box-shadow 800ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
box-shadow: inset 0 0 0 #CB957A;
|
||||
}
|
||||
|
||||
.title.hmdshow > .menu.current {
|
||||
box-shadow: inset 0px 0px 30px #CB957A;
|
||||
}
|
||||
|
||||
.title.hmdshow > .menu > .refs .ref .ref_indices .timecode.focused,
|
||||
.markers_container.hmdshow > .marker.current > .content {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.title.hmdshow > .menu > .refs .ref.current .ref_indices .timecode.focused {
|
||||
color: rgba(120, 4, 4, 0.8);
|
||||
}
|
||||
|
||||
.title.hmdshow > .menu.visible,
|
||||
|
||||
.title.hmdshow > .menu > .quotes_container .ref.focused,
|
||||
.title.hmdshow > .menu > .references_container .ref.focused,
|
||||
|
||||
.title.hmdshow > .menu > .filter_container .filter_mode:hover,
|
||||
.title.hmdshow > .menu > .filter_container .filter_content.focused,
|
||||
|
||||
.title.hmdshow > .menu > .credits_container .credit *.focused,
|
||||
|
||||
.markers_container.hmdshow > .marker:hover > .content {
|
||||
background-color: #CB957A;
|
||||
}
|
||||
|
||||
.title.hmdshow > .menu > .refs .ref.current .source,
|
||||
.title.hmdshow > .menu > .refs .ref.current .quote_byline,
|
||||
.title.hmdshow > .menu > .refs .ref.current .ref_indices .timecode.focused:before {
|
||||
color: #C4C4C4;
|
||||
}
|
||||
|
||||
.title.hmdshow > .menu > .refs .ref.current,
|
||||
.markers_container.hmdshow > .marker > .progress .content {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.title.hmdshow > .menu > .refs .ref.current,
|
||||
.markers_container.hmdshow > .marker > .progress .content {
|
||||
background-color: rgb(203, 149, 122);
|
||||
}
|
||||
|
||||
.markers_container.hmdshow > .marker:hover > .faded .content {
|
||||
background-color: rgba(203, 149, 122, 0.7);
|
||||
}
|
||||
|
||||
.title.hmdshow > .menu > .refs .ref .source,
|
||||
.title.hmdshow > .menu > .refs .ref .quote_byline,
|
||||
.title.hmdshow > .menu > .filter_container .filter_content.off .text,
|
||||
.title.hmdshow > .menu > .credits_container .credit .role {
|
||||
color: #3D3D3D;
|
||||
}
|
||||
|
||||
/* Blackboard */
|
||||
.title.hmdshow .filter_content.blackboard,
|
||||
.markers_container.hmdshow .blackboard > .content,
|
||||
.markers_container.hmdshow .off_blackboard > .content,
|
||||
.markers_container.hmdshow > .marker.blackboard > .progress .content,
|
||||
.markers_container.hmdshow > .marker:hover.blackboard > .faded .content {
|
||||
background-size: 12px 12px;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.title.hmdshow .filter_content.blackboard,
|
||||
.markers_container.hmdshow .blackboard > .content {
|
||||
background-image: linear-gradient(to right , rgba(51, 153, 255, .16) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(51, 153, 255, .16) 1px, transparent 1px);
|
||||
}
|
||||
|
||||
.markers_container.hmdshow .off_blackboard > .content {
|
||||
background-image: linear-gradient(to right , rgba(51, 153, 255, .08) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(51, 153, 255, .08) 1px, transparent 1px);
|
||||
}
|
||||
|
||||
.markers_container.hmdshow > .marker.blackboard > .progress .content {
|
||||
background-image: linear-gradient(to right , rgba(255, 255, 255, .16) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255, 255, 255, .16) 1px, transparent 1px);
|
||||
}
|
||||
|
||||
.markers_container.hmdshow > .marker:hover.blackboard > .faded .content {
|
||||
background-image: linear-gradient(to right , rgba(0, 0, 0, .16) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(0, 0, 0, .16) 1px, transparent 1px);
|
||||
}
|
||||
|
||||
/* TODO(matt):
|
||||
*
|
||||
* .markers_container.hmdshow > marker.run
|
||||
*/
|
||||
|
||||
@keyframes hmdshow_fade_mode {
|
||||
0% { color: #FFF; }
|
||||
100% { color: #000; }
|
||||
}
|
||||
|
||||
@keyframes hmdshow_fade_text {
|
||||
0% { color: #000; }
|
||||
100% { color: #888; }
|
||||
}
|
||||
|
||||
@keyframes hmdshow_fade_background {
|
||||
0% { background-color: rgba(246, 178, 26, 0.8);}
|
||||
100% { background-color: #EEE; }
|
||||
}
|
||||
|
||||
/* TODO(matt): Get this to work! */
|
||||
.title.hmdshow > .menu > .filter_container .filter_mode.responsible {
|
||||
animation-name: hmdshow_fade_mode;
|
||||
}
|
||||
|
||||
.title.hmdshow .filter_content.responsible .text {
|
||||
animation-name: hmdshow_fade_text;
|
||||
}
|
||||
|
||||
.title.hmdshow > .menu.filter.responsible,
|
||||
.title.hmdshow .filter_content.responsible,
|
||||
.title.hmdshow > .menu > .filter_container .filter_mode.responsible {
|
||||
animation-name: hmdshow_fade_background;
|
||||
}
|
||||
|
|
@ -1,145 +0,0 @@
|
|||
.title.lecture,
|
||||
.title.lecture > .menu .refs,
|
||||
.title.lecture > .menu .filter_container,
|
||||
.title.lecture > .menu > .refs .ref,
|
||||
.title.lecture > .menu > .filter_container .filter_mode,
|
||||
.title.lecture > .menu > .credits_container,
|
||||
.title.lecture > .menu > .credits_container .credit,
|
||||
.markers_container.lecture,
|
||||
.markers_container.lecture > .marker {
|
||||
background-color: #EEE;
|
||||
border-color: rgba(120, 4, 4, 0.8);
|
||||
}
|
||||
|
||||
.title.lecture,
|
||||
.title.lecture > .menu > .refs .ref,
|
||||
.title.lecture > .menu > .refs .ref .timecode.focused:before,
|
||||
.title.lecture > .menu > .credits_container .credit .name,
|
||||
.markers_container.lecture > .marker > .content {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.title.lecture > .menu {
|
||||
transition: box-shadow 800ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
box-shadow: inset 0 0 0 #CB957A;
|
||||
}
|
||||
|
||||
.title.lecture > .menu.current {
|
||||
box-shadow: inset 0px 0px 30px #CB957A;
|
||||
}
|
||||
|
||||
.title.lecture > .menu > .refs .ref .ref_indices .timecode.focused,
|
||||
.markers_container.lecture > .marker.current > .content {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.title.lecture > .menu > .refs .ref.current .ref_indices .timecode.focused {
|
||||
color: rgba(120, 4, 4, 0.8);
|
||||
}
|
||||
|
||||
.title.lecture > .menu.visible,
|
||||
|
||||
.title.lecture > .menu > .quotes_container .ref.focused,
|
||||
.title.lecture > .menu > .references_container .ref.focused,
|
||||
|
||||
.title.lecture > .menu > .filter_container .filter_mode:hover,
|
||||
.title.lecture > .menu > .filter_container .filter_content.focused,
|
||||
|
||||
.title.lecture > .menu > .credits_container .credit *.focused,
|
||||
|
||||
.markers_container.lecture > .marker:hover > .content {
|
||||
background-color: #CB957A;
|
||||
}
|
||||
|
||||
.title.lecture > .menu > .refs .ref.current .source,
|
||||
.title.lecture > .menu > .refs .ref.current .quote_byline,
|
||||
.title.lecture > .menu > .refs .ref.current .ref_indices .timecode.focused:before {
|
||||
color: #C4C4C4;
|
||||
}
|
||||
|
||||
.title.lecture > .menu > .refs .ref.current,
|
||||
.markers_container.lecture > .marker > .progress .content {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.title.lecture > .menu > .refs .ref.current,
|
||||
.markers_container.lecture > .marker > .progress .content {
|
||||
background-color: rgb(203, 149, 122);
|
||||
}
|
||||
|
||||
.markers_container.lecture > .marker:hover > .faded .content {
|
||||
background-color: rgba(203, 149, 122, 0.7);
|
||||
}
|
||||
|
||||
.title.lecture > .menu > .refs .ref .source,
|
||||
.title.lecture > .menu > .refs .ref .quote_byline,
|
||||
.title.lecture > .menu > .filter_container .filter_content.off .text,
|
||||
.title.lecture > .menu > .credits_container .credit .role {
|
||||
color: #3D3D3D;
|
||||
}
|
||||
|
||||
/* Blackboard */
|
||||
.title.lecture .filter_content.blackboard,
|
||||
.markers_container.lecture .blackboard > .content,
|
||||
.markers_container.lecture .off_blackboard > .content,
|
||||
.markers_container.lecture > .marker.blackboard > .progress .content,
|
||||
.markers_container.lecture > .marker:hover.blackboard > .faded .content {
|
||||
background-size: 12px 12px;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.title.lecture .filter_content.blackboard,
|
||||
.markers_container.lecture .blackboard > .content {
|
||||
background-image: linear-gradient(to right , rgba(51, 153, 255, .16) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(51, 153, 255, .16) 1px, transparent 1px);
|
||||
}
|
||||
|
||||
.markers_container.lecture .off_blackboard > .content {
|
||||
background-image: linear-gradient(to right , rgba(51, 153, 255, .08) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(51, 153, 255, .08) 1px, transparent 1px);
|
||||
}
|
||||
|
||||
.markers_container.lecture > .marker.blackboard > .progress .content {
|
||||
background-image: linear-gradient(to right , rgba(255, 255, 255, .16) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255, 255, 255, .16) 1px, transparent 1px);
|
||||
}
|
||||
|
||||
.markers_container.lecture > .marker:hover.blackboard > .faded .content {
|
||||
background-image: linear-gradient(to right , rgba(0, 0, 0, .16) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(0, 0, 0, .16) 1px, transparent 1px);
|
||||
}
|
||||
|
||||
/* TODO(matt):
|
||||
*
|
||||
* .markers_container.lecture > marker.run
|
||||
*/
|
||||
|
||||
@keyframes lecture_fade_mode {
|
||||
0% { color: #FFF; }
|
||||
100% { color: #000; }
|
||||
}
|
||||
|
||||
@keyframes lecture_fade_text {
|
||||
0% { color: #000; }
|
||||
100% { color: #888; }
|
||||
}
|
||||
|
||||
@keyframes lecture_fade_background {
|
||||
0% { background-color: rgba(246, 178, 26, 0.8);}
|
||||
100% { background-color: #EEE; }
|
||||
}
|
||||
|
||||
/* TODO(matt): Get this to work! */
|
||||
.title.lecture > .menu > .filter_container .filter_mode.responsible {
|
||||
animation-name: lecture_fade_mode;
|
||||
}
|
||||
|
||||
.title.lecture .filter_content.responsible .text {
|
||||
animation-name: lecture_fade_text;
|
||||
}
|
||||
|
||||
.title.lecture > .menu.filter.responsible,
|
||||
.title.lecture .filter_content.responsible,
|
||||
.title.lecture > .menu > .filter_container .filter_mode.responsible {
|
||||
animation-name: lecture_fade_background;
|
||||
}
|
||||
|
|
@ -1,175 +0,0 @@
|
|||
/*
|
||||
* Colours:
|
||||
* Main Purple: #372F46 or rgba(55, 47, 70, 1);
|
||||
* Highlight Green: #3A4A3F or rbga(58, 74, 63, 1);
|
||||
*/
|
||||
|
||||
.title.obbg {
|
||||
background-color: #EEE;
|
||||
color: #000;
|
||||
border-color: #372F46;
|
||||
}
|
||||
|
||||
.title.obbg .menu {
|
||||
transition: box-shadow 800ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
box-shadow: inset 0 0 0 #372F46;
|
||||
}
|
||||
|
||||
.title.obbg .menu:hover {
|
||||
background-color: #FFF8E7;
|
||||
}
|
||||
|
||||
.title.obbg > .menu.current {
|
||||
box-shadow: inset 0px 0px 30px #372F46;
|
||||
}
|
||||
|
||||
.title.obbg .menu .refs {
|
||||
background-color: #EEE;
|
||||
border-color: #372F46;
|
||||
}
|
||||
|
||||
.title.obbg .menu > .refs .ref {
|
||||
border-color: #372F46;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.title.obbg .menu > .refs .ref.current {
|
||||
background-color: #372F46;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.title.obbg .menu > .refs .ref:hover {
|
||||
background-color: #DDD;
|
||||
}
|
||||
|
||||
.title.obbg .menu > .refs .ref.current:hover {
|
||||
background-color: #68557E;
|
||||
}
|
||||
|
||||
.title.obbg .menu > .refs .ref .source {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.title.obbg .menu > .refs .ref .quote_byline {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.title.obbg .menu > .refs .ref.current .source {
|
||||
color: #FFF8E7;
|
||||
}
|
||||
|
||||
/* Regular */
|
||||
.markers_container.obbg {
|
||||
background-color: #EEE;
|
||||
}
|
||||
|
||||
.markers_container.obbg > .marker {
|
||||
border-color: #888;
|
||||
}
|
||||
|
||||
.markers_container.obbg > .marker:hover > .content {
|
||||
background-color: #DDD;
|
||||
}
|
||||
|
||||
.markers_container.obbg > .marker:hover > .faded .content {
|
||||
background-color: #68557E;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.markers_container.obbg > .marker > .content {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.markers_container.obbg > .marker.current > .content {
|
||||
color: #102369;
|
||||
}
|
||||
|
||||
.markers_container.obbg > .marker > .progress .content {
|
||||
background-color: #372C44;
|
||||
color: #EEE;
|
||||
}
|
||||
|
||||
/* Blackboard */
|
||||
.markers_container.obbg > .marker:hover.blackboard > .content {
|
||||
background-color: #FFF8E7;
|
||||
background-size: 12px 12px;
|
||||
background-image: linear-gradient(to right , rgba(51, 153, 255, .16) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(51, 153, 255, .16) 1px, transparent 1px);
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.markers_container.obbg > .marker:hover.blackboard > .faded .content {
|
||||
background-color: rgba(42, 49, 114, 0.7);
|
||||
background-size: 12px 12px;
|
||||
background-image: linear-gradient(to right , rgba(0, 0, 0, .16) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(0, 0, 0, .16) 1px, transparent 1px);
|
||||
background-position: center;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.markers_container.obbg > .marker.blackboard > .content {
|
||||
background-color: #FFFFFF;
|
||||
background-size: 12px 12px;
|
||||
background-image: linear-gradient(to right , rgba(51, 153, 255, .16) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(51, 153, 255, .16) 1px, transparent 1px);
|
||||
background-position: center;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.markers_container.obbg > .marker.blackboard.current > .content {
|
||||
color: #2A3172;
|
||||
}
|
||||
|
||||
.markers_container.obbg > .marker.blackboard > .progress .content {
|
||||
background-color: #2A3172;
|
||||
background-size: 12px 12px;
|
||||
background-image: linear-gradient(to right , rgba(255, 255, 255, .16) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255, 255, 255, .16) 1px, transparent 1px);
|
||||
background-position: center;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* TODO(matt):
|
||||
*
|
||||
* .markers_container.obbg > marker.run
|
||||
*/
|
||||
|
||||
/* Run */
|
||||
.markers_container.obbg > .marker.run > .content {
|
||||
background: rgb(114,171,206); /* Old browsers */
|
||||
background: -moz-linear-gradient(top, rgba(114,171,206,.5) 0%, rgba(82,178,82,.5) 18%, rgba(82,178,82,.5) 22%, rgba(198,194,110,.5) 38%, rgba(198,194,110,.5) 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(top, rgba(114,171,206,.5) 0%,rgba(82,178,82,.5) 18%,rgba(82,178,82,.5) 22%,rgba(198,194,110,.5) 38%,rgba(198,194,110,.5) 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(to bottom, rgba(114,171,206,.5) 0%,rgba(82,178,82,.5) 18%,rgba(82,178,82,.5) 22%,rgba(198,194,110,.5) 38%,rgba(198,194,110,.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#72abce', endColorstr='#c6c26e',GradientType=0 ); /* IE6-9 */
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.markers_container.obbg > .marker:hover.run > .content {
|
||||
background: rgb(114,171,206); /* Old browsers */
|
||||
background: -moz-linear-gradient(top, rgba(114,171,206,.5) 0%, rgba(82,178,82,.5) 18%, rgba(82,178,82,.5) 22%, rgba(198,194,110,.5) 38%, rgba(198,194,110,.5) 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(top, rgba(114,171,206,.5) 0%,rgba(82,178,82,.5) 18%,rgba(82,178,82,.5) 22%,rgba(198,194,110,.5) 38%,rgba(198,194,110,.5) 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(to bottom, rgba(114,171,206,.6) 0%,rgba(82,178,82,.6) 18%,rgba(82,178,82,.6) 22%,rgba(198,194,110,.6) 38%,rgba(198,194,110,.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#72abce', endColorstr='#c6c26e',GradientType=0 ); /* IE6-9 */
|
||||
}
|
||||
|
||||
.markers_container.obbg > .marker:hover.run > .faded .content {
|
||||
background-color: rgba(42, 49, 114, 0.7);
|
||||
background-size: 12px 12px;
|
||||
background-image: linear-gradient(to right , rgba(0, 0, 0, .16) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(0, 0, 0, .16) 1px, transparent 1px);
|
||||
background-position: center;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.markers_container.obbg > .marker.run.current > .content {
|
||||
color: #2A3172;
|
||||
}
|
||||
|
||||
.markers_container.obbg > .marker.run > .progress .content {
|
||||
background-color: #2A3172;
|
||||
background-size: 12px 12px;
|
||||
background-image: linear-gradient(to right , rgba(255, 255, 255, .16) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255, 255, 255, .16) 1px, transparent 1px);
|
||||
background-position: center;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
|
@ -1,145 +0,0 @@
|
|||
.title.special,
|
||||
.title.special > .menu .refs,
|
||||
.title.special > .menu .filter_container,
|
||||
.title.special > .menu > .refs .ref,
|
||||
.title.special > .menu > .filter_container .filter_mode,
|
||||
.title.special > .menu > .credits_container,
|
||||
.title.special > .menu > .credits_container .credit,
|
||||
.markers_container.special,
|
||||
.markers_container.special > .marker {
|
||||
background-color: #EEE;
|
||||
border-color: rgba(120, 4, 4, 0.8);
|
||||
}
|
||||
|
||||
.title.special,
|
||||
.title.special > .menu > .refs .ref,
|
||||
.title.special > .menu > .refs .ref .timecode.focused:before,
|
||||
.title.special > .menu > .credits_container .credit .name,
|
||||
.markers_container.special > .marker > .content {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.title.special > .menu {
|
||||
transition: box-shadow 800ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
box-shadow: inset 0 0 0 #CB957A;
|
||||
}
|
||||
|
||||
.title.special > .menu.current {
|
||||
box-shadow: inset 0px 0px 30px #CB957A;
|
||||
}
|
||||
|
||||
.title.special > .menu > .refs .ref .ref_indices .timecode.focused,
|
||||
.markers_container.special > .marker.current > .content {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.title.special > .menu > .refs .ref.current .ref_indices .timecode.focused {
|
||||
color: rgba(120, 4, 4, 0.8);
|
||||
}
|
||||
|
||||
.title.special > .menu.visible,
|
||||
|
||||
.title.special > .menu > .quotes_container .ref.focused,
|
||||
.title.special > .menu > .references_container .ref.focused,
|
||||
|
||||
.title.special > .menu > .filter_container .filter_mode:hover,
|
||||
.title.special > .menu > .filter_container .filter_content.focused,
|
||||
|
||||
.title.special > .menu > .credits_container .credit *.focused,
|
||||
|
||||
.markers_container.special > .marker:hover > .content {
|
||||
background-color: #CB957A;
|
||||
}
|
||||
|
||||
.title.special > .menu > .refs .ref.current .source,
|
||||
.title.special > .menu > .refs .ref.current .quote_byline,
|
||||
.title.special > .menu > .refs .ref.current .ref_indices .timecode.focused:before {
|
||||
color: #C4C4C4;
|
||||
}
|
||||
|
||||
.title.special > .menu > .refs .ref.current,
|
||||
.markers_container.special > .marker > .progress .content {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.title.special > .menu > .refs .ref.current,
|
||||
.markers_container.special > .marker > .progress .content {
|
||||
background-color: rgb(203, 149, 122);
|
||||
}
|
||||
|
||||
.markers_container.special > .marker:hover > .faded .content {
|
||||
background-color: rgba(203, 149, 122, 0.7);
|
||||
}
|
||||
|
||||
.title.special > .menu > .refs .ref .source,
|
||||
.title.special > .menu > .refs .ref .quote_byline,
|
||||
.title.special > .menu > .filter_container .filter_content.off .text,
|
||||
.title.special > .menu > .credits_container .credit .role {
|
||||
color: #3D3D3D;
|
||||
}
|
||||
|
||||
/* Blackboard */
|
||||
.title.special .filter_content.blackboard,
|
||||
.markers_container.special .blackboard > .content,
|
||||
.markers_container.special .off_blackboard > .content,
|
||||
.markers_container.special > .marker.blackboard > .progress .content,
|
||||
.markers_container.special > .marker:hover.blackboard > .faded .content {
|
||||
background-size: 12px 12px;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.title.special .filter_content.blackboard,
|
||||
.markers_container.special .blackboard > .content {
|
||||
background-image: linear-gradient(to right , rgba(51, 153, 255, .16) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(51, 153, 255, .16) 1px, transparent 1px);
|
||||
}
|
||||
|
||||
.markers_container.special .off_blackboard > .content {
|
||||
background-image: linear-gradient(to right , rgba(51, 153, 255, .08) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(51, 153, 255, .08) 1px, transparent 1px);
|
||||
}
|
||||
|
||||
.markers_container.special > .marker.blackboard > .progress .content {
|
||||
background-image: linear-gradient(to right , rgba(255, 255, 255, .16) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255, 255, 255, .16) 1px, transparent 1px);
|
||||
}
|
||||
|
||||
.markers_container.special > .marker:hover.blackboard > .faded .content {
|
||||
background-image: linear-gradient(to right , rgba(0, 0, 0, .16) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(0, 0, 0, .16) 1px, transparent 1px);
|
||||
}
|
||||
|
||||
/* TODO(matt):
|
||||
*
|
||||
* .markers_container.special > marker.run
|
||||
*/
|
||||
|
||||
@keyframes special_fade_mode {
|
||||
0% { color: #FFF; }
|
||||
100% { color: #000; }
|
||||
}
|
||||
|
||||
@keyframes special_fade_text {
|
||||
0% { color: #000; }
|
||||
100% { color: #888; }
|
||||
}
|
||||
|
||||
@keyframes special_fade_background {
|
||||
0% { background-color: rgba(246, 178, 26, 0.8);}
|
||||
100% { background-color: #EEE; }
|
||||
}
|
||||
|
||||
/* TODO(matt): Get this to work! */
|
||||
.title.special > .menu > .filter_container .filter_mode.responsible {
|
||||
animation-name: special_fade_mode;
|
||||
}
|
||||
|
||||
.title.special .filter_content.responsible .text {
|
||||
animation-name: special_fade_text;
|
||||
}
|
||||
|
||||
.title.special > .menu.filter.responsible,
|
||||
.title.special .filter_content.responsible,
|
||||
.title.special > .menu > .filter_container .filter_mode.responsible {
|
||||
animation-name: special_fade_background;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 987 B |
|
|
@ -1,60 +0,0 @@
|
|||
.category.platform-layer { border: 1px solid hsl(160, 81%, 26%); background: hsl(160, 81%, 26%); }
|
||||
.category.font { border: 1px solid hsl(13, 87%, 26%); background: hsl(13, 87%, 26%); }
|
||||
.category.input-handling { border: 1px solid hsl(335, 94%, 26%); background: hsl(335, 94%, 26%); }
|
||||
.category.inventory { border: 1px solid hsl(111, 79%, 26%); background: hsl(111, 79%, 26%); }
|
||||
.category.hardware { border: 1px solid hsl(284, 94%, 26%); background: hsl(284, 94%, 26%); }
|
||||
.category.math { border: 1px solid hsl(185, 74%, 26%); background: hsl(185, 74%, 26%); }
|
||||
.category.demo { border: 1px solid hsl(113, 95%, 26%); background: hsl(113, 95%, 26%); }
|
||||
.category.memory { border: 1px solid hsl(111, 89%, 26%); background: hsl(111, 89%, 26%); }
|
||||
.category.mesh-building { border: 1px solid hsl(334, 99%, 26%); background: hsl(334, 99%, 26%); }
|
||||
.category.rendering { border: 1px solid hsl(140, 79%, 26%); background: hsl(140, 79%, 26%); }
|
||||
.category.procedural-generation { border: 1px solid hsl(186, 87%, 26%); background: hsl(186, 87%, 26%); }
|
||||
.category.asset-loading { border: 1px solid hsl(18, 76%, 26%); background: hsl(18, 76%, 26%); }
|
||||
.category.game-development { border: 1px solid hsl(58, 96%, 26%); background: hsl(58, 96%, 26%); }
|
||||
.category.level-of-detail { border: 1px solid hsl(211, 97%, 26%); background: hsl(211, 97%, 26%); }
|
||||
.category.lighting { border: 1px solid hsl(40, 76%, 26%); background: hsl(40, 76%, 26%); }
|
||||
.category.game { border: 1px solid hsl(315, 84%, 26%); background: hsl(315, 84%, 26%); }
|
||||
.category.optimisation { border: 1px solid hsl(327, 86%, 26%); background: hsl(327, 86%, 26%); }
|
||||
.category.threading { border: 1px solid hsl(25, 97%, 26%); background: hsl(25, 97%, 26%); }
|
||||
.category.maths { border: 1px solid hsl(84, 88%, 26%); background: hsl(84, 88%, 26%); }
|
||||
.category.camera { border: 1px solid hsl(141, 89%, 26%); background: hsl(141, 89%, 26%); }
|
||||
.category.collision { border: 1px solid hsl(342, 93%, 26%); background: hsl(342, 93%, 26%); }
|
||||
.category.physics { border: 1px solid hsl(242, 94%, 26%); background: hsl(242, 94%, 26%); }
|
||||
.category.movement { border: 1px solid hsl(341, 97%, 26%); background: hsl(341, 97%, 26%); }
|
||||
.category.debug-visualisation { border: 1px solid hsl(60, 86%, 26%); background: hsl(60, 86%, 26%); }
|
||||
.category.programming { border: 1px solid hsl(283, 84%, 26%); background: hsl(283, 84%, 26%); }
|
||||
.category.networking { border: 1px solid hsl(10, 94%, 26%); background: hsl(10, 94%, 26%); }
|
||||
.category.network { border: 1px solid hsl(342, 75%, 26%); background: hsl(342, 75%, 26%); }
|
||||
.category.object-system { border: 1px solid hsl(87, 80%, 26%); background: hsl(87, 80%, 26%); }
|
||||
.category.language { border: 1px solid hsl(142, 84%, 26%); background: hsl(142, 84%, 26%); }
|
||||
.category.asm { border: 1px solid hsl(71, 92%, 26%); background: hsl(71, 92%, 26%); }
|
||||
.category.game-design { border: 1px solid hsl(162, 92%, 26%); background: hsl(162, 92%, 26%); }
|
||||
.category.art { border: 1px solid hsl(157, 76%, 26%); background: hsl(157, 76%, 26%); }
|
||||
.category.entity-system { border: 1px solid hsl(275, 92%, 26%); background: hsl(275, 92%, 26%); }
|
||||
.category.animation { border: 1px solid hsl(170, 81%, 26%); background: hsl(170, 81%, 26%); }
|
||||
.category.sorting { border: 1px solid hsl(285, 97%, 26%); background: hsl(285, 97%, 26%); }
|
||||
.category.particle-system { border: 1px solid hsl(116, 99%, 26%); background: hsl(116, 99%, 26%); }
|
||||
.category.simulation { border: 1px solid hsl(328, 91%, 26%); background: hsl(328, 91%, 26%); }
|
||||
.category.save---load { border: 1px solid hsl(120, 93%, 26%); background: hsl(120, 93%, 26%); }
|
||||
.category.logistics { border: 1px solid hsl(54, 76%, 26%); background: hsl(54, 76%, 26%); }
|
||||
.category.parsing { border: 1px solid hsl(27, 79%, 26%); background: hsl(27, 79%, 26%); }
|
||||
.category.profiling { border: 1px solid hsl(314, 91%, 26%); background: hsl(314, 91%, 26%); }
|
||||
.category.prng { border: 1px solid hsl(13, 87%, 26%); background: hsl(13, 87%, 26%); }
|
||||
.category.ui { border: 1px solid hsl(43, 94%, 26%); background: hsl(43, 94%, 26%); }
|
||||
.category.audio { border: 1px solid hsl(287, 77%, 26%); background: hsl(287, 77%, 26%); }
|
||||
.category.pathfinding { border: 1px solid hsl(314, 87%, 26%); background: hsl(314, 87%, 26%); }
|
||||
.category.simd { border: 1px solid hsl(229, 77%, 26%); background: hsl(229, 77%, 26%); }
|
||||
.category.mesh-chunk { border: 1px solid hsl(75, 89%, 26%); background: hsl(75, 89%, 26%); }
|
||||
.category.ai { border: 1px solid hsl(115, 74%, 26%); background: hsl(115, 74%, 26%); }
|
||||
.category.driver { border: 1px solid hsl(285, 76%, 26%); background: hsl(285, 76%, 26%); }
|
||||
.category.fabrication { border: 1px solid hsl(169, 77%, 26%); background: hsl(169, 77%, 26%); }
|
||||
.category.peripheral { border: 1px solid hsl(327, 92%, 26%); background: hsl(327, 92%, 26%); }
|
||||
.category.biology { border: 1px solid hsl(40, 80%, 26%); background: hsl(40, 80%, 26%); }
|
||||
.category.mathematics { border: 1px solid hsl(9, 91%, 26%); background: hsl(9, 91%, 26%); }
|
||||
.category.platform { border: 1px solid hsl(256, 91%, 26%); background: hsl(256, 91%, 26%); }
|
||||
.category.string-manipulation { border: 1px solid hsl(16, 82%, 26%); background: hsl(16, 82%, 26%); }
|
||||
.category.timing { border: 1px solid hsl(228, 94%, 26%); background: hsl(228, 94%, 26%); }
|
||||
.category.performance { border: 1px solid hsl(38, 93%, 26%); background: hsl(38, 93%, 26%); }
|
||||
.category.number-systems { border: 1px solid hsl(246, 86%, 26%); background: hsl(246, 86%, 26%); }
|
||||
.category.formula { border: 1px solid hsl(55, 81%, 26%); background: hsl(55, 81%, 26%); }
|
||||
.category.linear-algebra { border: 1px solid hsl(60, 76%, 26%); background: hsl(60, 76%, 26%); }
|
||||
Binary file not shown.
|
|
@ -1,85 +0,0 @@
|
|||
edition Project;
|
||||
|
||||
paths
|
||||
{
|
||||
# In HMN, root would be the directory that serves up https://hero.handmade.network/episodes where the searcher will reside
|
||||
root "/usr/local/www/test";
|
||||
# All *.hmml files below the repo_remote location are to be pulled in to the system with the directories being compared with
|
||||
# the member and project settings from the [video] node
|
||||
repo_remote "https://git.handmade.network/Annotation-Pushers/Annotation-Game";
|
||||
repo_local "/usr/local/www/repo";
|
||||
# The automatic stub creator will use the stub_base as its base directory
|
||||
stub_base "${repo_local}/projects";
|
||||
|
||||
quotes_remote "";
|
||||
quotes_local "";
|
||||
}
|
||||
|
||||
authentication
|
||||
{
|
||||
# NOTE(matt): Do we need any more auth stuff? Surely we will
|
||||
repo_token "";
|
||||
quotes_token "";
|
||||
}
|
||||
|
||||
project_info
|
||||
{
|
||||
riscy # Note that settings that open blocks do not end in a ; thus distinguishing them from variables set at the same scope
|
||||
{
|
||||
# We need to set member and platform in the config file so the stub generator can do its thing. Maybe consider further,
|
||||
# though, whether the [video] node in our .hmml files still needs to take them
|
||||
member = "miotatsu";
|
||||
platform = "youtube";
|
||||
|
||||
feed = "https://www.youtube.com/feeds/videos.xml?user=BathtubBlogger";
|
||||
project_name "RISCY BUSINESS";
|
||||
project_unit "Day";
|
||||
title_pattern "${project_name} - ${project_unit} ${number} - ${title}";
|
||||
# TODO(matt): Work out this title_pattern with some actual stuff
|
||||
}
|
||||
}
|
||||
|
||||
# Comment to end of line
|
||||
credentials
|
||||
{
|
||||
funding_platform patreon; # This determines the logo and URL-generation, and we'll need to specify the platforms we support.
|
||||
# A more flexible, if verbose, alternative would be to make each config specify a funding_icon and
|
||||
# the full funding_url
|
||||
#
|
||||
# Note that this setting cascades down to the child scopes, i.e. Miblo{}, miotatsu{}, etc
|
||||
|
||||
Miblo # The single-word name we use in the .hmml files, which also matches the username of project owners
|
||||
{
|
||||
display_name "Matt Mascarenhas"; # Optional, and may optionally be surrounded by quotes
|
||||
homepage "http://miblodelcarpio.co.uk/"; # May optionally be quoted, as the admin prefers, but must be quoted if
|
||||
# containing a ; (which is a valid character according to:
|
||||
# https://url.spec.whatwg.org/#userinfo-percent-encode-set)
|
||||
#
|
||||
# For a Network Edition instance, it may be nice, although not mandatory, if
|
||||
# the homepage is set to the member's profile page in the Network
|
||||
avatar "some_location.png"; # TODO(matt): Mock up the Credits Menu to determine whether or not we want this
|
||||
funding_username miblo;
|
||||
}
|
||||
|
||||
miotatsu
|
||||
{
|
||||
display_name "Mio Iwakura";
|
||||
homepage "http://riscy.tv/";
|
||||
funding_username miotatsu;
|
||||
}
|
||||
|
||||
_yunsup_lee # Prefixing with _ could be the convention for guests who are not in the member base of the (associated) network
|
||||
# If so, maybe throw a warning for the annotator when a _-prefixed member is not present in the config
|
||||
{
|
||||
display_name "Yunsup Lee";
|
||||
homepage "https://www.linkedin.com/in/yunsup-lee-385b692b";
|
||||
}
|
||||
|
||||
_andrew_waterman
|
||||
{
|
||||
display_name "Andrew Waterman";
|
||||
homepage "https://www.linkedin.com/in/andrew-waterman-76805788";
|
||||
}
|
||||
}
|
||||
|
||||
# NOTE(matt): Semantic characters, which may require \-escaping: ; # { " $
|
||||
|
|
@ -1,98 +0,0 @@
|
|||
#ifndef HMML_H_
|
||||
#define HMML_H_
|
||||
#include <stdint.h>
|
||||
#include <stddef.h>
|
||||
#include <stdbool.h>
|
||||
#include <stdio.h>
|
||||
|
||||
// Data structures
|
||||
|
||||
typedef struct {
|
||||
char* member;
|
||||
char* stream_platform;
|
||||
char* stream_username;
|
||||
char* project;
|
||||
char* title;
|
||||
char* vod_platform;
|
||||
char* id;
|
||||
|
||||
char** co_hosts;
|
||||
size_t co_host_count;
|
||||
|
||||
char** guests;
|
||||
size_t guest_count;
|
||||
|
||||
char** annotators;
|
||||
size_t annotator_count;
|
||||
} HMML_VideoMetaData;
|
||||
|
||||
typedef struct {
|
||||
char* site;
|
||||
char* page;
|
||||
char* url;
|
||||
char* title;
|
||||
char* article;
|
||||
char* author;
|
||||
char* editor;
|
||||
char* publisher;
|
||||
char* isbn;
|
||||
int offset;
|
||||
} HMML_Reference;
|
||||
|
||||
typedef enum {
|
||||
HMML_CATEGORY,
|
||||
HMML_MEMBER,
|
||||
HMML_PROJECT,
|
||||
|
||||
HMML_MARKER_COUNT,
|
||||
} HMML_MarkerType;
|
||||
|
||||
typedef struct {
|
||||
HMML_MarkerType type;
|
||||
char* marker;
|
||||
char* parameter;
|
||||
char* episode;
|
||||
int offset;
|
||||
} HMML_Marker;
|
||||
|
||||
typedef struct {
|
||||
int id;
|
||||
char* author;
|
||||
} HMML_Quote;
|
||||
|
||||
typedef struct {
|
||||
int line;
|
||||
char* time;
|
||||
char* text;
|
||||
char* author;
|
||||
|
||||
HMML_Reference* references;
|
||||
size_t reference_count;
|
||||
|
||||
HMML_Marker* markers;
|
||||
size_t marker_count;
|
||||
|
||||
HMML_Quote quote;
|
||||
bool is_quote;
|
||||
} HMML_Annotation;
|
||||
|
||||
typedef struct {
|
||||
int line;
|
||||
char* message;
|
||||
} HMML_Error;
|
||||
|
||||
typedef struct {
|
||||
bool well_formed;
|
||||
HMML_VideoMetaData metadata;
|
||||
HMML_Annotation* annotations;
|
||||
size_t annotation_count;
|
||||
HMML_Error error;
|
||||
} HMML_Output;
|
||||
|
||||
// Functions
|
||||
|
||||
HMML_Output hmml_parse_file (FILE* file);
|
||||
void hmml_dump (HMML_Output* output);
|
||||
void hmml_free (HMML_Output* output);
|
||||
|
||||
#endif
|
||||
|
|
@ -1,477 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<!-- Load the player -->
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<link rel="stylesheet" type="text/css" href="riscy.css">
|
||||
<link rel="stylesheet" type="text/css" href="topics.css">
|
||||
<script type="text/javascript" src="player.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
Player.initializeYoutube(function() {});
|
||||
</script>
|
||||
<div class="title riscy">
|
||||
<span class="episode_name">Coloured Nicks</span>
|
||||
<div class="menu">
|
||||
<span>Quotes ▼</span>
|
||||
<div class="mouse_catcher"></div>
|
||||
<div class="refs">
|
||||
<span data-id="α" class="ref">
|
||||
<span class="ref_content">
|
||||
<div class="source">Quote 1</div>
|
||||
<div class="ref_title">Stay RISCY, everyone</div>
|
||||
<div class="quote_byline">—miotatsu, Wed Nov 16 21:03:26 2016</div>
|
||||
</span>
|
||||
<div class="ref_indices">
|
||||
<span data-timestamp="176" class="timecode"><span class="ref_index">[α]</span><span class="time">2:56</span></span>
|
||||
</div>
|
||||
</span>
|
||||
<span data-id="β" class="ref">
|
||||
<span class="ref_content">
|
||||
<div class="source">Quote 2</div>
|
||||
<div class="ref_title">I dream of nice things</div>
|
||||
<div class="quote_byline">—miotatsu, Fri Dec 2 21:00:05 2016</div>
|
||||
</span>
|
||||
<div class="ref_indices">
|
||||
<span data-timestamp="312" class="timecode"><span class="ref_index">[β]</span><span class="time">5:12</span></span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu">
|
||||
<span>References ▼</span>
|
||||
<div class="mouse_catcher"></div>
|
||||
<div class="refs">
|
||||
<a data-id="https://en.wikipedia.org/wiki/Logic_gate" href="https://en.wikipedia.org/wiki/Logic_gate" target="_blank" class="ref">
|
||||
<span class="ref_content">
|
||||
<div class="source">Wikipedia</div>
|
||||
<div class="ref_title">Logic gate</div>
|
||||
</span>
|
||||
<div class="ref_indices">
|
||||
<span data-timestamp="60" class="timecode"><span class="ref_index">[1]</span><span class="time">1:00</span></span><span data-timestamp="624" class="timecode"><span class="ref_index">[3]</span><span class="time">10:24</span></span>
|
||||
</div>
|
||||
</a>
|
||||
<a data-id="0-7356-0505-X" href="http://www.charlespetzold.com/code/" target="_blank" class="ref">
|
||||
<span class="ref_content">
|
||||
<div class="source">Charles Petzold (Microsoft Press)</div>
|
||||
<div class="ref_title">Code: The Hidden Language of Computer Hardware and Software</div>
|
||||
</span>
|
||||
<div class="ref_indices">
|
||||
<span data-timestamp="60" class="timecode"><span class="ref_index">[2]</span><span class="time">1:00</span></span>
|
||||
</div>
|
||||
</a>
|
||||
<a data-id="https://handmade.network/" href="https://handmade.network/" target="_blank" class="ref">
|
||||
<span class="ref_content">
|
||||
<div class="ref_title">Handmade Network</div>
|
||||
</span>
|
||||
<div class="ref_indices">
|
||||
<span data-timestamp="754" class="timecode"><span class="ref_index">[4]</span><span class="time">12:34</span></span><span data-timestamp="992" class="timecode"><span class="ref_index">[5]</span><span class="time">16:32</span></span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu filter">
|
||||
<span><img src="hues_HCL.png"></span>
|
||||
<div class="filter">
|
||||
<div class="filter_mode inclusive">Filter mode: </div>
|
||||
<div class="filters">
|
||||
<div class="filter_topics">
|
||||
<div class="filter_title">Topics</div>
|
||||
<div class="filter_content rendering">
|
||||
<span class="icon category rendering"></span><span class="text">rendering</span>
|
||||
</div>
|
||||
<div class="filter_content hardware">
|
||||
<span class="icon category hardware"></span><span class="text">hardware</span>
|
||||
</div>
|
||||
<div class="filter_content mathematics">
|
||||
<span class="icon category mathematics"></span><span class="text">mathematics</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter_media">
|
||||
<div class="filter_title">Media</div>
|
||||
<div class="filter_content authored">
|
||||
<span class="icon">🗪</span><span class="text">authored</span>
|
||||
</div>
|
||||
<div class="filter_content blackboard">
|
||||
<span class="icon">🖌</span><span class="text">blackboard</span>
|
||||
</div>
|
||||
<div class="filter_content programming">
|
||||
<span class="icon">🖮</span><span class="text">programming</span>
|
||||
</div>
|
||||
<div class="filter_content rant">
|
||||
<span class="icon">💢</span><span class="text">rant</span>
|
||||
</div>
|
||||
<div class="filter_content research">
|
||||
<span class="icon">📖</span><span class="text">research</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="annotator_container">Annotator: <span class="annotator">Miblo</span></span>
|
||||
</div>
|
||||
<div class="player_container">
|
||||
<div class="video_container" data-videoId="ug5WkCROkOk"></div>
|
||||
<div class="markers_container riscy">
|
||||
<div data-timestamp="12" class="marker programming cat_rendering cat_hardware">
|
||||
<div class="content"><span class="timecode">0:12</span>Basic test with a little longer text<span class="categories"><div class="category rendering"></div><div class="category hardware"></div></span></div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">0:12</span>Basic test with a little longer text<span class="categories"><div class="category rendering"></div><div class="category hardware"></div></span></div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">0:12</span>Basic test with a little longer text<span class="categories"><div class="category rendering"></div><div class="category hardware"></div></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-timestamp="60" class="marker authored cat_rendering cat_hardware research" data-ref="https://en.wikipedia.org/wiki/Logic_gate,0-7356-0505-X">
|
||||
<div class="content"><span class="timecode">1:00</span><span class="author" style="color: hsl(257, 87%, 26%);">insofaras</span> Some text referring to <a href="https://handmade.network/m/zilarrezko" target="blank" style="color: hsl(83, 75%, 26%); text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding circuit design he saw in Code<sup>2</sup><span class="categories"><div class="category rendering"></div><div class="category hardware"></div></span></div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">1:00</span><span class="author" style="color: hsl(257, 87%, 26%);">insofaras</span> Some text referring to <a href="https://handmade.network/m/zilarrezko" target="blank" style="color: hsl(83, 75%, 26%); text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding circuit design he saw in Code<sup>2</sup><span class="categories"><div class="category rendering"></div><div class="category hardware"></div></span></div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">1:00</span><span class="author" style="color: hsl(257, 87%, 26%);">insofaras</span> Some text referring to <a href="https://handmade.network/m/zilarrezko" target="blank" style="color: hsl(83, 75%, 26%); text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding circuit design he saw in Code<sup>2</sup><span class="categories"><div class="category rendering"></div><div class="category hardware"></div></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-timestamp="176" class="marker programming" data-ref="α">
|
||||
<div class="content"><span class="timecode">2:56</span>“Stay RISCY, everyone”<sup>α</sup></div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">2:56</span>“Stay RISCY, everyone”<sup>α</sup></div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">2:56</span>“Stay RISCY, everyone”<sup>α</sup></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-timestamp="312" class="marker blackboard rant cat_mathematics" data-ref="β">
|
||||
<div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>β</sup><span class="categories"><div class="category mathematics"></div></span></div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>β</sup><span class="categories"><div class="category mathematics"></div></span></div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>β</sup><span class="categories"><div class="category mathematics"></div></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-timestamp="624" class="marker programming" data-ref="https://en.wikipedia.org/wiki/Logic_gate">
|
||||
<div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: hsl(26, 83%, 26%); text-decoration: none">milton</a> forum post<sup>3</sup></div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: hsl(26, 83%, 26%); text-decoration: none">milton</a> forum post<sup>3</sup></div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: hsl(26, 83%, 26%); text-decoration: none">milton</a> forum post<sup>3</sup></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-timestamp="630" class="marker rant">
|
||||
<div class="content"><span class="timecode">10:30</span>1. Some text. Simples!</div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">10:30</span>1. Some text. Simples!</div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">10:30</span>1. Some text. Simples!</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-timestamp="642" class="marker rant">
|
||||
<div class="content"><span class="timecode">10:42</span>2. Some text. Simples!</div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">10:42</span>2. Some text. Simples!</div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">10:42</span>2. Some text. Simples!</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-timestamp="754" class="marker programming" data-ref="https://handmade.network/">
|
||||
<div class="content"><span class="timecode">12:34</span>Something about the Handmade.Network<sup>4</sup></div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">12:34</span>Something about the Handmade.Network<sup>4</sup></div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">12:34</span>Something about the Handmade.Network<sup>4</sup></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-timestamp="992" class="marker programming" data-ref="https://handmade.network/">
|
||||
<div class="content"><span class="timecode">16:32</span>Something else about the Handmade.Network<sup>5</sup></div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">16:32</span>Something else about the Handmade.Network<sup>5</sup></div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">16:32</span>Something else about the Handmade.Network<sup>5</sup></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var player = new Player(document.querySelector(".player_container"), onRefChanged);
|
||||
window.addEventListener("resize", function() { player.updateSize(); });
|
||||
document.addEventListener("keypress", function(ev) {
|
||||
switch (ev.key) {
|
||||
case 'n':
|
||||
case 'd':
|
||||
case 's': {
|
||||
player.jumpToNextMarker();
|
||||
} break;
|
||||
|
||||
case 'p':
|
||||
case 'a':
|
||||
case 'w': {
|
||||
player.jumpToPrevMarker();
|
||||
} break;
|
||||
}
|
||||
});
|
||||
|
||||
var refTimecodes = document.querySelectorAll(".refs .ref .timecode");
|
||||
for (var i = 0; i < refTimecodes.length; ++i) {
|
||||
refTimecodes[i].addEventListener("click", function(ev) {
|
||||
if (player) {
|
||||
var time = ev.currentTarget.getAttribute("data-timestamp");
|
||||
player.setTime(parseInt(time, 10));
|
||||
player.play();
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var filter = document.querySelector(".filter");
|
||||
var filterModeElement = filter.querySelector(".filter_mode");
|
||||
var filterMode = filterModeElement.classList[1];
|
||||
|
||||
var filterState = { "rendering": { "type": "topic", "off": false },
|
||||
"hardware": { "type": "topic", "off": false },
|
||||
"mathematics": { "type": "topic", "off": false },
|
||||
"authored": { "type": "medium", "off": false },
|
||||
"blackboard": { "type": "medium", "off": false },
|
||||
"programming": { "type": "medium", "off": false },
|
||||
"rant": { "type": "medium", "off": false },
|
||||
"research": { "type": "medium", "off": false }};
|
||||
|
||||
// Filter Mode Toggle
|
||||
var testMarkers = document.querySelectorAll(".marker");
|
||||
filterModeElement.addEventListener("click", function(ev) {
|
||||
if(filterMode == "inclusive")
|
||||
{
|
||||
filterModeElement.classList.remove("inclusive");
|
||||
filterModeElement.classList.add("exclusive");
|
||||
filterMode = "exclusive";
|
||||
|
||||
for(var i = 0; i < testMarkers.length; ++i)
|
||||
{
|
||||
var testCategories = testMarkers[i].classList;
|
||||
for(var j = 0; j < testCategories.length; ++j)
|
||||
{
|
||||
if((testCategories[j].startsWith("off_")) && !testMarkers[i].classList.contains("skip"))
|
||||
{
|
||||
testMarkers[i].classList.add("skip");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
filterModeElement.classList.remove("exclusive");
|
||||
filterModeElement.classList.add("inclusive");
|
||||
filterMode = "inclusive";
|
||||
|
||||
for(var i = 0; i < testMarkers.length; ++i)
|
||||
{
|
||||
var testCategories = testMarkers[i].classList;
|
||||
for(var j = 0; j < testCategories.length; ++j)
|
||||
{
|
||||
if((testCategories[j] in filterState || testCategories[j].startsWith("cat_")) && testMarkers[i].classList.contains("skip"))
|
||||
{
|
||||
testMarkers[i].classList.remove("skip");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Filter Toggle
|
||||
var filterCategories = filter.querySelectorAll(".filter_topics .filter_content,.filter_media .filter_content");
|
||||
for(var i = 0; i < filterCategories.length; ++i)
|
||||
{
|
||||
filterCategories[i].addEventListener("click", function(ev) {
|
||||
var selectedCategory = this.classList[1];
|
||||
filterState[selectedCategory].off = !filterState[selectedCategory].off;
|
||||
|
||||
if(filterState[selectedCategory].off)
|
||||
{
|
||||
this.classList.add("off");
|
||||
var testMarkers = document.querySelectorAll(".marker." + selectedCategory + ", .marker.cat_" + selectedCategory);
|
||||
for(var j = 0; j < testMarkers.length; ++j)
|
||||
{
|
||||
if(filterState[selectedCategory].type == "topic")
|
||||
{
|
||||
testMarkers[j].classList.remove("cat_" + selectedCategory);
|
||||
testMarkers[j].classList.add("off_" + selectedCategory);
|
||||
var markerCategories = testMarkers[j].querySelectorAll(".category." + selectedCategory);
|
||||
for(var k = 0; k < markerCategories.length; ++k)
|
||||
{
|
||||
if(markerCategories[k].classList.contains(selectedCategory))
|
||||
{
|
||||
markerCategories[k].classList.add("off");
|
||||
}
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
testMarkers[j].classList.remove(selectedCategory);
|
||||
testMarkers[j].classList.add("off_" + selectedCategory);
|
||||
}
|
||||
|
||||
Skipping = 1;
|
||||
if(filterMode == "exclusive")
|
||||
{
|
||||
testMarkers[j].classList.add("skip");
|
||||
}
|
||||
else
|
||||
{
|
||||
var markerClasses = testMarkers[j].classList;
|
||||
for(var k = 0; k < markerClasses.length; ++k)
|
||||
{
|
||||
if(markerClasses[k] in filterState || markerClasses[k].replace(/^cat_/, "") in filterState)
|
||||
{
|
||||
Skipping = 0;
|
||||
}
|
||||
}
|
||||
if(Skipping)
|
||||
{
|
||||
testMarkers[j].classList.add("skip");
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
this.classList.remove("off");
|
||||
var testMarkers = document.querySelectorAll(".marker.off_" + selectedCategory);
|
||||
for(var j = 0; j < testMarkers.length; ++j)
|
||||
{
|
||||
if(filterState[selectedCategory].type == "topic")
|
||||
{
|
||||
testMarkers[j].classList.remove("off_" + selectedCategory);
|
||||
testMarkers[j].classList.add("cat_" + selectedCategory);
|
||||
var markerCategories = testMarkers[j].querySelectorAll(".category." + selectedCategory);
|
||||
for(var k = 0; k < markerCategories.length; ++k)
|
||||
{
|
||||
if(markerCategories[k].classList.contains(selectedCategory))
|
||||
{
|
||||
markerCategories[k].classList.remove("off");
|
||||
}
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
testMarkers[j].classList.remove("off_" + selectedCategory);
|
||||
testMarkers[j].classList.add(selectedCategory);
|
||||
}
|
||||
|
||||
Skipping = 0;
|
||||
if(filterMode == "inclusive")
|
||||
{
|
||||
testMarkers[j].classList.remove("skip");
|
||||
}
|
||||
else
|
||||
{
|
||||
var markerClasses = testMarkers[j].classList;
|
||||
for(var k = 0; k < markerClasses.length; ++k)
|
||||
{
|
||||
if(markerClasses[k].startsWith("off_"))
|
||||
{
|
||||
Skipping = 1;
|
||||
}
|
||||
}
|
||||
if(!Skipping)
|
||||
{
|
||||
testMarkers[j].classList.remove("skip");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var refSources = document.querySelectorAll(".refs .ref");
|
||||
for (var i = 0; i < refSources.length; ++i) {
|
||||
refSources[i].addEventListener("click", function(ev) {
|
||||
if (player) {
|
||||
player.pause();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function resetFade()
|
||||
{
|
||||
filter.classList.remove("responsible");
|
||||
filter.querySelector(".filter_mode").classList.remove("responsible");
|
||||
var responsibleCategories = filter.querySelectorAll(".filter_content.responsible");
|
||||
for(var i = 0; i < responsibleCategories.length; ++i)
|
||||
{
|
||||
responsibleCategories[i].classList.remove("responsible");
|
||||
}
|
||||
}
|
||||
|
||||
var sourceMenus = document.querySelectorAll(".menu");
|
||||
function onRefChanged(ref, element) {
|
||||
if(element.classList.contains("skip"))
|
||||
{
|
||||
if(!filter.classList.contains("responsible"))
|
||||
{
|
||||
filter.classList.add("responsible");
|
||||
}
|
||||
|
||||
for(var selector = 0; selector < element.classList.length; ++selector)
|
||||
{
|
||||
if(element.classList[selector].startsWith("off_"))
|
||||
{
|
||||
if(!filter.querySelector(".filter_content." + element.classList[selector].replace(/^off_/, "")).classList.contains("responsible"))
|
||||
{
|
||||
filter.querySelector(".filter_content." + element.classList[selector].replace(/^off_/, "")).classList.add("responsible");
|
||||
}
|
||||
}
|
||||
if((element.classList[selector].startsWith("cat_") || element.classList[selector] in filterState))
|
||||
{
|
||||
if(!filter.querySelector(".filter_mode").classList.add("responsible"))
|
||||
{
|
||||
filter.querySelector(".filter_mode").classList.add("responsible");
|
||||
}
|
||||
}
|
||||
setTimeout(resetFade, 8000);
|
||||
}
|
||||
player.jumpToNextMarker();
|
||||
return;
|
||||
}
|
||||
|
||||
for (var MenuIndex = 0; MenuIndex < sourceMenus.length; ++MenuIndex)
|
||||
{
|
||||
var SetMenu = 0;
|
||||
if (ref !== undefined && ref !== null) {
|
||||
var refElements = sourceMenus[MenuIndex].querySelectorAll(".refs .ref");
|
||||
var refs = ref.split(",");
|
||||
|
||||
for (var i = 0; i < refElements.length; ++i) {
|
||||
if (refs.includes(refElements[i].getAttribute("data-id"))) {
|
||||
refElements[i].classList.add("current");
|
||||
SetMenu = 1;
|
||||
} else {
|
||||
refElements[i].classList.remove("current");
|
||||
}
|
||||
}
|
||||
if(SetMenu) {
|
||||
sourceMenus[MenuIndex].classList.add("current");
|
||||
} else {
|
||||
sourceMenus[MenuIndex].classList.remove("current");
|
||||
}
|
||||
|
||||
} else {
|
||||
sourceMenus[MenuIndex].classList.remove("current");
|
||||
var refs = sourceMenus[MenuIndex].querySelectorAll(".refs .ref");
|
||||
for (var i = 0; i < refs.length; ++i) {
|
||||
refs[i].classList.remove("current");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,421 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Coloured Nicks</title>
|
||||
|
||||
<!-- Load the player -->
|
||||
<script type="text/javascript" src="player.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<link rel="stylesheet" type="text/css" href="riscy.css">
|
||||
<link rel="stylesheet" type="text/css" href="topics.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="title riscy">
|
||||
<span class="episode_name">Coloured Nicks</span>
|
||||
<div class="menu quotes">
|
||||
<span>Quotes ▼</span>
|
||||
<div class="mouse_catcher"></div>
|
||||
<div class="refs quotes_container">
|
||||
<span data-id="α" class="ref">
|
||||
<span class="ref_content">
|
||||
<div class="source">Quote 1</div>
|
||||
<div class="ref_title">Stay RISCY, everyone</div>
|
||||
<div class="quote_byline">—miotatsu, Wed Nov 16 21:03:26 2016</div>
|
||||
</span>
|
||||
<div class="ref_indices">
|
||||
<span data-timestamp="176" class="timecode"><span class="ref_index">[α]</span><span class="time">2:56</span></span>
|
||||
</div>
|
||||
</span>
|
||||
<span data-id="β" class="ref">
|
||||
<span class="ref_content">
|
||||
<div class="source">Quote 2</div>
|
||||
<div class="ref_title">I dream of nice things</div>
|
||||
<div class="quote_byline">—miotatsu, Fri Dec 2 21:00:05 2016</div>
|
||||
</span>
|
||||
<div class="ref_indices">
|
||||
<span data-timestamp="312" class="timecode"><span class="ref_index">[β]</span><span class="time">5:12</span></span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu references">
|
||||
<span>References ▼</span>
|
||||
<div class="mouse_catcher"></div>
|
||||
<div class="refs references_container">
|
||||
<a data-id="https://en.wikipedia.org/wiki/Logic_gate" href="https://en.wikipedia.org/wiki/Logic_gate" target="_blank" class="ref">
|
||||
<span class="ref_content">
|
||||
<div class="source">Wikipedia</div>
|
||||
<div class="ref_title">Logic gate</div>
|
||||
</span>
|
||||
<div class="ref_indices">
|
||||
<span data-timestamp="60" class="timecode"><span class="ref_index">[1]</span><span class="time">1:00</span></span><span data-timestamp="624" class="timecode"><span class="ref_index">[4]</span><span class="time">10:24</span></span>
|
||||
</div>
|
||||
</a>
|
||||
<a data-id="0-7356-0505-X" href="http://www.charlespetzold.com/code/" target="_blank" class="ref">
|
||||
<span class="ref_content">
|
||||
<div class="source">Charles Petzold (Microsoft Press)</div>
|
||||
<div class="ref_title">Code: The Hidden Language of Computer Hardware and Software</div>
|
||||
</span>
|
||||
<div class="ref_indices">
|
||||
<span data-timestamp="60" class="timecode"><span class="ref_index">[2]</span><span class="time">1:00</span></span>
|
||||
</div>
|
||||
</a>
|
||||
<a data-id="0-7356-0505-Y" href="http://www.charlespetzold.com/code/again" target="_blank" class="ref">
|
||||
<span class="ref_content">
|
||||
<div class="source">Charles Petzold (Microsoft Press)</div>
|
||||
<div class="ref_title">Code Again: The Hidden Language of Computer Hardware and Software</div>
|
||||
</span>
|
||||
<div class="ref_indices">
|
||||
<span data-timestamp="60" class="timecode"><span class="ref_index">[3]</span><span class="time">1:00</span></span>
|
||||
</div>
|
||||
</a>
|
||||
<a data-id="https://handmade.network/" href="https://handmade.network/" target="_blank" class="ref">
|
||||
<span class="ref_content">
|
||||
<div class="ref_title">Handmade Network</div>
|
||||
</span>
|
||||
<div class="ref_indices">
|
||||
<span data-timestamp="754" class="timecode"><span class="ref_index">[5]</span><span class="time">12:34</span></span><span data-timestamp="992" class="timecode"><span class="ref_index">[6]</span><span class="time">16:32</span></span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu filter">
|
||||
<span><img src="hues_HCL.png"></span>
|
||||
<div class="filter_container">
|
||||
<div class="filter_mode inclusive">Filter mode: </div>
|
||||
<div class="filters">
|
||||
<div class="filter_topics">
|
||||
<div class="filter_title">Topics</div>
|
||||
<div class="filter_content hardware">
|
||||
<span class="icon category hardware"></span><span class="text">hardware</span>
|
||||
</div>
|
||||
<div class="filter_content mathematics">
|
||||
<span class="icon category mathematics"></span><span class="text">mathematics</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter_media">
|
||||
<div class="filter_title">Media</div>
|
||||
<div class="filter_content blackboard">
|
||||
<span class="icon">🖌</span><span class="text">Blackboard</span>
|
||||
</div>
|
||||
<div class="filter_content authored">
|
||||
<span class="icon">🗪</span><span class="text">Chat Comment</span>
|
||||
</div>
|
||||
<div class="filter_content default">
|
||||
<span class="icon">🖮</span><span class="text">Programming</span>
|
||||
</div>
|
||||
<div class="filter_content rant">
|
||||
<span class="icon">💢</span><span class="text">Rant</span>
|
||||
</div>
|
||||
<div class="filter_content research">
|
||||
<span class="icon">📖</span><span class="text">Research</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu credits">
|
||||
<div class="mouse_catcher"></div>
|
||||
<span>Credits</span>
|
||||
<div class="credits_container">
|
||||
<span class="credit">
|
||||
<a class="person" href="http://riscy.tv/" target="_blank">
|
||||
<div class="role">Host</div>
|
||||
<div class="name">Mio Iwakura</div>
|
||||
</a>
|
||||
<a class="support" href="http://patreon.com/miotatsu" target="_blank"><img src="patreon_logo.png"></a>
|
||||
</span>
|
||||
<span class="credit">
|
||||
<a class="person" href="http://miblodelcarpio.co.uk" target="_blank">
|
||||
<div class="role">Annotator</div>
|
||||
<div class="name">Matt Mascarenhas</div>
|
||||
</a>
|
||||
<a class="support" href="http://patreon.com/miblo" target="_blank"><img src="patreon_logo.png"></a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="help">
|
||||
<span>?</span>
|
||||
<div class="help_container">
|
||||
<span class="help_key">?</span><h1>Keyboard Navigation</h1>
|
||||
|
||||
<h2>Global Keys</h2>
|
||||
<span class="help_key">W</span>, <span class="help_key">A</span>, <span class="help_key">P</span> / <span class="help_key">S</span>, <span class="help_key">D</span>, <span class="help_key">N</span> <span class="help_text">Jump to previous / next marker</span><br>
|
||||
<span class="help_key">V</span> <span class="help_text">Reset filter</span> <span class="help_key">z</span> <span class="help_text">Toggle filter mode between "inclusive" and "exclusive"</span>
|
||||
|
||||
<h2>Menu toggling</h2>
|
||||
<span class="help_key">q</span> <span class="help_text">Quotes</span>
|
||||
<span class="help_key">r</span> <span class="help_text">References</span>
|
||||
<span class="help_key">f</span> <span class="help_text">Filter</span>
|
||||
<span class="help_key">c</span> <span class="help_text">Credits</span>
|
||||
|
||||
<h2>Movement</h2>
|
||||
<div class="help_paragraph">
|
||||
<div class="key_block">
|
||||
<div class="key_column" style="flex-grow: 1">
|
||||
<span class="help_key">a</span>
|
||||
</div>
|
||||
<div class="key_column" style="flex-grow: 2">
|
||||
<span class="help_key">w</span><br>
|
||||
<span class="help_key">s</span>
|
||||
</div>
|
||||
<div class="key_column" style="flex-grow: 1">
|
||||
<span class="help_key">d</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="help_text">/</span>
|
||||
<div class="key_block">
|
||||
<div style="flex-grow: 1">
|
||||
<span class="help_key">←</span>
|
||||
</div>
|
||||
<div style="flex-grow: 2">
|
||||
<span class="help_key">↑</span><br>
|
||||
<span class="help_key">↓</span>
|
||||
</div>
|
||||
<div style="flex-grow: 1">
|
||||
<span class="help_key">→</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="help_text">/</span>
|
||||
<div class="key_block">
|
||||
<span class="help_key">h</span>
|
||||
<span class="help_key">j</span>
|
||||
<span class="help_key">k</span>
|
||||
<span class="help_key">l</span>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<h2>Quotes and References Menus</h2>
|
||||
<span style="width: auto" class="help_key">Enter</span><span class="help_text">Jump to timecode</span><br>
|
||||
<h2>References and Credits Menus</h2>
|
||||
<span class="help_key">o</span><span class="help_text">Open URL (in new tab)</span>
|
||||
|
||||
<h2>Filter Menu</h2>
|
||||
<span class="help_key">x</span>, <span style="width: auto" class="help_key">Space</span><span class="help_text">Toggle category and focus next</span><br>
|
||||
<span class="help_key">X</span>, <span style="width: auto; margin-right: 0px" class="help_key">Shift</span><span style="width: auto" class="help_key">Space</span><span class="help_text">Toggle category and focus previous</span><br>
|
||||
<span class="help_key">v</span><span class="help_text">Invert topics / media as per focus</span>
|
||||
<h2>Credits Menu</h2>
|
||||
<span style="width: auto" class="help_key">Enter</span>, <span class="help_key">o</span><span class="help_text">Open URL (in new tab)</span><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="player_container">
|
||||
<div class="video_container" data-videoId="ug5WkCROkOk"></div>
|
||||
<div class="markers_container riscy">
|
||||
<div data-timestamp="60" class="marker authored cat_hardware research" data-ref="https://en.wikipedia.org/wiki/Logic_gate,0-7356-0505-X,0-7356-0505-Y">
|
||||
<div class="content"><span class="timecode">1:00</span><span class="author" style="color: hsl(257, 87%, 26%);">insofaras</span> Some text referring to <a href="https://handmade.network/m/zilarrezko" target="blank" style="color: hsl(83, 75%, 26%); text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding circuit design he saw in Code<sup>2</sup><sup>,3</sup><span class="categories"><div class="category hardware"></div></span></div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">1:00</span><span class="author" style="color: hsl(257, 87%, 26%);">insofaras</span> Some text referring to <a href="https://handmade.network/m/zilarrezko" target="blank" style="color: hsl(83, 75%, 26%); text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding circuit design he saw in Code<sup>2</sup><sup>,3</sup><span class="categories"><div class="category hardware"></div></span></div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">1:00</span><span class="author" style="color: hsl(257, 87%, 26%);">insofaras</span> Some text referring to <a href="https://handmade.network/m/zilarrezko" target="blank" style="color: hsl(83, 75%, 26%); text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding circuit design he saw in Code<sup>2</sup><sup>,3</sup><span class="categories"><div class="category hardware"></div></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-timestamp="176" class="marker default" data-ref="α">
|
||||
<div class="content"><span class="timecode">2:56</span>“Stay RISCY, everyone”<sup>α</sup></div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">2:56</span>“Stay RISCY, everyone”<sup>α</sup></div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">2:56</span>“Stay RISCY, everyone”<sup>α</sup></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-timestamp="312" class="marker blackboard rant cat_mathematics" data-ref="β">
|
||||
<div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>β</sup><span class="categories"><div class="category mathematics"></div></span></div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>β</sup><span class="categories"><div class="category mathematics"></div></span></div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>β</sup><span class="categories"><div class="category mathematics"></div></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-timestamp="624" class="marker default" data-ref="https://en.wikipedia.org/wiki/Logic_gate">
|
||||
<div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: hsl(26, 83%, 26%); text-decoration: none">milton</a> forum post<sup>4</sup></div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: hsl(26, 83%, 26%); text-decoration: none">milton</a> forum post<sup>4</sup></div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: hsl(26, 83%, 26%); text-decoration: none">milton</a> forum post<sup>4</sup></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-timestamp="642" class="marker rant">
|
||||
<div class="content"><span class="timecode">10:42</span>Some text. Simples!</div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">10:42</span>Some text. Simples!</div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">10:42</span>Some text. Simples!</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-timestamp="754" class="marker default" data-ref="https://handmade.network/">
|
||||
<div class="content"><span class="timecode">12:34</span>Something about the Handmade.Network<sup>5</sup></div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">12:34</span>Something about the Handmade.Network<sup>5</sup></div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">12:34</span>Something about the Handmade.Network<sup>5</sup></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-timestamp="992" class="marker default" data-ref="https://handmade.network/">
|
||||
<div class="content"><span class="timecode">16:32</span>Something else about the Handmade.Network<sup>6</sup></div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">16:32</span>Something else about the Handmade.Network<sup>6</sup></div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">16:32</span>Something else about the Handmade.Network<sup>6</sup></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
var menuState = [];
|
||||
// TODO(matt): Do all this conditional stuff in hmml_to_html.c
|
||||
var quotesMenu = document.querySelector(".quotes_container");
|
||||
if(quotesMenu)
|
||||
{
|
||||
menuState.push(quotesMenu);
|
||||
var quoteItems = quotesMenu.querySelectorAll(".ref");
|
||||
for(var i = 0; i < quoteItems.length; ++i)
|
||||
{
|
||||
quoteItems[i].addEventListener("mouseenter", function(ev) {
|
||||
mouseOverQuotes(this);
|
||||
})
|
||||
};
|
||||
var lastFocusedQuote = null;
|
||||
}
|
||||
var referencesMenu = document.querySelector(".references_container");
|
||||
if(referencesMenu)
|
||||
{
|
||||
menuState.push(referencesMenu);
|
||||
var referenceItems = referencesMenu.querySelectorAll(".ref");
|
||||
for(var i = 0; i < referenceItems.length; ++i)
|
||||
{
|
||||
referenceItems[i].addEventListener("mouseenter", function(ev) {
|
||||
mouseOverReferences(this);
|
||||
})
|
||||
};
|
||||
var lastFocusedReference = null;
|
||||
var lastFocusedIdentifier = null;
|
||||
}
|
||||
var filterMenu = document.querySelector(".filter_container");
|
||||
if(filterMenu)
|
||||
{
|
||||
menuState.push(filterMenu);
|
||||
var lastFocusedCategory = null;
|
||||
var lastFocusedTopic = null;
|
||||
var lastFocusedMedium = null;
|
||||
|
||||
var filter = filterMenu.parentNode;
|
||||
|
||||
var filterModeElement = filter.querySelector(".filter_mode");
|
||||
filterModeElement.addEventListener("click", function(ev) {
|
||||
toggleFilterMode();
|
||||
});
|
||||
|
||||
var filterMode = filterModeElement.classList[1];
|
||||
var filterItems = filter.querySelectorAll(".filter_content");
|
||||
for(var i = 0; i < filterItems.length; ++i)
|
||||
{
|
||||
filterItems[i].addEventListener("mouseenter", function(ev) {
|
||||
navigateFilter(this);
|
||||
})
|
||||
|
||||
filterItems[i].addEventListener("click", function(ev) {
|
||||
filterItemToggle(this);
|
||||
});
|
||||
}
|
||||
|
||||
// TODO(matt): Generate this
|
||||
var filterState = {
|
||||
"hardware": { "type": "topic", "off": false },
|
||||
"mathematics": { "type": "topic", "off": false },
|
||||
"blackboard": { "type": "medium", "off": false },
|
||||
"authored": { "type": "medium", "off": false },
|
||||
"default": { "type": "medium", "off": false },
|
||||
"rant": { "type": "medium", "off": false },
|
||||
"research": { "type": "medium", "off": false },
|
||||
};
|
||||
}
|
||||
|
||||
var creditsMenu = document.querySelector(".credits_container");
|
||||
if(creditsMenu)
|
||||
{
|
||||
menuState.push(creditsMenu);
|
||||
var lastFocusedCreditItem = null;
|
||||
|
||||
var creditItems = creditsMenu.querySelectorAll(".person, .support");
|
||||
for(var i = 0; i < creditItems.length; ++i)
|
||||
{
|
||||
creditItems[i].addEventListener("mouseenter", function(ev) {
|
||||
if(this != lastFocusedCreditItem)
|
||||
{
|
||||
lastFocusedCreditItem.classList.remove("focused");
|
||||
lastFocusedCreditItem = this;
|
||||
focusedElement = lastFocusedCreditItem;
|
||||
focusedElement.classList.add("focused");
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
var sourceMenus = document.querySelectorAll(".menu");
|
||||
|
||||
var helpButton = document.querySelector(".help");
|
||||
var helpDocumentation = helpButton.querySelector(".help_container");
|
||||
helpButton.addEventListener("click", function(ev) {
|
||||
handleMouseOverMenu(this, ev.type);
|
||||
})
|
||||
|
||||
var focusedElement = null;
|
||||
var focusedIdentifier = null;
|
||||
|
||||
var player = new Player(document.querySelector(".player_container"), onRefChanged);
|
||||
window.addEventListener("resize", function() { player.updateSize(); });
|
||||
document.addEventListener("keydown", function(ev) {
|
||||
var key = ev.key;
|
||||
if(ev.getModifierState("Shift") && key == " ")
|
||||
{
|
||||
key = "capitalSpace";
|
||||
}
|
||||
|
||||
if(handleKey(key) == true && focusedElement)
|
||||
{
|
||||
ev.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
for(var i = 0; i < sourceMenus.length; ++i)
|
||||
{
|
||||
sourceMenus[i].addEventListener("mouseenter", function(ev) {
|
||||
handleMouseOverMenu(this, ev.type);
|
||||
})
|
||||
sourceMenus[i].addEventListener("mouseleave", function(ev) {
|
||||
handleMouseOverMenu(this, ev.type);
|
||||
})
|
||||
};
|
||||
|
||||
var refTimecodes = document.querySelectorAll(".refs .ref .timecode");
|
||||
for (var i = 0; i < refTimecodes.length; ++i) {
|
||||
refTimecodes[i].addEventListener("click", function(ev) {
|
||||
if (player) {
|
||||
var time = ev.currentTarget.getAttribute("data-timestamp");
|
||||
mouseSkipToTimecode(player, time, ev);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var refSources = document.querySelectorAll(".refs .ref"); // This is for both quotes and refs
|
||||
for (var i = 0; i < refSources.length; ++i) {
|
||||
refSources[i].addEventListener("click", function(ev) {
|
||||
if (player) {
|
||||
player.pause();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var testMarkers = document.querySelectorAll(".marker");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,189 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<!-- Load the player -->
|
||||
<script type="text/javascript" src="player.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<link rel="stylesheet" type="text/css" href="topics.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="title">
|
||||
<span class="episode_name">Coloured Nicks</span>
|
||||
<div class="refs_container">
|
||||
<span>Quotes ▼</span>
|
||||
<div class="mouse_catcher"></div>
|
||||
<div class="refs">
|
||||
<span data-id="α" class="ref">
|
||||
<span class="ref_content">
|
||||
<div class="source">#1 • Quote date</div>
|
||||
<div class="ref_title">Quote text</div>
|
||||
</span>
|
||||
<div class="ref_indices">
|
||||
<span data-timestamp="176" class="timecode"><span class="ref_index">[α]</span><span class="time">2:56</span></span>
|
||||
</div>
|
||||
</span>
|
||||
<span data-id="β" class="ref">
|
||||
<span class="ref_content">
|
||||
<div class="source">#2 • Quote date</div>
|
||||
<div class="ref_title">Quote text</div>
|
||||
</span>
|
||||
<div class="ref_indices">
|
||||
<span data-timestamp="312" class="timecode"><span class="ref_index">[β]</span><span class="time">5:12</span></span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="refs_container">
|
||||
<span>References ▼</span>
|
||||
<div class="mouse_catcher"></div>
|
||||
<div class="refs">
|
||||
<a data-id="serge_rgb" href="http://example.com/" target="_blank" class="ref">
|
||||
<span class="ref_content">
|
||||
<div class="source">Source</div>
|
||||
<div class="ref_title">Title</div>
|
||||
</span>
|
||||
<div class="ref_indices">
|
||||
<span data-timestamp="60" class="timecode"><span class="ref_index">[1]</span><span class="time">1:00</span></span>
|
||||
</div>
|
||||
</a>
|
||||
<a data-id="milton_forum" href="http://example.com/" target="_blank" class="ref">
|
||||
<span class="ref_content">
|
||||
<div class="source">Source</div>
|
||||
<div class="ref_title">Title</div>
|
||||
</span>
|
||||
<div class="ref_indices">
|
||||
<span data-timestamp="60" class="timecode"><span class="ref_index">[2]</span><span class="time">1:00</span></span><span data-timestamp="624" class="timecode"><span class="ref_index">[3]</span><span class="time">10:24</span></span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<span class="annotator_container">Annotator: <span class="annotator">Miblo</span></span>
|
||||
</div>
|
||||
<div class="player_container">
|
||||
<div class="video_container" data-videoId="ug5WkCROkOk"></div>
|
||||
<div class="markers_container">
|
||||
<div data-timestamp="60" class="marker authored cat_rendering research" data-ref="serge_rgb,milton_forum">
|
||||
<div class="content"><span class="timecode">1:00</span><span class="author" style="color: #69D036;">insofaras</span> Some text referring to <a href="https://handmade.network/m/zilarrezko" target="blank" style="color: #8624DC; text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding triangle intersections he saw in the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forums<sup>2</sup><span class="categories"><div class="category rendering"></div></span></div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">1:00</span><span class="author" style="color: #69D036;">insofaras</span> Some text referring to <a href="https://handmade.network/m/zilarrezko" target="blank" style="color: #8624DC; text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding triangle intersections he saw in the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forums<sup>2</sup><span class="categories"><div class="category rendering"></div></span></div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">1:00</span><span class="author" style="color: #69D036;">insofaras</span> Some text referring to <a href="https://handmade.network/m/zilarrezko" target="blank" style="color: #8624DC; text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding triangle intersections he saw in the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forums<sup>2</sup><span class="categories"><div class="category rendering"></div></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-timestamp="176" class="marker" data-ref="α">
|
||||
<div class="content"><span class="timecode">2:56</span>“Quote text”<sup>α</sup></div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">2:56</span>“Quote text”<sup>α</sup></div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">2:56</span>“Quote text”<sup>α</sup></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-timestamp="312" class="marker blackboard cat_mathematics" data-ref="β">
|
||||
<div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>β</sup><span class="categories"><div class="category mathematics"></div></span></div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>β</sup><span class="categories"><div class="category mathematics"></div></span></div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>β</sup><span class="categories"><div class="category mathematics"></div></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-timestamp="624" class="marker" data-ref="milton_forum">
|
||||
<div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forum post<sup>3</sup></div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forum post<sup>3</sup></div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forum post<sup>3</sup></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-timestamp="642" class="marker">
|
||||
<div class="content"><span class="timecode">10:42</span>Some text. Simples!</div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">10:42</span>Some text. Simples!</div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">10:42</span>Some text. Simples!</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var player = new Player(document.querySelector(".player_container"), onRefChanged);
|
||||
window.addEventListener("resize", function() { player.updateSize(); });
|
||||
document.addEventListener("keypress", function(ev) {
|
||||
switch (ev.key) {
|
||||
case 'n':
|
||||
case 'd':
|
||||
case 's': {
|
||||
player.jumpToNextMarker();
|
||||
} break;
|
||||
|
||||
case 'p':
|
||||
case 'a':
|
||||
case 'w': {
|
||||
player.jumpToPrevMarker();
|
||||
} break;
|
||||
}
|
||||
});
|
||||
|
||||
var refTimecodes = document.querySelectorAll(".refs .ref .timecode");
|
||||
for (var i = 0; i < refTimecodes.length; ++i) {
|
||||
refTimecodes[i].addEventListener("click", function(ev) {
|
||||
if (player) {
|
||||
var time = ev.currentTarget.getAttribute("data-timestamp");
|
||||
player.setTime(parseInt(time, 10));
|
||||
player.play();
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var refSources = document.querySelectorAll(".refs .ref");
|
||||
for (var i = 0; i < refSources.length; ++i) {
|
||||
refSources[i].addEventListener("click", function(ev) {
|
||||
if (player) {
|
||||
player.pause();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onRefChanged(ref) {
|
||||
var sourceMenus = document.querySelectorAll(".refs_container");
|
||||
for (var MenuIndex = 0; MenuIndex < sourceMenus.length; ++MenuIndex)
|
||||
{
|
||||
var SetMenu = 0;
|
||||
if (ref !== undefined && ref !== null) {
|
||||
var refElements = sourceMenus[MenuIndex].querySelectorAll(".refs .ref");
|
||||
var refs = ref.split(",");
|
||||
|
||||
for (var i = 0; i < refElements.length; ++i) {
|
||||
if (refs.includes(refElements[i].getAttribute("data-id"))) {
|
||||
refElements[i].classList.add("current");
|
||||
SetMenu = 1;
|
||||
} else {
|
||||
refElements[i].classList.remove("current");
|
||||
}
|
||||
}
|
||||
if(SetMenu) {
|
||||
sourceMenus[MenuIndex].classList.add("current");
|
||||
} else {
|
||||
sourceMenus[MenuIndex].classList.remove("current");
|
||||
}
|
||||
|
||||
} else {
|
||||
sourceMenus[MenuIndex].classList.remove("current");
|
||||
var refs = sourceMenus[MenuIndex].querySelectorAll(".refs .ref");
|
||||
for (var i = 0; i < refs.length; ++i) {
|
||||
refs[i].classList.remove("current");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,190 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<!-- Load the player -->
|
||||
<script type="text/javascript" src="player.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="title">
|
||||
<span class="episode_name">Coloured Nicks</span>
|
||||
<div class="refs_container">
|
||||
<span>Quotes ▼</span>
|
||||
<div class="mouse_catcher"></div>
|
||||
<div class="refs">
|
||||
<span data-id="a" class="ref">
|
||||
<span class="ref_content">
|
||||
<div class="source">#1 • 2016-11-16</div>
|
||||
<div class="ref_title">Stay RISCY, everyone</div>
|
||||
</span>
|
||||
<div class="ref_indices">
|
||||
<span data-timestamp="176" class="timecode"><span class="ref_index">[a]</span><span class="time">2:56</span></span>
|
||||
</div>
|
||||
</span>
|
||||
<span data-id="b" class="ref">
|
||||
<span class="ref_content">
|
||||
<div class="source">#2 • 2016-12-02</div>
|
||||
<div class="ref_title">I dream of nice things</div>
|
||||
</span>
|
||||
<div class="ref_indices">
|
||||
<span data-timestamp="312" class="timecode"><span class="ref_index">[b]</span><span class="time">5:12</span></span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="refs_container">
|
||||
<span>References ▼</span>
|
||||
<div class="mouse_catcher"></div>
|
||||
<div class="refs">
|
||||
<a data-id="0" href="https://milton.handmade.network/forums/t/1550-idea_:_ability_to_move_panels_outside_of_the_milton_window" target="_blank" class="ref">
|
||||
<span class="ref_content">
|
||||
<div class="source">Milton Forums</div>
|
||||
<div class="ref_title">Idea : ability to move panels outside of the milton window?</div>
|
||||
</span>
|
||||
<div class="ref_indices">
|
||||
<span data-timestamp="60" class="timecode"><span class="ref_index">[1]</span><span class="time">1:00</span></span>
|
||||
</div>
|
||||
</a>
|
||||
<a data-id="1" href="https://milton.handmade.network/forums" target="_blank" class="ref">
|
||||
<span class="ref_content">
|
||||
<div class="source"></div>
|
||||
<div class="ref_title">Milton Forums</div>
|
||||
</span>
|
||||
<div class="ref_indices">
|
||||
<span data-timestamp="60" class="timecode"><span class="ref_index">[2]</span><span class="time">1:00</span></span>
|
||||
<span data-timestamp="624" class="timecode"><span class="ref_index">[3]</span><span class="time">10:24</span></span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<span class="annotator_container">Annotator: <span class="annotator">Miblo</span></span>
|
||||
</div>
|
||||
<div class="player_container">
|
||||
<div class="video_container" data-videoId="ug5WkCROkOk"></div>
|
||||
<div class="markers_container">
|
||||
<div class="marker authored cat_rendering research" data-timestamp="60" data-ref="0,1">
|
||||
<div class="content"><span class="timecode">1:00</span><span class="author" style="color: #69D036;">insofaras</span> Some text referring to <a href="https://handmade.network/m/Zilarrezko" target="blank" style="color: #8624DC; text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding triangle intersections he saw in the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forums<sup>2</sup><span class="categories"><div class="category rendering"></div></span></div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">1:00</span><span class="author" style="color: #69D036;">insofaras</span> Some text referring to <a href="https://handmade.network/m/Zilarrezko" target="blank" style="color: #8624DC; text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding triangle intersections he saw in the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forums<sup>2</sup><span class="categories"><div class="category rendering"></div></span></div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">1:00</span><span class="author" style="color: #69D036;">insofaras</span> Some text referring to <a href="https://handmade.network/m/Zilarrezko" target="blank" style="color: #8624DC; text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding triangle intersections he saw in the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forums<sup>2</sup><span class="categories"><div class="category rendering"></div></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="marker" data-timestamp="176" data-ref="a">
|
||||
<div class="content"><span class="timecode">2:56</span>"Stay RISCY, everyone"<sup>a</sup></div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">2:56</span>"Stay RISCY, everyone"<sup>a</sup></div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">2:56</span>"Stay RISCY, everyone"<sup>a</sup></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="marker blackboard" data-timestamp="312" data-ref="b">
|
||||
<div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>b</sup><span class="categories"><div class="category mathematics"></div></span></div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>b</sup><span class="categories"><div class="category mathematics"></div></span></div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>b</sup><span class="categories"><div class="category mathematics"></div></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="marker" data-timestamp="624" data-ref="1">
|
||||
<div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forum post<sup>3</sup></div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forum post<sup>3</sup></div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forum post<sup>3</sup></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="marker" data-timestamp="642">
|
||||
<div class="content"><span class="timecode">10:42</span>Some text. Simples!</div>
|
||||
<div class="progress faded">
|
||||
<div class="content"><span class="timecode">10:24</span>Some text. Simples!</div>
|
||||
</div>
|
||||
<div class="progress main">
|
||||
<div class="content"><span class="timecode">10:24</span>Some text. Simples!</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var player = new Player(document.querySelector(".player_container"), onRefChanged);
|
||||
window.addEventListener("resize", function() { player.updateSize(); });
|
||||
document.addEventListener("keypress", function(ev) {
|
||||
switch (ev.key) {
|
||||
case 'n':
|
||||
case 'd':
|
||||
case 's': {
|
||||
player.jumpToNextMarker();
|
||||
} break;
|
||||
|
||||
case 'p':
|
||||
case 'a':
|
||||
case 'w': {
|
||||
player.jumpToPrevMarker();
|
||||
} break;
|
||||
}
|
||||
});
|
||||
|
||||
var refTimecodes = document.querySelectorAll(".refs .ref .timecode");
|
||||
for (var i = 0; i < refTimecodes.length; ++i) {
|
||||
refTimecodes[i].addEventListener("click", function(ev) {
|
||||
if (player) {
|
||||
var time = ev.currentTarget.getAttribute("data-timestamp");
|
||||
player.setTime(parseInt(time, 10));
|
||||
player.play();
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var refSources = document.querySelectorAll(".refs .ref");
|
||||
for (var i = 0; i < refSources.length; ++i) {
|
||||
refSources[i].addEventListener("click", function(ev) {
|
||||
if (player) {
|
||||
player.pause();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onRefChanged(ref) {
|
||||
var sourceMenus = document.querySelectorAll(".refs_container");
|
||||
for (var MenuIndex = 0; MenuIndex < sourceMenus.length; ++MenuIndex)
|
||||
{
|
||||
var SetMenu = 0;
|
||||
if (ref !== undefined && ref !== null) {
|
||||
var refElements = sourceMenus[MenuIndex].querySelectorAll(".refs .ref");
|
||||
var refs = ref.split(",");
|
||||
|
||||
for (var i = 0; i < refElements.length; ++i) {
|
||||
if (refs.includes(refElements[i].getAttribute("data-id"))) {
|
||||
refElements[i].classList.add("current");
|
||||
SetMenu = 1;
|
||||
} else {
|
||||
refElements[i].classList.remove("current");
|
||||
}
|
||||
}
|
||||
if(SetMenu) {
|
||||
sourceMenus[MenuIndex].classList.add("current");
|
||||
} else {
|
||||
sourceMenus[MenuIndex].classList.remove("current");
|
||||
}
|
||||
|
||||
} else {
|
||||
sourceMenus[MenuIndex].classList.remove("current");
|
||||
var refs = sourceMenus[MenuIndex].querySelectorAll(".refs .ref");
|
||||
for (var i = 0; i < refs.length; ++i) {
|
||||
refs[i].classList.remove("current");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Preceding Text - <!-- __CINERA_TITLE__ --> - Following Text</title>
|
||||
<!-- __CINERA_INCLUDES__ -->
|
||||
</head>
|
||||
<body>
|
||||
<!-- __CINERA_MENUS__ -->
|
||||
<!-- __CINERA_PLAYER__ -->
|
||||
<!-- __CINERA_SCRIPT__ -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
[video member=miotatsu project=test title="Coloured Nicks" vod_platform=youtube id=ug5WkCROkOk annotator=Miblo]
|
||||
[0:12][:inventory :inventory]
|
||||
[1:00][@insofaras][π² Some text < > referring to @Zilarrezko about this thing[ref
|
||||
site=Wikipedia
|
||||
page="Logic < gate"
|
||||
url=https://en.wikipedia.org/wiki/Logic_gate] regarding [:hardware circuit design] he saw in Code[ref
|
||||
title="Code: The Hidden Language of Computer Hardware and Software"
|
||||
author="Charles Petzold"
|
||||
publisher="Microsoft Press"
|
||||
isbn=0-7356-0505-X
|
||||
url=http://www.charlespetzold.com/code/][ref
|
||||
title="Code Again: The Hidden Language of Computer Hardware and Software"
|
||||
author="Charles Petzold"
|
||||
publisher="Microsoft Press"
|
||||
isbn=0-7356-0505-Y
|
||||
url=http://www.charlespetzold.com/code/again]][:research]
|
||||
[2:56][][quote 1]
|
||||
[5:12][Matrix multiplication][:blackboard :rant :math][quote 2]
|
||||
[10:24][More stuff referring to the ~milton forum post[ref
|
||||
site=Wikipedia
|
||||
page="Logic gate"
|
||||
url=https://en.wikipedia.org/wiki/Logic_gate]]
|
||||
[10:42][Some text. Simples!][:rant]
|
||||
[12:34][Something about the Handmade.Network[ref
|
||||
site="Handmade Network"
|
||||
url=https://handmade.network/]]
|
||||
[16:32][Something else about the Handmade.Network[ref site="Handmade Network" url=https://handmade.network/]]
|
||||
[/video]
|
||||
Loading…
Reference in New Issue