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-text: #ecf0f1;
|
||||||
--dark-card: #2c3e50;
|
--dark-card: #2c3e50;
|
||||||
--dark-border: #34495e;
|
--dark-border: #34495e;
|
||||||
|
--dark-secondary: #2980b9;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Кнопка переключения темы */
|
/* Кнопка переключения темы */
|
||||||
@@ -22,6 +23,13 @@ header {
|
|||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 14px;
|
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 {
|
body.dark-mode header {
|
||||||
background-color: var(--dark-bg);
|
background-color: var(--dark-bg);
|
||||||
color: var(--dark-text);
|
color: var(--dark-text);
|
||||||
|
background: linear-gradient(135deg, var(--dark-bg) 0%, #1a535c 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
body.dark-mode .section {
|
body.dark-mode .section {
|
||||||
@@ -43,14 +52,85 @@ body.dark-mode .section {
|
|||||||
}
|
}
|
||||||
|
|
||||||
body.dark-mode .contact-info a {
|
body.dark-mode .contact-info a {
|
||||||
color: var(--secondary);
|
color: var(--dark-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
body.dark-mode .skill-tag {
|
body.dark-mode .skill-tag {
|
||||||
background-color: var(--dark-border);
|
background-color: var(--dark-border);
|
||||||
color: var(--dark-text);
|
color: var(--dark-text);
|
||||||
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
body.dark-mode footer {
|
body.dark-mode footer {
|
||||||
color: var(--dark-text);
|
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() {
|
function toggleTheme() {
|
||||||
document.body.classList.toggle('dark-mode');
|
document.body.classList.toggle('dark-mode');
|
||||||
const btn = document.querySelector('.theme-toggle');
|
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 -->
|
<!-- /Yandex.Metrika counter -->
|
||||||
|
|
||||||
<header class="hero">
|
<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-content">
|
||||||
<div class="hero-text">
|
<div class="hero-text">
|
||||||
<h1>Валитов Газиз</h1>
|
<h1>Валитов Газиз</h1>
|
||||||
@@ -84,6 +98,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="social_links_block">
|
<div class="social_links_block">
|
||||||
<div class="social_link_block">
|
<div class="social_link_block">
|
||||||
<h4>Подписывайтесь в ВК</h4>
|
<h4>Подписывайтесь в ВК</h4>
|
||||||
@@ -424,7 +439,6 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<div class="footer-links">
|
<div class="footer-links">
|
||||||
<div class="footer-box footer-link">
|
<div class="footer-box footer-link">
|
||||||
@@ -449,7 +463,11 @@
|
|||||||
Media:
|
Media:
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="https://t.me/ValitovGaziz_Ufa">Owners news</a></li>
|
<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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user