Spaces:
Running
Running
Update Team_Bookie.html
Browse files- Team_Bookie.html +135 -134
Team_Bookie.html
CHANGED
|
@@ -1,135 +1,136 @@
|
|
| 1 |
-
<!DOCTYPE html>
|
| 2 |
-
<html lang="de">
|
| 3 |
-
<head>
|
| 4 |
-
<meta charset="UTF-8">
|
| 5 |
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
-
<title>Team Bookie</title>
|
| 7 |
-
<link rel="icon" type="image/png" href="./favicon/favicon-96x96.png" sizes="96x96" />
|
| 8 |
-
<link rel="icon" type="image/svg+xml" href="./favicon/favicon.svg" />
|
| 9 |
-
<link rel="shortcut icon" href="./favicon/favicon.ico" />
|
| 10 |
-
<link rel="apple-touch-icon" sizes="180x180" href="./favicon/apple-touch-icon.png" />
|
| 11 |
-
<link rel="manifest" href="./favicon/site.webmanifest" />
|
| 12 |
-
|
| 13 |
-
<link rel="stylesheet" href="styleTB.css">
|
| 14 |
-
|
| 15 |
-
<script>
|
| 16 |
-
document.addEventListener('DOMContentLoaded', function() {
|
| 17 |
-
const cards = document.querySelectorAll('.card:not(.project-bookie)');
|
| 18 |
-
const popups = document.querySelectorAll('.popup');
|
| 19 |
-
const closeBtns = document.querySelectorAll('.close-btn');
|
| 20 |
-
|
| 21 |
-
cards.forEach((card, index) => {
|
| 22 |
-
card.addEventListener('click', function() {
|
| 23 |
-
popups[index].style.display = 'block';
|
| 24 |
-
});
|
| 25 |
-
});
|
| 26 |
-
|
| 27 |
-
closeBtns.forEach((btn, index) => {
|
| 28 |
-
btn.addEventListener('click', function() {
|
| 29 |
-
popups[index].style.display = 'none';
|
| 30 |
-
});
|
| 31 |
-
});
|
| 32 |
-
});
|
| 33 |
-
</script>
|
| 34 |
-
</head>
|
| 35 |
-
<body>
|
| 36 |
-
<!-- Kopfzeile der Seite -->
|
| 37 |
-
<header id="header">
|
| 38 |
-
<div class="logo">
|
| 39 |
-
<img src="Logo_Bookie.png" alt="Bookie">
|
| 40 |
-
<h1>Team Bookie</h1>
|
| 41 |
-
</div>
|
| 42 |
-
<div class="burger-menu">
|
| 43 |
-
<button>☰</button>
|
| 44 |
-
<div class="dropdown-content">
|
| 45 |
-
<a href="BookiesBuchberatung.html">Bookies Buchberatung</a>
|
| 46 |
-
<a href="index.html">BookiesNook</a>
|
| 47 |
-
<a href="Team_Bookie.html" class="current">Team Bookie</a>
|
| 48 |
-
</div>
|
| 49 |
-
</div>
|
| 50 |
-
</header>
|
| 51 |
-
|
| 52 |
-
<!-- Hauptinhalt der Seite -->
|
| 53 |
-
<!-- Abstandselement -->
|
| 54 |
-
<div class="spacer">Test</div>
|
| 55 |
-
<div class="content">
|
| 56 |
-
<!-- Karte für Mitglied 1 -->
|
| 57 |
-
<div class="card">
|
| 58 |
-
<img src="./pbTB/pb_Franziska.png" alt="Mitglied 1">
|
| 59 |
-
<h3>Franziska</h3>
|
| 60 |
-
<p>Fantasylover und Bookdragon</p>
|
| 61 |
-
</div>
|
| 62 |
-
<div class="popup">
|
| 63 |
-
<button class="close-btn">x</button>
|
| 64 |
-
<img src="./pbTB/pb_Franziska.png" alt="Mitglied 1">
|
| 65 |
-
<h3>Franziska</h3>
|
| 66 |
-
<p>Fantasylover und Bookdragon mit zu wenig Bücherregalen</p>
|
| 67 |
-
<p>in komplizierten Fantasybüchern bin ich zu Hause, aber eigentlich alles was anspruchsvoll, kompliziert und nicht direkt eindeutig verständlich</p>
|
| 68 |
-
<p>Lesen zu können, war seit klein auf ein wichtiges Ziel und so hab ich konstant zu wenig Platz in meinen Bücherregalen</p>
|
| 69 |
-
</div>
|
| 70 |
-
|
| 71 |
-
<!-- Karte für Mitglied 2 -->
|
| 72 |
-
<div class="card">
|
| 73 |
-
<img src="./pbTB/pb_Katharina.png" alt="Mitglied 2">
|
| 74 |
-
<h3>Katharina</h3>
|
| 75 |
-
<p>Young Adult Experte</p>
|
| 76 |
-
</div>
|
| 77 |
-
<div class="popup">
|
| 78 |
-
<button class="close-btn">x</button>
|
| 79 |
-
<img src="./pbTB/pb_Katharina.png" alt="Mitglied 2">
|
| 80 |
-
<h3>Katharina</h3>
|
| 81 |
-
<p>Young Adult Experte</p>
|
| 82 |
-
<p>Sie verfügt über umfangreiche Kenntnisse und Erfahrungen im Bereich der Young und New Adult Literatur</p>
|
| 83 |
-
<p>Da sie immer up to date mit literarischen Trends ist, hat sie keinen Platz in ihrem Zimmer für neue Bücher, teilt ihr wissen dafür umsogerne auf BookiesNook</p>
|
| 84 |
-
</div>
|
| 85 |
-
|
| 86 |
-
<!-- Karte für Mitglied 3 -->
|
| 87 |
-
<div class="card">
|
| 88 |
-
<img src="./pbTB/pb_oliwia.jpg" alt="Mitglied 3">
|
| 89 |
-
<h3>Oliwia</h3>
|
| 90 |
-
<p>
|
| 91 |
-
</div>
|
| 92 |
-
<div class="popup">
|
| 93 |
-
<button class="close-btn">x</button>
|
| 94 |
-
<img src="./pbTB/pb_oliwia.jpg" alt="Mitglied 3">
|
| 95 |
-
<h3>Oliwia</h3>
|
| 96 |
-
<p>
|
| 97 |
-
<p>
|
| 98 |
-
|
| 99 |
-
|
| 100 |
-
|
| 101 |
-
<
|
| 102 |
-
|
| 103 |
-
<
|
| 104 |
-
<
|
| 105 |
-
|
| 106 |
-
<div
|
| 107 |
-
|
| 108 |
-
<
|
| 109 |
-
<
|
| 110 |
-
<
|
| 111 |
-
<p>
|
| 112 |
-
|
| 113 |
-
|
| 114 |
-
|
| 115 |
-
|
| 116 |
-
|
| 117 |
-
|
| 118 |
-
|
| 119 |
-
<
|
| 120 |
-
|
| 121 |
-
<
|
| 122 |
-
<p>
|
| 123 |
-
<p>
|
| 124 |
-
<p>
|
| 125 |
-
<p>
|
| 126 |
-
<p>
|
| 127 |
-
<p>
|
| 128 |
-
|
| 129 |
-
|
| 130 |
-
|
| 131 |
-
<
|
| 132 |
-
|
| 133 |
-
|
| 134 |
-
</
|
|
|
|
| 135 |
</html>
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="de">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Team Bookie</title>
|
| 7 |
+
<link rel="icon" type="image/png" href="./favicon/favicon-96x96.png" sizes="96x96" />
|
| 8 |
+
<link rel="icon" type="image/svg+xml" href="./favicon/favicon.svg" />
|
| 9 |
+
<link rel="shortcut icon" href="./favicon/favicon.ico" />
|
| 10 |
+
<link rel="apple-touch-icon" sizes="180x180" href="./favicon/apple-touch-icon.png" />
|
| 11 |
+
<link rel="manifest" href="./favicon/site.webmanifest" />
|
| 12 |
+
|
| 13 |
+
<link rel="stylesheet" href="styleTB.css">
|
| 14 |
+
|
| 15 |
+
<script>
|
| 16 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 17 |
+
const cards = document.querySelectorAll('.card:not(.project-bookie)');
|
| 18 |
+
const popups = document.querySelectorAll('.popup');
|
| 19 |
+
const closeBtns = document.querySelectorAll('.close-btn');
|
| 20 |
+
|
| 21 |
+
cards.forEach((card, index) => {
|
| 22 |
+
card.addEventListener('click', function() {
|
| 23 |
+
popups[index].style.display = 'block';
|
| 24 |
+
});
|
| 25 |
+
});
|
| 26 |
+
|
| 27 |
+
closeBtns.forEach((btn, index) => {
|
| 28 |
+
btn.addEventListener('click', function() {
|
| 29 |
+
popups[index].style.display = 'none';
|
| 30 |
+
});
|
| 31 |
+
});
|
| 32 |
+
});
|
| 33 |
+
</script>
|
| 34 |
+
</head>
|
| 35 |
+
<body>
|
| 36 |
+
<!-- Kopfzeile der Seite -->
|
| 37 |
+
<header id="header">
|
| 38 |
+
<div class="logo">
|
| 39 |
+
<img src="Logo_Bookie.png" alt="Bookie">
|
| 40 |
+
<h1>Team Bookie</h1>
|
| 41 |
+
</div>
|
| 42 |
+
<div class="burger-menu">
|
| 43 |
+
<button>☰</button>
|
| 44 |
+
<div class="dropdown-content">
|
| 45 |
+
<a href="BookiesBuchberatung.html">Bookies Buchberatung</a>
|
| 46 |
+
<a href="index.html">BookiesNook</a>
|
| 47 |
+
<a href="Team_Bookie.html" class="current">Team Bookie</a>
|
| 48 |
+
</div>
|
| 49 |
+
</div>
|
| 50 |
+
</header>
|
| 51 |
+
|
| 52 |
+
<!-- Hauptinhalt der Seite -->
|
| 53 |
+
<!-- Abstandselement -->
|
| 54 |
+
<div class="spacer">Test</div>
|
| 55 |
+
<div class="content">
|
| 56 |
+
<!-- Karte für Mitglied 1 -->
|
| 57 |
+
<div class="card">
|
| 58 |
+
<img src="./pbTB/pb_Franziska.png" alt="Mitglied 1">
|
| 59 |
+
<h3>Franziska</h3>
|
| 60 |
+
<p>Fantasylover und Bookdragon</p>
|
| 61 |
+
</div>
|
| 62 |
+
<div class="popup">
|
| 63 |
+
<button class="close-btn">x</button>
|
| 64 |
+
<img src="./pbTB/pb_Franziska.png" alt="Mitglied 1">
|
| 65 |
+
<h3>Franziska</h3>
|
| 66 |
+
<p>Fantasylover und Bookdragon mit zu wenig Bücherregalen</p>
|
| 67 |
+
<p>in komplizierten Fantasybüchern bin ich zu Hause, aber eigentlich alles was anspruchsvoll, kompliziert und nicht direkt eindeutig verständlich</p>
|
| 68 |
+
<p>Lesen zu können, war seit klein auf ein wichtiges Ziel und so hab ich konstant zu wenig Platz in meinen Bücherregalen</p>
|
| 69 |
+
</div>
|
| 70 |
+
|
| 71 |
+
<!-- Karte für Mitglied 2 -->
|
| 72 |
+
<div class="card">
|
| 73 |
+
<img src="./pbTB/pb_Katharina.png" alt="Mitglied 2">
|
| 74 |
+
<h3>Katharina</h3>
|
| 75 |
+
<p>Young Adult Experte</p>
|
| 76 |
+
</div>
|
| 77 |
+
<div class="popup">
|
| 78 |
+
<button class="close-btn">x</button>
|
| 79 |
+
<img src="./pbTB/pb_Katharina.png" alt="Mitglied 2">
|
| 80 |
+
<h3>Katharina</h3>
|
| 81 |
+
<p>Young Adult Experte</p>
|
| 82 |
+
<p>Sie verfügt über umfangreiche Kenntnisse und Erfahrungen im Bereich der Young und New Adult Literatur</p>
|
| 83 |
+
<p>Da sie immer up to date mit literarischen Trends ist, hat sie keinen Platz in ihrem Zimmer für neue Bücher, teilt ihr wissen dafür umsogerne auf BookiesNook</p>
|
| 84 |
+
</div>
|
| 85 |
+
|
| 86 |
+
<!-- Karte für Mitglied 3 -->
|
| 87 |
+
<div class="card">
|
| 88 |
+
<img src="./pbTB/pb_oliwia.jpg" alt="Mitglied 3">
|
| 89 |
+
<h3>Oliwia</h3>
|
| 90 |
+
<p>Verliebt in Romance Geschichten</p>
|
| 91 |
+
</div>
|
| 92 |
+
<div class="popup">
|
| 93 |
+
<button class="close-btn">x</button>
|
| 94 |
+
<img src="./pbTB/pb_oliwia.jpg" alt="Mitglied 3">
|
| 95 |
+
<h3>Oliwia</h3>
|
| 96 |
+
<p>Sie ist verliebt in Romance Geschichten</p>
|
| 97 |
+
<p>Diese Liebe geht so weit, dass sich weigert ein Buch ohne ein Liebesplot zu lesen</p>
|
| 98 |
+
<p>Vom süßen Cozy Romance bis zum spicy Dark Romance liebt liest sie alles und glaubt ganz stark dran dass es im echten Leben auch solche Gentleman gibt wie in den Büchern</p>
|
| 99 |
+
</div>
|
| 100 |
+
|
| 101 |
+
<!-- Karte für Mitglied 4 -->
|
| 102 |
+
<div class="card">
|
| 103 |
+
<img src="./pbTB/pb_Bookie.png" alt="Mitglied 4">
|
| 104 |
+
<h3>Bookie</h3>
|
| 105 |
+
<p>mystischer Gastgeber</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="popup">
|
| 108 |
+
<button class="close-btn">x</button>
|
| 109 |
+
<img src="./pbTB/pb_Bookie.png" alt="Mitglied 4">
|
| 110 |
+
<h3>Bookie</h3>
|
| 111 |
+
<p>mystischer Gastgeber</p>
|
| 112 |
+
<p>In einer vergessenen Bibliothek lebt ein Buchgremlin namens Bookie. Er war aus den Seiten von Märchen und Abenteuern geboren und brachte die > Geschichten durcheinander (um neue Welten zu entdecken) Helden strandeten in Romanzen, Bösewichte wurden Köche und das Chaos hielt die Bücherwelt lebendig.
|
| 113 |
+
Eines Tages öffnete ein ahnungsloser Leser ein altes Buch und Bookie entkam in die reale Welt. In der modernen Stadt, voller Geräte ohne Seiten war er ratlos - bis er E-Reader und Smartphones entdeckte. Mit schelmischem Grinsen begann er diegitale Geschichten zu verändern - langweilige Texte wurden zu epischen Abenteuern, Romane zu witzigen Wirrwars.
|
| 114 |
+
Die Menschen waren begeistert von diesem "kreativen Updates" doch der Leser der ihn befreit hatte, erkannte die Wahrheit. Er versuchte verzweifelt Bookie zurückzubringen, bevor alle Texte der modernen Welt ins Chaos stürzen. Doch Bookie fand bereits größten Spaß daran den Menschen neue Abenteuer zu bringen und die Literatur mit seinen schelmischen Machenschaften in Atem zu halten.
|
| 115 |
+
So wie er dich nun heute auf der Suche nach einem neuen Abenteuer begleitet.</p>
|
| 116 |
+
</div>
|
| 117 |
+
</div>
|
| 118 |
+
|
| 119 |
+
<!-- Karte für Infos über Projekt -->
|
| 120 |
+
<div class="card project-bookie">
|
| 121 |
+
<h3>Projekt BookiesNook</h3>
|
| 122 |
+
<p>BookiesNook ist das neue Zuhause des kleinen Gremlins Bookie und ein Treffpunkt für Literaturliebende.</p>
|
| 123 |
+
<p>Hier geht es über Bücher im Themenbereich Young Adult und New Adult und insbesondre um Bücher aus dem Kyss Verlag.</p>
|
| 124 |
+
<p>BookiesNook ist von Bookies Team im Rahmen des Projektmodul Starts des Studiengangs Informatik und Design der MUC.DAI der Hochschule München entstanden.</p>
|
| 125 |
+
<p>Suchst du also nach neuen Abenteuern und Inspirationen, bist du hier genau richtig.</p>
|
| 126 |
+
<p>Wer möchte kann auch zur Erweiterung von Bookies Bibliothek und somit der Wissensgrundlage für Bookies Buchempfehlungen beitragen. So können eure Lieblingsgeschichten mit noch mehr Menschen geteilt werden.</p>
|
| 127 |
+
<p>aufgrund des Urherberrechts und diverser anderer Rechte, dürfen wir nichts außer der bibliographischen Daten der Bücher und eigens geschriebener Annotationen (deren Rechte wir übertragen bekommen haben) nutzen. So kann Bookie leider aktuell nur aufgrund dieser Daten Vorschläge liefern. Doch dank seinen uralten magischen Wissens über Bücher, kommen interesannte und einzigartige Vorschläge vor.</p>
|
| 128 |
+
<p>Wir büschen euch viel Spaß mit BookiesNook und allen neuen Abenteuern, die ihr hier so findet</p>
|
| 129 |
+
</div>
|
| 130 |
+
|
| 131 |
+
<!-- Fußzeile der Seite -->
|
| 132 |
+
<footer>
|
| 133 |
+
<p>© 2025 Team 09 WiSe 24/25 ID Hochschule München. Alle Rechte vorbehalten.</p>
|
| 134 |
+
</footer>
|
| 135 |
+
</body>
|
| 136 |
</html>
|