mirror of
https://github.com/netzbegruenung/mumble-web.netzbegruenung.de.git
synced 2024-04-26 15:54:53 +02:00
first commit
This commit is contained in:
Maximilian Ruta
commit
d7c585740a
118
connect.css
Normal file
118
connect.css
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
html, body {
|
||||
font-family: 'PT Sans', 'Trebuchet MS', 'Helvetica Neue', 'Helvetica', 'Arial', 'Verdana', 'sans-serif';
|
||||
font-size: 100%;
|
||||
line-height: 1.5em;
|
||||
height: 100%;
|
||||
background: #f1f1f1;
|
||||
padding: 0 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100%;
|
||||
background-image: url(logo.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 20px 20px;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
line-height: 1.4em;
|
||||
margin-bottom:0.3em;
|
||||
font-family: 'Arvo Regular', 'Trebuchet MS', 'Helvetica Neue', 'Helvetica', 'Arial', 'Verdana', 'sans-serif';
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
#connect #username, #connect input {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#connect input[type=text] {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
padding: 6px 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.42857143;
|
||||
color: #555;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
|
||||
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
|
||||
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
||||
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
||||
}
|
||||
|
||||
#connect input[type=submit] {
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 1.42857143;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
margin-top: 10px;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
|
||||
background-color: #ffee00;
|
||||
background-image: none;
|
||||
color: #000;
|
||||
font-family: 'PTSans-Regular', 'Arvo Regular', 'Trebuchet MS', 'Helvetica Neue', 'Helvetica', 'Arial', 'Verdana', 'sans-serif';
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
#connect .error {
|
||||
color: red;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#connect input.error {
|
||||
border: 2px solid red;
|
||||
}
|
||||
|
||||
#failed, #nomedia {
|
||||
display: none
|
||||
}
|
||||
|
||||
.status.warn {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
10%, 90% {
|
||||
transform: translate3d(-1px, 0, 0);
|
||||
}
|
||||
|
||||
20%, 80% {
|
||||
transform: translate3d(2px, 0, 0);
|
||||
}
|
||||
|
||||
30%, 50%, 70% {
|
||||
transform: translate3d(-4px, 0, 0);
|
||||
}
|
||||
|
||||
40%, 60% {
|
||||
transform: translate3d(4px, 0, 0);
|
||||
}
|
||||
}
|
||||
44
connect.html
Normal file
44
connect.html
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<!doctype html>
|
||||
<html class="no-js" lang="">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Mumble Webclient</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="stylesheet" href="connect.css">
|
||||
<meta name="theme-color" content="#fafafa">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!--[if IE]>
|
||||
<p class="browserupgrade">Du benutzt einen alten Browser. Bitte <a href="https://browsehappy.com/">aktualisiere deinen Browser</a>!</p>
|
||||
<![endif]-->
|
||||
|
||||
<div class="container">
|
||||
<!-- Add your site or application content here -->
|
||||
<h1>Mumble Server der Netzbegrünung</h1>
|
||||
<p>Mumble ist ein Audiokonferenzsystem, mit dem Ihr euch per Webbrowser, Smartphone und Desktop App verbinden könnt.</p>
|
||||
<p>Am einfachsten kannst du teilnehmen, indem du hier deinen Benutzernamen eingibst und dann auf "Verbinden" klickst.</p>
|
||||
<div>
|
||||
<h2>Einfach mit dem Webbrowser teilnehmen</h2>
|
||||
<form id="connect">
|
||||
<div class="status warn" id="nomedia">
|
||||
Achtung: Dein Mikrofon konnte nicht erkannt werden! Probiere es doch mit einem anderen Webbrowser (Firefox oder Chrome) oder sollte es auch da nicht gehen mit der Desktop oder Smartphone <a href="https://hilfe.netzbegruenung.de/mumble/">App</a>.
|
||||
</div>
|
||||
<div class="status warn" id="allowmedia">
|
||||
Achtung: Bitte erlaube noch den Zugriff auf dein Mikrofon damit das Programm funktioniert!
|
||||
</div>
|
||||
<div class="status warn" id="failed">
|
||||
Achtung: Wenn du den Zugriff auf den Mikrofon verbietest, dann wird dich niemand hören können! ;)
|
||||
</div>
|
||||
<p class="error">Bitte gib einen Benutzernamen ein.</p><input id="username" type="text" placeholder="Hier bitte deinen Namen eingeben" /><input type="submit" value="Verbinden" /></form>
|
||||
</div>
|
||||
<h2>App auf Computer oder Smartphone installieren</h2>
|
||||
<p>Wenn du die App auf deinem Computer oder deinem Smartphone installieren möchstest, dann findest du mehr Informationen <a href="https://hilfe.netzbegruenung.de/mumble/">hier</a>. Sobald du die App auf deinem Computer installiert hast, kannst du einfach <a href="mumble://mumble.netzbegruenung.de:64738/">hier klicken um dich zu verbinden</a>.</p>
|
||||
</div>
|
||||
<script src="jquery.js"></script>
|
||||
<script src="connect.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
87
connect.js
Normal file
87
connect.js
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
|
||||
function popupc(username) {
|
||||
var width = 900;
|
||||
var height = 600;
|
||||
var left = (screen.width/2)-(width/2);
|
||||
var top = (screen.height/2)-(height/2);
|
||||
|
||||
return window.open("/?username=" + encodeURIComponent(username), "mumble", "width="+width+",height="+height+",top="+top+", left="+left);
|
||||
}
|
||||
|
||||
function deUmlaut(value){
|
||||
value = value.toLowerCase();
|
||||
value = value.replace(/ä/g, 'ae');
|
||||
value = value.replace(/ö/g, 'oe');
|
||||
value = value.replace(/ü/g, 'ue');
|
||||
value = value.replace(/ß/g, 'ss');
|
||||
value = value.replace(/ /g, '-');
|
||||
value = value.replace(/\./g, '');
|
||||
value = value.replace(/,/g, '');
|
||||
value = value.replace(/\(/g, '');
|
||||
value = value.replace(/\)/g, '');
|
||||
return value;
|
||||
}
|
||||
|
||||
var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
|
||||
jQuery(document).ready(function() {
|
||||
|
||||
function shake() {
|
||||
jQuery('#connect').css({'animation': 'shake 1000ms infinite'});
|
||||
setTimeout(function() {
|
||||
jQuery('#connect').css({'animation': ''});
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function defaultFailed() {
|
||||
jQuery('#allowmedia').hide();
|
||||
jQuery('#failed').show();
|
||||
shake();
|
||||
}
|
||||
|
||||
function requestMedia(success, failed) {
|
||||
if (typeof success == 'undefined') {
|
||||
success = function() {};
|
||||
}
|
||||
if (typeof failed == 'undefined') {
|
||||
failed = defaultFailed;
|
||||
}
|
||||
if (typeof getUserMedia != 'undefined') {
|
||||
getUserMedia.call(navigator, {audio:true}, function() {
|
||||
jQuery('#allowmedia').hide();
|
||||
success();
|
||||
}, failed);
|
||||
} else {
|
||||
jQuery('#allowmedia').hide();
|
||||
jQuery('#nomedia').show();
|
||||
success();
|
||||
}
|
||||
}
|
||||
|
||||
requestMedia();
|
||||
|
||||
jQuery(document).on('submit', '#connect', function(e) {
|
||||
e.preventDefault();
|
||||
function connect() {
|
||||
var username = jQuery('#username').val();
|
||||
jQuery('p.error').hide();
|
||||
jQuery('#username').removeClass('error');
|
||||
if (username == '') {
|
||||
jQuery('p.error').show();
|
||||
jQuery('#username').addClass('error');
|
||||
jQuery('#username').focus();
|
||||
shake();
|
||||
return;
|
||||
}
|
||||
var username = deUmlaut(username).replace(/[^a-zA-Z]+/g, "_");
|
||||
var ui = popupc(username);
|
||||
var iv = setInterval(function() {
|
||||
if (typeof ui.mumbleUi != 'undefined' && typeof ui.mumbleUi.connectDialog != 'undefined' && ui.document.querySelector('.loading-container.loaded')) {
|
||||
clearInterval(iv);
|
||||
ui.mumbleUi.connectDialog.connect();
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
|
||||
connect();
|
||||
});
|
||||
});
|
||||
2
jquery.js
vendored
Normal file
2
jquery.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue