Erste Version der Website
This commit is contained in:
commit
fa67426d72
14 changed files with 1811 additions and 0 deletions
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
*.save
|
||||
*.swp
|
||||
*~
|
||||
.DS_Store
|
||||
0
assets/projektinfo.pdf
Normal file
0
assets/projektinfo.pdf
Normal file
863
css/style.css
Normal file
863
css/style.css
Normal file
|
|
@ -0,0 +1,863 @@
|
|||
/* ====================== RESET & BASICS ====================== */
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
color: #1e293b;
|
||||
line-height: 1.6;
|
||||
background-color: #f8fafc;
|
||||
}
|
||||
|
||||
/* ====================== HEADER & NAVIGATION ====================== */
|
||||
|
||||
header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.5rem 2.5rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
color: white;
|
||||
font-size: 2rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
background: linear-gradient(135deg, #fff 0%, #fbbf24 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.logo::before {
|
||||
content: "✨";
|
||||
font-size: 2rem;
|
||||
background: none;
|
||||
-webkit-text-fill-color: unset;
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 1.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-menu a {
|
||||
text-decoration: none;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-weight: 700;
|
||||
transition: all 0.4s ease;
|
||||
padding: 0.8rem 1.5rem;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.nav-menu a::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #fbbf24, #f59e0b);
|
||||
transition: all 0.4s ease;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.nav-menu a:hover {
|
||||
color: white;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.nav-menu a:hover::after {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.nav-menu a.active {
|
||||
color: #fbbf24;
|
||||
background: rgba(251, 191, 36, 0.2);
|
||||
}
|
||||
|
||||
.nav-menu a.active::after {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.btn-download {
|
||||
background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
|
||||
color: white;
|
||||
padding: 0.8rem 1.5rem;
|
||||
border-radius: 10px;
|
||||
transition: all 0.4s ease;
|
||||
font-weight: 700;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 8px 20px rgba(249, 115, 22, 0.4);
|
||||
font-size: 0.95rem;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.btn-download:hover {
|
||||
background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 30px rgba(249, 115, 22, 0.6);
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.hamburger span {
|
||||
width: 30px;
|
||||
height: 3px;
|
||||
background: white;
|
||||
transition: all 0.4s ease;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.nav-menu.active ~ .hamburger span:nth-child(1) {
|
||||
transform: rotate(45deg) translate(10px, 10px);
|
||||
background: #fbbf24;
|
||||
}
|
||||
|
||||
.nav-menu.active ~ .hamburger span:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.nav-menu.active ~ .hamburger span:nth-child(3) {
|
||||
transform: rotate(-45deg) translate(9px, -9px);
|
||||
background: #fbbf24;
|
||||
}
|
||||
|
||||
/* ====================== MAIN CONTENT ====================== */
|
||||
|
||||
main {
|
||||
min-height: calc(100vh - 200px);
|
||||
padding: 3rem 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* ====================== HERO SECTION ====================== */
|
||||
|
||||
.hero {
|
||||
text-align: center;
|
||||
padding: 3rem 0;
|
||||
background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
|
||||
border-radius: 12px;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #0f172a;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.25rem;
|
||||
color: #475569;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* ====================== PAGE HEADER ====================== */
|
||||
|
||||
.page-header {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 2rem;
|
||||
background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
|
||||
border-radius: 12px;
|
||||
border-left: 4px solid #2563eb;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
font-size: 1.1rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
/* ====================== SECTIONS ====================== */
|
||||
|
||||
.content-section {
|
||||
margin-bottom: 3rem;
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.content-section h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #0f172a;
|
||||
border-bottom: 3px solid #2563eb;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.content-section h3 {
|
||||
font-size: 1.3rem;
|
||||
margin: 1.5rem 0 0.5rem 0;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.content-section p {
|
||||
margin-bottom: 1rem;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.content-section ul,
|
||||
.content-section ol {
|
||||
margin-left: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.content-section li {
|
||||
margin-bottom: 0.8rem;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #2563eb;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #1e40af;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ====================== FEATURE GRID ====================== */
|
||||
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
|
||||
padding: 2rem;
|
||||
border-radius: 10px;
|
||||
border-left: 4px solid #2563eb;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 16px rgba(37, 99, 235, 0.2);
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
margin-bottom: 0.5rem;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
color: #475569;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ====================== BUTTONS ====================== */
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.875rem 1.75rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: white;
|
||||
color: #2563eb;
|
||||
border: 2px solid #2563eb;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #f0f9ff;
|
||||
}
|
||||
|
||||
.cta-section {
|
||||
text-align: center;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
|
||||
color: white;
|
||||
padding: 3rem;
|
||||
border-radius: 12px;
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
.cta-section h2 {
|
||||
color: white;
|
||||
border: none;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* ====================== TECH GRID ====================== */
|
||||
|
||||
.tech-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.tech-card {
|
||||
background: white;
|
||||
padding: 1.5rem;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #e2e8f0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.tech-card:hover {
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.tech-card h3 {
|
||||
color: #2563eb;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.tech-card ul {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.tech-card li {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.tech-card li:before {
|
||||
content: "✓ ";
|
||||
color: #10b981;
|
||||
font-weight: bold;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
/* ====================== TEAM GRID ====================== */
|
||||
|
||||
.team-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.team-member {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
border: 2px solid #e2e8f0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.team-member:hover {
|
||||
transform: translateY(-5px);
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 8px 16px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.member-avatar {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.team-member h3 {
|
||||
color: #2563eb;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.team-member p {
|
||||
color: #64748b;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ====================== VALUES LIST ====================== */
|
||||
|
||||
.values-list {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.values-list li {
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
background: #f1f5f9;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid #2563eb;
|
||||
}
|
||||
|
||||
.values-list strong {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
/* ====================== FEATURE LIST ====================== */
|
||||
|
||||
.feature-list {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.feature-list li {
|
||||
padding: 0.75rem 0;
|
||||
padding-left: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.feature-list li:before {
|
||||
content: "★";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #2563eb;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* ====================== LEARNING GOALS ====================== */
|
||||
|
||||
.learning-goals {
|
||||
counter-reset: item;
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.learning-goals li {
|
||||
counter-increment: item;
|
||||
margin-bottom: 1rem;
|
||||
padding-left: 2.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.learning-goals li:before {
|
||||
content: counter(item);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: #2563eb;
|
||||
color: white;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* ====================== CONTACT PAGE ====================== */
|
||||
|
||||
.contact-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 3rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.info-item h3 {
|
||||
color: #2563eb;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.info-item p {
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
/* ====================== CONTACT FORM ====================== */
|
||||
|
||||
.contact-form {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.form-group.checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.form-group.checkbox input {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.form-group.checkbox label {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
display: block;
|
||||
color: #dc2626;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.25rem;
|
||||
min-height: 1.25rem;
|
||||
}
|
||||
|
||||
.form-group.error input,
|
||||
.form-group.error textarea {
|
||||
border-color: #dc2626;
|
||||
}
|
||||
|
||||
.form-message {
|
||||
margin-top: 1.5rem;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
display: none;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-message.success {
|
||||
display: block;
|
||||
background-color: #dcfce7;
|
||||
color: #166534;
|
||||
border: 1px solid #10b981;
|
||||
}
|
||||
|
||||
.form-message.error {
|
||||
display: block;
|
||||
background-color: #fee2e2;
|
||||
color: #991b1b;
|
||||
border: 1px solid #ef4444;
|
||||
}
|
||||
|
||||
/* ====================== LEGAL CONTENT ====================== */
|
||||
|
||||
.legal-content {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.legal-content h3 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.legal-content p {
|
||||
margin-bottom: 1rem;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.legal-content ul {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* ====================== FOOTER ====================== */
|
||||
|
||||
footer {
|
||||
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
|
||||
color: #cbd5e1;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.footer-section h3 {
|
||||
color: white;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.footer-section a {
|
||||
color: #93c5fd;
|
||||
}
|
||||
|
||||
.footer-section a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.footer-section ul {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.footer-section li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* ====================== MEDIA QUERIES ====================== */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nav-menu {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.nav-menu a {
|
||||
padding: 1rem;
|
||||
font-size: 1rem;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
display: block;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.nav-menu a::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.contact-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.feature-grid,
|
||||
.tech-grid,
|
||||
.team-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.3rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.logo::before {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
position: fixed;
|
||||
left: -100%;
|
||||
top: 75px;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transition: 0.5s ease;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
gap: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.nav-menu li {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-menu li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.nav-menu.active {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.btn-download {
|
||||
margin: 1rem;
|
||||
width: calc(100% - 2rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
main {
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ====================== ANIMATIONS ====================== */
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.content-section {
|
||||
animation: fadeIn 0.5s ease-out;
|
||||
}
|
||||
|
||||
/* ====================== GALLERY ====================== */
|
||||
|
||||
.galerie {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.galerie img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.galerie img:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
124
eis_projekt.html
Normal file
124
eis_projekt.html
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Projekt - EIS</title>
|
||||
<link rel="icon" href="img/favicon.png" type="image/png">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="logo">EIS Projekt</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="index.html">Start</a></li>
|
||||
<li><a href="ueber_uns.html">Über uns</a></li>
|
||||
<li><a href="eis_projekt.html" class="active">Projekt</a></li>
|
||||
<li><a href="kontakt.html">Kontakt</a></li>
|
||||
<li><a href="impressum.html">Impressum</a></li>
|
||||
<li><a href="assets/projektinfo.pdf" download class="btn-download">PDF ↓</a></li>
|
||||
</ul>
|
||||
<div class="hamburger">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<section class="page-header">
|
||||
<h1>EIS Projekt</h1>
|
||||
<p>Entwicklung interaktiver Softwareanwendungen</p>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Projektübersicht</h2>
|
||||
<p>Das EIS-Projekt ist ein umfassendes Lernprojekt zur Entwicklung interaktiver Web-Anwendungen. Ziel dieses Projekts ist es, Studierenden praktische Erfahrungen mit modernen Web-Technologien zu vermitteln.</p>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Projektmerkmale</h2>
|
||||
<ul class="feature-list">
|
||||
<li>Responsive Design für alle Geräte</li>
|
||||
<li>Interaktive Benutzeroberfläche</li>
|
||||
<li>Formularvalidierung mit JavaScript</li>
|
||||
<li>Moderne CSS3-Styling</li>
|
||||
<li>Suchmaschinenoptimierung (SEO)</li>
|
||||
<li>Barrierefreier Zugang (Accessibility)</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Technologie Stack</h2>
|
||||
<div class="tech-grid">
|
||||
<div class="tech-card">
|
||||
<h3>Frontend</h3>
|
||||
<ul>
|
||||
<li>HTML5</li>
|
||||
<li>CSS3</li>
|
||||
<li>JavaScript (ES6+)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<h3>Design</h3>
|
||||
<ul>
|
||||
<li>Responsive Layout</li>
|
||||
<li>Mobile-First Approach</li>
|
||||
<li>Moderne UI/UX</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<h3>Tools</h3>
|
||||
<ul>
|
||||
<li>Git für Versionskontrolle</li>
|
||||
<li>VS Code als Editor</li>
|
||||
<li>Browser Developer Tools</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Lernziele</h2>
|
||||
<ol class="learning-goals">
|
||||
<li>Verständnis der Web-Standards und Best Practices</li>
|
||||
<li>Fähigkeit zur Erstellung responsiver Websites</li>
|
||||
<li>JavaScript für interaktive Funktionalität</li>
|
||||
<li>Zusammenarbeit im Team und Versionskontrolle</li>
|
||||
<li>Deployment und Hosting von Web-Anwendungen</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h3>Kontakt</h3>
|
||||
<p>E-Mail: <a href="mailto:info@beispiel.de">info@beispiel.de</a></p>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h3>Links</h3>
|
||||
<ul>
|
||||
<li><a href="impressum.html">Impressum</a></li>
|
||||
<li><a href="ueber_uns.html">Über uns</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<p>© 2025 – EIS Lernprojekt an der PH Weingarten</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
0
img/favicon.png
Normal file
0
img/favicon.png
Normal file
0
img/gruppenbild.jpg
Normal file
0
img/gruppenbild.jpg
Normal file
0
img/logo.svg
Normal file
0
img/logo.svg
Normal file
BIN
img/test.jpg
Normal file
BIN
img/test.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 MiB |
BIN
img/test2.png
Normal file
BIN
img/test2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 MiB |
187
impressum.html
Normal file
187
impressum.html
Normal file
|
|
@ -0,0 +1,187 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Impressum - EIS Projekt</title>
|
||||
<link rel="icon" href="img/favicon.png" type="image/png">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="logo">EIS Projekt</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="index.html">Start</a></li>
|
||||
<li><a href="ueber_uns.html">Über uns</a></li>
|
||||
<li><a href="eis_projekt.html">Projekt</a></li>
|
||||
<li><a href="kontakt.html">Kontakt</a></li>
|
||||
<li><a href="impressum.html" class="active">Impressum</a></li>
|
||||
<li><a href="assets/projektinfo.pdf" download class="btn-download">PDF ↓</a></li>
|
||||
</ul>
|
||||
<div class="hamburger">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<section class="page-header">
|
||||
<h1>Impressum</h1>
|
||||
<p>Rechtliche Informationen und Angaben</p>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Angaben zum Betreiber der Website</h2>
|
||||
|
||||
<div class="legal-content">
|
||||
<h3>Inhaltlich Verantwortliche</h3>
|
||||
<p>
|
||||
<strong>Name:</strong> [Hier Namen der Studierenden einfügen]<br>
|
||||
<strong>E-Mail:</strong> <a href="mailto:info@beispiel.de">info@beispiel.de</a><br>
|
||||
<strong>Telefon:</strong> <a href="tel:+49123456789">+49 123 456789</a>
|
||||
</p>
|
||||
|
||||
<h3>Institution</h3>
|
||||
<p>
|
||||
<strong>Pädagogische Hochschule Weingarten</strong><br>
|
||||
Kirchplatz 2<br>
|
||||
88250 Weingarten<br>
|
||||
Deutschland<br>
|
||||
<strong>Telefon:</strong> <a href="tel:+497351509-0">+49 7351 509-0</a><br>
|
||||
<strong>Website:</strong> <a href="https://www.ph-weingarten.de" target="_blank">www.ph-weingarten.de</a>
|
||||
</p>
|
||||
|
||||
<h3>Lehrveranstaltung</h3>
|
||||
<p>
|
||||
Diese Website ist ein Lernprojekt im Rahmen der Lehrveranstaltung<br>
|
||||
<strong>„Entwicklung interaktiver Softwareanwendungen (EIS)"</strong><br>
|
||||
an der Pädagogischen Hochschule Weingarten.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Datenschutzerklärung</h2>
|
||||
|
||||
<div class="legal-content">
|
||||
<h3>1. Verantwortlicher für die Datenverarbeitung</h3>
|
||||
<p>
|
||||
Für diese Website verantwortlich ist die Pädagogische Hochschule Weingarten und die beteiligten Studierenden.
|
||||
</p>
|
||||
|
||||
<h3>2. Erfassung von Daten</h3>
|
||||
<p>
|
||||
Diese Website erfasst grundsätzlich keine persönlichen Daten automatisch. Eine Ausnahme gibt es beim Kontaktformular: Hier werden die eingegebenen Daten zur Bearbeitung Ihrer Anfrage verwendet.
|
||||
</p>
|
||||
|
||||
<h3>3. Kontaktformular</h3>
|
||||
<p>
|
||||
Bei Nutzung des Kontaktformulars werden Ihre Angaben (Name, E-Mail, Nachricht) erfasst und zur Beantwortung Ihrer Anfrage verarbeitet. Die Daten werden nicht an Dritte weitergegeben und nur für die Dauer der notwendigen Bearbeitung gespeichert.
|
||||
</p>
|
||||
|
||||
<h3>4. Server-Logdateien</h3>
|
||||
<p>
|
||||
Der Anbieter erhebt und speichert automatisch Informationen in den so genannten Server-Log-Dateien, die Ihr Browser übermittelt (z.B. IP-Adresse, Browsertyp, Zugriffsdatum und -uhrzeit). Diese Informationen werden verwendet, um die Funktionsfähigkeit der Website sicherzustellen.
|
||||
</p>
|
||||
|
||||
<h3>5. Externe Inhalte</h3>
|
||||
<p>
|
||||
Diese Website können externe Inhalte enthalten (z.B. PDF-Downloads). Mit dem Zugriff auf diese Inhalte können Daten an den jeweiligen Anbieter übermittelt werden.
|
||||
</p>
|
||||
|
||||
<h3>6. Ihre Rechte</h3>
|
||||
<p>
|
||||
Sie haben das Recht, jederzeit Auskunft über Ihre gespeicherten Daten zu erhalten sowie diese zu korrigieren oder löschen zu lassen. Kontaktieren Sie uns hierzu über die angegebene E-Mail-Adresse.
|
||||
</p>
|
||||
|
||||
<h3>7. Sicherheit</h3>
|
||||
<p>
|
||||
Wir treffen technische und organisatorische Maßnahmen, um Ihre Daten vor Missbrauch zu schützen. Diese Website nutzt eine sichere HTTPS-Verbindung, falls verfügbar.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Urheberrecht und Lizenzen</h2>
|
||||
|
||||
<div class="legal-content">
|
||||
<h3>Inhalte</h3>
|
||||
<p>
|
||||
Alle Inhalte dieser Website (Texte, Bilder, Grafiken, Layout) sind, sofern nicht anders gekennzeichnet, Eigentum der Studierenden und der Pädagogischen Hochschule Weingarten. Eine Vervielfältigung, Bearbeitung oder Verbreitung dieser Inhalte ist ohne ausdrückliche schriftliche Zustimmung nicht gestattet.
|
||||
</p>
|
||||
|
||||
<h3>Verwendete Technologien</h3>
|
||||
<p>
|
||||
Diese Website nutzt folgende Technologien und Standards:
|
||||
</p>
|
||||
<ul>
|
||||
<li>HTML5</li>
|
||||
<li>CSS3</li>
|
||||
<li>JavaScript (unter Einhaltung von Web-Standards)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Haftungsausschluss</h2>
|
||||
|
||||
<div class="legal-content">
|
||||
<h3>Haftung für Inhalte</h3>
|
||||
<p>
|
||||
Obwohl die Inhalte dieser Website mit Sorgfalt erstellt wurden, können wir für deren Richtigkeit, Vollständigkeit und Aktualität keine Gewähr übernehmen. Die Nutzung der Website erfolgt auf eigene Gefahr des Benutzers.
|
||||
</p>
|
||||
|
||||
<h3>Externe Links</h3>
|
||||
<p>
|
||||
Für den Inhalt extern verlinkter Seiten sind ausschließlich deren Betreiber verantwortlich. Wir sind nicht haftbar für den Inhalt von externen Websites.
|
||||
</p>
|
||||
|
||||
<h3>Lernprojekt</h3>
|
||||
<p>
|
||||
Diese Website ist ein Lernprojekt und dient zu Bildungszwecken. Sie wird zu Demonstrationszwecken bereitgestellt und ist möglicherweise nicht für den kommerziellen Einsatz bestimmt.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Kontakt für Rechtsfragen</h2>
|
||||
<p>
|
||||
Bei Fragen zu dieser Impressum oder zum Datenschutz kontaktieren Sie bitte:<br>
|
||||
<a href="mailto:info@beispiel.de">info@beispiel.de</a>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h3>Kontakt</h3>
|
||||
<p>E-Mail: <a href="mailto:info@beispiel.de">info@beispiel.de</a></p>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h3>Links</h3>
|
||||
<ul>
|
||||
<li><a href="eis_projekt.html">Projekt</a></li>
|
||||
<li><a href="ueber_uns.html">Über uns</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<p>© 2025 – EIS Lernprojekt an der PH Weingarten</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
94
index.html
Normal file
94
index.html
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Startseite - EIS Projekt</title>
|
||||
<link rel="icon" href="img/favicon.png" type="image/png">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="logo">EIS Projekt</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="index.html" class="active">Start</a></li>
|
||||
<li><a href="ueber_uns.html">Über uns</a></li>
|
||||
<li><a href="eis_projekt.html">Projekt</a></li>
|
||||
<li><a href="kontakt.html">Kontakt</a></li>
|
||||
<li><a href="impressum.html">Impressum</a></li>
|
||||
<li><a href="assets/projektinfo.pdf" download class="btn-download">PDF ↓</a></li>
|
||||
</ul>
|
||||
<div class="hamburger">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Willkommen auf unserer Website!</h1>
|
||||
<p>Ein interaktives Lernprojekt im Bereich der Web-Entwicklung</p>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Über dieses Projekt</h2>
|
||||
<p>Diese Website ist ein Lernprojekt im Rahmen der Lehrveranstaltung „Entwicklung interaktiver Softwareanwendungen" an der PH Weingarten. Hier präsentieren wir alles Wichtige über unser Projekt und unser Team.</p>
|
||||
|
||||
<div class="feature-grid">
|
||||
<div class="feature-card">
|
||||
<h3>🎓 Bildung</h3>
|
||||
<p>Erstellung von modernen, interaktiven Web-Anwendungen</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>💻 Technologie</h3>
|
||||
<p>HTML5, CSS3, und JavaScript für ein beeindruckendes Nutzererlebnis</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>🤝 Zusammenarbeit</h3>
|
||||
<p>Teamarbeit und kreative Problemlösungen</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-section">
|
||||
<h2>Erkunde unser Projekt</h2>
|
||||
<div class="button-group">
|
||||
<a href="eis_projekt.html" class="btn btn-primary">Zum Projekt →</a>
|
||||
<a href="kontakt.html" class="btn btn-secondary">Kontaktiere uns →</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h3>Kontakt</h3>
|
||||
<p>E-Mail: <a href="mailto:info@beispiel.de">info@beispiel.de</a></p>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h3>Links</h3>
|
||||
<ul>
|
||||
<li><a href="impressum.html">Impressum</a></li>
|
||||
<li><a href="ueber_uns.html">Über uns</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<p>© 2025 – EIS Lernprojekt an der PH Weingarten</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
285
js/script.js
Normal file
285
js/script.js
Normal file
|
|
@ -0,0 +1,285 @@
|
|||
// ====================== MOBILE MENU TOGGLE ======================
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const hamburger = document.querySelector('.hamburger');
|
||||
const navMenu = document.querySelector('.nav-menu');
|
||||
|
||||
if (hamburger) {
|
||||
hamburger.addEventListener('click', () => {
|
||||
navMenu.classList.toggle('active');
|
||||
});
|
||||
|
||||
// Close menu when a link is clicked
|
||||
document.querySelectorAll('.nav-menu a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
navMenu.classList.remove('active');
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// ====================== ACTIVE NAV HIGHLIGHTING ======================
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const currentLocation = location.pathname;
|
||||
const navLinks = document.querySelectorAll('.nav-menu a');
|
||||
|
||||
navLinks.forEach(link => {
|
||||
if (link.getAttribute('href') === currentLocation) {
|
||||
link.classList.add('active');
|
||||
} else {
|
||||
link.classList.remove('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ====================== CONTACT FORM VALIDATION ======================
|
||||
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
|
||||
if (contactForm) {
|
||||
contactForm.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Clear previous errors
|
||||
clearErrors();
|
||||
|
||||
// Get form values
|
||||
const name = document.getElementById('name').value.trim();
|
||||
const email = document.getElementById('email').value.trim();
|
||||
const subject = document.getElementById('subject').value.trim();
|
||||
const message = document.getElementById('message').value.trim();
|
||||
const privacy = document.getElementById('privacy').checked;
|
||||
|
||||
let isValid = true;
|
||||
|
||||
// Validate name
|
||||
if (name === '') {
|
||||
showError('name', 'Bitte gib deinen Namen ein');
|
||||
isValid = false;
|
||||
} else if (name.length < 2) {
|
||||
showError('name', 'Der Name muss mindestens 2 Zeichen lang sein');
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// Validate email
|
||||
if (email === '') {
|
||||
showError('email', 'Bitte gib deine E-Mail ein');
|
||||
isValid = false;
|
||||
} else if (!isValidEmail(email)) {
|
||||
showError('email', 'Bitte gib eine gültige E-Mail ein');
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// Validate subject
|
||||
if (subject === '') {
|
||||
showError('subject', 'Bitte gib einen Betreff ein');
|
||||
isValid = false;
|
||||
} else if (subject.length < 3) {
|
||||
showError('subject', 'Der Betreff muss mindestens 3 Zeichen lang sein');
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// Validate message
|
||||
if (message === '') {
|
||||
showError('message', 'Bitte gib eine Nachricht ein');
|
||||
isValid = false;
|
||||
} else if (message.length < 10) {
|
||||
showError('message', 'Die Nachricht muss mindestens 10 Zeichen lang sein');
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// Validate privacy checkbox
|
||||
if (!privacy) {
|
||||
showError('privacy', 'Bitte akzeptiere die Datenschutzerklärung');
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// Submit form if valid
|
||||
if (isValid) {
|
||||
submitForm();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function showError(fieldId, message) {
|
||||
const field = document.getElementById(fieldId);
|
||||
const errorElement = document.getElementById(fieldId + 'Error');
|
||||
|
||||
if (field && errorElement) {
|
||||
field.parentElement.classList.add('error');
|
||||
errorElement.textContent = message;
|
||||
}
|
||||
}
|
||||
|
||||
function clearErrors() {
|
||||
const formGroups = document.querySelectorAll('.form-group');
|
||||
formGroups.forEach(group => {
|
||||
group.classList.remove('error');
|
||||
const errorMessage = group.querySelector('.error-message');
|
||||
if (errorMessage) {
|
||||
errorMessage.textContent = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function isValidEmail(email) {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return emailRegex.test(email);
|
||||
}
|
||||
|
||||
function submitForm() {
|
||||
const form = document.getElementById('contactForm');
|
||||
const formMessage = document.getElementById('formMessage');
|
||||
|
||||
// Show success message
|
||||
formMessage.classList.remove('error');
|
||||
formMessage.classList.add('success');
|
||||
formMessage.textContent = '✓ Deine Nachricht wurde erfolgreich versendet! Wir werden uns bald mit dir in Verbindung setzen.';
|
||||
|
||||
// Reset form
|
||||
form.reset();
|
||||
|
||||
// Hide message after 5 seconds
|
||||
setTimeout(() => {
|
||||
formMessage.classList.remove('success');
|
||||
formMessage.textContent = '';
|
||||
}, 5000);
|
||||
|
||||
// Note: In a real application, you would send this data to a server
|
||||
console.log('Form submitted:', {
|
||||
name: document.getElementById('name').value,
|
||||
email: document.getElementById('email').value,
|
||||
phone: document.getElementById('phone').value,
|
||||
subject: document.getElementById('subject').value,
|
||||
message: document.getElementById('message').value
|
||||
});
|
||||
}
|
||||
|
||||
// ====================== GALLERY LIGHTBOX ======================
|
||||
|
||||
document.querySelectorAll('.galerie img').forEach(img => {
|
||||
img.addEventListener('click', () => {
|
||||
const overlay = document.createElement('div');
|
||||
overlay.style.cssText =
|
||||
'position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;' +
|
||||
'align-items:center;justify-content:center;cursor:pointer;z-index:999';
|
||||
|
||||
const big = document.createElement('img');
|
||||
big.src = img.src;
|
||||
big.style.maxWidth = '90vw';
|
||||
big.style.maxHeight = '90vh';
|
||||
big.style.borderRadius = '8px';
|
||||
big.style.boxShadow = '0 20px 60px rgba(0,0,0,.3)';
|
||||
|
||||
// Close button
|
||||
const closeBtn = document.createElement('button');
|
||||
closeBtn.innerHTML = '✕';
|
||||
closeBtn.style.cssText =
|
||||
'position:absolute;top:20px;right:20px;background:white;border:none;' +
|
||||
'width:40px;height:40px;border-radius:50%;font-size:24px;cursor:pointer;' +
|
||||
'font-weight:bold;color:#333;transition:all 0.3s ease;';
|
||||
|
||||
closeBtn.addEventListener('mouseover', () => {
|
||||
closeBtn.style.background = '#f0f0f0';
|
||||
closeBtn.style.transform = 'scale(1.1)';
|
||||
});
|
||||
|
||||
closeBtn.addEventListener('mouseout', () => {
|
||||
closeBtn.style.background = 'white';
|
||||
closeBtn.style.transform = 'scale(1)';
|
||||
});
|
||||
|
||||
closeBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
overlay.remove();
|
||||
});
|
||||
|
||||
overlay.appendChild(big);
|
||||
overlay.appendChild(closeBtn);
|
||||
|
||||
overlay.addEventListener('click', () => overlay.remove());
|
||||
|
||||
// Close on Escape key
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
overlay.remove();
|
||||
}
|
||||
});
|
||||
|
||||
document.body.appendChild(overlay);
|
||||
});
|
||||
});
|
||||
|
||||
// ====================== SMOOTH SCROLL FOR ANCHOR LINKS ======================
|
||||
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ====================== ADD ACTIVE CLASS TO NAV ON SCROLL ======================
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const nav = document.querySelector('.navbar');
|
||||
if (window.scrollY > 100) {
|
||||
nav.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)';
|
||||
} else {
|
||||
nav.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.1)';
|
||||
}
|
||||
});
|
||||
|
||||
// ====================== PHONE NUMBER FORMATTING (optional) ======================
|
||||
|
||||
const phoneInput = document.getElementById('phone');
|
||||
if (phoneInput) {
|
||||
phoneInput.addEventListener('input', (e) => {
|
||||
let value = e.target.value.replace(/\D/g, '');
|
||||
if (value.length > 0) {
|
||||
if (value.length <= 4) {
|
||||
value = value;
|
||||
} else if (value.length <= 7) {
|
||||
value = value.slice(0, 4) + ' ' + value.slice(4);
|
||||
} else {
|
||||
value = value.slice(0, 4) + ' ' + value.slice(4, 7) + ' ' + value.slice(7, 11);
|
||||
}
|
||||
}
|
||||
e.target.value = value;
|
||||
});
|
||||
}
|
||||
|
||||
// ====================== INTERSECTION OBSERVER FOR ANIMATIONS ======================
|
||||
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.style.opacity = '1';
|
||||
entry.target.style.transform = 'translateY(0)';
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('.content-section').forEach(section => {
|
||||
section.style.opacity = '0';
|
||||
section.style.transform = 'translateY(20px)';
|
||||
section.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
|
||||
observer.observe(section);
|
||||
});
|
||||
|
||||
// ====================== UTILITY: CONSOLE MESSAGE ======================
|
||||
|
||||
console.log('%c🎉 Welcome to EIS Project!', 'color: #2563eb; font-size: 20px; font-weight: bold;');
|
||||
console.log('%cThis website is a learning project for interactive software development at PH Weingarten.', 'color: #475569; font-size: 14px;');
|
||||
136
kontakt.html
Normal file
136
kontakt.html
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kontakt - EIS Projekt</title>
|
||||
<link rel="icon" href="img/favicon.png" type="image/png">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="logo">EIS Projekt</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="index.html">Start</a></li>
|
||||
<li><a href="ueber_uns.html">Über uns</a></li>
|
||||
<li><a href="eis_projekt.html">Projekt</a></li>
|
||||
<li><a href="kontakt.html" class="active">Kontakt</a></li>
|
||||
<li><a href="impressum.html">Impressum</a></li>
|
||||
<li><a href="assets/projektinfo.pdf" download class="btn-download">PDF ↓</a></li>
|
||||
</ul>
|
||||
<div class="hamburger">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<section class="page-header">
|
||||
<h1>Kontaktiere uns</h1>
|
||||
<p>Wir freuen uns auf deine Nachricht</p>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<div class="contact-container">
|
||||
<div class="contact-info">
|
||||
<h2>Kontaktinformationen</h2>
|
||||
|
||||
<div class="info-item">
|
||||
<h3>📧 E-Mail</h3>
|
||||
<p><a href="mailto:info@beispiel.de">info@beispiel.de</a></p>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<h3>📱 Telefon</h3>
|
||||
<p><a href="tel:+49123456789">+49 123 456789</a></p>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<h3>📍 Adresse</h3>
|
||||
<p>Pädagogische Hochschule Weingarten<br>Kirchplatz 2<br>88250 Weingarten<br>Deutschland</p>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<h3>⏰ Öffnungszeiten</h3>
|
||||
<p>Montag - Freitag: 8:00 - 17:00 Uhr<br>Samstag & Sonntag: Geschlossen</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="contact-form" id="contactForm">
|
||||
<h2>Nachricht senden</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="name">Name *</label>
|
||||
<input type="text" id="name" name="name" required>
|
||||
<span class="error-message" id="nameError"></span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">E-Mail *</label>
|
||||
<input type="email" id="email" name="email" required>
|
||||
<span class="error-message" id="emailError"></span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="phone">Telefon</label>
|
||||
<input type="tel" id="phone" name="phone">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="subject">Betreff *</label>
|
||||
<input type="text" id="subject" name="subject" required>
|
||||
<span class="error-message" id="subjectError"></span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="message">Nachricht *</label>
|
||||
<textarea id="message" name="message" rows="6" required></textarea>
|
||||
<span class="error-message" id="messageError"></span>
|
||||
</div>
|
||||
|
||||
<div class="form-group checkbox">
|
||||
<input type="checkbox" id="privacy" name="privacy" required>
|
||||
<label for="privacy">Ich akzeptiere die <a href="impressum.html">Datenschutzerklärung</a> *</label>
|
||||
<span class="error-message" id="privacyError"></span>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary">Nachricht senden</button>
|
||||
<div class="form-message" id="formMessage"></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h3>Kontakt</h3>
|
||||
<p>E-Mail: <a href="mailto:info@beispiel.de">info@beispiel.de</a></p>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h3>Links</h3>
|
||||
<ul>
|
||||
<li><a href="impressum.html">Impressum</a></li>
|
||||
<li><a href="ueber_uns.html">Über uns</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<p>© 2025 – EIS Lernprojekt an der PH Weingarten</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
118
ueber_uns.html
Normal file
118
ueber_uns.html
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Über uns - EIS Projekt</title>
|
||||
<link rel="icon" href="img/favicon.png" type="image/png">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="logo">EIS Projekt</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="index.html">Start</a></li>
|
||||
<li><a href="ueber_uns.html" class="active">Über uns</a></li>
|
||||
<li><a href="eis_projekt.html">Projekt</a></li>
|
||||
<li><a href="kontakt.html">Kontakt</a></li>
|
||||
<li><a href="impressum.html">Impressum</a></li>
|
||||
<li><a href="assets/projektinfo.pdf" download class="btn-download">PDF ↓</a></li>
|
||||
</ul>
|
||||
<div class="hamburger">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<section class="page-header">
|
||||
<h1>Über uns</h1>
|
||||
<p>Lerne unser Team kennen</p>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Wer wir sind</h2>
|
||||
<p>Wir sind eine Gruppe von Studierenden an der Pädagogischen Hochschule Weingarten, die gemeinsam dieses Projekt entwickelt haben. Unser Team bringt vielfältige Fähigkeiten und Perspektiven mit, um dieses innovative Lernprojekt zu realisieren.</p>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Das Team</h2>
|
||||
<div class="team-grid">
|
||||
<div class="team-member">
|
||||
<div class="member-avatar">👤</div>
|
||||
<h3>Teamleiter/in</h3>
|
||||
<p>Koordination und Projektmanagement</p>
|
||||
</div>
|
||||
<div class="team-member">
|
||||
<div class="member-avatar">💻</div>
|
||||
<h3>Frontend-Entwickler/in</h3>
|
||||
<p>Gestaltung und Benutzeroberfläche</p>
|
||||
</div>
|
||||
<div class="team-member">
|
||||
<div class="member-avatar">🎨</div>
|
||||
<h3>Designer/in</h3>
|
||||
<p>Visuelles Design und UX</p>
|
||||
</div>
|
||||
<div class="team-member">
|
||||
<div class="member-avatar">✍️</div>
|
||||
<h3>Content Creator</h3>
|
||||
<p>Inhalte und Dokumentation</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Unsere Mission</h2>
|
||||
<p>Unsere Mission ist es, eine ansprechende und funktionale Website zu entwickeln, die nicht nur den Anforderungen des Projekts entspricht, sondern auch Best Practices im Web-Design und der Softwareentwicklung demonstriert.</p>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Unsere Werte</h2>
|
||||
<ul class="values-list">
|
||||
<li><strong>Qualität:</strong> Wir streben nach höchster Qualität in allem, was wir tun</li>
|
||||
<li><strong>Zusammenarbeit:</strong> Teamarbeit ist das Fundament unseres Erfolgs</li>
|
||||
<li><strong>Innovation:</strong> Wir sind ständig auf der Suche nach neuen Ideen und Technologien</li>
|
||||
<li><strong>Lernen:</strong> Kontinuierliches Lernen ist ein wichtiger Teil unserer Kultur</li>
|
||||
<li><strong>Benutzerorientierung:</strong> Der Nutzer steht im Zentrum unserer Überlegungen</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Universität</h2>
|
||||
<p>Dieses Projekt ist Teil der Lehrveranstaltung „Entwicklung interaktiver Softwareanwendungen" an der <strong>Pädagogischen Hochschule Weingarten</strong>. Die PH Weingarten ist eine anerkannte Institution für Lehrerbildung und Forschung.</p>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h3>Kontakt</h3>
|
||||
<p>E-Mail: <a href="mailto:info@beispiel.de">info@beispiel.de</a></p>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h3>Links</h3>
|
||||
<ul>
|
||||
<li><a href="impressum.html">Impressum</a></li>
|
||||
<li><a href="eis_projekt.html">Projekt</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<p>© 2025 – EIS Lernprojekt an der PH Weingarten</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue