92 lines
2.1 KiB
Markdown
92 lines
2.1 KiB
Markdown
|
### **`README.md`**
|
||
|
|
|
||
|
|
# Hello World App 🌍
|
||
|
|
|
||
|
|
A simple **Hello World** desktop application built with [Pear](https://pear.io) 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 https://github.com/your-username/hello-world-app.git
|
||
|
|
cd hello-world-app
|
||
|
|
```
|
||
|
|
|
||
|
|
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.
|