pear-bootstrap-template/README.md

### **`README.md`**

# Hello World App 🌍

A simple **Hello World** desktop application built with [Pear](https://docs.pears.com/) and [Bootstrap](https://getbootstrap.com/). This project demonstrates how to create a modern GUI application with modals and responsive design.


## Features 🚀
- A clean title bar with draggable support.
- Two interactive modals:
  - **Information Modal**: Displays a simple informational message.
  - **Alert Modal**: Displays a warning or alert message.
- Built with Bootstrap for a beautiful and responsive design.
- Easily extendable for other use cases.

---

## Requirements 🛠️
- **Node.js**: v16 or higher
- **Pear**: Installed globally
  ```bash
  npm install -g pear
  ```

---

## Setup Instructions 📝

1. **Clone the repository**:
   ```bash
   git clone git@git.ssh.surf:snxraven/pear-bootstrap-template.git
   cd pear-bootstrap-templat
   ```

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

3. **Run the application**:
   ```bash
   pear run --dev .
   ```

   The application will launch in development mode, with developer tools enabled.

---

## Project Structure 📂

```
hello-world-app/
├── app.js          # Main application logic
├── index.html      # Application UI
├── package.json    # Project metadata
├── styles.css      # Custom styles
└── test/
    └── index.test.js  # Test skeleton
```

---

## Usage 💡

1. **Launch the app**:
   - Use `pear run --dev .` to start the app.
   - A draggable title bar and two buttons will appear in the main window.

2. **Interact with modals**:
   - **Info Modal**: Click the "Show Info Modal" button to view a sample informational modal.
   - **Alert Modal**: Click the "Show Alert Modal" button to display a warning.

---

## Customization 🛠️

### Changing the Title Bar Text
Modify the `<h5>` element in `index.html`:
```html
<h5 class="ms-auto mb-0">Your Custom Title</h5>
```

### Adding New Modals
1. Add a new modal block in `index.html`.
2. Update `app.js` to include the modal logic.

---

## Technologies Used 🛠️
- **Pear**: A peer-to-peer framework for desktop apps.
- **Bootstrap 5**: For responsive and styled components.