Spaces:

Karmashek
/

bad1

Running

App Files Files Community

Karmashek commited on May 15, 2025

Commit

d1d360c

verified ·

1 Parent(s): e25f871

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +475 -18
prompts.txt +0 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Bad1
-emoji: 🏢
 colorFrom: red
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: bad1
+emoji: 🐳
 colorFrom: red
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,476 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>MES System</title>
+  <script src="https://cdn.tailwindcss.com "></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css "/>
+  <style>
+    .notification-badge {
+      position: absolute;
+      top: 0;
+      right: 0;
+      font-size: 0.625rem;
+      line-height: 1.25rem;
+      width: 1.25rem;
+      height: 1.25rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 9999px;
+    }
+    .has-event:hover {
+      background-color: #BFDBFE !important;
+    }
+  </style>
+</head>
+<body class="bg-gray-50 text-white font-sans">
+<div id="app" class="flex h-screen overflow-hidden bg-gray-50"></div>
+<script type="module">
+  import { createRoot } from 'https://unpkg.com/react @18/umd/react.development.js';
+  import ReactDOM from 'https://unpkg.com/react-dom @18/umd/react-dom.development.js';
+  const root = ReactDOM.createRoot(document.getElementById('app'));
+  // Mock data
+  const equipmentData = [
+    {
+      id: 1,
+      name: "Токарный станок CNC-2000",
+      type: "Станок",
+      serial: "CNC2000-001",
+      inventory: "INV-1001",
+      status: "active",
+      lastMaintenance: "2023-05-15",
+      nextMaintenance: "2023-06-15",
+      maintenanceInterval: 30,
+      description: "Токарный станок с ЧПУ"
+    },
+    {
+      id: 2,
+      name: "Конвейерная линия A-12",
+      type: "Конвейер",
+      serial: "CONV-A12-045",
+      inventory: "INV-1042",
+      status: "maintenance",
+      lastMaintenance: "2023-05-20",
+      nextMaintenance: "2023-06-20",
+      maintenanceInterval: 30,
+      description: "Линия для сборки продукции"
+    },
+    {
+      id: 3,
+      name: "Воздушный компрессор V-50",
+      type: "Компрессор",
+      serial: "COMP-V50-112",
+      inventory: "INV-1078",
+      status: "repair",
+      lastMaintenance: "2023-04-10",
+      nextMaintenance: "2023-06-10",
+      maintenanceInterval: 60,
+      description: "Промышленный воздушный компрессор"
+    }
+  ];
+  const users = [
+    {id: 1, name: "Иван Петров", role: "admin", email: "ivan@example.com"},
+    {id: 2, name: "Петр Смирнов", role: "engineer", email: "petr@example.com"},
+    {id: 3, name: "Анна Иванова", role: "viewer", email: "anna@example.com"}
+  ];
+  const maintenanceEvents = [
+    {equipmentId: 1, date: "2023-06-15", status: "planned", responsible: "Иванов А.П."},
+    {equipmentId: 2, date: "2023-06-20", status: "planned", responsible: "Петров И.С."},
+    {equipmentId: 3, date: "2023-06-10", status: "overdue", responsible: "Сидоров В.М."}
+  ];
+  function formatDate(dateStr) {
+    if (!dateStr) return "";
+    const d = new Date(dateStr);
+    return `${d.getDate()}.${d.getMonth()+1}.${d.getFullYear()}`;
+  }
+  function calculateNextMaintenanceDate(commissionDate, intervalDays) {
+    if (!commissionDate) return '';
+    const nextDate = new Date(new Date(commissionDate).getTime() + parseInt(intervalDays) * 24 * 60 * 60 * 1000);
+    return nextDate.toISOString().split('T')[0];
+  }
+  function Dashboard({ setActiveTab }) {
+    const activeCount = equipmentData.length;
+    const completedCount = equipmentData.filter(e => e.lastMaintenance).length;
+    const overdueCount = equipmentData.filter(e => new Date(e.nextMaintenance) < new Date()).length;
+    const repairCount = equipmentData.filter(e => e.status === "repair").length;
+    return (
+      <div class="p-6">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
+          <div class="bg-white rounded-lg shadow p-6 text-gray-800">
+            <div class="flex items-center">
+              <i class="fas fa-tools text-xl text-blue-500 mr-4"></i>
+              <div>
+                <p class="text-sm text-gray-500">Всего оборудования</p>
+                <h3 class="text-2xl font-bold">{activeCount}</h3>
+              </div>
+            </div>
+          </div>
+          <div class="bg-white rounded-lg shadow p-6 text-gray-800">
+            <div class="flex items-center">
+              <i class="fas fa-check-circle text-xl text-green-500 mr-4"></i>
+              <div>
+                <p class="text-sm text-gray-500">Выполнено ТО</p>
+                <h3 class="text-2xl font-bold">{completedCount}</h3>
+              </div>
+            </div>
+          </div>
+          <div class="bg-white rounded-lg shadow p-6 text-gray-800">
+            <div class="flex items-center">
+              <i class="fas fa-exclamation-triangle text-xl text-yellow-500 mr-4"></i>
+              <div>
+                <p class="text-sm text-gray-500">Просрочено ТО</p>
+                <h3 class="text-2xl font-bold">{overdueCount}</h3>
+              </div>
+            </div>
+          </div>
+          <div class="bg-white rounded-lg shadow p-6 text-gray-800">
+            <div class="flex items-center">
+              <i class="fas fa-wrench text-xl text-red-500 mr-4"></i>
+              <div>
+                <p class="text-sm text-gray-500">Текущие ремонты</p>
+                <h3 class="text-2xl font-bold">{repairCount}</h3>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bg-white rounded-lg shadow overflow-hidden">
+          <div class="p-4 border-b flex justify-between items-center">
+            <h2 class="text-lg font-semibold">Оборудование</h2>
+            <button onClick={() => setActiveTab("equipment")} class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
+              <i class="fas fa-plus mr-2"></i> Перейти к оборудованию
+            </button>
+          </div>
+          <div class="overflow-x-auto">
+            <table class="min-w-full divide-y divide-gray-200">
+              <thead class="bg-gray-50">
+                <tr>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Название</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Тип</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Статус</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Последнее ТО</th>
+                </tr>
+              </thead>
+              <tbody class="bg-white divide-y divide-gray-200">
+                {equipmentData.map(eq => (
+                  <tr key={eq.id}>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{eq.id}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{eq.name}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{eq.type}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                      <span class={`px-2 py-1 rounded-full text-xs font-semibold ${
+                        eq.status === "active" ? "bg-green-100 text-green-800" :
+                        eq.status === "maintenance" ? "bg-yellow-100 text-yellow-800" : "bg-red-100 text-red-800"
+                      }`}>
+                        {eq.status === "active" ? "Активно" : eq.status === "maintenance" ? "ТО" : "Ремонт"}
+                      </span>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{formatDate(eq.lastMaintenance)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    );
+  }
+  function Equipment({ setEquipmentList, setActiveTab }) {
+    const [showModal, setShowModal] = React.useState(false);
+    const [newEq, setNewEq] = React.useState({
+      name: "",
+      type: "",
+      serial: "",
+      inventory: "",
+      commissionDate: "",
+      maintenanceInterval: 30,
+      description: ""
+    });
+    const handleAdd = () => {
+      if (!newEq.name || !newEq.type || !newEq.serial || !newEq.inventory || !newEq.commissionDate) {
+        alert("Заполните все обязательные поля");
+        return;
+      }
+      const id = equipmentData.length > 0 ? Math.max(...equipmentData.map(e => e.id)) + 1 : 1;
+      equipmentData.push({
+        ...newEq,
+        id,
+        status: "active",
+        nextMaintenance: calculateNextMaintenanceDate(newEq.commissionDate, newEq.maintenanceInterval)
+      });
+      setEquipmentList([...equipmentData]);
+      setShowModal(false);
+      alert("Оборудование добавлено");
+    };
+    return (
+      <div class="p-6">
+        <h2 class="text-2xl font-bold mb-6">Оборудование</h2>
+        <div class="bg-white rounded-lg shadow overflow-hidden">
+          <div class="p-4 border-b flex justify-between items-center">
+            <h3 class="text-lg font-semibold">Список оборудования</h3>
+            <button onClick={() => setShowModal(true)} class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
+              <i class="fas fa-plus mr-2"></i> Добавить
+            </button>
+          </div>
+          <div class="overflow-x-auto">
+            <table class="min-w-full divide-y divide-gray-200">
+              <thead class="bg-gray-50">
+                <tr>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">ID</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Название</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Тип</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Статус</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Последнее ТО</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Действия</th>
+                </tr>
+              </thead>
+              <tbody class="bg-white divide-y divide-gray-200">
+                {equipmentData.map(eq => (
+                  <tr key={eq.id}>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{eq.id}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{eq.name}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{eq.type}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                      <span class={`px-2 py-1 rounded-full text-xs font-semibold ${
+                        eq.status === "active" ? "bg-green-100 text-green-800" :
+                        eq.status === "maintenance" ? "bg-yellow-100 text-yellow-800" : "bg-red-100 text-red-800"
+                      }`}>
+                        {eq.status === "active" ? "Активно" : eq.status === "maintenance" ? "ТО" : "Ремонт"}
+                      </span>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{formatDate(eq.lastMaintenance)}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                      <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-edit"></i></button>
+                      <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+        {showModal && (
+          <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+            <div class="bg-white rounded-lg w-full max-w-md p-6">
+              <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-semibold">Добавить оборудование</h3>
+                <button onClick={() => setShowModal(false)} class="text-gray-500">&times;</button>
+              </div>
+              <form class="space-y-4">
+                <input value={newEq.name} onInput={(e) => setNewEq({...newEq, name: e.target.value})} placeholder="Название" required class="w-full px-4 py-2 border rounded-lg"/>
+                <select value={newEq.type} onChange={(e) => setNewEq({...newEq, type: e.target.value})} required class="w-full px-4 py-2 border rounded-lg">
+                  <option value="">Выберите тип</option>
+                  <option>Станок</option>
+                  <option>Конвейер</option>
+                  <option>Компрессор</option>
+                  <option>Генератор</option>
+                  <option>Насос</option>
+                </select>
+                <input value={newEq.serial} onInput={(e) => setNewEq({...newEq, serial: e.target.value})} placeholder="Серийный номер" required class="w-full px-4 py-2 border rounded-lg"/>
+                <input value={newEq.inventory} onInput={(e) => setNewEq({...newEq, inventory: e.target.value})} placeholder="Инвентарный номер" required class="w-full px-4 py-2 border rounded-lg"/>
+                <input value={newEq.commissionDate} type="date" onInput={(e) => setNewEq({...newEq, commissionDate: e.target.value})} required class="w-full px-4 py-2 border rounded-lg"/>
+                <input value={newEq.maintenanceInterval} type="number" min="1" onInput={(e) => setNewEq({...newEq, maintenanceInterval: e.target.value})} placeholder="Интервал ТО (дни)" required class="w-full px-4 py-2 border rounded-lg"/>
+                <textarea value={newEq.description} onInput={(e) => setNewEq({...newEq, description: e.target.value})} rows="3" placeholder="Описание" class="w-full px-4 py-2 border rounded-lg"></textarea>
+              </form>
+              <div class="mt-4 flex justify-end space-x-2">
+                <button onClick={() => setShowModal(false)} class="px-4 py-2 border rounded-lg hover:bg-gray-100">Отмена</button>
+                <button onClick={handleAdd} class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Сохранить</button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+  function Schedule() {
+    return (
+      <div class="p-6">
+        <h2 class="text-2xl font-bold mb-6">График ТО</h2>
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          <div class="lg:col-span-2 bg-white rounded-lg shadow p-4">
+            <h3 class="text-lg font-semibold mb-4">Календарь ТО</h3>
+            <div class="flex justify-between items-center mb-4">
+              <h4 class="font-medium">Июнь 2023</h4>
+              <div class="flex space-x-2">
+                <button class="p-2 rounded-full hover:bg-gray-100"><i class="fas fa-chevron-left"></i></button>
+                <button class="p-2 rounded-full hover:bg-gray-100"><i class="fas fa-chevron-right"></i></button>
+              </div>
+            </div>
+            <div class="grid grid-cols-7 gap-1 mb-2">
+              {['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'].map(day => (
+                <div class="text-center text-xs font-medium text-gray-500">{day}</div>
+              ))}
+            </div>
+            <div class="grid grid-cols-7 gap-1">
+              {[...Array(35)].map((_, i) => {
+                const day = i - 4;
+                const hasEvent = maintenanceEvents.some(event => new Date(event.date).getDate() === day && new Date(event.date).getMonth() === 5);
+                return (
+                  <div class={`h-10 flex items-center justify-center border rounded ${hasEvent ? 'bg-blue-50' : ''}>{day > 0 && day <= 30 ? day : ''}</div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+  function Users() {
+    return (
+      <div class="p-6">
+        <h2 class="text-2xl font-bold mb-6">Пользователи</h2>
+        <div class="bg-white rounded-lg shadow overflow-hidden">
+          <div class="p-4 border-b">
+            <h3 class="text-lg font-semibold">Список пользователей</h3>
+          </div>
+          <div class="overflow-x-auto">
+            <table class="min-w-full divide-y divide-gray-200">
+              <thead class="bg-gray-50">
+                <tr>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Имя</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Email</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Роль</th>
+                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Действия</th>
+                </tr>
+              </thead>
+              <tbody class="bg-white divide-y divide-gray-200">
+                {users.map(user => (
+                  <tr key={user.id}>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{user.name}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{user.email}</td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                      <span class={`px-2 py-1 rounded-full text-xs font-semibold ${
+                        user.role === "admin" ? "bg-purple-100 text-purple-800" :
+                        user.role === "engineer" ? "bg-blue-100 text-blue-800" : "bg-gray-100 text-gray-800"
+                      }`}>
+                        {user.role === "admin" ? "Администратор" : user.role === "engineer" ? "Инженер" : "Просмотр"}
+                      </span>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                      <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-edit"></i></button>
+                      <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    );
+  }
+  function App() {
+    const [activeTab, setActiveTab] = React.useState("dashboard");
+    const [isSidebarCollapsed, setIsSidebarCollapsed] = React.useState(false);
+    const renderContent = () => {
+      switch (activeTab) {
+        case "dashboard": return <Dashboard setActiveTab={setActiveTab}/>;
+        case "schedule": return <Schedule />;
+        case "equipment": return <Equipment setEquipmentList={setActiveTab} setActiveTab={setActiveTab}/>;
+        case "users": return <Users />;
+        default: return <Dashboard setActiveTab={setActiveTab}/>;
+      }
+    };
+    return (
+      <div class="flex h-screen overflow-hidden bg-gray-50">
+        {/* Sidebar */}
+        <div class={`sidebar bg-blue-800 text-white transition-all duration-300 ${isSidebarCollapsed ? 'collapsed w-16' : 'w-64'} flex flex-col`}>
+          <div class="p-4 flex items-center justify-between border-b border-blue-700">
+            <div class="flex items-center">
+              <i class="fas fa-cogs text-2xl mr-3"></i>
+              {!isSidebarCollapsed && <span class="text-xl font-bold">MES System</span>}
+            </div>
+            <button onClick={() => setIsSidebarCollapsed(!isSidebarCollapsed)} class="hover:text-blue-200">
+              <i class="fas fa-bars"></i>
+            </button>
+          </div>
+          <nav class="p-4 flex-1 overflow-y-auto">
+            <div class="mb-6">
+              <p class="uppercase text-xs font-semibold text-blue-300 mb-2">Основное</p>
+              <button onClick={() => setActiveTab("dashboard")} class={`flex items-center py-2 px-3 rounded-lg w-full text-left ${activeTab === "dashboard" ? "bg-blue-700" : "hover:bg-blue-700"} mb-2`}>
+                <i class="fas fa-tachometer-alt mr-3"></i>
+                {!isSidebarCollapsed && <span>Главная</span>}
+              </button>
+              <button onClick={() => setActiveTab("schedule")} class={`flex items-center py-2 px-3 rounded-lg w-full text-left ${activeTab === "schedule" ? "bg-blue-700" : "hover:bg-blue-700"} mb-2`}>
+                <i class="fas fa-calendar-alt mr-3"></i>
+                {!isSidebarCollapsed && <span>График ТО</span>}
+              </button>
+              <button onClick={() => setActiveTab("equipment")} class={`flex items-center py-2 px-3 rounded-lg w-full text-left ${activeTab === "equipment" ? "bg-blue-700" : "hover:bg-blue-700"} mb-2`}>
+                <i class="fas fa-tools mr-3"></i>
+                {!isSidebarCollapsed && <span>Оборудование</span>}
+              </button>
+            </div>
+            <div class="mb-6">
+              <p class="uppercase text-xs font-semibold text-blue-300 mb-2">Настройки</p>
+              <button onClick={() => setActiveTab("users")} class={`flex items-center py-2 px-3 rounded-lg w-full text-left ${activeTab === "users" ? "bg-blue-700" : "hover:bg-blue-700"} mb-2`}>
+                <i class="fas fa-users-cog mr-3"></i>
+                {!isSidebarCollapsed && <span>Пользователи</span>}
+              </button>
+            </div>
+          </nav>
+          <div class="p-4 border-t border-blue-700 flex items-center">
+            <img src="https://placehold.co/40x40?text=User " alt="User" class="w-10 h-10 rounded-full mr-3"/>
+            {!isSidebarCollapsed && (
+              <div>
+                <p class="font-medium">Иван Петров</p>
+                <p class="text-xs text-blue-300">Администратор</p>
+              </div>
+            )}
+          </div>
+        </div>
+        {/* Main Content */}
+        <div class="main-content flex-1 overflow-auto">
+          <header class="bg-white shadow-sm py-4 px-6 flex justify-between items-center">
+            <h1 class="text-2xl font-bold text-gray-800">
+              {activeTab === "dashboard" && "Главная панель"}
+              {activeTab === "schedule" && "График ТО"}
+              {activeTab === "equipment" && "Оборудование"}
+              {activeTab === "users" && "Пользователи"}
+            </h1>
+            <div class="flex items-center space-x-4">
+              <button class="p-2 rounded-full hover:bg-gray-100 relative">
+                <i class="fas fa-bell text-gray-600"></i>
+                <span class="notification-badge bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center absolute top-0 right-0">5</span>
+              </button>
+              <div class="relative">
+                <input type="text" placeholder="Поиск..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"/>
+                <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
+              </div>
+            </div>
+          </header>
+          <div class="p-6">
+            {renderContent()}
+          </div>
+        </div>
+      </div>
+    );
+  }
+  root.render(<App />);
+</script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Karmashek/bad1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt ADDED Viewed

File without changes