diff --git a/blog/index.py b/blog/index.py index 909352a..16bea3d 100644 --- a/blog/index.py +++ b/blog/index.py @@ -17,9 +17,9 @@ # Полирование проекта # todo + Сделать настройки: -# 1) - Выключатель цветных рамочек +# 1) + Выключатель цветных рамочек # 2) - Тёмная-светлая тема -# 3) - Включение мемного режима ;) +# 3) + Включение мемного режима ;) # 4) + Отключение всех стилей # Завершение проекта diff --git a/blog/resources/images/avatar.jpg b/blog/resources/images/avatar.jpg new file mode 100644 index 0000000..dc80509 Binary files /dev/null and b/blog/resources/images/avatar.jpg differ diff --git a/blog/resources/scripts/importance_adapter.js b/blog/resources/scripts/importance_adapter.js index 387d0a8..6867af9 100644 --- a/blog/resources/scripts/importance_adapter.js +++ b/blog/resources/scripts/importance_adapter.js @@ -10,4 +10,15 @@ document.addEventListener('DOMContentLoaded', function () { // Устанавливаем значение data-importance атрибута для div в соответствии с выбранным значением в select articleContainer.setAttribute('data-importance', importanceSelect.value); }); + + // Получаем элемент первого тогла с id 'firstToggle' + var framingToggle = document.getElementById('framing'); + + // Проверяем наличие первого тогла + if (framingToggle) { + // Включаем первый тогл + framingToggle.checked = false; + // Блокируем возможность переключения первого тогла + framingToggle.disabled = true; + } }); diff --git a/blog/resources/scripts/settings.js b/blog/resources/scripts/settings.js index 1ba1501..914e761 100644 --- a/blog/resources/scripts/settings.js +++ b/blog/resources/scripts/settings.js @@ -31,10 +31,10 @@ function applySettings() { // Создаем объект с соответствиями идентификаторов и функций var toggleFunctions = { - 'option1': applyFrames, - 'option2': applyThemes, - 'option3': applyMemes, - 'option4': applyStyles + 'styling': applyStyles, + 'meming': applyMemes, + 'theming': applyThemes, + 'framing': applyFrames }; // Проходимся по каждому тоглу и вызываем соответствующую функцию @@ -48,28 +48,57 @@ function applySettings() { }); } -function saveSettings(toggleId) { - // Сохраняем текущее состояние тогла в localStorage - var userSettings = JSON.parse(localStorage.getItem('userSettings')) || {}; - userSettings[toggleId.id] = toggleId.checked; - localStorage.setItem('userSettings', JSON.stringify(userSettings)); +function styling(toggleId) { + // Включение/выключение всех стилей + applyStyles(toggleId.checked); + + saveSettings(toggleId) } -function framing(toggleId) { - // Включение/выключение цвета у рамочек - console.log('Выполняем логику для Option 1. Состояние: ' + toggleId.checked); - applyFrames(toggleId.checked); +function applyStyles(isChecked) { + // Получаем все теги link с подключенными стилями + var styleLinks = document.querySelectorAll('link[rel="stylesheet"]'); + + // Включаем/выключаем стили, удаляя или добавляя элементы + styleLinks.forEach(function (link) { + link.disabled = !isChecked; + }); +} + +function meming(toggleId) { + // Включение/выключение мемного режима + applyMemes(toggleId.checked); saveSettings(toggleId) } -function applyFrames(isChecked) { - // Пока не готово +function applyMemes(isChecked) { + // + var memeArticle = document.querySelectorAll('.article-container'); + // Получаем все теги, содержащие атрибут meme и not-meme + var memeElements = document.querySelectorAll('[meme]'); + var notMemeElements = document.querySelectorAll('[not-meme]'); + + memeArticle.forEach(function (element) { + if (isChecked){ + element.setAttribute('meme-article', ''); + } else { + element.removeAttribute('meme-article'); + } + }); + + // Включаем/выключаем отображение элементов с атрибутом meme + memeElements.forEach(function (element) { + element.style.display = isChecked ? 'block' : 'none'; + }); + + notMemeElements.forEach(function (element) { + element.style.display = isChecked ? 'none' : 'block'; + }); } function theming(toggleId) { // Переключение светлой-тёмной темы - console.log('Выполняем логику для Option 2. Состояние: ' + toggleId.checked); applyThemes(toggleId.checked); saveSettings(toggleId) @@ -79,31 +108,30 @@ function applyThemes(isChecked) { // Пока не готово } -function meming(toggleId) { - // Включение/выключение мемного режима - console.log('Выполняем логику для Option 3. Состояние: ' + toggleId.checked); - applyMemes(toggleId.checked); +function framing(toggleId) { + // Включение/выключение цвета у рамочек + applyFrames(toggleId.checked); saveSettings(toggleId) } -function applyMemes(isChecked) { - // Пока не готово -} - -function styling(toggleId) { - // Включение/выключение всех стилей - console.log('Выполняем логику для Option 4. Состояние: ' + toggleId.checked); - applyStyles(toggleId.checked); - - saveSettings(toggleId) +function applyFrames(isChecked) { + var articleContainers = document.querySelectorAll('.article-container'); + + articleContainers.forEach(function (container) { + if (isChecked) { + container.setAttribute('temp-data-importance', container.getAttribute('data-importance') || 'Normal'); + container.setAttribute('data-importance', 'Normal'); + } else { + container.setAttribute('data-importance', container.getAttribute('temp-data-importance') || container.getAttribute('data-importance')); + container.removeAttribute('temp-data-importance'); + } + }); } -function applyStyles(isChecked) { - // Получаем все теги link с подключенными стилями - var styleLinks = document.querySelectorAll('link[rel="stylesheet"]'); - // Включаем/выключаем стили, удаляя или добавляя элементы - styleLinks.forEach(function (link) { - link.disabled = !isChecked; - }); +function saveSettings(toggleId) { + // Сохраняем текущее состояние тогла в localStorage + var userSettings = JSON.parse(localStorage.getItem('userSettings')) || {}; + userSettings[toggleId.id] = toggleId.checked; + localStorage.setItem('userSettings', JSON.stringify(userSettings)); } diff --git a/blog/resources/style/base.css b/blog/resources/style/base.css index aca9d05..b426eee 100644 --- a/blog/resources/style/base.css +++ b/blog/resources/style/base.css @@ -11,9 +11,28 @@ body { header { background-color: #333; - color: #fff; - text-align: center; - padding: 1em; + color: #fff; + text-align: center; + padding: 1em; + position: relative; /* Установка относительной позиции */ +} +.avatar-container { + width: 150px; /* Размер кружка */ + height: 150px; + overflow: hidden; /* Обрезать изображение, чтобы оно не выходило за границы кружка */ + border-radius: 50%; /* Создание кружка */ + position: absolute; /* Абсолютное позиционирование */ + left: 1em; /* Размещение слева от родительского элемента */ + top: 50%; /* Размещение по вертикали в центре родительского элемента */ + transform: translateY(-50%); /* Коррекция вертикального выравнивания */ +} +.avatar-container img { + width: 100%; /* Заполнить весь кружок изображением */ + height: auto; + border-radius: 50%; /* Поддержание круглой формы */ +} +.header-text { + flex-grow: 1; /* Растягивание текстового блока на всю доступную ширину */ } #mainNav { @@ -69,7 +88,6 @@ footer { background-color: #333; color: #fff; } - .footer-container { display: flex; justify-content: space-between; diff --git a/blog/resources/style/form.css b/blog/resources/style/form.css index 4d97151..65fd38e 100644 --- a/blog/resources/style/form.css +++ b/blog/resources/style/form.css @@ -12,7 +12,6 @@ textarea, input[type="file"], select, input[type="datetime-local"], -.toggle-wrapper, input[type="submit"] { width: 100%; padding: 10px; diff --git a/blog/resources/style/frame.css b/blog/resources/style/frame.css index bc01702..814b34f 100644 --- a/blog/resources/style/frame.css +++ b/blog/resources/style/frame.css @@ -69,42 +69,26 @@ } /*Пасхалочка в анимации*/ -/* -.article-container { - position: relative; - overflow: hidden; - border-radius: 8px; - padding: 6px; - margin-bottom: 20px; - z-index: 0; -} -.article-container:last-child { - margin-bottom: 0; -} -.article-container::after { - content:''; - position: absolute; - z-index: -1; - top: -.125em; - left: -.125em; + +.article-container[meme-article]::after { width: calc(100% + .25em); height: calc(100% + .25em); - border-radius: .25em; + background-size: 100%; animation: rotateColors 10s linear infinite; } -.article-container[data-importance="Normal"]::after { +.article-container[meme-article][data-importance="Normal"]::after { background-image: conic-gradient(from 0deg, #999999, #e0e0e0); } -.article-container[data-importance="Rare"]::after { +.article-container[meme-article][data-importance="Rare"]::after { background-image: conic-gradient(from 0deg, #5ab8ff, #c9eaff); } -.article-container[data-importance="Elite"]::after { +.article-container[meme-article][data-importance="Elite"]::after { background-image: conic-gradient(from 0deg, #8c6ff0, #ebd2ff); } -.article-container[data-importance="Super Rare"]::after { +.article-container[meme-article][data-importance="Super Rare"]::after { background-image: conic-gradient(from 0deg, #d9ca66, #f6f3b7); } -.article-container[data-importance="Ultra Rare"]::after { +.article-container[meme-article][data-importance="Ultra Rare"]::after { background-image: conic-gradient(from 0deg, #faffca, #baffc0, #a9f1f8, #d3cdff, #feacff); } @keyframes rotateColors { @@ -112,4 +96,3 @@ transform: rotate(1turn); } } -*/ diff --git a/blog/template/base.html b/blog/template/base.html index f9633b1..08fca31 100644 --- a/blog/template/base.html +++ b/blog/template/base.html @@ -19,11 +19,16 @@
-

Калиновський Валентин

-

Мій Особистий Блог

- {% if is_admin %} -

Привіт, Вальок!

- {% endif %} +
+ Аватарка +
+
+

Калиновський Валентин

+

Мій Особистий Блог

+ {% if is_admin %} +

Привіт, Вальок!

+ {% endif %} +
-
- +
+ + +
- - + +
- - + +
-
- - -
-
- - +
+ +
@@ -83,7 +86,7 @@

Мій Особистий Блог

© 2023-2024 Калиновський Валентин

Студент-програміст

-

23 роки, холостий

+

23 роки, холостий

3 роки стажу програмування

Static Badge diff --git a/blog/template/index.html b/blog/template/index.html index 2ab901d..edc7d7a 100644 --- a/blog/template/index.html +++ b/blog/template/index.html @@ -14,8 +14,11 @@

Про себе

-

- Моя фотография +

+ Моя фотография +

+

+ Аватарка

Мене звати Калиновський Валентин, але мої друзі звуть мене просто Валік. Розкажу трохи про себе.

Народився я 2001 року. Познайомився з комп'ютером у 5 років, з 10 років почав самостійно вивчати комп'ютерну грамотність (інтернету тоді ще не було, а в маленькому місті в ньому не було потреби, тому мені довелося вчитися на своїх помилках). Python став моєю першою мовою. Я почав вивчати його ще в січні 2018 року під час зимових канікул, але далеко не зайшов (не міг багато навчатися), а потім повернувся в училище і був змушений закинути його на наступні півтора року. У 2020 році я вступив до ЦНТУ (Центральноукраїнського Національного Технічного Університету) на спеціальність Комп'ютерна інженерія. На даний момент я активно вивчаю C++, Python і фреймворк Qt.