claude-opencode-viewer 2.1.3 → 2.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.html +35 -35
- package/package.json +1 -1
package/index.html
CHANGED
|
@@ -25,32 +25,6 @@
|
|
|
25
25
|
opacity: 0.3;
|
|
26
26
|
transition: opacity 0.3s ease;
|
|
27
27
|
}
|
|
28
|
-
#mode-switcher {
|
|
29
|
-
display: none;
|
|
30
|
-
background: #111;
|
|
31
|
-
border-top: 1px solid #222;
|
|
32
|
-
flex-shrink: 0;
|
|
33
|
-
padding: 6px 8px;
|
|
34
|
-
}
|
|
35
|
-
#mode-switcher select {
|
|
36
|
-
background: #1a1a1a;
|
|
37
|
-
color: #d4d4d4;
|
|
38
|
-
border: 1px solid #333;
|
|
39
|
-
border-radius: 4px;
|
|
40
|
-
padding: 6px 28px 6px 10px;
|
|
41
|
-
font-size: 13px;
|
|
42
|
-
cursor: pointer;
|
|
43
|
-
-webkit-appearance: none;
|
|
44
|
-
-moz-appearance: none;
|
|
45
|
-
appearance: none;
|
|
46
|
-
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23888' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
|
|
47
|
-
background-repeat: no-repeat;
|
|
48
|
-
background-position: right 8px center;
|
|
49
|
-
}
|
|
50
|
-
#mode-switcher select:focus {
|
|
51
|
-
outline: none;
|
|
52
|
-
border-color: #4ade80;
|
|
53
|
-
}
|
|
54
28
|
#virtual-keybar {
|
|
55
29
|
display: none;
|
|
56
30
|
background: #111;
|
|
@@ -89,9 +63,13 @@
|
|
|
89
63
|
border-top: 1px solid #222;
|
|
90
64
|
flex-shrink: 0;
|
|
91
65
|
padding: 8px 10px;
|
|
66
|
+
display: flex;
|
|
67
|
+
gap: 8px;
|
|
68
|
+
align-items: center;
|
|
92
69
|
}
|
|
93
70
|
#input-bar input {
|
|
94
|
-
|
|
71
|
+
flex: 1;
|
|
72
|
+
min-width: 0;
|
|
95
73
|
padding: 10px 12px;
|
|
96
74
|
background: #1a1a1a;
|
|
97
75
|
border: 1px solid #333;
|
|
@@ -104,25 +82,47 @@
|
|
|
104
82
|
#input-bar input:focus {
|
|
105
83
|
border-color: #4ade80;
|
|
106
84
|
}
|
|
85
|
+
#mode-switcher {
|
|
86
|
+
display: none;
|
|
87
|
+
flex-shrink: 0;
|
|
88
|
+
}
|
|
89
|
+
#mode-switcher select {
|
|
90
|
+
background: #1a1a1a;
|
|
91
|
+
color: #d4d4d4;
|
|
92
|
+
border: 1px solid #333;
|
|
93
|
+
border-radius: 4px;
|
|
94
|
+
padding: 10px 28px 10px 12px;
|
|
95
|
+
font-size: 13px;
|
|
96
|
+
cursor: pointer;
|
|
97
|
+
-webkit-appearance: none;
|
|
98
|
+
-moz-appearance: none;
|
|
99
|
+
appearance: none;
|
|
100
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23888' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
|
|
101
|
+
background-repeat: no-repeat;
|
|
102
|
+
background-position: right 8px center;
|
|
103
|
+
}
|
|
104
|
+
#mode-switcher select:focus {
|
|
105
|
+
outline: none;
|
|
106
|
+
border-color: #4ade80;
|
|
107
|
+
}
|
|
107
108
|
@media (max-width: 768px) {
|
|
108
109
|
#mode-switcher { display: block; }
|
|
109
110
|
#virtual-keybar { display: block; }
|
|
110
|
-
#input-bar { display:
|
|
111
|
+
#input-bar { display: flex; }
|
|
111
112
|
}
|
|
112
113
|
</style>
|
|
113
114
|
</head>
|
|
114
115
|
<body>
|
|
115
116
|
<div id="terminal"></div>
|
|
116
117
|
|
|
117
|
-
<div id="mode-switcher">
|
|
118
|
-
<select id="mode-select">
|
|
119
|
-
<option value="claude">Claude Code</option>
|
|
120
|
-
<option value="opencode">OpenCode</option>
|
|
121
|
-
</select>
|
|
122
|
-
</div>
|
|
123
|
-
|
|
124
118
|
<div id="input-bar">
|
|
125
119
|
<input type="text" id="input-field" placeholder="输入命令..." autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
|
|
120
|
+
<div id="mode-switcher">
|
|
121
|
+
<select id="mode-select">
|
|
122
|
+
<option value="claude">Claude Code</option>
|
|
123
|
+
<option value="opencode">OpenCode</option>
|
|
124
|
+
</select>
|
|
125
|
+
</div>
|
|
126
126
|
</div>
|
|
127
127
|
|
|
128
128
|
<div id="virtual-keybar">
|