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
2025-07-17 16:29:34 +05:00
parent a5f7810d0c
commit 1812b2a8af
5 changed files with 99 additions and 2 deletions
@@ -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);
+}
@@ -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') ? '☀️ Светлая тема' : '🌙 Темная тема';
+}
@@ -5,7 +5,8 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <script src="scripts.js"></script>
-    <title>Валитов Газиз - Fullstack разработчик</title>
+    <script src="darkThemeToggle.js"></script>
+    <title>ValitovGaziz</title>
  </head>
  <body>
    <!-- Yandex.Metrika counter -->
@@ -65,6 +66,9 @@
      <button id="saveContactBtn" onclick="saveContact()">
        Скачать контакты
      </button>
+      <button class="theme-toggle" onclick="toggleTheme()">
+        🌙 Темная тема
+      </button>
    </header>

    <div class="section">
@@ -31,4 +31,4 @@ END:VCARD`;

    // Освобождаем память
    URL.revokeObjectURL(url);
-}
+}
@@ -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;
  }
 }