Web Hybridizer
HTML Content
Paste your index.html content below.
HTML Content
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Web App</title> <style> body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 20px; background-color: #ffffff; color: #333;} h1 { font-size: 1.5rem; color: #111; margin-top: 0;} .feature { background-color: #f9f9f9; border: 1px solid #ddd; padding: 15px; margin-bottom: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } h2 { font-size: 1.2rem; margin-top: 0; margin-bottom: 10px; } p { margin-top: 0; margin-bottom: 15px; line-height: 1.5; } button { font-size: 1rem; padding: 10px 15px; border: none; background-color: #568EA3; color: white; border-radius: 5px; cursor: pointer; width: 100%; } button:hover { background-color: #4a7c8f; } </style> </head> <body> <h1>Welcome!</h1> <p>This is a sample web app to demonstrate hybrid capabilities.</p> <div class="feature"> <h2>Camera Access</h2> <p>Request camera access from the native device.</p> <button onclick="alert('Requesting camera...')">Use Camera</button> </div> <div class="feature"> <h2>Geolocation</h2> <p>Get your location from the device's GPS.</p> <button onclick="alert('Fetching location...')">Get Location</button> </div> <div class="feature"> <h2>Notifications</h2> <p>Send a push notification via the native OS.</p> <button onclick="alert('Sending notification...')">Send Notification</button> </div> </body> </html>
Generate Configuration
App Preview
Generated Configuration
AI-generated settings for native integration.
Configuration will appear here after generation.