Img2Video Studio

Img2Video Studio

v2
by
Y
Yungmax$
Img2Video Studio
Loading...

Img2Video Studio

Tải lên hình ảnh ban đầu

Kéo & thả hoặc nhấp để duyệt

PNG, JPG, WEBP up to 10MB

Preview
Lời nhắc hoạt ảnh
app.effect_label
Squish
Animeify
Fire
Tạo video

Hãy tạo video để xem kết quả tại đây.

Đang tổng hợp khung hình...

Tải xuống MP4
Sao chép giao diện
Đang trích xuất các thành phần... 0%
Chỉnh sửa bố cục Xuất mã
localhost:3000
Chart Area Mockup

Mã React đã xuất 

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>
  );
}