Skip to content

GitLab

Commit 934abbac authored by 0xJMR's avatar 0xJMR
Browse files

Added buttons and noscript variant.

parent 5431d388
Pipeline #59073 passed with stages
in 50 seconds
Hide whitespace changes
Inline Side-by-side
src/main/resources/templates/script.ftl
View file @ 934abbac
......@@ -17,25 +17,18 @@
color:#cecece;
}
ul {
list-style:none;
display:inline;
margin:0;
padding:0;
}
li {
div {
font-family:"Roboto", sans-serif;
}
@media screen {
li {
div {
font-size:14px;
}
}
@media handheld {
li {
div {
font-size:1.8vw;
}
}
......@@ -57,33 +50,133 @@
}
img {
vertical-align:middle;
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;
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 {
background-color:#009fff !important;
}
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 ");
}
-->
</style>
<noscript>
<style>
<!--
.card-face {
backface-visibility:initial;
position:initial;
margin-top:30px;
}
.card-face-back {
transform:initial;
}
.buttons {
display:none;
}
-->
</style>
</noscript>
</head>
<body>
<ul>
<li>
<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>
</li>
<li>
<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>
</li>
</ul>
<div class="buttons">
<form>
<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>
</body>
<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>
</html>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment