pointer colour change

assets/instruments/instruments.json

@@ -93,7 +93,7 @@
     "midi-channel-name": "conductorToms",
     "image": {
       "filename": "toms.svg",
-      "yPos": "42%",
+      "yPos": "20%",
       "width": "100",
       "height": "100"
     }

assets/svg/time-pointer.svg

@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="3" height="1200">
    
-<line style="fill: rgb(0, 216, 0); stroke: rgb(255, 0, 0);" x1="1" y1="1" x2="1" y2="1200"></line>
+<line style="fill: rgb(0, 216, 0); stroke: rgb(0, 0, 0);" x1="1" y1="1" x2="1" y2="1200"></line>
 
 </svg>

index.html

@@ -18,10 +18,12 @@
 
   <div id="main-content">
 
-
-    <div class="title-title">
+  <div>
+      <object type="image/svg+xml" data="/Logo.svg" id="logo-main"></object>
+  </div>
+    <!-- <div class="title-title">
       The Conductor
-    </div>
+    </div> -->
     <div class="title" id="title">
       15.5.2024 08:00:00 - 08:01:00 UTC
 

styles.css

@@ -174,17 +174,27 @@ html {
     width: 50%;
 }
 
+#logo-main{
+    width: 80px; 
+    height: 80px;
+    margin-top: 60px;
+    display: flex;
+    opacity: 0.1;
+    /* animation: rotate360 10s linear infinite; */
+}
+
 .title{
     top: 30px; 
     width: 100%;
-    margin-top: 30px;
-    margin-bottom: 80px;
+    margin-top: 40px;
+    margin-bottom: 50px;
     text-align: center;
     color: white;  
     background-color: rgb(0,0,0);
     /* height: 20vh; */
     font-family: Helvetica;
-    font-size: clamp(14px,1.1vw, 18px);
+    font-size: clamp(12px,1.1vw, 18px);
+    opacity: 0.1;
 
 }
 
@@ -206,7 +216,8 @@ html {
 
 .stave-svg {
     position: relative;
-    z-index: 1; 
+    z-index: 1;
+    opacity: 0.3; 
 }