PBT3H24ADI/CSW-Gruppe-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dark MOde/Theme Veränderung/form Validation

Browse Source
This commit is contained in:
abdelaziz
2025-11-12 13:22:01 +01:00
parent 436b11c9f3
commit 8076ba5854
4 changed files with 268 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
3. script.js
View File

13
index.html
View File

@@ -6,6 +6,7 @@
<title>Tech Horizon</title> <title>Tech Horizon</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<script src="script.js"></script>
<body> <body>
<header> <header>
@@ -16,6 +17,18 @@
<a href="#projects">Projects</a> | <a href="#projects">Projects</a> |
<a href="#contact">Contact</a> <a href="#contact">Contact</a>
</nav> </nav>
<div class="controls">
<button id="darkModeBtn" class="btn-small">Dark Mode</button>
<div class="color-picker">
<span style="color: white; font-size: 14px;">Theme:</span>
<button class="color-btn active" data-color="#667eea" style="background: #667eea;"></button>
<button class="color-btn" data-color="#e74c3c" style="background: #e74c3c;"></button>
<button class="color-btn" data-color="#2ecc71" style="background: #2ecc71;"></button>
<button class="color-btn" data-color="#f39c12" style="background: #f39c12;"></button>
<button class="color-btn" data-color="#9b59b6" style="background: #9b59b6;"></button>
</div>
</div>
</div>
</div> </div>
</header> </header>

141
script.js Normal file
View File

@@ -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';
});
}
});

114
style.css
View File

@@ -1,3 +1,8 @@
:root {
--main-color: #667eea;
--main-color-dark: #764ba2;
}
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -276,3 +281,112 @@ footer {
margin-top: 60px; margin-top: 60px;
font-size: 14px; 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%);
}