| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>FlutterFlow Studio for Mobile</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| .code-editor { |
| font-family: 'Courier New', monospace; |
| background: #1a202c; |
| border-radius: 8px; |
| } |
| .preview-frame { |
| background: #f7fafc; |
| border-radius: 8px; |
| box-shadow: 0 10px 25px rgba(0,0,0,0.1); |
| } |
| .toolbar-item { |
| transition: all 0.3s ease; |
| } |
| .toolbar-item:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2); |
| } |
| </style> |
| </head> |
| <body class="min-h-screen bg-gray-50"> |
| |
| <nav class="bg-white shadow-lg sticky top-0 z-50"> |
| <div class="max-w-7xl mx-auto px-4"> |
| <div class="flex justify-between items-center h-16"> |
| <div class="flex items-center space-x-2"> |
| <i data-feather="code" class="text-purple-600"></i> |
| <span class="font-bold text-xl text-gray-800">FlutterFlow Studio</span> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <button class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition"> |
| <i data-feather="save" class="w-4 h-4 mr-2 inline"></i> |
| Save Project |
| </button> |
| <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition"> |
| <i data-feather="play" class="w-4 h-4 mr-2 inline"></i> |
| Run App |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div class="max-w-7xl mx-auto px-4 py-8"> |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> |
| |
| <div class="space-y-6"> |
| <div class="bg-white rounded-xl shadow-lg p-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-xl font-bold text-gray-800">Code Editor</h2> |
| <div class="flex space-x-2"> |
| <button class="p-2 hover:bg-gray-100 rounded"> |
| <i data-feather="copy"></i> |
| </button> |
| <button class="p-2 hover:bg-gray-100 rounded"> |
| <i data-feather="more-vertical"></i> |
| </button> |
| </div> |
| </div> |
| <div class="code-editor p-4 rounded-lg"> |
| <pre class="text-green-400 text-sm overflow-auto max-h-96"> |
| <span class="text-blue-400">import</span> <span class="text-yellow-400">'package:flutter/material.dart'</span>; |
|
|
| <span class="text-blue-400">void</span> <span class="text-purple-400">main</span>() { |
| <span class="text-purple-400">runApp</span>(<span class="text-blue-400">MyApp</span>()); |
| } |
|
|
| <span class="text-blue-400">class</span> <span class="text-yellow-400">MyApp</span> <span class="text-blue-400">extends</span> <span class="text-yellow-400">StatelessWidget</span> { |
| <span class="text-blue-400">@override</span> |
| <span class="text-blue-400">Widget</span> <span class="text-purple-400">build</span>(<span class="text-blue-400">BuildContext</span> context) { |
| <span class="text-blue-400">return</span> <span class="text-yellow-400">MaterialApp</span>( |
| <span class="text-gray-400">title: </span><span class="text-yellow-400">'Flutter Demo'</span>, |
| <span class="text-gray-400">home: </span><span class="text-yellow-400">MyHomePage</span>(), |
| ); |
| } |
| } |
|
|
| <span class="text-blue-400">class</span> <span class="text-yellow-400">MyHomePage</span> <span class="text-blue-400">extends</span> <span class="text-yellow-400">StatelessWidget</span> { |
| <span class="text-blue-400">@override</span> |
| <span class="text-blue-400">Widget</span> <span class="text-purple-400">build</span>(<span class="text-blue-400">BuildContext</span> context) { |
| <span class="text-blue-400">return</span> <span class="text-yellow-400">Scaffold</span>( |
| <span class="text-gray-400">body: </span><span class="text-yellow-400">Center</span>( |
| <span class="text-gray-400">child: </span><span class="text-yellow-400">Text</span>(<span class="text-yellow-400">'Hello Flutter!'</span>), |
| ), |
| ); |
| } |
| } |
| </pre> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-lg p-6"> |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Widget Toolbox</h3> |
| <div class="grid grid-cols-4 gap-3"> |
| <div class="toolbar-item bg-blue-50 p-3 rounded-lg text-center cursor-pointer hover:bg-blue-100"> |
| <i data-feather="square" class="w-6 h-6 mx-auto text-blue-600"></i> |
| <p class="text-xs mt-1 text-gray-600">Container</p> |
| </div> |
| <div class="toolbar-item bg-green-50 p-3 rounded-lg text-center cursor-pointer hover:bg-green-100"> |
| <i data-feather="type" class="w-6 h-6 mx-auto text-green-600"></i> |
| <p class="text-xs mt-1 text-gray-600">Text</p> |
| </div> |
| <div class="toolbar-item bg-purple-50 p-3 rounded-lg text-center cursor-pointer hover:bg-purple-100"> |
| <i data-feather="image" class="w-6 h-6 mx-auto text-purple-600"></i> |
| <p class="text-xs mt-1 text-gray-600">Image</p> |
| </div> |
| <div class="toolbar-item bg-red-50 p-3 rounded-lg text-center cursor-pointer hover:bg-red-100"> |
| <i data-feather="navigation" class="w-6 h-6 mx-auto text-red-600"></i> |
| <p class="text-xs mt-1 text-gray-600">Button</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="space-y-6"> |
| <div class="bg-white rounded-xl shadow-lg p-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-xl font-bold text-gray-800">Live Preview</h2> |
| <div class="flex space-x-2"> |
| <button class="px-3 py-1 bg-gray-100 rounded text-sm">Phone</button> |
| <button class="px-3 py-1 bg-gray-200 rounded text-sm">Tablet</button> |
| <button class="px-3 py-1 bg-gray-200 rounded text-sm">Desktop</button> |
| </div> |
| </div> |
| <div class="preview-frame p-8 flex justify-center"> |
| <div class="w-64 h-96 bg-white border-2 border-gray-300 rounded-3xl overflow-hidden shadow-lg relative"> |
| |
| <div class="bg-purple-600 h-12 flex items-center justify-center"> |
| <span class="text-white font-semibold">My Flutter App</span> |
| </div> |
| <div class="p-4 h-full flex items-center justify-center"> |
| <div class="text-center"> |
| <i data-feather="smile" class="w-16 h-16 text-purple-600 mx-auto mb-4"></i> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Hello Flutter!</h3> |
| <p class="text-gray-600 text-sm">Your app is running perfectly</p> |
| </div> |
| </div> |
| <div class="absolute bottom-4 left-4 right-4"> |
| <button class="w-full bg-purple-600 text-white py-3 rounded-lg font-semibold hover:bg-purple-700 transition"> |
| Get Started |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-lg p-6"> |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Properties</h3> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Widget Type</label> |
| <input type="text" value="Scaffold" class="w-full p-2 border border-gray-300 rounded-lg" readonly> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Background Color</label> |
| <div class="flex space-x-2"> |
| <div class="w-8 h-8 bg-white border rounded cursor-pointer"></div> |
| <div class="w-8 h-8 bg-purple-600 rounded cursor-pointer border-2 border-purple-700"></div> |
| <div class="w-8 h-8 bg-gray-100 rounded cursor-pointer"></div> |
| <div class="w-8 h-8 bg-blue-500 rounded cursor-pointer"></div> |
| </div> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Text Content</label> |
| <input type="text" value="Hello Flutter!" class="w-full p-2 border border-gray-300 rounded-lg"> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="fixed bottom-8 right-8"> |
| <button class="bg-purple-600 text-white p-4 rounded-full shadow-lg hover:bg-purple-700 transition transform hover:scale-110"> |
| <i data-feather="plus" class="w-6 h-6"></i> |
| </button> |
| </div> |
|
|
| <script> |
| |
| VANTA.GLOBE({ |
| el: "body", |
| mouseControls: true, |
| touchControls: true, |
| gyroControls: false, |
| minHeight: 200.00, |
| minWidth: 200.00, |
| scale: 1.00, |
| scaleMobile: 1.00, |
| color: 0x764ba2, |
| backgroundColor: 0xf7fafc |
| }); |
| </script> |
| <script> |
| feather.replace(); |
| </script> |
| </body> |
| </html> |
|
|
