Add readme
This commit is contained in:
parent
5d6dd7eb69
commit
c795b64fe2
93
README.md
Normal file
93
README.md
Normal file
@ -0,0 +1,93 @@
|
||||
### **`README.md`**
|
||||
|
||||
```markdown
|
||||
# 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.
|
Loading…
x
Reference in New Issue
Block a user