Spaces:
Running
Running
Привет сделай код сайта на react https://aiinsidertips.com/free-ai-video-generators/?utm_source=chatgpt.com в таком стиле на Ubuntu с нуля - Follow Up Deployment
3891750 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Video Generators | Ubuntu Style</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet"> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| body { | |
| font-family: 'Ubuntu', sans-serif; | |
| background-color: #300A24; | |
| color: #FFFFFF; | |
| } | |
| .ubuntu-window { | |
| background: linear-gradient(135deg, #2C001E 0%, #5E2750 100%); | |
| border-radius: 8px; | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); | |
| border: 1px solid #77216F; | |
| } | |
| .ubuntu-titlebar { | |
| background: linear-gradient(to right, #2C001E, #5E2750); | |
| border-top-left-radius: 8px; | |
| border-top-right-radius: 8px; | |
| padding: 8px 12px; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .ubuntu-button { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| margin-right: 8px; | |
| } | |
| .close { background-color: #FF5C57; } | |
| .minimize { background-color: #FFBD2E; } | |
| .maximize { background-color: #28CA42; } | |
| .ubuntu-content { | |
| padding: 20px; | |
| } | |
| .ai-card { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 6px; | |
| transition: all 0.3s ease; | |
| border-left: 4px solid #E95420; | |
| } | |
| .ai-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); | |
| } | |
| .btn-orange { | |
| background-color: #E95420; | |
| color: white; | |
| } | |
| .btn-orange:hover { | |
| background-color: #C34113; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen py-10 px-4 sm:px-10"> | |
| <div id="root"></div> | |
| <!-- React Scripts --> | |
| <script src="https://unpkg.com/react@18/umd/react.development.js"></script> | |
| <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> | |
| <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> | |
| <script type="text/babel"> | |
| const { useState } = React; | |
| function App() { | |
| const [activeTab, setActiveTab] = useState('all'); | |
| const aiTools = [ | |
| { | |
| id: 1, | |
| name: "Synthesia", | |
| description: "Create AI videos with realistic avatars in minutes. No filming required.", | |
| category: "avatar", | |
| freeTier: true, | |
| rating: 4.8, | |
| link: "#" | |
| }, | |
| { | |
| id: 2, | |
| name: "HeyGen", | |
| description: "Turn text into engaging videos with AI avatars and voiceovers.", | |
| category: "avatar", | |
| freeTier: true, | |
| rating: 4.7, | |
| link: "#" | |
| }, | |
| { | |
| id: 3, | |
| name: "Pictory", | |
| description: "Automatically create short, highly-sharable branded videos from your long-form content.", | |
| category: "text-to-video", | |
| freeTier: true, | |
| rating: 4.5, | |
| link: "#" | |
| }, | |
| { | |
| id: 4, | |
| name: "InVideo", | |
| description: "Create professional videos in minutes with thousands of templates.", | |
| category: "template", | |
| freeTier: true, | |
| rating: 4.6, | |
| link: "#" | |
| }, | |
| { | |
| id: 5, | |
| name: "Runway ML", | |
| description: "Next-generation creative tools powered by machine learning.", | |
| category: "advanced", | |
| freeTier: true, | |
| rating: 4.9, | |
| link: "#" | |
| }, | |
| { | |
| id: 6, | |
| name: "Lumen5", | |
| description: "Transform blog posts into engaging videos automatically.", | |
| category: "text-to-video", | |
| freeTier: true, | |
| rating: 4.4, | |
| link: "#" | |
| } | |
| ]; | |
| const filteredTools = activeTab === 'all' | |
| ? aiTools | |
| : aiTools.filter(tool => tool.category === activeTab); | |
| return ( | |
| <div className="max-w-6xl mx-auto"> | |
| {/* Ubuntu Window */} | |
| <div className="ubuntu-window overflow-hidden"> | |
| {/* Titlebar */} | |
| <div className="ubuntu-titlebar"> | |
| <div className="ubuntu-button close"></div> | |
| <div className="ubuntu-button minimize"></div> | |
| <div className="ubuntu-button maximize"></div> | |
| <div className="ml-2 text-sm font-medium">AI Video Generators</div> | |
| </div> | |
| {/* Content */} | |
| <div className="ubuntu-content"> | |
| <h1 className="text-3xl font-bold mb-6 text-orange-400"> | |
| <i data-feather="video" className="inline mr-2"></i> | |
| Free AI Video Generators | |
| </h1> | |
| <p className="mb-8 text-gray-300"> | |
| Discover the best free AI video generation tools to create professional videos | |
| without any technical skills. All these tools offer free tiers to get started. | |
| </p> | |
| {/* Tabs */} | |
| <div className="flex space-x-2 mb-8 overflow-x-auto pb-2"> | |
| <button | |
| onClick={() => setActiveTab('all')} | |
| className={`px-4 py-2 rounded-md ${activeTab === 'all' ? 'bg-orange-600 text-white' : 'bg-gray-800 text-gray-300'}`} | |
| > | |
| All Tools | |
| </button> | |
| <button | |
| onClick={() => setActiveTab('avatar')} | |
| className={`px-4 py-2 rounded-md ${activeTab === 'avatar' ? 'bg-orange-600 text-white' : 'bg-gray-800 text-gray-300'}`} | |
| > | |
| AI Avatars | |
| </button> | |
| <button | |
| onClick={() => setActiveTab('text-to-video')} | |
| className={`px-4 py-2 rounded-md ${activeTab === 'text-to-video' ? 'bg-orange-600 text-white' : 'bg-gray-800 text-gray-300'}`} | |
| > | |
| Text-to-Video | |
| </button> | |
| <button | |
| onClick={() => setActiveTab('template')} | |
| className={`px-4 py-2 rounded-md ${activeTab === 'template' ? 'bg-orange-600 text-white' : 'bg-gray-800 text-gray-300'}`} | |
| > | |
| Templates | |
| </button> | |
| <button | |
| onClick={() => setActiveTab('advanced')} | |
| className={`px-4 py-2 rounded-md ${activeTab === 'advanced' ? 'bg-orange-600 text-white' : 'bg-gray-800 text-gray-300'}`} | |
| > | |
| Advanced | |
| </button> | |
| </div> | |
| {/* AI Tools Grid */} | |
| <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| {filteredTools.map(tool => ( | |
| <div key={tool.id} className="ai-card p-6 hover:bg-gray-800"> | |
| <div className="flex justify-between items-start mb-4"> | |
| <h3 className="text-xl font-bold text-orange-400">{tool.name}</h3> | |
| <div className="flex items-center bg-gray-800 px-2 py-1 rounded text-sm"> | |
| <i data-feather="star" className="w-4 h-4 mr-1 text-yellow-400"></i> | |
| {tool.rating} | |
| </div> | |
| </div> | |
| <p className="text-gray-300 mb-4">{tool.description}</p> | |
| <div className="flex justify-between items-center"> | |
| <span className="text-xs px-2 py-1 bg-gray-800 rounded"> | |
| {tool.freeTier ? 'Free Tier Available' : 'Paid'} | |
| </span> | |
| <a | |
| href={tool.link} | |
| className="btn-orange px-4 py-2 rounded-md text-sm font-medium hover:shadow-lg transition" | |
| > | |
| Try Now <i data-feather="arrow-right" className="w-4 h-4 inline ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| ))} | |
| </div> | |
| {/* Newsletter */} | |
| <div className="mt-12 p-6 rounded-md bg-gray-800"> | |
| <h2 className="text-2xl font-bold mb-2 text-orange-400"> | |
| <i data-feather="mail" className="inline mr-2"></i> | |
| Get More AI Tips | |
| </h2> | |
| <p className="text-gray-300 mb-4"> | |
| Join our newsletter to receive weekly updates on the best AI tools and tips. | |
| </p> | |
| <div className="flex flex-col sm:flex-row gap-2"> | |
| <input | |
| type="email" | |
| placeholder="Your email address" | |
| className="flex-grow px-4 py-2 rounded-md bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-orange-500" | |
| /> | |
| <button className="btn-orange px-6 py-2 rounded-md font-medium"> | |
| Subscribe | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| {/* Footer */} | |
| <footer className="mt-8 text-center text-gray-400 text-sm"> | |
| <p>© {new Date().getFullYear()} AI Video Tools - Ubuntu Style</p> | |
| <div className="flex justify-center space-x-4 mt-2"> | |
| <a href="#" className="hover:text-orange-400">Privacy Policy</a> | |
| <a href="#" className="hover:text-orange-400">Terms of Service</a> | |
| <a href="#" className="hover:text-orange-400">Contact</a> | |
| </div> | |
| </footer> | |
| </div> | |
| ); | |
| } | |
| const root = ReactDOM.createRoot(document.getElementById('root')); | |
| root.render(<App />); | |
| </script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |
| Этот код создает React-приложение с: | |
| 1. Стилем Ubuntu (фиолетовые градиенты, оранжевые акценты) | |
| 2. Окном с кнопками управления (как в Ubuntu) | |
| 3. Списком AI-генераторов видео с фильтрацией по категориям | |
| 4. Карточками инструментов с рейтингами | |
| 5. Формой подписки на рассылку | |
| 6. Адаптивным дизайном для мобильных устройств | |
| Приложение использует: | |
| - React и Babel для работы с JSX | |
| - Tailwind CSS для стилей | |
| - Feather Icons для иконок | |
| - Кастомные стили для создания Ubuntu-эстетики | |
| Все работает полностью на клиенте без необходимости в сборке или сервере. |