ciyoku.github.io/reader.html at main · Ciyoku/ciyoku.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
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="ar" dir="rtl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>القارئ | المكتبة الأخبارية</title>
    <meta name="description" content="قارئ المكتبة الأخبارية لقراءة الكتب العربية مع فهرس فصول وبحث داخل النص.">
    <link rel="canonical" href="https://ciyoku.github.io/reader.html">
    <meta name="theme-color" content="#08090b">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicon/favicon-16x16.png">
    <link rel="shortcut icon" href="/assets/img/favicon/favicon.ico">
    <link rel="manifest" href="/assets/img/favicon/site.webmanifest">
    <meta name="referrer" content="strict-origin-when-cross-origin">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; base-uri 'self'; object-src 'none'; frame-ancestors 'none'; frame-src 'none'; form-action 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self'; manifest-src 'self'; worker-src 'self'; media-src 'self'; upgrade-insecure-requests">
    <meta http-equiv="X-Content-Type-Options" content="nosniff">
    <meta http-equiv="Permissions-Policy" content="geolocation=(), microphone=(), camera=()">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/reader.css">
</head>

<body>
    <a class="skip-link" href="#readerContent">تجاوز إلى نص الكتاب</a>

    <header class="site-header">
        <div class="logo">
            <a href="index.html" class="back-link">
                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                    <path d="M10 5l7 7-7 7"></path>
                    <path d="M4 12h13"></path>
                </svg>
                <span>العودة للمكتبة</span>
            </a>
        </div>


        <div id="bookTitleDisplay" class="reader-title" aria-live="polite">...</div>

        <div class="nav-icons">
            <button type="button" class="icon reader-download-btn" id="readerDownloadBtn" aria-label="تنزيل الكتاب للاستخدام دون اتصال" title="تنزيل الكتاب للاستخدام دون اتصال">
                <span class="reader-download-icon" data-lucide="book-down" aria-hidden="true"></span>
            </button>
            <button type="button" class="icon" id="searchBtn" title="بحث في الكتاب" aria-label="فتح البحث" aria-controls="searchOverlay" aria-expanded="false">
                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                    <circle cx="11" cy="11" r="7"></circle>
                    <path d="M20 20l-3.5-3.5"></path>
                </svg>
            </button>
            <button type="button" class="icon" id="sidebarToggle" title="قائمة الفصول" aria-label="فتح أو إغلاق قائمة الفصول" aria-controls="sidebar" aria-expanded="false">
                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                    <path d="M9 6h11"></path>
                    <path d="M9 12h11"></path>
                    <path d="M9 18h11"></path>
                    <circle cx="4.5" cy="6" r="1"></circle>
                    <circle cx="4.5" cy="12" r="1"></circle>
                    <circle cx="4.5" cy="18" r="1"></circle>
                </svg>
            </button>
            <button type="button" class="icon theme-toggle" data-theme-toggle aria-label="التبديل إلى الوضع الفاتح" title="التبديل إلى الوضع الفاتح" aria-pressed="true">
                <span class="theme-toggle-icon theme-icon-light" data-lucide="sun" aria-hidden="true"></span>
                <span class="theme-toggle-icon theme-icon-dark" data-lucide="moon" aria-hidden="true"></span>
            </button>
        </div>
    </header>

    <main class="reader-main" id="mainContent">
        <h1 class="sr-only">قارئ الكتب</h1>

        <div class="reader-layout">
            <section class="reader-content full-width" id="readerContent" aria-live="polite" aria-label="نص الكتاب">
                <div class="loading" role="status" aria-live="polite" aria-label="Loading">
                    <span class="ios-loader ios-loader-lg ios-loader-accent" aria-hidden="true"></span>
                </div>
            </section>

            <aside class="sidebar hidden" id="sidebar" aria-hidden="true" aria-label="فهرس الفصول">
                <div class="sidebar-title">
                    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                        <path d="M9 6h11"></path>
                        <path d="M9 12h11"></path>
                        <path d="M9 18h11"></path>
                        <circle cx="4.5" cy="6" r="1"></circle>
                        <circle cx="4.5" cy="12" r="1"></circle>
                        <circle cx="4.5" cy="18" r="1"></circle>
                    </svg>
                    الفهرس
                </div>
                <ul class="chapter-list" id="chapterList"></ul>
            </aside>

            <div class="search-overlay" id="searchOverlay" role="dialog" aria-modal="true" aria-labelledby="searchHeading" aria-hidden="true">
                <div class="search-overlay-header">
                    <h2 id="searchHeading">بحث</h2>
                    <button type="button" class="icon" id="closeSearch" aria-label="إغلاق البحث">
                        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                            <path d="M6 6l12 12"></path>
                            <path d="M18 6L6 18"></path>
                        </svg>
                    </button>
                </div>
                <input type="text" id="searchInput" class="search-input" placeholder="ابحث في هذا الكتاب..." aria-describedby="searchHint">
                <div id="searchHint" class="search-hint" aria-live="polite"></div>
                <div class="search-results" id="searchResults" role="listbox" aria-label="نتائج البحث"></div>
            </div>
        </div>
    </main>
<script type="module" src="js/app.js"></script>
    <script type="module" src="js/shared/site-shell.js"></script>
</body>

</html>