Added new settings:

1. Removed toggle from the form style (bug fixed) 2. Implemented a color switch for frames 3. Now on the pages of creating/editing a post/dream you cannot turn off the color of the frames 4. Added an avatar to the header 5. Implemented a meme mode switch 6. Returned broken frames in meme mode 7. Fixed the order of the toggles
Nakama3942 · Jan 7, 2024 · a5b1dfb · a5b1dfb
1 parent d8e4b0a
commit a5b1dfb
Show file tree

Hide file tree

Showing 9 changed files with 135 additions and 90 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -69,47 +69,30 @@
 }
 
 /*Пасхалочка в анимации*/
-/*
-.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 {
 	to {
 		transform: rotate(1turn);
 	}
 }
-*/
diff --git a/blog/template/base.html b/blog/template/base.html
@@ -19,11 +19,16 @@
 	</head>
 	<body>
 		<header>
-			<h1>Калиновський Валентин</h1>
-			<h2>Мій Особистий Блог</h2>
-			{% if is_admin %}
-				<p>Привіт, Вальок!</p>
-			{% endif %}
+			<div class="avatar-container">
+				<img src="/resources/images/avatar.jpg" alt="Аватарка">
+			</div>
+			<div class="header-text">
+				<h1>Калиновський Валентин</h1>
+				<h2>Мій Особистий Блог</h2>
+				{% if is_admin %}
+					<p>Привіт, Вальок!</p>
+				{% endif %}
+			</div>
 		</header>
 
 		<nav id="mainNav">
@@ -55,24 +60,22 @@ <h2>Мій Особистий Блог</h2>
 			</div>
 		</nav>
 
-		<!-- Переключатели в правом верхнем углу -->
 		<div class="settings-panel">
-			<!-- Здесь будут ваши переключатели или другие настройки -->
+			<div class="toggle-wrapper" toggle-color="rgba(170, 0, 0, 0.8)">
+				<input type="checkbox" class="toggle" id="styling" name="private" onclick="styling(this)">
+				<label for="styling" class="toggle-icon">😱 🧐</label>
+			</div>
 			<div class="toggle-wrapper" toggle-color="rgba(255, 85, 0, 0.8)">
-				<input type="checkbox" class="toggle" id="option1" name="private" onclick="framing(this)">
-				<label for="option1" class="toggle-icon">🎨 ☁️</label>
+				<input type="checkbox" class="toggle" id="meming" name="private" onclick="meming(this)">
+				<label for="meming" class="toggle-icon">🥱 😁</label>
 			</div>
 			<div class="toggle-wrapper" toggle-color="rgba(0, 170, 0, 0.8)">
-				<input type="checkbox" class="toggle" id="option2" name="private" onclick="theming(this)">
-				<label for="option2" class="toggle-icon">☀️ 🌙</label>
+				<input type="checkbox" class="toggle" id="theming" name="private" onclick="theming(this)">
+				<label for="theming" class="toggle-icon">☀️ 🌙</label>
 			</div>
-			<div class="toggle-wrapper" toggle-color="rgba(170, 0, 0, 0.8)">
-				<input type="checkbox" class="toggle" id="option3" name="private" onclick="meming(this)">
-				<label for="option3" class="toggle-icon">😁 🥱</label>
-			</div>
-			<div class="toggle-wrapper" toggle-color="rgba(0, 0, 170, 0.8)">
-				<input type="checkbox" class="toggle" id="option4" name="private" onclick="styling(this)">
-				<label for="option4" class="toggle-icon">😱 🧐</label>
+			<div class="toggle-wrapper" toggle-color="rgba(0, 170, 0, 0.8)">
+				<input type="checkbox" class="toggle" id="framing" name="private" onclick="framing(this)">
+				<label for="framing" class="toggle-icon">🎨 ☁️</label>
 			</div>
 		</div>
 
@@ -83,7 +86,7 @@ <h2>Мій Особистий Блог</h2>
 				<div class="column-left">
 					<h3>&copy; 2023-2024 Калиновський Валентин</h3>
 					<p>Студент-програміст</p>
-					<p>23 роки, холостий</p>
+					<p meme>23 роки, холостий</p>
 					<p>3 роки стажу програмування</p>
 					<p>
 						<img alt="Static Badge" src="https://img.shields.io/badge/Gmail-nakama3942?style=for-the-badge&logo=gmail&label=nakama3942%40gmail.com&color=202020">

diff --git a/blog/template/index.html b/blog/template/index.html
@@ -14,8 +14,11 @@
 		<div class="article-container" data-importance="Ultra Rare">
 			<article class="biography">
 				<h1 class="title">Про себе</h1>
-				<p class="foto">
-					<img src="/resources/images/Me.jpg" alt="Моя фотография" width="300px">
+				<p class="foto" not-meme>
+					<img src="/resources/images/me.jpg" alt="Моя фотография" width="300px">
+				</p>
+				<p class="foto" meme>
+					<img src="/resources/images/test.png" alt="Аватарка" width="300px">
 				</p>
 				<p>Мене звати Калиновський Валентин, але мої друзі звуть мене просто Валік. Розкажу трохи про себе.</p>
 				<p>Народився я 2001 року. Познайомився з комп'ютером у 5 років, з 10 років почав самостійно вивчати комп'ютерну грамотність (інтернету тоді ще не було, а в маленькому місті в ньому не було потреби, тому мені довелося вчитися на своїх помилках). Python став моєю першою мовою. Я почав вивчати його ще в січні 2018 року під час зимових канікул, але далеко не зайшов (не міг багато навчатися), а потім повернувся в училище і був змушений закинути його на наступні півтора року. У 2020 році я вступив до ЦНТУ (Центральноукраїнського Національного Технічного Університету) на спеціальність <i>Комп'ютерна інженерія</i>. На даний момент я активно вивчаю C++, Python і фреймворк Qt.</p>