From 1812b2a8af03f544d7f6447767d927b35ff9a94f Mon Sep 17 00:00:00 2001 From: valitovgaziz Date: Thu, 17 Jul 2025 16:29:34 +0500 Subject: [PATCH] new file: valitovgaziz/html/darkTheme.css new file: valitovgaziz/html/darkThemeToggle.js modified: valitovgaziz/html/index.html modified: valitovgaziz/html/scripts.js modified: valitovgaziz/html/style.css Add the dark theme into valitovgaziz site --- valitovgaziz/html/darkTheme.css | 56 ++++++++++++++++++++++++++++ valitovgaziz/html/darkThemeToggle.js | 5 +++ valitovgaziz/html/index.html | 6 ++- valitovgaziz/html/scripts.js | 2 +- valitovgaziz/html/style.css | 32 ++++++++++++++++ 5 files changed, 99 insertions(+), 2 deletions(-) create mode 100644 valitovgaziz/html/darkTheme.css create mode 100644 valitovgaziz/html/darkThemeToggle.js diff --git a/valitovgaziz/html/darkTheme.css b/valitovgaziz/html/darkTheme.css new file mode 100644 index 0000000..4631d8e --- /dev/null +++ b/valitovgaziz/html/darkTheme.css @@ -0,0 +1,56 @@ +/* Переменные для темной темы */ +:root { + --dark-bg: #1a252f; + --dark-text: #ecf0f1; + --dark-card: #2c3e50; + --dark-border: #34495e; +} + +/* Кнопка переключения темы */ +header { + position: relative; +} + +.theme-toggle { + position: absolute; + top: 10px; + right: 10px; + padding: 8px 12px; + background: var(--secondary); + color: white; + border: none; + border-radius: 6px; + cursor: pointer; + font-size: 14px; +} + +/* Стили для темной темы */ +body.dark-mode { + background-color: var(--dark-bg); + color: var(--dark-text); +} + +body.dark-mode header { + background-color: var(--dark-bg); + color: var(--dark-text); +} + +body.dark-mode .section { + background: var(--dark-card); + color: var(--dark-text); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); + border: 1px solid var(--dark-border); +} + +body.dark-mode .contact-info a { + color: var(--secondary); +} + +body.dark-mode .skill-tag { + background-color: var(--dark-border); + color: var(--dark-text); +} + +body.dark-mode footer { + color: var(--dark-text); +} \ No newline at end of file diff --git a/valitovgaziz/html/darkThemeToggle.js b/valitovgaziz/html/darkThemeToggle.js new file mode 100644 index 0000000..97a1bd6 --- /dev/null +++ b/valitovgaziz/html/darkThemeToggle.js @@ -0,0 +1,5 @@ +function toggleTheme() { + document.body.classList.toggle('dark-mode'); + const btn = document.querySelector('.theme-toggle'); + btn.textContent = document.body.classList.contains('dark-mode') ? '☀️ Светлая тема' : '🌙 Темная тема'; +} \ No newline at end of file diff --git a/valitovgaziz/html/index.html b/valitovgaziz/html/index.html index c895305..7b01864 100644 --- a/valitovgaziz/html/index.html +++ b/valitovgaziz/html/index.html @@ -5,7 +5,8 @@ - Валитов Газиз - Fullstack разработчик + + ValitovGaziz @@ -65,6 +66,9 @@ +
diff --git a/valitovgaziz/html/scripts.js b/valitovgaziz/html/scripts.js index 86e3612..a986b6d 100644 --- a/valitovgaziz/html/scripts.js +++ b/valitovgaziz/html/scripts.js @@ -31,4 +31,4 @@ END:VCARD`; // Освобождаем память URL.revokeObjectURL(url); -} \ No newline at end of file +} diff --git a/valitovgaziz/html/style.css b/valitovgaziz/html/style.css index 0e4d662..849cfd5 100644 --- a/valitovgaziz/html/style.css +++ b/valitovgaziz/html/style.css @@ -1,4 +1,5 @@ @import url("saveContactsButtonStyle.css"); +@import url("darkTheme.css"); :root { --primary: #2c3e50; @@ -112,10 +113,41 @@ footer { color: var(--dark); font-size: 0.9rem; } +/* Адаптация для мелких экранов */ @media (max-width: 768px) { + header { + padding: 1rem 0; + font-size: 1.2rem; + } + .contact-info { flex-direction: column; align-items: center; gap: 0.5rem; + font-size: 0.9rem; + } + + .section { + padding: 1.5rem; + } + + .timeline { + padding-left: 20px; /* Уменьшаем отступ для линии времени */ + } + + .timeline:before { + left: 8px; /* Сдвигаем линию ближе к краю */ + } + + .timeline-item:before { + left: -20px; /* Сдвигаем маркер времени */ + } + + .skill-tag { + font-size: 0.8rem; + } + + footer { + font-size: 0.8rem; } }