# dios.website 🙏

A multilingual Bible reading web application with interactive typing effects and text-to-speech functionality. Experience sacred texts in 40+ languages with modern web technology.

## 🌟 Features

- **📖 Multilingual Bible Text**: Support for 40+ languages including Arabic, Chinese, English, Spanish, French, German, and many more
- **🎭 Typewriter Effect**: Beautiful animated text display using React Typed
- **🔊 Text-to-Speech**: Listen to Bible verses with customizable voice settings
- **🎛️ Voice Controls**: 
  - Multiple voice selection
  - Adjustable speech speed
  - Play/pause functionality
- **🌍 Auto Language Detection**: Automatically detects user's preferred language
- **📱 Responsive Design**: Works seamlessly on desktop and mobile devices
- **♿ Accessibility**: ARIA labels and semantic HTML for screen readers
- **⚡ Auto-scroll**: Automatic scrolling as text is displayed

## 🚀 Quick Start

### Prerequisites

- Node.js (v14 or higher)
- npm or yarn

### Installation

1. Clone the repository:
```bash
git clone <repository-url>
cd dios.website
```

2. Install dependencies:
```bash
npm install
```

3. Start the development server:
```bash
npm start
```

4. Open your browser and navigate to `http://localhost:3000`

## 📋 Available Scripts

- `npm start` - Runs the app in development mode
- `npm build` - Builds the app for production
- `npm test` - Launches the test runner
- `npm run eject` - Ejects from Create React App (one-way operation)

## 🗣️ Supported Languages

The application supports Bible texts in the following languages:

| Language | Code | Language | Code | Language | Code |
|----------|------|----------|------|----------|------|
| Arabic | ar | Azerbaijani | az | Bulgarian | bg |
| Bengali | bn | Catalan | ca | Czech | cs |
| Danish | da | German | de | Greek | el |
| English | en | Esperanto | eo | Spanish | es |
| Estonian | et | Basque | eu | Persian | fa |
| Finnish | fi | French | fr | Irish | ga |
| Galician | gl | Hebrew | he | Hindi | hi |
| Hungarian | hu | Indonesian | id | Italian | it |
| Japanese | ja | Korean | ko | Lithuanian | lt |
| Latvian | lv | Malay | ms | Norwegian | nb |
| Dutch | nl | Polish | pl | Portuguese | pt |
| Romanian | ro | Russian | ru | Slovak | sk |
| Slovenian | sl | Albanian | sq | Swedish | sv |
| Thai | th | Filipino | tl | Turkish | tr |
| Ukrainian | uk | Urdu | ur | Chinese | zh |

## 🏗️ Project Structure

```
src/
├── components/           # React components
│   ├── BibleDisplay.js  # Main text display component
│   ├── Header.js        # Application header
│   ├── Footer.js        # Application footer
│   ├── SpeechControls.js # Speech play/pause controls
│   ├── SpeedControls.js # Speech speed adjustment
│   ├── VoiceControls.js # Voice selection controls
│   └── LoadingSpinner.js # Loading state component
├── hooks/               # Custom React hooks
│   ├── useBibleText.js  # Bible text loading logic
│   ├── useSpeechControl.js # Speech synthesis logic
│   ├── useVoiceSelection.js # Voice selection logic
│   └── useAutoScroll.js # Auto-scrolling functionality
├── biblia/              # Bible text files (40+ languages)
├── constants/           # Application constants
├── i18n.js             # Internationalization configuration
└── App.js              # Main application component
```

## 🔧 Core Technologies

- **React 19** - Modern React with hooks
- **i18next** - Internationalization framework
- **React Typed** - Typewriter effect animations
- **Web Speech API** - Text-to-speech functionality via react-text-to-speech
- **CSS3** - Modern styling and responsive design

## 🎨 How It Works

1. **Language Detection**: The app automatically detects the user's browser language
2. **Text Loading**: Loads the corresponding Bible text file for the detected language
3. **Typewriter Effect**: Displays verses with a beautiful typing animation
4. **Speech Synthesis**: Converts text to speech using the Web Speech API
5. **Interactive Controls**: Users can control playback speed, voice selection, and navigation

## 🎛️ User Interface

### Controls Available:
- **Play/Pause Button**: Start or stop text-to-speech
- **Speed Slider**: Adjust typing and speech speed
- **Voice Selector**: Choose from available system voices
- **Auto-scroll**: Automatically scrolls as text progresses

## 🌐 Browser Compatibility

- Chrome 80+
- Firefox 75+
- Safari 13+
- Edge 80+

*Note: Text-to-speech functionality depends on browser support for the Web Speech API*

## 📱 Mobile Support

The application is fully responsive and optimized for mobile devices with touch-friendly controls and adaptive layouts.

## 🔒 Privacy

This application runs entirely in the browser. No personal data is collected or transmitted to external servers. Bible texts are served locally.

## 🤝 Contributing

1. Fork the repository
2. Create a feature branch: `git checkout -b feature/new-feature`
3. Commit your changes: `git commit -m 'Add new feature'`
4. Push to the branch: `git push origin feature/new-feature`
5. Submit a pull request

## 📝 License

This project is open source. Please check the license file for details.

## 🙏 Acknowledgments

- Bible texts from various public domain sources
- React community for excellent libraries
- Web Speech API for enabling text-to-speech functionality

## 📞 Support

For support, please open an issue on the GitHub repository or visit [manalejandro.com](https://manalejandro.com).

---

*"In the beginning was the Word..."* - Experience sacred texts like never before with dios.website