script.ftl 7.75 KB
Newer Older
0xJMR's avatar
0xJMR committed
1
<#assign helper = glex.getGlobalVar("helper")>
0xJMR's avatar
0xJMR committed
2
3
4
<!DOCTYPE HTML>
<html>
    <head>
0xJMR's avatar
0xJMR committed
5
        <title>${helper.printScript(ast)}</title>
0xJMR's avatar
0xJMR committed
6
7
        <style type="text/css">
        <!--
8
9
            @import url("https://fonts.googleapis.com/css?family=Roboto");

10
            html, body {
0xJMR's avatar
0xJMR committed
11
12
                margin:0;
                padding:0;
13
14
            }

15
            body {
0xJMR's avatar
0xJMR committed
16
                background-color:#252525;
17
18
19
                color:#cecece;
            }

0xJMR's avatar
0xJMR committed
20
            div {
21
                font-family:"Roboto", sans-serif;
0xJMR's avatar
0xJMR committed
22
23
24
            }

            @media screen {
0xJMR's avatar
0xJMR committed
25
                div {
0xJMR's avatar
0xJMR committed
26
27
28
29
30
                    font-size:14px;
                }
            }

            @media handheld {
0xJMR's avatar
0xJMR committed
31
                div {
0xJMR's avatar
0xJMR committed
32
33
                    font-size:1.8vw;
                }
34
35
36
            }

            .keyword {
0xJMR's avatar
0xJMR committed
37
38
39
40
41
                color:#569cd6;
            }

            .comment {
                color:#608b4e !important;
0xJMR's avatar
0xJMR committed
42
            }
43

0xJMR's avatar
0xJMR committed
44
45
            pre {
                margin:0;
0xJMR's avatar
0xJMR committed
46
                white-space:pre-wrap;
0xJMR's avatar
0xJMR committed
47
48
49
50
            }

            td.line-number {
                user-select:none;
51
                text-align:right;
0xJMR's avatar
0xJMR committed
52
53
54
                padding-right:10px;
                -moz-user-select:none;
                -webkit-user-select:none;
0xJMR's avatar
0xJMR committed
55
                color:#5a5a5a;
56
            }
57
58

            img {
0xJMR's avatar
0xJMR committed
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
                vertical-align: middle;
            }

            .scene {
                width:100%;
            }

            .card {
                width:100%;
                height:100%;
                position:relative;
                transition:transform 1s;
                transform-style:preserve-3d;
            }

            .card-face {
                position:absolute;
                height:100%;
                width:100%;
                backface-visibility:hidden;
0xJMR's avatar
0xJMR committed
79
                -webkit-backface-visibility:hidden;
0xJMR's avatar
0xJMR committed
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
106
107
108
109
110
111
112
113
114
                margin-top:35px;
            }

            .card-face-front {
                transform:rotateY(0deg);
            }

            .card-face-back {
                transform:rotateY(180deg);
            }

            .card.flipped {
                transform:rotateY(180deg);
            }

            .buttons {
                position:fixed;
                top:0;
                right:0;
            }

            input {
                -webkit-appearance:none;
                -moz-appearance:none;
                appearance:none;
                width:35px;
                height:35px;
                background-color:#cecece;
                background-size:contain;
                background-repeat:no-repeat;
                background-position:center;
                cursor:pointer;
            }

            input:checked {
0xJMR's avatar
0xJMR committed
115
                background-color:#569cd6 !important;
0xJMR's avatar
0xJMR committed
116
117
118
119
120
121
122
123
            }

            input.code {
                background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' standalone='no'?%3e%3c!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 20010904//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'%3e%3csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='1280.000000pt' height='791.000000pt' viewBox='0 0 1280.000000 791.000000' preserveAspectRatio='xMidYMid meet'%3e%3cmetadata%3e Created by potrace 1.15, written by Peter Selinger 2001-2017 %3c/metadata%3e%3cg transform='translate(0.000000,791.000000) scale(0.100000,-0.100000)' fill='%23000000' stroke='none'%3e%3cpath d='M6881 7884 c-83 -22 -150 -62 -222 -134 -105 -104 -113 -127 -218 -635 -49 -242 -155 -757 -235 -1145 -80 -388 -210 -1022 -290 -1410 -80 -388 -179 -869 -220 -1070 -69 -336 -190 -924 -476 -2315 -60 -291 -114 -560 -120 -597 -25 -160 46 -347 172 -450 227 -186 554 -150 729 82 77 101 57 23 279 1103 60 295 160 778 220 1072 61 294 160 776 220 1070 61 294 160 776 220 1070 61 294 160 776 220 1070 148 717 327 1593 345 1682 39 189 -6 345 -134 474 -71 72 -138 111 -228 134 -71 19 -191 18 -262 -1z'/%3e%3cpath d='M3050 7100 c-64 -11 -139 -42 -191 -77 -24 -17 -657 -642 -1405 -1389 -1482 -1479 -1403 -1394 -1439 -1545 -19 -82 -19 -159 0 -234 38 -146 -41 -61 1429 -1534 894 -896 1381 -1377 1421 -1402 92 -61 176 -83 298 -76 118 6 184 29 276 95 161 118 240 345 185 533 -42 142 6 90 -1241 1339 l-1163 1165 1155 1155 c636 635 1169 1175 1185 1199 67 100 97 260 71 380 -56 261 -317 436 -581 391z'/%3e%3cpath d='M9554 7096 c-189 -43 -345 -200 -385 -387 -26 -120 4 -280 71 -380 16 -24 549 -564 1185 -1199 l1155 -1155 -1163 -1165 c-1247 -1249 -1199 -1197 -1241 -1339 -55 -188 24 -415 185 -533 92 -66 158 -89 276 -95 122 -7 206 15 298 76 40 25 527 506 1421 1402 1470 1473 1391 1388 1429 1534 19 75 19 152 0 234 -36 151 43 66 -1439 1545 -748 747 -1383 1374 -1411 1392 -104 69 -259 98 -381 70z'/%3e%3c/g%3e%3c/svg%3e ");
            }

            input.latex {
                background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='UTF-8' standalone='no'?%3e%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='568.88px' width='588.42px'%3e%3cpath style='fill:black; stroke:none' d='M 10.499686,177.03840 L 31.174931,178.56990 C 52.615925,154.32116 61.039171,82.595924 187.38789,96.634671 C 182.79339,403.95560 48.021426,436.37234 56.444675,499.41907 C 59.507674,535.15406 87.840417,557.10556 118.47041,558.38181 C 215.21014,555.06356 210.87089,424.63084 240.99038,95.868921 L 365.80760,95.868921 C 359.17110,211.75239 341.04836,327.63586 339.00636,441.22208 C 340.53786,516.77606 386.48285,557.10556 446.97708,557.61606 C 546.52456,560.93431 577.92030,444.79558 577.92030,395.27709 L 556.47931,395.27710 C 554.43731,436.11709 534.78306,465.47083 492.92207,467.25758 C 378.82535,468.78908 441.61683,266.63113 442.38258,97.400421 L 577.92030,98.166171 L 577.15455,11.636437 C 13.807491,8.9075799 85.312284,-2.1366151 10.499686,177.03840 z' /%3e%3c/svg%3e ");
124
            }
0xJMR's avatar
0xJMR committed
125
126
        -->
        </style>
0xJMR's avatar
0xJMR committed
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
        <noscript>
            <style>
            <!--
                .card-face {
                    backface-visibility:initial;
                    position:initial;
                    margin-top:30px;
                }

                .card-face-back {
                    transform:initial;
                }

                .buttons {
                    display:none;
                }
            -->
            </style>
        </noscript>
0xJMR's avatar
0xJMR committed
146
147
    </head>
    <body>
0xJMR's avatar
0xJMR committed
148
        <div class="buttons">
0xJMR's avatar
0xJMR committed
149
            <form autocomplete="off">
0xJMR's avatar
0xJMR committed
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
                <input type="radio" name="View" class="code" title="Code" checked/>
                <input type="radio" name="View" class="latex" title="LaTeX"/>
            </form>
        </div>
        <div class="scene">
            <div class="card">
                <div class="card-face card-face-front">
                    <table>
                    <#list helper.getHTMLLines(ast) as line>
                        <tr>
                            <td class="line-number">${1 + line?index}</td>
                            <td><pre><#if line?length == 0>&nbsp;<#else>${line}</#if></pre></td>
                        </tr>
                    </#list>
                    </table>
                </div>
                <div class="card-face card-face-back">
                    <table>
                    <#list helper.getTeXHTMLLines(ast) as line>
                        <tr>
                            <td class="line-number">${1 + line?index}</td>
                            <td><pre><#if line?length == 0>&nbsp;<#else>${line}</#if></pre></td>
                        </tr>
                    </#list>
                    </table>
                </div>
            </div>
        </div>
0xJMR's avatar
0xJMR committed
178
    </body>
0xJMR's avatar
0xJMR committed
179
180
181
182
183
184
185
186
187
188
    <script>
        var radios = document.querySelectorAll("input[name='View']");
        var card = document.querySelector(".card");

        function onChange(event) {
            card.classList.toggle("flipped");
        }

        radios.forEach(function(element) { element.addEventListener("change", onChange) });
    </script>
0xJMR's avatar
0xJMR committed
189
</html>