Smart-Ebook

Introduction

The "Smart-Ebook" project is designed to create an engaging and educational ebook focused on the theme of modesty for girls according to Islamic principles. This ebook aims to provide a comprehensive resource that combines religious teachings, personal stories, and multimedia elements to enhance understanding and engagement.

System Overview

The Smart-Ebook will serve as an interactive digital book that incorporates text, images, and videos to convey the importance of modesty in Islam. It will include quotes from the Quran, Hadith, and authentic stories from Islamic history, all presented with proper references. The ebook will also feature highlighted key points using different colors to emphasize important messages.

Functional Requirements

• As a User, I should be able to read quotes, Ayat from the Quran, and Hadith with proper references.
• As a User, I should be able to view pictures and short videos that complement the text.
• As a User, I should be able to read authentic stories from the Quran and Islamic history.
• As a User, I should be able to see key points highlighted with different colors for emphasis.
• As a User, I should be able to navigate through different chapters and sections easily.
• As a User, I should be able to make changes or updates to the ebook content after its creation.

User Personas

• Reader: Individuals interested in learning about modesty in Islam, particularly young girls and their guardians.
• Editor: Individuals responsible for updating and maintaining the ebook content.

Visuals Colors and Theme

• primary: #2E8B57 (Sea Green)
• primary_light: #66CDAA (Medium Aquamarine)
• secondary: #8B0000 (Dark Red)
• accent: #FFD700 (Gold)
• highlight: #FF4500 (Orange Red)
• bg: #F5F5F5 (White Smoke)
• surface: rgba(255, 255, 255, 0.9)
• text: #333333 (Dark Gray)
• text_muted: #777777 (Gray)
• border: rgba(0, 0, 0, 0.1)

Signature Design Concept

The Smart-Ebook will feature an interactive "Living Mosaic" homepage. This design will consist of a dynamic grid of tiles, each representing a different chapter or theme within the ebook. As users hover over a tile, it will animate with a subtle zoom effect, revealing a brief description of the content. Clicking on a tile will smoothly transition the user to the respective section. The tiles will be color-coded according to the ebook's theme, using the defined color palette. This concept will be brought to life using framer-motion for animations and transitions, ensuring a seamless and engaging user experience.

Interaction Model & Motion Direction

The landing page will utilize a "parallax" interaction model, providing a layered depth effect as users scroll through the content. Decorative elements will move at different speeds to create a sense of depth, while the main content will scroll naturally. This approach will enhance the storytelling aspect of the ebook, making it visually rich and engaging. Internal pages will adopt a "static" model to maintain clarity and focus on reading.

Non-Functional Requirements

• The ebook should be accessible across various devices, including desktops, tablets, and smartphones.
• The content should be easily updatable to accommodate future revisions or additions.
• The ebook should load quickly and be optimized for performance.

Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL or MariaDB
• AI Models: GPT 5.4 for user-friendly responses
• AI Tools: Litellm for LLM Routing
• Local Orchestration: Docker, docker-compose
• Server-side Orchestration: Kubernetes

Assumptions and Constraints

• The ebook will primarily target a Pakistani audience, considering local cultural and religious contexts.
• The ebook will be available in English, with potential for future translations.
• The project will adhere to Islamic guidelines and principles throughout its content and presentation.

Glossary

• Ayat: Verses from the Quran.
• Hadith: Sayings and actions of the Prophet Muhammad (PBUH).
• Modesty: A principle in Islam emphasizing humility and decency in behavior and dress.
• Parallax: A design technique where background images move slower than foreground images, creating an illusion of depth.