Spaces:

Serg4451D
/

YouTube

Running

App Files Files Community

Serg4451D commited on Nov 16, 2024

Commit

aaf72ed

verified ·

1 Parent(s): aa69fbc

Update index.html

Browse files

Files changed (1) hide show

index.html +59 -66

index.html CHANGED Viewed

@@ -1,71 +1,64 @@
-import React, { useState } from 'react';
-import { Search } from 'lucide-react';
-import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
-const YouTubeSearch = () => {
-  const [searchQuery, setSearchQuery] = useState('');
-  const [selectedVideo, setSelectedVideo] = useState(null);
-  const handleSearch = (e) => {
-    e.preventDefault();
-    if (searchQuery.trim()) {
-      // Формируем URL для поиска на YouTube
-      const searchUrl = `https://www.youtube.com/results?search_query=${encodeURIComponent(searchQuery)}`;
-      window.open(searchUrl, '_blank');
-    }
-  };
-  return (
-    <div className="max-w-4xl mx-auto p-4">
-      <Card className="mb-6">
-        <CardHeader>
-          <CardTitle className="text-2xl font-bold text-center">YouTube Поиск</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSearch} className="flex gap-2">
-            <input
-              type="text"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              placeholder="Что вы хотите найти?"
-              className="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-            />
-            <button
-              type="submit"
-              className="px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 flex items-center gap-2"
-            >
-              <Search size={20} />
-              Поиск
-            </button>
-          </form>
-        </CardContent>
-      </Card>
-      {selectedVideo && (
-        <Card className="mt-6">
-          <CardContent className="p-4">
-            <div className="relative w-full pt-[56.25%]">
-              <iframe
-                className="absolute top-0 left-0 w-full h-full"
-                src={`https://www.youtube.com/embed/${selectedVideo}`}
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                allowFullScreen
-              ></iframe>
-            </div>
-          </CardContent>
-        </Card>
-      )}
-      <div className="mt-4 text-sm text-gray-600">
-        <p>Советы по поиску:</p>
-        <ul className="list-disc pl-5 mt-2">
-          <li>Используйте ключевые слова для более точного поиска</li>
-          <li>Добавляйте год для поиска видео за определенный период</li>
-          <li>Используйте кавычки для поиска точной фразы</li>
-        </ul>
-      </div>
-    </div>
-  );
-};
-export default YouTubeSearch;

+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>YouTube</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        html, body {
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+        }
+        .youtube-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+        .youtube-frame {
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+        .loading-message {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-family: Arial, sans-serif;
+            font-size: 18px;
+            color: #333;
+            display: none;
+        }
+        .youtube-frame:not(:loaded) + .loading-message {
+            display: block;
+        }
+    </style>
+</head>
+<body>
+    <div class="youtube-container">
+        <iframe
+            class="youtube-frame"
+            src="https://www.youtube.com"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+        ></iframe>
+        <div class="loading-message">
+            Загрузка YouTube...
+        </div>
+    </div>
+</body>
+</html>