diff --git a/webradar/assets/image/background.png b/webradar/assets/image/background.png new file mode 100644 index 0000000..feb42cf Binary files /dev/null and b/webradar/assets/image/background.png differ diff --git a/webradar/styles.css b/webradar/styles.css index d4842d2..c564217 100644 --- a/webradar/styles.css +++ b/webradar/styles.css @@ -6,6 +6,9 @@ body { align-items: center; height: 100vh; background-color: #000000; /* Change the background color as needed */ + background-image: url('assets/image/background.png'); + background-repeat: repeat; + background-size: 128px 128px; } #canvasContainer { @@ -23,12 +26,27 @@ canvas { } #settingsHolder { - visibility: hidden; - position: absolute; - top: inherit; - left: inherit; - width: inherit; - height: 20%; + visibility: visible; + position: fixed; + top: 50%; + left: 0; + transform: translateY(-50%); + width: auto; + height: auto; + z-index: 100; +} + +#settingsHolder .settings { + display: flex; + flex-direction: column; + font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + color: white; + visibility: visible; + opacity: 0.8; + padding: 10px; + background-color: rgba(25, 25, 25, 0.7); + border-radius: 5px; + transition: opacity 0.3s ease; } #settingsHolder:hover .settings {