Added Transition effect and about us content

static/styles.css

@@ -6,7 +6,7 @@ body {
     align-items: center;
     height: 100%;
     margin: 0;
-    background: white;
+    background-image: url('assets/2.png');
     overflow: hidden;
     position: relative;
  }
@@ -316,6 +316,8 @@ h1 {
 
 }
 
+/* Changelog Section */
+
 #changelogSection {
     background: white;
     padding: 20px;
@@ -385,3 +387,154 @@ h1 {
 #closeChangelog:hover {
     color: darkred;
 }
+
+/* About Us Button */
+#aboutUsButton {
+    width: 23px;
+    height: 23px;
+    border: 3px solid black; 
+    color: black; 
+    font-size: 24px;
+    font-weight: bold;
+    border-radius: 50%; 
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 1100;
+    background: transparent; 
+    transition: border-color 0.3s ease, color 0.3s ease;
+}
+
+#aboutUsButton.active {
+    color: white; /* White color for text */
+    border-color: white; /* White border when active */
+}
+
+#aboutUsButton:hover {
+    border-color: blue; 
+    color: blue; 
+}
+
+/* Expanding Overlay */
+#aboutUsOverlay {
+    position: fixed;
+    width: 0;
+    height: 0;
+    background: #308bcf;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    transition: width 0.6s ease-out, height 0.6s ease-out, opacity 0.3s ease;
+    opacity: 0;
+    z-index: 999;
+    pointer-events: none;
+}
+
+/* Active State */
+#aboutUsOverlay.active {
+    width: 200vw;
+    height: 200vw;
+    opacity: 1;
+}
+
+#aboutUsContent {
+    visibility: hidden;
+    transition: opacity 0.6s ease, visibility 0.6s ease;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    opacity: 0;
+    z-index: 1000;
+    top: 300px;
+}
+
+#aboutUsContent img {
+    margin: 5px;
+}
+
+/* Additional Image container */
+.imageContainer {
+    display: flex;
+    justify-content: center;
+}
+
+/* Initial Hidden State (when not shown) */
+#aboutUsContent.hidden {
+    visibility: hidden;
+    opacity: 0;
+}
+
+/* After animation, show content */
+#aboutUsContent.show {
+    opacity: 1;
+    visibility: visible;
+}
+
+/* Image Container */
+.imageContainer {
+    display: flex;
+    justify-content: center; /* Center images */
+}
+
+/* GitHub Image */
+.githubImage {
+    max-width: 40px;  /* Adjust GitHub image size */
+    height: auto;
+    top: 70px;
+    position: relative;
+}
+
+/* GitLab Image */
+.gitlabImage {
+    max-width: 40px;  /* Adjust GitLab image size */
+    height: auto;
+    top: 70px;
+    position: relative;
+}
+
+/* Additional Image (CG) */
+.additionalImage {
+    max-width: 40px;  /* Adjust Additional Image size */
+    height: auto;
+    top: 70px;
+    position: relative;
+}
+
+/* AirLink Text */
+#airLinkText {
+    color: white;
+    font-size: 50px; /* Adjust size */
+    font-weight: bold;
+    text-align: center;
+    position: absolute;
+    top: 50px; /* Adjust vertical position */
+    left: 50%;
+    transform: translate(-50%, -50%); /* Centering */
+    white-space: nowrap; /* Prevents text from wrapping */
+}
+
+#abouttext{
+    color: white;
+    text-align: center;
+    position: relative;
+    top: 90px;
+}
+
+#separatorLine {
+    width: 120%; /* Adjust width */
+    border: 1px solid white; /* White line */
+    margin: 10px auto; /* Centered */
+    opacity: 0.7; /* Slight transparency */
+    position: relative;
+    left: -20px;
+    top: 70px;
+}