.github/workflows/docker-publish.yml

@@ -0,0 +1,118 @@
+name: Build and Publish Docker Image
+
+on:
+  push:
+    branches: [ "main", "develop" ]
+    paths: [ "backend/**" ]
+  pull_request:
+    branches: [ "main" ]
+    paths: [ "backend/**" ]
+  release:
+    types: [ published ]
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}/fizika-admin
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+      # This is used to complete the identity challenge
+      # with sigstore/fulcio when running outside of PRs.
+      id-token: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Docker buildx
+        uses: docker/setup-buildx-action@v3
+
+      # Login against a Docker registry except on PR
+      # https://github.com/docker/login-action
+      - name: Log into registry ${{ env.REGISTRY }}
+        if: github.event_name != 'pull_request'
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      # Extract metadata (tags, labels) for Docker
+      # https://github.com/docker/metadata-action
+      - name: Extract metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=ref,event=branch
+            type=ref,event=pr
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{major}}
+            type=sha,prefix={{branch}}-
+            # set latest tag for default branch
+            type=raw,value=latest,enable={{is_default_branch}}
+
+      # Build and push Docker image with Buildx (don't push on PR)
+      # https://github.com/docker/build-push-action
+      - name: Build and push Docker image
+        id: build-and-push
+        uses: docker/build-push-action@v5
+        with:
+          context: ./backend
+          file: ./backend/Dockerfile
+          platforms: linux/amd64,linux/arm64
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+          # Security scanning
+          sbom: true
+          provenance: true
+
+      # Sign the resulting Docker image digest except on PRs.
+      # This will only write to the public Rekor transparency log when the Docker
+      # repository is public to avoid leaking data.  If you would like to publish
+      # transparency data even for private images, pass --force to cosign below.
+      # https://github.com/sigstore/cosign
+      - name: Install cosign
+        if: github.event_name != 'pull_request'
+        uses: sigstore/cosign-installer@v3.1.1
+        with:
+          cosign-release: 'v2.1.1'
+
+      - name: Sign the published Docker image
+        if: github.event_name != 'pull_request'
+        env:
+          # https://docs.github.com/en/actions/security-guides/security-hardening-for-github-actions#using-an-intermediate-environment-variable
+          TAGS: ${{ steps.meta.outputs.tags }}
+          DIGEST: ${{ steps.build-and-push.outputs.digest }}
+        # This step uses the identity token to provision an ephemeral certificate
+        # against the sigstore community Fulcio instance.
+        run: echo "${TAGS}" | xargs -I {} cosign sign --yes {}@${DIGEST}
+
+  security-scan:
+    runs-on: ubuntu-latest
+    needs: build-and-push
+    if: github.event_name != 'pull_request'
+    permissions:
+      security-events: write
+
+    steps:
+      - name: Run Trivy vulnerability scanner
+        uses: aquasecurity/trivy-action@master
+        with:
+          image-ref: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.sha }}
+          format: 'sarif'
+          output: 'trivy-results.sarif'
+
+      - name: Upload Trivy scan results to GitHub Security tab
+        uses: github/codeql-action/upload-sarif@v3
+        with:
+          sarif_file: 'trivy-results.sarif'

README.md

@@ -1 +1,205 @@
-# Fizika weboldal
+# Fizika - Physics Quiz Application
+
+A comprehensive physics quiz application for Hungarian students preparing for their physics exams (érettségi). The application consists of a frontend quiz interface and an admin backend for content management.
+
+## 🚀 Features
+
+### Student Interface (Frontend)
+- Interactive physics quiz questions
+- Multiple choice questions with immediate feedback  
+- Category-based filtering (dynamics, mechanics, fluids, etc.)
+- Search functionality by year, month, and question number
+- Responsive design for desktop and mobile
+- Progress tracking and scoring
+- Timer functionality
+
+### Admin Interface (Backend)
+- 📝 Full CRUD operations for quiz questions
+- 🖼️ Image management (upload, view, delete)
+- 📊 RESTful API for frontend integration
+- 🛡️ Basic security features (input validation)
+- 🐳 Docker containerization ready
+
+## 📁 Project Structure
+
+```
+fizika/
+├── index.html              # Main quiz interface
+├── fizika.json             # Quiz questions database
+├── pics/                   # Question images
+├── js/                     # Frontend JavaScript
+│   ├── fizika.js          # Main quiz logic
+│   └── load.js            # Data loading (updated for API)
+├── css/                    # Stylesheets
+├── backend/                # Admin backend service
+│   ├── server.js          # Express server
+│   ├── public/admin.html  # Admin interface
+│   ├── package.json       # Dependencies
+│   ├── Dockerfile         # Container configuration
+│   └── README.md          # Backend documentation
+├── docker-compose.yml      # Multi-service setup
+└── .github/workflows/      # CI/CD pipelines
+```
+
+## 🛠️ Quick Start
+
+### Option 1: Docker (Recommended)
+
+1. **Clone the repository:**
+   ```bash
+   git clone <repository-url>
+   cd fizika
+   ```
+
+2. **Start the services:**
+   ```bash
+   docker-compose up -d
+   ```
+
+3. **Access the applications:**
+   - **Student Quiz**: http://localhost (or your domain)
+   - **Admin Panel**: http://localhost:3001/admin.html
+
+### Option 2: Local Development
+
+1. **Frontend** (Static files):
+   - Serve the root directory with any web server
+   - Update `API_BASE` in `js/load.js` to point to your backend
+
+2. **Backend** (Admin API):
+   ```bash
+   cd backend
+   npm install
+   cp .env.example .env  # Configure your environment
+   npm run dev
+   ```
+
+## 🔧 Configuration
+
+### Backend Environment Variables
+
+Create `backend/.env` from the example:
+
+```bash
+# Server settings
+PORT=3001
+NODE_ENV=production
+
+# Frontend integration
+FRONTEND_URL=*
+```
+
+## 🔌 API Integration
+
+The frontend automatically detects the backend:
+- **Local Development**: `http://localhost:3001`
+- **Production**: Configure `API_BASE` in `js/load.js`
+
+If the backend is unavailable, the frontend falls back to loading `fizika.json` directly.
+
+## 📊 API Endpoints
+
+### Public (Used by Frontend)
+- `GET /api/fizika` - Get all questions
+- `GET /api/images` - List images
+- `GET /api/pics/:filename` - Serve images
+
+### Admin (Open Access)
+- `GET|POST|PUT|DELETE /api/admin/questions` - Question management  
+- `POST|DELETE /api/admin/images` - Image management
+
+## 🐳 Docker Deployment
+
+### Production with Docker Compose
+
+```bash
+# Deploy
+docker-compose up -d
+
+# With nginx reverse proxy  
+docker-compose --profile nginx up -d
+```
+
+### Manual Docker Build
+
+```bash
+docker build -t fizika-admin ./backend
+docker run -d -p 3001:3001 \
+  -v $(pwd)/fizika.json:/usr/src/app/fizika.json:ro \
+  -v $(pwd)/pics:/usr/src/app/pics \
+  fizika-admin
+```
+
+## 🔄 CI/CD Pipeline
+
+GitHub Actions automatically:
+- Builds Docker images on pushes to main
+- Publishes to GitHub Container Registry  
+- Signs images with Cosign for security
+- Performs vulnerability scanning
+- Supports multi-architecture builds (AMD64, ARM64)
+
+## 🧪 Data Structure
+
+Questions in `fizika.json` follow this format:
+
+```json
+{
+  "id": 1,
+  "source": "2016/m1/1", 
+  "description": "Question text...",
+  "a": "Option A",
+  "b": "Option B",
+  "c": "Option C", 
+  "d": "Option D",
+  "correct": 2,
+  "type": "md",
+  "image": "optional-image.jpg"
+}
+```
+
+### Question Types
+- `md` - Dinamika (Dynamics)
+- `me` - Mechanika (Mechanics)
+- `mf` - Folyadékok (Fluids)
+
+## 🛡️ Security Features
+
+- Input validation and sanitization
+- CORS protection with configurable origins
+- Secure file upload with type/size restrictions
+- Security headers via Helmet.js
+- Container security with non-root user
+
+## 🎯 Usage Scenarios
+
+1. **Student Practice**: Access main site, select categories, take quizzes
+2. **Content Management**: Login to admin panel, add/edit questions and images  
+3. **Deployment**: Use Docker Compose for easy production deployment
+4. **Development**: Use dev profile for hot-reload development
+
+## 📚 Documentation
+
+- **Backend API**: See `backend/README.md` for detailed API documentation
+- **Frontend**: Static HTML/JS application with jQuery
+- **Docker**: Multi-stage builds with security best practices
+- **CI/CD**: Automated builds and deployments via GitHub Actions
+
+## 🤝 Contributing
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Test thoroughly
+5. Submit a pull request
+
+## 📄 License
+
+Educational use for Hungarian physics students.
+
+---
+
+**Open Admin Access**
+- No authentication required
+- Direct access to admin panel
+- ⚠️ **Secure admin access with reverse proxy in production!**

backend/.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+Dockerfile
+.dockerignore

backend/.env.example

@@ -0,0 +1,6 @@
+# Server Configuration
+PORT=3001
+NODE_ENV=development
+
+# CORS Configuration
+FRONTEND_URL=*

backend/Dockerfile

@@ -0,0 +1,61 @@
+# Multi-stage Dockerfile for Fizika Admin Backend
+FROM node:18-alpine AS base
+
+# Install dumb-init for proper signal handling
+RUN apk add --no-cache dumb-init
+
+# Create app directory
+WORKDIR /usr/src/app
+
+# Create non-root user
+RUN addgroup -g 1001 -S nodejs
+RUN adduser -S fizika -u 1001
+
+# Copy package files
+COPY package*.json ./
+
+# Development stage
+FROM base AS dependencies
+
+# Install dependencies
+RUN npm ci --only=production && npm cache clean --force
+
+# Development dependencies for building
+FROM base AS dev-dependencies
+RUN npm ci
+
+# Production stage
+FROM base AS production
+
+# Copy production dependencies
+COPY --from=dependencies /usr/src/app/node_modules ./node_modules
+
+# Copy application code
+COPY --chown=fizika:nodejs . .
+
+# Create necessary directories and set permissions
+RUN mkdir -p /usr/src/app/data /usr/src/app/pics && \
+    chown -R fizika:nodejs /usr/src/app/data /usr/src/app/pics
+
+# Security: Remove package files and any other sensitive data
+RUN rm -f package*.json
+
+# Set environment variables
+ENV NODE_ENV=production
+ENV PORT=3001
+
+# Expose port
+EXPOSE 3001
+
+# Switch to non-root user
+USER fizika
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+    CMD node -e "require('http').get('http://localhost:3001/api/fizika', (res) => { process.exit(res.statusCode === 200 ? 0 : 1) }).on('error', () => process.exit(1))"
+
+# Use dumb-init for proper signal handling
+ENTRYPOINT ["dumb-init", "--"]
+
+# Start the application
+CMD ["node", "server.js"]

backend/README.md

@@ -0,0 +1,239 @@
+# Fizika Admin Backend
+
+A secure Node.js/Express backend for managing physics quiz questions and images for the Fizika website.
+
+## Features
+
+- 🔒 **JWT-based Authentication** - Secure admin access with token-based auth
+- 📝 **Question Management** - Full CRUD operations for quiz questions
+- 🖼️ **Image Management** - Upload, view, and delete image files
+- 🛡️ **Security First** - Rate limiting, input validation, CORS protection
+- 📊 **Public API** - Serves data to the frontend application
+- 🐳 **Docker Ready** - Containerized with multi-stage build
+- 🚀 **Production Ready** - Health checks, proper error handling, logging
+
+## API Endpoints
+
+### Public Endpoints
+- `GET /api/fizika` - Get all questions (for frontend)
+- `GET /api/images` - List all available images
+- `GET /api/pics/:filename` - Serve image files
+
+### Authentication
+- `POST /api/auth/login` - Admin login (returns JWT token)
+
+### Admin Endpoints (Require Authentication)
+- `GET /api/admin/questions` - Get all questions
+- `POST /api/admin/questions` - Create new question
+- `PUT /api/admin/questions/:id` - Update question
+- `DELETE /api/admin/questions/:id` - Delete question
+- `POST /api/admin/images/upload` - Upload image
+- `DELETE /api/admin/images/:filename` - Delete image
+
+## Quick Start
+
+### Using Docker (Recommended)
+
+1. **Clone and navigate to the project:**
+   ```bash
+   git clone <repository-url>
+   cd fizika
+   ```
+
+2. **Set up environment variables:**
+   ```bash
+   cp backend/.env.example backend/.env
+   # Edit backend/.env with your configuration
+   ```
+
+3. **Run with Docker Compose:**
+   ```bash
+   # Production mode
+   docker-compose up -d
+
+   # Development mode with hot reload
+   docker-compose --profile dev up fizika-admin-dev
+   ```
+
+4. **Access the admin interface:**
+   - Open http://localhost:3001/admin.html
+   - Default password: `admin123` (change this!)
+
+### Local Development
+
+1. **Install dependencies:**
+   ```bash
+   cd backend
+   npm install
+   ```
+
+2. **Set up environment:**
+   ```bash
+   cp .env.example .env
+   # Edit .env file with your settings
+   ```
+
+3. **Run the server:**
+   ```bash
+   npm run dev  # Development with nodemon
+   npm start    # Production mode
+   ```
+
+## Configuration
+
+### Environment Variables
+
+| Variable | Description | Default |
+|----------|-------------|---------|
+| `PORT` | Server port | `3001` |
+| `NODE_ENV` | Environment | `development` |
+| `JWT_SECRET` | JWT signing secret | *Required in production* |
+| `ADMIN_PASSWORD_HASH` | Bcrypt hash of admin password | `admin123` |
+| `FRONTEND_URL` | CORS origin for frontend | `http://localhost:8080` |
+
+### Generating Password Hash
+
+```bash
+node -e "console.log(require('bcrypt').hashSync('your-password', 10))"
+```
+
+## Security Features
+
+- **Rate Limiting**: 100 requests per 15 minutes, 5 auth attempts per 15 minutes
+- **Input Validation**: All inputs validated and sanitized
+- **File Upload Security**: Image-only uploads with size limits (5MB)
+- **JWT Authentication**: Secure token-based admin authentication
+- **CORS Protection**: Configurable cross-origin request handling
+- **Helmet.js**: Security headers and protection middleware
+
+## Data Structure
+
+### Question Object
+```json
+{
+  "id": 1,
+  "source": "2016/m1/1",
+  "description": "Question text...",
+  "a": "Option A",
+  "b": "Option B", 
+  "c": "Option C",
+  "d": "Option D",
+  "correct": 2,
+  "type": "md",
+  "image": "image.jpg"
+}
+```
+
+### Question Types
+- `md` - Dinamika (Dynamics)
+- `me` - Mechanika (Mechanics) 
+- `mf` - Folyadékok (Fluids)
+
+## Docker Deployment
+
+### Building the Image
+```bash
+docker build -t fizika-admin ./backend
+```
+
+### Running with Docker
+```bash
+docker run -d \
+  -p 3001:3001 \
+  -e JWT_SECRET=your-secret-key \
+  -e ADMIN_PASSWORD_HASH='$2b$10$...' \
+  -v $(pwd)/fizika.json:/usr/src/app/fizika.json:ro \
+  -v $(pwd)/pics:/usr/src/app/pics \
+  fizika-admin
+```
+
+### Docker Compose Production
+```bash
+# Set environment variables
+export JWT_SECRET="your-super-secret-jwt-key"
+export ADMIN_PASSWORD_HASH="$2b$10$your-bcrypt-hash"
+export FRONTEND_URL="https://your-domain.com"
+
+# Run
+docker-compose up -d
+```
+
+## GitHub Actions
+
+The project includes a GitHub Actions workflow that:
+- Builds multi-architecture Docker images (AMD64, ARM64)
+- Pushes to GitHub Container Registry
+- Signs images with Cosign
+- Performs security scanning with Trivy
+- Runs on pushes to main branch and releases
+
+## Admin Interface
+
+Access the admin interface at `/admin.html`:
+- **Questions Tab**: Add, edit, delete quiz questions
+- **Images Tab**: Upload and manage image files
+- **Responsive Design**: Works on desktop and mobile
+- **Real-time Updates**: Changes reflect immediately
+
+## API Client Example
+
+```javascript
+// Login
+const response = await fetch('/api/auth/login', {
+  method: 'POST',
+  headers: { 'Content-Type': 'application/json' },
+  body: JSON.stringify({ password: 'your-password' })
+});
+const { token } = await response.json();
+
+// Create question
+await fetch('/api/admin/questions', {
+  method: 'POST',
+  headers: {
+    'Content-Type': 'application/json',
+    'Authorization': `Bearer ${token}`
+  },
+  body: JSON.stringify({
+    source: '2024/test/1',
+    description: 'What is physics?',
+    a: 'Science',
+    b: 'Art', 
+    c: 'Math',
+    d: 'Biology',
+    correct: 1,
+    type: 'md'
+  })
+});
+```
+
+## Troubleshooting
+
+### Common Issues
+
+1. **CORS Errors**: Check `FRONTEND_URL` environment variable
+2. **Authentication Fails**: Verify `JWT_SECRET` and `ADMIN_PASSWORD_HASH`
+3. **File Upload Errors**: Check write permissions on pics directory
+4. **Health Check Fails**: Ensure fizika.json exists and is readable
+
+### Logs
+```bash
+# Docker logs
+docker logs fizika-admin
+
+# Docker Compose logs
+docker-compose logs fizika-admin
+```
+
+## License
+
+This project is part of the Fizika educational platform.
+
+## Contributing
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Add tests if applicable
+5. Submit a pull request
+
+For issues or questions, please open a GitHub issue.

backend/docker-compose.yml

@@ -0,0 +1,66 @@
+version: '3.8'
+
+services:
+  fizika-admin:
+    build:
+      context: ./backend
+      dockerfile: Dockerfile
+    ports:
+      - "3001:3001"
+    environment:
+      - NODE_ENV=production
+      - PORT=3001
+      - FRONTEND_URL=${FRONTEND_URL:-*}
+    volumes:
+      # Mount data files
+      - ./fizika.json:/usr/src/app/fizika.json:ro
+      - ./pics:/usr/src/app/pics
+      # Optional: mount for development
+      # - ./backend:/usr/src/app
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "node", "-e", "require('http').get('http://localhost:3001/api/fizika', (res) => { process.exit(res.statusCode === 200 ? 0 : 1) }).on('error', () => process.exit(1))"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+
+  # Optional: Development service with hot reload
+  fizika-admin-dev:
+    build:
+      context: ./backend
+      dockerfile: Dockerfile
+      target: dev-dependencies
+    ports:
+      - "3001:3001"
+    environment:
+      - NODE_ENV=development
+      - PORT=3001
+      - FRONTEND_URL=*
+    volumes:
+      - ./backend:/usr/src/app
+      - ./fizika.json:/usr/src/app/fizika.json
+      - ./pics:/usr/src/app/pics
+      - /usr/src/app/node_modules
+    command: npm run dev
+    profiles: ["dev"]
+
+  # Optional: Nginx reverse proxy for production
+  nginx:
+    image: nginx:alpine
+    ports:
+      - "80:80"
+      - "443:443"
+    volumes:
+      - ./nginx.conf:/etc/nginx/nginx.conf:ro
+      - .:/usr/share/nginx/html:ro
+      # SSL certificates (if using HTTPS)
+      # - ./ssl:/etc/ssl/certs
+    depends_on:
+      - fizika-admin
+    restart: unless-stopped
+    profiles: ["nginx"]
+
+networks:
+  default:
+    name: fizika-network

backend/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "fizika-admin-backend",
+  "version": "1.0.0",
+  "description": "Backend for editing Fizika quiz data",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js",
+    "dev": "nodemon server.js"
+  },
+  "dependencies": {
+    "express": "^4.18.2",
+    "multer": "^1.4.5-lts.1",
+    "cors": "^2.8.5",
+    "helmet": "^7.1.0"
+  },
+  "devDependencies": {
+    "nodemon": "^3.0.2"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

backend/public/admin.html

@@ -0,0 +1,351 @@
+<!DOCTYPE html>
+<html lang="hu">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Fizika Admin - Kérdések és képek kezelése</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+        line-height: 1.6;
+        color: #333;
+        background-color: #f5f5f5;
+      }
+
+      .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 20px;
+      }
+
+      .header {
+        background: #003366;
+        color: white;
+        padding: 1rem;
+        margin-bottom: 2rem;
+        border-radius: 8px;
+      }
+
+      .tabs {
+        display: flex;
+        margin-bottom: 2rem;
+        background: white;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+      }
+
+      .tab {
+        flex: 1;
+        padding: 1rem;
+        background: white;
+        border: none;
+        cursor: pointer;
+        font-size: 1rem;
+        transition: background-color 0.3s;
+      }
+
+      .tab:hover {
+        background: #f0f0f0;
+      }
+
+      .tab.active {
+        background: #003366;
+        color: white;
+      }
+      .tab:not(.active) {
+        color: #333;
+      }
+
+      .tab-content {
+        display: none;
+        background: white;
+        padding: 2rem;
+        border-radius: 8px;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+      }
+
+      .tab-content.active {
+        display: block;
+      }
+
+      .form-group {
+        margin-bottom: 1rem;
+      }
+
+      label {
+        display: block;
+        margin-bottom: 0.5rem;
+        font-weight: bold;
+      }
+
+      input,
+      textarea,
+      select {
+        width: 100%;
+        padding: 0.75rem;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        font-size: 1rem;
+      }
+
+      textarea {
+        min-height: 100px;
+        resize: vertical;
+      }
+
+      button {
+        background: #003366;
+        color: white;
+        padding: 0.75rem 1.5rem;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 1rem;
+        transition: background-color 0.3s;
+      }
+
+      button:hover {
+        background: #004488;
+      }
+
+      button.secondary {
+        background: #666;
+      }
+
+      button.danger {
+        background: #dc3545;
+      }
+
+      button.danger:hover {
+        background: #c82333;
+      }
+
+      .questions-list {
+        margin-top: 2rem;
+      }
+
+      .question-item {
+        background: #f8f9fa;
+        padding: 1rem;
+        margin-bottom: 1rem;
+        border-radius: 4px;
+        border-left: 4px solid #003366;
+      }
+
+      .question-actions button {
+        margin-right: 0.5rem;
+        margin-bottom: 0.5rem;
+      }
+
+      .images-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        gap: 1rem;
+        margin-top: 1rem;
+      }
+
+      .image-item {
+        background: white;
+        padding: 1rem;
+        border-radius: 4px;
+        text-align: center;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+      }
+
+      .image-item img {
+        max-width: 100%;
+        height: 150px;
+        object-fit: cover;
+        border-radius: 4px;
+      }
+
+      .alert {
+        padding: 1rem;
+        margin-bottom: 1rem;
+        border-radius: 4px;
+      }
+
+      .alert-success {
+        background: #d4edda;
+        color: #155724;
+        border: 1px solid #c3e6cb;
+      }
+
+      .alert-danger {
+        background: #f8d7da;
+        color: #721c24;
+        border: 1px solid #f5c6cb;
+      }
+
+      .modal {
+        display: none;
+        position: fixed;
+        z-index: 1000;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+      }
+
+      .modal-content {
+        background-color: white;
+        margin: 5% auto;
+        padding: 2rem;
+        border-radius: 8px;
+        width: 80%;
+        max-width: 600px;
+        max-height: 80%;
+        overflow-y: auto;
+      }
+
+      .close {
+        color: #aaa;
+        float: right;
+        font-size: 28px;
+        font-weight: bold;
+        cursor: pointer;
+      }
+
+      .close:hover {
+        color: black;
+      }
+
+      @media (max-width: 768px) {
+        .container {
+          padding: 10px;
+        }
+        .tabs {
+          flex-direction: column;
+        }
+        .images-grid {
+          grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="header">
+        <h1>Fizika Admin Panel</h1>
+        <p>Kérdések és képek kezelése</p>
+      </div>
+
+      <!-- Admin Panel -->
+      <div class="tabs">
+        <button class="tab active" data-tab="questions">
+          Kérdések kezelése
+        </button>
+        <button class="tab" data-tab="images">Képek kezelése</button>
+      </div>
+
+      <!-- Questions Tab -->
+      <div id="questionsTab" class="tab-content active">
+        <h2>Kérdések kezelése</h2>
+        <div id="questionsAlert"></div>
+
+        <button id="addQuestionBtn">Új kérdés hozzáadása</button>
+
+        <div id="questionsList" class="questions-list">
+          <div>Kérdések betöltése...</div>
+        </div>
+      </div>
+
+      <!-- Images Tab -->
+      <div id="imagesTab" class="tab-content">
+        <h2>Képek kezelése</h2>
+        <div id="imagesAlert"></div>
+
+        <div class="form-group">
+          <label for="imageUpload">Új kép feltöltése:</label>
+          <input type="file" id="imageUpload" accept="image/*" />
+        </div>
+
+        <div id="imagesList" class="images-grid">
+          <div>Képek betöltése...</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Question Edit Modal -->
+    <div id="questionModal" class="modal">
+      <div class="modal-content">
+        <span class="close" id="closeModalBtn">&times;</span>
+        <h2 id="modalTitle">Kérdés szerkesztése</h2>
+        <form id="questionForm">
+          <input type="hidden" id="questionId" />
+
+          <div class="form-group">
+            <label for="questionSource">Forrás:</label>
+            <input type="text" id="questionSource" required />
+          </div>
+
+          <div class="form-group">
+            <label for="questionDescription">Kérdés szövege:</label>
+            <textarea id="questionDescription" required></textarea>
+          </div>
+
+          <div class="form-group">
+            <label for="questionA">A válasz:</label>
+            <textarea id="questionA" required></textarea>
+          </div>
+
+          <div class="form-group">
+            <label for="questionB">B válasz:</label>
+            <textarea id="questionB" required></textarea>
+          </div>
+
+          <div class="form-group">
+            <label for="questionC">C válasz:</label>
+            <textarea id="questionC" required></textarea>
+          </div>
+
+          <div class="form-group">
+            <label for="questionD">D válasz:</label>
+            <textarea id="questionD" required></textarea>
+          </div>
+
+          <div class="form-group">
+            <label for="questionCorrect">Helyes válasz:</label>
+            <select id="questionCorrect" required>
+              <option value="1">A</option>
+              <option value="2">B</option>
+              <option value="3">C</option>
+              <option value="4">D</option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="questionType">Típus:</label>
+            <select id="questionType" required>
+              <option value="md">Dinamika</option>
+              <option value="me">Mechanika</option>
+              <option value="mf">Folyadékok</option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="questionImage">Kép:</label>
+            <input
+              type="text"
+              id="questionImage"
+              placeholder="Kép fájlneve (opcionális)"
+            />
+          </div>
+
+          <button type="submit">Mentés</button>
+          <button type="button" class="secondary" id="cancelBtn">Mégse</button>
+        </form>
+      </div>
+    </div>
+
+    <script src="admin.js"></script>
+  </body>
+</html>

backend/public/admin.js

@@ -0,0 +1,324 @@
+const API_BASE = window.location.origin;
+
+// Initialize
+document.addEventListener("DOMContentLoaded", function () {
+  loadQuestions();
+  loadImages();
+  
+  // Set up event listeners
+  setupEventListeners();
+});
+
+function setupEventListeners() {
+  // Tab switching
+  document.querySelectorAll('.tab[data-tab]').forEach(tab => {
+    tab.addEventListener('click', (e) => {
+      switchTab(e.target.dataset.tab);
+    });
+  });
+  
+  // Add question button
+  document.getElementById('addQuestionBtn').addEventListener('click', showAddQuestionModal);
+  
+  // Image upload
+  document.getElementById('imageUpload').addEventListener('change', uploadImage);
+  
+  // Modal close buttons
+  document.getElementById('closeModalBtn').addEventListener('click', closeModal);
+  document.getElementById('cancelBtn').addEventListener('click', closeModal);
+  
+  // Question form submit
+  document.getElementById('questionForm').addEventListener('submit', saveQuestion);
+  
+  // Close modal when clicking outside
+  document.getElementById('questionModal').addEventListener('click', (e) => {
+    if (e.target.id === 'questionModal') {
+      closeModal();
+    }
+  });
+}
+
+// Tab switching
+function switchTab(tabName) {
+  document
+    .querySelectorAll(".tab-content")
+    .forEach((tab) => tab.classList.remove("active"));
+  document
+    .querySelectorAll(".tab")
+    .forEach((tab) => tab.classList.remove("active"));
+
+  document.getElementById(tabName + "Tab").classList.add("active");
+  document.querySelector(`[data-tab="${tabName}"]`).classList.add("active");
+
+  if (tabName === "images") loadImages();
+}
+
+// Questions management
+async function loadQuestions() {
+  try {
+    const response = await fetch(`${API_BASE}/api/admin/questions`);
+    if (response.ok) {
+      const questions = await response.json();
+      displayQuestions(questions);
+    } else {
+      throw new Error("Failed to load");
+    }
+  } catch (error) {
+    document.getElementById("questionsList").innerHTML =
+      '<div class="alert alert-danger">Hiba a kérdések betöltésekor</div>';
+  }
+}
+
+function displayQuestions(questions) {
+  const container = document.getElementById("questionsList");
+  container.innerHTML = questions
+    .map(
+      (q) => `
+        <div class="question-item">
+            <h4>ID: ${q.id} - ${q.source}</h4>
+            <p><strong>Kérdés:</strong> ${q.description.substring(
+              0,
+              100
+            )}...</p>
+            <p><strong>Típus:</strong> ${
+              q.type
+            } | <strong>Helyes válasz:</strong> ${
+        ["A", "B", "C", "D"][q.correct - 1]
+      }</p>
+            <div class="question-actions">
+                <button data-edit-id="${q.id}">Szerkesztés</button>
+                <button class="danger" data-delete-id="${q.id}">Törlés</button>
+            </div>
+        </div>
+    `
+    )
+    .join("");
+    
+  // Add event listeners for edit and delete buttons
+  container.querySelectorAll('[data-edit-id]').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      editQuestion(parseInt(e.target.dataset.editId));
+    });
+  });
+  
+  container.querySelectorAll('[data-delete-id]').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      deleteQuestion(parseInt(e.target.dataset.deleteId));
+    });
+  });
+}
+
+function showAddQuestionModal() {
+  document.getElementById("modalTitle").textContent =
+    "Új kérdés hozzáadása";
+  document.getElementById("questionForm").reset();
+  document.getElementById("questionId").value = "";
+  document.getElementById("questionModal").style.display = "block";
+}
+
+async function editQuestion(id) {
+  try {
+    const response = await fetch(`${API_BASE}/api/admin/questions`);
+    if (response.ok) {
+      const questions = await response.json();
+      const question = questions.find((q) => q.id === id);
+
+      if (question) {
+        document.getElementById("modalTitle").textContent =
+          "Kérdés szerkesztése";
+        document.getElementById("questionId").value = question.id;
+        document.getElementById("questionSource").value = question.source;
+        document.getElementById("questionDescription").value =
+          question.description;
+        document.getElementById("questionA").value = question.a;
+        document.getElementById("questionB").value = question.b;
+        document.getElementById("questionC").value = question.c;
+        document.getElementById("questionD").value = question.d;
+        document.getElementById("questionCorrect").value =
+          question.correct;
+        document.getElementById("questionType").value = question.type;
+        document.getElementById("questionImage").value =
+          question.image || "";
+        document.getElementById("questionModal").style.display = "block";
+      }
+    }
+  } catch (error) {
+    showAlert("questionsAlert", "Hiba a kérdés betöltésekor", "danger");
+  }
+}
+
+async function saveQuestion(event) {
+  event.preventDefault();
+
+  const data = {
+    source: document.getElementById("questionSource").value,
+    description: document.getElementById("questionDescription").value,
+    a: document.getElementById("questionA").value,
+    b: document.getElementById("questionB").value,
+    c: document.getElementById("questionC").value,
+    d: document.getElementById("questionD").value,
+    correct: parseInt(document.getElementById("questionCorrect").value),
+    type: document.getElementById("questionType").value,
+    image: document.getElementById("questionImage").value || null,
+  };
+
+  const id = document.getElementById("questionId").value;
+  const isEdit = id !== "";
+
+  try {
+    const response = await fetch(
+      isEdit
+        ? `${API_BASE}/api/admin/questions/${id}`
+        : `${API_BASE}/api/admin/questions`,
+      {
+        method: isEdit ? "PUT" : "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      }
+    );
+
+    if (response.ok) {
+      closeModal();
+      loadQuestions();
+      showAlert("questionsAlert", "Kérdés sikeresen mentve!", "success");
+    } else {
+      const error = await response.json();
+      showAlert(
+        "questionsAlert",
+        error.error || "Hiba a mentés során",
+        "danger"
+      );
+    }
+  } catch (error) {
+    showAlert("questionsAlert", "Kapcsolat hiba", "danger");
+  }
+}
+
+async function deleteQuestion(id) {
+  if (!confirm("Biztosan törölni szeretnéd ezt a kérdést?")) return;
+
+  try {
+    const response = await fetch(
+      `${API_BASE}/api/admin/questions/${id}`,
+      { method: "DELETE" }
+    );
+    if (response.ok) {
+      loadQuestions();
+      showAlert("questionsAlert", "Kérdés törölve!", "success");
+    } else {
+      throw new Error("Delete failed");
+    }
+  } catch (error) {
+    showAlert("questionsAlert", "Hiba a törlés során", "danger");
+  }
+}
+
+// Images management
+async function loadImages() {
+  try {
+    const response = await fetch(`${API_BASE}/api/images`);
+    if (response.ok) {
+      const images = await response.json();
+      displayImages(images);
+    } else {
+      throw new Error("Failed to load");
+    }
+  } catch (error) {
+    document.getElementById("imagesList").innerHTML =
+      '<div class="alert alert-danger">Hiba a képek betöltésekor</div>';
+  }
+}
+
+function displayImages(images) {
+  const container = document.getElementById("imagesList");
+  container.innerHTML = images
+    .map(
+      (image) => `
+        <div class="image-item">
+            <img src="${API_BASE}/api/pics/${image}" alt="${image}">
+            <p>${image}</p>
+            <button class="danger" data-delete-image="${image}">Törlés</button>
+        </div>
+    `
+    )
+    .join("");
+    
+  // Add event listeners for delete buttons
+  container.querySelectorAll('[data-delete-image]').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      deleteImage(e.target.dataset.deleteImage);
+    });
+  });
+}
+
+async function uploadImage() {
+  const input = document.getElementById("imageUpload");
+  const file = input.files[0];
+
+  if (!file) return;
+
+  const formData = new FormData();
+  formData.append("image", file);
+
+  try {
+    const response = await fetch(`${API_BASE}/api/admin/images/upload`, {
+      method: "POST",
+      body: formData,
+    });
+
+    if (response.ok) {
+      input.value = "";
+      loadImages();
+      showAlert("imagesAlert", "Kép sikeresen feltöltve!", "success");
+    } else {
+      const error = await response.json();
+      showAlert(
+        "imagesAlert",
+        error.error || "Hiba a feltöltés során",
+        "danger"
+      );
+    }
+  } catch (error) {
+    showAlert("imagesAlert", "Kapcsolat hiba", "danger");
+  }
+}
+
+async function deleteImage(filename) {
+  if (!confirm(`Biztosan törölni szeretnéd a ${filename} képet?`)) return;
+
+  try {
+    const response = await fetch(
+      `${API_BASE}/api/admin/images/${encodeURIComponent(filename)}`,
+      {
+        method: "DELETE",
+      }
+    );
+
+    if (response.ok) {
+      loadImages();
+      showAlert("imagesAlert", "Kép törölve!", "success");
+    } else {
+      throw new Error("Delete failed");
+    }
+  } catch (error) {
+    showAlert("imagesAlert", "Hiba a törlés során", "danger");
+  }
+}
+
+// Utility functions
+function closeModal() {
+  document.getElementById("questionModal").style.display = "none";
+}
+
+function showAlert(elementId, message, type) {
+  const alertDiv = document.getElementById(elementId);
+  alertDiv.className = `alert alert-${type}`;
+  alertDiv.textContent = message;
+  alertDiv.style.display = "block";
+
+  setTimeout(() => {
+    alertDiv.style.display = "none";
+  }, 5000);
+}
+
+// This is now handled in setupEventListeners()

backend/server.js

@@ -0,0 +1,183 @@
+const express = require('express');
+const cors = require('cors');
+const multer = require('multer');
+const path = require('path');
+const fs = require('fs').promises;
+const helmet = require('helmet');
+
+const app = express();
+const PORT = process.env.PORT || 3001;
+
+// Security middleware
+app.use(helmet());
+app.use(cors({
+  origin: process.env.FRONTEND_URL || '*',
+  credentials: true
+}));
+
+app.use(express.json({ limit: '10mb' }));
+app.use(express.static('public'));
+
+// File paths
+const DATA_PATH = path.join(__dirname, '../frontend/fizika.json');
+const PICS_PATH = path.join(__dirname, '../frontend/pics');
+
+// Multer configuration for image uploads
+const upload = multer({
+  dest: PICS_PATH,
+  limits: { fileSize: 5 * 1024 * 1024 }, // 5MB
+  fileFilter: (req, file, cb) => {
+    if (file.mimetype.startsWith('image/')) {
+      cb(null, true);
+    } else {
+      cb(new Error('Only images allowed'));
+    }
+  },
+  filename: (req, file, cb) => {
+    cb(null, file.originalname);
+  }
+});
+
+// Utility functions
+const readData = async () => {
+  const data = await fs.readFile(DATA_PATH, 'utf8');
+  return JSON.parse(data);
+};
+
+const writeData = async (data) => {
+  await fs.writeFile(DATA_PATH, JSON.stringify(data, null, 2));
+};
+
+const validateQuestion = (q) => {
+  return q.description && q.a && q.b && q.c && q.d &&
+    q.correct >= 1 && q.correct <= 4 &&
+    ['md', 'me', 'mf'].includes(q.type) && q.source;
+};
+
+// Public routes
+app.get('/api/fizika', async (req, res) => {
+  try {
+    const data = await readData();
+    res.json(data);
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to read data' });
+  }
+});
+
+app.get('/api/images', async (req, res) => {
+  try {
+    const files = await fs.readdir(PICS_PATH);
+    const images = files.filter(f => /\.(jpg|jpeg|png|gif|bmp)$/i.test(f));
+    res.json(images);
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to read images' });
+  }
+});
+
+app.use('/api/pics', express.static(PICS_PATH));
+
+// Admin routes (no auth required)
+app.get('/api/admin/questions', async (req, res) => {
+  try {
+    const data = await readData();
+    res.json(data);
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to read questions' });
+  }
+});
+
+app.post('/api/admin/questions', async (req, res) => {
+  try {
+    if (!validateQuestion(req.body)) {
+      return res.status(400).json({ error: 'Invalid question data' });
+    }
+
+    const data = await readData();
+    const maxId = Math.max(...data.map(q => q.id), 0);
+
+    const newQuestion = { id: maxId + 1, ...req.body };
+    data.push(newQuestion);
+    await writeData(data);
+
+    res.status(201).json(newQuestion);
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to create question' });
+  }
+});
+
+app.put('/api/admin/questions/:id', async (req, res) => {
+  try {
+    if (!validateQuestion(req.body)) {
+      return res.status(400).json({ error: 'Invalid question data' });
+    }
+
+    const data = await readData();
+    const index = data.findIndex(q => q.id === parseInt(req.params.id));
+
+    if (index === -1) {
+      return res.status(404).json({ error: 'Question not found' });
+    }
+
+    data[index] = { ...data[index], ...req.body };
+    await writeData(data);
+
+    res.json(data[index]);
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to update question' });
+  }
+});
+
+app.delete('/api/admin/questions/:id', async (req, res) => {
+  try {
+    const data = await readData();
+    const index = data.findIndex(q => q.id === parseInt(req.params.id));
+
+    if (index === -1) {
+      return res.status(404).json({ error: 'Question not found' });
+    }
+
+    data.splice(index, 1);
+    await writeData(data);
+
+    res.json({ message: 'Question deleted' });
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to delete question' });
+  }
+});
+
+app.post('/api/admin/images/upload', upload.single('image'), (req, res) => {
+  if (!req.file) {
+    return res.status(400).json({ error: 'No image provided' });
+  }
+
+  res.json({
+    filename: req.file.filename,
+    path: `/api/pics/${req.file.filename}`
+  });
+});
+
+app.delete('/api/admin/images/:filename', async (req, res) => {
+  try {
+    await fs.unlink(path.join(PICS_PATH, req.params.filename));
+    res.json({ message: 'Image deleted' });
+  } catch (error) {
+    if (error.code === 'ENOENT') {
+      return res.status(404).json({ error: 'Image not found' });
+    }
+    res.status(500).json({ error: 'Failed to delete image' });
+  }
+});
+
+// Error handling
+app.use((error, req, res, next) => {
+  console.error('Error:', error.message);
+  res.status(500).json({ error: 'Server error' });
+});
+
+app.use((req, res) => {
+  res.status(404).json({ error: 'Not found' });
+});
+
+app.listen(PORT, () => {
+  console.log(`Fizika Admin Backend running on port ${PORT}`);
+});

frontend/js/load.js

@@ -1,4 +1,6 @@
 let questions = null;
+const API_BASE = window.location.hostname === 'localhost' ? 'http://localhost:3001' : 'https://your-backend-domain.com';
+
 const loadQuestions = async (
   isSearch,
   categories,
@@ -6,8 +8,13 @@ const loadQuestions = async (
   questionCount
 ) => {
   if (questions === null) {
+    try {
+      questions = await (await fetch(`${API_BASE}/api/fizika`)).json();
+    } catch (error) {
+      console.error('Failed to load questions from API, falling back to local file:', error);
       questions = await (await fetch("fizika.json")).json();
     }
+  }
 
   let currentQuestions = questions.slice();
 
@@ -31,7 +38,7 @@ const loadQuestions = async (
       <div class="feladat card" id="feladat${id}"> 
         <h2 style="float: left;">${i + 1}.</h2><h2>${source}</h2>
         <pre>${description}</pre>
-        ${image ? `<img src="pics/${image}"><br>` : ""}
+        ${image ? `<img src="${API_BASE}/api/pics/${image}"><br>` : ""}
         <form id="form${id}"">
           <input type="radio" id="rad1" name="group">
           <label id="label${id}" class="rad1">${a}</label>