mirror of
https://github.com/lucaspalomodevelop/Party.git
synced 2026-03-13 08:09:37 +00:00
381 lines
12 KiB
HTML
381 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<html>
|
|
|
|
<head>
|
|
<title>🎉 Party</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='../static/css/style.css') }}">
|
|
|
|
</head>
|
|
|
|
<body onload="getMessages(); setInterval(getMessages, 1000);">
|
|
|
|
<div class="info_button"></div>
|
|
<a id="myButton" class="menu-link" ><img src="/static/img/user.png" width="50" height="50"></a>
|
|
</div>
|
|
|
|
<div id="myPopup">
|
|
<div id="popupContent">
|
|
<h3>Information</h3>
|
|
<p id="user"></p>
|
|
{% block content %}
|
|
<p>Useranzahl: {{useranzahl}}</p>
|
|
<p>Uptime: {{der}}</p>
|
|
|
|
<p>Creator: Host</p>
|
|
<div class="btn-group"></div>
|
|
<img src="../static/img/qrcode.png" width="100" height="100">
|
|
<button id="closeButton">Close</button>
|
|
<button class="btn btn-primary btn-lg">⚙️</button>
|
|
<a href="/logout">
|
|
<button class="btn btn-primary btn-lg"> 👋</button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<label class="switch">
|
|
<input type="checkbox" onclick="myFunction()">
|
|
<span class="slider round"></span>
|
|
</label>
|
|
<script>
|
|
function myFunction() {
|
|
var element = document.body;
|
|
element.classList.toggle("dark-mode");
|
|
}
|
|
</script>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
var myButton = document.getElementById("myButton");
|
|
var myPopup = document.getElementById("myPopup");
|
|
var closeButton = document.getElementById("closeButton");
|
|
|
|
myButton.addEventListener("click", function() {
|
|
myPopup.style.display = "block";
|
|
});
|
|
|
|
closeButton.addEventListener("click", function() {
|
|
myPopup.style.display = "none";
|
|
});
|
|
|
|
</script>
|
|
|
|
<div class="nav_cont_wrapper">
|
|
<div class="navigation">
|
|
<a onclick="change_div('_planer')">
|
|
<button class="btn btn-primary btn-lg">📅</button>
|
|
</a>
|
|
<a onclick="change_div('_game')">
|
|
<button class="btn btn-primary btn-lg">🎮</button>
|
|
</a>
|
|
<a onclick="change_div('_chat')">
|
|
<button class="btn btn-primary btn-lg">💬</button>
|
|
</a>
|
|
<a onclick="change_div('_musik')">
|
|
<button class="btn btn-primary btn-lg">🎵</button>
|
|
</a>
|
|
<a onclick="change_div('_mate')">
|
|
<button class="btn btn-primary btn-lg">🍹</button>
|
|
</a>
|
|
<a onclick="change_div('_seession')">
|
|
<button class="btn btn-primary btn-lg">📈</button>
|
|
</a>
|
|
<a onclick="change_div('_files')">
|
|
<button class="btn btn-primary btn-lg">📁</button>
|
|
</a>
|
|
</div>
|
|
<div class="content">
|
|
|
|
<div hidden class="tmplt_tab" id="_planer">
|
|
<center>
|
|
|
|
|
|
<table id="event-table" class="rounded">
|
|
<tr>
|
|
<th>Event</th>
|
|
<th>Zeit</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
{% for i in range(eventdata.eventname|length) %}
|
|
<tr>
|
|
<td>{{ eventdata.eventname[i] }}
|
|
<td>{{ eventdata.eventzeit[i] }}</td>
|
|
<td>Status</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
<script>
|
|
const table = document.getElementById("event-table");
|
|
const currentTime = new Date().getTime();
|
|
|
|
for (let i = 1; i < table.rows.length; i++) {
|
|
const cells = table.rows[i].cells;
|
|
const eventTime = cells[1].innerHTML;
|
|
const eventStart = new Date(eventTime.split("-")[0]).getTime();
|
|
const eventEnd = new Date(eventTime.split("-")[1]).getTime();
|
|
|
|
if (currentTime > eventEnd) {
|
|
cells[2].innerHTML = "Vorbei";
|
|
table.rows[i].classList.add("expired");
|
|
} else if (currentTime >= eventStart && currentTime <= eventEnd) {
|
|
alert("Aktuelles Event: " + cells[0].innerHTML);
|
|
}
|
|
}</script>
|
|
<p>Füge ein Event ein</p>
|
|
<form class="modal-content animate" action="/get_planer" method="POST">
|
|
<div class="container">
|
|
<input type="text" placeholder="Tomb Raider spielen" name="event" required>
|
|
<input id="planerSID" type="hidden" placeholder="sessionID" name="sessionID" required>
|
|
<script type="text/javascript">
|
|
var sid = sessionStorage.getItem("sessionID")
|
|
document.getElementById('planerSID').value = sid;
|
|
</script>
|
|
<input type="time" placeholder="15:30" name="zeit" required>
|
|
<button type="submit">➕</button>
|
|
</div>
|
|
</form>
|
|
</center>
|
|
</div>
|
|
<div hidden class="tmplt_tab" id="_game">
|
|
<center>
|
|
<a onclick="change_game('_zeit')">
|
|
<button class="btn btn-primary btn-lg">Zeit</button>
|
|
</a>
|
|
<a onclick="change_game('_punkte')">
|
|
<button class="btn btn-primary btn-lg">Punkte</button>
|
|
</a>
|
|
<a href="/spiel" onclick="window.open('/spiel', 'newwindow', 'width=600,height=800'); return false;" style="position: fixed; bottom: 10px; right: 10px;">
|
|
<button id="add_game" type="button" class="cancelbtn"> Add game</button> </a>
|
|
<div hidden class="tmplt_tab1" id="_zeit">
|
|
<div class="wrapper">
|
|
|
|
<h1><time>00:00:00</time></h1>
|
|
<button id="strt">start</button>
|
|
<button id="stp">stop</button>
|
|
<button id="rst">reset</button>
|
|
|
|
<form class="modal-content animate" action="/stopuhr" method="POST">
|
|
<div class="container">
|
|
</br>
|
|
<input type="text" placeholder="Tomb Raider" name="spiel" required>
|
|
</br>
|
|
<input type="text" placeholder="parcour" name="art" required>
|
|
</br>
|
|
<input type="text" placeholder="00:00:40" name="zeit" required>
|
|
</br>
|
|
<input id="gameSID" type="hidden" placeholder="Session ID" name="sessionID" required>
|
|
<script type="text/javascript">
|
|
var sid = sessionStorage.getItem("sessionID")
|
|
document.getElementById('gameSID').value = sid;
|
|
</script>
|
|
<input id="gameUID" type="hidden" placeholder="UserID" name="userid" required>
|
|
<script type="text/javascript">
|
|
var sid = sessionStorage.getItem("sessionID")
|
|
document.getElementById('gameUID').value = sid;
|
|
</script>
|
|
</br>
|
|
<button type="submit">➕</button>
|
|
</br>
|
|
</div>
|
|
</form>
|
|
|
|
<table>
|
|
<tr>
|
|
<th>Spieler</th>
|
|
<th>Game</th>
|
|
<th>Aktivität</th>
|
|
<th>Zeit</th>
|
|
</tr>
|
|
{% for i in range(gameda.user|length) %}
|
|
<tr>
|
|
<td>{{ gameda.user[i] }}</td>
|
|
<td>{{ gameda.game[i] }}</td>
|
|
<td>{{ gameda.aktivitaet[i] }}</td>
|
|
<td>{{ gameda.zeit[i] }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div hidden class="tmplt_tab1" id="_punkte">
|
|
<div class="wrapper">
|
|
<form class="modal-content animate" action="/pointGame" method="POST">
|
|
<div class="container">
|
|
</br>
|
|
<input type="text" placeholder="Tomb Raider" name="spiel" required>
|
|
</br>
|
|
<input type="text" placeholder="parcour" name="art" required>
|
|
</br>
|
|
<input type="text" placeholder="60" name="punkte" required>
|
|
</br>
|
|
<input id="gameSID" type="hidden" placeholder="Session ID" name="sessionID" required>
|
|
<script type="text/javascript">
|
|
var sid = sessionStorage.getItem("sessionID")
|
|
document.getElementById('pointgameSID').value = sid;
|
|
</script>
|
|
<input id="gameUID" type="hidden" placeholder="UserID" name="userid" required>
|
|
<script type="text/javascript">
|
|
var sid = sessionStorage.getItem("sessionID")
|
|
document.getElementById('pointgameUID').value = sid;
|
|
</script>
|
|
</br>
|
|
<button type="submit">➕</button>
|
|
</br>
|
|
</div>
|
|
</form>
|
|
<table>
|
|
<tr>
|
|
<th>Spieler</th>
|
|
<th>Game</th>
|
|
<th>Aktivität</th>
|
|
<th>Punkte</th>
|
|
</tr>
|
|
{% for i in range(pointgameda.p_user|length) %}
|
|
<tr>
|
|
<td>{{ pointgameda.p_user[i] }}</td>
|
|
<td>{{ pointgameda.p_game[i] }}</td>
|
|
<td>{{ pointgameda.p_aktivitaet[i] }}</td>
|
|
<td>{{ pointgameda.p_zeit[i] }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</center>
|
|
|
|
|
|
|
|
</div>
|
|
</center>
|
|
</div>
|
|
<div hidden class="tmplt_tab" id="_chat">
|
|
<center>
|
|
|
|
<div id="messages"></div>
|
|
<input type="hidden" id="username" placeholder="Username">
|
|
<input type="text" id="message" placeholder="Message">
|
|
<button onclick="sendMessage();">Send</button>
|
|
</center>
|
|
</div>
|
|
<div hidden class="tmplt_tab" id="_musik">
|
|
<center>
|
|
<h1>Musik</h1>
|
|
<div id="player">
|
|
<div class="controls">
|
|
<button id="prev">Prev</button>
|
|
<button id="play">Play</button>
|
|
<button id="next">Next</button>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const player = new Howl({
|
|
src: [`/music/${id}`],
|
|
format: ["mp3"],
|
|
onend: function() {
|
|
// play next track
|
|
}
|
|
});
|
|
document.getElementById("play").addEventListener("click", function() {
|
|
player.play();
|
|
});
|
|
document.getElementById("prev").addEventListener("click", function() {
|
|
// play previous track
|
|
});
|
|
document.getElementById("next").addEventListener("click", function() {
|
|
// play next track
|
|
});
|
|
</script>
|
|
</center>
|
|
</div>
|
|
<div hidden class="tmplt_tab" id="_mate">
|
|
<center>
|
|
<p>folgende Mateflaschen sind auf Lager {{ mate }} </p>
|
|
<p>Bitte Beachte: <b>Erhöhter Koffeingehalt. Für Kinder und schwangere oder stillende Frauen nicht empfolen</b>
|
|
</p>
|
|
<details>
|
|
<summary id="mate">
|
|
<h4>Mate hinzufügen</h4>
|
|
</summary>
|
|
<form class="modal-content animate" action="/mate" method="POST">
|
|
|
|
<div class="container" style="margin-top: 2em">
|
|
<input type="text" placeholder="Mate Flaschen Anzahl" name="mateFlaschen" required>
|
|
</br>
|
|
<input type="text" placeholder="Mate Marke" name="mateSorte" required>
|
|
</br>
|
|
<input id="mate_sID" type="hidden" placeholder="SessionID" name="sessionID" required>
|
|
<script type="text/javascript">
|
|
var sid = sessionStorage.getItem("sessionID")
|
|
document.getElementById('mate_sID').value = sid;
|
|
</script>
|
|
</br>
|
|
<button type="submit">
|
|
➕
|
|
</button>
|
|
|
|
</div>
|
|
</form>
|
|
</details>
|
|
<details>
|
|
<summary id="mate">
|
|
<h4>Mate trinken</h4>
|
|
</summary>
|
|
<form class="modal-content animate" action="/drink" method="POST">
|
|
|
|
<div class="container" style="margin-top: 2em">
|
|
<input type="text" placeholder="Mate Flaschen Anzahl" name="mateFlaschen" required>
|
|
</br>
|
|
<input type="text" placeholder="Mate Marke" name="mateSorte" required>
|
|
</br>
|
|
<input id="mate_sID" type="hidden" placeholder="SessionID" name="sessionID" required>
|
|
<script type="text/javascript">
|
|
var sid = sessionStorage.getItem("sessionID")
|
|
document.getElementById('mate_sID').value = sid;
|
|
</script>
|
|
</br>
|
|
<button type="submit">
|
|
🍹
|
|
</button>
|
|
|
|
</div>
|
|
</form>
|
|
</details>
|
|
</center>
|
|
</div>
|
|
<div hidden class="tmplt_tab" id="_seession">
|
|
<center>
|
|
<h1> Session Statistik</h1>
|
|
{% endblock %}
|
|
|
|
</center>
|
|
</div>
|
|
<div hidden class="tmplt_tab" id="_files">
|
|
<form method="post" enctype="multipart/form-data">
|
|
<input type="file" name="file">
|
|
<input type="submit" value="Upload">
|
|
</form>
|
|
<form class="modal-content animate" action="/upload_file" method="POST">
|
|
<div class="container" style="margin-top: 2em">
|
|
<label for="form_file">
|
|
<input id="form_file" type="file">
|
|
<button type="submit">upload</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script src="{{url_for('static', filename='js/general.js')}}"></script>
|
|
<script src="{{url_for('static', filename='js/control.js')}}"></script>
|
|
<script src="{{url_for('static', filename='js/chat.js')}}"></script>
|
|
<script src="{{url_for('static', filename='js/game.js')}}"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/howler@2.2.0/dist/howler.min.js"></script>
|
|
</body>
|
|
|
|
</html>
|