mirror of
https://github.com/lucaspalomodevelop/Party.git
synced 2026-03-13 00:07:21 +00:00
games tab
This commit is contained in:
hyperbel
parent
bbacdd44eb
commit
314e2edc85
@ -150,30 +150,30 @@ p {
|
||||
/* Icons für die Buttons */
|
||||
/* Neuer Stil für den ausfahrbaren Kasten */
|
||||
.popup {
|
||||
position: fixed;
|
||||
top: -100%; /* Startposition oben */
|
||||
right: 4%; /* Rechts positionieren */
|
||||
width: 8%;
|
||||
background-color: #222; /* Dunkle Hintergrundfarbe */
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
display: none; /* Der Kasten ist anfangs versteckt */
|
||||
z-index: 999; /* Damit der Kasten über anderen Elementen liegt */
|
||||
color: #fff; /* Textfarbe */
|
||||
animation: slideIn 0.5s forwards; /* Animation hinzufügen */
|
||||
position: fixed;
|
||||
top: -100%; /* Startposition oben */
|
||||
right: 4%; /* Rechts positionieren */
|
||||
width: 8%;
|
||||
background-color: #222; /* Dunkle Hintergrundfarbe */
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
display: none; /* Der Kasten ist anfangs versteckt */
|
||||
z-index: 999; /* Damit der Kasten über anderen Elementen liegt */
|
||||
color: #fff; /* Textfarbe */
|
||||
animation: slideIn 0.5s forwards; /* Animation hinzufügen */
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
align-self: flex-end;
|
||||
cursor: pointer;
|
||||
color: #fff; /* Button-Textfarbe */
|
||||
font-weight: bold; /* Button hervorheben */
|
||||
align-self: flex-end;
|
||||
cursor: pointer;
|
||||
color: #fff; /* Button-Textfarbe */
|
||||
font-weight: bold; /* Button hervorheben */
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
@ -190,30 +190,6 @@ font-weight: bold; /* Button hervorheben */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Neuer Stil für die versteckten Div-Elemente
|
||||
.hidden-div {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80%; /* Hier die gewünschte Breite eintragen
|
||||
max-height: 80%; /* Hier die gewünschte Höhe eintragen
|
||||
height: 80%;
|
||||
padding: 20px;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
*/
|
||||
|
||||
/* Stil für den aktiven Button */
|
||||
.active-button {
|
||||
box-shadow: 0 0 10px #fff;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
@ -231,6 +207,10 @@ td {
|
||||
|
||||
/* Planer */
|
||||
|
||||
#planer button {
|
||||
margin-top: 1%;
|
||||
}
|
||||
|
||||
#planer dialog {
|
||||
background-color: black;
|
||||
border-radius: 5px;
|
||||
@ -272,6 +252,42 @@ td {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
/* Ende Planer */
|
||||
|
||||
/* Games */
|
||||
|
||||
#games table {
|
||||
display: none;
|
||||
margin-top: 1%;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
#games label {
|
||||
text-decoration: underline;
|
||||
font-size: 20px;
|
||||
}
|
||||
#games input[type=radio]:checked + label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#games input[type=radio]:checked + label::before {
|
||||
content: "> ";
|
||||
}
|
||||
|
||||
|
||||
#punkte_button:checked ~ #punkte_table {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#zeit_button:checked ~ #zeiten_table {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#teams_button:checked ~ #teams_table {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Ende Games */
|
||||
|
||||
input[type="number"],
|
||||
input[type="email"],
|
||||
@ -406,67 +422,7 @@ cursor: pointer;
|
||||
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%;
|
||||
@ -510,7 +466,7 @@ cursor: pointer;
|
||||
background-image: url('/static/icons/play.png');
|
||||
}
|
||||
|
||||
#mate_reset{
|
||||
#mate_reset {
|
||||
background-color: #454443;
|
||||
position: fixed;
|
||||
width: 10%;
|
||||
@ -530,7 +486,7 @@ cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
#mate_hinzu{
|
||||
#mate_hinzu {
|
||||
background-color: #454443;
|
||||
position: fixed;
|
||||
width: 20%;
|
||||
@ -550,7 +506,7 @@ cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
#save_settings{
|
||||
#save_settings {
|
||||
position: fixed;
|
||||
width: 10%;
|
||||
height: 5%;
|
||||
@ -587,6 +543,7 @@ cursor: pointer;
|
||||
top: 90%;
|
||||
right: 43%;
|
||||
}
|
||||
|
||||
#reset_settings{
|
||||
position: fixed;
|
||||
width: 10%;
|
||||
@ -642,7 +599,7 @@ input[type=radio] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
section {
|
||||
article {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 13%;
|
||||
|
||||
@ -63,14 +63,14 @@
|
||||
|
||||
<!-- Div-Inhalte -->
|
||||
<!-- Home -->
|
||||
<section id="home">
|
||||
<article id="home">
|
||||
<h1>Home</h1>
|
||||
<p>
|
||||
Willkommen zur diesjährigen 24-stündigen LAN-Party! Wir haben ein spannendes Line-up mit Spiel 1, Spiel 2 und Spiel 3 vorbereitet. Lasst uns gemeinsam unvergessliche Gaming-Momente schaffen! Möge die Party beginnen, und möge die Beste Person gewinnen!</p>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<!-- Planer -->
|
||||
<section id="planer">
|
||||
<article id="planer">
|
||||
<h1>Planer</h1>
|
||||
<table id="events">
|
||||
<thead>
|
||||
@ -91,7 +91,9 @@
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<button id="add_event_button" onclick="document.getElementById('new_event_form_dialog').open = true;">+</button>
|
||||
<center>
|
||||
<button onclick="document.getElementById('new_event_form_dialog').open = true;">+</button>
|
||||
</center>
|
||||
|
||||
<dialog id="new_event_form_dialog">
|
||||
<form id="event_form" action="/api/event/new" target='hiddenIFrame' method='post'>
|
||||
@ -106,79 +108,75 @@
|
||||
</dialog>
|
||||
|
||||
<iframe name='hiddenIFrame' id='hiddenIFrame' hidden></iframe>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<!-- Games -->
|
||||
<section id="games">
|
||||
<article id="games">
|
||||
<h1>Games</h1>
|
||||
<center>
|
||||
<p>Du bist in Team: <span>TODO</span></p>
|
||||
|
||||
<input type="radio" name="game_info_select" id="punkte_button">
|
||||
<label for="punkte_button">Punkte</label>
|
||||
<input type="radio" name="game_info_select" id="zeit_button">
|
||||
<label for="zeit_button">Zeit</label>
|
||||
<input type="radio" name="game_info_select" id="team_button">
|
||||
<label for="team_button">Team</label>
|
||||
<input type="radio" name="game_info_select" id="punkte_button">
|
||||
<label for="punkte_button">Punkte</label><br/>
|
||||
<input type="radio" name="game_info_select" id="zeit_button">
|
||||
<label for="zeit_button">Zeit</label><br/>
|
||||
<input type="radio" name="game_info_select" id="teams_button">
|
||||
<label for="teams_button">Team</label><br/>
|
||||
|
||||
<div id="team" class="hidden1" >
|
||||
<p>Du bist in Team</p>
|
||||
<table id="team_member">
|
||||
<tbody>
|
||||
<table id="teams_table">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Team</td>
|
||||
<td>Game</td>
|
||||
<td>Points</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>f</td>
|
||||
<td>f</td>
|
||||
<td>f</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="punkt" class="hidden1">
|
||||
<table id="point_game">
|
||||
<tbody>
|
||||
<table id="punkte_table">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>User</td>
|
||||
<td>Game</td>
|
||||
<td>Points</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>f</td>
|
||||
<td>f</td>
|
||||
<td>f</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button class="submit_button" type="submit">Add</button>
|
||||
</div>
|
||||
|
||||
<div id="zeit" class="hidden1" >
|
||||
<center>
|
||||
<table id="time_game">
|
||||
<tbody>
|
||||
<table id="zeiten_table">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>User</td>
|
||||
<td>Game</td>
|
||||
<td>Time</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>f</td>
|
||||
<td>f</td>
|
||||
<td>f</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button class="submit_button" type="submit">Add</button>
|
||||
</center>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<!-- Chat -->
|
||||
<section id="chat">
|
||||
<article id="chat">
|
||||
<div id="chat-container">
|
||||
<h1>Chat</h1>
|
||||
<div id="chatBox">
|
||||
@ -188,18 +186,18 @@
|
||||
<button class="submit_button" id="chatInputButton" onclick="sendMessage()">Senden</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<!-- Musik -->
|
||||
<section id="music">
|
||||
<article id="music">
|
||||
<h1>Musik</h1>
|
||||
<button id="back"></button>
|
||||
<button id="play"></button>
|
||||
<button id="next"></button>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<!-- Mate -->
|
||||
<section id="mate">
|
||||
<article id="mate">
|
||||
<div id="mate-container">
|
||||
<h1>Mate</h1>
|
||||
<table id="mate_kiste">
|
||||
@ -207,10 +205,10 @@
|
||||
<button id="mate_reset" class="reset-kiste" onclick="resetKiste()">Reset</button>
|
||||
<button id="mate_hinzu">Kasten Hinzufügen</button>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<!-- Einstellungen -->
|
||||
<section id="settings">
|
||||
<article id="settings">
|
||||
<h1>Einstellungen</h1>
|
||||
<label for="position_select">Menü Position: </label>
|
||||
<select id="position_select">
|
||||
@ -229,7 +227,7 @@
|
||||
<button id="save_settings">Speichern</button>
|
||||
<button id="abort_settings">abbrechen</button>
|
||||
<button id="reset_settings">reset</button>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<!-- ... (Dein vorhandener HTML-Code) ... -->
|
||||
<!-- Hinzugefügter HTML-Code für den ausfahrbaren Kasten -->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user