181 lines
5.9 KiB
HTML
181 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="Das EIS-Projekt - Interaktive Softwareanwendungen">
|
||
<title>Das Projekt – EIS</title>
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<link rel="icon" href="img/logo.png" type="image/png">
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<div class="header-container">
|
||
<div class="logo">
|
||
<img src="img/logo.png" alt="Logo">
|
||
<div class="logo-text">
|
||
<span class="institution">David & Karo</span>
|
||
<span class="project">EIS Projekt</span>
|
||
</div>
|
||
</div>
|
||
<!-- Dark Mode Toggle Button -->
|
||
<button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
|
||
<span class="dark-mode-icon">🌙</span>
|
||
</button>
|
||
<nav>
|
||
<a href="index.html">Start</a>
|
||
<a href="ueber_uns.html">Über uns</a>
|
||
<a href="eis_projekt.html" class="active">Projekt</a>
|
||
<a href="team.html">Team</a>
|
||
<a href="galerie.html">Galerie</a>
|
||
<a href="notenrechner.html">Notenrechner</a>
|
||
<a href="textanalyse.html">Textanalyse</a>
|
||
<a href="kontakt.html">Kontakt</a>
|
||
<a href="impressum.html">Impressum</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<section class="hero">
|
||
<h1>Das EIS-Projekt</h1>
|
||
<p>Innovative Webentwicklung mit modernem Tech-Stack & magischem Design ✨</p>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>💻 Technologie-Stack</h2>
|
||
<div class="cards">
|
||
<div class="card">
|
||
<h3>Frontend</h3>
|
||
<ul>
|
||
<li>HTML5</li>
|
||
<li>CSS3 (Responsive Design)</li>
|
||
<li>JavaScript (ES6+)</li>
|
||
<li>DOM-Manipulation</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Backend</h3>
|
||
<ul>
|
||
<li>Python 3</li>
|
||
<li>Flask</li>
|
||
<li>RESTful APIs</li>
|
||
<li>SQL-Datenbanken</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Infrastruktur</h3>
|
||
<ul>
|
||
<li>Linux Server (Ubuntu)</li>
|
||
<li>SSH-Zugang</li>
|
||
<li>Dateiserver (public_html)</li>
|
||
<li>SFTP/SCP</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>📁 Projektstruktur</h2>
|
||
<p>Die Website folgt einer klaren, wartbaren Verzeichnisstruktur:</p>
|
||
<pre><code>~/public_html/
|
||
├── index.html
|
||
├── kontakt.html
|
||
├── ueber_uns.html
|
||
├── eis_projekt.html
|
||
├── impressum.html
|
||
├── css/
|
||
│ └── style.css
|
||
├── js/
|
||
│ └── script.js
|
||
├── img/
|
||
│ ├── logo.svg
|
||
│ └── favicon.png
|
||
└── assets/
|
||
└── projektinfo.pdf</code></pre>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>🎨 Design-Prinzipien</h2>
|
||
<ul>
|
||
<li><strong>Responsives Design:</strong> Optimiert für Mobile, Tablet und Desktop</li>
|
||
<li><strong>Semantisches HTML:</strong> Barrierefreiheit und SEO</li>
|
||
<li><strong>Clean Code:</strong> Lesbare und wartbare Struktur</li>
|
||
<li><strong>Konsistentes Styling:</strong> Zentralisierte CSS-Verwaltung</li>
|
||
<li><strong>User Experience:</strong> Interaktive Elemente und angenehme Navigation</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>⚙️ Funktionen</h2>
|
||
<div class="cards">
|
||
<div class="card">
|
||
<h3>Navigation</h3>
|
||
<p>Einheitliche Navigation auf allen Seiten mit aktiv-Zustand</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Responsive Layout</h3>
|
||
<p>CSS Grid und Flexbox für flexible Layouts auf allen Geräten</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Lightbox-Galerie</h3>
|
||
<p>Interaktive Bildergalerie mit Modal-Ansicht (JavaScript)</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Kontaktformular</h3>
|
||
<p>Frontend-Validierung und Backend-Integration (kommend)</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>🌐 Deployment</h2>
|
||
<p>Die Website ist live unter:</p>
|
||
<div class="download-section">
|
||
<p><strong>Live-URL:</strong> isa##.edumake.de</p>
|
||
<p><em>(## wird durch die Benutzernummer ersetzt)</em></p>
|
||
</div>
|
||
<p>Alle Änderungen im Verzeichnis sind sofort live – so geht moderne Web-Entwicklung! 🚀</p>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>📝 Projektressourcen</h2>
|
||
<p>Folgende Materialien unterstützen die Entwicklung:</p>
|
||
<div class="download-section">
|
||
<a href="assets/projektinfo.pdf" download class="btn btn-download">📄 Projektinfo herunterladen (PDF)</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>🚀 Entwicklungsschritte</h2>
|
||
<ol>
|
||
<li><strong>U1:</strong> Website-Struktur und erste HTML-Seite</li>
|
||
<li><strong>U2:</strong> Styling mit CSS und interaktive JavaScript-Elemente</li>
|
||
<li><strong>U3:</strong> Mehrseitige Website mit Navigation und Inhaltsstruktur (aktuell)</li>
|
||
<li><strong>U4:</strong> Backend mit Python und Flask hinzufügen</li>
|
||
<li><strong>U5+:</strong> Datenbankanbindung, APIs, erweiterte Funktionen</li>
|
||
</ol>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>📸 Bildergalerie</h2>
|
||
<p>Hier können später Screenshots und Bilder des Projekts eingefügt werden:</p>
|
||
<div class="galerie">
|
||
<!-- Bilder werden hier eingefügt, wenn verfügbar -->
|
||
<p style="grid-column: 1 / -1; color: #64748b;">Bildergalerie wird nach dem Hochladen von Bildern gefüllt.</p>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer>
|
||
<p>© 2026 – Made with 💕 & ✨ – David & Karo</p>
|
||
<div class="footer-links">
|
||
<a href="impressum.html">Impressum</a>
|
||
<a href="kontakt.html">Kontakt</a>
|
||
<a href="#">Datenschutz</a>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="js/script.js"></script>
|
||
</body>
|
||
</html>
|