Spaces:

Felguk
/

Choooser

Running

App Files Files Community

Felguk commited on 15 days ago

Commit

9f89279

verified ·

1 Parent(s): 8093246

Update index.html

Browse files

Files changed (1) hide show

index.html +336 -19

index.html CHANGED Viewed

@@ -1,19 +1,336 @@
-<!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="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Choose a Site</title>
+  <style>
+    /* Основные стили */
+    :root {
+      --background-light: #ffffff;
+      --background-dark: #000000;
+      --text-light: #111827;
+      --text-dark: #f3f4f6;
+      --primary-color: #000000;
+      --primary-hover: #333333;
+      --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      --border-radius: 8px;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+      background-color: var(--background-light);
+      color: var(--text-light);
+      margin: 0;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+      transition: background 0.3s ease, color 0.3s ease;
+    }
+    body.dark-mode {
+      background-color: var(--background-dark);
+      color: var(--text-dark);
+    }
+    .sites-list {
+      margin-top: 24px;
+      background: white;
+      padding: 20px;
+      border-radius: var(--border-radius);
+      box-shadow: var(--shadow);
+      width: 100%;
+      max-width: 500px;
+      transition: background 0.3s ease, transform 0.3s ease;
+    }
+    body.dark-mode .sites-list {
+      background: #111111;
+    }
+    .sites-list h3 {
+      margin: 0 0 16px 0;
+      font-size: 18px;
+      font-weight: 600;
+      color: inherit;
+    }
+    #sitesList {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    #sitesList div {
+      background: #f3f4f6;
+      padding: 12px;
+      border-radius: var(--border-radius);
+      font-size: 14px;
+      color: inherit;
+      transition: background 0.3s ease, transform 0.2s ease;
+      cursor: pointer;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    body.dark-mode #sitesList div {
+      background: #1a1a1a;
+    }
+    #sitesList div:hover {
+      background: #e5e7eb;
+      transform: translateX(5px);
+    }
+    body.dark-mode #sitesList div:hover {
+      background: #2d2d2d;
+    }
+    .loader {
+      border: 4px solid #f3f3f3;
+      border-top: 4px solid var(--primary-color);
+      border-radius: 50%;
+      width: 30px;
+      height: 30px;
+      animation: spin 1s linear infinite;
+      display: none;
+      margin: 20px auto;
+    }
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+    .theme-toggle {
+      position: fixed;
+      top: 20px;
+      right: 20px;
+      background: var(--primary-color);
+      color: white;
+      border: none;
+      padding: 10px 15px;
+      border-radius: var(--border-radius);
+      cursor: pointer;
+      transition: background 0.3s ease, transform 0.2s ease;
+    }
+    .theme-toggle:hover {
+      background: var(--primary-hover);
+      transform: scale(1.1);
+    }
+    .exit-button {
+      position: fixed;
+      top: 20px;
+      left: 20px;
+      background: var(--primary-color);
+      color: white;
+      border: none;
+      padding: 10px 15px;
+      border-radius: var(--border-radius);
+      cursor: pointer;
+      transition: background 0.3s ease, transform 0.2s ease;
+      display: none; /* Скрыта по умолчанию */
+    }
+    .exit-button:hover {
+      background: var(--primary-hover);
+      transform: scale(1.1);
+    }
+    .translate-button {
+      position: fixed;
+      top: 60px;
+      left: 20px;
+      background: var(--primary-color);
+      color: white;
+      border: none;
+      padding: 10px 15px;
+      border-radius: var(--border-radius);
+      cursor: pointer;
+      transition: background 0.3s ease, transform 0.2s ease;
+      display: none; /* Скрыта по умолчанию */
+    }
+    .translate-button:hover {
+      background: var(--primary-hover);
+      transform: scale(1.1);
+    }
+    .pagination {
+      display: flex;
+      justify-content: center;
+      gap: 10px;
+      margin-top: 20px;
+    }
+    .pagination button {
+      background: var(--primary-color);
+      color: white;
+      border: none;
+      padding: 8px 12px;
+      border-radius: var(--border-radius);
+      cursor: pointer;
+      transition: background 0.3s ease, transform 0.2s ease;
+    }
+    .pagination button:hover {
+      background: var(--primary-hover);
+      transform: scale(1.1);
+    }
+    .pagination button:disabled {
+      background: #cccccc;
+      cursor: not-allowed;
+    }
+    /* Анимация появления */
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(-10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .sites-list, .theme-toggle, .exit-button, .translate-button, .pagination {
+      animation: fadeIn 0.5s ease-out;
+    }
+  </style>
+</head>
+<body>
+  <button class="theme-toggle" onclick="toggleTheme()">🌙</button>
+  <button class="exit-button" onclick="exitSite()">Exit</button>
+  <button class="translate-button" onclick="toggleLanguage()">Перевести на русский</button>
+  <div class="sites-list">
+    <h3>Available Sites:</h3>
+    <div id="sitesList"></div>
+    <div class="pagination">
+      <button id="prevPage" disabled>Назад</button>
+      <button id="nextPage">Вперед</button>
+    </div>
+  </div>
+  <!-- Лоадер -->
+  <div class="loader" id="loader"></div>
+  <script>
+    const websims = [
+      "https://fluxai.pro/fast-flux",
+      "https://aivideogenerator.me/ru",
+      "https://airesumebuilder.me/ru",
+      "https://www.ninjaed.com/",
+      "https://essay.art/",
+      "https://deepnostalgia.ai/",
+      "https://aicoloringpages.net/",
+      "https://ailovemusic.net/",
+      "https://onionai.so/",
+      "https://www.yeschat.ai/ru/features/text-to-image-ai",
+      "https://slea.ai/ru",
+      "https://pngmaker.ai/ru",
+      "https://www.ai-portraits.org/ru",
+      "https://remaker.ai/",
+      "https://math.now/ru?utm_source=www.yeschat.ai"
+    ];
+    const itemsPerPage = 6; // Количество сайтов на одной странице
+    let currentPage = 1; // Текущая страница
+    function goToSite(site) {
+      showLoader();
+      setTimeout(() => {
+        window.location.href = site;
+        // Показываем кнопку "Exit" после перехода
+        localStorage.setItem('showExitButton', 'true');
+        // Показываем кнопку перевода, если выбран сайт https://essay.art/
+        if (site === "https://essay.art/") {
+          localStorage.setItem('showTranslateButton', 'true');
+        }
+      }, 1000); // Имитация загрузки
+    }
+    function exitSite() {
+      showLoader();
+      setTimeout(() => {
+        window.location.href = "https://your-main-site.com"; // Замените на URL вашего главного сайта
+      }, 1000); // Имитация загрузки
+    }
+    function toggleLanguage() {
+      const translateButton = document.querySelector('.translate-button');
+      if (translateButton.textContent === "Перевести на русский") {
+        translateButton.textContent = "Translate to English";
+        // Здесь можно добавить логику для перевода страницы
+      } else {
+        translateButton.textContent = "Перевести на русский";
+        // Здесь можно добавить логику для перевода страницы
+      }
+    }
+    function showLoader() {
+      document.getElementById('loader').style.display = 'block';
+    }
+    function toggleTheme() {
+      document.body.classList.toggle('dark-mode');
+      const themeToggle = document.querySelector('.theme-toggle');
+      themeToggle.textContent = document.body.classList.contains('dark-mode') ? '☀️' : '🌙';
+    }
+    // Функция для отображения сайтов на текущей странице
+    function displaySites(page) {
+      const sitesList = document.getElementById('sitesList');
+      sitesList.innerHTML = ''; // Очищаем список
+      const startIndex = (page - 1) * itemsPerPage;
+      const endIndex = startIndex + itemsPerPage;
+      const sitesToShow = websims.slice(startIndex, endIndex);
+      sitesToShow.forEach(site => {
+        const siteElement = document.createElement('div');
+        siteElement.textContent = site;
+        siteElement.addEventListener('click', () => goToSite(site));
+        sitesList.appendChild(siteElement);
+      });
+      // Обновляем состояние кнопок пагинации
+      document.getElementById('prevPage').disabled = page === 1;
+      document.getElementById('nextPage').disabled = endIndex >= websims.length;
+    }
+    // Переход на предыдущую страницу
+    document.getElementById('prevPage').addEventListener('click', () => {
+      if (currentPage > 1) {
+        currentPage--;
+        displaySites(currentPage);
+      }
+    });
+    // Переход на следующую страницу
+    document.getElementById('nextPage').addEventListener('click', () => {
+      if (currentPage * itemsPerPage < websims.length) {
+        currentPage++;
+        displaySites(currentPage);
+      }
+    });
+    // Проверяем, нужно ли показать кнопку "Exit" или "Translate"
+    if (localStorage.getItem('showExitButton') === 'true') {
+      document.querySelector('.exit-button').style.display = 'block';
+      localStorage.removeItem('showExitButton'); // Сбрасываем флаг после показа
+    }
+    if (localStorage.getItem('showTranslateButton') === 'true') {
+      document.querySelector('.translate-button').style.display = 'block';
+      localStorage.removeItem('showTranslateButton'); // Сбрасываем флаг после показа
+    }
+    // Инициализация: отображаем первую страницу
+    displaySites(currentPage);
+  </script>
+</body>
+</html>