css to sass with vitejs

2024-06-21 13:56:19 +02:00 · 2024-06-21 13:56:19 +02:00 · 24b105f606
commit 24b105f606
parent 4905c519b4
40 changed files with 2032 additions and 883 deletions
--- a/.gitignore
+++ b/.gitignore
@ -18,3 +18,4 @@ var/run/*
 *.swp
 .env
 venv/
+node_modules
--- a/data/www/browserconfig.xml
+++ b/data/www/browserconfig.xml
@ -1,2 +1,2 @@
 <?xml version="1.0" encoding="utf-8"?>
-<browserconfig><msapplication><tile><square70x70logo src="/favicon/ms-icon-70x70.png"/><square150x150logo src="/favicon/ms-icon-150x150.png"/><square310x310logo src="/favicon/ms-icon-310x310.png"/><TileColor>#692fbd</TileColor></tile></msapplication></browserconfig>
+<browserconfig><msapplication><tile><square70x70logo src="/favicon/ms-icon-70x70.png"/><square150x150logo src="/favicon/ms-icon-150x150.png"/><square310x310logo src="/favicon/ms-icon-310x310.png"/><TileColor>$spicyPurple</TileColor></tile></msapplication></browserconfig>
--- a/data/www/css/compiled/fleet-studio.css
+++ b/data/www/css/compiled/fleet-studio.css
@ -0,0 +1 @@
+.invisible{visibility:hidden!important}.hidden{display:none!important}.tac{text-align:center}a{text-decoration:none}ul.pagetab{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;border-bottom:1px solid rgb(14,239,95)}ul.pagetab li{flex:1;display:flex;flex-direction:row;justify-content:center;align-items:center;border-right:1px solid rgb(14,239,95)}ul.pagetab li a{flex:1;display:flex;flex-direction:row;justify-content:center;align-items:center;padding:20px 5px;color:#0eef5f;font-weight:700;text-decoration:none}ul.pagetab li.active a{background:#0eef5f;color:#fff}html{margin:0;padding:0;display:flex;flex:1;background:#0f0035;font-family:Arial,"sans-serif";color:#fff;height:100vh}body{margin:0;padding:0;display:flex;flex:1;flex-direction:column}main{display:flex;flex:1}main .studio-frame{display:flex;flex:1}main .studio-frame iframe{display:flex;flex:1}
--- a/data/www/css/compiled/main-studio.css
+++ b/data/www/css/compiled/main-studio.css
--- a/data/www/css/lib/flatpickr.min.css
+++ b/data/www/css/lib/flatpickr.min.css
--- a/data/www/css/main.css
+++ b/data/www/css/main.css
@ -1,857 +0,0 @@
-* {
-    font-family: Roboto;
-}
-
-html {
-    height: 100vh;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    background-color: #0f0035;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    align-self: stretch;
-}
-
-body {
-    margin: 0;
-    padding: 0;
-    flex: 1;
-    background-color: #0f0035;
-    color: #fff;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    align-self: stretch;
-}
-
-.invisible {
-    visibility: hidden !important;
-}
-
-.hidden {
-    display: none !important;
-}
-
-.tac {
-    text-align: center;
-}
-
-a {
-    text-decoration: none;
-}
-
-.container {
-    background: rgba(0, 0, 0, 0.1);
-    margin: auto;
-    display: flex;
-    align-self: stretch;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-    flex: 1;
-    min-width: 70%;
-
-    @media only screen and (max-width: 1200px) {
-        min-width: 95%;
-    }
-}
-
-.container.expand {
-    min-width: 100%;
-
-    @media only screen and (max-width: 1200px) {
-        min-width: 100%;
-    }
-}
-
-header {
-    text-align: center;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    align-self: stretch;
-    padding: 0 25px 0 25px;
-}
-
-header .logo {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-}
-
-header .logo a {
-    color: inherit;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-header .logo img {
-    width: 32px;
-    height: 32px;
-    margin-right: 10px;
-}
-
-header nav {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-    flex: 1;
-}
-
-header nav ul {
-    list-style: none;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-}
-
-header nav ul li {
-    margin: 0 15px;
-}
-
-header nav ul li.user-menu {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-    border: 1px solid #0bc44e;
-    padding: 5px 15px;
-    border-radius: 4px;
-    background: rgba(14, 239, 95, .2);
-}
-
-header nav ul li.user-menu .logout {
-    color: rgb(255, 255, 255);
-}
-
-header nav ul li.user-menu .username {
-    margin-right: 20px;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    font-weight: bold;
-    color: #0bc44e;
-}
-
-header nav ul li.user-menu .username i {
-    margin-right: 5px;
-    font-size: 12px;
-}
-
-header nav ul li a {
-    color: rgba(255, 255, 255, 0.6);
-    text-decoration: none;
-}
-
-header nav ul li a:hover,
-header nav ul li.active a {
-    color: white;
-}
-
-.toolbar {
-    display: flex;
-    flex-direction: row;
-    padding: 0 25px 0 25px;
-    align-self: stretch;
-}
-
-.toolbar h2 {
-    padding: 0 25px 0 0;
-}
-
-.toolbar .toolbar-actions {
-    flex: 1;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-}
-
-select.select-item-picker,
-a.btn,
-button {
-    background-color: #fff;
-    border-radius: 5px;
-    border: 1px solid #bc48ff;
-    color: #270035;
-    padding: 10px 30px;
-    text-decoration: none;
-    margin: 10px;
-    cursor: pointer;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    font-weight: 400;
-    font-size: 14px;
-    transition: .2s linear all;
-}
-
-a.btn:hover,
-button:hover {
-    color: #bc48ff;
-}
-
-select.select-item-picker,
-button.purple {
-    font-weight: bold;
-    border: 1px solid #692fbd;
-    color: white;
-    background: #692fbd;
-    background: linear-gradient(90deg, #bc48ff 0%, #692fbd 100%);
-}
-
-button.green {
-    font-weight: bold;
-    color: white;
-    border: 1px solid #0eef5f;
-    background: linear-gradient(90deg, #2fde6f 0%, #13c251 100%);
-}
-
-button.normal:hover {
-    color: white;
-    border-color: #692fbd;
-    background: #692fbd;
-    background: linear-gradient(90deg, #bc48ff 0%, #692fbd 100%);
-}
-
-button.green:hover,
-button.purple:hover {
-    border: 1px solid #fff;
-}
-
-.alert {
-    margin: 10px 30px 20px 30px;
-    padding: 20px 50px;
-    align-self: stretch;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    border-radius: 4px;
-}
-
-.alert-info {
-    color: rgb(70, 70, 70);
-    border: 1px solid rgb(70, 70, 70);
-    background: rgba(70, 70, 70, .2);
-}
-
-.alert-success {
-    color: rgb(14, 239, 95);
-    border: 1px solid rgb(14, 239, 95);
-    background: rgba(14, 239, 95, .2);
-}
-
-.alert-error {
-    color: rgb(239, 14, 93);
-    border: 1px solid rgb(239, 14, 93);
-    background: rgba(239, 14, 93, .2);
-}
-
-
-.panel {
-    background: rgba(255, 255, 255, 0.15);
-    border-radius: 5px;
-    padding: 0 25px 80px 25px;
-    margin: 10px 25px;
-    border-left: 5px solid #0eef5f;
-    align-self: stretch;
-}
-
-.panel.no-border {
-    border: none;
-}
-
-.panel h3 {
-    color: #fff;
-}
-
-.panel-inactive {
-    background: white;
-    color: #AAA;
-    border-color: #BBB;
-}
-
-.panel-inactive h3 {
-    color: #333;
-}
-
-.panel table {
-    width: 100%;
-    margin-top: 30px;
-    border-collapse: collapse;
-    text-align: left;
-    font-weight: normal;
-}
-
-.panel th {
-    border-bottom: 1px solid #fff;
-    border-collapse: collapse;
-    padding: 10px;
-    font-weight: normal;
-}
-
-.panel-inactive th {
-    border-color: #EEE;
-
-}
-
-.panel td {
-    border-collapse: collapse;
-    padding: 10px;
-}
-
-.panel td a.item.sort {
-    cursor: move;
-}
-
-.panel td a.item-name {
-    color: white;
-}
-
-.panel-inactive td a.item-name {
-    color: #AAA;
-}
-
-.panel td a.item-name:hover {
-    text-decoration: underline;
-}
-
-.panel td.actions a {
-    background: white;
-    color: #333;
-    border: 1px solid #AAA;
-    border-radius: 4px;
-    padding: 2px;
-    width: 35px;
-    display: inline-block;
-    text-align: center;
-    margin: 0 2px;
-}
-
-.panel td.actions a:hover {
-    color: #0eef5f;
-    border-color: #0eef5f;
-}
-
-.panel td.actions a.item-edit:hover {
-    color: #bc48ff;
-    border-color: #bc48ff;
-}
-
-.panel td.actions a.item-delete:hover {
-    color: #ef0e0e;
-    border-color: #ef0e0e;
-}
-
-.panel td.infos {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: flex-start;
-}
-
-.panel td .inner {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-}
-
-.panel td div.badge {
-    margin-right: 5px;
-    font-size: 10px;
-    font-weight: bold;
-}
-
-.panel a {
-    color: #0eef5f;
-    text-decoration: none;
-}
-
-.panel a:hover {
-    color: #0bc44e;
-}
-
-.icon-right {
-    margin: 0 0 0 10px;
-}
-
-.icon-left {
-    margin: 0 10px 0 0;
-}
-
-.pure-material-switch {
-    z-index: 0;
-    position: relative;
-    display: inline-block;
-}
-
-.pure-material-switch > input {
-    appearance: none;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    z-index: -1;
-    position: absolute;
-    right: 6px;
-    top: -8px;
-    display: block;
-    margin: 0;
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    background-color: rgba(0, 0, 0, 0.38);
-    outline: none;
-    opacity: 0;
-    transform: scale(1);
-    pointer-events: none;
-    transition: opacity 0.3s 0.1s, transform 0.2s 0.1s;
-}
-
-.pure-material-switch > span {
-    display: inline-block;
-    width: 100%;
-    cursor: pointer;
-}
-
-.pure-material-switch > span::before {
-    content: "";
-    float: right;
-    display: inline-block;
-    margin: 5px 0 5px 10px;
-    border-radius: 7px;
-    width: 36px;
-    height: 14px;
-    background-color: rgba(0, 0, 0, 0.38);
-    vertical-align: top;
-    transition: background-color 0.2s, opacity 0.2s;
-}
-
-.pure-material-switch > span::after {
-    content: "";
-    position: absolute;
-    top: 2px;
-    right: 16px;
-    border-radius: 50%;
-    width: 20px;
-    height: 20px;
-    background-color: rgb(255, 255, 255);
-    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-    transition: background-color 0.2s, transform 0.2s;
-}
-
-.pure-material-switch > input:checked {
-    right: -10px;
-    background-color: rgb(14, 239, 95);
-}
-
-.pure-material-switch > input:checked + span::before {
-    background-color: rgba(14, 239, 95, 0.6);
-}
-
-.pure-material-switch > input:checked + span::after {
-    background-color: rgb(14, 239, 95);
-    transform: translateX(16px);
-}
-
-.pure-material-switch:hover > input {
-    opacity: 0.04;
-}
-
-.pure-material-switch > input:focus {
-    opacity: 0.12;
-}
-
-.pure-material-switch:hover > input:focus {
-    opacity: 0.16;
-}
-
-.pure-material-switch > input:active {
-    opacity: 1;
-    transform: scale(0);
-    transition: transform 0s, opacity 0s;
-}
-
-.pure-material-switch > input:active + span::before {
-    background-color: rgba(14, 239, 95, 0.6);
-}
-
-.pure-material-switch > input:checked:active + span::before {
-    background-color: rgba(0, 0, 0, 0.38);
-}
-
-.pure-material-switch > input:disabled {
-    opacity: 0;
-}
-
-.pure-material-switch > input:disabled + span {
-    color: rgb(0, 0, 0);
-    opacity: 0.38;
-    cursor: default;
-}
-
-.pure-material-switch > input:disabled + span::before {
-    background-color: rgba(0, 0, 0, 0.38);
-}
-
-.pure-material-switch > input:checked:disabled + span::before {
-    background-color: rgba(14, 239, 95, 0.6);
-}
-
-.modals {
-    position: fixed;
-    background: rgba(0, 0, 0, 0.4);
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-
-.modals-outer {
-    min-width: 30%;
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-}
-
-.modals-outer .modal-close {
-    color: white;
-    font-size: 30px;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-    margin-bottom: 20px;
-    margin-top: 0px;
-}
-
-.modals-inner {
-    background: white;
-    border-radius: 10px;
-    color: #333;
-}
-
-.modals-inner .modal h2 {
-    border-bottom: 1px solid #DDD;
-    padding: 15px 15px;
-    margin: 0;
-}
-
-
-.modals-inner .modal h3 {
-    align-self: stretch;
-    border-bottom: 1px solid #DDD;
-    padding: 15px 15px;
-    margin: 0;
-}
-
-.form {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    padding: 20px;
-}
-
-.form .form-group {
-    margin: 10px 20px 5px 20px;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    align-self: stretch;
-    flex: 1;
-}
-
-.form .form-group label {
-    flex: 1;
-    padding: 10px;
-    text-align: right;
-    margin-right: 20px;
-}
-
-.form .form-group .widget {
-    flex: 3;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    align-self: stretch;
-}
-
-.form .form-group input,
-.form .form-group select,
-.form .form-group textarea {
-    flex: 1;
-    padding: 10px 5px 10px 5px;
-    border: 1px solid #EEE;
-    border-radius: 4px;
-    width: auto;
-}
-
-.form .form-group input[type=checkbox] {
-    flex: 0;
-}
-
-.form .form-group .trigger {
-    margin-right: 10px;
-}
-
-.form .form-group select.trigger {
-    max-width: 120px;
-}
-
-.form .form-group span {
-    margin-left: 10px;
-}
-
-.form .actions {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-    margin-top: 10px;
-    align-self: stretch;
-}
-
-.form .actions button.green,
-.form .actions button {
-    font-size: 18px;
-}
-
-.form .actions button.green:hover {
-    background: white;
-    color: rgb(14, 239, 95);
-    border-color: rgb(14, 239, 95);
-}
-
-.form .actions button.btn-normal {
-    color: #999;
-    border-color: #999;
-    font-size: 18px;
-    margin: 0;
-}
-
-.form .actions button.btn-normal:hover {
-    color: #555;
-    border-color: #555;
-}
-
-span.empty {
-    text-transform: uppercase;
-    opacity: 0.5;
-    color: #999;
-}
-
-footer {
-    align-self: stretch;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    display: flex;
-    padding: 20px;
-}
-
-footer .version {
-    opacity: 0.3;
-}
-
-.login-page {
-    max-width: 600px;
-    padding-top: 50px;
-}
-
-.card {
-    background: white;
-    border-radius: 6px;
-    padding: 50px 50px;
-    color: #333;
-}
-
-.card .form {
-    padding: 0;
-}
-
-.card .form .form-group  {
-    margin: 0 0 30px 0;
-    padding: 0;
-}
-.card .form .form-group .widget {
-    flex: 1;
-}
-
-.card .form .form-group label {
-    text-align: left;
-}
-
-.card button[type=submit] {
-    margin: 0 auto;
-}
-
-.card h3 {
-    text-align: center;
-    font-size: 36px;
-    margin: 0 0 40px 0;
-}
-
-a.badge,
-.badge {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    padding: 5px 5px;
-    border-radius: 4px;
-    font-size: 12px;
-    background: rgba(255, 255, 255, .1);
-    border: 1px solid transparent;
-    color: #ffffff;
-}
-
-a.badge:hover {
-    color: #FFFFFF;
-    border: 1px solid rgba(255,255,255,.4);
-}
-
-.panel-inactive .badge {
-    background: rgba(200, 200, 200, .1);
-    color: #999999;
-}
-
-.panel-inactive a.badge:hover {
-    color: #999999;
-    border: 1px solid rgba(180,180,180,.4);
-}
-
-.badge.anonymous {
-    opacity: .2;
-}
-
-.panel-logs {
-    padding-bottom: 20px;
-}
-
-.panel-logs pre {
-    background: rgba(0,0,0,0.9);
-    border: 1px solid #555;
-    border-radius: 4px;
-    font-family: monospace;
-    color: #BBB;
-    padding: 20px;
-    min-height: 200px;
-    max-height: 500px;
-    overflow: auto;
-}
-
-.plugin-description {
-    font-size: 14px;
-    margin-left: 34px;
-    color: #999;
-
-}
-
-.explorer {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: flex-start;
-    align-self: stretch;
-}
-
-
-.explorer .left {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    align-self: stretch;
-    flex: 1;
-}
-
-.explorer .right {
-    flex: 3;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-}
-
-.panel.panel-menu {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    align-self: stretch;
-    margin-right: 0;
-    border-color: #692fbd;
-}
-
-.panel.panel-menu ul {
-    flex: 1;
-    max-width: 250px;
-    display: flex;
-    flex-direction: column;
-    align-self: stretch;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-.panel.panel-menu ul li {
-    margin: 3px 0;
-}
-
-.panel.panel-menu ul li a {
-    padding: 5px 15px 5px 15px;
-    color: inherit;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    flex: 1;
-}
-
-
-
-.panel.panel-menu ul li:hover {
-    color: #555;
-    font-weight: bold;
-}
-
-.panel.panel-menu ul li.active {
-    color: #692fbd;
-    background: #692fbd22;
-    border-radius: 4px;
-    font-weight: bold;
-    border: 1px solid #692fbd;
-}
-
-
-
-.explorer .panel-active {
-    background: white;
-    color: #AAA;
-    border-color: #BBB;
-}
-.explorer .panel-active h3 {
-    color: #0bc44e;
-}
-
-
-.explorer .panel-inactive {
-    background: white;
-    color: #AAA;
-    border-color: #BBB;
-}
--- a/data/www/scss/base/_html.scss
+++ b/data/www/scss/base/_html.scss
@ -0,0 +1,29 @@
+* {
+    font-family: 'Roboto', 'Arial', 'sans-serif';
+}
+
+html {
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    background-color: $blueDark;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    align-self: stretch;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    flex: 1;
+    background-color: $blueDark;
+    color: $white;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    align-self: stretch;
+}
+
--- a/data/www/scss/base/_tachyons.scss
+++ b/data/www/scss/base/_tachyons.scss
@ -0,0 +1,16 @@
+
+.invisible {
+    visibility: hidden !important;
+}
+
+.hidden {
+    display: none !important;
+}
+
+.tac {
+    text-align: center;
+}
+
+a {
+    text-decoration: none;
+}
--- a/data/www/scss/components/_alerts.scss
+++ b/data/www/scss/components/_alerts.scss
@ -0,0 +1,35 @@
+.alert {
+  margin: 10px 30px 20px 30px;
+  padding: 20px 50px;
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+}
+
+.alert-info {
+  color: $neutralGrey;
+  border: 1px solid $neutralGrey;
+  background: rgba($neutralGrey, .2);
+}
+
+.alert-success {
+  color: $success;
+  border: 1px solid $success;
+  background: rgba($success, .2);
+}
+
+.alert-error {
+  color: $danger;
+  border: 1px solid $danger;
+  background: rgba($danger, .2);
+}
+
+.alert-icon {
+  border-radius: 4px;
+  padding: 3px 4px;
+  min-width: 18px;
+  text-align: center;
+}
--- a/data/www/scss/components/_badges.scss
+++ b/data/www/scss/components/_badges.scss
@ -0,0 +1,32 @@
+a.badge,
+.badge {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 5px 5px;
+  border-radius: 4px;
+  font-size: 12px;
+  background: rgba($white, .1);
+  border: 1px solid transparent;
+  color: $white;
+}
+
+a.badge:hover {
+  color: $white;
+  border: 1px solid rgba($white, .4);
+}
+
+.panel-inactive .badge {
+  background: rgba($lightGrey, .1);
+  color: $lightGrey;
+}
+
+.panel-inactive a.badge:hover {
+  color: $lightGrey;
+  border: 1px solid rgba($lightGrey,.2);
+}
+
+.badge.anonymous {
+  opacity: .2;
+}
--- a/data/www/scss/components/_buttons.scss
+++ b/data/www/scss/components/_buttons.scss
@ -0,0 +1,52 @@
+select.select-item-picker,
+a.btn,
+button {
+  background-color: $white;
+  border-radius: 5px;
+  border: 1px solid $sweetPurple;
+  color: darken($bitterPurple, 30%);
+  padding: 10px 30px;
+  text-decoration: none;
+  margin: 10px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  font-weight: 400;
+  font-size: 14px;
+  transition: .2s linear all;
+}
+
+a.btn:hover,
+button:hover {
+  color: $sweetPurple;
+}
+
+select.select-item-picker,
+button.purple {
+  font-weight: bold;
+  border: 1px solid $bitterPurple;
+  color: white;
+  background: $bitterPurple;
+  background: linear-gradient(90deg, $sweetPurple 0%, $bitterPurple 100%);
+}
+
+button.green {
+  font-weight: bold;
+  color: white;
+  border: 1px solid $limeGreen;
+  background: linear-gradient(90deg, lighten($limeGreen, 10%) 0%, darken($limeGreen, 10%) 100%);
+}
+
+button.normal:hover {
+  color: white;
+  border-color: $bitterPurple;
+  background: $bitterPurple;
+  background: linear-gradient(90deg, $sweetPurple 0%, $bitterPurple 100%);
+}
+
+button.green:hover,
+button.purple:hover {
+  border: 1px solid $white;
+}
--- a/data/www/scss/components/_cards.scss
+++ b/data/www/scss/components/_cards.scss
@ -0,0 +1,38 @@
+.login-page {
+  max-width: 600px;
+  padding-top: 50px;
+}
+
+.card {
+  background: $white;
+  border-radius: 6px;
+  padding: 50px 50px;
+  color: lighten($black, 20%);
+}
+
+.card .form {
+  padding: 0;
+}
+
+.card .form .form-group  {
+  margin: 0 0 30px 0;
+  padding: 0;
+}
+
+.card .form .form-group .widget {
+  flex: 1;
+}
+
+.card .form .form-group label {
+  text-align: left;
+}
+
+.card button[type=submit] {
+  margin: 0 auto;
+}
+
+.card h3 {
+  text-align: center;
+  font-size: 36px;
+  margin: 0 0 40px 0;
+}
--- a/data/www/scss/components/_empty.scss
+++ b/data/www/scss/components/_empty.scss
@ -0,0 +1,5 @@
+span.empty {
+  text-transform: uppercase;
+  opacity: 0.5;
+  color: $lightGrey;
+}
--- a/data/www/scss/components/_explorer.scss
+++ b/data/www/scss/components/_explorer.scss
@ -0,0 +1,41 @@
+.explorer {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  align-self: stretch;
+}
+
+.explorer .left {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  align-self: stretch;
+  flex: 1;
+}
+
+.explorer .right {
+  flex: 3;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+
+.explorer .panel-active {
+  background: $white;
+  color: $lightGrey;
+  border-color: $lightGrey;
+}
+
+.explorer .panel-active h3 {
+  color: $limeGreen;
+}
+
+.explorer .panel-inactive {
+  background: $white;
+  color: $lightGrey;
+  border-color: $lightGrey;
+}
--- a/data/www/scss/components/_icons.scss
+++ b/data/www/scss/components/_icons.scss
@ -0,0 +1,7 @@
+.icon-right {
+    margin: 0 0 0 10px;
+}
+
+.icon-left {
+    margin: 0 10px 0 0;
+}
--- a/data/www/scss/components/_modals.scss
+++ b/data/www/scss/components/_modals.scss
@ -0,0 +1,49 @@
+.modals {
+  position: fixed;
+  background: rgba($black, 0.4);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.modals-outer {
+  min-width: 30%;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.modals-outer .modal-close {
+  color: $white;
+  font-size: 30px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  margin-bottom: 20px;
+  margin-top: 0px;
+}
+
+.modals-inner {
+  background: $white;
+  border-radius: 10px;
+  color: lighten($black, 20%);
+}
+
+.modals-inner .modal h2 {
+  border-bottom: 1px solid $lightGrey;
+  padding: 15px 15px;
+  margin: 0;
+}
+
+.modals-inner .modal h3 {
+  align-self: stretch;
+  border-bottom: 1px solid $lightGrey;
+  padding: 15px 15px;
+  margin: 0;
+}
--- a/data/www/scss/components/_pagetab.scss
+++ b/data/www/scss/components/_pagetab.scss
@ -0,0 +1,35 @@
+
+ul.pagetab {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid $limeGreen;
+}
+
+ul.pagetab li {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  border-right: 1px solid $limeGreen;
+}
+
+ul.pagetab li a {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 20px 5px;
+  color: $limeGreen;
+  font-weight: bold;
+  text-decoration: none;
+}
+
+ul.pagetab li.active a {
+  background: $limeGreen;
+  color: $white;
+}
--- a/data/www/scss/components/_panels.scss
+++ b/data/www/scss/components/_panels.scss
@ -0,0 +1,173 @@
+.panel {
+  background: rgba($white, 0.15);
+  border-radius: 5px;
+  padding: 0 25px 80px 25px;
+  margin: 10px 25px;
+  border-left: 5px solid $limeGreen;
+  align-self: stretch;
+}
+
+.panel.no-border {
+  border: none;
+}
+
+.panel h3 {
+  color: $white;
+}
+
+.panel-inactive {
+  background: $white;
+  color: $lightGrey;
+  border-color: $lightGrey;
+}
+
+.panel-inactive h3 {
+  color: lighten($black, 10%);
+}
+
+.panel table {
+  width: 100%;
+  margin-top: 30px;
+  border-collapse: collapse;
+  text-align: left;
+  font-weight: normal;
+}
+
+.panel th {
+  border-bottom: 1px solid $white;
+  border-collapse: collapse;
+  padding: 10px;
+  font-weight: normal;
+}
+
+.panel-inactive th {
+  border-color: $lightGrey;
+}
+
+.panel td {
+  border-collapse: collapse;
+  padding: 10px;
+}
+
+.panel td a.item.sort {
+  cursor: move;
+}
+
+.panel td a.item-name {
+  color: $white;
+}
+
+.panel-inactive td a.item-name {
+  color: $lightGrey;
+}
+
+.panel td a.item-name:hover {
+  text-decoration: underline;
+}
+
+.panel td.actions a {
+  background: $white;
+  color: lighten($black, 20%);
+  border: 1px solid $lightGrey;
+  border-radius: 4px;
+  padding: 2px;
+  width: 35px;
+  display: inline-block;
+  text-align: center;
+  margin: 0 2px;
+}
+
+.panel td.actions a:hover {
+  color: $limeGreen;
+  border-color: $limeGreen;
+}
+
+.panel td.actions a.item-edit:hover {
+  color: $sweetPurple;
+  border-color: $sweetPurple;
+}
+
+.panel td.actions a.item-delete:hover {
+  color: $danger;
+  border-color: $danger;
+}
+
+.panel td.infos {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.panel td .inner {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.panel td div.badge {
+  margin-right: 5px;
+  font-size: 10px;
+  font-weight: bold;
+}
+
+.panel a {
+  color: $limeGreen;
+  text-decoration: none;
+}
+
+.panel a:hover {
+  color: darken($limeGreen, 10%);
+}
+
+.panel.panel-menu {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-self: stretch;
+  margin-right: 0;
+  border-color: $bitterPurple;
+}
+
+.panel.panel-menu ul {
+  flex: 1;
+  max-width: 250px;
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.panel.panel-menu ul li {
+  margin: 3px 0;
+}
+
+.panel.panel-menu ul li a {
+  padding: 5px 15px;
+  color: inherit;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  flex: 1;
+}
+
+.panel.panel-menu ul li:hover {
+  color: $neutralGrey;
+  font-weight: bold;
+}
+
+.panel.panel-menu ul li.active {
+  color: $bitterPurple;
+  background: rgba($bitterPurple, 0.34);
+  border-radius: 4px;
+  font-weight: bold;
+  border: 1px solid $bitterPurple;
+}
+
+.panel.panel-menu ul li.active a {
+  color: inherit;
+}
--- a/data/www/scss/components/_switches.scss
+++ b/data/www/scss/components/_switches.scss
@ -0,0 +1,116 @@
+.pure-material-switch {
+  z-index: 0;
+  position: relative;
+  display: inline-block;
+}
+
+.pure-material-switch > input {
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  z-index: -1;
+  position: absolute;
+  right: 6px;
+  top: -8px;
+  display: block;
+  margin: 0;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  background-color: rgba($black, 0.38);
+  outline: none;
+  opacity: 0;
+  transform: scale(1);
+  pointer-events: none;
+  transition: opacity 0.3s 0.1s, transform 0.2s 0.1s;
+}
+
+.pure-material-switch > span {
+  display: inline-block;
+  width: 100%;
+  cursor: pointer;
+}
+
+.pure-material-switch > span::before {
+  content: "";
+  float: right;
+  display: inline-block;
+  margin: 5px 0 5px 10px;
+  border-radius: 7px;
+  width: 36px;
+  height: 14px;
+  background-color: rgba($black, 0.38);
+  vertical-align: top;
+  transition: background-color 0.2s, opacity 0.2s;
+}
+
+.pure-material-switch > span::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  right: 16px;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  background-color: $white;
+  box-shadow: 0 3px 1px -2px rgba($black, 0.2), 0 2px 2px 0 rgba($black, 0.14), 0 1px 5px 0 rgba($black, 0.12);
+  transition: background-color 0.2s, transform 0.2s;
+}
+
+.pure-material-switch > input:checked {
+  right: -10px;
+  background-color: $limeGreen;
+}
+
+.pure-material-switch > input:checked + span::before {
+  background-color: rgba($limeGreen, 0.6);
+}
+
+.pure-material-switch > input:checked + span::after {
+  background-color: $limeGreen;
+  transform: translateX(16px);
+}
+
+.pure-material-switch:hover > input {
+  opacity: 0.04;
+}
+
+.pure-material-switch > input:focus {
+  opacity: 0.12;
+}
+
+.pure-material-switch:hover > input:focus {
+  opacity: 0.16;
+}
+
+.pure-material-switch > input:active {
+  opacity: 1;
+  transform: scale(0);
+  transition: transform 0s, opacity 0s;
+}
+
+.pure-material-switch > input:active + span::before {
+  background-color: rgba($limeGreen, 0.6);
+}
+
+.pure-material-switch > input:checked:active + span::before {
+  background-color: rgba($black, 0.38);
+}
+
+.pure-material-switch > input:disabled {
+  opacity: 0;
+}
+
+.pure-material-switch > input:disabled + span {
+  color: $black;
+  opacity: 0.38;
+  cursor: default;
+}
+
+.pure-material-switch > input:disabled + span::before {
+  background-color: rgba($black, 0.38);
+}
+
+.pure-material-switch > input:checked:disabled + span::before {
+  background-color: rgba($limeGreen, 0.6);
+}
--- a/data/www/scss/components/_toolbar.scss
+++ b/data/www/scss/components/_toolbar.scss
@ -0,0 +1,18 @@
+.toolbar {
+  display: flex;
+  flex-direction: row;
+  padding: 0 25px;
+  align-self: stretch;
+}
+
+.toolbar h2 {
+  padding: 0 25px 0 0;
+}
+
+.toolbar .toolbar-actions {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+}
--- a/data/www/scss/fleet-studio.scss
+++ b/data/www/scss/fleet-studio.scss
@ -0,0 +1,16 @@
+// Import utility styles
+@import 'utils/variables';
+@import 'utils/mixins';
+
+// Import base styles
+@import 'base/tachyons';
+
+// Import component styles
+@import 'components/pagetab';
+
+// Import pages styles
+@import 'pages/fleet-studio';
+
+
+
+
--- a/data/www/scss/forms/_forms.scss
+++ b/data/www/scss/forms/_forms.scss
@ -0,0 +1,91 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding: 20px;
+}
+
+.form .form-group {
+  margin: 10px 20px 5px 20px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  align-self: stretch;
+  flex: 1;
+}
+
+.form .form-group label {
+  flex: 1;
+  padding: 10px;
+  text-align: right;
+  margin-right: 20px;
+}
+
+.form .form-group .widget {
+  flex: 3;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  align-self: stretch;
+}
+
+.form .form-group input,
+.form .form-group select,
+.form .form-group textarea {
+  flex: 1;
+  padding: 10px 5px 10px 5px;
+  border: 1px solid darken($white, 10%);
+  border-radius: 4px;
+  width: auto;
+}
+
+.form .form-group input[type=checkbox] {
+  flex: 0;
+}
+
+.form .form-group .trigger {
+  margin-right: 10px;
+}
+
+.form .form-group select.trigger {
+  max-width: 120px;
+}
+
+.form .form-group span {
+  margin-left: 10px;
+}
+
+.form .actions {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  margin-top: 10px;
+  align-self: stretch;
+}
+
+.form .actions button.green,
+.form .actions button {
+  font-size: 18px;
+}
+
+.form .actions button.green:hover {
+  background: white;
+  color: $limeGreen;
+  border-color: $limeGreen;
+}
+
+.form .actions button.btn-normal {
+  color: $lightGrey;
+  border-color: $lightGrey;
+  font-size: 18px;
+  margin: 0;
+}
+
+.form .actions button.btn-normal:hover {
+  color: $neutralGrey;
+  border-color: $neutralGrey;
+}
--- a/data/www/scss/layout/_container.scss
+++ b/data/www/scss/layout/_container.scss
@ -0,0 +1,23 @@
+.container {
+  background: rgba($black, 0.1);
+  margin: auto;
+  display: flex;
+  align-self: stretch;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  flex: 1;
+  min-width: 70%;
+
+  @media only screen and (max-width: 1200px) {
+    min-width: 95%;
+  }
+}
+
+.container.expand {
+  min-width: 100%;
+
+  @media only screen and (max-width: 1200px) {
+    min-width: 100%;
+  }
+}
--- a/data/www/scss/layout/_footer.scss
+++ b/data/www/scss/layout/_footer.scss
@ -0,0 +1,12 @@
+footer {
+  align-self: stretch;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  display: flex;
+  padding: 20px;
+}
+
+footer .version {
+  opacity: 0.3;
+}
--- a/data/www/scss/layout/_header.scss
+++ b/data/www/scss/layout/_header.scss
@ -0,0 +1,88 @@
+header {
+  text-align: center;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  align-self: stretch;
+  padding: 0 25px;
+}
+
+header .logo {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+header .logo a {
+  color: inherit;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+header .logo img {
+  width: 32px;
+  height: 32px;
+  margin-right: 10px;
+}
+
+header nav {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  flex: 1;
+}
+
+header nav ul {
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+header nav ul li {
+  margin: 0 15px;
+}
+
+header nav ul li.user-menu {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  border: 1px solid $limeGreen;
+  padding: 5px 15px;
+  border-radius: 4px;
+  background: rgba($limeGreen, .2);
+}
+
+header nav ul li.user-menu .logout {
+  color: $white;
+}
+
+header nav ul li.user-menu .username {
+  margin-right: 20px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  font-weight: bold;
+  color: $limeGreen;
+}
+
+header nav ul li.user-menu .username i {
+  margin-right: 5px;
+  font-size: 12px;
+}
+
+header nav ul li a {
+  color: rgba($white, 0.6);
+  text-decoration: none;
+}
+
+header nav ul li a:hover,
+header nav ul li.active a {
+  color: white;
+}
--- a/data/www/scss/main-studio.scss
+++ b/data/www/scss/main-studio.scss
@ -0,0 +1,32 @@
+// Import utility styles
+@import 'utils/variables';
+@import 'utils/mixins';
+
+// Import base styles
+@import 'base/html';
+@import 'base/tachyons';
+
+// Import layout styles
+@import 'layout/header';
+@import 'layout/footer';
+@import 'layout/container';
+
+// Import component styles
+@import 'components/buttons';
+@import 'components/alerts';
+@import 'components/modals';
+@import 'components/panels';
+@import 'components/switches';
+@import 'components/cards';
+@import 'components/empty';
+@import 'components/badges';
+@import 'components/explorer';
+@import 'components/toolbar';
+@import 'components/icons';
+
+// Import form styles
+@import 'forms/forms';
+
+// Import pages styles
+@import 'pages/settings';
+@import 'pages/sysinfo';
--- a/data/www/scss/pages/_fleet-studio.scss
+++ b/data/www/scss/pages/_fleet-studio.scss
@ -0,0 +1,33 @@
+html {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex: 1;
+  background: $blueDark;
+  font-family: 'Arial', 'sans-serif';
+  color: white;
+  height: 100vh;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex: 1;
+  flex-direction: column
+}
+
+main {
+  display: flex;
+  flex: 1;
+}
+
+main .studio-frame {
+  display: flex;
+  flex: 1;
+}
+
+main .studio-frame iframe {
+  display: flex;
+  flex: 1;
+}
--- a/data/www/scss/pages/_settings.scss
+++ b/data/www/scss/pages/_settings.scss
@ -0,0 +1,5 @@
+.plugin-description {
+    font-size: 14px;
+    margin-left: 34px;
+    color: $lightGrey;
+}
--- a/data/www/scss/pages/_sysinfo.scss
+++ b/data/www/scss/pages/_sysinfo.scss
@ -0,0 +1,16 @@
+
+.panel-logs {
+    padding-bottom: 20px;
+}
+
+.panel-logs pre {
+    background: rgba($black, 0.9);
+    border: 1px solid $neutralGrey;
+    border-radius: 4px;
+    font-family: monospace;
+    color: darken($white, 5%);
+    padding: 20px;
+    min-height: 200px;
+    max-height: 500px;
+    overflow: auto;
+}
--- a/data/www/scss/utils/_mixins.scss
+++ b/data/www/scss/utils/_mixins.scss
--- a/data/www/scss/utils/_variables.scss
+++ b/data/www/scss/utils/_variables.scss
@ -0,0 +1,14 @@
+// Raw Colors
+$blueDark: rgb(15, 0, 53);
+$pinkyRed: rgb(239, 14, 93);
+$limeGreen: rgb(14, 239, 95);
+$bitterPurple: rgb(105, 47, 189);
+$sweetPurple: rgb(188, 72, 255);
+$neutralGrey: rgb(70, 70, 70);
+$lightGrey: rgb(153, 153, 153);
+$white: rgb(255, 255, 255);
+$black: rgb(0, 0, 0);
+
+// Type Colors
+$success: $limeGreen;
+$danger: $pinkyRed;
--- a/package-lock.json
+++ b/package-lock.json
@ -0,0 +1,996 @@
+{
+  "name": "obscreen-frontend",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "obscreen-frontend",
+      "version": "1.0.0",
+      "devDependencies": {
+        "sass": "^1.77.6",
+        "vite": "^5.3.1"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz",
+      "integrity": "sha512-Tya6xypR10giZV1XzxmH5wr25VcZSncG0pZIjfePT0OVBvqNEurzValetGNarVrGiq66EBVAFn15iYX4w6FKgQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.18.0.tgz",
+      "integrity": "sha512-avCea0RAP03lTsDhEyfy+hpfr85KfyTctMADqHVhLAF3MlIkq83CP8UfAHUssgXTYd+6er6PaAhx/QGv4L1EiA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.18.0.tgz",
+      "integrity": "sha512-IWfdwU7KDSm07Ty0PuA/W2JYoZ4iTj3TUQjkVsO/6U+4I1jN5lcR71ZEvRh52sDOERdnNhhHU57UITXz5jC1/w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.18.0.tgz",
+      "integrity": "sha512-n2LMsUz7Ynu7DoQrSQkBf8iNrjOGyPLrdSg802vk6XT3FtsgX6JbE8IHRvposskFm9SNxzkLYGSq9QdpLYpRNA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.18.0.tgz",
+      "integrity": "sha512-C/zbRYRXFjWvz9Z4haRxcTdnkPt1BtCkz+7RtBSuNmKzMzp3ZxdM28Mpccn6pt28/UWUCTXa+b0Mx1k3g6NOMA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.18.0.tgz",
+      "integrity": "sha512-l3m9ewPgjQSXrUMHg93vt0hYCGnrMOcUpTz6FLtbwljo2HluS4zTXFy2571YQbisTnfTKPZ01u/ukJdQTLGh9A==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.18.0.tgz",
+      "integrity": "sha512-rJ5D47d8WD7J+7STKdCUAgmQk49xuFrRi9pZkWoRD1UeSMakbcepWXPF8ycChBoAqs1pb2wzvbY6Q33WmN2ftw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.18.0.tgz",
+      "integrity": "sha512-be6Yx37b24ZwxQ+wOQXXLZqpq4jTckJhtGlWGZs68TgdKXJgw54lUUoFYrg6Zs/kjzAQwEwYbp8JxZVzZLRepQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.18.0.tgz",
+      "integrity": "sha512-hNVMQK+qrA9Todu9+wqrXOHxFiD5YmdEi3paj6vP02Kx1hjd2LLYR2eaN7DsEshg09+9uzWi2W18MJDlG0cxJA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.18.0.tgz",
+      "integrity": "sha512-ROCM7i+m1NfdrsmvwSzoxp9HFtmKGHEqu5NNDiZWQtXLA8S5HBCkVvKAxJ8U+CVctHwV2Gb5VUaK7UAkzhDjlg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.18.0.tgz",
+      "integrity": "sha512-0UyyRHyDN42QL+NbqevXIIUnKA47A+45WyasO+y2bGJ1mhQrfrtXUpTxCOrfxCR4esV3/RLYyucGVPiUsO8xjg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.18.0.tgz",
+      "integrity": "sha512-xuglR2rBVHA5UsI8h8UbX4VJ470PtGCf5Vpswh7p2ukaqBGFTnsfzxUBetoWBWymHMxbIG0Cmx7Y9qDZzr648w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.18.0.tgz",
+      "integrity": "sha512-LKaqQL9osY/ir2geuLVvRRs+utWUNilzdE90TpyoX0eNqPzWjRm14oMEE+YLve4k/NAqCdPkGYDaDF5Sw+xBfg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.18.0.tgz",
+      "integrity": "sha512-7J6TkZQFGo9qBKH0pk2cEVSRhJbL6MtfWxth7Y5YmZs57Pi+4x6c2dStAUvaQkHQLnEQv1jzBUW43GvZW8OFqA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.18.0.tgz",
+      "integrity": "sha512-Txjh+IxBPbkUB9+SXZMpv+b/vnTEtFyfWZgJ6iyCmt2tdx0OF5WhFowLmnh8ENGNpfUlUZkdI//4IEmhwPieNg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.18.0.tgz",
+      "integrity": "sha512-UOo5FdvOL0+eIVTgS4tIdbW+TtnBLWg1YBCcU2KWM7nuNwRz9bksDX1bekJJCpu25N1DVWaCwnT39dVQxzqS8g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "dev": true
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/immutable": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz",
+      "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==",
+      "dev": true
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
+      "dev": true
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.4.38",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.18.0.tgz",
+      "integrity": "sha512-QmJz14PX3rzbJCN1SG4Xe/bAAX2a6NpCP8ab2vfu2GiUr8AQcr2nCV/oEO3yneFarB67zk8ShlIyWb2LGTb3Sg==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "1.0.5"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.18.0",
+        "@rollup/rollup-android-arm64": "4.18.0",
+        "@rollup/rollup-darwin-arm64": "4.18.0",
+        "@rollup/rollup-darwin-x64": "4.18.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.18.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.18.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.18.0",
+        "@rollup/rollup-linux-arm64-musl": "4.18.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.18.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.18.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.18.0",
+        "@rollup/rollup-linux-x64-gnu": "4.18.0",
+        "@rollup/rollup-linux-x64-musl": "4.18.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.18.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.18.0",
+        "@rollup/rollup-win32-x64-msvc": "4.18.0",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/sass": {
+      "version": "1.77.6",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.6.tgz",
+      "integrity": "sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/vite": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.1.tgz",
+      "integrity": "sha512-XBmSKRLXLxiaPYamLv3/hnP/KXDai1NDexN0FpkTaZXTfycHvkRHoenpgl/fvuK/kPbB6xAgoyiryAhQNxYmAQ==",
+      "dev": true,
+      "dependencies": {
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.38",
+        "rollup": "^4.13.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,13 @@
+{
+  "name": "obscreen-frontend",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "vite build",
+    "watch": "vite"
+  },
+  "devDependencies": {
+    "vite": "^5.3.1",
+    "sass": "^1.77.6"
+  }
+}
+
--- a/src/controller/FleetNodeStudioController.py
+++ b/src/controller/FleetNodeStudioController.py
@ -27,7 +27,7 @@ class FleetNodeStudioController(ObController):

    def fleet(self):
        return render_template(
-            'fleet/studio/fleet.jinja.html',
+            'fleet/studio/fleet-studio.jinja.html',
            node_studios=self._model_store.node_studio().get_enabled_node_studios(),
        )

--- a/views/base.jinja.html
+++ b/views/base.jinja.html
@ -21,15 +21,15 @@
    <link rel="icon" type="image/png" sizes="96x96" href="{{ STATIC_PREFIX }}favicon/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ STATIC_PREFIX }}favicon/favicon-16x16.png">
    <link rel="manifest" href="/manifest.json">
-    <meta name="msapplication-TileColor" content="#692fbd">
+    <meta name="msapplication-TileColor" content="#777777">
    <meta name="msapplication-TileImage" content="{{ STATIC_PREFIX }}favicon/ms-icon-144x144.png">
-    <meta name="theme-color" content="#692fbd">
+    <meta name="theme-color" content="#777777">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <link rel="stylesheet" href="{{ STATIC_PREFIX }}css/main.css" />
+    <link rel="stylesheet" href="{{ STATIC_PREFIX }}css/compiled/main-studio.css" />
    {% block add_css %}{% endblock %}
    {{ HOOK(H_ROOT_CSS) }}
 </head>
--- a/views/fleet/studio/fleet-studio.jinja.html
+++ b/views/fleet/studio/fleet-studio.jinja.html
@ -1,21 +1,10 @@
 <!DOCTYPE html>
 <head>
-    <title>Obscreen - Fleet View</title>
-    <style>
-        html {margin:0;padding:0;display:flex;flex:1;background: #0f0035;font-family: 'Arial', 'sans-serif'; color: white;height:100vh;}
-        body {margin:0;padding:0;display:flex;flex:1;flex-direction: column}
-        ul {list-style:none;margin: 0;padding:0;display: flex;flex-direction: row;border-bottom: 1px solid #0eef5f;}
-        ul li {flex:1;display: flex;flex-direction: row;justify-content: center;align-items: center;border-right: 1px solid #0eef5f;}
-        ul li a {flex:1;display: flex;flex-direction: row;justify-content: center;align-items: center;padding: 20px 5px;color:#0eef5f;font-weight: bold;text-decoration: none;}
-        ul li.active a { background: #0eef5f;color:white; }
-        main {display: flex;flex:1;}
-        main .studio-frame {display: flex; flex:1;}
-        main .studio-frame iframe {display: flex; flex: 1;}
-        .hidden {display: none !important;}
-    </style>
+    <title>Obscreen - Fleet Studio</title>
+    <link rel="stylesheet" href="{{ STATIC_PREFIX }}css/compiled/fleet-studio.css" />
 </head>
 <body>
-<ul>
+<ul class="pagetab">
    {% for node_studio in node_studios %}
    <li class="{% if loop.first %}active{% endif %}">
        <a href="javascript:void(0);" class="studio-switch" data-id="{{ node_studio.id }}" onclick="tab('{{ node_studio.id }}')">
--- a/views/player/default.jinja.html
+++ b/views/player/default.jinja.html
@ -44,7 +44,7 @@
            #time { font-size: 10em; }
            #date { font-size: 3em; }
            #ipaddr { font-size: 1.25em; color: #888888; }
-            #ipaddr a { color: #FFFFFF; text-decoration: none; font-weight: bold; }
+            #ipaddr a { color: $white; text-decoration: none; font-weight: bold; }
            #hidden-container { display: none; }
        </style>
    </head>
--- a/views/playlist/component/table.jinja.html
+++ b/views/playlist/component/table.jinja.html
@ -50,9 +50,9 @@
            {% endif %}
            <td class="tac">
                {% if playlist.time_sync %}
-                    ✅
+                    <i class="fa fa-check"></i>
                {% else %}
-                    ❌
+                    <i class="fa fa-times"></i>
                {% endif %}
            </td>
            <td class="tac">
--- a/views/settings/component/table.jinja.html
+++ b/views/settings/component/table.jinja.html
@ -38,9 +38,9 @@
                {% if variable.value %}
                    {% if variable.type.value == 'bool' %}
                        {% if variable.display() %}
-                            ✅
+                            <i class="fa fa-check alert-success alert-icon"></i>
                        {% else %}
-                            ❌
+                            <i class="fa fa-times alert-error alert-icon"></i>
                        {% endif %}
                    {% else %}
                        {{ variable.display() }}
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,29 @@
+import { defineConfig } from 'vite';
+import path from 'path';
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'data/www/scss/')
+    }
+  },
+  build: {
+    rollupOptions: {
+      input: {
+        'main-studio': path.resolve(__dirname, 'data/www/scss/main-studio.scss'),
+        'fleet-studio': path.resolve(__dirname, 'data/www/scss/fleet-studio.scss'),
+      },
+      output: {
+        dir: path.resolve(__dirname, 'data/www/css/compiled'),
+        assetFileNames: '[name].css',
+        entryFileNames: '[name]_entry.css',
+        chunkFileNames: '[name]_chunk[extname]'
+      }
+    }
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {}
+    }
+  }
+});
				`@ -0,0 +1 @@`
				.invisible{visibility:hidden!important}.hidden{display:none!important}.tac{text-align:center}a{text-decoration:none}ul.pagetab{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;border-bottom:1px solid rgb(14,239,95)}ul.pagetab li{flex:1;display:flex;flex-direction:row;justify-content:center;align-items:center;border-right:1px solid rgb(14,239,95)}ul.pagetab li a{flex:1;display:flex;flex-direction:row;justify-content:center;align-items:center;padding:20px 5px;color:#0eef5f;font-weight:700;text-decoration:none}ul.pagetab li.active a{background:#0eef5f;color:#fff}html{margin:0;padding:0;display:flex;flex:1;background:#0f0035;font-family:Arial,"sans-serif";color:#fff;height:100vh}body{margin:0;padding:0;display:flex;flex:1;flex-direction:column}main{display:flex;flex:1}main .studio-frame{display:flex;flex:1}main .studio-frame iframe{display:flex;flex:1}