Spaces:

S-Dreamer
/

codenpp

Running

App Files Files Community

codenpp / index.html

S-Dreamer

Add 3 files

64f6900 verified 10 months ago

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>