Create me a cool visualisation page for this data:

Abdolah, Kader De kraai 2011 Marokko M Nee Nederlands
Abdolah, Kader Salam Europa! 2016 Marokko M Nee Nederlands
Ableman, Paul I hear voices 1958 Verenigd Koninkrijk M Ja Engels
Akbar, Kaveh Martyr! 2024 Iran M Ja Engels
Albom, Mitch Tuesdays with Morrie 1997 Verenigde staten M Ja Engels
Alcott, Louisa May Little women 1868 Verenigde staten V Ja Engels
Alcott, Louisa May Good wives 1869 Verenigde staten V Ja Engels
Alcott, Louisa May Little men 1871 Verenigde staten V Ja Engels
Allen, Gary None dare call it conspiracy 1971 Verenigde staten M Nee Engels
Allende, Isabel Het huis met de geesten 1982 Peru V Nee Nederlands
Allende, Isabel Eva Luna 1987 Peru V Nee Nederlands
Allende, Isabel Paula 1994 Peru V Nee Nederlands
Allende, Isabel Portret in Sepia 2000 Peru V Nee Nederlands
Atwood, Margaret Blind assassin 2000 Canada V Nee Nederlands
Atwood, Margaret The testaments 2019 Canada V Ja Engels
Austen, Jane Sense and sensibility 1811 Verenigd Koninkrijk V Nee Engels
Austen, Jane Pride and prejudice 1813 Verenigd Koninkrijk V Nee Engels
Austen, Jane Mansfield Park 1814 Verenigd Koninkrijk V Nee Engels
Austen, Jane Emma 1815 Verenigd Koninkrijk V Nee Engels
Austen, Jane Northanger Abbey 1817 Verenigd Koninkrijk V Nee Engels
Austen, Jane Northanger Abbey 1817 Verenigd Koninkrijk V Nee Engels
Austen, Jane Persuasion 1817 Verenigd Koninkrijk V Nee Engels
Bakker, Jan-Hendrik In stilte 2015 Nederland M Nederlands
Barberry, Muriel Elegant als een egel 2006 Marokko V Nee Nederlands
Barnes, Julian Flaubert’s parrot 1984 Verenigd Koninkrijk M Nee Engels
Barrie, JM Peter Pan 1911 Verenigd Koninkrijk M Ja Engels
Bazterrica, Agustina Tender is the flesh 2017 Argentië V Ja Engels
Beauvoir, Simone de Uitgenodigd 1943 Frankrijk V Nee Nederlands
Beauvoir, Simone de Alle mensen zijn sterfelijk 1946 Frankrijk V Nee Nederlands
Beauvoir, Simone de The second sex 1949 Frankrijk V Ja Engels
Beauvoir, Simone de A very easy death 1964 Frankrijk V Ja Engels
Begley, Louis About Schmidt 2010 Oekraïne M Nee Engels
Beijnum, Kees van Het mooie seizoen 2017 Nederland M Nee Nederlands
Bellow, Saul Herzog 1964 Canada M Nee Engels
Bernlef, J Het begin van tranen 2008 Nederland M Nee Nederlands
Bernlef, J Cellojaren 1995 Nederland M Ja Nederlands
Bernlef, J De pianoman 2008 Nederland M Ja Nederlands
Bernlef, J Onder ijsbergen 1981 Nederland M Nederlands
Bernlef, J Vallende ster 1989 Nederland M Nederlands
Bernlef, J Buiten is het maandag 2003 Nederland M Nederlands
Bernlef, J Wit geld 2012 Nederland M Nederlands
Berry, Wendell Why I am not going to buy a computer 1987 Verenigde staten M Ja Engels
Bomans, Godfried Thomas Robert spoon verhalen en schetsen 1973 Nederland M Nee Nederlands
Bordewijk, F Karakter 1938 Nederland M Ja Nederlands
Botton, Alain de Status Anxiety 2004 Zwitserland M Ja Engels
Boudier-Bakker, Ina De klop op de deur 1930 Nederland V Nee Nederlands
Boyd, WIlliam Brazzaville beach 1990 Ghana M Ja Engels
Boye, Karin Kallocain 1940 Zweden V Ja Engels
Bradbury, Roy Fahrenheit 451 1953 Verenigde staten M Ja Engels
Brijs, Stefan Zonder liefde 2019 België M Nee Nederlands
Brijs, Stefan De engelenmaker 2005 België M Ja Nederlands
Brijs, Stefan The angel maker 2005 België M Ja Engels
Brönte, Charlotte Jane Eyre 1847 Verenigd Koninkrijk V Ja Engels
Brönte, Emily Wuthering heights 1847 Verenigd Koninkrijk V Ja Engels
Brönte, Emily Wuthering heights 1847 Verenigd Koninkrijk V Ja Engels
Brouwers, Jeroen Client E. Busken 2019 Indonesië M Nee Nederlands
Brouwers, Jeroen Datumloze dagen 2007 Indonesië M Ja Nederlands
Brouwers, Jeroen Bezonken rood 1981 Indonesië M Nederlands
Bukowski, Charles Notes of a dirty old man 1969 Duitsland M Ja Engels
Bukowski, Charles Post office 1971 Duitsland M Ja Engels
Bukowski, Charles Ham on rye 1982 Duitsland M Ja Engels
Bulgakov, Mikhail The master and margarita 1967 Oekraïne M Ja Engels
Burgess, Anthony A clockwork orange 1962 Verenigd Koninkrijk M Ja Engels
Burnett, Francis The secret garden 1911 Verenigd Koninkrijk V Ja Engels
Burrin, Philippe Het ontstaan van een volkerenmoord 1989 Zwitserland M Nee Nederlands
Busquets, Milena Ook dit gaat voorbij 1996 Spanje V Nee Nederlands
Calidas, Tamsin Ik ben een eiland 2020 Verenigd Koninkrijk V Nee Nederlands
Calvin, William H Ontdekkingstocht door de hersenen 1997 Verenigde staten M Nee Nederlands
Calvino, Italo If on a winter’s night a traveler 1979 Cuba M Nee 259 Engels
Campert, Remco Eetlezen 1987 Nederland M Ja Nederlands
Campert, Remco Kus zoekt mond 2000 Nederland M Ja Nederlands
Camus, Albert De vreemdeling 1942 Algerije M Ja Nederlands
Capote, Truman Breakfast at Tiffany’s 1958 Verenigde staten M Ja Engels
Caroll, Lewis Alice’s adventures in Wonderland 1865 Verenigd Koninkrijk V Ja Engels
Cartarescu, Mircea Nostalgia 1989 Roemenië M Engels
Carver, Raymond What we talk about when we talk about love 1989 Verenigde staten M Ja Engels
Cervantes Don Quichot 1605 Spanje M Nee Engels
Chaucer, Geoffrey The canterbury tales 1392 Verenigd Koninkrijk M Nee Engels
Christie, Agatha And then there were none 1939 Verenigd Koninkrijk V Nee 250 Engels
Cicero, Marcus Tullius Pensees -60 Italië M Nee Frans
Coelho, Paulo De zahir 2005 Brazilië M Nee Nederlands
Coelho, Paulo De zahir 2005 Brazilië M Nee Nederlands
Coelho, Paulo The alchemist 1988 Brazilië M Ja Engels
Coetzee, JM The master of Petersburg 1994 Zuid-Afrika M Nee Engels
Coetzee, JM Youth 2002 Zuid-Afrika M Ja Engels
Coleridge, Samuel Taylor Well, they are gone, and here I must remain 1800 Verenigd Koninkrijk M Engels
Collins, Wilkie The woman in white 1860 Verenigd Koninkrijk M Nee Engels
Collodi, Carlo The adventures of Pinocchio 1883 Italië M Ja Engels
Cornelis, Arnold Logica van het gevoel 1988 Nederland M Nee Nederlands
Couperus, Louis De stille kracht 1900 Nederland M Nee Nederlands
Couperus, Louis Het zwevende schaakbord 1921 Nederland M Nee Nederlands
Couperus, Louis Van vagebonden en schelmen 1973 Nederland M Nee Nederlands
Couperus, Louis Metamorfose 1897 Nederland M Nederlands
Crews, Frederick The pooh complex 1963 Verenigde staten M Nee Engels
Cusk, Rachel Outline 2014 Canada V Ja Engels
Cusk, Rachel Transit 2016 Canada V Ja Engels
Dahl, Roald Oom Oswald 1979 Verenigd Koninkrijk M Nee Nederlands
Dahl, Roald Boy 1984 Verenigd Koninkrijk M Nee Engels
Dante, Alighieri Inferno 1472 Italië M Nee Engels
Defoe, Daniel Robinson Crusoe 1719 Verenigd Koninkrijk M Nee Engels
Dickens, Charles Pickwick papers 1837 Verenigd Koninkrijk M Nee Engels
Dickens, Charles Oliver twist 1838 Verenigd Koninkrijk M Nee Engels
Dickens, Charles Barnaby Rudge 1841 Verenigd Koninkrijk M Nee Engels
Dickens, Charles Hard times 1854 Verenigd Koninkrijk M Nee Engels
Dickens, Charles A tale of two cities 1859 Verenigd Koninkrijk M Nee Engels
Dickens, Charles Great expectations 1861 Verenigd Koninkrijk M Nee Engels
Dickens, Charles A christmas carol and other christmas writings 1872 Verenigd Koninkrijk M Ja Engels
Dis, Adriaan van Casablanca 1986 Nederland M Nee Nederlands
Dis, Adriaan van Indische Duinen 1994 Nederland M Nee Nederlands
Dis, Adriaan van Palmwijn 1996 Nederland M Nee Nederlands
Dis, Adriaan van De wandelaar 2009 Nederland M Ja Nederlands
Dis, Adriaan van Ik kom terug 2014 Nederland M Ja Nederlands
Dis, Adriaan van De parijsboeken 2021 Nederland M Ja Nederlands
DIs, Adriaan van Dubbelliefde 1999 Nederland M Nederlands
Ditlevsen, Tove The Umbrella 1952 Denemarken V Ja 102 Engels
Dominguez, Carlos Maria Het papieren huis 2005 Argentië M Nee Nederlands
Donoghue, Emma Kamer 2010 Ierland V Nee Nederlands
Donoghue, Emma Room 2010 Ierland V Nee Engels
Doolaard, A. den Wampie 1938 Nederland M Nederlands
Dorrestein, Renate Een hart van steen 1998 Nederland V Nederlands
Dorrestein, Renate Een hart van steen 1998 Nederland V Nederlands
Dostoevsky The Karamazov brothers 1880 Rusland M Ja 1012 Engels
Dostojevski De speler 1866 Rusland M Ja Nederlands
Doyle, Arthur Conan Sherlock Holmes 1887 Verenigd Koninkrijk M Nee 1408 Engels
Dumas, Alexandre De doode hand Frankrijk M Nederlands
Dunn, Mark Ella Minnow Pea 2001 Verenigde staten M Ja 207 Engels
Eliot, George The mill on the floss 1860 Verenigd Koninkrijk V Nee 595 Engels
Elsschot, Willem Kaas 1933 België M Ja 110 Nederlands
Faulkner, William The sound and the fury Verenigde staten M Nee 348 Engels
Faulkner, William As I lay dying 1930 Verenigde staten M Nee 208 Engels
Faulks, Sebastian War 2018 Verenigd Koninkrijk M Ja 132 Engels
Finkers, Herman Verhalen voor in het haardvuur 1987 Nederland M Nee 116 Nederlands
Fitzgerald, F Scott Tender is the night 1934 Verenigde staten M Nee 336 Engels
Fitzgerald, F Scott The beautiful and damned 1922 Verenigde staten M Ja 495 Engels
Fitzgerald, F Scott The great gatsby 1925 Verenigde staten M Ja 122 Engels
Flaubert, Gustave Madame Bovary 1856 Frankrijk M Nee Engels
Forster, Edward Howards end 1910 Verenigd Koninkrijk M Nee 352 Engels
Foucault, Michel Elementaire deeltjes 2021 Frankrijk M Ja 165 Nederlands
France, Anatole Penguin island 1908 Frankrijk M Ja 302 Engels
French, Dawn A tiny bit marvelous 2010 Verenigd Koninkrijk V Nee 399 Engels
French, Marilyn Our father 1994 Verenigde staten V Nee 600 Engels
Fry, Stephen Heroes 2018 Verenigd Koninkrijk M Ja 474 Engels
Fry, Stephen Mythos 2017 Verenigd Koninkrijk M Ja 442 Engels
Gaarder, Jostein De wereld van Sofie 1991 Noorwegen M Ja 559 Nederlands
Gaskell, Elizabeth North and South 1885 Verenigd Koninkrijk V Nee 544 Engels
Gaskell, Elizabeth Cranford 1853 Verenigd Koninkrijk V Nee 244 Engels
Giordano, Paulo De eenzaamheid van de priemgetallen 2008 Italië M Nee 318 Nederlands
Giordano, Paulo De eenzaamheid van de priemgetallen 2008 Italië M Nee 318 Nederlands
Giphart, Ronald Ik omhels je met duizend armen 2000 Nederland M Ja 319 Nederlands
Giphart, Ronald Giph 1993 Nederland M Ja 279 Nederlands
Giphart, Ronald Giph 1993 Nederland M Ja 224 Nederlands
Giphart, Ronald Ik ook van jou 1992 Nederland M Ja 182 Nederlands
Giphart, Ronald Gala 2003 Nederland M Ja 89 Nederlands
Goethe, Johann Wolfgang Faust II 1832 Duitsland M Nee 28

README.md

@@ -1,10 +1,13 @@
 ---
-title: Bibliovista Explorer
-emoji: 🏢
-colorFrom: purple
-colorTo: pink
+title: Bibliovista Explorer 📚✨
+colorFrom: pink
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html

@@ -1,19 +1,360 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bibliovista Explorer</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            500: '#5F6F94',
+                            700: '#374259',
+                        },
+                        secondary: {
+                            300: '#B9C0DA',
+                            200: '#E8E8E8',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Inter', sans-serif;
+            transition: all 0.3s ease;
+        }
+        .tooltip {
+            position: relative;
+            display: inline-block;
+        }
+        .tooltip .tooltiptext {
+            visibility: hidden;
+            width: 200px;
+            background-color: #374259;
+            color: #fff;
+            text-align: center;
+            border-radius: 6px;
+            padding: 8px;
+            position: absolute;
+            z-index: 1;
+            bottom: 125%;
+            left: 50%;
+            transform: translateX(-50%);
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        .tooltip:hover .tooltiptext {
+            visibility: visible;
+            opacity: 1;
+        }
+        .dark .bg-primary-500 {
+            background-color: #374259;
+        }
+        .dark .text-primary-700 {
+            color: #B9C0DA;
+        }
+        .dark .bg-secondary-300 {
+            background-color: #5F6F94;
+        }
+        #vanta-bg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            opacity: 0.2;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
+    <div id="vanta-bg"></div>
+    
+    <!-- Navigation -->
+    <nav class="bg-primary-500 text-white shadow-lg">
+        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <i data-feather="book-open" class="w-6 h-6"></i>
+                <span class="text-xl font-bold">Bibliovista</span>
+            </div>
+            <div class="flex items-center space-x-4">
+                <button id="theme-toggle" class="p-2 rounded-full hover:bg-secondary-300">
+                    <i data-feather="moon" class="w-5 h-5 hidden dark:block"></i>
+                    <i data-feather="sun" class="w-5 h-5 block dark:hidden"></i>
+                </button>
+                <button class="bg-secondary-300 hover:bg-secondary-400 text-primary-700 px-4 py-2 rounded-lg font-medium transition">
+                    <i data-feather="download" class="w-4 h-4 inline mr-1"></i>
+                    Export
+                </button>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <div class="text-center mb-12">
+            <h1 class="text-4xl font-bold text-primary-700 dark:text-white mb-4">Book Collection Explorer</h1>
+            <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
+                Visualize, filter, and explore an extensive collection of books from around the world.
+            </p>
+        </div>
+
+        <!-- Filters -->
+        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 mb-8">
+            <h2 class="text-xl font-semibold text-primary-700 dark:text-white mb-4 flex items-center">
+                <i data-feather="filter" class="w-5 h-5 mr-2"></i>
+                Filters
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Author</label>
+                    <select class="w-full rounded-lg border-secondary-200 focus:ring-primary-500 focus:border-primary-500">
+                        <option>All Authors</option>
+                        <option>Jane Austen</option>
+                        <option>George Orwell</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Year</label>
+                    <select class="w-full rounded-lg border-secondary-200 focus:ring-primary-500 focus:border-primary-500">
+                        <option>All Years</option>
+                        <option>1800-1850</option>
+                        <option>1851-1900</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Language</label>
+                    <select class="w-full rounded-lg border-secondary-200 focus:ring-primary-500 focus:border-primary-500">
+                        <option>All Languages</option>
+                        <option>English</option>
+                        <option>French</option>
+                        <option>Dutch</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Page Count</label>
+                    <input type="range" min="0" max="1000" class="w-full">
+                </div>
+            </div>
+        </div>
+
+        <!-- Visualization Dashboard -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
+            <!-- Pie Chart -->
+            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
+                <h2 class="text-xl font-semibold text-primary-700 dark:text-white mb-4 flex items-center">
+                    <i data-feather="pie-chart" class="w-5 h-5 mr-2"></i>
+                    Genre Distribution
+                </h2>
+                <div class="h-64">
+                    <canvas id="genreChart"></canvas>
+                </div>
+            </div>
+
+            <!-- Bar Chart -->
+            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
+                <h2 class="text-xl font-semibold text-primary-700 dark:text-white mb-4 flex items-center">
+                    <i data-feather="bar-chart-2" class="w-5 h-5 mr-2"></i>
+                    Country Distribution
+                </h2>
+                <div class="h-64">
+                    <canvas id="countryChart"></canvas>
+                </div>
+            </div>
+
+            <!-- Timeline -->
+            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
+                <h2 class="text-xl font-semibold text-primary-700 dark:text-white mb-4 flex items-center">
+                    <i data-feather="calendar" class="w-5 h-5 mr-2"></i>
+                    Publication Timeline
+                </h2>
+                <div class="h-64">
+                    <canvas id="timelineChart"></canvas>
+                </div>
+            </div>
+        </div>
+
+        <!-- Data Table -->
+        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
+            <div class="px-6 py-4 border-b border-secondary-200 flex justify-between items-center">
+                <h2 class="text-xl font-semibold text-primary-700 dark:text-white flex items-center">
+                    <i data-feather="list" class="w-5 h-5 mr-2"></i>
+                    Book Collection
+                </h2>
+                <div class="flex items-center space-x-2">
+                    <span class="text-sm text-gray-500 dark:text-gray-400">Showing 1-10 of 250</span>
+                    <button class="p-2 rounded-lg hover:bg-secondary-300">
+                        <i data-feather="chevron-left" class="w-4 h-4"></i>
+                    </button>
+                    <button class="p-2 rounded-lg hover:bg-secondary-300">
+                        <i data-feather="chevron-right" class="w-4 h-4"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-secondary-200">
+                    <thead class="bg-secondary-300">
+                        <tr>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-primary-700 uppercase tracking-wider">Title</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-primary-700 uppercase tracking-wider">Author</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-primary-700 uppercase tracking-wider">Year</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-primary-700 uppercase tracking-wider">Country</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-primary-700 uppercase tracking-wider">Pages</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-primary-700 uppercase tracking-wider">Language</th>
+                        </tr>
+                    </thead>
+                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-secondary-200">
+                        <tr class="hover:bg-secondary-300 transition">
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <div class="flex items-center">
+                                    <div class="flex-shrink-0 h-10 w-10 bg-primary-500 rounded-lg flex items-center justify-center text-white">
+                                        <i data-feather="book" class="w-5 h-5"></i>
+                                    </div>
+                                    <div class="ml-4">
+                                        <div class="text-sm font-medium text-primary-700 dark:text-white">Pride and Prejudice</div>
+                                        <div class="text-sm text-gray-500 dark:text-gray-400">Romance</div>
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <div class="text-sm text-primary-700 dark:text-white">Jane Austen</div>
+                                <div class="text-sm text-gray-500 dark:text-gray-400">Female</div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-primary-700 dark:text-white">1813</td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                                    UK
+                                </span>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-primary-700 dark:text-white">279</td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <div class="flex items-center">
+                                    <span class="mr-2">🇬🇧</span>
+                                    <span class="text-sm text-primary-700 dark:text-white">English</span>
+                                </div>
+                            </td>
+                        </tr>
+                        <!-- More rows would go here -->
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Initialize Vanta.js globe
+        VANTA.GLOBE({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: '#5F6F94',
+            backgroundColor: '#f8fafc',
+            size: 0.80
+        });
+
+        // Theme toggle
+        const themeToggle = document.getElementById('theme-toggle');
+        themeToggle.addEventListener('click', () => {
+            document.documentElement.classList.toggle('dark');
+            localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
+        });
+
+        // Check for saved theme preference
+        if (localStorage.getItem('darkMode') === 'true') {
+            document.documentElement.classList.add('dark');
+        }
+
+        // Initialize charts
+        document.addEventListener('DOMContentLoaded', function() {
+            // Genre Pie Chart
+            const genreCtx = document.getElementById('genreChart').getContext('2d');
+            const genreChart = new Chart(genreCtx, {
+                type: 'pie',
+                data: {
+                    labels: ['Fiction', 'Non-Fiction', 'Biography', 'Science', 'History'],
+                    datasets: [{
+                        data: [30, 20, 15, 20, 15],
+                        backgroundColor: [
+                            '#5F6F94',
+                            '#B9C0DA',
+                            '#374259',
+                            '#E8E8E8',
+                            '#A7B3C9'
+                        ],
+                        borderWidth: 0
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false
+                }
+            });
+
+            // Country Bar Chart
+            const countryCtx = document.getElementById('countryChart').getContext('2d');
+            const countryChart = new Chart(countryCtx, {
+                type: 'bar',
+                data: {
+                    labels: ['UK', 'USA', 'France', 'Germany', 'Netherlands'],
+                    datasets: [{
+                        label: 'Books by Country',
+                        data: [45, 30, 20, 15, 10],
+                        backgroundColor: '#5F6F94',
+                        borderWidth: 0
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        y: {
+                            beginAtZero: true
+                        }
+                    }
+                }
+            });
+
+            // Timeline Chart
+            const timelineCtx = document.getElementById('timelineChart').getContext('2d');
+            const timelineChart = new Chart(timelineCtx, {
+                type: 'line',
+                data: {
+                    labels: ['1800', '1850', '1900', '1950', '2000'],
+                    datasets: [{
+                        label: 'Publications per Year',
+                        data: [5, 15, 30, 40, 60],
+                        borderColor: '#5F6F94',
+                        backgroundColor: 'rgba(95, 111, 148, 0.1)',
+                        fill: true,
+                        tension: 0.4
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false
+                }
+            });
+
+            // Initialize feather icons
+            feather.replace();
+        });
+    </script>
+</body>
 </html>