update css

connect.css

@@ -10,31 +10,31 @@ html, body {
 
 body {
     min-height: 100%;
-	background-image: url(logo.png);
+    background-image: url(logo.png);
-	background-repeat: no-repeat;
+    background-repeat: no-repeat;
-	background-position: 20px 20px;
+    background-position: 20px 20px;
 }
 
 h1,h2,h3,h4,h5,h6 {
-	line-height: 1.4em;
+    line-height: 1.4em;
-	margin-bottom:0.3em;
+    margin-bottom:0.3em;
-	font-family: 'Arvo Regular', 'Trebuchet MS', 'Helvetica Neue', 'Helvetica', 'Arial', 'Verdana', 'sans-serif';
+    font-family: 'Arvo Regular', 'Trebuchet MS', 'Helvetica Neue', 'Helvetica', 'Arial', 'Verdana', 'sans-serif';
-	font-weight: 400;
+    font-weight: 400;
 }
 
 .container {
-	max-width: 600px;
+    max-width: 600px;
-	margin: auto;
+    margin: auto;
-	padding-top: 100px;
+    padding-top: 100px;
 }
 
 #connect #username, #connect input {
-	width: 100%;
+    width: 100%;
-	display: block;
+    display: block;
 }
 
 #connect input[type=text] {
-	box-sizing: border-box;
+    box-sizing: border-box;
     display: block;
     width: 100%;
     height: 34px;
@@ -70,11 +70,11 @@ h1,h2,h3,h4,h5,h6 {
     background-image: none;
     border: 1px solid transparent;
     border-radius: 4px;
-	margin-top: 10px;
+    margin-top: 10px;
-	text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
+    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-color: #ffee00;
     background-image: none;
     color: #000;
     font-family: 'PTSans-Regular', 'Arvo Regular', 'Trebuchet MS', 'Helvetica Neue', 'Helvetica', 'Arial', 'Verdana', 'sans-serif';
@@ -82,21 +82,29 @@ h1,h2,h3,h4,h5,h6 {
 }
 
 #connect .error {
-	color: red;
+    color: red;
-	display: none;
+    display: none;
 }
 
 #connect input.error {
-	border: 2px solid red;
+    border: 2px solid red;
 }
 
 #failed, #nomedia {
   display: none
 }
-
+.status {
+  margin: 12px 0;
+  font-size: 1.2rem;
+}
 .status.warn {
-	color: red;
+    color: red;
-	font-weight: bold;
+    font-weight: bold;
+}
+
+.status.recommended {
+    color: red;
+    font-weight: bold;
 }
 
 @keyframes shake {
@@ -115,4 +123,4 @@ h1,h2,h3,h4,h5,h6 {
   40%, 60% {
     transform: translate3d(4px, 0, 0);
   }
-}
+}

connect.html

@@ -23,16 +23,19 @@
     <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>
+      <div id="recommendedbrowser" class="status recommended">
+        <h3>Hinweis</h3><p>Diese Seite funktioniert mit deinem Browser nicht so gut. Am besten hören dich die anderen mit Firefox. Wenn du noch keinen Firefox hast kannst du dir Firefox auch <a href="https://www.mozilla.org/de/firefox/download/thanks/">hier ganz einfach auf deinem Computer installieren</a>.</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>.
+        <h3>Achtung</h3><p>Dein Mikrofon konnte nicht erkannt werden! Probiere es doch mit einem anderen Webbrowser (<a href="https://www.mozilla.org/de/firefox/download/thanks/">Firefox</a> oder Chrome) oder sollte es auch da nicht gehen mit der Desktop oder Smartphone <a href="https://hilfe.netzbegruenung.de/mumble/">App</a>.</p>
       </div>
       <div class="status warn" id="allowmedia">
-        Achtung: Bitte erlaube noch den Zugriff auf dein Mikrofon damit das Programm funktioniert!
+        <h3>Achtung</h3><p>Bitte erlaube noch den Zugriff auf dein Mikrofon damit andere dich hören können!</p>
       </div>
       <div class="status warn" id="failed">
-        Achtung: Wenn du den Zugriff auf den Mikrofon verbietest, dann wird dich niemand hören können! ;)
+        <h3>Achtung</h3><p>Wenn du den Zugriff auf den Mikrofon verbietest, dann wird dich niemand hören können! ;)</p>
       </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>
@@ -42,4 +45,4 @@
   <script src="jquery.js"></script>
   <script src="connect.js"></script>
 </body>
-</html>
+</html>

connect.js

@@ -5,7 +5,7 @@ function popupc(username) {
   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);
+  return window.open("/client.html?username=" + encodeURIComponent(username), "mumble", "width="+width+",height="+height+",top="+top+", left="+left);
 }
 
 function deUmlaut(value){
@@ -59,6 +59,10 @@ function requestMedia(success, failed) {
 
 requestMedia();
 
+if (navigator.userAgent.indexOf('Firefox') !== -1) {
+  jQuery('#recommendedbrowser').hide();
+}
+
   jQuery(document).on('submit', '#connect', function(e) {
     e.preventDefault();
     function connect() {