44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
"box rad 10px \"Markdown\" \"Formatter\" \"(markdown.c)\" fit\n"
"arrow right 200% \"HTML+SVG\" \"Output\"\n"
"arrow <-> down from last box.s\n"
"box same \"Pikchr\" \"Formatter\" \"(pikchr.c)\" fit\n";
}
style_header("PikchrShow");
CX("<style>");
CX("#pikchrshow-output, #pikchrshow-form"
"{display: flex; flex-direction: column;}");
CX("#pikchrshow-form > * {margin: 0.25em 0;}");
CX("#pikchrshow-output {margin-top: 1em;}");
CX("#pikchrshow-controls {"
"display: flex; flex-direction: row; align-items: center;"
"}");
CX("#pikchrshow-controls > * {"
"display: inline; margin-left: 0.5em;"
"}");
CX("#pikchrshow-controls > .input-with-label > * {"
"cursor: pointer;"
"}");
CX("</style>");
if( flipColors ){
/* Flip the colors to approximate a dark theme look */
CX("<style>#pikchrshow-output > svg {"
"filter: invert(1) hue-rotate(180deg);"
"}</style>");
}
CX("<form method='POST' id='pikchrshow-form' action=''>");
CX("<textarea name='content' rows='10' cols='80'>");
CX("%s", zContent/*safe-for-%s*/);
CX("</textarea>");
CX("<div id='pikchrshow-controls'>");
CX("<input type='submit' value='Submit'></input>");
CX("<span class='input-with-label'>"
"<input id='flipcolors' type='checkbox' value='1' "
"name='flipcolors'");
if(flipColors){
CX(" checked");
}
CX("/>");
CX("<label for='flipcolors'>"
"Simulate dark color theme?</label>");
CX("</span>");
CX("</div>");
style_footer();
}
|
>
>
>
>
|
>
|
|
<
>
>
|
|
<
<
<
|
|
<
<
<
<
<
<
>
|
|
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
"box rad 10px \"Markdown\" \"Formatter\" \"(markdown.c)\" fit\n"
"arrow right 200% \"HTML+SVG\" \"Output\"\n"
"arrow <-> down from last box.s\n"
"box same \"Pikchr\" \"Formatter\" \"(pikchr.c)\" fit\n";
}
style_header("PikchrShow");
CX("<style>");
CX("#sbs-wrapper {"
"display: flex; flex-direction: row; flex-wrap: wrap;"
"}");
CX("#sbs-wrapper > * {margin: 0 0 1em 0}");
CX("#pikchrshow-output, #pikchrshow-form"
"{display: flex; flex-direction: column}");
CX("#pikchrshow-form {flex: 2 1 auto}");
CX("#pikchrshow-form > * {margin: 0.25em 0}");
CX("#pikchrshow-output {flex: 1 1 auto}");
CX("#pikchrshow-controls {"
"display: flex; flex-direction: row; align-items: center;"
"}");
CX("#pikchrshow-controls > * {"
"display: inline; margin-left: 0.5em;"
"}");
CX("#pikchrshow-controls > .input-with-label > * {"
"cursor: pointer;"
"}");
CX("</style>");
if( flipColors ){
/* Flip the colors to approximate a dark theme look */
CX("<style>#pikchrshow-output > svg {"
"filter: invert(1) hue-rotate(180deg);"
"}</style>");
}
CX("<div>Input pikchr code and tap SUBMIT to render it:</div>");
CX("<div id='sbs-wrapper'>");
CX("<form method='POST' id='pikchrshow-form' action=''>");
CX("<textarea name='content' rows='15'>%s</textarea>",
zContent/*safe-for-%s*/);
CX("<div id='pikchrshow-controls'>");
CX("<input type='submit' value='Submit'></input>");
style_labeled_checkbox(0, "flipcolors", "Simulate dark color theme?",
"1", flipColors, 0);
CX("</div>"/*#pikchrshow-controls*/);
CX("</form>"/*#pikchrshow-form*/);
CX("<div id='pikchrshow-output'>");
if(*zContent){
int w = 0, h = 0;
char *zOut = pikchr(zContent, "pikchr", 0, &w, &h);
if( w>0 && h>0 ){
const char *zNonce = safe_html_nonce(1);
CX("%s\n%s%s", zNonce, zOut, zNonce);
}else{
CX("<pre>\n%s\n</pre>\n", zOut);
}
fossil_free(zOut);
}
CX("</div>"/*#pikchrshow-output*/);
CX("</div>"/*sbs-wrapper*/);
style_footer();
}
|