Hugging Face's logo

Spaces:
naimulislam864
/
WebTermux
Paused

App Files Community
naimulislam864 commited on
Commit
27201da
·
verified ·
1 Parent(s): f10ce9c

Update public/index.html

Browse files
Files changed (1) hide show
  1. public/index.html +83 -53
public/index.html CHANGED
@@ -6,86 +6,116 @@
6
  <meta name="apple-mobile-web-app-capable" content="yes">
7
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
8
  <meta name="mobile-web-app-capable" content="yes">
9
- <meta name="theme-color" content="#1a1a2e">
10
- <title>Web Terminal</title>
11
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.min.css">
12
  <link rel="stylesheet" href="style.css">
13
  </head>
14
  <body>
15
- <!-- Login Screen -->
16
- <div id="login-screen" class="login-screen">
17
  <div class="login-container">
18
  <div class="login-icon">🖥️</div>
19
- <h1>Web Terminal</h1>
20
  <p>Enter password to continue</p>
21
- <form id="login-form" onsubmit="return handleLogin(event)">
22
- <input type="password" id="password-input" placeholder="Password" autocomplete="current-password" autofocus>
23
- <button type="submit" id="login-btn">
24
- <span>Unlock Terminal</span>
25
- </button>
26
  </form>
27
- <div id="login-error" class="login-error" style="display: none;">
28
- Invalid password. Try again.
29
- </div>
30
  </div>
31
  </div>
32
 
33
- <!-- Terminal Screen -->
34
- <div id="terminal-screen" class="terminal-screen" style="display: none;">
35
  <!-- Status Bar -->
36
- <div id="status-bar" class="status-bar">
37
  <div class="status-left">
38
  <span class="status-indicator" id="connection-status"></span>
39
  <span id="session-name">terminal</span>
40
  </div>
41
  <div class="status-right">
42
- <span id="cpu-stat" class="stat-badge">CPU: --%</span>
43
- <span id="mem-stat" class="stat-badge">MEM: --%</span>
44
- <button class="status-btn" onclick="toggleKeyboard()" title="Toggle Keyboard">⌨️</button>
45
- <button class="status-btn" onclick="toggleExtraKeys()" title="Toggle Extra Keys">🔧</button>
46
  </div>
47
  </div>
48
 
49
- <!-- Terminal Container -->
50
  <div id="terminal-container" class="terminal-container">
51
  <div id="terminal"></div>
52
  </div>
53
 
54
- <!-- Extra Keys Bar -->
55
- <div id="extra-keys" class="extra-keys">
56
- <div class="keys-row">
57
- <button class="key-btn modifier-key" data-key="escape" ontouchstart="sendKey('escape', event)" onmousedown="sendKey('escape', event)">ESC</button>
58
- <button class="key-btn modifier-key" id="ctrl-key" data-key="ctrl" ontouchstart="toggleModifier('ctrl', event)" onmousedown="toggleModifier('ctrl', event)">CTRL</button>
59
- <button class="key-btn modifier-key" id="alt-key" data-key="alt" ontouchstart="toggleModifier('alt', event)" onmousedown="toggleModifier('alt', event)">ALT</button>
60
- <button class="key-btn" data-key="tab" ontouchstart="sendKey('tab', event)" onmousedown="sendKey('tab', event)">TAB</button>
61
- <button class="key-btn" data-key="home" ontouchstart="sendKey('home', event)" onmousedown="sendKey('home', event)">HOME</button>
62
- <button class="key-btn" data-key="end" ontouchstart="sendKey('end', event)" onmousedown="sendKey('end', event)">END</button>
63
- <button class="key-btn" data-key="pgup" ontouchstart="sendKey('pgup', event)" onmousedown="sendKey('pgup', event)">PGUP</button>
64
- <button class="key-btn" data-key="pgdn" ontouchstart="sendKey('pgdn', event)" onmousedown="sendKey('pgdn', event)">PGDN</button>
65
- </div>
66
- <div class="keys-row">
67
- <button class="key-btn arrow-key" data-key="up" ontouchstart="sendKey('up', event)" onmousedown="sendKey('up', event)">▲</button>
68
- <button class="key-btn arrow-key" data-key="down" ontouchstart="sendKey('down', event)" onmousedown="sendKey('down', event)">▼</button>
69
- <button class="key-btn arrow-key" data-key="left" ontouchstart="sendKey('left', event)" onmousedown="sendKey('left', event)">◀</button>
70
- <button class="key-btn arrow-key" data-key="right" ontouchstart="sendKey('right', event)" onmousedown="sendKey('right', event)">▶</button>
71
- <button class="key-btn" ontouchstart="sendKey('pipe', event)" onmousedown="sendKey('pipe', event)">|</button>
72
- <button class="key-btn" ontouchstart="sendKey('amp', event)" onmousedown="sendKey('amp', event)">&amp;</button>
73
- <button class="key-btn" ontouchstart="sendKey('semicolon', event)" onmousedown="sendKey('semicolon', event)">;</button>
74
- <button class="key-btn" ontouchstart="sendKey('dash', event)" onmousedown="sendKey('dash', event)">-</button>
75
- </div>
76
- <div class="keys-row">
77
- <button class="key-btn" ontouchstart="sendKey('slash', event)" onmousedown="sendKey('slash', event)">/</button>
78
- <button class="key-btn" ontouchstart="sendKey('backslash', event)" onmousedown="sendKey('backslash', event)">\</button>
79
- <button class="key-btn" ontouchstart="sendKey('tilde', event)" onmousedown="sendKey('tilde', event)">~</button>
80
- <button class="key-btn" ontouchstart="sendKey('underscore', event)" onmousedown="sendKey('underscore', event)">_</button>
81
- <button class="key-btn ctrl-combo" ontouchstart="sendCtrlKey('c', event)" onmousedown="sendCtrlKey('c', event)">^C</button>
82
- <button class="key-btn ctrl-combo" ontouchstart="sendCtrlKey('d', event)" onmousedown="sendCtrlKey('d', event)">^D</button>
83
- <button class="key-btn ctrl-combo" ontouchstart="sendCtrlKey('z', event)" onmousedown="sendCtrlKey('z', event)">^Z</button>
84
- <button class="key-btn ctrl-combo" ontouchstart="sendCtrlKey('l', event)" onmousedown="sendCtrlKey('l', event)">^L</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
85
  </div>
86
  </div>
87
 
88
- <!-- Hidden input for mobile keyboard -->
89
  <textarea id="mobile-input" class="mobile-input" autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false"></textarea>
90
  </div>
91
 
 
6
  <meta name="apple-mobile-web-app-capable" content="yes">
7
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
8
  <meta name="mobile-web-app-capable" content="yes">
9
+ <meta name="theme-color" content="#0d1117">
10
+ <title>Terminal</title>
11
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.min.css">
12
  <link rel="stylesheet" href="style.css">
13
  </head>
14
  <body>
15
+ <!-- Login -->
16
+ <div id="login-screen" class="login-screen" style="display:none;">
17
  <div class="login-container">
18
  <div class="login-icon">🖥️</div>
19
+ <h1>Terminal</h1>
20
  <p>Enter password to continue</p>
21
+ <form id="login-form">
22
+ <input type="password" id="password-input" placeholder="Password" autocomplete="current-password">
23
+ <button type="submit" id="login-btn">Unlock</button>
 
 
24
  </form>
25
+ <div id="login-error" class="login-error" style="display:none;">Invalid password</div>
 
 
26
  </div>
27
  </div>
28
 
29
+ <!-- Terminal -->
30
+ <div id="terminal-screen" class="terminal-screen" style="display:none;">
31
  <!-- Status Bar -->
32
+ <div class="status-bar">
33
  <div class="status-left">
34
  <span class="status-indicator" id="connection-status"></span>
35
  <span id="session-name">terminal</span>
36
  </div>
37
  <div class="status-right">
38
+ <span id="cpu-stat" class="stat-badge">CPU --%</span>
39
+ <span id="mem-stat" class="stat-badge">MEM --%</span>
40
+ <button class="status-btn" id="btn-keyboard" title="Keyboard">⌨️</button>
41
+ <button class="status-btn" id="btn-extra-keys" title="Keys">🔧</button>
42
  </div>
43
  </div>
44
 
45
+ <!-- Terminal -->
46
  <div id="terminal-container" class="terminal-container">
47
  <div id="terminal"></div>
48
  </div>
49
 
50
+ <!-- Extra Keys - Horizontal Scrollable -->
51
+ <div class="extra-keys-wrapper">
52
+ <div class="extra-keys">
53
+ <!-- Modifiers -->
54
+ <button class="key-btn modifier" data-action="toggle-ctrl">CTRL</button>
55
+ <button class="key-btn modifier" data-action="toggle-alt">ALT</button>
56
+ <button class="key-btn modifier" data-action="toggle-shift">SHIFT</button>
57
+
58
+ <!-- Common -->
59
+ <button class="key-btn" data-action="esc">ESC</button>
60
+ <button class="key-btn" data-action="tab">TAB</button>
61
+
62
+ <!-- Arrows -->
63
+ <button class="key-btn arrow" data-action="up">▲</button>
64
+ <button class="key-btn arrow" data-action="down">▼</button>
65
+ <button class="key-btn arrow" data-action="left">◀</button>
66
+ <button class="key-btn arrow" data-action="right">▶</button>
67
+
68
+ <!-- Navigation -->
69
+ <button class="key-btn" data-action="home">HOME</button>
70
+ <button class="key-btn" data-action="end">END</button>
71
+ <button class="key-btn" data-action="pgup">PGUP</button>
72
+ <button class="key-btn" data-action="pgdn">PGDN</button>
73
+
74
+ <!-- Ctrl combos -->
75
+ <button class="key-btn ctrl-combo" data-action="ctrl-key" data-key="c">^C</button>
76
+ <button class="key-btn ctrl-combo" data-action="ctrl-key" data-key="d">^D</button>
77
+ <button class="key-btn ctrl-combo" data-action="ctrl-key" data-key="z">^Z</button>
78
+ <button class="key-btn ctrl-combo" data-action="ctrl-key" data-key="l">^L</button>
79
+ <button class="key-btn ctrl-combo" data-action="ctrl-key" data-key="a">^A</button>
80
+ <button class="key-btn ctrl-combo" data-action="ctrl-key" data-key="e">^E</button>
81
+ <button class="key-btn ctrl-combo" data-action="ctrl-key" data-key="u">^U</button>
82
+ <button class="key-btn ctrl-combo" data-action="ctrl-key" data-key="k">^K</button>
83
+ <button class="key-btn ctrl-combo" data-action="ctrl-key" data-key="w">^W</button>
84
+ <button class="key-btn ctrl-combo" data-action="ctrl-key" data-key="r">^R</button>
85
+
86
+ <!-- Symbols -->
87
+ <button class="key-btn" data-action="char" data-char="|">|</button>
88
+ <button class="key-btn" data-action="char" data-char="&">&</button>
89
+ <button class="key-btn" data-action="char" data-char=";">;</button>
90
+ <button class="key-btn" data-action="char" data-char="-">-</button>
91
+ <button class="key-btn" data-action="char" data-char="/">/</button>
92
+ <button class="key-btn" data-action="char" data-char="\">\</button>
93
+ <button class="key-btn" data-action="char" data-char="~">~</button>
94
+ <button class="key-btn" data-action="char" data-char="_">_</button>
95
+ <button class="key-btn" data-action="char" data-char="*">*</button>
96
+ <button class="key-btn" data-action="char" data-char="$">$</button>
97
+ <button class="key-btn" data-action="char" data-char="#">#</button>
98
+ <button class="key-btn" data-action="char" data-char="@">@</button>
99
+ <button class="key-btn" data-action="char" data-char="!">!</button>
100
+ <button class="key-btn" data-action="char" data-char="%">%</button>
101
+ <button class="key-btn" data-action="char" data-char="=">=</button>
102
+ <button class="key-btn" data-action="char" data-char="+">+</button>
103
+ <button class="key-btn" data-action="char" data-char=":"">:</button>
104
+ <button class="key-btn" data-action="char" data-char="'">'</button>
105
+ <button class="key-btn" data-action="char" data-char='"'>"</button>
106
+ <button class="key-btn" data-action="char" data-char="`">`</button>
107
+ <button class="key-btn" data-action="char" data-char="<">&lt;</button>
108
+ <button class="key-btn" data-action="char" data-char=">">&gt;</button>
109
+ <button class="key-btn" data-action="char" data-char="[">[</button>
110
+ <button class="key-btn" data-action="char" data-char="]">]</button>
111
+ <button class="key-btn" data-action="char" data-char="{">{</button>
112
+ <button class="key-btn" data-action="char" data-char="}">}</button>
113
+ <button class="key-btn" data-action="char" data-char="(">(</button>
114
+ <button class="key-btn" data-action="char" data-char=")">)</button>
115
  </div>
116
  </div>
117
 
118
+ <!-- Mobile input -->
119
  <textarea id="mobile-input" class="mobile-input" autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false"></textarea>
120
  </div>
121