Skip to content

Commit 3536e06

Browse files
zivhdinfozivhdinfo
committed
- Implement terminal-style UI with dark theme and improved visual hierarchy
- Add markdown rendering for feedback content with syntax highlighting - Include feedback data persistence in JSON file - Enhance command section toggle functionality - Update styling for better readability and user experience
1 parent b6112e6 commit 3536e06

6 files changed

Lines changed: 809 additions & 356 deletions

File tree

‎data/feedback.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"prompt": "",
3+
"projectDirectory": "",
4+
"timestamp": "",
5+
"feedback": "",
6+
"commandLogs": []
7+
}

‎public/index.html‎

Lines changed: 93 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -3,89 +3,114 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Interactive Feedback MCP</title>
6+
<title>Interactive Feedback MCP Terminal</title>
77
<link rel="stylesheet" href="style.css">
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
11+
<!-- Markdown support libraries -->
12+
<script src="https://cdn.jsdelivr.net/npm/showdown@2.1.0/dist/showdown.min.js"></script>
13+
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.5/dist/purify.min.js"></script>
14+
<!-- Highlight.js for code syntax highlighting -->
15+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
16+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
817
</head>
918
<body>
10-
<div class="container">
11-
<header>
12-
<div class="header-top">
13-
<h1 data-lang-key="title">Interactive Feedback MCP</h1>
14-
<div class="language-switcher">
15-
<button id="lang-toggle" class="btn btn-language" title="Switch Language / Chuyển đổi ngôn ngữ">
16-
<span id="lang-display">EN</span>
17-
</button>
18-
</div>
19+
<div class="terminal-container">
20+
<!-- Terminal Header -->
21+
<div class="terminal-header">
22+
<div class="terminal-controls">
23+
<span class="control-btn close"></span>
24+
<span class="control-btn minimize"></span>
25+
<span class="control-btn maximize"></span>
1926
</div>
20-
<div id="project-directory" class="project-path"></div>
21-
</header>
22-
23-
<main>
24-
<!-- Toggle Command Section Button -->
25-
<div class="toggle-section">
26-
<button id="toggle-command-btn" class="btn btn-secondary" data-lang-key="toggleCommand" title="Show/Hide command execution section">
27-
<span class="help-icon">?</span>
28-
Show Command Section
27+
<div class="terminal-title">
28+
<span data-lang-key="title">Interactive Feedback MCP Terminal</span>
29+
</div>
30+
<div class="terminal-actions">
31+
<button id="lang-toggle" class="terminal-btn" title="Switch Language / Chuyển đổi ngôn ngữ">
32+
<span id="lang-display">EN</span>
2933
</button>
3034
</div>
31-
32-
<!-- Command Section (initially hidden) -->
33-
<section id="command-section" class="command-section hidden">
34-
<div class="command-input-group">
35-
<input type="text" id="command-input" data-lang-key="commandPlaceholder" placeholder="Enter command to run..." class="command-input" title="Type system commands to execute">
36-
<button id="run-btn" class="btn btn-primary" data-lang-key="runButton" title="Execute the command">
37-
<span class="help-icon">?</span>
38-
Run
39-
</button>
40-
</div>
41-
42-
<div class="command-options">
43-
<label class="checkbox-label" title="Automatically run saved command when page loads">
44-
<input type="checkbox" id="auto-execute-checkbox">
45-
<span data-lang-key="autoExecute">Auto-execute on load</span>
46-
<span class="help-icon">?</span>
47-
</label>
48-
<button id="save-config-btn" class="btn btn-secondary" data-lang-key="saveConfig" title="Save current command and settings">
49-
<span class="help-icon">?</span>
50-
Save Config
51-
</button>
35+
</div>
36+
37+
<!-- Terminal Body -->
38+
<div class="terminal-body">
39+
<!-- Project Directory Display -->
40+
<div class="terminal-line">
41+
<span class="prompt">~/project:</span>
42+
<span id="project-directory" class="project-path">Loading...</span>
43+
</div>
44+
45+
<!-- Command Input Section -->
46+
<div class="terminal-section">
47+
<div class="section-header">
48+
<span class="section-title">Command Execution</span>
49+
<div class="section-controls">
50+
<button id="toggle-command-btn" class="terminal-btn small" data-lang-key="toggleCommand">
51+
<span data-lang-key="showCommand">Show</span>
52+
</button>
53+
</div>
5254
</div>
5355

54-
<div class="console-section">
55-
<div class="console-header">
56-
<h3 data-lang-key="consoleOutput" title="Command execution results">Console Output <span class="help-icon">?</span></h3>
57-
<button id="clear-console-btn" class="btn btn-danger btn-small" data-lang-key="clearConsole" title="Clear all console output">
58-
<span class="help-icon">?</span>
59-
Clear
60-
</button>
56+
<div id="command-section" class="command-panel hidden">
57+
<div class="command-line">
58+
<span class="prompt">$</span>
59+
<input type="text" id="command-input" data-lang-key="commandPlaceholder" placeholder="Enter command to run..." class="terminal-input">
60+
<button id="run-btn" class="terminal-btn" data-lang-key="runButton">Run</button>
61+
</div>
62+
63+
<div class="command-options">
64+
<label class="terminal-checkbox">
65+
<input type="checkbox" id="auto-execute-checkbox">
66+
<span data-lang-key="autoExecute">Auto-execute on load</span>
67+
</label>
68+
<button id="save-config-btn" class="terminal-btn small" data-lang-key="saveConfig">Save Config</button>
69+
</div>
70+
71+
<!-- Console Output -->
72+
<div class="console-window">
73+
<div class="console-header">
74+
<span data-lang-key="consoleOutput">Console Output</span>
75+
<button id="clear-console-btn" class="terminal-btn small danger" data-lang-key="clearConsole">Clear</button>
76+
</div>
77+
<div id="console-output" class="console-content"></div>
6178
</div>
62-
<div id="console-output" class="console-output"></div>
6379
</div>
64-
</section>
80+
</div>
6581

6682
<!-- Feedback Section -->
67-
<section class="feedback-section">
68-
<div class="prompt-display">
69-
<h2 data-lang-key="feedbackPrompt" title="AI assistant's request for feedback">Feedback Prompt <span class="help-icon">?</span></h2>
70-
<div id="prompt-text" class="prompt-text" data-lang-key="loadingPrompt">Loading prompt...</div>
83+
<div class="terminal-section">
84+
<div class="section-header">
85+
<span class="section-title" data-lang-key="feedbackPrompt">Feedback Prompt</span>
7186
</div>
7287

73-
<div class="feedback-form">
74-
<textarea id="feedback-textarea" data-lang-key="feedbackPlaceholder" placeholder="Enter your feedback here..." rows="6" title="Provide detailed feedback to the AI assistant"></textarea>
75-
<button id="submit-feedback-btn" class="btn btn-success" data-lang-key="submitFeedback" title="Send feedback and close interface">
76-
<span class="help-icon">?</span>
77-
Submit Feedback
78-
</button>
88+
<div class="feedback-panel">
89+
<div class="prompt-window">
90+
<div id="prompt-text" class="prompt-content" data-lang-key="loadingPrompt">Loading prompt...</div>
91+
</div>
92+
93+
<div class="feedback-input-area">
94+
<div class="terminal-line">
95+
<span class="prompt">feedback></span>
96+
<span class="cursor-blink">_</span>
97+
</div>
98+
<textarea id="feedback-textarea" data-lang-key="feedbackPlaceholder" placeholder="Enter your feedback here..." class="terminal-textarea"></textarea>
99+
<div class="feedback-actions">
100+
<button id="submit-feedback-btn" class="terminal-btn success" data-lang-key="submitFeedback">Submit Feedback</button>
101+
</div>
102+
</div>
79103
</div>
80-
</section>
81-
</main>
82-
83-
<footer>
84-
<p>
85-
Created with ❤️ by <a href="https://github.com/zivhdinfo/" target="_blank">Zivhd</a> |
86-
Based on <a href="https://github.com/noopstudios/interactive-feedback-mcp" target="_blank">Interactive Feedback MCP (Python)</a> by Fábio Ferreira
87-
</p>
88-
</footer>
104+
</div>
105+
106+
<!-- Terminal Footer -->
107+
<div class="terminal-footer">
108+
<span class="footer-info">
109+
Created with ❤️ by <a href="https://github.com/zivhdinfo/" target="_blank">Zivhd</a> |
110+
Based on <a href="https://github.com/noopstudios/interactive-feedback-mcp" target="_blank">Interactive Feedback MCP</a>
111+
</span>
112+
</div>
113+
</div>
89114
</div>
90115

91116
<script src="script.js"></script>

0 commit comments

Comments
 (0)