Initial commit: SyncWatch Chrome extension + WebSocket server

2026-05-23 22:22:19 -04:00
commit 24d88f4754
8 changed files with 649 additions and 0 deletions
--- a/extension/popup.css
+++ b/extension/popup.css
@@ -0,0 +1,164 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: #0f0f1a;
+  color: #dde1f0;
+  width: 280px;
+  min-height: 160px;
+}
+
+.container {
+  padding: 18px 16px 16px;
+}
+
+h1 {
+  font-size: 17px;
+  font-weight: 700;
+  color: #8b9cf4;
+  letter-spacing: 0.5px;
+  margin-bottom: 14px;
+}
+
+input[type="text"] {
+  width: 100%;
+  padding: 8px 11px;
+  background: #1a1a2e;
+  border: 1px solid #2e2e50;
+  border-radius: 7px;
+  color: #dde1f0;
+  font-size: 13px;
+  margin-bottom: 8px;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+input[type="text"]:focus {
+  border-color: #8b9cf4;
+}
+
+button {
+  width: 100%;
+  padding: 9px;
+  background: #8b9cf4;
+  border: none;
+  border-radius: 7px;
+  color: #0f0f1a;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s, opacity 0.15s;
+}
+
+button:hover:not(:disabled) {
+  background: #a0aff7;
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.btn-secondary {
+  background: transparent;
+  border: 1px solid #2e2e50;
+  color: #888;
+  margin-top: 12px;
+  font-weight: 400;
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: transparent;
+  border-color: #555;
+  color: #bbb;
+}
+
+.hidden {
+  display: none !important;
+}
+
+.server-status {
+  font-size: 11px;
+  color: #5cb85c;
+  margin-bottom: 14px;
+  letter-spacing: 0.3px;
+}
+
+.divider {
+  text-align: center;
+  font-size: 11px;
+  color: #444;
+  margin: 10px 0;
+}
+
+.join-row {
+  display: flex;
+  gap: 7px;
+  align-items: flex-start;
+}
+
+.join-row input {
+  flex: 1;
+  margin-bottom: 0;
+  text-align: center;
+  letter-spacing: 3px;
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.join-row button {
+  width: auto;
+  padding: 8px 14px;
+  flex-shrink: 0;
+}
+
+.code-card {
+  background: #1a1a2e;
+  border: 1px solid #2e2e50;
+  border-radius: 10px;
+  padding: 14px;
+  text-align: center;
+  margin-bottom: 10px;
+}
+
+.code-label {
+  display: block;
+  font-size: 10px;
+  color: #666;
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+  margin-bottom: 6px;
+}
+
+.code-value {
+  font-size: 30px;
+  font-weight: 700;
+  letter-spacing: 6px;
+  color: #8b9cf4;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+}
+
+.peer-status {
+  font-size: 12px;
+  color: #888;
+  text-align: center;
+  margin-bottom: 4px;
+}
+
+.peer-status.connected {
+  color: #5cb85c;
+}
+
+.error {
+  background: #2a1010;
+  border: 1px solid #6b2020;
+  border-radius: 7px;
+  padding: 8px 11px;
+  font-size: 12px;
+  color: #f08080;
+  margin-top: 10px;
+}