Minimalist web novel reader with smooth and focused reading experience.

Features • Technologies • Installation • Configuration • License • Gallery

📷 Demo Link

• https://xkintaro.github.io/text-reader/

📋 About

Text Reader is a premium, minimalist web novel reader interface designed for a focus-oriented reading experience. It provides a sleek, modern UI with smooth transitions, keyboard shortcuts, and persistent reading progress.

✨ Features

• Premium Aesthetics: Dark-themed interface with glassmorphism effects and gold accents.
• Seamless Navigation: Easy-to-use navigation buttons for moving between chapters.
• Chapter Library: A modal-based library for quick chapter selection and direct jumping.
• Persistent Reading: Automatically remembers your last read chapter using LocalStorage.
• Keyboard Shortcuts:
  • ArrowLeft / ArrowRight: Navigate between chapters.
  • M: Open library/menu.
  • ESC: Close library/menu.
• Fast Performance: In-memory caching for recently loaded chapters.
• Responsive Design: Optimized for both mobile devices and large screens.
• Deep Linking: Syncs reading progress with the URL hash (e.g., index.html#42).

🛠️ Technologies

• HTML5: Used to build the core structure and layout of the application.
• JavaScript: Powers all interactive functionality, including chapter navigation, keyboard shortcuts, LocalStorage management, and dynamic content rendering.
• Tailwind CSS: Utilized for rapid styling to create a premium, minimalist, and responsive user interface.
• Lucide Icons: Provides the modern, clean vector icons used throughout the user interface.

🚀 Installation

Prerequisites

You need Node.js installed on your system to run the Tailwind CLI and serve the project locally.

Installation

Follow these steps to run the project on your local machine:

1. Clone the Repository:

   git clone https://github.com/xkintaro/text-reader.git
   cd text-reader

2. Install Dependencies:

   npm install

3. Start the Development Server:

   npm start

You can view the project by going to http://localhost:5173 in your browser.

⚙️ Configuration

Text Reader is highly flexible. While it expects files in a specific format by default, you can easily customize the behavior via the CONFIG object in script.js.

Default Expectations

By default, the reader scans the chapters/ directory for files named chapter-1.txt, chapter-2.txt, etc.

Customizing the Reader

Open script.js and modify the CONFIG constant at the top of the file:

const CONFIG = {
  chapterPrefix: "chapter-",     // Prefix of your files
  chapterExtension: ".txt",      // File extension
  basePath: "./chapters/",       // Folder where chapters are stored
  totalChapters: 2235,           // Total number of chapters
  storageKey: "lastChapter",     // LocalStorage key for progress
};

📄 License

This project is licensed under the MIT License. You can check the LICENSE file for details.

🖼️ Gallery

_{❤️ Developed by "Mustafa TAŞAL" (kintaro)}