Update README.md

README.md

@@ -1,2 +1,265 @@
-# xampp-gui
+# XAMPP Control Panel
 
+A web-based GUI to control XAMPP on Linux — start, stop, restart, reload and check the status of Apache, MySQL and FTP with a single click.
+
+---
+
+## Requirements
+
+- Linux (Debian / Ubuntu / Mint or similar)
+- XAMPP installed at `/opt/lampp/`
+- Python 3 (`python3 --version`)
+- A modern browser (Firefox, Chrome, etc.)
+
+---
+
+## Folder structure
+
+Place all files inside `~/xampp-gui/`:
+
+```
+~/xampp-gui/
+├── index.html            ← Web UI
+├── xampp-backend.py      ← Python backend (port 5050)
+├── http-server.py        ← HTTP server (port 8080)
+├── xampp-gui.sh          ← Launcher script
+└── README.md
+```
+
+Create the folder:
+
+```bash
+mkdir -p ~/xampp-gui
+```
+
+---
+
+## Setup
+
+### 1. Make the launcher executable
+
+```bash
+chmod +x ~/xampp-gui/xampp-gui.sh
+```
+
+### 2. Optional: passwordless sudo for XAMPP
+
+The backend runs XAMPP commands via `sudo`. To avoid repeated password prompts, add a sudoers rule:
+
+```bash
+sudo visudo
+```
+
+Add at the end (replace `yourusername`):
+
+```
+yourusername ALL=(ALL) NOPASSWD: /opt/lampp/*
+yourusername ALL=(ALL) NOPASSWD: /opt/lampp/bin/*
+```
+
+Save: `Ctrl+O` → `Enter` → `Ctrl+X`
+
+If you skip this step, the launcher will ask for your password once via `sudo -v` at startup, which is also fine.
+
+---
+
+## Launch
+
+```bash
+bash ~/xampp-gui/xampp-gui.sh
+```
+
+This will:
+
+1. Kill any old processes on ports 5050 and 8080
+2. Ask for your sudo password once (`sudo -v`)
+3. Start the Python backend on port **5050**
+4. Start a local HTTP server on port **8080**
+5. Open the browser automatically at `http://localhost:8080/`
+
+> **Important:** Always open the UI via `http://localhost:8080/`.
+> Do **not** open `index.html` by double-clicking — the browser will block backend requests from `file://` pages.
+
+---
+
+## Manual start (two terminals)
+
+**Terminal 1 – Backend:**
+
+```bash
+python3 ~/xampp-gui/xampp-backend.py
+```
+
+**Terminal 2 – HTTP server:**
+
+```bash
+python3 ~/xampp-gui/http-server.py
+```
+
+Then open: `http://localhost:8080/`
+
+---
+
+## Port overview
+
+| Port | Service |
+|------|---------|
+| 5050 | Python backend (XAMPP commands) |
+| 8080 | HTTP server (Web UI) |
+| 80   | Apache (XAMPP) |
+| 3306 | MySQL (XAMPP) |
+| 21   | FTP / ProFTPD (XAMPP) |
+
+---
+
+## Troubleshooting
+
+**Backend not reachable:**
+
+```bash
+lsof -i :5050
+kill -9 $(lsof -t -i :5050) 2>/dev/null
+python3 ~/xampp-gui/xampp-backend.py &
+```
+
+**Command hangs / timeout:**
+
+```bash
+sudo -v
+bash ~/xampp-gui/xampp-gui.sh
+```
+
+**Port 8080 already in use:**
+
+```bash
+kill -9 $(lsof -t -i :8080) 2>/dev/null
+python3 ~/xampp-gui/http-server.py &
+```
+
+---
+
+## Desktop launcher (.desktop file)
+
+To add XAMPP Control Panel to your application menu or desktop:
+
+```bash
+nano ~/.local/share/applications/xampp-control.desktop
+```
+
+Paste (replace `yourusername`):
+
+```ini
+[Desktop Entry]
+Version=1.0
+Type=Application
+Name=XAMPP Control Panel
+Comment=XAMPP Web GUI starten
+Exec=bash -c "cd /home/yourusername/xampp-gui && bash xampp-gui.sh"
+Icon=/opt/lampp/htdocs/favicon.ico
+Terminal=true
+StartupNotify=false
+Categories=Development;WebDevelopment;
+```
+
+Then make it executable and refresh the application menu:
+
+```bash
+chmod +x ~/.local/share/applications/xampp-control.desktop
+update-desktop-database ~/.local/share/applications/
+```
+
+> **Note:** `Terminal=true` is required — the launcher asks for your sudo password once on startup.
+
+---
+
+## Desktop app (Electron)
+
+You can optionally package the Web UI as a native desktop app using Electron.
+
+### Install Node.js and Electron
+
+```bash
+sudo apt install nodejs npm -y
+```
+
+### Create the app folder
+
+```bash
+mkdir -p ~/xampp-gui-app
+cd ~/xampp-gui-app
+npm init -y
+npm install electron --save-dev
+```
+
+### Create `main.js`
+
+```js
+const { app, BrowserWindow } = require('electron');
+const { spawn } = require('child_process');
+const path = require('path');
+const os = require('os');
+
+let win, backend, server;
+
+function startServices() {
+  const guiDir = path.join(os.homedir(), 'xampp-gui');
+  backend = spawn('python3', [path.join(guiDir, 'xampp-backend.py')], { stdio: 'ignore' });
+  server  = spawn('python3', [path.join(guiDir, 'http-server.py')], { stdio: 'ignore' });
+}
+
+function createWindow() {
+  win = new BrowserWindow({
+    width: 1200,
+    height: 800,
+    autoHideMenuBar: true,
+    title: 'XAMPP Control Panel'
+  });
+  setTimeout(() => win.loadURL('http://localhost:8080/index.html'), 1500);
+}
+
+app.whenReady().then(() => { startServices(); createWindow(); });
+
+app.on('window-all-closed', () => {
+  if (backend) backend.kill();
+  if (server)  server.kill();
+  app.quit();
+});
+```
+
+### Update `package.json`
+
+```json
+{
+  "name": "xampp-control-panel",
+  "version": "1.0.0",
+  "main": "main.js",
+  "scripts": {
+    "start": "electron ."
+  },
+  "devDependencies": {
+    "electron": "^latest"
+  }
+}
+```
+
+### Run the desktop app
+
+```bash
+cd ~/xampp-gui-app
+npm start
+```
+
+For the Electron variant, the `.desktop` file looks like this:
+
+```ini
+[Desktop Entry]
+Version=1.0
+Type=Application
+Name=XAMPP Control Panel
+Comment=XAMPP Web GUI starten
+Exec=bash -c "cd /home/yourusername/xampp-gui-app && npm start"
+Icon=/opt/lampp/htdocs/favicon.ico
+Terminal=false
+StartupNotify=false
+Categories=Development;WebDevelopment;
+```