mirror of
https://github.com/lucaspalomodevelop/Party.git
synced 2026-03-13 08:09:37 +00:00
new design
This commit is contained in:
fingadumbledore
parent
20733cc5a4
commit
07ad8b87ff
11
main.py
11
main.py
@ -144,6 +144,17 @@ def controll():
|
||||
log_server("called /login")
|
||||
return render_template("controll.html")
|
||||
|
||||
@app.route("/game")
|
||||
def game():
|
||||
log_server("called /game")
|
||||
return render_template("game.html")
|
||||
|
||||
@app.route("/willkommen")
|
||||
def willkommen():
|
||||
log_server("called /willkommen")
|
||||
return render_template("willkommen.html")
|
||||
|
||||
|
||||
@app.route("/rgb")
|
||||
def rgb():
|
||||
log_server("called /rgb")
|
||||
|
||||
BIN
static/img/house.png
Normal file
BIN
static/img/house.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
static/img/user.png
Normal file
BIN
static/img/user.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
207
templates/game.html
Normal file
207
templates/game.html
Normal file
@ -0,0 +1,207 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Game</title>
|
||||
<style>
|
||||
Body {
|
||||
|
||||
background-image: linear-gradient(to right, rgb(89, 89, 175), rgb(38, 134, 62))
|
||||
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
body {font-family: Arial, Helvetica, sans-serif;
|
||||
background-image: linear-gradient(to right, rgb(38, 134, 62), rgb(89, 89, 175))
|
||||
}
|
||||
|
||||
/* Full-width input fields */
|
||||
|
||||
/* Set a style for all buttons */
|
||||
button {
|
||||
background-color: #6d4087;
|
||||
color: white;
|
||||
padding: 14px 20px;
|
||||
margin: 8px 0;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/
|
||||
|
||||
$orange: #ffa600;
|
||||
$grey:#f3f3f3;
|
||||
$white: #fff;
|
||||
$base-color:$orange ;
|
||||
|
||||
|
||||
/* Mixin's */
|
||||
@mixin transition {
|
||||
-webkit-transition: all 0.5s ease-in-out;
|
||||
-moz-transition: all 0.5s ease-in-out;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
@mixin corners ($radius) {
|
||||
-moz-border-radius: $radius;
|
||||
-webkit-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
-khtml-border-radius: $radius;
|
||||
}
|
||||
|
||||
body {
|
||||
background:$base-color;
|
||||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 800px;
|
||||
margin: 30px auto;
|
||||
color:$white;
|
||||
text-align:center;
|
||||
float:left;
|
||||
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 100;
|
||||
font-size: 2.6em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#seconds, #tens{
|
||||
font-size:2em;
|
||||
}
|
||||
|
||||
button{
|
||||
@include corners (5px);
|
||||
background:$base-color;
|
||||
color:$white;
|
||||
border: solid 1px $white;
|
||||
border-radius: 8px;
|
||||
text-decoration:none;
|
||||
cursor:pointer;
|
||||
font-size:1.2em;
|
||||
padding:18px 10px;
|
||||
width:80px;
|
||||
margin: 10px;
|
||||
outline: none;
|
||||
&:hover{
|
||||
@include transition;
|
||||
background:$white;
|
||||
border: solid 1px $white;
|
||||
color:$base-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
input[type=text], input[type=password] {
|
||||
width: 30%;
|
||||
margin: 8px 0;
|
||||
padding: 12px 20px;
|
||||
display: inline-block;
|
||||
border: 2px solid green;
|
||||
box-sizing: border-box;
|
||||
border-radius: 12px;
|
||||
color: #839c87;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var modal = document.getElementById('id01');
|
||||
|
||||
// When the user clicks anywhere outside of the modal, close it
|
||||
window.onclick = function(event) {
|
||||
if (event.target == modal) {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
window.onload = function () {
|
||||
|
||||
var seconds = 00;
|
||||
var tens = 00;
|
||||
var appendTens = document.getElementById("tens")
|
||||
var appendSeconds = document.getElementById("seconds")
|
||||
var buttonStart = document.getElementById('button-start');
|
||||
var buttonStop = document.getElementById('button-stop');
|
||||
var buttonReset = document.getElementById('button-reset');
|
||||
var Interval ;
|
||||
|
||||
buttonStart.onclick = function() {
|
||||
|
||||
clearInterval(Interval);
|
||||
Interval = setInterval(startTimer, 10);
|
||||
}
|
||||
|
||||
buttonStop.onclick = function() {
|
||||
clearInterval(Interval);
|
||||
}
|
||||
|
||||
|
||||
buttonReset.onclick = function() {
|
||||
clearInterval(Interval);
|
||||
tens = "00";
|
||||
seconds = "00";
|
||||
appendTens.innerHTML = tens;
|
||||
appendSeconds.innerHTML = seconds;
|
||||
}
|
||||
|
||||
|
||||
|
||||
function startTimer () {
|
||||
tens++;
|
||||
|
||||
if(tens <= 9){
|
||||
appendTens.innerHTML = "0" + tens;
|
||||
}
|
||||
|
||||
if (tens > 9){
|
||||
appendTens.innerHTML = tens;
|
||||
|
||||
}
|
||||
|
||||
if (tens > 99) {
|
||||
console.log("seconds");
|
||||
seconds++;
|
||||
appendSeconds.innerHTML = "0" + seconds;
|
||||
tens = 0;
|
||||
appendTens.innerHTML = "0" + 0;
|
||||
}
|
||||
|
||||
if (seconds > 9){
|
||||
appendSeconds.innerHTML = seconds;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<center><h1>Games</h1></center>
|
||||
|
||||
|
||||
<div class="wrapper">
|
||||
<h3>Stopuhr</h3>
|
||||
<p><span id="seconds">00</span>:<span id="tens">00</span></p>
|
||||
<label>Enter Game name:</label>
|
||||
<input type="text" name="name">
|
||||
<button id="button-start">Start</button>
|
||||
<button id="button-stop">Stop</button>
|
||||
<button id="button-reset">Reset</button>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -2,7 +2,7 @@
|
||||
<html lang="de">
|
||||
<html>
|
||||
<head>
|
||||
<title>🎉 Party</title>
|
||||
<title>Willkommen</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
|
||||
@ -8,79 +8,7 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
|
||||
</head>
|
||||
<script>
|
||||
var modal = document.getElementById('id01');
|
||||
|
||||
// When the user clicks anywhere outside of the modal, close it
|
||||
window.onclick = function(event) {
|
||||
if (event.target == modal) {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
window.onload = function () {
|
||||
|
||||
var seconds = 00;
|
||||
var tens = 00;
|
||||
var appendTens = document.getElementById("tens")
|
||||
var appendSeconds = document.getElementById("seconds")
|
||||
var buttonStart = document.getElementById('button-start');
|
||||
var buttonStop = document.getElementById('button-stop');
|
||||
var buttonReset = document.getElementById('button-reset');
|
||||
var Interval ;
|
||||
|
||||
buttonStart.onclick = function() {
|
||||
|
||||
clearInterval(Interval);
|
||||
Interval = setInterval(startTimer, 10);
|
||||
}
|
||||
|
||||
buttonStop.onclick = function() {
|
||||
clearInterval(Interval);
|
||||
}
|
||||
|
||||
|
||||
buttonReset.onclick = function() {
|
||||
clearInterval(Interval);
|
||||
tens = "00";
|
||||
seconds = "00";
|
||||
appendTens.innerHTML = tens;
|
||||
appendSeconds.innerHTML = seconds;
|
||||
}
|
||||
|
||||
|
||||
|
||||
function startTimer () {
|
||||
tens++;
|
||||
|
||||
if(tens <= 9){
|
||||
appendTens.innerHTML = "0" + tens;
|
||||
}
|
||||
|
||||
if (tens > 9){
|
||||
appendTens.innerHTML = tens;
|
||||
|
||||
}
|
||||
|
||||
if (tens > 99) {
|
||||
console.log("seconds");
|
||||
seconds++;
|
||||
appendSeconds.innerHTML = "0" + seconds;
|
||||
tens = 0;
|
||||
appendTens.innerHTML = "0" + 0;
|
||||
}
|
||||
|
||||
if (seconds > 9){
|
||||
appendSeconds.innerHTML = seconds;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
a {
|
||||
@ -172,30 +100,6 @@ margin: 10px;
|
||||
}
|
||||
|
||||
|
||||
#customers {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#customers td, #customers th {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#customers tr:nth-child(even){background-color: }
|
||||
|
||||
#customers tr:hover {background-color: rgb(104, 72, 101);}
|
||||
|
||||
#customers th {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
text-align: left;
|
||||
background-color:#6d4087;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
input[type=text], input[type=password] {
|
||||
width: 30%;
|
||||
margin: 8px 0;
|
||||
@ -214,56 +118,34 @@ input[type=text], input[type=password] {
|
||||
<a href="http://127.0.0.1:5000/logout">
|
||||
<button class="btn btn-primary btn-lg">Logout</button>
|
||||
</a>
|
||||
<a href="http://127.0.0.1:5000/controll">⚙</a>
|
||||
<center>
|
||||
<a href="http://127.0.0.1:5000/planer">
|
||||
<button class="btn btn-primary btn-lg">Planer</button>
|
||||
</a>
|
||||
<a href="http://127.0.0.1:5000/game">
|
||||
<button class="btn btn-primary btn-lg">Game</button>
|
||||
</a>
|
||||
<a href="http://127.0.0.1:5000/chat">
|
||||
<button class="btn btn-primary btn-lg">Chat</button>
|
||||
</a>
|
||||
<a href="http://127.0.0.1:5000/controll">
|
||||
<button class="btn btn-primary btn-lg">Settings</button>
|
||||
</a>
|
||||
</center>
|
||||
|
||||
|
||||
<center><h1>Party</h1></center>
|
||||
<center> <div id="current_date"></p>
|
||||
<script>
|
||||
date = new Date();
|
||||
year = date.getFullYear();
|
||||
month = date.getMonth() + 1;
|
||||
day = date.getDate();
|
||||
document.getElementById("current_date").innerHTML = month + "/" + day + "/" + year;
|
||||
</script></div><center>
|
||||
<div class="wrapper">
|
||||
<h3>Stopuhr</h3>
|
||||
<p><span id="seconds">00</span>:<span id="tens">00</span></p>
|
||||
<label>Enter Game name:</label>
|
||||
<input type="text" name="name">
|
||||
<button id="button-start">Start</button>
|
||||
<button id="button-stop">Stop</button>
|
||||
<button id="button-reset">Reset</button>
|
||||
<center><h3>Spiele Statistiken</h3></center>
|
||||
<center><iframe id="ifr" src="/willkommen" width="750" height="500" frameBorder="0" src= pfad></iframe></center>
|
||||
<script>
|
||||
function change_Iframe(pfad)
|
||||
{
|
||||
var pfad;
|
||||
var i = document.getElementById("ifr").src = pfad;
|
||||
var el = document.getElementById('ifr');
|
||||
el.scrollIntoView(true);
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
<iframe id="ifr" src="/chat" width="750" height="500" frameBorder="0" src= pfad></iframe>
|
||||
</script>
|
||||
|
||||
|
||||
<table id="customers">
|
||||
|
||||
<tr>
|
||||
<th>Spiel</th>
|
||||
<th>Spieler*innen</th>
|
||||
<th>Zeit</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Test1</td>
|
||||
<td>Test User 1</td>
|
||||
<td>12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Test 2</td>
|
||||
<td>Test User 2</td>
|
||||
<td>20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Test 3</td>
|
||||
<td>Test User 3</td>
|
||||
<td>5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
15
templates/willkommen.html
Normal file
15
templates/willkommen.html
Normal file
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Willkommen</title>
|
||||
</head>
|
||||
<body>
|
||||
<center><h1>Willkommen</h1>
|
||||
<p>Vielen Dank das du Party-Controller benutzt</p>
|
||||
<h3>Regeln</h3>
|
||||
</center>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user