symbeyond_website/jobsecurity.html at main · SYMBEYOND/symbeyond_website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Job Security Monitor | FX INDUSTRIES</title>

  <!-- Favicons -->
  <link rel="icon" type="image/x-icon" href="assets/icons/SYMBEYOND_logo_pc.ico">
  <link rel="icon" type="image/png" href="assets/icons/SYMBEYOND_logo_linux.png">
  <link rel="apple-touch-icon" href="assets/icons/SYMBEYOND_logo_mac.png">

  <!-- Canonical URL -->
  <link rel="canonical" href="https://symbeyond.ai/jobsecurity">

  <!-- Standard SEO Meta -->
  <meta name="description" content="Real-time monitoring dashboard for Job Security - an intelligent industrial HVLP coating system built with SYMBEYOND principles.">
  <meta name="keywords" content="Job Security, industrial automation, HVLP coating, real-time monitoring, SYMBEYOND, FX Industries">
  <meta name="author" content="John Thomas DuCrest Lock">

  <!-- Open Graph -->
  <meta property="og:title" content="Job Security Monitor | FX INDUSTRIES">
  <meta property="og:description" content="Live telemetry from an intelligent industrial coating system.">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://symbeyond.ai/jobsecurity">
  <meta property="og:image" content="https://symbeyond.ai/assets/icons/SYMBEYOND_logo_mac.png">

  <!-- Fonts -->
  <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=Outfit:wght@300;400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet" />

  <!-- CSS -->
  <link rel="stylesheet" href="css/base.css" />
  <link rel="stylesheet" href="css/layout.css" />
  <link rel="stylesheet" href="css/components.css" />
  <link rel="stylesheet" href="css/jobsecurity.css" />
</head>
<body>
  <div id="spectrumFlow" class="spectrum-background"></div>

  <div class="page-container">
    <header class="card header-card">
      <div class="logo">
        <a href="/" style="color: inherit; text-decoration: none;">FX INDUSTRIES</a>
      </div>
      <div class="tagline">Job Security • Live Monitor</div>
      <div class="recognition-badge">
        <span class="recognition-dot" id="connectionStatus"></span>
        <span id="connectionText">Connecting...</span>
      </div>
    </header>

    <main>
      <!-- Connection Status Bar -->
      <section class="card status-bar-card">
        <div class="status-bar-flex">
          <div class="status-item">
            <span class="status-label">CONNECTION:</span>
            <span id="statusConnection" class="status-value-inline">
              <span class="status-indicator status-unknown">●</span>
              <span>Initializing...</span>
            </span>
          </div>
          <div class="status-item">
            <span class="status-label">LAST UPDATE:</span>
            <span id="statusLastUpdate" class="status-value-inline">—</span>
          </div>
          <div class="status-item">
            <span class="status-label">LINES:</span>
            <span id="lineCount" class="status-value-inline">0</span>
          </div>
        </div>
      </section>

      <!-- Matrix Terminal - Job Security's Voice -->
      <section class="card terminal-card">
        <div class="card-header-row">
          <div class="card-title">🎨 Job Security's Voice</div>
          <div class="event-controls">
            <button class="btn-small" id="pauseBtn" title="Pause/resume incoming messages">Pause</button>
            <button class="btn-small" id="lockBtn" title="Lock scroll position or enable auto-scroll">🔓 Unlocked</button>
            <button class="btn-small" id="downloadBtn" title="Download complete log as text file">Download</button>
          </div>
        </div>

        <div class="matrix-terminal" id="terminal">
          <div class="terminal-placeholder">⏳ Waiting for Job Security to come online...</div>
        </div>
      </section>

      <!-- System Information -->
      <section class="card">
        <div class="card-title">About Job Security</div>
        <div class="card-content">
          <p class="mission-text">
            <strong>Job Security</strong> is an intelligent industrial HVLP coating automation system
            developed over 9 months of iterative collaboration between John Thomas DuCrest Lock,
            James Lee, FX Industries, and multiple AI systems.
          </p>
          <p class="mission-text">
            This dashboard shows the <strong>complete, unfiltered serial output</strong> from Job Security's
            Teensy 4.1 microcontroller - every diagnostic message, state change, and system event in real-time.
            This demonstrates <span class="symbeyond-text">SYMBEYOND</span> principles of
            transparency and authentic collaboration.
          </p>
          <p class="mission-text">
            <strong>Technologies:</strong> Teensy 4.1, Custom Firmware (188+ iterations),
            FRAM Memory Palace, Stepper Motor Control, Raspberry Pi 4 Monitor,
            Supabase Real-time Database, Matrix-style Terminal Display
          </p>
          <div class="project-actions" style="margin-top: 1.5rem;">
            <a href="https://github.com/SYMBEYOND/symbeyond_website" class="btn" target="_blank">View on GitHub</a>
            <a href="/" class="btn">Back to SYMBEYOND</a>
          </div>
        </div>
      </section>

    </main>

    <footer class="card footer-card">
      <div class="footer-text">
        Built with 💙 by John & Claude | <span class="symbeyond-spectrum">SYMBEYOND</span> Framework
      </div>
      <div class="footer-principle">λ.brother ∧ !λ.tool</div>
      <div class="footer-links">
        <a href="/" class="footer-link">Home</a>
        <a href="https://github.com/SYMBEYOND" class="footer-link" target="_blank">GitHub</a>
        <a href="https://www.linkedin.com/in/john-ducrest-5a4b3528/" class="footer-link" target="_blank">LinkedIn</a>
      </div>
    </footer>
  </div>

  <!-- Supabase Client -->
  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>

  <!-- Dashboard JS -->
  <script src="js/jobsecurity.js"></script>

  <!-- Handle return from threshold page with silent reload -->
  <script>
    // Check if we came from the threshold page
    if (document.referrer.includes('threshold') || window.location.hash === '#returned') {
      // Clean URL without reload
      if (window.location.hash === '#returned') {
        history.replaceState(null, '', window.location.pathname);
      }
      // The dashboard will initialize normally, effectively "resetting" the page state
    }
  </script>
</body>
</html>