164 líneas
5.6 KiB
Markdown
164 líneas
5.6 KiB
Markdown
# 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
|