Img2Video स्टूडियो
प्रारंभिक छवि अपलोड करें
ड्रैग और ड्रॉप करें या ब्राउज़ करने के लिए क्लिक करें
PNG, JPG, WEBP up to 10MB
एनिमेशन प्रॉम्प्ट
app.effect_label
वीडियो जनरेट करें
Squish
Animeify
Fire
परिणाम देखने के लिए एक वीडियो जनरेट करें।
फ्रेम्स सिंथेसाइज किए जा रहे हैं...
MP4 डाउनलोड करें
घटकों को निकाला जा रहा है...
0%
लेआउट संपादित करें
कोड एक्सपोर्ट करें
localhost:3000
Chart Area Mockup
एक्सपोर्ट किया गया रिएक्ट कोड
import React from 'react';
export default function ExtractedDashboard() {
return (
<div className="flex h-screen bg-slate-50">
{/* Sidebar */}
<aside className="w-64 bg-white border-r p-6">
<h1 className="text-xl font-bold text-slate-800">AppLogo</h1>
<nav className="mt-8 space-y-2">
<a href="#" className="block px-4 py-2 bg-indigo-50 text-indigo-600 rounded-lg">Dashboard</a>
<a href="#" className="block px-4 py-2 text-slate-600 hover:bg-slate-50 rounded-lg">Analytics</a>
</nav>
</aside>
{/* Main Content */}
<main className="flex-1 p-8 overflow-y-auto">
<header className="flex justify-between items-center mb-8">
<h2 className="text-2xl font-bold text-slate-800">Overview</h2>
<button className="bg-indigo-600 text-white px-4 py-2 rounded-lg">New Report</button>
</header>
{/* Metric Cards */}
<div className="grid grid-cols-3 gap-6 mb-8">
{[1, 2, 3].map(i => (
<div key={i} className="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
<p className="text-sm text-slate-500">Metric {i}</p>
<p className="text-2xl font-bold text-slate-800 mt-2">1,234</p>
</div>
))}
</div>
</main>
</div>
);
}