|
|
<!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> |
|
|
|
