NeonCode | Live Coding Platform

HTML Editor

Live editing

<!DOCTYPE html>
<html>
<head>
    <title>My Awesome Page</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <header class="hero">
            <h1><i class="fas fa-rocket"></i> Welcome to NeonCode</h1>
            <p class="subtitle">A live coding platform with real-time preview</p>
        </header>
        
        <section class="features">
            <div class="card">
                <i class="fas fa-bolt"></i>
                <h3>Real-time Preview</h3>
                <p>See changes instantly as you type</p>
            </div>
            <div class="card">
                <i class="fas fa-code"></i>
                <h3>Multi-language</h3>
                <p>HTML, CSS & JavaScript editors</p>
            </div>
            <div class="card">
                <i class="fas fa-download"></i>
                <h3>Export Code</h3>
                <p>Download your complete project</p>
            </div>
        </section>
        
        <section class="demo">
            <h2><i class="fas fa-play-circle"></i> Interactive Demo</h2>
            <button class="demo-btn" id="demoButton">Click Me!</button>
            <p id="demoText">Click the button to see JavaScript in action</p>
        </section>
        
        <footer class="demo-footer">
            <p>Built with <i class="fas fa-heart" style="color: #ff006e;"></i> by NeonCode Platform</p>
        </footer>
    </div>
</body>
</html>

CSS Editor

Live styling

/* Reset & Base Styles */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #0a0e17 0%, #1a1f3a 100%);
    color: #e0f7ff;
    margin: 0;
    padding: 20px;
    min-height: 100vh;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Hero Section */
.hero {
    text-align: center;
    padding: 40px 20px;
    margin-bottom: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    border: 1px solid rgba(0, 217, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 15px;
    background: linear-gradient(90deg, #00d9ff, #9d4edd);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero .subtitle {
    font-size: 1.3rem;
    color: rgba(224, 247, 255, 0.8);
    max-width: 600px;
    margin: 0 auto;
}

/* Features Section */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

.card {
    background: rgba(255, 255, 255, 0.05);
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(157, 78, 221, 0.2);
}

.card:hover {
    transform: translateY(-10px);
    border-color: #9d4edd;
    box-shadow: 0 15px 30px rgba(157, 78, 221, 0.2);
}

.card i {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #00d9ff;
}

.card h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #fff;
}

.card p {
    color: rgba(224, 247, 255, 0.7);
    line-height: 1.6;
}

/* Demo Section */
.demo {
    background: rgba(255, 255, 255, 0.05);
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    margin-bottom: 40px;
    border: 1px solid rgba(255, 0, 110, 0.2);
}

.demo h2 {
    font-size: 2rem;
    margin-bottom: 25px;
    color: #fff;
}

.demo-btn {
    background: linear-gradient(135deg, #ff006e, #ff4d9a);
    color: white;
    border: none;
    padding: 15px 40px;
    font-size: 1.2rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 20px;
    font-weight: 600;
}

.demo-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(255, 0, 110, 0.3);
}

#demoText {
    font-size: 1.3rem;
    min-height: 30px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    transition: all 0.3s ease;
}

/* Footer */
.demo-footer {
    text-align: center;
    padding: 25px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.demo-footer p {
    font-size: 1.1rem;
    color: rgba(224, 247, 255, 0.8);
}

/* Responsive */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.2rem;
    }
    
    .features {
        grid-template-columns: 1fr;
    }
}

JavaScript Editor

Live logic

// Interactive demo functionality
document.addEventListener('DOMContentLoaded', function() {
    // Get demo elements
    const demoButton = document.getElementById('demoButton');
    const demoText = document.getElementById('demoText');
    
    // Button click event
    demoButton.addEventListener('click', function() {
        demoText.textContent = '🎉 JavaScript is working! You clicked the button!';
        demoText.style.color = '#00d9ff';
        demoText.style.fontWeight = 'bold';
        demoText.style.transform = 'scale(1.05)';
        
        // Create a confetti effect
        createConfetti();
        
        // Reset after 3 seconds
        setTimeout(() => {
            demoText.textContent = 'Try changing this text via JavaScript editor!';
            demoText.style.color = '';
            demoText.style.fontWeight = '';
            demoText.style.transform = '';
        }, 3000);
    });
    
    // Create confetti effect
    function createConfetti() {
        const colors = ['#00d9ff', '#9d4edd', '#ff006e', '#00ff88'];
        const container = document.querySelector('.demo');
        
        for (let i = 0; i < 50; i++) {
            const confetti = document.createElement('div');
            confetti.innerHTML = '✨';
            confetti.style.position = 'absolute';
            confetti.style.fontSize = Math.random() * 20 + 10 + 'px';
            confetti.style.color = colors[Math.floor(Math.random() * colors.length)];
            confetti.style.left = Math.random() * 100 + '%';
            confetti.style.top = '-30px';
            confetti.style.pointerEvents = 'none';
            confetti.style.zIndex = '9999';
            confetti.style.opacity = '0.9';
            
            container.appendChild(confetti);
            
            // Animation
            const animation = confetti.animate([
                { transform: 'translateY(0) rotate(0deg)', opacity: 1 },
                { transform: `translateY(${window.innerHeight * 0.5}px) rotate(${Math.random() * 360}deg)`, opacity: 0 }
            ], {
                duration: Math.random() * 1000 + 1000,
                easing: 'cubic-bezier(0.215, 0.610, 0.355, 1)'
            });
            
            // Remove after animation
            animation.onfinish = () => confetti.remove();
        }
    }
    
    // Additional demo: Change card colors on hover
    const cards = document.querySelectorAll('.card');
    cards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            const icon = this.querySelector('i');
            if (icon) {
                const colors = ['#00d9ff', '#9d4edd', '#ff006e', '#00ff88'];
                icon.style.color = colors[Math.floor(Math.random() * colors.length)];
            }
        });
        
        card.addEventListener('mouseleave', function() {
            const icon = this.querySelector('i');
            if (icon) {
                setTimeout(() => {
                    icon.style.color = '#00d9ff';
                }, 300);
            }
        });
    });
    
    // Console greeting
    console.log('👋 Welcome to NeonCode! Happy coding!');
});

Live Preview