versuch

static/css/style.css

@@ -89,68 +89,6 @@ input[type=text], input[type=password] input[type=time]{
   background-color: rgb(142, 142, 143);
 } 
 
-
-
-.switch {
-position: relative;
-display: inline-block;
-width: 60px;
-height: 34px;
-}
-
-.switch input { 
-opacity: 0;
-width: 0;
-height: 0;
-}
-
-.slider {
-position: absolute;
-cursor: pointer;
-top: 0;
-left: 0;
-right: 0;
-bottom: 0;
-background-color: #ccc;
--webkit-transition: .4s;
-transition: .4s;
-}
-
-.slider:before {
-position: absolute;
-content: "";
-height: 26px;
-width: 26px;
-left: 4px;
-bottom: 4px;
-background-color: white;
--webkit-transition: .4s;
-transition: .4s;
-}
-
-input:checked + .slider {
-background-color: #020202;
-}
-
-input:focus + .slider {
-box-shadow: 0 0 1px #2196F3;
-}
-
-input:checked + .slider:before {
--webkit-transform: translateX(26px);
--ms-transform: translateX(26px);
-transform: translateX(26px);
-}
-
-/* Rounded sliders */
-.slider.round {
-border-radius: 34px;
-}
-
-.slider.round:before {
-border-radius: 50%;
-}
-
 .dark-mode {
 background-image: linear-gradient(to right, rgb(5, 49, 16), rgb(63, 63, 236))
 
@@ -315,8 +253,29 @@ summary::-webkit-details-marker,
       border-radius: 5px;
       animation-name: popupFadeIn;
       animation-duration: 0.5s;
+      display: flex;
+      flex-direction: column;
     }
     
+    #popupContent p {
+      margin-top: 10px;
+    }
+    
+    #popupContent img {
+      margin-top: 20px;
+    }
+    
+    #popupContent button {
+      margin-top: 10px;
+    }
+    
+    #popupContent .btn-group {
+      display: flex;
+      justify-content: center;
+      width: 100%;
+    }
+    
+    
     @keyframes popupFadeIn {
       from { opacity: 0; transform: translate(-50%, -60%); }
       to { opacity: 1; transform: translate(-50%, -50%); }
@@ -333,4 +292,60 @@ summary::-webkit-details-marker,
     color:white;
     text-decoration: none;
     margin-left: 16px;
+}
+
+
+.switch {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: relative;
+  cursor: pointer;
+  background-color: #ccc;
+  border-radius: 34px;
+  transition: background-color 0.2s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  border-radius: 50%;
+  transition: transform 0.2s;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  transform: translateX(26px);
+}
+
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
 }

templates/session.html

@@ -26,12 +26,14 @@
 			<p>Uptime: {{der}}</p>
 
 			<p>Creator: Host</p>
-		  <img src="../static/img/qr.png">
-		  <button id="closeButton">Close</button>
-		  <button class="btn btn-primary btn-lg">&#x2699;&#xFE0F;</button>
-		  <a href="/logout">
-			<button class="btn btn-primary btn-lg">	&#x1F44B;</button>
-		</a>
+		  <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">&#x2699;&#xFE0F;</button>
+			<a href="/logout">
+				<button class="btn btn-primary btn-lg">	&#x1F44B;</button>
+			</a>
+		  </div>
 		</div>
 		<label class="switch">
 			<input type="checkbox" onclick="myFunction()">