Uaman · LitvinchukRoman · Jun 18, 2025 · Jun 18, 2025 · Jun 22, 2025 · Jun 25, 2025
diff --git a/assets/1984.png b/assets/1984.png
diff --git a/assets/amelie.png b/assets/amelie.png
diff --git a/assets/catcher.png b/assets/catcher.png
diff --git a/assets/devops.png b/assets/devops.png
diff --git a/assets/getsby.png b/assets/getsby.png
diff --git a/assets/graf.png b/assets/graf.png
diff --git a/assets/hobbit.png b/assets/hobbit.png
diff --git a/assets/method.png b/assets/method.png
diff --git a/assets/physics.png b/assets/physics.png
diff --git a/assets/sapiens.png b/assets/sapiens.png
diff --git a/assets/sunMachine.png b/assets/sunMachine.png
diff --git a/assets/toKill.png b/assets/toKill.png
diff --git a/assets/zarathustra.png b/assets/zarathustra.png
diff --git a/data/books.json b/data/books.json
@@ -0,0 +1,101 @@
+[
+  {
+    "title": "The DevOps handbook",
+    "author": "Gene Kim",
+    "genre": "Scientific",
+    "year": 2016,
+    "language": "English",
+    "image": "assets/devops.png",
+    "description": "Increase profitability, elevate work culture, and exceed productivity goals through DevOps practices."
+  },
+  {
+    "title": "Graf Monte-Cristo",
+    "author": "Alexandre Dumas",
+    "genre": "Adventure",
+    "year": 1844,
+    "language": "French",
+    "image": "assets/graf.png",
+    "description": "Revenge and redemption tale."
+  },
+  {
+    "title": "Discourse on Method",
+    "author": "Rene Descartes",
+    "genre": "Philosophy",
+    "year": 1637,
+    "language": "French",
+    "image": "assets/method.png",
+    "description": "Foundation of modern philosophy."
+  },
+  {
+    "title": "Thus Spoke Zarathustra",
+    "author": "Friedrich Nietzsche",
+    "genre": "Philosophy",
+    "year": 1883,
+    "language": "German",
+    "image": "assets/zarathustra.png",
+    "description": "Philosophical novel by Nietzsche."
+  },
+  {
+    "title": "Сонячна Машина",
+    "author": "Володимир Винниченко",
+    "genre": "Novel",
+    "year": 1928,
+    "language": "Українська",
+    "image": "assets/sunMachine.png",
+    "description": "Сонячна машина» Володимира Винниченка — це утопічно-фантастичний роман про побудову нового суспільства."
+  },
+  {
+    "title": "Загальний курс фізики",
+    "author": "Іван Кучерук",
+    "genre": "Scientific",
+    "year": 1999,
+    "language": "Українська",
+    "image": "assets/physics.png",
+    "description": "Перший том про молекулярну фізику."
+  },
+  {
+    "title": "Amelie",
+    "author": "Jean-Pierre Jeunet",
+    "genre": "Romance",
+    "year": 2001,
+    "language": "French",
+    "image": "assets/amelie.png",
+    "description": "Film about a shy, imaginative young woman in Paris who finds joy in secretly improving the lives of others while quietly longing for love herself.."
+  },
+  {
+    "title": "The Great Gatsby",
+    "author": "F. Scott Fitzgerald",
+    "genre": "Novel",
+    "year": 1925,
+    "language": "English",
+    "image": "assets/getsby.png",
+    "description": "A novel about the American dream."
+  },
+  {
+    "title": "To Kill a Mockingbird",
+    "author": "Harper Lee",
+    "genre": "Drama",
+    "year": 1960,
+    "language": "English",
+    "image": "assets/toKill.png",
+    "description": "A story about racial injustice."
+  },
+  {
+    "title": "1984",
+    "author": "George Orwell",
+    "genre": "Dystopian",
+    "year": 1949,
+    "language": "English",
+    "image": "assets/1984.png",
+    "description": "A vision of totalitarian future."
+  },
+  {
+    "title": "The Hobbit",
+    "author": "J.R.R. Tolkien",
+    "genre": "Fantasy",
+    "year": 1937,
+    "language": "English",
+    "image": "assets/hobbit.png",
+    "description": "A journey through Middle-earth."
+  }
+]
diff --git a/index.html b/index.html
@@ -8,6 +8,71 @@
     <script src="./src/main.js" defer></script>
 </head>
 <body>
+    <header class="header">
+        <h1 class="header-title">Online Book Library</h1>
+        <div class="filter-sort-controls">
+            <button class="filter-btn">Filter</button>
+            <select class="sort-btn-mobile">
+                <option value="" disabled selected>Sort by:</option>
+                <option value="year">Year</option>
+                <option value="genre">Genre</option>
+            </select>
+        </div>
+        <button class="favorites-button">Улюблені</button>
+        <button class="back-button hidden">Назад</button>
+        <a href="report.html" class="report-button">Звіт</a>
+        <button class="sign-in-button">Sign In</button>
+    </header>
 
+    <main class="container">
+        <aside class="sidebar">
+            <div class="filter-section">
+                <h2>Filter</h2>
+                <div class="filter-group" id="genre">
+                    <h3>Genre</h3>
+                </div>
+                <div class="filter-group">
+                    <h3>Author</h3>
+                    <input type="text" placeholder="Enter author" class="author-input">
+                </div>
+                <div class="filter-group" id="year">
+                    <h3>Year</h3>
+                </div>
+                <div class="filter-group" id="language">
+                    <h3>Language</h3>
+                </div>
+            </div>
+        </aside>
+
+        <section class="book-list-section">
+            <div class="book-list-header">
+                <h2>Pillar</h2>
+                <div class="sort-by">
+                    <select>
+                        <option value="" disabled selected>Sort by:</option>
+                        <option value="year">Year</option>
+                        <option value="genre">Genre</option>
+                    </select>
+                </div>
+            </div>
+
+            <div class="book-grid">
+
+            </div>
+        </section>
+    </main>
+
+    <div id="book-popup" class="popup hidden">
+        <div class="popup-content">
+            <span class="close-button">&times;</span>
+            <img id="popup-image" src="" alt="Book Cover">
+            <h3 id="popup-title"></h3>
+            <p id="popup-author"></p>
+            <p id="popup-year"></p>
+            <p id="popup-language"></p>
+            <p id="popup-genre"></p>
+            <button id="add-favorite-button">Add to Favorites</button>
+        </div>
+    </div>
 </body>
 </html>
diff --git a/report.html b/report.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="uk">
+<head>
+    <meta charset="UTF-8">
+    <title>Звіт по книгах</title>
+    <link rel="stylesheet" href="./style/style.css">
+    <link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
+    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
+    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
+</head>
+<body>
+<header class="header">
+    <h1 class="header-title">Звіт про книги</h1>
+    <a href="index.html" class="report-button">Назад до бібліотеки</a>
+</header>
+
+<div id="wdr-component"></div>
+
+<script>
+    const favoriteBooks = JSON.parse(localStorage.getItem("favoriteBooks")) || [];
+
+    fetch('./data/books.json')
+        .then(response => response.json())
+        .then(data => {
+            const booksWithFavorites = data.map(book => ({
+                Назва: book.title,
+                Автор: book.author,
+                Жанр: book.genre,
+                Мова: book.language,
+                Рік: book.year,
+                Улюблені: favoriteBooks.some(fav => fav.title === book.title) ? "так" : "ні"
+            }));
+
+            new WebDataRocks({
+                container: "#wdr-component",
+                toolbar: true,
+                report: {
+                    dataSource: {
+                        data: booksWithFavorites
+                    },
+                    slice: {
+                        rows: [
+                            { uniqueName: "Назва" },
+                            { uniqueName: "Автор" },
+                            { uniqueName: "Жанр" },
+                            { uniqueName: "Мова" },
+                            { uniqueName: "Рік" },
+                            { uniqueName: "Улюблені" }
+                        ],
+                        columns: [{ uniqueName: "[Measures]" }],
+                        measures: [
+                            {
+                                uniqueName: "Кількість",
+                                aggregation: "count"
+                            }
+                        ]
+                    },
+                    options: {
+                        grid: {
+                            type: "flat", // Плоска таблиця
+                            showFilter: true,
+                            showHeaders: true,
+                            showTotals: "off",
+                            showGrandTotals: "off"
+                        }
+                    }
+                }
+            });
+        });
+</script>
+</body>
+</html>