mirror of
https://github.com/lucaspalomodevelop/Party.git
synced 2026-03-13 08:09:37 +00:00
255 lines
8.8 KiB
HTML
255 lines
8.8 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>
|
|
<header>
|
|
<ul>
|
|
<li>
|
|
<img class="logo" src="/static/icons/icon.png" alt="Logo">
|
|
</li>
|
|
<li>
|
|
<p>Nächstes Event: </p>
|
|
</li>
|
|
<li>
|
|
<p>Song: </p>
|
|
</li>
|
|
<li>
|
|
<button class="song_button" id="previous_song_button" onclick="previous_song()"></button>
|
|
</li>
|
|
<li>
|
|
<button class="song_button" id="toggle_play_button" onclick="toggle_play()"></button>
|
|
</li>
|
|
<li>
|
|
<button class="song_button" id="skip_song_button" onclick="skip_song()"></button>
|
|
</li>
|
|
<li>
|
|
<span id="tempstat"> temp</span>
|
|
</li>
|
|
<li>
|
|
<span id="ramstat">ram</span>
|
|
</li>
|
|
<li>
|
|
<span id="cpustat">cpu</span>
|
|
</li>
|
|
<li>
|
|
<span id="uhrzeit">zeit</span>
|
|
</li>
|
|
<li>
|
|
<span id="username" onclick="togglePopup()">Peter</span>
|
|
</li>
|
|
</ul>
|
|
|
|
</header>
|
|
<main>
|
|
{% block content %}
|
|
<input class="nav_button" type="radio" name="navigation" id="home_button" checked></input>
|
|
<label for="home_button"></label><br/>
|
|
<input class="nav_button" type="radio" name="navigation" id="planer_button" ></input>
|
|
<label for="planer_button"></label><br/>
|
|
<input class="nav_button" type="radio" name="navigation" id="games_button" ></input>
|
|
<label for="games_button"></label><br/>
|
|
<input class="nav_button" type="radio" name="navigation" id="chat_button" ></input>
|
|
<label for="chat_button"></label><br/>
|
|
<input class="nav_button" type="radio" name="navigation" id="music_button" ></input>
|
|
<label for="music_button"></label><br/>
|
|
<input class="nav_button" type="radio" name="navigation" id="mate_button" ></input>
|
|
<label for="mate_button"></label><br/>
|
|
<input class="nav_button" type="radio" name="navigation" id="settings_button" ></input>
|
|
<label for="settings_button"></label><br/>
|
|
|
|
<!-- Div-Inhalte -->
|
|
<!-- 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>
|
|
</article>
|
|
|
|
<!-- Planer -->
|
|
<article id="planer">
|
|
<h1>Planer</h1>
|
|
<table id="events">
|
|
<thead>
|
|
<tr>
|
|
<th>Event</th>
|
|
<th>Zeit</th>
|
|
<th>Status</th>
|
|
<th>Verwalten</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>f</td>
|
|
<td>f</td>
|
|
<td>f</td>
|
|
<td>f</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<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'>
|
|
<input id="event_input" type="text" name="Event" placeholder="Event Name" maxlength="20" minlength="1" required><br/>
|
|
<input id="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><br/>
|
|
<button class="dialog_control" onclick="document.getElementById('new_event_form_dialog').open = false" type="submit">Hinzufügen</button>
|
|
<button class="dialog_control" onclick="document.getElementById('new_event_form_dialog').open = false">Abbrechen</button>
|
|
</form>
|
|
</dialog>
|
|
|
|
<iframe name='hiddenIFrame' id='hiddenIFrame' hidden></iframe>
|
|
</article>
|
|
|
|
<!-- 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><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/>
|
|
|
|
<table id="teams_table">
|
|
<thead>
|
|
<tr>
|
|
<td>Team</td>
|
|
<td>Game</td>
|
|
<td>Points</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>f</td>
|
|
<td>f</td>
|
|
<td>f</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<table id="punkte_table">
|
|
<thead>
|
|
<tr>
|
|
<td>User</td>
|
|
<td>Game</td>
|
|
<td>Points</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>f</td>
|
|
<td>f</td>
|
|
<td>f</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<table id="zeiten_table">
|
|
<thead>
|
|
<tr>
|
|
<td>User</td>
|
|
<td>Game</td>
|
|
<td>Time</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>f</td>
|
|
<td>f</td>
|
|
<td>f</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</center>
|
|
</article>
|
|
|
|
<!-- Chat -->
|
|
<article id="chat">
|
|
<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>
|
|
</article>
|
|
|
|
<!-- Musik -->
|
|
<article id="music">
|
|
<h1>Musik</h1>
|
|
<center>
|
|
<button id="music-back"></button>
|
|
<button id="music-play"></button>
|
|
<button id="music-next"></button>
|
|
</center>
|
|
</article>
|
|
|
|
<!-- Mate -->
|
|
<article id="mate">
|
|
<div id="mate-container">
|
|
<h1>Mate</h1>
|
|
<table id="mate_kiste">
|
|
</table>
|
|
<button class="mate-control" id="mate_reset" onclick="resetKiste()">Reset</button>
|
|
<button class="mate-control" id="mate_hinzu">Kasten Hinzufügen</button>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Einstellungen -->
|
|
<article id="settings">
|
|
<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 class="settings-control" id="save_settings">Speichern</button>
|
|
<button class="settings-control" id="abort_settings">abbrechen</button>
|
|
<button class="settings-control" id="reset_settings">reset</button>
|
|
</article>
|
|
|
|
<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>
|
|
</main>
|
|
|
|
<footer>
|
|
<p>Partycontroller Version 0.1<br/></p>
|
|
© Lostkids</p>
|
|
</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>
|
|
|