Tenso/index.html at main · PatchPerson/Tenso · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Tenso</title>
  <style>
    @font-face {
      font-family: 'Geist';
      src: url('/fonts/GeistVariable.woff2') format('woff2');
      font-weight: 100 900;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Fira Code';
      src: url('/fonts/FiraCode-Variable.woff2') format('woff2-variations');
      font-weight: 300 700;
      font-style: normal;
      font-display: swap;
    }
    :root {
      --bg-primary: #16161e;
      --bg-secondary: #1a1b26;
      --bg-tertiary: #24283b;
      --bg-surface: #1f2335;
      --bg-hover: #292e42;
      --bg-active: #33384f;
      --text-primary: #c0caf5;
      --text-secondary: #a9b1d6;
      --text-muted: #565f89;
      --text-dim: #3b4261;
      --border: #292e42;
      --border-subtle: #1f2335;
      --accent: #d4a853;
      --accent-hover: #e0bb6a;
      --accent-dim: rgba(212, 168, 83, 0.12);
      --accent-glow: rgba(212, 168, 83, 0.25);
      --success: #9ece6a;
      --success-dim: rgba(158, 206, 106, 0.12);
      --warning: #e0af68;
      --warning-dim: rgba(224, 175, 104, 0.12);
      --error: #f7768e;
      --error-dim: rgba(247, 118, 142, 0.12);
      --method-get: #9ece6a;
      --method-get-bg: rgba(158, 206, 106, 0.10);
      --method-post: #e0af68;
      --method-post-bg: rgba(224, 175, 104, 0.10);
      --method-put: #7aa2f7;
      --method-put-bg: rgba(122, 162, 247, 0.10);
      --method-delete: #f7768e;
      --method-delete-bg: rgba(247, 118, 142, 0.10);
      --method-patch: #bb9af7;
      --method-patch-bg: rgba(187, 154, 247, 0.10);
      --method-head: #73daca;
      --method-head-bg: rgba(115, 218, 202, 0.10);
      --method-options: #ff9e64;
      --method-options-bg: rgba(255, 158, 100, 0.10);
      --font-mono: 'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace;
      --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
      --radius-sm: 5px;
      --radius-md: 8px;
      --radius-lg: 12px;
      --radius-xl: 16px;
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
      --shadow: 0 4px 12px rgba(0,0,0,0.4);
      --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
      --shadow-glow: 0 0 20px var(--accent-glow);
      --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
      --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
      --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    [data-theme="light"] {
      --bg-primary: #f0f0f5;
      --bg-secondary: #e8e8f0;
      --bg-tertiary: #d8d8e4;
      --bg-surface: #e0e0ec;
      --bg-hover: #d0d0de;
      --bg-active: #c4c4d6;
      --text-primary: #343b58;
      --text-secondary: #4c505e;
      --text-muted: #8b8fa8;
      --text-dim: #b0b4c8;
      --border: #d0d0de;
      --border-subtle: #e0e0ec;
      --accent: #b8860b;
      --accent-hover: #cc9a1d;
      --accent-dim: rgba(184, 134, 11, 0.08);
      --accent-glow: rgba(184, 134, 11, 0.15);
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
      --shadow: 0 4px 12px rgba(0,0,0,0.08);
      --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: var(--font-sans);
      background: var(--bg-primary);
      color: var(--text-primary);
      overflow: hidden;
      height: 100vh;
      font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    #root { height: 100vh; display: flex; flex-direction: column; }

    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
    ::-webkit-scrollbar-corner { background: transparent; }

    input, textarea, select, button { font-family: inherit; }
    button { cursor: pointer; }

    ::selection {
      background: var(--accent-dim);
      color: var(--accent);
    }
  </style>
</head>
<body>
  <script>
    (function() {
      var key = localStorage.getItem('tenso-theme');
      if (!key || key === 'tokyo-night') return;
      var themes = {
        'catppuccin':{'--bg-primary':'#1e1e2e','--bg-secondary':'#181825','--bg-tertiary':'#313244','--bg-surface':'#24243a','--bg-hover':'#393950','--bg-active':'#45475a','--text-primary':'#cdd6f4','--text-secondary':'#bac2de','--text-muted':'#6c7086','--text-dim':'#45475a','--border':'#313244','--border-subtle':'#24243a','--accent':'#cba6f7','--accent-hover':'#d4b8fa','--accent-dim':'rgba(203,166,247,0.12)','--accent-glow':'rgba(203,166,247,0.25)'},
        'dracula':{'--bg-primary':'#282a36','--bg-secondary':'#21222c','--bg-tertiary':'#343746','--bg-surface':'#2c2e3a','--bg-hover':'#3c3f52','--bg-active':'#454862','--text-primary':'#f8f8f2','--text-secondary':'#c0c0d0','--text-muted':'#6272a4','--text-dim':'#44475a','--border':'#343746','--border-subtle':'#2c2e3a','--accent':'#bd93f9','--accent-hover':'#caa4fc','--accent-dim':'rgba(189,147,249,0.12)','--accent-glow':'rgba(189,147,249,0.25)'},
        'synthwave':{'--bg-primary':'#13111a','--bg-secondary':'#1a1726','--bg-tertiary':'#261f38','--bg-surface':'#1f1a2e','--bg-hover':'#2e2544','--bg-active':'#382d52','--text-primary':'#f0e8ff','--text-secondary':'#c4b5e0','--text-muted':'#7a6b99','--text-dim':'#4d4066','--border':'#2e2544','--border-subtle':'#1f1a2e','--accent':'#ff7edb','--accent-hover':'#ff9fe4','--accent-dim':'rgba(255,126,219,0.14)','--accent-glow':'rgba(255,126,219,0.30)'},
        'nord':{'--bg-primary':'#2e3440','--bg-secondary':'#272c36','--bg-tertiary':'#3b4252','--bg-surface':'#333a47','--bg-hover':'#434c5e','--bg-active':'#4c566a','--text-primary':'#eceff4','--text-secondary':'#d8dee9','--text-muted':'#7b88a1','--text-dim':'#4c566a','--border':'#3b4252','--border-subtle':'#333a47','--accent':'#88c0d0','--accent-hover':'#8fbcbb','--accent-dim':'rgba(136,192,208,0.12)','--accent-glow':'rgba(136,192,208,0.25)'},
        'ayu-dark':{'--bg-primary':'#0b0e14','--bg-secondary':'#0f1119','--bg-tertiary':'#1a1e29','--bg-surface':'#141820','--bg-hover':'#1f2430','--bg-active':'#272d3a','--text-primary':'#bfbdb6','--text-secondary':'#9da5b4','--text-muted':'#565b66','--text-dim':'#3d424d','--border':'#1a1e29','--border-subtle':'#141820','--accent':'#e6b450','--accent-hover':'#f0c366','--accent-dim':'rgba(230,180,80,0.12)','--accent-glow':'rgba(230,180,80,0.25)'},
        'vesper':{'--bg-primary':'#101010','--bg-secondary':'#141414','--bg-tertiary':'#1e1e1e','--bg-surface':'#191919','--bg-hover':'#252525','--bg-active':'#2c2c2c','--text-primary':'#d4d4d4','--text-secondary':'#a1a1a1','--text-muted':'#5a5a5a','--text-dim':'#404040','--border':'#1e1e1e','--border-subtle':'#191919','--accent':'#ffc799','--accent-hover':'#ffd4b0','--accent-dim':'rgba(255,199,153,0.10)','--accent-glow':'rgba(255,199,153,0.20)'},
        'cyberpunk':{'--bg-primary':'#0a0a12','--bg-secondary':'#0e0e1a','--bg-tertiary':'#1a1a2e','--bg-surface':'#131322','--bg-hover':'#222240','--bg-active':'#2a2a4e','--text-primary':'#e0f0ff','--text-secondary':'#a0c4e8','--text-muted':'#5570a0','--text-dim':'#3a4a70','--border':'#1a1a2e','--border-subtle':'#131322','--accent':'#00f0ff','--accent-hover':'#40f8ff','--accent-dim':'rgba(0,240,255,0.10)','--accent-glow':'rgba(0,240,255,0.30)'},
        'rose-pine':{'--bg-primary':'#191724','--bg-secondary':'#1f1d2e','--bg-tertiary':'#26233a','--bg-surface':'#222038','--bg-hover':'#2e2b44','--bg-active':'#36334e','--text-primary':'#e0def4','--text-secondary':'#c4c0e0','--text-muted':'#6e6a86','--text-dim':'#524f67','--border':'#26233a','--border-subtle':'#222038','--accent':'#c4a7e7','--accent-hover':'#d0b8ed','--accent-dim':'rgba(196,167,231,0.12)','--accent-glow':'rgba(196,167,231,0.25)'},
        'kanagawa':{'--bg-primary':'#1f1f28','--bg-secondary':'#1a1a22','--bg-tertiary':'#2a2a37','--bg-surface':'#232330','--bg-hover':'#32323f','--bg-active':'#3a3a4a','--text-primary':'#dcd7ba','--text-secondary':'#c8c093','--text-muted':'#727169','--text-dim':'#54546d','--border':'#2a2a37','--border-subtle':'#232330','--accent':'#7e9cd8','--accent-hover':'#9cb4e4','--accent-dim':'rgba(126,156,216,0.12)','--accent-glow':'rgba(126,156,216,0.25)'}
      };
      var t = themes[key];
      if (!t) return;
      var s = document.documentElement.style;
      for (var k in t) s.setProperty(k, t[k]);
    })();
  </script>
  <div id="root"></div>
  <script type="module" src="/src/index.tsx"></script>
</body>
</html>