-
Notifications
You must be signed in to change notification settings - Fork 2
/
frameDev.html
140 lines (127 loc) · 5.46 KB
/
frameDev.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimum-scale=1, width=device-width, height=device-height">
<meta name="description" content="The only thing we know about cyberspace is that is serves Sterni">
<meta name="author" content="shitcrew">
<title>T*E*L*E*K*N*E*I*P*E</title>
<link rel="stylesheet" href="css/fabulation.css">
<link rel="stylesheet" href="css/telekneipe.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/peerjs@1.0.0/dist/peerjs.min.js"></script>
<script type="text/javascript" src="js/seriously.js"></script>
<script type="text/javascript" src="https://brianchirls.github.io/Seriously.js/effects/seriously.brightness-contrast.js"></script>
<script type="text/javascript" src="https://brianchirls.github.io/Seriously.js/effects/seriously.pixelate.js"></script>
<script type="text/javascript" src="https://brianchirls.github.io/Seriously.js/effects/seriously.hue-saturation.js"></script>
<script type="text/javascript" src="https://pixijs.download/release/pixi.min.js"></script>
<script type="text/javascript" src="js/fabulation.js"></script>
</head>
<body>
<!-- Beta Warning Modal -->
<div class="modal" id="betaWarning">
<div class="modal-content">
<div class="modal-content-header">
<span class="close" id="betaWarningButton">×</span>
<h3>Experimental Branch</h3>
</div>
<div class="modal-content-body">
Dies ist die Developer Version der Telekneipe. Zur aktuellen Stabilen Version bitte auf <a href="https://www.telekneipe.de">www.telekneipe.de</a>
<div id="modalWarning"></div>
</div>
</div>
</div>
<!-- TELEKNEIPE Modals -->
<div class="telekneipe_container">
<div id="step1">
<p>Please click `allow` on the top of the screen so we can access your webcam and microphone for transmission.</p>
<div id="step1-error">
<p>Failed to access the webcam and microphone. </p>
<a href="#" class="pure-button pure-button-error" id="step1-retry">Try again</a>
</div>
</div>
<div id="call_pad">
<h3>"Who are you looking for?"</h3>
<div class="pure-form">
<input type="text" placeholder="User id..." id="callto-id">
<a href="#" class="clickbutton" id="make-call">Have a look</a>
</div>
</div>
<div id="table_container">
<div id="video-container">
<canvas id="screen"></canvas>
</div>
</div>
</div>
<div class="bg">
</div>
<div class="content" id="catch_events">
<!-- FABULATION -->
<div class="disp">
</div>
<div class="center-scene">
{% for scene in contexts %}
<div id="{{ scene.id }}" style="display: none;">
{{ scene.content }}
</div>
{% endfor %}
</div>
</div>
<div class="receipt">
<div class="receipt-top"></div>
<div class="receipt-header">
ID: <span id="receiptId"></span>
<img class="receipt-close" id="receiptButton" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAKUlEQVQImWP4//Hh//8fH/5nYGD4D2fDBGAYymdAUcnAwABRiVU7uiAA1xdF+JdYbBgAAAAASUVORK5CYII=";>
</div>
<div id="console">
</div>
</div>
<script type="module">
import {Tableservice} from "./js/tableservice.js";
var meta = {{ meta }};
var table;
$(function() {
start_fabulation(meta)(meta["{{ root }}"]);
try {
table = new Tableservice();
table.registerUI();
$.exposed = {table:table};
} catch (err) {
if (err.message.includes("WebGL unsupported")) {
$("#modalWarning").html("<p>Fehler: Dein Browser unterstützt kein WebGL. Leider ist die Telekneipe ohne WebGL zur Zeit nicht unterstützt.</p>");
}
else {
$("#modalWarning").html(`<p>Warnung: Während der Initialisierung wurde ein unerwarteter Fehler festgestellt.</p><p>Fehlermeldung: ${err}</p>`);
throw(err);
}
}
// temporarily display info after first screen
$('#catch_events').on("tableservice.about", function() {
$("#betaWarning").show();
});
// info box functionality
$("#betaWarningButton").click(function() {
$("#betaWarning").fadeOut("slow");
});
$(window).click(event, function(event) {
if (event.target==$("betaWarning"))
$("betaWarning").fadeOut("slow");
});
// receipt functionality.
$("#receiptButton").click(function() {
$("#console").toggle();
let deg = $(this).data('rotate');
let rotate = deg ? 'rotate(0deg)' : 'rotate(180deg)';
$(this).css({
'-webkit-transform': rotate,
'-moz-transform': rotate,
'-o-transform': rotate,
'-ms-transform': rotate,
'transform': rotate
});
$(this).data('rotate', !deg);
});
});
</script>
</body>
</html>