5

У меня есть этот вопрос, по нему объявлен конкурс.
У меня есть анимация созданная в PowerPoint которая визуализирует алгоритм моего решения.

Я хочу в ответе добавить табличку:

  • в левом столбце — описание алгоритма;
  • в правом анимация алгоритма.

Я недавно увидела как выглядит «Stack Snippets».

Я изучаю python, иногда касаешься html и css, но я пока испытываю трудности в этом.

Я нашла два варианта решения задачи (добавила само-ответ).
В вопросе оставлю только то, что не получилось решить.

Проблема с разрешениями, которые устанавливаются iframe в котором запускается «Stack Snippets» - сейчас запрещено использовать localstorage внутри snippet(a)

Snippet с html таблицей:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Динамическая тема</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        /* Стили для светлой темы */
        .light-theme {
            background-color: #ffffff; /* белый фон */
            color: #000000; /* черный текст */
        }

        .light-theme table {
            background-color: #ffffff; /* белый фон для таблицы */
        }

        .light-theme th {
            background-color: #f2f2f2; /* светлый фон для заголовков */
        }

        /* Стили для темной темы */
        .dark-theme {
            background-color: #2e2e2e; /* темно-серый фон */
            color: #ffffff; /* белый текст */
        }

        .dark-theme table {
            background-color: #2e2e2e; /* темно-серый фон для таблицы */
        }

        .dark-theme th {
            background-color: #3e3e3e; /* более светлый фон для заголовков */
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        th, td {
            border: 1px solid rgba(0, 0, 0, 0.1); /* едва заметные линии */
            padding: 10px;
            text-align: left;
        }
    </style>
</head>
<body>

<div id="theme-container" class="light-theme">
    <table>
        <tr>
            <th>Описание алгоритма</th>
            <th>Анимация</th>
        </tr>
        <tr>
            <td>
                <p>1. Первый ключ и значение к нему я ...</p>
                <ul>
                    <li>Первый пункт</li>
                    <li>Второй пункт</li>
                    <li>Третий пункт</li>
                </ul>
                <blockquote>
                    <p>Это цитата, связанная с алгоритмом.</p>
                </blockquote>
            </td>
            <td>
                <a href="https://i.sstatic.net/fzKnqDK6.gif" target="_blank">
                    <img src="https://i.sstatic.net/fzKnqDK6.gif" alt="Анимация" style="max-width:100%;">
                </a>
            </td>
        </tr>
    </table>
</div>

<script>
    function setTheme(theme) {
        const themeContainer = document.getElementById('theme-container');
        if (theme === 'dark') {
            themeContainer.classList.remove('light-theme');
            themeContainer.classList.add('dark-theme');
        } else {
            themeContainer.classList.remove('dark-theme');
            themeContainer.classList.add('light-theme');
        }
    }

    // Проверяем сохраненную тему, если нет, определяем по системным настройкам
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
        setTheme(savedTheme);
    } else {
        const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
        setTheme(darkModeMediaQuery.matches ? 'dark' : 'light');
    }

    // Слушаем изменения темы пользователя
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
        const newTheme = e.matches ? 'dark' : 'light';
        setTheme(newTheme);
        localStorage.setItem('theme', newTheme);
    });
</script>

</body>
</html>

Пытаюсь динамически устанавливать цветовую тему в соответствии с настройками пользователя...

Но, я как раз использую localstorage и получаю такую ошибку:

Error: {
  "message": "Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag.",
  "filename": "https://stacksnippets.net/js",
  "lineno": 105,
  "colno": 24
}

Вопросы:

  1. Как определять цветовую тему при рендеринге без localstorage?
  2. Можно ли динамически подстраивать тему после рендеринга?
3
  • Комментарии были перемещены в чат; пожалуйста, не продолжайте дискуссию здесь. Прежде чем разместить комментарий ниже этого, пожалуйста, ознакомьтесь с назначением комментариев. Комментарии, которые не запрашивают уточнения или не предлагают улучшения, скорее всего должны быть ответами, размещены на [meta] или написаны в Чат Stack Overflow на русском. Комментарии, продолжающие дискуссию, могут быть удалены.
    – Grundy Мод
    Commented 8 авг. в 16:49
  • 1
    prefers-color-scheme смотрели? Commented 13 авг. в 11:39
  • @OliverPatterson Здравствуйте! Нет, сейчас изучу, спасибо! Commented 13 авг. в 11:42

1 ответ 1

4

Markdown + HTML (Встраиваемый HTML)

Тут есть нюанс, если этот код:

<p><h3>Описание этапов:</h3></p>

<dl>
  <dt><h5>Первый ключ и значение к нему я ...</h5></dt>
  <dd>Тут описываю логику...</dd>

  <dt><h5>Второй ключ ...</h5></dt>
  <dd>Тут описываю логику...</dd>

  <dt><h5>третий ключ ...</h5></dt>
  <dd>Тут описываю логику...</dd>
</dl>

просто вставить в ячейку таблицы Markdownтаблица сломается...

Решается это просто, удаляем \n, \t и пробелов между html-тегами
(одной строкой весь html код вставляем в ячейку).

Описание алгоритма Анимация

Этапы:


Первый ключ и значение к нему я ...
Тут описываю логику... много букв... много букв... много букв... много букв... много букв... много букв...

Второй ключ ...
Тут описываю логику... много букв... много букв... много букв... много букв... много букв... много букв...

Третий ключ ...
Тут описываю логику... много букв... много букв... много букв... много букв... много букв... много букв...

Четвёртый ключ ...
Тут описываю логику... много букв... много букв... много букв... много букв... много букв... много букв...
введите сюда описание изображения

Поддерживается только ограниченное подмножество HTML !



«Stack Snippets» — HTML + CSS + JavaScript

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Динамическая тема</title>
  <style>
    /* Стили для светлой темы */
    
    .light-theme {
      background-color: #ffffff;
      /* белый фон */
      color: #000000;
      /* черный текст */
    }
    
    .light-theme table {
      background-color: #ffffff;
      /* белый фон для таблицы */
    }
    
    .light-theme th {
      background-color: #f2f2f2;
      /* светлый фон для заголовков */
    }
    
    .light-theme button {
      background-color: #f2f2f2;
      /* светлый фон цвет кнопки */
      color: #000000;
      /* чёрный текст кнопки */
    }
    /* Стили для темной темы */
    
    .dark-theme {
      background-color: #252627;
      /* темно-серый фон */
      color: #ffffff;
      /* белый текст */
    }
    
    .dark-theme table {
      background-color: #252627;
      /* темно-серый фон для таблицы */
    }
    
    .dark-theme th {
      background-color: #2d2e2f;
      /* более светлый фон для заголовков */
    }
    
    .dark-theme button {
      background-color: #2d2e2f;
      /* более светлый фон кнопки */
      color: white;
      /* белый текст кнопки */
    }
    
    table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;
    }
    
    th,
    td {
      border: 1px solid rgba(0, 0, 0, 0.1);
      /* едва заметные линии */
      padding: 10px;
      text-align: left;
    }
  </style>
</head>

<body>
  <div id="theme-container" class="light-theme">
    <table>
      <tr>
        <th>Описание алгоритма</th>
        <th>Анимация</th>
      </tr>
      <tr>
        <td>
          <p>Этапы:</p>
          <ul>
            <li>Первый ...</li>
            <p>Тут описываю логику... много букв...</p>
            <li>Второй ...</li>
            <p>Тут описываю логику... много букв...</p>
            <li>Третий ...</li>
            <p>Тут описываю логику... много букв...</p>
            <li>Четвёртый ...</li>
            <p>Тут описываю логику... много букв...</p>
          </ul>
          <blockquote>
            <p>Это цитата, связанная с алгоритмом.</p>
          </blockquote>
        </td>
        <td>
          <a href="https://i.sstatic.net/fzKnqDK6.gif" target="_blank">
            <img src="https://i.sstatic.net/fzKnqDK6.gif" alt="Анимация" style="max-width:100%;">
          </a>
        </td>
      </tr>
    </table>
  </div>
  <button onclick="toggleTheme()">Сменить тему</button>
  <script>
    function toggleTheme() {
      const container = document.getElementById('theme-container');
      const button = document.querySelector('button');
      if (container.classList.contains('light-theme')) {
        container.classList.remove('light-theme');
        container.classList.add('dark-theme');
        button.innerText = "Сменить на светлую тему"; // Изменяем текст кнопки
      } else {
        container.classList.remove('dark-theme');
        container.classList.add('light-theme');
        button.innerText = "Сменить на темную тему"; // Изменяем текст кнопки
      }
      // Обновляем фон документа
      document.body.className = container.className; // Устанавливаем класс body
    }
  </script>
</body>

</html>

В этом решении форматирование ограничено только фантазией!

Конечно, надо ещё настроить размер консоли и исправить ошибку в коде вопроса,
чтоб цветовая тема менялась в зависимости от настроек пользователя.
(В этом решении пока сделала по нажатию кнопки.)

Войдите, чтобы ответить на этот вопрос.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками .