Codcups Live HTML/CSS/JS Editor

Lines: 0 | Chars: 0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Awesome Page</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <header class="hero">
        <div class="container">
            <h1><i class="fas fa-rocket"></i> Welcome to Codcups Editor!</h1>
            <p class="subtitle">A powerful live HTML, CSS & JavaScript playground</p>
        </div>
    </header>
    
    <main class="container">
        <section class="features">
            <div class="feature-card">
                <i class="fas fa-bolt"></i>
                <h3>Live Preview</h3>
                <p>See your changes instantly as you type</p>
            </div>
            <div class="feature-card">
                <i class="fas fa-mobile-alt"></i>
                <h3>Responsive</h3>
                <p>Test your designs on all screen sizes</p>
            </div>
            <div class="feature-card">
                <i class="fas fa-code"></i>
                <h3>Multi-language</h3>
                <p>HTML, CSS & JavaScript in one place</p>
            </div>
        </section>
        
        <section class="interactive-demo">
            <h2>Interactive Demo</h2>
            <div class="demo-controls">
                <button class="demo-btn" onclick="changeColor()">Change Color</button>
                <button class="demo-btn" onclick="addItem()">Add Item</button>
                <button class="demo-btn" onclick="toggleAnimation()">Toggle Animation</button>
            </div>
            <div class="demo-output" id="demoOutput">
                <p>Try clicking the buttons above!</p>
            </div>
        </section>
    </main>
    
    <footer>
        <p>Built with <i class="fas fa-heart"></i> by Codcups Community</p>
    </footer>
</body>
</html>

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
}

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

/* Header & Hero */
.hero {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    text-align: center;
    padding: 4rem 2rem;
    border-radius: 20px;
    margin: 2rem auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.hero h1 {
    font-size: 3rem;
    color: #2c3e50;
    margin-bottom: 1rem;
}

.hero .subtitle {
    font-size: 1.5rem;
    color: #7f8c8d;
    margin-bottom: 2rem;
}

/* Features Section */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 4rem 0;
}

.feature-card {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.feature-card i {
    font-size: 3rem;
    color: #3498db;
    margin-bottom: 1rem;
}

.feature-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #2c3e50;
}

.feature-card p {
    color: #7f8c8d;
}

/* Interactive Demo */
.interactive-demo {
    background: white;
    padding: 3rem;
    border-radius: 15px;
    margin: 3rem 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.interactive-demo h2 {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 2rem;
}

.demo-controls {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.demo-btn {
    padding: 1rem 2rem;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.demo-btn:hover {
    background: #2980b9;
    transform: scale(1.05);
}

.demo-output {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 10px;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* Footer */
footer {
    text-align: center;
    padding: 2rem;
    color: white;
    margin-top: 3rem;
}

footer i {
    color: #e74c3c;
    margin: 0 5px;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.feature-card, .interactive-demo {
    animation: fadeIn 0.6s ease-out;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero .subtitle {
        font-size: 1.2rem;
    }
    
    .features {
        grid-template-columns: 1fr;
    }
    
    .demo-controls {
        flex-direction: column;
        align-items: center;
    }
    
    .demo-btn {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 2rem 1rem;
    }
    
    .interactive-demo {
        padding: 2rem 1rem;
    }
}

// Demo JavaScript functions for interactive features

// Initialize demo when page loads
document.addEventListener('DOMContentLoaded', function() {
    console.log('Codcups Editor Demo Loaded!');
    updateDemoMessage('Ready to interact! Click the buttons above.');
});

// Color change function
let colorIndex = 0;
const colors = ['#3498db', '#2ecc71', '#e74c3c', '#f39c12', '#9b59b6'];

function changeColor() {
    const demoOutput = document.getElementById('demoOutput');
    colorIndex = (colorIndex + 1) % colors.length;
    demoOutput.style.backgroundColor = colors[colorIndex];
    demoOutput.style.color = 'white';
    updateDemoMessage(`Changed to ${colors[colorIndex]}!`);
}

// Add item function
let itemCount = 0;
function addItem() {
    const demoOutput = document.getElementById('demoOutput');
    itemCount++;
    const newItem = document.createElement('div');
    newItem.className = 'demo-item';
    newItem.innerHTML = `
        <i class="fas fa-star"></i>
        Item ${itemCount} added at ${new Date().toLocaleTimeString()}
    `;
    demoOutput.appendChild(newItem);
    updateDemoMessage(`Added item ${itemCount}`);
}

// Toggle animation function
let animationActive = true;
function toggleAnimation() {
    const demoOutput = document.getElementById('demoOutput');
    animationActive = !animationActive;
    
    if (animationActive) {
        demoOutput.style.animation = 'pulse 2s infinite';
        updateDemoMessage('Animation enabled!');
    } else {
        demoOutput.style.animation = 'none';
        updateDemoMessage('Animation disabled');
    }
}

// Update message function
function updateDemoMessage(message) {
    const messageElement = document.querySelector('#demoOutput > p:first-child');
    if (messageElement) {
        messageElement.textContent = message;
    } else {
        const demoOutput = document.getElementById('demoOutput');
        const newMessage = document.createElement('p');
        newMessage.textContent = message;
        demoOutput.insertBefore(newMessage, demoOutput.firstChild);
    }
}

// Add CSS for animation
const style = document.createElement('style');
style.textContent = `
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.02); }
        100% { transform: scale(1); }
    }
    
    .demo-item {
        background: rgba(255, 255, 255, 0.2);
        padding: 10px;
        margin: 5px 0;
        border-radius: 5px;
        animation: fadeIn 0.5s ease;
    }
    
    .demo-item i {
        color: #f1c40f;
        margin-right: 10px;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateX(-20px); }
        to { opacity: 1; transform: translateX(0); }
    }
`;
document.head.appendChild(style);

// Console logging for debugging
console.log('Interactive functions loaded:'); 
console.log('- changeColor(): Changes background color');
console.log('- addItem(): Adds new items to demo area');
console.log('- toggleAnimation(): Toggles animation effect');

Live Preview

Loading Preview...