ZenCode Studio - Advanced Web Editor

HTML 0

CSS 0

JavaScript 0

Output

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ZenCode Demo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>Welcome to ZenCode Studio</h1>
            <p class="subtitle">A powerful web development environment</p>
        </header>
        
        <main class="main-content">
            <section class="features">
                <h2>Features</h2>
                <div class="feature-grid">
                    <div class="feature-card">
                        <i class="ri-code-line"></i>
                        <h3>Live Preview</h3>
                        <p>See changes in real-time as you code</p>
                    </div>
                    <div class="feature-card">
                        <i class="ri-palette-line"></i>
                        <h3>Multiple Themes</h3>
                        <p>Choose from several color schemes</p>
                    </div>
                    <div class="feature-card">
                        <i class="ri-bug-line"></i>
                        <h3>Debug Console</h3>
                        <p>View logs and errors in real-time</p>
                    </div>
                </div>
            </section>
            
            <section class="demo">
                <h2>Interactive Demo</h2>
                <div class="demo-controls">
                    <button id="demo-btn" class="demo-button">Click Me!</button>
                    <input type="range" id="demo-slider" min="0" max="100" value="50">
                    <p>Slider Value: <span id="demo-value">50</span></p>
                </div>
            </section>
        </main>
        
        <footer class="footer">
            <p>Built with ZenCode Studio</p>
        </footer>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.container {
    max-width: 1200px;
    width: 100%;
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    overflow: hidden;
}

.header {
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    color: white;
    padding: 40px;
    text-align: center;
}

.header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
}

.main-content {
    padding: 40px;
}

.features h2, .demo h2 {
    color: #1e293b;
    margin-bottom: 30px;
    font-size: 1.8rem;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.feature-card {
    background: #f8fafc;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: transform 0.3s, box-shadow 0.3s;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.feature-card i {
    font-size: 2rem;
    color: #3b82f6;
    margin-bottom: 15px;
}

.feature-card h3 {
    color: #1e293b;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.feature-card p {
    color: #64748b;
    line-height: 1.6;
}

.demo-controls {
    background: #f1f5f9;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
}

.demo-button {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
    margin-bottom: 20px;
}

.demo-button:hover {
    background: #2563eb;
}

input[type="range"] {
    width: 100%;
    max-width: 400px;
    margin: 20px 0;
}

.footer {
    background: #1e293b;
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .header h1 {
        font-size: 2rem;
    }
    
    .main-content {
        padding: 20px;
    }
    
    .feature-grid {
        grid-template-columns: 1fr;
    }
}

// Demo JavaScript Code
console.log('ZenCode Studio initialized!');

// DOM Elements
const demoButton = document.getElementById('demo-btn');
const demoSlider = document.getElementById('demo-slider');
const demoValue = document.getElementById('demo-value');

// Event Listeners
demoButton.addEventListener('click', function() {
    console.log('Button clicked!');
    alert('Hello from ZenCode Studio! 🚀\nYour code is running successfully.');
    
    // Change button text temporarily
    const originalText = this.textContent;
    this.textContent = 'Clicked!';
    this.style.background = '#10b981';
    
    setTimeout(() => {
        this.textContent = originalText;
        this.style.background = '';
    }, 1000);
});

demoSlider.addEventListener('input', function() {
    const value = this.value;
    demoValue.textContent = value;
    
    // Update slider color based on value
    const percentage = (value / 100) * 100;
    this.style.background = `linear-gradient(to right, #3b82f6 ${percentage}%, #e2e8f0 ${percentage}%)`;
    
    console.log(`Slider value changed to: ${value}`);
});

// Utility Functions
function calculateSum(a, b) {
    return a + b;
}

function generateRandomColor() {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

// Example of array manipulation
const features = ['Live Preview', 'Syntax Highlighting', 'Debug Console', 'Code Formatting'];
console.log('Available features:', features);

// Example of object usage
const appInfo = {
    name: 'ZenCode Studio',
    version: '2.0.0',
    author: 'ZenCode Team',
    getInfo: function() {
        return `${this.name} v${this.version}`;
    }
};

console.log(appInfo.getInfo());

// Example: Async function
async function fetchData() {
    try {
        console.log('Fetching data...');
        // Simulate API call
        await new Promise(resolve => setTimeout(resolve, 1000));
        return { success: true, message: 'Data loaded successfully' };
    } catch (error) {
        console.error('Error fetching data:', error);
        throw error;
    }
}

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    console.log('Document loaded');
    demoValue.textContent = demoSlider.value;
    
    // Set initial slider color
    demoSlider.dispatchEvent(new Event('input'));
});

Preview

zencode://localhost:3000

Console 0

[00:00:00] Console initialized. Ready to execute code.