ein paar weitere änderungen

This commit is contained in:
fingadumbledore 2023-10-22 14:05:30 +02:00
parent 866807bfc4
commit 1815c2ebfe
3 changed files with 271 additions and 10 deletions

View File

@ -52,6 +52,14 @@ p {
}
.uhrzeit {
position: fixed;
top: 0;
left: 15%;
color: rgb(220, 220, 210);
font-size: 100%;
}
/*Systeminformationen im Balken*/
.cpuinfo {
position: fixed;
@ -486,5 +494,203 @@ margin-right: auto;
.button-wrapper:last-child {
margin-left: 5%;
}
.hidden1 {
display: none;
}
#punkte_button{
background-color: #454443;
position: fixed;
width: 10%;
height: 5%;
border-radius: 10px;
cursor: pointer;
background-position: center;
background-repeat: no-repeat;
background-size: 60%;
border: none;
padding: 10px;
color: white;
font-size: 16px;
bottom: 10%;
top: 15%;
right: 58%;
}
#zeit_button{
background-color: #454443;
position: fixed;
width: 10%;
height: 5%;
border-radius: 10px;
cursor: pointer;
background-position: center;
background-repeat: no-repeat;
background-size: 60%;
border: none;
padding: 10px;
color: white;
font-size: 16px;
bottom: 10%;
top: 15%;
right: 45%;
}
#team_button{
background-color: #454443;
position: fixed;
width: 10%;
height: 5%;
border-radius: 10px;
cursor: pointer;
background-position: center;
background-repeat: no-repeat;
background-size: 60%;
border: none;
padding: 10px;
color: white;
font-size: 16px;
bottom: 10%;
top: 15%;
right: 33%;
}
#next {
position: fixed;
top: 15%;
left: 55%;
width: 70px;
height: 30px;
padding: 30px;
background-color: #454443;
border-radius: 10px;
background-position: center;
background-repeat: no-repeat;
background-size: 40%;
background-image: url('/static/icons/next.png');
}
#back {
position: fixed;
top: 15%;
left: 35%;
width: 70px;
height: 30px;
padding: 30px;
background-color: #454443;
border-radius: 10px;
background-position: center;
background-repeat: no-repeat;
background-size: 30%;
background-image: url('/static/icons/back.png');
}
#play{
position: fixed;
top: 15%;
left: 45%;
width: 70px;
height: 30px;
padding: 30px;
background-color: #454443;
border-radius: 10px;
background-position: center;
background-repeat: no-repeat;
background-size: 60%;
background-image: url('/static/icons/play.png');
}
#mate_reset{
background-color: #454443;
position: fixed;
width: 10%;
height: 5%;
border-radius: 10px;
cursor: pointer;
background-position: center;
background-repeat: no-repeat;
background-size: 60%;
border: none;
padding: 10px;
color: white;
font-size: 16px;
bottom: 10%;
top: 15%;
right: 45%;
}
#mate_hinzu{
background-color: #454443;
position: fixed;
width: 20%;
height: 5%;
border-radius: 10px;
cursor: pointer;
background-position: center;
background-repeat: no-repeat;
background-size: 60%;
border: none;
padding: 10px;
color: white;
font-size: 16px;
bottom: 10%;
top: 25%;
right: 41%;
}
#save_settings{
position: fixed;
width: 10%;
height: 5%;
background-color: #0f9225;
border-radius: 10px;
cursor: pointer;
background-position: center;
background-repeat: no-repeat;
background-size: 60%;
border: none;
padding: 10px;
color: white;
font-size: 16px;
bottom: 10%;
top: 90%;
right: 32%;
}
#abort_settings{
position: fixed;
width: 10%;
height: 5%;
background-color: #af0a0a;
border-radius: 10px;
cursor: pointer;
background-position: center;
background-repeat: no-repeat;
background-size: 60%;
border: none;
padding: 10px;
color: white;
font-size: 16px;
bottom: 10%;
top: 90%;
right: 43%;
}
#reset_settings{
position: fixed;
width: 10%;
height: 5%;
background-color: #454443;
border-radius: 10px;
cursor: pointer;
background-position: center;
background-repeat: no-repeat;
background-size: 60%;
border: none;
padding: 10px;
color: white;
font-size: 16px;
bottom: 10%;
top: 90%;
right: 54%;
}

View File

@ -74,3 +74,37 @@ function handleSwitchDiv(index) {
function skipSong() {}
function lastSong() {}
function pausePlaySong() {}
function updateClock() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
// Führende Nullen hinzufügen, wenn die Stunden oder Minuten einstellig sind
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
var timeString = hours + ":" + minutes;
document.getElementById("uhrzeit").innerHTML = timeString;
}
setInterval(updateClock, 1000);
function showDiv(divId) {
const divToShow = document.getElementById(divId);
const divs = document.querySelectorAll('div');
for (const div of divs) {
div.classList.add('hidden');
}
divToShow.classList.remove('hidden');
}

View File

@ -24,6 +24,8 @@
<p class="raminfo"> %</p>
<p class="tempinfo"></p>
<p class="uhrzeit"></p>
<p class="eventinfo">Nächstes Event: </p>
<p id="peter" class="peter" onclick="togglePopup()">Peter</p>
@ -84,11 +86,11 @@
<div class="hidden-div">
<h1>Games</h1>
<button onclick="">Punkte</button>
<button onclick="">Zeit</button>
<button onclick="">Team</button>
<button id="punkte_button" onclick="showDiv('team')">Punkte</button>
<button id="zeit_button" onclick="showDiv('zeit')">Zeit</button>
<button id="team_button" onclick="showDiv('punkte')">Team</button>
<div id="Team" hidden >
<div id="team" class="hidden1" >
<p>Du bist in Team</p>
<table id="team_member">
<tbody>
@ -106,7 +108,7 @@
</table>
</div>
<div id=" punkt" hidden>
<div id="punkt" class="hidden1">
<table id="point_game">
<tbody>
<tr>
@ -124,7 +126,7 @@
<button class="submit_button" type="submit">Add</button>
</div>
<div id=" zeit" >
<div id="zeit" class="hidden1" >
<center>
<table id="time_game">
<tbody>
@ -162,7 +164,9 @@
<!-- Musik -->
<div class="hidden-div">
<h1>Musik</h1>
<p>Musik lol</p>
<button id="back"></button>
<button id="play"></button>
<button id="next"></button>
</div>
<!-- Mate -->
@ -171,14 +175,31 @@
<h1>Mate</h1>
<table id="mate_kiste">
</table>
<button class="reset-kiste" onclick="resetKiste()">Reset</button>
<button id="mate_reset" class="reset-kiste" onclick="resetKiste()">Reset</button>
<button id="mate_hinzu">Kasten Hinzufügen</button>
</div>
</div>
<!-- Einstellungen -->
<div class="hidden-div">
<h1>Einstellungen</h1>
<p>Einstellen</p>
<label for="position_select">Menü Position: </label>
<select id="position_select">
<option value="left">Links</option>
<option value="right">Rechts</option>
<option value="down">Unten</option>
<option value="top">Oben</option>
</select>
</br>
<label for="color_select">LED Streifen: </label>
<input id="color_select" type="color"></input>
<p>Uptime: </p>
<p>Administrator: </p>
<p>Anzahl User: </p>
<p>Uptime: </p>
<button id="save_settings">Speichern</button>
<button id="abort_settings">abbrechen</button>
<button id="reset_settings">reset</button>
</div>
<!-- ... (Dein vorhandener HTML-Code) ... -->