update css
This commit is contained in:
Maximilian Ruta
parent
663a307ae0
commit
e695ef7257
54
connect.css
54
connect.css
|
|
@ -10,31 +10,31 @@ html, body {
|
|||
|
||||
body {
|
||||
min-height: 100%;
|
||||
background-image: url(logo.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 20px 20px;
|
||||
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;
|
||||
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;
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
#connect #username, #connect input {
|
||||
width: 100%;
|
||||
display: block;
|
||||
width: 100%;
|
||||
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;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
|
||||
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-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;
|
||||
display: none;
|
||||
color: red;
|
||||
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;
|
||||
font-weight: bold;
|
||||
color: red;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
11
connect.html
11
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>
|
||||
|
|
@ -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() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue