Refactor HTML code and add CSS styling

maxiwee69 · Feb 1, 2024 · c3aa6a4 · c3aa6a4
1 parent 999eeb7
commit c3aa6a4
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 70 deletions.
diff --git a/tickets/quicksilver/1351362176/egeg.html b/tickets/quicksilver/1351362176/egeg.html
diff --git a/tickets/quicksilver/1351362176/index.html b/tickets/quicksilver/1351362176/index.html
@@ -1,21 +1,57 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Cubecraft tickets</title>
+	<title>Cubecraft tickets</title>
+	<link rel="stylesheet" href="style.css">
 </head>
 <body>
-    <button id="supporterButton">Supporter schreiben</button>
-    <video id="video" src="https://shattereddisk.github.io/rickroll/rickroll.mp4" style="display: none;"></video>
-    <script>
-        document.getElementById("supporterButton").addEventListener("click", function(event) {
-            const video = document.getElementById("video");
-            event.preventDefault();
-            video.style.display = "block";
-            video.muted = false;
-            video.play();
-            video.requestFullscreen();
-        });
-    </script>
+	<h1 class="title">Hier kannst du einen der supporter des Cubecraft servers kontaktieren</h1>
+	<button id="supporterButton">Supporter schreiben</button>
+	<video id="video" src="https://shattereddisk.github.io/rickroll/rickroll.mp4" style="display: none;"></video>
+	<script>
+		document.getElementById("supporterButton").addEventListener("click", function(event) {
+			const video = document.getElementById("video");
+			event.preventDefault();
+			video.style.display = "block";
+			video.muted = false;
+			video.play();
+			video.requestFullscreen();
+		});
+	</script>
+	<script>
+		if ('WebSocket' in window) {
+			(function () {
+				function refreshCSS() {
+					var sheets = [].slice.call(document.getElementsByTagName("link"));
+					var head = document.getElementsByTagName("head")[0];
+					for (var i = 0; i < sheets.length; ++i) {
+						var elem = sheets[i];
+						var parent = elem.parentElement || head;
+						parent.removeChild(elem);
+						var rel = elem.rel;
+						if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
+							var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
+							elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
+						}
+						parent.appendChild(elem);
+					}
+				}
+				var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
+				var address = protocol + window.location.host + window.location.pathname + '/ws';
+				var socket = new WebSocket(address);
+				socket.onmessage = function (msg) {
+					if (msg.data == 'reload') window.location.reload();
+					else if (msg.data == 'refreshcss') refreshCSS();
+				};
+				if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
+					console.log('Live reload enabled.');
+					sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
+				}
+			})();
+		}
+		else {
+			console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
+		}
+	</script>
 </body>
 </html>
-
diff --git a/tickets/quicksilver/1351362176/style.css b/tickets/quicksilver/1351362176/style.css
@@ -0,0 +1,42 @@
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-color: #f8f8f8;
+    font-family: Arial, sans-serif;
+}
+
+button {
+    padding: 15px 25px;
+    font-size: 24px;
+    text-align: center;
+    cursor: pointer;
+    outline: none;
+    color: #fff;
+    background-color: #4CAF50;
+    border: none;
+    border-radius: 15px;
+    box-shadow: 0 9px #999;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    display: flex;
+}
+
+button:hover {background-color: #3e8e41}
+
+button:active {
+  background-color: #3e8e41;
+  box-shadow: 0 5px #666;
+  transform: translateY(4px);
+}
+
+.title {
+    text-align: center;
+    color: #4CAF50;
+    font-size: 2em;
+    padding: 20px;
+    margin-bottom: 20px;
+}