HTML

CSS

JavaScript

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Mobile App</title>
    <style>
        * { 
            margin: 0; 
            padding: 0; 
            box-sizing: border-box; 
        }
        body { 
            font-family: -apple-system, BlinkMacSystemFont, sans-serif; 
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            text-align: center;
        }
        .container { 
            max-width: 400px; 
            width: 100%;
        }
        h1 { 
            font-size: 2.2rem; 
            margin-bottom: 15px; 
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }
        p { 
            font-size: 1.1rem; 
            margin-bottom: 25px; 
            opacity: 0.9; 
            line-height: 1.5;
        }
        button {
            background: rgba(255,255,255,0.2);
            color: white;
            border: 2px solid white;
            padding: 14px 28px;
            border-radius: 30px;
            font-size: 1.1rem;
            cursor: pointer;
            backdrop-filter: blur(10px);
            transition: all 0.3s;
            font-weight: 600;
            margin: 10px;
        }
        button:active { 
            transform: scale(0.95); 
            background: rgba(255,255,255,0.3);
        }
        #output { 
            margin-top: 25px; 
            min-height: 50px; 
            font-size: 1.1rem;
            padding: 15px;
            background: rgba(255,255,255,0.1);
            border-radius: 15px;
            backdrop-filter: blur(5px);
        }
        .feature-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin: 25px 0;
        }
        .feature {
            background: rgba(255,255,255,0.1);
            padding: 15px;
            border-radius: 12px;
            backdrop-filter: blur(5px);
        }
        @media (max-width: 480px) {
            .feature-grid {
                grid-template-columns: 1fr;
            }
            h1 {
                font-size: 1.8rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🚀 RowCode</h1>
        <p>Welcome to your mobile web app! Edit this code and click RUN to see changes.</p>
        
        <div class="feature-grid">
            <div class="feature">
                <h3>📱 Mobile First</h3>
                <p>Optimized for touch devices</p>
            </div>
            <div class="feature">
                <h3>⚡ Instant Preview</h3>
                <p>See results immediately</p>
            </div>
        </div>
        
        <button id="demo-btn">Tap Me! 👆</button>
        <div id="output">Ready to code...</div>
    </div>
    <script>
        let count = 0;
        const demoBtn = document.getElementById('demo-btn');
        const output = document.getElementById('output');
        
        demoBtn.addEventListener('click', function() {
            count++;
            const messages = [
                "Great start! 🎉",
                "You're getting it! 🔥",
                "Awesome tapping! 💪",
                "You're a natural! 🌟",
                "Keep going! 🚀"
            ];
            const message = messages[Math.min(count - 1, messages.length - 1)] || `Tap ${count} and counting!`;
            
            output.innerHTML = `<strong>${message}</strong><br><small>Tapped ${count} time${count !== 1 ? 's' : ''}</small>`;
            
            // Add visual feedback
            this.style.transform = 'scale(0.95)';
            setTimeout(() => {
                this.style.transform = 'scale(1)';
            }, 150);
        });
        
        // Add some interactive background effect
        document.addEventListener('mousemove', function(e) {
            const x = e.clientX / window.innerWidth;
            const y = e.clientY / window.innerHeight;
            document.body.style.background = `linear-gradient(135deg, 
                hsl(${240 + x * 60}, 70%, 60%), 
                hsl(${300 + y * 60}, 70%, 60%))`;
        });
    </script>
</body>
</html>

// Add your JavaScript here

// Mobile-friendly touch events
function setupTouchEvents() {
    const elements = document.querySelectorAll('.touch-element');
    
    elements.forEach(element => {
        let startX, startY;
        
        element.addEventListener('touchstart', (e) => {
            startX = e.touches[0].clientX;
            startY = e.touches[0].clientY;
            element.style.transform = 'scale(0.95)';
        });
        
        element.addEventListener('touchend', (e) => {
            element.style.transform = 'scale(1)';
        });
    });
}

// Example: Add some interactive features
document.addEventListener('DOMContentLoaded', function() {
    console.log('RowCode app loaded successfully!');
    
    // Add loading animation
    const loadingEl = document.createElement('div');
    loadingEl.innerHTML = '✨ RowCode Ready!';
    loadingEl.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        background: var(--success);
        color: white;
        padding: 10px 15px;
        border-radius: 20px;
        font-size: 0.9rem;
        z-index: 1000;
        animation: slideIn 0.5s ease-out;
    `;
    
    // Add CSS for animation
    const style = document.createElement('style');
    style.textContent = `
        @keyframes slideIn {
            from { transform: translateX(100px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
    `;
    document.head.appendChild(style);
    
    // Show and remove loading message
    setTimeout(() => {
        document.body.appendChild(loadingEl);
        setTimeout(() => {
            loadingEl.remove();
        }, 3000);
    }, 1000);
});

// Utility function for mobile gestures
class MobileGestures {
    static onSwipe(element, callback) {
        let startX, startY;
        const minSwipeDistance = 50;
        
        element.addEventListener('touchstart', (e) => {
            startX = e.touches[0].clientX;
            startY = e.touches[0].clientY;
        });
        
        element.addEventListener('touchend', (e) => {
            const endX = e.changedTouches[0].clientX;
            const endY = e.changedTouches[0].clientY;
            const diffX = startX - endX;
            const diffY = startY - endY;
            
            if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > minSwipeDistance) {
                callback(diffX > 0 ? 'left' : 'right');
            } else if (Math.abs(diffY) > minSwipeDistance) {
                callback(diffY > 0 ? 'up' : 'down');
            }
        });
    }
}

Click RUN to open preview in new tab

Code saved successfully!

Made with RowCode