Erste Version der Website
This commit is contained in:
parent
a80f60f54f
commit
426d7f7c88
12 changed files with 2256 additions and 0 deletions
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
*.save
|
||||
*.swp
|
||||
*~
|
||||
.DS_Store
|
||||
BIN
assets/projektinfo.pdf
Normal file
BIN
assets/projektinfo.pdf
Normal file
Binary file not shown.
96
css/style.css
Normal file
96
css/style.css
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
/* Grunddesign & Farben */
|
||||
:root {
|
||||
--primary: #4f46e5;
|
||||
--primary-dark: #4338ca;
|
||||
--text: #1e293b;
|
||||
--bg: #f8fafc;
|
||||
--white: #ffffff;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* Moderne Navigation */
|
||||
nav {
|
||||
background-color: var(--white);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
padding: 1rem 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nav a {
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
/* Layout-Container */
|
||||
header, main {
|
||||
max-width: 900px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
border-bottom: 2px solid #e2e8f0;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--primary);
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
/* Responsivität für kleine Bildschirme */
|
||||
@media (max-width: 600px) {
|
||||
nav ul {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
.galerie {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.galerie img {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.galerie img:hover {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
57
eis_projekt.html
Normal file
57
eis_projekt.html
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>EIS Projekt – Lena</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="ueber_uns.html">Über mich</a></li>
|
||||
<li><a href="eis_projekt.html">EIS Projekt</a></li>
|
||||
<li><a href="kontakt.html">Kontakt</a></li>
|
||||
<li><a href="impressum.html">Impressum</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Mein EIS Projekt</h1>
|
||||
<p>Interaktive Softwareanwendungen – Sommersemester 2025</p>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<h2>Projektübersicht</h2>
|
||||
<p>Hier dokumentiere ich meine Fortschritte und die Ergebnisse der einzelnen Meilensteine.</p>
|
||||
<div style="background: #ffffff; padding: 1rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border-left: 4px solid #4f46e5;">
|
||||
<h3>Aktueller Status</h3>
|
||||
<p><strong>Meilenstein 1:</strong> Grundgerüst der Webseite (Erledigt ✓)</p>
|
||||
<p><strong>Meilenstein 2:</strong> JavaScript-Funktionalität (In Arbeit...)</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="output-section">
|
||||
<h2>Live-Ausgabe</h2>
|
||||
<p>Hier werden zukünftige Skripte ihre Ergebnisse ausgeben:</p>
|
||||
<div id="output" style="border: 1px dashed #cbd5e1; padding: 1rem; background: #fff; min-height: 50px;">
|
||||
<em>Noch keine Daten vorhanden...</em>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<h2>Fotogalerie</h2>
|
||||
<div class="galerie">
|
||||
<img src="img/bild1.jpg" alt="Beschreibung Bild 1">
|
||||
</div>
|
||||
|
||||
<script src="js/script.js"></script>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
BIN
img/bild1.jpg
Normal file
BIN
img/bild1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 293 KiB |
BIN
img/favicon.png
Normal file
BIN
img/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 563 KiB |
1844
img/logo.svg
Normal file
1844
img/logo.svg
Normal file
File diff suppressed because it is too large
Load diff
|
After Width: | Height: | Size: 108 KiB |
49
impressum.html
Normal file
49
impressum.html
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Impressum – Lena</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="ueber_uns.html">Über mich</a></li>
|
||||
<li><a href="eis_projekt.html">EIS Projekt</a></li>
|
||||
<li><a href="kontakt.html">Kontakt</a></li>
|
||||
<li><a href="impressum.html">Impressum</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Impressum</h1>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<h2>Angaben gemäß § 5 TMG</h2>
|
||||
<p>Lena Schmid<br>
|
||||
|
||||
Kurs: Einführung in interaktive Softwareanwendungen<br>
|
||||
Sommersemester 2025</p>
|
||||
|
||||
<h2>Kontakt</h2>
|
||||
<p>E-Mail: lena.schmid01@stud-ph-weingarten.de</p>
|
||||
|
||||
<h2>Verantwortlich: Lena Schmid</h2>
|
||||
|
||||
|
||||
<hr style="border: 0; border-top: 1px solid #e2e8f0; margin: 2rem 0;">
|
||||
|
||||
<p><small>Diese Website ist ein Lernprojekt im Rahmen der Lernveranstaltung "Entwicklung interaktiver Softwareanwendungen" an der PH Weingarten.
|
||||
|
||||
</small></p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
38
index.html
Normal file
38
index.html
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lena – Home</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="icon" href="img/favicon.png" type="image/png">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="ueber_uns.html">Über mich</a></li>
|
||||
<li><a href="eis_projekt.html">EIS Projekt</a></li>
|
||||
<li><a href="kontakt.html">Kontakt</a></li>
|
||||
<li><a href="impressum.html">Impressum</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<header>
|
||||
<img src="img/logo.svg" alt="Logo" style="height: 100px;">
|
||||
<h1>Willkommen auf meiner Seite!</h1>
|
||||
<p>Einführung in interaktive Softwareanwendungen – SoSe 2025</p>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section>
|
||||
<h2>Meine Webpräsenz</h2>
|
||||
<p>Das ist meine Startseite im <code>public_html</code> Verzeichnis.</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
42
js/script.js
Normal file
42
js/script.js
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
// 1. Eine freundliche Nachricht in der Browser-Konsole
|
||||
console.log("Willkommen auf der Webseite von Lena!");
|
||||
console.log("Das JavaScript wurde erfolgreich geladen.");
|
||||
|
||||
// 2. Interaktion für das Kontaktformular
|
||||
// Wir warten, bis das Dokument geladen ist
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
const feedback = document.getElementById('formFeedback');
|
||||
|
||||
// Prüfen, ob wir uns gerade auf der Kontakt-Seite befinden
|
||||
if (contactForm) {
|
||||
contactForm.addEventListener('submit', function(event) {
|
||||
// Verhindert, dass die Seite neu lädt
|
||||
event.preventDefault();
|
||||
|
||||
// Formular verstecken und Feedback zeigen
|
||||
contactForm.style.display = 'none';
|
||||
feedback.style.display = 'block';
|
||||
|
||||
// Kleiner Gruß in der Konsole
|
||||
console.log("Formular wurde abgeschickt!");
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
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';
|
||||
overlay.appendChild(big);
|
||||
overlay.addEventListener('click', () => overlay.remove());
|
||||
document.body.appendChild(overlay);
|
||||
});
|
||||
});
|
||||
77
kontakt.html
Normal file
77
kontakt.html
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kontakt – Lena</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<style>
|
||||
/* Spezielles Design für das Formular */
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
input, textarea, button {
|
||||
padding: 0.8rem;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
button {
|
||||
background-color: #4f46e5;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #4338ca;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="ueber_uns.html">Über mich</a></li>
|
||||
<li><a href="eis_projekt.html">EIS Projekt</a></li>
|
||||
<li><a href="kontakt.html">Kontakt</a></li>
|
||||
<li><a href="impressum.html">Impressum</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Kontakt</h1>
|
||||
<p>Hast du Fragen an mich? Schreibe mir eine Nachricht!</p>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<form id="contactForm">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" id="name" name="name" placeholder="Dein Name" required>
|
||||
|
||||
<label for="email">E-Mail</label>
|
||||
<input type="email" id="email" name="email" placeholder="Deine E-Mail Adresse" required>
|
||||
|
||||
<label for="message">Nachricht</label>
|
||||
<textarea id="message" name="message" rows="5" placeholder="Wie können wir dir helfen?" required></textarea>
|
||||
|
||||
<button type="submit">Nachricht senden</button>
|
||||
</form>
|
||||
<div id="formFeedback" style="margin-top: 1rem; display: none; color: #059669; font-weight: bold;">
|
||||
Vielen Dank! Deine Nachricht wurde (simuliert) gesendet.
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
49
ueber_uns.html
Normal file
49
ueber_uns.html
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Über mich – Lena</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="icon" href="img/favicon.png" type="image/png">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="ueber_uns.html">Über mich</a></li>
|
||||
<li><a href="eis_projekt.html">EIS Projekt</a></li>
|
||||
<li><a href="kontakt.html">Kontakt</a></li>
|
||||
<li><a href="impressum.html">Impressum</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Über mich</h1>
|
||||
<p>Wer ich bin und was ich mache.</p>
|
||||
<img src="img/logo.svg" alt="Logo" style="height: 40px;">
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<h2>Das Team</h2>
|
||||
<p>Ich bin Studierende im Kurs <strong>Einführung in interaktive Softwareanwendungen (EIS)</strong> im Sommersemester 2025.</p>
|
||||
<p>In diesem Kurs arbeiten wir an Web-Technologien, lernen den Umgang mit HTML, CSS und JavaScript und setzen unsere ersten Projekte auf einem echten Webserver um.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Unsere Ziele</h2>
|
||||
<ul>
|
||||
<li>Verständnis von modernen Web-Standards</li>
|
||||
<li>Entwicklung benutzerfreundlicher Interfaces</li>
|
||||
<li>Sicherer Umgang mit Linux-Servern und Terminals</li>
|
||||
</ul>
|
||||
</section>
|
||||
<a href="assets/projektinfo.pdf" download>Projektinfo herunterladen (PDF)</a>
|
||||
|
||||
</main>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue