diff --git a/3. script.js b/3. script.js deleted file mode 100644 index e69de29..0000000 diff --git a/index.html b/index.html index 6483266..4c04908 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ Tech Horizon +
@@ -16,6 +17,18 @@ Projects | Contact +
+ +
+ Theme: + + + + + +
+
+
diff --git a/script.js b/script.js new file mode 100644 index 0000000..d39c28c --- /dev/null +++ b/script.js @@ -0,0 +1,141 @@ +document.addEventListener('DOMContentLoaded', function() { + + const navLinks = document.querySelectorAll('nav a'); + navLinks.forEach(link => { + link.addEventListener('click', function(e) { + e.preventDefault(); + const targetId = this.getAttribute('href'); + const targetSection = document.querySelector(targetId); + + if (targetSection) { + targetSection.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + } + }); + }); + + //Dark MOde + const darkModeBtn = document.getElementById('darkModeBtn'); + + if (darkModeBtn) { + if (localStorage.getItem('darkMode') === 'enabled') { + document.body.classList.add('dark-mode'); + darkModeBtn.textContent = ' Light Mode'; + } + + darkModeBtn.addEventListener('click', function() { + document.body.classList.toggle('dark-mode'); + + if (document.body.classList.contains('dark-mode')) { + localStorage.setItem('darkMode', 'enabled'); + darkModeBtn.textContent = ' Light Mode'; + } else { + localStorage.setItem('darkMode', 'disabled'); + darkModeBtn.textContent = ' Dark Mode'; + } + }); + } + + //Them changer + const colorButtons = document.querySelectorAll('.color-btn'); + + colorButtons.forEach(button => { + button.addEventListener('click', function() { + const color = this.getAttribute('data-color'); + const darkColor = this.getAttribute('data-color-dark'); + + document.documentElement.style.setProperty('--main-color', color); + document.documentElement.style.setProperty('--main-color-dark', darkColor); + + localStorage.setItem('themeColor', color); + localStorage.setItem('themeColorDark', darkColor); + + colorButtons.forEach(btn => btn.classList.remove('active')); + this.classList.add('active'); + }); + }); + + const savedColor = localStorage.getItem('themeColor'); + const savedColorDark = localStorage.getItem('themeColorDark'); + + if (savedColor && savedColorDark) { + document.documentElement.style.setProperty('--main-color', savedColor); + document.documentElement.style.setProperty('--main-color-dark', savedColorDark); + + colorButtons.forEach(btn => { + if (btn.getAttribute('data-color') === savedColor) { + btn.classList.add('active'); + } + }); + } + + // Validation of FORM + const form = document.querySelector('#contact form'); + + if (form) { + const nameInput = form.querySelector('input[name="name"]'); + const emailInput = form.querySelector('input[name="email"]'); + const messageInput = form.querySelector('textarea[name="message"]'); + + nameInput.addEventListener('input', function() { + if (this.value.trim().length > 2) { + this.style.borderColor = '#4caf50'; + } else { + this.style.borderColor = '#e0e0e0'; + } + }); + + emailInput.addEventListener('input', function() { + const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (emailPattern.test(this.value)) { + this.style.borderColor = '#4caf50'; + } else { + this.style.borderColor = '#f44336'; + } + }); + + messageInput.addEventListener('input', function() { + if (this.value.trim().length >= 10) { + this.style.borderColor = '#4caf50'; + } else { + this.style.borderColor = '#e0e0e0'; + } + }); + + form.addEventListener('submit', function(e) { + e.preventDefault(); + + const name = nameInput.value.trim(); + const email = emailInput.value.trim(); + const message = messageInput.value.trim(); + + if (name.length < 3) { + alert('Bitte geben Sie eine gültige E-Mail-Adresse ein!'); + nameInput.focus(); + return; + } + + const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (!emailPattern.test(email)) { + alert('Der Name muss mindestens 3 Zeichen lang sein!'); + emailInput.focus(); + return; + } + + if (message.length < 10) { + alert('Die Nachricht muss mindestens 10 Zeichen lang sein!'); + messageInput.focus(); + return; + } + + alert('Vielen Dank, ' + name + '! Ihre Nachricht wurde gesendet.'); + form.reset(); + + nameInput.style.borderColor = '#e0e0e0'; + emailInput.style.borderColor = '#e0e0e0'; + messageInput.style.borderColor = '#e0e0e0'; + }); + } +}); \ No newline at end of file diff --git a/style.css b/style.css index 9a1e517..a79fbc8 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,8 @@ +:root { + --main-color: #667eea; + --main-color-dark: #764ba2; +} + * { margin: 0; padding: 0; @@ -275,4 +280,113 @@ footer { padding: 30px 20px; margin-top: 60px; font-size: 14px; +} + +body.dark-mode { + background-color: #1a1a1a; + color: #e0e0e0; +} + +body.dark-mode section { + background: #2d2d2d; + color: #e0e0e0; +} + +body.dark-mode section h2 { + color: var(--main-color); +} + +body.dark-mode .card { + background: #2d2d2d; + color: #e0e0e0; +} + +body.dark-mode input, +body.dark-mode textarea { + background: #3d3d3d; + color: #e0e0e0; + border-color: #555; +} + +.controls { + margin-top: 20px; + display: flex; + justify-content: center; + align-items: center; + gap: 20px; + flex-wrap: wrap; +} + +.btn-small { + padding: 8px 16px; + background: rgba(255, 255, 255, 0.2); + color: white; + border: 2px solid white; + border-radius: 8px; + cursor: pointer; + font-size: 14px; + font-weight: 600; + transition: all 0.3s ease; +} + +.btn-small:hover { + background: rgba(255, 255, 255, 0.3); + transform: scale(1.05); +} + +.color-picker { + display: flex; + gap: 10px; + align-items: center; +} + +.color-btn { + width: 30px; + height: 30px; + border-radius: 50%; + border: 3px solid rgba(255, 255, 255, 0.3); + cursor: pointer; + transition: all 0.3s ease; +} + +.color-btn:hover { + transform: scale(1.2); + border-color: white; +} + +.color-btn.active { + border-color: white; + box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); +} + +header { + background: linear-gradient(135deg, var(--main-color) 0%, var(--main-color-dark) 100%); +} + +section h2 { + color: var(--main-color); +} + +#hero { + background: linear-gradient(135deg, var(--main-color) 0%, var(--main-color-dark) 100%); +} + +#services li { + color: var(--main-color); +} + +.card { + border-top: 4px solid var(--main-color); +} + +.card h3 { + color: var(--main-color); +} + +.btn { + background: linear-gradient(135deg, var(--main-color) 0%, var(--main-color-dark) 100%); +} + +footer { + background: linear-gradient(135deg, var(--main-color) 0%, var(--main-color-dark) 100%); } \ No newline at end of file