RowCode
Contribute
Save
Export
Export HTML
Export CSS
Export JS
Export as ZIP
Run
Clear
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 CSS styles here */ /* Example mobile-responsive grid */ .responsive-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; padding: 20px; } /* Mobile-first card design */ .card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: 15px; padding: 20px; border: 1px solid rgba(255, 255, 255, 0.2); transition: transform 0.3s ease; } .card:active { transform: scale(0.98); } /* Smooth animations for mobile */ @media (prefers-reduced-motion: no-preference) { .fade-in { animation: fadeIn 0.5s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } } /* Touch-friendly button sizes */ .btn-mobile { min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; }
// 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
×