leyonad.github.io/chapter-viewer.html at main · Leyonad/leyonad.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title data-page-title="Kapitel">Kapitel</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Poppins:wght@300;400;600&display=swap"
          rel="stylesheet">
    <script>
        (function () {
            const theme = localStorage.getItem('theme');
            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
            if (theme === 'dark' || (!theme && prefersDark)) {
                document.documentElement.classList.add('dark-mode');
            }
            document.addEventListener('DOMContentLoaded', () => {
                if (document.documentElement.classList.contains('dark-mode')) {
                    document.body.classList.add('dark-mode');
                }
            });
        })();
    </script>
    <!-- Marked.js Bibliothek für Markdown-Konvertierung -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>

<body>
<div id="reading-progress" class="reading-progress-bar" aria-hidden="true"></div>

<header class="site-header">
    <div class="header-pill">
        <div class="logo"><a href="index.html" data-config="websiteName">Lädt...</a></div>
        <div class="header-right">
            <div id="mobile-sidebar" class="sidebar-nav">
                <nav class="main-nav">
                    <ul>
                        <li><a href="index.html" data-config="navHome">Startseite</a></li>
                        <li><a href="geschichten.html" data-config="navStories">Geschichten</a></li>
                        <li><a href="gedichte.html" data-config="navPoems">Gedichte</a></li>
                        <li><a href="gedichtsromane.html" data-config="navPoeticNovels">Gedichtsromane</a></li>
                        <li><a href="ueber-mich.html" data-config="navAbout">Über mich</a></li>
                    </ul>
                </nav>
            </div>
            <button id="dark-mode-toggle" class="theme-toggle-btn" aria-label="Farbschema wechseln">
                <svg class="theme-icon icon-moon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
                <svg class="theme-icon icon-sun" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
                <span class="theme-label">Theme</span>
            </button>
            <button id="mobile-menu-toggle" class="mobile-menu-button" aria-label="Menü öffnen" aria-expanded="false">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
    </div>
</header>

<!-- Overlay für Sidebar -->
<div id="sidebar-overlay" class="sidebar-overlay"></div>

<main>
    <div class="reader-header-bar container">
        <nav id="breadcrumb-nav" aria-label="Breadcrumb">
            <!-- Breadcrumbs werden hier dynamisch von JS eingefügt -->
            <p>Navigation wird geladen...</p>
        </nav>
        <div class="reader-tools" aria-label="Lese-Einstellungen">
            <span class="reader-tools-label">Text:</span>
            <button id="btn-font-smaller" class="reader-tool-btn" title="Schrift verkleinern" aria-label="Schrift verkleinern">A-</button>
            <button id="btn-font-larger" class="reader-tool-btn" title="Schrift vergrößern" aria-label="Schrift vergrößern">A+</button>
            <button id="btn-font-toggle" class="reader-tool-btn font-toggle-btn" title="Schriftart wechseln (Serif / Sans)" aria-label="Schriftart wechseln">Serif</button>
        </div>
    </div>

    <article id="content-area" class="container">
        <div id="content-text" class="main-content">
            <!-- Kapitelinhalt wird hier dynamisch geladen -->
            <p data-config="loadingText">Kapitel wird geladen...</p>
        </div>
    </article>

    <nav class="chapter-nav container" aria-label="Kapitelnavigation">
        <button id="prev-chapter" disabled>« Vorheriges Kapitel</button>
        <span id="chapter-indicator"></span>
        <button id="next-chapter" disabled>Nächstes Kapitel »</button>
    </nav>
</main>
<footer class="site-footer">
    <div class="container">
        <p>© <span id="copyright-year"></span> <span data-config="authorName">Autor</span>. <span
                data-config="footerCopyrightText">Alle Rechte
                    vorbehalten</span>.</p>
        <p class="footer-contact">Kontakt: <a href="mailto:danielholzknecht1@gmail.com">danielholzknecht1@gmail.com</a>
        </p>
    </div>
</footer>
<script src="assets/js/config.js"></script>
<script src="assets/js/main.js"></script>
</body>

</html>