Stop tracking hmml_to_html

Superseded by cinera
This commit is contained in:
Matt Mascarenhas 2017-11-13 23:49:58 +00:00
parent 4572817837
commit 59d03c91bb
16 changed files with 0 additions and 2249 deletions

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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

View File

@ -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.

View File

@ -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: ; # { " $

View File

@ -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

View File

@ -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 &#9660;</span>
<div class="mouse_catcher"></div>
<div class="refs">
<span data-id="&#945;" class="ref">
<span class="ref_content">
<div class="source">Quote 1</div>
<div class="ref_title">Stay RISCY, everyone</div>
<div class="quote_byline">&mdash;miotatsu, Wed Nov 16 21:03:26 2016</div>
</span>
<div class="ref_indices">
<span data-timestamp="176" class="timecode"><span class="ref_index">[&#945;]</span><span class="time">2:56</span></span>
</div>
</span>
<span data-id="&#946;" 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">&mdash;miotatsu, Fri Dec 2 21:00:05 2016</div>
</span>
<div class="ref_indices">
<span data-timestamp="312" class="timecode"><span class="ref_index">[&#946;]</span><span class="time">5:12</span></span>
</div>
</span>
</div>
</div>
<div class="menu">
<span>References &#9660;</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">&#128490;</span><span class="text">authored</span>
</div>
<div class="filter_content blackboard">
<span class="icon">&#128396;</span><span class="text">blackboard</span>
</div>
<div class="filter_content programming">
<span class="icon">&#128430;</span><span class="text">programming</span>
</div>
<div class="filter_content rant">
<span class="icon">&#128162;</span><span class="text">rant</span>
</div>
<div class="filter_content research">
<span class="icon">&#128214;</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="&#945;">
<div class="content"><span class="timecode">2:56</span>&#8220;Stay RISCY, everyone&#8221;<sup>&#945;</sup></div>
<div class="progress faded">
<div class="content"><span class="timecode">2:56</span>&#8220;Stay RISCY, everyone&#8221;<sup>&#945;</sup></div>
</div>
<div class="progress main">
<div class="content"><span class="timecode">2:56</span>&#8220;Stay RISCY, everyone&#8221;<sup>&#945;</sup></div>
</div>
</div>
<div data-timestamp="312" class="marker blackboard rant cat_mathematics" data-ref="&#946;">
<div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>&#946;</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>&#946;</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>&#946;</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>

View File

@ -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 &#9660;</span>
<div class="mouse_catcher"></div>
<div class="refs quotes_container">
<span data-id="&#945;" class="ref">
<span class="ref_content">
<div class="source">Quote 1</div>
<div class="ref_title">Stay RISCY, everyone</div>
<div class="quote_byline">&mdash;miotatsu, Wed Nov 16 21:03:26 2016</div>
</span>
<div class="ref_indices">
<span data-timestamp="176" class="timecode"><span class="ref_index">[&#945;]</span><span class="time">2:56</span></span>
</div>
</span>
<span data-id="&#946;" 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">&mdash;miotatsu, Fri Dec 2 21:00:05 2016</div>
</span>
<div class="ref_indices">
<span data-timestamp="312" class="timecode"><span class="ref_index">[&#946;]</span><span class="time">5:12</span></span>
</div>
</span>
</div>
</div>
<div class="menu references">
<span>References &#9660;</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">&#128396;</span><span class="text">Blackboard</span>
</div>
<div class="filter_content authored">
<span class="icon">&#128490;</span><span class="text">Chat Comment</span>
</div>
<div class="filter_content default">
<span class="icon">&#128430;</span><span class="text">Programming</span>
</div>
<div class="filter_content rant">
<span class="icon">&#128162;</span><span class="text">Rant</span>
</div>
<div class="filter_content research">
<span class="icon">&#128214;</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="&#945;">
<div class="content"><span class="timecode">2:56</span>&#8220;Stay RISCY, everyone&#8221;<sup>&#945;</sup></div>
<div class="progress faded">
<div class="content"><span class="timecode">2:56</span>&#8220;Stay RISCY, everyone&#8221;<sup>&#945;</sup></div>
</div>
<div class="progress main">
<div class="content"><span class="timecode">2:56</span>&#8220;Stay RISCY, everyone&#8221;<sup>&#945;</sup></div>
</div>
</div>
<div data-timestamp="312" class="marker blackboard rant cat_mathematics" data-ref="&#946;">
<div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>&#946;</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>&#946;</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>&#946;</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>

View File

@ -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 &#9660;</span>
<div class="mouse_catcher"></div>
<div class="refs">
<span data-id="&#945;" 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">[&#945;]</span><span class="time">2:56</span></span>
</div>
</span>
<span data-id="&#946;" 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">[&#946;]</span><span class="time">5:12</span></span>
</div>
</span>
</div>
</div>
<div class="refs_container">
<span>References &#9660;</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="&#945;">
<div class="content"><span class="timecode">2:56</span>&#8220;Quote text&#8221;<sup>&#945;</sup></div>
<div class="progress faded">
<div class="content"><span class="timecode">2:56</span>&#8220;Quote text&#8221;<sup>&#945;</sup></div>
</div>
<div class="progress main">
<div class="content"><span class="timecode">2:56</span>&#8220;Quote text&#8221;<sup>&#945;</sup></div>
</div>
</div>
<div data-timestamp="312" class="marker blackboard cat_mathematics" data-ref="&#946;">
<div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>&#946;</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>&#946;</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>&#946;</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>

View File

@ -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 &#9660;</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 &#9660;</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>

View File

@ -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>

View File

@ -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]