modified: main_dc/valitovgaziz/html/darkTheme.css
modified: main_dc/valitovgaziz/html/darkThemeToggle.js modified: main_dc/valitovgaziz/html/index.html add dark theme for valitovgaziz site
This commit is contained in:
@@ -4,6 +4,7 @@
|
||||
--dark-text: #ecf0f1;
|
||||
--dark-card: #2c3e50;
|
||||
--dark-border: #34495e;
|
||||
--dark-secondary: #2980b9;
|
||||
}
|
||||
|
||||
/* Кнопка переключения темы */
|
||||
@@ -22,6 +23,13 @@ header {
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
background: var(--dark-secondary);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Стили для темной темы */
|
||||
@@ -33,6 +41,7 @@ body.dark-mode {
|
||||
body.dark-mode header {
|
||||
background-color: var(--dark-bg);
|
||||
color: var(--dark-text);
|
||||
background: linear-gradient(135deg, var(--dark-bg) 0%, #1a535c 100%);
|
||||
}
|
||||
|
||||
body.dark-mode .section {
|
||||
@@ -43,14 +52,85 @@ body.dark-mode .section {
|
||||
}
|
||||
|
||||
body.dark-mode .contact-info a {
|
||||
color: var(--secondary);
|
||||
color: var(--dark-secondary);
|
||||
}
|
||||
|
||||
body.dark-mode .skill-tag {
|
||||
background-color: var(--dark-border);
|
||||
color: var(--dark-text);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
body.dark-mode footer {
|
||||
color: var(--dark-text);
|
||||
background-color: var(--dark-card);
|
||||
}
|
||||
|
||||
body.dark-mode h1,
|
||||
body.dark-mode h2,
|
||||
body.dark-mode h3 {
|
||||
color: var(--dark-secondary);
|
||||
}
|
||||
|
||||
body.dark-mode .project-link {
|
||||
color: var(--dark-secondary);
|
||||
}
|
||||
|
||||
body.dark-mode .project-link:hover {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
body.dark-mode .btn-primary {
|
||||
background-color: var(--dark-secondary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
body.dark-mode .btn-primary:hover {
|
||||
background-color: #3498db;
|
||||
}
|
||||
|
||||
body.dark-mode .btn-secondary {
|
||||
background-color: transparent;
|
||||
color: var(--dark-text);
|
||||
border: 2px solid var(--dark-text);
|
||||
}
|
||||
|
||||
body.dark-mode .btn-secondary:hover {
|
||||
background-color: var(--dark-text);
|
||||
color: var(--dark-bg);
|
||||
}
|
||||
|
||||
body.dark-mode .yalarba-section {
|
||||
background: linear-gradient(135deg, var(--dark-card) 0%, #34495e 100%);
|
||||
border-left: 5px solid var(--dark-secondary);
|
||||
}
|
||||
|
||||
body.dark-mode .investment-cta {
|
||||
background-color: var(--dark-border);
|
||||
color: var(--dark-text);
|
||||
}
|
||||
|
||||
body.dark-mode .timeline:before {
|
||||
background: var(--dark-secondary);
|
||||
}
|
||||
|
||||
body.dark-mode .timeline-item:before {
|
||||
background: var(--dark-card);
|
||||
border: 2px solid var(--dark-secondary);
|
||||
}
|
||||
|
||||
body.dark-mode .highlight {
|
||||
color: #f39c12;
|
||||
}
|
||||
|
||||
/* Темная тема для социальных ссылок */
|
||||
body.dark-mode .social_link {
|
||||
background-color: var(--dark-card);
|
||||
box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Темная тема для фото */
|
||||
body.dark-mode .about-valitovgaziz-photo-box img {
|
||||
box-shadow: 4px 4px 8px 9px rgba(0, 0, 0, 0.3);
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
@@ -1,5 +1,25 @@
|
||||
function toggleTheme() {
|
||||
document.body.classList.toggle('dark-mode');
|
||||
const btn = document.querySelector('.theme-toggle');
|
||||
btn.textContent = document.body.classList.contains('dark-mode') ? '☀️ Светлая тема' : '🌙 Темная тема';
|
||||
|
||||
if (document.body.classList.contains('dark-mode')) {
|
||||
btn.textContent = '☀️ Светлая тема';
|
||||
localStorage.setItem('theme', 'dark');
|
||||
} else {
|
||||
btn.textContent = '🌙 Темная тема';
|
||||
localStorage.setItem('theme', 'light');
|
||||
}
|
||||
}
|
||||
|
||||
// Загрузка темы при загрузке страницы
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
const btn = document.querySelector('.theme-toggle');
|
||||
|
||||
if (savedTheme === 'dark') {
|
||||
document.body.classList.add('dark-mode');
|
||||
btn.textContent = '☀️ Светлая тема';
|
||||
} else {
|
||||
btn.textContent = '🌙 Темная тема';
|
||||
}
|
||||
});
|
||||
@@ -62,6 +62,20 @@
|
||||
<!-- /Yandex.Metrika counter -->
|
||||
|
||||
<header class="hero">
|
||||
<header class="hero">
|
||||
<div class="hero-content">
|
||||
<!-- существующий контент hero -->
|
||||
</div>
|
||||
|
||||
<!-- Добавьте эту кнопку -->
|
||||
<button class="theme-toggle" onclick="toggleTheme()">
|
||||
🌙 Темная тема
|
||||
</button>
|
||||
|
||||
<div class="social_links_block">
|
||||
<!-- существующие социальные ссылки -->
|
||||
</div>
|
||||
</header>
|
||||
<div class="hero-content">
|
||||
<div class="hero-text">
|
||||
<h1>Валитов Газиз</h1>
|
||||
@@ -84,6 +98,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="social_links_block">
|
||||
<div class="social_link_block">
|
||||
<h4>Подписывайтесь в ВК</h4>
|
||||
@@ -424,7 +439,6 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<footer>
|
||||
<div class="footer-links">
|
||||
<div class="footer-box footer-link">
|
||||
@@ -449,7 +463,11 @@
|
||||
Media:
|
||||
<ul>
|
||||
<li><a href="https://t.me/ValitovGaziz_Ufa">Owners news</a></li>
|
||||
<li><a href="https://t.me/+oYymS0r6qG9lYWJi">YalArba team in Telegram</a></li>
|
||||
<li>
|
||||
<a href="https://t.me/+oYymS0r6qG9lYWJi"
|
||||
>YalArba team in Telegram</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user