Commit d1e58086 authored by Matt Mascarenhas's avatar Matt Mascarenhas

hmml_to_html.c: Organise CSS [#22]

parent 9c47ca39
.title {
background-color: #444;
}
.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;
}
#if 0
ctime -begin ${0%.*}.ctm
#gcc -g -Wall -Wno-unused-variable -fsanitize=address -std=c99 $0 -o ${0%.*} hmml.a
gcc -g -Wall -fsanitize=address -std=c99 $0 -o ${0%.*} hmml.a
ctime -end ${0%.*}.ctm
exit
......@@ -11,10 +10,10 @@ typedef unsigned int bool;
#define TRUE 1
#define FALSE 0
#include <stdarg.h>
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <stdarg.h> // NOTE(matt): varargs
#include <stdio.h> // NOTE(matt): printf, sprintf, vsprintf, fprintf, perror
#include <stdlib.h> // NOTE(matt): calloc, malloc, free
#include <string.h> // NOTE(matt): strncmp, memset
#include "hmmlib.h"
typedef struct
......@@ -32,10 +31,10 @@ typedef struct
typedef struct
{
char ID[1024];
char RefTitle[512];
char URL[372];
char Source[128];
char RefTitle[620];
char ID[512];
char URL[512];
char Source[256];
identifier Identifier[12];
int IdentifierCount;
} ref_info;
......@@ -87,12 +86,12 @@ TimecodeToSeconds(char *Timecode)
int Colons = 0;
while(*Timecode)
{
if((*Timecode < '0' || *Timecode > '9') && *Timecode != ':') { return FALSE; }
//if((*Timecode < '0' || *Timecode > '9') && *Timecode != ':') { return FALSE; }
if(*Timecode == ':')
{
++Colons;
if(Colons > 2) { return FALSE; }
//if(Colons > 2) { return FALSE; }
for(int i = 0; i < Colons; ++i)
{
HMS[Colons - i] = HMS[Colons - (i + 1)];
......@@ -107,7 +106,7 @@ TimecodeToSeconds(char *Timecode)
++Timecode;
}
if(HMS[0] > 59 || HMS[1] > 59 || Timecode[-1] == ':') { return FALSE; }
//if(HMS[0] > 59 || HMS[1] > 59 || Timecode[-1] == ':') { return FALSE; }
return HMS[2] * 60 * 60 + HMS[1] * 60 + HMS[0];
}
......@@ -271,24 +270,21 @@ GenerateTopicColours(char *Topic)
FILE *TopicsFile;
char *TopicsBuffer;
char *TopicsPtr;
int PersistentLength = 89;
if((TopicsFile = fopen("topics.css", "r")))
if((TopicsFile = fopen("topics.css", "a+")))
{
fseek(TopicsFile, 0, SEEK_END);
int TopicsLength = ftell(TopicsFile);
fseek(TopicsFile, 0, SEEK_SET);
if(!(TopicsBuffer = malloc(TopicsLength + StringLength(Topic) + PersistentLength)))
if(!(TopicsBuffer = malloc(TopicsLength)))
{
perror("hmml_to_html");
return;
}
fread(TopicsBuffer, TopicsLength, 1, TopicsFile);
fclose(TopicsFile);
TopicsPtr = TopicsBuffer;
char *TopicsPtr = TopicsBuffer;
while(TopicsPtr - TopicsBuffer < TopicsLength)
{
......@@ -304,25 +300,18 @@ GenerateTopicColours(char *Topic)
}
++TopicsPtr;
}
fprintf(TopicsFile, ".marker .content .categories .category.%s { border-color: #%X; background: #%X; }\n",
SanitisePunctuation(Topic), StringToColourHash(Topic), StringToColourHash(Topic));
fclose(TopicsFile);
free(TopicsBuffer);
}
else
{
if(!(TopicsBuffer = malloc(StringLength(Topic) + PersistentLength)))
{
perror("hmml_to_html");
return;
}
TopicsPtr = TopicsBuffer;
perror("hmml_to_html");
return;
}
int PrintLength = sprintf(TopicsPtr, ".marker .content .categories .category.%s { border-color: #%X; background: #%X; }\n",
SanitisePunctuation(Topic), StringToColourHash(Topic), StringToColourHash(Topic));
TopicsPtr += PrintLength;
TopicsFile = fopen("topics.css", "w");
fwrite(TopicsBuffer, TopicsPtr - TopicsBuffer, 1, TopicsFile);
fclose(TopicsFile);
free(TopicsBuffer);
}
int
......@@ -389,13 +378,13 @@ main(int ArgC, char **Args)
int UniqueRefs = 0;
CopyStringToBuffer(&Title,
" <div class=\"title\">\n"
" <span class=\"episode_name\">%s</span>\n", HMML.metadata.title);
" <div class=\"title %s\">\n"
" <span class=\"episode_name\">%s</span>\n", HMML.metadata.project, HMML.metadata.title);
CopyStringToBuffer(&Player,
" <div class=\"player_container\">\n"
" <div class=\"video_container\" data-videoId=\"%s\"></div>\n"
" <div class=\"markers_container\">\n", HMML.metadata.id);
" <div class=\"markers_container %s\">\n", HMML.metadata.id, HMML.metadata.project);
for(int AnnotationIndex = 0; AnnotationIndex < HMML.annotation_count; ++AnnotationIndex)
{
......@@ -683,8 +672,9 @@ ReferencesArray[i].Identifier[j].Identifier,
ReferencesArray[i].Identifier[j].Timecode);
}
CopyStringToBuffer(&ReferenceMenu,
"\n </div>\n"
CopyStringToBuffer(&ReferenceMenu, "\n"
" </div>\n"
" </a>\n");
}
......@@ -713,9 +703,10 @@ ReferencesArray[i].Identifier[j].Timecode);
" <!-- Load the player -->\n"
" <script type=\"text/javascript\" src=\"player.js\"></script>\n"
" <link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">\n"
" <link rel=\"stylesheet\" type=\"text/css\" href=\"%s.css\">\n"
" <link rel=\"stylesheet\" type=\"text/css\" href=\"topics.css\">\n"
" </head>\n"
" <body>\n");
" <body>\n", HMML.metadata.project);
//NOTE(matt): Here is where we do all our CopyBuffer() calls
CopyBuffer(&Master, &Title);
......
/*
* Colours:
* Main Purple: #372F46 or rgba(55, 47, 70, 1);
* Highlight Green: #3A4A3F or rbga(58, 74, 63, 1);
*/
.title.obbg {
background-color: #FFFFFF;
color: #000000;
border-bottom: 1px solid #372F46;
}
.title.obbg .refs_container {
transition: box-shadow 800ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: inset 0 0 0 #372F46;
}
.title.obbg .refs_container:hover {
background-color: #FFF8E7;
}
.title.obbg > .refs_container.current {
box-shadow: inset 0px 0px 30px #372F46;
}
.title.obbg .refs_container .refs {
background-color: #FFFFFF;
border: 2px solid #372F46;
border-top: none;
}
.title.obbg .refs_container > .refs .ref {
border-bottom: 1px solid #372F46;
color: #000000;
}
.title.obbg .refs_container > .refs .ref.current {
background-color: #372F46;
color: #FFFFFF;
}
.title.obbg .refs_container > .refs .ref:hover {
background-color: #FFF8E7;
}
.title.obbg .refs_container > .refs .ref.current:hover {
background-color: rgba(55, 46, 65, 0.7);
}
.title.obbg .refs_container > .refs .ref .source {
color: #888;
}
.title.obbg .refs_container > .refs .ref.current .source {
color: #FFF8E7;
}
/* Regular */
.markers_container.obbg {
background-color: #FFFFFF;
}
.markers_container.obbg > .marker {
border-bottom: 1px solid #2A3172;
}
.markers_container.obbg > .marker:hover > .content {
background-color: #FFF8E7;
}
.markers_container.obbg > .marker:hover > .faded .content {
background-color: rgba(42, 49, 114, 0.7);
color: #FFFFFF;
}
.markers_container.obbg > .marker > .content {
background-color: #FFFFFF;
color: #000000;
}
.markers_container.obbg > .marker.current > .content {
color: #2A3172;
}
.markers_container.obbg > .marker > .progress .content {
background-color: #2A3172;
color: #FFFFFF;
}
/* 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;
}
.title.riscy {
background-color: #FFFFFF;
color: #000000;
border-bottom: 1px solid rgba(246, 178, 26, 0.8);
}
.title.riscy .refs_container {
transition: box-shadow 800ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: inset 0 0 0 #2A3172;
}
.title.riscy .refs_container:hover {
background-color: #FFF8E7;
}
.title.riscy > .refs_container.current {
box-shadow: inset 0px 0px 30px #2A3172;
}
.title.riscy .refs_container .refs {
background-color: #FFFFFF;
border: 2px solid rgba(246, 178, 26, 0.8);
border-top: none;
}
.title.riscy .refs_container > .refs .ref {
border-bottom: 1px solid rgba(246, 178, 26, 0.8);
color: #000000;
}
.title.riscy .refs_container > .refs .ref.current {
background-color: #2A3172;
color: #FFFFFF;
}
.title.riscy .refs_container > .refs .ref:hover {
background-color: #FFF8E7;
}
.title.riscy .refs_container > .refs .ref.current:hover {
background-color: rgba(42, 49, 114, 0.7);
}
.title.riscy .refs_container > .refs .ref .source {
color: #888;
}
.title.riscy .refs_container > .refs .ref.current .source {
color: #FFF8E7;
}
/* Regular */
.markers_container.riscy {
background-color: #FFFFFF;
}
.markers_container.riscy > .marker {
border-bottom: 1px solid rgba(246, 178, 26, 0.8);
}
.markers_container.riscy > .marker:hover > .content {
background-color: #FFF8E7;
}
.markers_container.riscy > .marker:hover > .faded .content {
background-color: rgba(42, 49, 114, 0.7);
color: #FFFFFF;
}
.markers_container.riscy > .marker > .content {
background-color: #FFFFFF;
color: #000000;
}
.markers_container.riscy > .marker.current > .content {
color: #2A3172;
}
.markers_container.riscy > .marker > .progress .content {
background-color: #2A3172;
color: #FFFFFF;
}
/* Blackboard */
.markers_container.riscy > .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.riscy > .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.riscy > .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.riscy > .marker.blackboard.current > .content {
color: #2A3172;
}
.markers_container.riscy > .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.riscy > marker.run
*/
/* USER-DEFINED */
.marker .content {
width: 320px;
padding: 5px;
font-size: 14px;
}
.timecode {
font-size: 9px;
font-style: normal;
padding-right: 8px;
position: relative;
top: -2px;
}
.marker {
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.marker:hover > .content {
background-color: #222;
}
.marker:hover .faded .content {
background-color: rgba(139, 61, 35, 0.7);
color: black;
}
.marker > .content {
background-color: #161616;
color: #8A877D;
}
.marker.current > .content {
color: #B57714;
}
.marker .progress .content {
background-color: #8B3D23;
color: black;
}
/* Blackboard */
.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);
}
.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)
color: #FFFFFF;
}
.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);
color: black;
}
.marker.blackboard.current > .content {
color: #2A3172;
}
.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);
color: #FFFFFF;
}
.marker.authored .content .author {
font-style: normal;
}
.marker.authored {
font-style: oblique;
}
.marker .content .categories {
display: inline-flex;
margin: 4px;
}
.marker .content .categories .category {
border: 1px solid;
border-radius: 50%;
height: 8px;
margin-left: 2px;
width: 8px;
}
/* MANDATORY */
.player_container {
display: flex;
flex-direction: row;
}
.video_container {
flex-grow: 1;
overflow: hidden;
}
.markers_container {
overflow-y: scroll;
position: relative;
}
.marker {
position: relative;
cursor: pointer;
}
.marker .content {
display: block;
box-sizing: border-box;
word-wrap: break-word;
}
.marker .progress {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0px;
overflow: hidden;
}
/* CUSTOM PAGE STYLE */
body {
background-color: #222;
font-family: sans-serif;
color: white;
margin: 0;
padding: 0;
}
/* Structure */
.title {
display: flex;
flex-direction: row;
background-color: #444;
}
.title > * {
......@@ -159,37 +13,14 @@ body {
flex: 1 1;
}
.title > a {
color: rgba(38, 139, 210, 1);
text-decoration: none;
}
.title > a:visited {
color: rgba(38, 139, 210, 1);
}
.title > a:hover {
text-decoration: underline;
}
.title .refs_container {
position: relative;
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 .mouse_catcher {
position: absolute;
width: 100%;
height: 100%;
width: 100%;
top: 0;
right: 0;
}
......@@ -199,9 +30,6 @@ body {
top: 100%;
right: 0;
width: 350px;
background-color: black;
border: 3px solid #444;
border-top: none;
z-index: 1;
display: none;
}
......@@ -210,75 +38,145 @@ body {
display: block;
}
.refs .ref {
.title .refs_container > .refs .ref {
padding: 10px;
border-bottom: 1px solid rgb(51, 51, 51);
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: white;
}
.refs .ref.current {
background-color: #8B3D23;
color: black;
}
.refs .ref:hover {
background-color: #222;
}
.refs .ref.current:hover {
background-color: rgba(139, 61, 35, 0.7);
}
.refs .ref:last-child {
.title .refs_container > .refs .ref:last-child {
border: none;
}
.refs .ref .timecode {
.title .refs_container > .refs .ref .timecode {
display: inline-block;
font-size: 12px;