157 lines
6.8 KiB
HTML
157 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Bibliotheks-Hub</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<div id="auth-section" class="auth-modal hidden">
|
|
<div class="auth-container">
|
|
<div id="login-form" class="auth-form">
|
|
<div class="auth-box">
|
|
<h1>Bibliotheks-Hub</h1>
|
|
<p>Digitale Bibliotheksverwaltung</p>
|
|
<input type="text" id="login-username" placeholder="Benutzername" class="input-field">
|
|
<input type="password" id="login-password" placeholder="Passwort" class="input-field">
|
|
<button onclick="handleLogin()" class="btn-primary">Anmelden</button>
|
|
<p class="toggle-link">Neu hier? <a href="#" onclick="toggleAuthForm()">Konto erstellen</a></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="register-form" class="auth-form hidden">
|
|
<div class="auth-box">
|
|
<h1>Bibliotheks-Hub</h1>
|
|
<p>Erstelle dein Konto</p>
|
|
<input type="text" id="register-username" placeholder="Benutzername" class="input-field">
|
|
<input type="email" id="register-email" placeholder="E-Mail" class="input-field">
|
|
<input type="password" id="register-password" placeholder="Passwort" class="input-field">
|
|
<input type="text" id="register-fullname" placeholder="Vollständiger Name" class="input-field">
|
|
<button onclick="handleRegister()" class="btn-primary">Konto erstellen</button>
|
|
<p class="toggle-link">Bereits ein Konto? <a href="#" onclick="toggleAuthForm()">Anmelden</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main App -->
|
|
<div id="app-section">
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar">
|
|
<div class="sidebar-header">
|
|
<h2>Library</h2>
|
|
</div>
|
|
<nav class="sidebar-nav">
|
|
|
|
<button onclick="switchTab('dashboard')" class="nav-item active" id="tab-dashboard">
|
|
Startseite
|
|
</button>
|
|
|
|
<button onclick="switchTab('books')" class="nav-item" id="tab-books">
|
|
Durchsuchen
|
|
</button>
|
|
|
|
<button onclick="switchTab('my-books')" class="nav-item" id="tab-my-books">
|
|
Meine Bücher
|
|
</button>
|
|
|
|
<button onclick="switchTab('history')" class="nav-item" id="tab-history">
|
|
Verlauf
|
|
</button>
|
|
|
|
<button onclick="switchTab('admin')" class="nav-item" id="tab-admin" style="display:none;">
|
|
Verwaltung
|
|
</button>
|
|
|
|
</nav>
|
|
<div class="sidebar-footer">
|
|
<p id="welcome-sidebar"></p>
|
|
<button onclick="logout()" class="btn-logout">Abmelden</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<!-- Dashboard Tab -->
|
|
<div id="dashboard-tab" class="tab-content">
|
|
<div class="page-header">
|
|
<h1>Neuigkeiten</h1>
|
|
</div>
|
|
<div id="news-container" class="news-grid"></div>
|
|
</div>
|
|
|
|
<!-- Browse Books Tab -->
|
|
<div id="books-tab" class="tab-content hidden">
|
|
<div class="page-header">
|
|
<h1>Bücher durchsuchen</h1>
|
|
</div>
|
|
<div class="search-bar">
|
|
<input type="text" id="search-books" placeholder="Bücher suchen..." class="input-field" onkeyup="renderBooks()">
|
|
<select id="filter-status" class="select-field" onchange="renderBooks()">
|
|
<option value="all">Alle</option>
|
|
<option value="available">Verfügbar</option>
|
|
<option value="borrowed">Ausgeliehen</option>
|
|
</select>
|
|
<select id="filter-genre" class="select-field" onchange="renderBooks()">
|
|
<option value="">Alle Genres</option>
|
|
</select>
|
|
</div>
|
|
<div id="book-list" class="books-container"></div>
|
|
</div>
|
|
|
|
<!-- My Books Tab -->
|
|
<div id="my-books-tab" class="tab-content hidden">
|
|
<div class="page-header">
|
|
<h1>Meine ausgeliehenen Bücher</h1>
|
|
</div>
|
|
<div id="borrow-timer">
|
|
<div id="timer-text">Nächste Fälligkeit: --</div>
|
|
<div class="timer-bar">
|
|
<div id="timer-progress"></div>
|
|
</div>
|
|
</div>
|
|
<div id="my-books-list" class="books-container"></div>
|
|
</div>
|
|
|
|
<!-- History Tab -->
|
|
<div id="history-tab" class="tab-content hidden">
|
|
<div class="page-header">
|
|
<h1>Ausleihverlauf</h1>
|
|
</div>
|
|
<div style="display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 15px;">
|
|
<select id="history-filter" class="select-field" onchange="renderHistory()">
|
|
<option value="all">Alle</option>
|
|
<option value="returned">Zurückgegeben</option>
|
|
<option value="borrowed">Aktuell ausgeliehen</option>
|
|
</select>
|
|
<button onclick="clearHistory()" class="btn-clear">Verlauf löschen</button>
|
|
</div>
|
|
<div id="history-list" class="history-container"></div>
|
|
</div>
|
|
|
|
<!-- Admin Tab -->
|
|
<div id="admin-tab" class="tab-content hidden">
|
|
<div class="page-header">
|
|
<h1>Admin-Bereich</h1>
|
|
</div>
|
|
<div class="admin-section">
|
|
<h2>Neues Buch hinzufügen</h2>
|
|
<div class="form-grid">
|
|
<input type="text" id="admin-title" placeholder="Titel" class="input-field">
|
|
<input type="text" id="admin-author" placeholder="Autor" class="input-field">
|
|
<input type="text" id="admin-genre" placeholder="Genre" class="input-field">
|
|
<input type="number" id="admin-quantity" placeholder="Anzahl" class="input-field" value="1">
|
|
<button onclick="addBookAdmin()" class="btn-primary">Buch hinzufügen</button>
|
|
</div>
|
|
</div>
|
|
<h2 style="margin-top: 30px;">Alle Bücher</h2>
|
|
<div id="admin-book-list" class="books-container"></div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |