index.html

style.css

script.js

index.html

style.css

script.js

HTML UTF-8 LF

Ln 1, Col 1 0 selected

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Awesome Project</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header class="hero">
            <h1 class="hero-title">Welcome to CodeCraft Pro</h1>
            <p class="hero-subtitle">The most advanced web-based code editor</p>
            <button class="cta-button" id="ctaBtn">Get Started</button>
        </header>
        
        <section class="features">
            <div class="feature-grid">
                <div class="feature-card">
                    <div class="feature-icon">🚀</div>
                    <h3>Fast & Efficient</h3>
                    <p>Lightning-fast performance with real-time preview</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🎨</div>
                    <h3>Beautiful Design</h3>
                    <p>Modern UI with multiple themes and customization</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">⚡</div>
                    <h3>Advanced Features</h3>
                    <p>Code completion, syntax highlighting, and more</p>
                </div>
            </div>
        </section>
        
        <footer class="demo-footer">
            <p>© 2025 CodeCraft Pro. Made with ❤️</p>
        </footer>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS UTF-8 LF

Ln 1, Col 1 0 selected

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 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: 20px;
}

/* Hero Section */
.hero {
    text-align: center;
    padding: 80px 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    margin-bottom: 60px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: #7f8c8d;
    margin-bottom: 40px;
    font-weight: 400;
}

.cta-button {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
}

.cta-button:active {
    transform: translateY(-1px);
}

/* Features Section */
.features {
    margin-bottom: 60px;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.feature-card {
    background: rgba(255, 255, 255, 0.95);
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    animation: fadeInUp 0.8s ease-out;
}

.feature-card:nth-child(2) {
    animation-delay: 0.1s;
}

.feature-card:nth-child(3) {
    animation-delay: 0.2s;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    display: block;
}

.feature-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 15px;
}

.feature-card p {
    color: #7f8c8d;
    font-size: 1rem;
    line-height: 1.6;
}

/* Footer */
.demo-footer {
    text-align: center;
    padding: 40px 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    backdrop-filter: blur(10px);
}

.demo-footer p {
    color: #7f8c8d;
    font-size: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .feature-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .container {
        padding: 15px;
    }
}

JavaScript UTF-8 LF

Ln 1, Col 1 0 selected

/**
 * CodeCraft Pro Demo Script
 * Advanced functionality with smooth animations and interactions
 */

class DemoApp {
    constructor() {
        this.init();
    }

    init() {
        this.setupEventListeners();
        this.startAnimations();
        this.initParticles();
        console.log('🚀 Demo application initialized successfully!');
    }

    setupEventListeners() {
        const ctaButton = document.getElementById('ctaBtn');
        if (ctaButton) {
            ctaButton.addEventListener('click', this.handleCTAClick.bind(this));
        }

        // Add hover effects to feature cards
        const featureCards = document.querySelectorAll('.feature-card');
        featureCards.forEach((card, index) => {
            card.addEventListener('mouseenter', () => this.handleCardHover(card, true));
            card.addEventListener('mouseleave', () => this.handleCardHover(card, false));
        });

        // Add scroll animations
        this.setupScrollAnimations();
    }

    handleCTAClick(event) {
        event.preventDefault();
        
        // Create ripple effect
        this.createRippleEffect(event.target, event);
        
        // Show success message
        setTimeout(() => {
            this.showNotification('Welcome to CodeCraft Pro! 🎉', 'success');
        }, 300);

        // Add some dynamic content
        setTimeout(() => {
            this.addDynamicContent();
        }, 1000);
    }

    createRippleEffect(element, event) {
        const rect = element.getBoundingClientRect();
        const size = Math.max(rect.width, rect.height);
        const x = event.clientX - rect.left - size / 2;
        const y = event.clientY - rect.top - size / 2;
        
        const ripple = document.createElement('span');
        ripple.classList.add('ripple');
        ripple.style.cssText = `
            position: absolute;
            width: ${size}px;
            height: ${size}px;
            left: ${x}px;
            top: ${y}px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            transform: scale(0);
            animation: rippleAnimation 0.6s ease-out;
            pointer-events: none;
        `;
        
        element.style.position = 'relative';
        element.style.overflow = 'hidden';
        element.appendChild(ripple);
        
        setTimeout(() => ripple.remove(), 600);
    }

    handleCardHover(card, isEntering) {
        const icon = card.querySelector('.feature-icon');
        if (icon) {
            if (isEntering) {
                icon.style.transform = 'scale(1.2) rotate(5deg)';
                icon.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
                card.style.background = 'rgba(255, 255, 255, 1)';
            } else {
                icon.style.transform = 'scale(1) rotate(0deg)';
                card.style.background = 'rgba(255, 255, 255, 0.95)';
            }
        }
    }

    setupScrollAnimations() {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate-in');
                }
            });
        }, { threshold: 0.1 });

        document.querySelectorAll('.feature-card').forEach(card => {
            observer.observe(card);
        });
    }

    showNotification(message, type = 'info') {
        const notification = document.createElement('div');
        notification.classList.add('notification', type);
        notification.innerHTML = `
            <div class="notification-content">
                <span class="notification-message">${message}</span>
                <button class="notification-close">×</button>
            </div>
        `;
        
        notification.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            background: ${type === 'success' ? '#4CAF50' : '#2196F3'};
            color: white;
            padding: 15px 20px;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
            z-index: 10000;
            transform: translateX(400px);
            transition: transform 0.3s ease;
        `;
        
        document.body.appendChild(notification);
        
        // Animate in
        setTimeout(() => {
            notification.style.transform = 'translateX(0)';
        }, 100);
        
        // Auto remove
        setTimeout(() => {
            notification.style.transform = 'translateX(400px)';
            setTimeout(() => notification.remove(), 300);
        }, 3000);
        
        // Close button
        notification.querySelector('.notification-close').addEventListener('click', () => {
            notification.style.transform = 'translateX(400px)';
            setTimeout(() => notification.remove(), 300);
        });
    }

    addDynamicContent() {
        const hero = document.querySelector('.hero');
        if (!hero.querySelector('.dynamic-stats')) {
            const stats = document.createElement('div');
            stats.classList.add('dynamic-stats');
            stats.innerHTML = `
                <div style="
                    display: flex;
                    justify-content: center;
                    gap: 40px;
                    margin-top: 30px;
                    flex-wrap: wrap;
                ">
                    <div class="stat-item" style="text-align: center;">
                        <div style="font-size: 2rem; font-weight: bold; color: #667eea;">1000+</div>
                        <div style="font-size: 0.9rem; color: #7f8c8d;">Projects Created</div>
                    </div>
                    <div class="stat-item" style="text-align: center;">
                        <div style="font-size: 2rem; font-weight: bold; color: #667eea;">50K+</div>
                        <div style="font-size: 0.9rem; color: #7f8c8d;">Lines of Code</div>
                    </div>
                    <div class="stat-item" style="text-align: center;">
                        <div style="font-size: 2rem; font-weight: bold; color: #667eea;">24/7</div>
                        <div style="font-size: 0.9rem; color: #7f8c8d;">Available</div>
                    </div>
                </div>
            `;
            
            stats.style.opacity = '0';
            stats.style.transform = 'translateY(20px)';
            stats.style.transition = 'all 0.5s ease';
            
            hero.appendChild(stats);
            
            setTimeout(() => {
                stats.style.opacity = '1';
                stats.style.transform = 'translateY(0)';
            }, 100);
            
            // Animate numbers
            this.animateNumbers();
        }
    }

    animateNumbers() {
        const statItems = document.querySelectorAll('.stat-item');
        statItems.forEach((item, index) => {
            const numberElement = item.querySelector('div:first-child');
            const finalNumber = parseInt(numberElement.textContent.replace(/[^\d]/g, ''));
            const suffix = numberElement.textContent.replace(/[\d]/g, '');
            
            let current = 0;
            const increment = finalNumber / 50;
            const timer = setInterval(() => {
                current += increment;
                if (current >= finalNumber) {
                    current = finalNumber;
                    clearInterval(timer);
                }
                numberElement.textContent = Math.floor(current) + suffix;
            }, 30);
        });
    }

    initParticles() {
        // Create floating particles for visual appeal
        const createParticle = () => {
            const particle = document.createElement('div');
            particle.style.cssText = `
                position: fixed;
                width: 4px;
                height: 4px;
                background: rgba(102, 126, 234, 0.3);
                border-radius: 50%;
                pointer-events: none;
                animation: float ${Math.random() * 3 + 2}s linear infinite;
                left: ${Math.random() * 100}vw;
                top: 100vh;
                z-index: 0;
            `;
            
            document.body.appendChild(particle);
            
            setTimeout(() => particle.remove(), 5000);
        };
        
        // Create particles periodically
        setInterval(createParticle, 2000);
    }

    startAnimations() {
        // Add CSS animations
        const style = document.createElement('style');
        style.textContent = `
            @keyframes rippleAnimation {
                to {
                    transform: scale(4);
                    opacity: 0;
                }
            }
            
            @keyframes float {
                from {
                    transform: translateY(0) rotate(0deg);
                    opacity: 1;
                }
                to {
                    transform: translateY(-100vh) rotate(360deg);
                    opacity: 0;
                }
            }
            
            .animate-in {
                animation: slideInFromBottom 0.6s ease-out;
            }
            
            @keyframes slideInFromBottom {
                from {
                    opacity: 0;
                    transform: translateY(30px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
        `;
        document.head.appendChild(style);
    }
}

// Initialize the demo application
document.addEventListener('DOMContentLoaded', () => {
    window.demoApp = new DemoApp();
    
    // Add some console styling
    console.log(
        '%c🚀 CodeCraft Pro Demo Loaded!', 
        'color: #667eea; font-size: 16px; font-weight: bold; background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent;'
    );
    
    console.log(
        '%cFeatures: ✨ Real-time preview ✨ Syntax highlighting ✨ Auto-completion ✨ Multiple themes', 
        'color: #764ba2; font-size: 12px;'
    );
});

// Export for module systems
if (typeof module !== 'undefined' && module.exports) {
    module.exports = DemoApp;
}

Live Preview

localhost:3000

Loading preview...