mirror of
https://github.com/lucaspalomodevelop/Party.git
synced 2026-03-13 00:07:21 +00:00
ein paar weitere änderungen
This commit is contained in:
parent
866807bfc4
commit
1815c2ebfe
@ -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%;
|
||||
}
|
||||
@ -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');
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -24,6 +24,8 @@
|
||||
<p class="raminfo"> %</p>
|
||||
<p class="tempinfo"> C°</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) ... -->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user