File size: 3,160 Bytes
7eb7701 06d399c 7eb7701 06d399c 7eb7701 06d399c 7eb7701 06d399c 7eb7701 06d399c 7eb7701 06d399c 7eb7701 06d399c 7eb7701 06d399c 7eb7701 06d399c 7eb7701 325675e 06d399c 7eb7701 06d399c 7eb7701 06d399c e3dfcc5 06d399c e3dfcc5 06d399c e3dfcc5 c0cb957 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coder Space</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 20px;
background-color: #f4f4f4;
}
.container {
max-width: 800px;
margin: auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
header {
background-color: #3498db;
color: white;
text-align: center;
padding: 20px 0;
border-radius: 5px 5px 0 0;
}
main {
display: flex;
flex-direction: column;
gap: 20px;
}
.card {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.05);
transition: transform 0.3s ease-in-out;
}
.card:hover {
transform: translateY(-5px);
}
footer {
background-color: #3498db;
color: white;
text-align: center;
padding: 10px 0;
margin-top: auto;
border-radius: 0 0 5px 5px;
}
</style>
</head>
<body>
<header>
<h1>Coder Space</h1>
<p>Interactive coding environment powered by Hugging Face</p>
</header>
<main>
<!-- Add your main content here -->
<div class="card">
<h2>Code Editor</h2>
<textarea id="codeEditor" rows="10" cols="50"></textarea>
</div>
<div class="card">
<h2>Console Output</h2>
<pre id="consoleOutput"></pre>
</div>
<div class="card">
<h2>Run Code</h2>
<button onclick="runCode()">Execute</button>
</div>
</main>
<footer>
<p>© 2023 Coder Space. All rights reserved.</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/min/vs/loader.js"></script>
<script>
// Initialize Monaco Editor
const editor = monaco.editor.create(document.getElementById('codeEditor'), {
value: '',
language: 'javascript',
theme: 'vs-dark'
});
let consoleOutput = document.getElementById('consoleOutput');
function runCode() {
try {
const code = editor.getValue();
console.log(code);
// Here you would typically execute the code and update the console output
consoleOutput.textContent += `Output:\n${code}\n`;
} catch (error) {
console.error(error);
consoleOutput.textContent += `Error:\n${error.message}\n`;
}
}
// Example of using environment variables
const envVars = window.huggingface.variables;
console.log('Environment Variables:', JSON.stringify(envVars, null, 2));
</script>
</body>
</html>
|