У меня есть этот вопрос, по нему объявлен конкурс.
У меня есть анимация созданная в 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
}
Вопросы:
- Как определять цветовую тему при рендеринге без
localstorage
? - Можно ли динамически подстраивать тему после рендеринга?