Party/party/templates/session.html
2023-10-28 16:37:50 +02:00

235 lines
7.9 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Partycontroller</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/css/session.css">
</head>
<body>
{% block content %}
<div class="top-bar"></div>
<div class="content">
<h1>Huhu</h1>
</div>
<img class="userlogo" src="/static/icons/user.png" alt="Logo">
<img class="logo" src="/static/icons/icon.png" alt="Logo">
<!--System Informationen -->
<img class="cpulogo" src="/static/icons/cpu.png" alt="Logo">
<img class="ramlogo" src="/static/icons/ram.png" alt="Logo">
<img class="temperaturlogo" src="/static/icons/temperatur.png" alt="Logo">
<p class="cpuinfo"> %</p>
<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>
<p class="songinfo">Song: </p>
<div class="topnext" onclick="skipSong()"></div>
<div class="topback" onclick="lastSong()"></div>
<div class="toppause" onclick="pausePlaySong()"></div>
<div class="button-container">
<div class="seitenbutton" onclick="toggleDiv(1)"></div>
<div class="seitenbutton" onclick="toggleDiv(2)"></div>
<div class="seitenbutton" onclick="toggleDiv(3)"></div>
<div class="seitenbutton" onclick="toggleDiv(4)"></div>
<div class="seitenbutton" onclick="toggleDiv(5)"></div>
<div class="seitenbutton" onclick="toggleDiv(6)"></div>
<div class="seitenbutton" onclick="toggleDiv(7)"></div>
</div>
<!-- Div-Inhalte -->
<!-- Home -->
<div class="hidden-div">
<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>
<p>Aktuelles Spiel: </p>
<p>Verfügbare Mate: </p>
<p>Uptime: </p>
</div>
<!-- Planer -->
<div class="hidden-div">
<h1>Planer</h1>
<table id="events">
<tbody>
<tr>
<td>Event</td>
<td>Zeit</td>
<td>Status</td>
<td>Verwalten</td>
</tr>
<tr>
<td>f</td>
<td>f</td>
<td>f</td>
</tr>
</tbody>
</table>
<iframe name='hiddenIFrame' id='hiddenIFrame' style='display:none;'></iframe>
<form action="/api/event/new" target='hiddenIFrame' method='post'>
<input class="event_input" typ="text" name="Event" placeholder="Essen" maxlength="20" minlength="1" required>
<input class="event_time" type="datetime-local" id="meeting-time"
name="meeting-time" value="2023-12-31T12:00"
min="2023-12-31T00:00" max="2024-01-01T18:00" required>
<button class="submit_button" type="submit">Hinzufügen</button>
</form>
</div>
<!-- Games -->
<div class="hidden-div">
<h1>Games</h1>
<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" class="hidden1" >
<p>Du bist in Team</p>
<table id="team_member">
<tbody>
<tr>
<td>Team</td>
<td>Game</td>
<td>Points</td>
</tr>
<tr>
<td></td>
<td>f</td>
<td>f</td>
</tr>
</tbody>
</table>
<button>Team erstellen</button>
<button>Team beitreten</button>
<button>Team löschen</button>
</div>
<div id="punkt" class="hidden1">
<table id="point_game">
<tbody>
<tr>
<td>User</td>
<td>Game</td>
<td>Points</td>
</tr>
<tr>
<td></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>
<tr>
<td>User</td>
<td>Game</td>
<td>Time</td>
</tr>
<tr>
<td></td>
<td>f</td>
<td>f</td>
</tr>
</tbody>
</table>
<button class="submit_button" type="submit">Add</button>
</center>
</div>
<button>Spiele Zeigen</button>
<p>Aktuelles Spiel: </p>
</div>
<!-- Chat -->
<div class="hidden-div">
<div id="chat-container">
<h1>Chat</h1>
<div id="chatBox">
</div>
<div id="chatInput">
<input id="chatInputField" type="text" placeholder="Nachricht">
<button class="submit_button" id="chatInputButton" onclick="sendMessage()">Senden</button>
</div>
</div>
</div>
<!-- Musik -->
<div class="hidden-div">
<h1>Musik</h1>
<button id="back"></button>
<button id="play"></button>
<button id="next"></button>
</div>
<!-- Mate -->
<div class="hidden-div">
<div id="mate-container">
<h1>Mate</h1>
<table id="mate_kiste">
</table>
<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>
<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) ... -->
<!-- Hinzugefügter HTML-Code für den ausfahrbaren Kasten -->
<div class="popup" id="popup">
<div class="popup-content">
<span onclick="togglePopup()" class="close-button">Close</span>
<p>Hier könntest du logout machen</p>
</div>
</div>
<footer style="position: fixed; bottom: 0; width: 100%; background-color: #333; color: rgb(220, 220, 210); text-align: center; padding: 10px;">
<div>Partycontroller Version 0.1</div>
<div>&copy; Lostkids</div>
</footer>
{% endblock %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.1/socket.io.js"></script>
<script src="/static/js/session.js"></script>
<script src="/static/js/chat.js"></script>
<script src="/static/js/planer.js"></script>
<script src="/static/js/mate.js"></script>
</body>
</html>