Hugging Face's logo

Spaces:
S-Dreamer
/
codenpp
Running

App Files Community
codenpp / index.html
S-Dreamer's picture
S-Dreamer
Add 3 files
64f6900 verified
raw
history blame contribute delete
10.8 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodeNPP - Web Compiler</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #1e293b;
}
::-webkit-scrollbar-thumb {
background: #64748b;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
/* Line numbers */
.editor-container {
position: relative;
}
.line-numbers {
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 100%;
background-color: #1e293b;
color: #64748b;
text-align: right;
padding-right: 10px;
font-family: monospace;
line-height: 1.5;
user-select: none;
}
.code-editor {
padding-left: 60px !important;
tab-size: 4;
}
/* Syntax highlighting */
.keyword {
color: #c792ea;
}
.string {
color: #c3e88d;
}
.comment {
color: #546e7a;
font-style: italic;
}
.number {
color: #f78c6c;
}
.function {
color: #82aaff;
}
</style>
</head>
<body class="bg-slate-900 text-slate-200 h-screen flex flex-col">
<!-- Header -->
<header class="bg-slate-800 border-b border-slate-700 p-2 flex items-center justify-between">
<div class="flex items-center space-x-2">
<i class="fas fa-code text-blue-400 text-xl"></i>
<h1 class="text-xl font-bold">CodeNPP</h1>
</div>
<div class="flex items-center space-x-4">
<button id="run-btn" class="bg-green-600 hover:bg-green-700 px-3 py-1 rounded flex items-center space-x-1">
<i class="fas fa-play"></i>
<span>Run</span>
</button>
<div class="relative">
<select id="language-select" class="bg-slate-700 border border-slate-600 rounded px-2 py-1 appearance-none pr-6">
<option value="javascript">JavaScript</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="python">Python</option>
</select>
<i class="fas fa-chevron-down absolute right-2 top-1/2 transform -translate-y-1/2 text-xs pointer-events-none"></i>
</div>
</div>
</header>
<!-- Main Content -->
<div class="flex flex-col md:flex-row flex-1 overflow-hidden">
<!-- Editor Panel -->
<div class="flex-1 flex flex-col border-r border-slate-700">
<!-- Tab Bar -->
<div class="bg-slate-800 flex items-center overflow-x-auto">
<div class="flex">
<div class="px-4 py-2 border-r border-slate-700 bg-slate-900 flex items-center">
<span class="mr-2">main.js</span>
<i class="fas fa-times text-slate-400 hover:text-slate-200 cursor-pointer"></i>
</div>
<div class="px-4 py-2 border-r border-slate-700 flex items-center text-slate-400 hover:bg-slate-700 cursor-pointer">
<i class="fas fa-plus mr-1"></i>
</div>
</div>
</div>
<!-- Editor -->
<div class="editor-container flex-1 overflow-auto bg-slate-900">
<div class="line-numbers"></div>
<textarea id="code-editor" class="code-editor w-full h-full bg-transparent p-2 font-mono resize-none outline-none text-white" spellcheck="false">// Welcome to CodeNPP!
// Try writing some JavaScript code and click Run
function greet(name) {
return "Hello, " + name + "!";
}
const message = greet("World");
console.log(message);
// Fibonacci sequence
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
console.log("Fibonacci(10):", fibonacci(10));</textarea>
</div>
</div>
<!-- Output Panel -->
<div class="flex-1 flex flex-col border-t md:border-t-0 border-slate-700">
<!-- Output Tabs -->
<div class="bg-slate-800 flex">
<div class="px-4 py-2 border-r border-slate-700 bg-slate-900">Output</div>
<div class="px-4 py-2 border-r border-slate-700 text-slate-400 hover:bg-slate-700 cursor-pointer">Console</div>
</div>
<!-- Output Content -->
<div class="flex-1 overflow-auto bg-slate-900 p-4">
<div id="output" class="font-mono whitespace-pre-wrap"></div>
</div>
<!-- Status Bar -->
<div class="bg-slate-800 border-t border-slate-700 px-3 py-1 text-xs flex justify-between items-center">
<div class="flex space-x-4">
<span>Ln 1, Col 1</span>
<span>JavaScript</span>
</div>
<div>
<span>UTF-8</span>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const codeEditor = document.getElementById('code-editor');
const output = document.getElementById('output');
const runBtn = document.getElementById('run-btn');
const languageSelect = document.getElementById('language-select');
const lineNumbers = document.querySelector('.line-numbers');
// Initialize line numbers
updateLineNumbers();
// Update line numbers when content changes
codeEditor.addEventListener('input', updateLineNumbers);
codeEditor.addEventListener('scroll', syncScroll);
// Run button click handler
runBtn.addEventListener('click', runCode);
// Language change handler
languageSelect.addEventListener('change', function() {
// In a real app, you would change syntax highlighting here
console.log('Language changed to:', this.value);
});
// Update line numbers
function updateLineNumbers() {
const lines = codeEditor.value.split('\n').length;
let numbers = '';
for (let i = 1; i <= lines; i++) {
numbers += i + '\n';
}
lineNumbers.innerHTML = numbers;
}
// Sync scroll between editor and line numbers
function syncScroll() {
lineNumbers.scrollTop = codeEditor.scrollTop;
}
// Run the code
function runCode() {
output.innerHTML = '';
const code = codeEditor.value;
try {
// Clear previous console logs
console.clear();
// Capture console.log output
const originalConsoleLog = console.log;
let consoleOutput = '';
console.log = function() {
originalConsoleLog.apply(console, arguments);
consoleOutput += Array.from(arguments).join(' ') + '\n';
};
// Execute the code
const result = new Function(code)();
// If the code returns something (not a function)
if (result !== undefined && typeof result !== 'function') {
output.innerHTML += '> ' + result + '\n';
}
// Add console output
if (consoleOutput) {
output.innerHTML += '\nConsole output:\n' + consoleOutput;
}
// Restore original console.log
console.log = originalConsoleLog;
} catch (error) {
output.innerHTML = '<span class="text-red-400">Error: ' + error.message + '</span>';
}
}
// Simple syntax highlighting (basic example)
codeEditor.addEventListener('input', function() {
// In a real app, you would implement more sophisticated syntax highlighting here
// This is just a basic example
const code = codeEditor.value;
// You would parse the code and add spans with appropriate classes
// For this example, we'll just leave it as plain text
});
// Handle tab key in editor
codeEditor.addEventListener('keydown', function(e) {
if (e.key === 'Tab') {
e.preventDefault();
const start = this.selectionStart;
const end = this.selectionEnd;
// Insert tab character
this.value = this.value.substring(0, start) + ' ' + this.value.substring(end);
// Move cursor position
this.selectionStart = this.selectionEnd = start + 4;
}
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=S-Dreamer/codenpp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>