From 2af13b980f6ae7f4eca07d7d510bd02ebed550ae Mon Sep 17 00:00:00 2001
From: hyperbel <hyperbel@users.noreply.github.com>
Date: Mon, 23 Oct 2023 16:43:20 +0000
Subject: [PATCH] cleanup

---
 party/static/css/session.css | 125 +++++++++++++++--------------------
 party/templates/session.html |  78 +++++++++++++---------
 2 files changed, 99 insertions(+), 104 deletions(-)

diff --git a/party/static/css/session.css b/party/static/css/session.css
index bde29a6..d03bb1b 100644
--- a/party/static/css/session.css
+++ b/party/static/css/session.css
@@ -6,13 +6,26 @@ body {
 }
 
 /* Oberer Balken, der Infos anzeigt*/
-.top-bar {
+header {
     background-color: #333;
     height: 5%;
     width: 100%;
     position: fixed;
-    top: 0;
-    left: 0;
+}
+
+header ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #333;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+main {
+    top: 5%;
 }
 
 .content {
@@ -61,31 +74,25 @@ p {
 }
 
 /*Systeminformationen im Balken*/
- .cpuinfo {
+.stat {
     position: fixed;
     top: 0;
+    color: rgb(220, 220, 210);
+    font-size: 100%;
+    cursor: pointer; /* Hinzugefügter CSS-Stil für den Klick */
+
+}
+#cpu {
     right: 7%;
-    color: rgb(220, 220, 210);
-    font-size: 100%;
-    cursor: pointer; /* Hinzugefügter CSS-Stil für den Klick */
 }
-.raminfo {
-    position: fixed;
-    top: 0;
+#ram {
     right: 17%;
-    color: rgb(220, 220, 210);
-    font-size: 100%;
-    cursor: pointer; /* Hinzugefügter CSS-Stil für den Klick */
 }
-.tempinfo {
-    position: fixed;
-    top: 0;
+#temp {
     right: 27%;
-    color: rgb(220, 220, 210);
-    font-size: 100%;
-    cursor: pointer; /* Hinzugefügter CSS-Stil für den Klick */
 }
-   .musik {
+
+.musik {
     position: fixed;
     top: 0;
     right: 4%;
@@ -128,12 +135,9 @@ p {
 }
 
 /*Musik steuerung im Balken*/
- .topnext {
-    position: fixed;
-    top: 1%;
-    left: 40%;
+ #skip_song_button {
     width: 70px;
-    height: 30px;
+    height: 100%;
     background-color: #454443;
     border-radius: 10px;
     background-position: center;
@@ -141,32 +145,24 @@ p {
     background-size: 40%;
     background-image: url('/static/icons/next.png');
 }
-  .topback {
-    position: fixed;
-    top: 1%;
-    left: 30%;
+
+.song_button {
     width: 70px;
-    height: 30px;
+    height: 100%;
     background-color: #454443;
     border-radius: 10px;
     background-position: center;
     background-repeat: no-repeat;
-    background-size: 30%;
+    background-size: 40%;
+}
+#previous_song_button {
     background-image: url('/static/icons/back.png');
 }
-  .toppause {
-    position: fixed;
-    top: 1%;
-    left: 35%;
-    width: 70px;
-    height: 30px;
-    background-color: #454443;
-    border-radius: 10px;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 60%;
+
+#toggle_play_button {
     background-image: url('/static/icons/play.png');
 }
+
 .songinfo {
     position: fixed;
     top: 0;
@@ -363,9 +359,10 @@ cursor: pointer;
 }
 
 #events {
-width: 80%; /* Ändere die Breite entsprechend deinen Anforderungen */
-margin-left: auto;
-margin-right: auto;
+    width: 80%;
+    height: 50%;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 #mate_container {
@@ -667,7 +664,7 @@ margin-right: auto;
     right: 54%;
 }
 
-select{
+select {
     background-color:#454443; ;
 }
 
@@ -680,40 +677,25 @@ select{
     border: white 1px solid;
 }
 
-.nav_button {
+input[type=radio] {
     display: none;
 }
 
-#home_button:checked ~ #home {
-    display: block;
-}
-
-#planer_button:checked ~ #planer {
-    display: block;
-}
-
-#games_button:checked ~ #games {
-    display: block;
-}
-
-#chat_button:checked ~ #chat {
-    display: block;
-}
-
-#music_button:checked ~ #music {
-    display: block;
-}
-
-#mate_button:checked ~ #mate {
-    display: block;
-}
-
+#home_button:checked ~ #home,
+#planer_button:checked ~ #planer,
+#games_button:checked ~ #games,
+#chat_button:checked ~ #chat,
+#music_button:checked ~ #music,
+#mate_button:checked ~ #mate,
 #settings_button:checked ~ #settings {
     display: block;
 }
 
 section {
     display: none;
+    position: fixed;
+    top: 10%;
+    left: 10%;
 }
 
 #home_button + label {
@@ -743,4 +725,3 @@ section {
 #settings_button + label {
     content: url('/static/icons/settings.png');
 }
-
diff --git a/party/templates/session.html b/party/templates/session.html
index 2c7b912..7a52884 100644
--- a/party/templates/session.html
+++ b/party/templates/session.html
@@ -6,36 +6,46 @@
     <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"> </span>
+            </li>
+            <li>
+                <span id="ramstat"></span>
+            </li>
+            <li>
+                <span id="cpustat"> </span>
+            </li>
+            <li>
+                <span class="uhrzeit"></span>
+            </li>
+            <li>
+                <span id="username" onclick="togglePopup()">Peter</span>
+            </li>
+        </ul>
+        
+    </header>
+    <main>
     {% 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"> C°</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>
-     
-
     <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>
@@ -92,9 +102,12 @@
     <section id="games">
         <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>
+        <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>
 
         <div id="team" class="hidden1" >
             <p>Du bist in Team</p>
@@ -216,6 +229,7 @@
             <p>Hier könntest du logout machen</p>
         </div>
     </div>
+    </main>
     
      <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>