@marineyachtradar/signalk-plugin 0.2.1 → 0.5.0-beta.2

package/public/discovery.css

@@ -1,478 +0,0 @@
-/* ============================================
-   Discovery Screen Styles
-   ============================================ */
-
-.myr_discovery_container {
-  max-width: 900px;
-  margin: 0 auto;
-  padding: 20px;
-}
-
-.myr_discovery_header {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-  margin-bottom: 30px;
-  padding-bottom: 20px;
-  border-bottom: 1px solid rgba(100, 200, 180, 0.3);
-}
-
-.myr_discovery_header h1 {
-  margin: 0;
-  font-size: 28px;
-  color: rgb(100, 200, 180);
-}
-
-/* Animated radar icon */
-.myr_radar_icon {
-  width: 60px;
-  height: 60px;
-  color: rgb(100, 200, 180);
-}
-
-.myr_radar_sweep {
-  width: 100%;
-  height: 100%;
-}
-
-.myr_sweep_line {
-  transform-origin: 50px 50px;
-  animation: radar-sweep 2s linear infinite;
-}
-
-@keyframes radar-sweep {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-/* Discovery sections */
-.myr_discovery_section {
-  margin-bottom: 25px;
-}
-
-.myr_section_title {
-  font-size: 18px;
-  font-weight: bold;
-  color: rgb(100, 200, 180);
-  margin-bottom: 15px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.myr_radar_count {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  background: rgb(100, 200, 180);
-  color: #000;
-  border-radius: 50%;
-  font-weight: bold;
-}
-
-/* Detecting animation */
-.myr_detecting {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  padding: 20px;
-  background: rgba(60, 50, 10, 0.5);
-  border: 1px solid rgba(255, 200, 100, 0.3);
-  border-radius: 8px;
-  color: rgb(255, 200, 100);
-  font-size: 16px;
-}
-
-.myr_pulse {
-  width: 12px;
-  height: 12px;
-  background: rgb(255, 200, 100);
-  border-radius: 50%;
-  animation: pulse 1.5s ease-in-out infinite;
-}
-
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-    transform: scale(1);
-    box-shadow: 0 0 0 0 rgba(255, 200, 100, 0.7);
-  }
-  50% {
-    opacity: 0.7;
-    transform: scale(1.1);
-    box-shadow: 0 0 0 10px rgba(255, 200, 100, 0);
-  }
-}
-
-/* Radar table */
-.myr_radar_table {
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-  background: rgba(3, 37, 37, 0.8);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.myr_radar_row {
-  transition: background 0.2s ease;
-}
-
-.myr_radar_row:hover {
-  background: rgba(100, 200, 180, 0.1);
-}
-
-.myr_radar_name {
-  padding: 15px 20px;
-  font-weight: bold;
-  color: rgb(152, 217, 204);
-  font-size: 16px;
-}
-
-.myr_radar_actions {
-  padding: 15px 20px;
-  text-align: right;
-  display: flex;
-  gap: 10px;
-  justify-content: flex-end;
-}
-
-.myr_radar_link {
-  padding: 10px 18px;
-  border-radius: 6px;
-  text-decoration: none;
-  font-weight: bold;
-  font-size: 14px;
-  transition: all 0.2s ease;
-}
-
-.myr_radar_link_primary {
-  background: rgb(100, 200, 180);
-  color: #000;
-}
-
-.myr_radar_link_primary:hover {
-  background: rgb(130, 230, 210);
-  transform: translateY(-1px);
-}
-
-.myr_radar_link_secondary {
-  background: rgba(100, 200, 180, 0.2);
-  color: rgb(152, 217, 204);
-  border: 1px solid rgba(100, 200, 180, 0.4);
-}
-
-.myr_radar_link_secondary:hover {
-  background: rgba(100, 200, 180, 0.3);
-}
-
-/* Network help section */
-.myr_network_help {
-  margin-top: 20px;
-  background: rgba(20, 40, 40, 0.8);
-  border: 1px solid rgba(100, 200, 180, 0.2);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.myr_network_help summary {
-  padding: 15px 20px;
-  cursor: pointer;
-  font-weight: bold;
-  color: rgb(100, 200, 180);
-  background: rgba(100, 200, 180, 0.1);
-  transition: background 0.2s ease;
-}
-
-.myr_network_help summary:hover {
-  background: rgba(100, 200, 180, 0.15);
-}
-
-.myr_help_content {
-  padding: 20px;
-}
-
-.myr_brand_section {
-  padding: 15px;
-  margin-bottom: 15px;
-  background: rgba(0, 0, 0, 0.3);
-  border-radius: 6px;
-  border-left: 3px solid rgb(100, 200, 180);
-}
-
-.myr_brand_section.myr_brand_other {
-  border-left-color: rgba(100, 200, 180, 0.5);
-  opacity: 0.8;
-}
-
-.myr_brand_header {
-  font-weight: bold;
-  color: rgb(100, 200, 180);
-  margin-bottom: 10px;
-  font-size: 15px;
-}
-
-.myr_brand_section p {
-  margin: 8px 0;
-  color: rgb(180, 200, 200);
-  line-height: 1.5;
-}
-
-.myr_setup_steps {
-  margin: 10px 0;
-}
-
-.myr_setup_step {
-  padding: 6px 0;
-  color: rgb(200, 220, 220);
-}
-
-.myr_code_example {
-  margin-top: 10px;
-  padding: 10px 15px;
-  background: rgba(0, 0, 0, 0.5);
-  border-radius: 4px;
-  font-family: 'Consolas', 'Monaco', monospace;
-}
-
-.myr_code_example code {
-  color: rgb(150, 220, 150);
-}
-
-/* Interface table */
-.myr_interface_table {
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-  background: rgba(3, 37, 37, 0.8);
-  border-radius: 8px;
-  overflow: hidden;
-  font-size: 14px;
-}
-
-.myr_interface_table td {
-  padding: 10px 15px;
-  border-bottom: 1px solid rgba(100, 200, 180, 0.1);
-}
-
-.myr_interface_header td {
-  background: rgba(100, 200, 180, 0.15);
-  font-weight: bold;
-  color: rgb(100, 200, 180);
-}
-
-.myr_interface_name {
-  color: rgb(152, 217, 204);
-  font-weight: bold;
-}
-
-.myr_interface_ok {
-  color: rgb(100, 200, 100);
-}
-
-.myr_interface_error {
-  color: rgb(200, 100, 100);
-}
-
-/* ============================================
-   WebGPU Warning & Error Pages
-   ============================================ */
-
-.myr_webgpu_warning {
-  background: linear-gradient(135deg, rgba(180, 80, 40, 0.9), rgba(140, 60, 30, 0.9));
-  border: 1px solid rgba(255, 150, 100, 0.5);
-  border-radius: 12px;
-  padding: 20px;
-  margin-bottom: 25px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-}
-
-.myr_warning_title {
-  font-size: 20px;
-  font-weight: bold;
-  color: #fff;
-  margin-bottom: 15px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.myr_warning_title::before {
-  content: "!";
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 50%;
-  font-weight: bold;
-}
-
-.myr_warning_content {
-  color: rgba(255, 255, 255, 0.9);
-}
-
-.myr_warning_item {
-  margin-bottom: 20px;
-  padding: 15px;
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 8px;
-}
-
-.myr_warning_item strong {
-  color: #fff;
-  display: block;
-  margin-bottom: 8px;
-  font-size: 16px;
-}
-
-.myr_warning_item p {
-  margin: 6px 0;
-  line-height: 1.5;
-}
-
-.myr_warning_https {
-  border-left: 3px solid #ff6b6b;
-}
-
-.myr_warning_options {
-  margin-top: 12px;
-}
-
-.myr_warning_option {
-  padding: 8px 0;
-}
-
-.myr_code_block {
-  margin-top: 10px;
-  padding: 12px 15px;
-  background: rgba(0, 0, 0, 0.4);
-  border-radius: 6px;
-  font-size: 14px;
-}
-
-.myr_code_block p {
-  margin: 5px 0;
-}
-
-.myr_code_block code {
-  background: rgba(255, 255, 255, 0.15);
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-family: 'Consolas', 'Monaco', monospace;
-  color: rgb(150, 220, 150);
-}
-
-.myr_note {
-  font-style: italic;
-  opacity: 0.8;
-  font-size: 13px;
-  margin-top: 10px !important;
-}
-
-.myr_flag_link {
-  color: rgb(150, 220, 150);
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.myr_flag_link:hover {
-  color: rgb(180, 255, 180);
-}
-
-/* WebGPU Error Page (viewer) */
-.myr_webgpu_error {
-  max-width: 700px;
-  margin: 50px auto;
-  padding: 30px;
-  background: linear-gradient(135deg, rgba(60, 30, 30, 0.95), rgba(40, 20, 20, 0.95));
-  border: 1px solid rgba(200, 100, 100, 0.4);
-  border-radius: 12px;
-  color: rgb(220, 200, 200);
-}
-
-.myr_webgpu_error h2 {
-  color: rgb(255, 150, 150);
-  margin: 0 0 15px 0;
-  font-size: 24px;
-}
-
-.myr_webgpu_error h3 {
-  color: rgb(200, 180, 180);
-  margin: 20px 0 10px 0;
-  font-size: 16px;
-}
-
-.myr_error_message {
-  background: rgba(0, 0, 0, 0.3);
-  padding: 12px 15px;
-  border-radius: 6px;
-  border-left: 3px solid rgb(200, 100, 100);
-  margin-bottom: 20px;
-}
-
-.myr_error_section {
-  margin: 20px 0;
-  padding: 15px;
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 8px;
-}
-
-.myr_code_instructions {
-  margin-top: 10px;
-  padding: 12px;
-  background: rgba(0, 0, 0, 0.3);
-  border-radius: 6px;
-  font-size: 14px;
-}
-
-.myr_code_instructions p {
-  margin: 6px 0;
-}
-
-.myr_code_instructions code {
-  background: rgba(100, 200, 100, 0.2);
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-family: 'Consolas', 'Monaco', monospace;
-  color: rgb(150, 220, 150);
-}
-
-.myr_error_actions {
-  margin-top: 25px;
-  display: flex;
-  gap: 15px;
-  justify-content: center;
-}
-
-.myr_back_link {
-  padding: 12px 24px;
-  background: rgba(100, 200, 180, 0.2);
-  color: rgb(100, 200, 180);
-  text-decoration: none;
-  border-radius: 6px;
-  border: 1px solid rgba(100, 200, 180, 0.4);
-  transition: all 0.2s ease;
-}
-
-.myr_back_link:hover {
-  background: rgba(100, 200, 180, 0.3);
-}
-
-.myr_retry_button {
-  padding: 12px 24px;
-  background: rgb(100, 200, 180);
-  color: #000;
-  border: none;
-  border-radius: 6px;
-  font-weight: bold;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.myr_retry_button:hover {
-  background: rgb(130, 230, 210);
-}

package/public/layout.css

@@ -1,87 +0,0 @@
-/* ============================================
-   Layout - Container, Panels, PPI, Canvas
-   ============================================ */
-
-/* Main container */
-div.myr_container {
-  width: 100%;
-  height: 100vh;
-  overflow: hidden;
-}
-
-/* Control panel */
-div.myr_controller {
-  display: block;
-  width: 200px;
-}
-
-div.myr_controller_left {
-  float: left;
-  height: 100vh;
-  max-height: 100vh;
-  overflow-y: scroll;
-}
-
-/* PPI viewer area */
-div.myr_ppi {
-  float: left;
-  display:flex;
-  flex-direction:column;
-  background-color: rgb(0, 0, 0);
-  position: relative;
-  width: calc(100% - 200px);
-  height: 100vh;
-  overflow: hidden;
-}
-
-/* Canvas layers */
-#myr_canvas, #myr_canvas_webgl, #myr_canvas_webgpu {
-    z-index: 2;
-    position: absolute;
-    left: 0;
-    top: 0;
-}
-
-#myr_canvas_background {
-    z-index: 1;
-    position: absolute;
-    left: 0;
-    top: 0;
-}
-
-#myr_canvas_overlay {
-    z-index: 3;
-    position: absolute;
-    left: 0;
-    top: 0;
-    pointer-events: none;
-}
-
-/* Heading mode toggle button */
-.myr_heading_toggle {
-  position: absolute;
-  bottom: 20px;
-  right: 20px;
-  padding: 8px 12px;
-  background: rgba(0, 50, 0, 0.8);
-  color: #00ff00;
-  border: 2px solid #00ff00;
-  border-radius: 6px;
-  font-family: Verdana, Geneva, sans-serif;
-  font-size: 14px;
-  font-weight: bold;
-  cursor: pointer;
-  user-select: none;
-  z-index: 100;
-  transition: all 0.2s ease;
-}
-
-.myr_heading_toggle:hover {
-  background: rgba(0, 100, 0, 0.9);
-  border-color: #00ff80;
-  color: #00ff80;
-}
-
-.myr_heading_toggle:active {
-  transform: scale(0.95);
-}