Upload New File

public/AirPollutantViewer.css

+html, body, #cesiumContainer {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    font-family: sans-serif;
+    background: #000;
+    position: relative;
+}
+
+/* Responsive menu panel */
+#menu {
+    position: fixed;
+    top: 10px;
+    left: 10px;
+    z-index: 100;
+}
+
+#menu h2 {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    
+}
+
+.checkbox-group {
+    margin-bottom: 10px;
+}
+
+.checkbox-group label {
+    display: flex;
+	
+    align-items: center;
+    
+    color: white;	
+}
+
+.backdrop {
+    background: rgba(42, 42, 42, 0.7);
+    border-radius: 5px;
+    border: 1px solid #444;
+    color: #fff;
+    font-size: 0.9rem;
+    padding: 10px;
+    box-shadow: 0 0 10px 1px #000;
+    max-width: 550px;
+	width: max-content;
+}
+
+#loadingScreen {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 180px;
+    height: auto;
+    background-color: white;
+    display: none;
+    z-index: 99999;
+    box-shadow: 0 0 10px 1px #000;
+}
+
+#loadingScreen img {
+    width: 100%;
+    height: auto;
+    display: block;
+}
+
+/* Cesium InfoBox adjustments */
+.cesium-infoBox {
+    width: 80%;
+    max-width: 500px;
+    background: rgba(0, 0, 0, 0.65);
+    border-radius: 10px;
+    border: 1px solid #444;
+    padding: 5px 10px;
+    color: #fff;
+    font-family: "Fira Sans", sans-serif;
+}
+
+button.cesium-infoBox-camera {
+    display: none;
+}
+
+/* Logo/credits in fixed position */
+.credit1, .credit2 {
+    width: 80px;
+    height: 80px;
+    position: fixed;
+    bottom: 70px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    z-index: 100;
+    box-shadow: 0 0 10px 1px #000;
+}
+
+.credit1 {
+    left: 10px;
+    background-image: url('Images/hft.jpg');
+}
+
+.credit2 {
+    left: 100px;
+    background-image: url('Images/email.jpg');
+}
+
+/* Legend styling */
+.legend-container {
+    position: fixed;
+    bottom: 20px;
+    right: 10px;
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    background-color: white;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+.legend-title {
+    font-weight: bold;
+    margin-bottom: 5px;
+    font-size: 0.9rem;
+}
+
+.legend {
+    width: 20px;
+    height: 200px;
+    background: linear-gradient(to bottom, red, green, blue);
+    position: relative;
+    margin-bottom: 5px;
+}
+
+.legend-label {
+    position: absolute;
+    font-size: 0.75rem;
+    font-weight: bold;
+    background: rgba(255, 255, 255, 0.8);
+    padding: 2px 4px;
+    border-radius: 3px;
+    white-space: nowrap;
+}
+
+.legend-label.high {
+    top: 0;
+    left: 100%;
+    color: red;
+}
+
+.legend-label.medium {
+    top: 50%;
+    transform: translateY(-50%);
+    left: 100%;
+    color: green;
+}
+
+.legend-label.low {
+    bottom: 0;
+    left: 100%;
+    color: blue;
+}
+
+.credit-bar {
+    position: fixed;
+    bottom: 35px;
+    left: 6px;
+    font-size: 14px;
+    color: white;
+    background: rgba(0, 0, 0, 0.7);
+    padding: 6px 12px;
+    border-radius: 5px;
+    z-index: 99999;
+    box-shadow: 0 0 10px #000;
+    font-family: sans-serif;
+}
+
+.credit-bar a {
+    color: #1DA1F2; /* LinkedIn blue */
+    text-decoration: none;
+    font-weight: bold;
+}
+
+.credit-bar a:hover {
+    text-decoration: underline;
+}
\ No newline at end of file