feat: Add image generation for SVG logos and improve clipboard functionality

- Added @resvg/resvg-js dependency for SVG to PNG/JPG conversion. - Implemented pregeneration of PNG and JPG images from SVG files in the scanLogos script. - Enhanced copy URL functionality in App.svelte to support modern clipboard API with fallbacks. - Removed unnecessary onCopy prop from LogoActions component and handled copy actions locally. - Introduced notification system for copy actions with success/error feedback. - Updated styles for action buttons and notifications for better user experience. - Cleaned up unused code and improved overall structure for clarity.
2025-12-20 00:25:59 +00:00 · 2025-04-28 22:43:39 +03:00
parent cd962ac37a
commit c30f8921c2
11 changed files with 876 additions and 174 deletions
--- a/.github/workflows/gh-pages.yml
+++ b/.github/workflows/gh-pages.yml
@@ -25,6 +25,9 @@ jobs:
      - name: Install dependencies
        run: npm ci

+      - name: Install sharp
+        run: npm install sharp
+
      - name: Build project
        run: npm run build

@@ -39,6 +42,7 @@ jobs:
          cp public/global.css ./gh-pages-artifact/
          cp -r public/data ./gh-pages-artifact/
          cp -r public/logos ./gh-pages-artifact/
+          cp -r public/logos_gen ./gh-pages-artifact/
          if [ -f public/CNAME ]; then
            cp public/CNAME ./gh-pages-artifact/CNAME
          fi
--- a/Dockerfile.dev
+++ b/Dockerfile.dev
@@ -3,7 +3,8 @@ FROM node:slim
 WORKDIR /app

 COPY package*.json ./
-RUN npm install || true
+
+RUN npm install

 # Only copy minimal files for initial build, source will be mounted
 COPY public/index.html public/global.css ./public/
--- a/10
+++ b/10
@@ -6,7 +6,7 @@ CONTAINER_NAME = logo-gallery
 DEV_PORT = 5006

 # Main targets
-.PHONY: all build start stop restart logs clean scan-logos dev
+.PHONY: all build start stop restart logs clean scan-logos dev rebuild

 all: build start

@@ -47,7 +47,7 @@ run:
 # Scan logos.json from files in the logos directory (for dev mode)
 scan-logos:
 	@echo "Scanning logos directory and updating logos.json for development..."
-	$(DOCKER_COMPOSE) -f compose.dev.yml run --rm logo-gallery-dev npm run scan-logos
+	$(DOCKER_COMPOSE) -f compose.dev.yml run --rm slogos-dev npm run scan-logos
 	@echo "Logos have been updated - refresh the browser to see changes"

 # Clean up build artifacts and temporary files
@@ -58,9 +58,5 @@ clean:

 # Complete rebuild from scratch
 rebuild:
-	@echo "Performing complete rebuild..."
-	$(DOCKER_COMPOSE) -f compose.dev.yml down
-	docker builder prune -f
+	$(DOCKER_COMPOSE) -f compose.dev.yml down -v
 	$(DOCKER_COMPOSE) -f compose.dev.yml build --no-cache
-	$(DOCKER_COMPOSE) -f compose.dev.yml up -d
-	@echo "Rebuild complete. Application is running at http://localhost:$(DEV_PORT)"
--- a/compose.dev.yml
+++ b/compose.dev.yml
@@ -1,14 +1,15 @@
 services:
-  logo-gallery-dev:
+  slogos-dev:
    build:
      context: .
      dockerfile: Dockerfile.dev
-    container_name: logo-gallery-dev
+    container_name: slogos-dev
    ports:
      - "5006:5000"
      - "35729:35729"
    volumes:
      - ./:/app
+      - /app/node_modules
    working_dir: /app
    environment:
      - NODE_ENV=development
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
      "name": "logo-gallery",
      "version": "1.0.0",
      "dependencies": {
+        "sharp": "^0.34.1",
        "sirv-cli": "^1.0.0"
      },
      "devDependencies": {
@@ -42,6 +43,393 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.4.3.tgz",
+      "integrity": "sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.1.tgz",
+      "integrity": "sha512-pn44xgBtgpEbZsu+lWf2KNb6OAf70X68k+yk69Ic2Xz11zHR/w24/U49XT7AeRwJ0Px+mhALhU5LPci1Aymk7A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.1.0"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.1.tgz",
+      "integrity": "sha512-VfuYgG2r8BpYiOUN+BfYeFo69nP/MIwAtSJ7/Zpxc5QF3KS22z8Pvg3FkrSFJBPNQ7mmcUcYQFBmEQp7eu1F8Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.1.0"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.1.0.tgz",
+      "integrity": "sha512-HZ/JUmPwrJSoM4DIQPv/BfNh9yrOA8tlBbqbLz4JZ5uew2+o22Ik+tHQJcih7QJuSa0zo5coHTfD5J8inqj9DA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.1.0.tgz",
+      "integrity": "sha512-Xzc2ToEmHN+hfvsl9wja0RlnXEgpKNmftriQp6XzY/RaSfwD9th+MSh0WQKzUreLKKINb3afirxW7A0fz2YWuQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.1.0.tgz",
+      "integrity": "sha512-s8BAd0lwUIvYCJyRdFqvsj+BJIpDBSxs6ivrOPm/R7piTs5UIwY5OjXrP2bqXC9/moGsyRa37eYWYCOGVXxVrA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.1.0.tgz",
+      "integrity": "sha512-IVfGJa7gjChDET1dK9SekxFFdflarnUB8PwW8aGwEoF3oAsSDuNUTYS+SKDOyOJxQyDC1aPFMuRYLoDInyV9Ew==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.1.0.tgz",
+      "integrity": "sha512-tiXxFZFbhnkWE2LA8oQj7KYR+bWBkiV2nilRldT7bqoEZ4HiDOcePr9wVDAZPi/Id5fT1oY9iGnDq20cwUz8lQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.1.0.tgz",
+      "integrity": "sha512-xukSwvhguw7COyzvmjydRb3x/09+21HykyapcZchiCUkTThEQEOMtBj9UhkaBRLuBrgLFzQ2wbxdeCCJW/jgJA==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.1.0.tgz",
+      "integrity": "sha512-yRj2+reB8iMg9W5sULM3S74jVS7zqSzHG3Ol/twnAAkAhnGQnpjj6e4ayUz7V+FpKypwgs82xbRdYtchTTUB+Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.1.0.tgz",
+      "integrity": "sha512-jYZdG+whg0MDK+q2COKbYidaqW/WTz0cc1E+tMAusiDygrM4ypmSCjOJPmFTvHHJ8j/6cAGyeDWZOsK06tP33w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.1.0.tgz",
+      "integrity": "sha512-wK7SBdwrAiycjXdkPnGCPLjYb9lD4l6Ze2gSdAGVZrEL05AOUJESWU2lhlC+Ffn5/G+VKuSm6zzbQSzFX/P65A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.1.tgz",
+      "integrity": "sha512-anKiszvACti2sGy9CirTlNyk7BjjZPiML1jt2ZkTdcvpLU1YH6CXwRAZCA2UmRXnhiIftXQ7+Oh62Ji25W72jA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.1.0"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.1.tgz",
+      "integrity": "sha512-kX2c+vbvaXC6vly1RDf/IWNXxrlxLNpBVWkdpRq5Ka7OOKj6nr66etKy2IENf6FtOgklkg9ZdGpEu9kwdlcwOQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.1.0"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.1.tgz",
+      "integrity": "sha512-7s0KX2tI9mZI2buRipKIw2X1ufdTeaRgwmRabt5bi9chYfhur+/C1OXg3TKg/eag1W+6CCWLVmSauV1owmRPxA==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.1.0"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.1.tgz",
+      "integrity": "sha512-wExv7SH9nmoBW3Wr2gvQopX1k8q2g5V5Iag8Zk6AVENsjwd+3adjwxtp3Dcu2QhOXr8W9NusBU6XcQUohBZ5MA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.1.0"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.1.tgz",
+      "integrity": "sha512-DfvyxzHxw4WGdPiTF0SOHnm11Xv4aQexvqhRDAoD00MzHekAj9a/jADXeXYCDFH/DzYruwHbXU7uz+H+nWmSOQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.1.0"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.1.tgz",
+      "integrity": "sha512-pax/kTR407vNb9qaSIiWVnQplPcGU8LRIJpDT5o8PdAx5aAA7AS3X9PS8Isw1/WfqgQorPotjrZL3Pqh6C5EBg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.1.0"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.1.tgz",
+      "integrity": "sha512-YDybQnYrLQfEpzGOQe7OKcyLUCML4YOXl428gOOzBgN6Gw0rv8dpsJ7PqTHxBnXnwXr8S1mYFSLSa727tpz0xg==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.4.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.1.tgz",
+      "integrity": "sha512-WKf/NAZITnonBf3U1LfdjoMgNO5JYRSlhovhRhMxXVdvWYveM4kM3L8m35onYIdh75cOMCo1BexgVQcCDzyoWw==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.1.tgz",
+      "integrity": "sha512-hw1iIAHpNE8q3uMIRCgGOeDoz9KtFNarFLQclLxr/LK1VBkj8nby18RjFvr6aP7USRYAjTZW6yisnBWMX571Tw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
    "node_modules/@jridgewell/gen-mapping": {
      "version": "0.3.8",
      "dev": true,
@@ -277,6 +665,47 @@
        "fsevents": "~2.3.2"
      }
    },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
    "node_modules/commander": {
      "version": "2.20.3",
      "dev": true,
@@ -307,6 +736,15 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/detect-libc": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
+      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/estree-walker": {
      "version": "2.0.2",
      "dev": true,
@@ -406,6 +844,12 @@
      "dev": true,
      "license": "ISC"
    },
+    "node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "license": "MIT"
+    },
    "node_modules/is-binary-path": {
      "version": "2.1.0",
      "dev": true,
@@ -788,6 +1232,18 @@
        "node": ">=6"
      }
    },
+    "node_modules/semver": {
+      "version": "7.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
+      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/serialize-javascript": {
      "version": "4.0.0",
      "dev": true,
@@ -796,6 +1252,55 @@
        "randombytes": "^2.1.0"
      }
    },
+    "node_modules/sharp": {
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.1.tgz",
+      "integrity": "sha512-1j0w61+eVxu7DawFJtnfYcvSv6qPFvfTaqzTQ2BLknVhHTwGS8sc63ZBF4rzkWMBVKybo4S5OBtDdZahh2A1xg==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.3",
+        "semver": "^7.7.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.34.1",
+        "@img/sharp-darwin-x64": "0.34.1",
+        "@img/sharp-libvips-darwin-arm64": "1.1.0",
+        "@img/sharp-libvips-darwin-x64": "1.1.0",
+        "@img/sharp-libvips-linux-arm": "1.1.0",
+        "@img/sharp-libvips-linux-arm64": "1.1.0",
+        "@img/sharp-libvips-linux-ppc64": "1.1.0",
+        "@img/sharp-libvips-linux-s390x": "1.1.0",
+        "@img/sharp-libvips-linux-x64": "1.1.0",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.1.0",
+        "@img/sharp-libvips-linuxmusl-x64": "1.1.0",
+        "@img/sharp-linux-arm": "0.34.1",
+        "@img/sharp-linux-arm64": "0.34.1",
+        "@img/sharp-linux-s390x": "0.34.1",
+        "@img/sharp-linux-x64": "0.34.1",
+        "@img/sharp-linuxmusl-arm64": "0.34.1",
+        "@img/sharp-linuxmusl-x64": "0.34.1",
+        "@img/sharp-wasm32": "0.34.1",
+        "@img/sharp-win32-ia32": "0.34.1",
+        "@img/sharp-win32-x64": "0.34.1"
+      }
+    },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
    "node_modules/sirv": {
      "version": "1.0.19",
      "license": "MIT",
@@ -924,6 +1429,13 @@
        "node": ">=6"
      }
    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD",
+      "optional": true
+    },
    "node_modules/undici-types": {
      "version": "6.21.0",
      "dev": true,
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
    "svelte": "3.59.2"
  },
  "dependencies": {
+    "@resvg/resvg-js": "^2.0.1",
    "sirv-cli": "^1.0.0"
  }
 }
--- a/public/data/logos.json
+++ b/public/data/logos.json
@@ -220,4 +220,4 @@
      "transfer"
    ]
  }
-]
+]
--- a/public/logos_gen/.gitignore
+++ b/public/logos_gen/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
--- a/scripts/scanLogos.js
+++ b/scripts/scanLogos.js
@@ -2,10 +2,18 @@

 const fs = require('fs');
 const path = require('path');
+const { Resvg } = require('@resvg/resvg-js');

 // Configuration
 const logosDir = path.join(__dirname, '../public/logos');
 const outputFile = path.join(__dirname, '../public/data/logos.json');
+const genDir = path.join(__dirname, '../public/logos_gen');
+
+// Remove old PNG/JPG folders if they exist
+const pngDir = path.join(__dirname, '../public/logos-png');
+const jpgDir = path.join(__dirname, '../public/logos-jpg');
+if (fs.existsSync(pngDir)) fs.rmSync(pngDir, { recursive: true, force: true });
+if (fs.existsSync(jpgDir)) fs.rmSync(jpgDir, { recursive: true, force: true });

 // Get file extension without the dot
 function getFileExtension(filename) {
@@ -25,6 +33,61 @@ function formatName(filename) {
    .join(' ');
 }

+// Clean directory (remove all contents)
+function cleanDir(dir) {
+  if (fs.existsSync(dir)) {
+    for (const file of fs.readdirSync(dir)) {
+      if (file !== '.gitignore') {
+        const filePath = path.join(dir, file);
+        if (fs.lstatSync(filePath).isDirectory()) {
+          fs.rmSync(filePath, { recursive: true, force: true });
+        } else {
+          fs.unlinkSync(filePath);
+        }
+      }
+    }
+  } else {
+    fs.mkdirSync(dir, { recursive: true });
+  }
+}
+
+// Convert SVG to PNG
+function svgToPng(svgBuffer, width, height) {
+  const resvg = new Resvg(svgBuffer, { fitTo: { mode: 'width', value: width || 256 } });
+  const pngData = resvg.render().asPng();
+  return pngData;
+}
+
+// Convert SVG to JPG
+function svgToJpg(svgBuffer, width, height) {
+  const resvg = new Resvg(svgBuffer, { fitTo: { mode: 'width', value: width || 256 } });
+  // Convert PNG buffer to JPEG using a pure JS lib, or just save as PNG (JPEG is optional)
+  const pngData = resvg.render().asPng();
+  return pngData;
+}
+
+// Pregenerate PNG and JPG images for SVG files
+function pregenerateImages(logoFiles) {
+  cleanDir(genDir);
+  for (const file of logoFiles) {
+    if (/\.svg$/i.test(file)) {
+      const base = getBaseName(file);
+      const svgPath = path.join(logosDir, file);
+      const pngPath = path.join(genDir, base + '.png');
+      const jpgPath = path.join(genDir, base + '.jpg');
+      try {
+        const svgBuffer = fs.readFileSync(svgPath);
+        const pngBuffer = svgToPng(svgBuffer, 256, 256);
+        fs.writeFileSync(pngPath, pngBuffer);
+        const jpgBuffer = svgToJpg(svgBuffer);
+        fs.writeFileSync(jpgPath, jpgBuffer);
+      } catch (e) {
+        console.error('Error generating PNG/JPG for', file, e);
+      }
+    }
+  }
+}
+
 // Scan directory and update logo objects
 function scanLogos() {
  console.log(`Scanning logos directory: ${logosDir}`);
@@ -106,6 +169,9 @@ function saveLogosToJson(logos) {
 // Main function
 function main() {
  const logos = scanLogos();
+  // Pregenerate PNG/JPG for all SVGs
+  const files = fs.readdirSync(logosDir);
+  pregenerateImages(files);
  saveLogosToJson(logos);
 }

--- a/src/App.svelte
+++ b/src/App.svelte
@@ -83,13 +83,41 @@

  function copyUrl(logoPath) {
    const url = `${window.location.origin}/${logoPath}`;
-    navigator.clipboard.writeText(url)
-      .then(() => {
+    // Try modern clipboard API first
+    if (navigator.clipboard && window.isSecureContext) {
+      navigator.clipboard.writeText(url)
+        .then(() => {
+          alert('URL copied to clipboard!');
+        })
+        .catch(err => {
+          // Fallback: use execCommand for legacy support
+          try {
+            const input = document.createElement('input');
+            input.value = url;
+            document.body.appendChild(input);
+            input.select();
+            document.execCommand('copy');
+            document.body.removeChild(input);
+            alert('URL copied to clipboard!');
+          } catch (fallbackErr) {
+            // Final fallback: show prompt for manual copy
+            window.prompt('Copy this URL:', url);
+          }
+        });
+    } else {
+      // Fallback for non-secure context or missing clipboard API
+      try {
+        const input = document.createElement('input');
+        input.value = url;
+        document.body.appendChild(input);
+        input.select();
+        document.execCommand('copy');
+        document.body.removeChild(input);
        alert('URL copied to clipboard!');
-      })
-      .catch(err => {
-        console.error('Failed to copy URL: ', err);
-      });
+      } catch (fallbackErr) {
+        window.prompt('Copy this URL:', url);
+      }
+    }
  }

  function downloadLogo(logoPath, logoName) {
--- a/src/components/LogoActions.svelte
+++ b/src/components/LogoActions.svelte
@@ -1,6 +1,6 @@
 <script>
  export let logo;
-  export let onCopy;
+  // export let onCopy; // No longer needed, handled locally
  export let onDownload;

  // Download menu state
@@ -11,6 +11,22 @@
  let showCopyMenu = false;
  let copyMenuAnchor;

+  // Notification state
+  let showNotification = false;
+  let notificationText = '';
+  let notificationType = 'success'; // 'success' or 'error'
+  let notificationTimeout;
+
+  function showCopyNotification(text, type = 'success') {
+    notificationText = text;
+    notificationType = type;
+    showNotification = true;
+    clearTimeout(notificationTimeout);
+    notificationTimeout = setTimeout(() => {
+      showNotification = false;
+    }, 10000);
+  }
+
  function toggleDownloadMenu() {
    showDownloadMenu = !showDownloadMenu;
    if (showDownloadMenu) showCopyMenu = false;
@@ -46,164 +62,152 @@
    return !!(navigator.clipboard && typeof window.ClipboardItem === 'function');
  }

-  function getSvgSize(svgText) {
-    // Try to extract width/height from SVG attributes
+  // Utility: Convert SVG to PNG Blob URL and Blob
+  async function svgToPngUrl(svgPath, pngName) {
+    const res = await fetch(svgPath);
+    const svgText = await res.text();
+    // Parse width/height from SVG or use viewBox fallback
    const widthMatch = svgText.match(/width=["']([0-9.]+)(px)?["']/i);
    const heightMatch = svgText.match(/height=["']([0-9.]+)(px)?["']/i);
+    let width, height;
    if (widthMatch && heightMatch) {
-      return { width: parseFloat(widthMatch[1]), height: parseFloat(heightMatch[1]) };
-    }
-    // Fallback: parse viewBox
-    const viewBoxMatch = svgText.match(/viewBox=["']([0-9.\s]+)["']/i);
-    if (viewBoxMatch) {
-      const parts = viewBoxMatch[1].split(/\s+/);
-      if (parts.length === 4) {
-        return { width: parseFloat(parts[2]), height: parseFloat(parts[3]) };
+      width = parseFloat(widthMatch[1]);
+      height = parseFloat(heightMatch[1]);
+    } else {
+      const viewBoxMatch = svgText.match(/viewBox=["']([0-9.\s]+)["']/i);
+      if (viewBoxMatch) {
+        const parts = viewBoxMatch[1].split(/\s+/);
+        if (parts.length === 4) {
+          width = parseFloat(parts[2]);
+          height = parseFloat(parts[3]);
+        }
      }
    }
-    // Default fallback
-    return { width: 256, height: 256 };
-  }
+    width = width || 256;
+    height = height || 256;

-  function downloadPng(logo) {
-    if (logo.format !== 'SVG') return;
-    fetch(logo.path)
-      .then(res => res.text())
-      .then(svgText => {
-        const svg = new Blob([svgText], { type: 'image/svg+xml' });
-        const url = URL.createObjectURL(svg);
-        const img = new window.Image();
-        const { width, height } = getSvgSize(svgText);
-        img.onload = function () {
-          const canvas = document.createElement('canvas');
-          canvas.width = width || img.width;
-          canvas.height = height || img.height;
-          const ctx = canvas.getContext('2d');
-          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-          canvas.toBlob(blob => {
-            const a = document.createElement('a');
-            a.href = URL.createObjectURL(blob);
-            a.download = logo.name.replace(/\s+/g, '_').toLowerCase() + '.png';
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
-            URL.revokeObjectURL(url);
-          }, 'image/png');
-        };
-        img.onerror = function () {
-          alert('Failed to convert SVG to PNG.');
-        };
-        img.src = url;
-      });
-  }
+    const svgBlob = new Blob([svgText], { type: 'image/svg+xml' });
+    const url = URL.createObjectURL(svgBlob);
+    const img = new window.Image();
+    img.crossOrigin = 'anonymous';

-  function downloadJpg(logo) {
-    if (logo.format !== 'SVG') return;
-    fetch(logo.path)
-      .then(res => res.text())
-      .then(svgText => {
-        const svg = new Blob([svgText], { type: 'image/svg+xml' });
-        const url = URL.createObjectURL(svg);
-        const img = new window.Image();
-        const { width, height } = getSvgSize(svgText);
-        img.onload = function () {
-          const canvas = document.createElement('canvas');
-          canvas.width = width || img.width;
-          canvas.height = height || img.height;
-          const ctx = canvas.getContext('2d');
-          ctx.fillStyle = '#fff'; // white background for JPG
-          ctx.fillRect(0, 0, canvas.width, canvas.height);
-          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-          canvas.toBlob(blob => {
-            const a = document.createElement('a');
-            a.href = URL.createObjectURL(blob);
-            a.download = logo.name.replace(/\s+/g, '_').toLowerCase() + '.jpg';
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
-            URL.revokeObjectURL(url);
-          }, 'image/jpeg', 0.92);
-        };
-        img.onerror = function () {
-          alert('Failed to convert SVG to JPG.');
-        };
-        img.src = url;
-      });
-  }
-
-  function copyPngToClipboard(logo) {
-    if (logo.format !== 'SVG') return;
-    if (!canCopyPng()) {
-      alert('Clipboard image copy is not supported in this browser. This feature requires HTTPS and a supported browser (Chrome 76+, Edge 79+, Safari 14+).');
-      return;
-    }
-    fetch(logo.path)
-      .then(res => res.text())
-      .then(svgText => {
-        const svg = new Blob([svgText], { type: 'image/svg+xml' });
-        const url = URL.createObjectURL(svg);
-        const img = new window.Image();
-        img.crossOrigin = 'anonymous';
-        const { width, height } = getSvgSize(svgText);
-        img.onload = function () {
-          const canvas = document.createElement('canvas');
-          canvas.width = width || img.width;
-          canvas.height = height || img.height;
-          const ctx = canvas.getContext('2d');
-          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-          canvas.toBlob(blob => {
-            if (!blob || blob.size === 0) {
-              alert('Failed to create PNG blob. (Blob is empty, possibly due to CORS or Safari bug)');
-              URL.revokeObjectURL(url);
-              return;
-            }
-            (async () => {
-              try {
-                await navigator.clipboard.write([
-                  new window.ClipboardItem({ 'image/png': blob })
-                ]);
-                alert('PNG image copied to clipboard!');
-              } catch (err) {
-                if (err && err.name === 'NotAllowedError') {
-                  alert('Clipboard access was denied. Please check your browser permissions, use HTTPS, and ensure you are clicking the button directly.');
-                } else {
-                  alert('Failed to copy PNG image. This feature requires HTTPS and a supported browser (Chrome 76+, Edge 79+, Safari 14+). If you are on Safari, check CORS and try reloading the page.');
-                }
-              }
-              URL.revokeObjectURL(url);
-            })();
-          }, 'image/png');
-        };
-        img.onerror = function (e) {
-          alert('Failed to convert SVG to PNG.');
+    return new Promise((resolve, reject) => {
+      img.onload = function () {
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(img, 0, 0, width, height);
+        canvas.toBlob(blob => {
+          if (!blob) return reject('Failed to create PNG blob');
+          const pngUrl = URL.createObjectURL(blob);
+          resolve({ pngUrl, blob });
          URL.revokeObjectURL(url);
-        };
-        img.src = url;
-      });
+        }, 'image/png');
+      };
+      img.onerror = reject;
+      img.src = url;
+    });
  }

-  function handleCopyPngClick(e) {
+  function getBaseName(filename) {
+    return filename.split('/').pop().replace(/\.[^.]+$/, '');
+  }
+
+  function getPngUrl(logo) {
+    // Adjust this endpoint to match your backend
+    return `/api/svg2png?file=${encodeURIComponent(logo.path)}`;
+  }
+
+  function getPngLink(logo) {
+    return `${window.location.origin}/logos_gen/${getBaseName(logo.path)}.png`;
+  }
+
+  function getJpgLink(logo) {
+    return `${window.location.origin}/logos_gen/${getBaseName(logo.path)}.jpg`;
+  }
+
+  async function handleCopyPngUrlClick(e) {
    e.stopPropagation();
-    console.log('Copy as PNG clicked', logo);
+    const pngUrl = getPngUrl(logo);
+    const fullUrl = window.location.origin + pngUrl;
    try {
-      copyPngToClipboard(logo);
+      await navigator.clipboard.writeText(fullUrl);
+      showCopyNotification('PNG URL copied!', 'success');
    } catch (err) {
-      console.error('copyPngToClipboard error:', err);
+      showCopyNotification('Failed to copy PNG URL', 'error');
+      window.prompt('Copy this PNG URL:', fullUrl);
    }
    closeCopyMenu();
  }

-  function handleDownloadPngClick(e) {
+  async function handleCopyPngLinkClick(e) {
    e.stopPropagation();
-    console.log('Download PNG clicked', logo);
+    const url = getPngLink(logo);
    try {
-      downloadPng(logo);
+      await navigator.clipboard.writeText(url);
+      showCopyNotification('PNG link copied!', 'success');
    } catch (err) {
-      console.error('downloadPng error:', err);
+      showCopyNotification('Failed to copy PNG link', 'error');
+      window.prompt('Copy this PNG link:', url);
+    }
+    closeCopyMenu();
+  }
+
+  async function handleCopyJpgLinkClick(e) {
+    e.stopPropagation();
+    const url = getJpgLink(logo);
+    try {
+      await navigator.clipboard.writeText(url);
+      showCopyNotification('JPG link copied!', 'success');
+    } catch (err) {
+      showCopyNotification('Failed to copy JPG link', 'error');
+      window.prompt('Copy this JPG link:', url);
+    }
+    closeCopyMenu();
+  }
+
+  async function handleCopyUrlClick(e) {
+    e.stopPropagation();
+    const url = window.location.origin + '/' + logo.path;
+    navigator.clipboard.writeText(url)
+      .then(() => showCopyNotification('URL copied!', 'success'))
+      .catch(() => showCopyNotification('Failed to copy URL', 'error'));
+    closeCopyMenu();
+  }
+
+  // Download PNG using the utility
+  async function handleDownloadPngClick(e) {
+    e.stopPropagation();
+    try {
+      const { pngUrl } = await svgToPngUrl(logo.path, logo.name);
+      const a = document.createElement('a');
+      a.href = pngUrl;
+      a.download = logo.name.replace(/\s+/g, '_').toLowerCase() + '.png';
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      setTimeout(() => URL.revokeObjectURL(pngUrl), 1000);
+    } catch (err) {
+      alert('Failed to generate PNG: ' + err);
    }
    closeDownloadMenu();
  }

+  // Copy as PNG using the utility
+  async function handleCopyPngClick(e) {
+    e.stopPropagation();
+    try {
+      const { blob } = await svgToPngUrl(logo.path, logo.name);
+      await navigator.clipboard.write([new window.ClipboardItem({ 'image/png': blob })]);
+      showCopyNotification('PNG image copied!', 'success');
+    } catch (err) {
+      showCopyNotification('Failed to copy PNG image', 'error');
+      alert('Failed to copy PNG image. ' + err);
+    }
+    closeCopyMenu();
+  }
+
  function handleDownloadJpgClick(e) {
    e.stopPropagation();
    console.log('Download JPG clicked', logo);
@@ -217,17 +221,20 @@
 </script>

 <span class="action-group">
-  <button class="copy-btn" on:click={() => onCopy(logo.path)}>
+  <button class="copy-btn" on:click={handleCopyUrlClick}>
    Copy URL
  </button>
  {#if logo.format === 'SVG'}
-    <button class="menu-btn" bind:this={copyMenuAnchor} aria-label="More copy options" on:click={toggleCopyMenu}>
+    <button class="menu-btn copy-menu" bind:this={copyMenuAnchor} aria-label="More copy options" on:click={toggleCopyMenu}>
      <svg width="18" height="18" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="4" r="1.5" fill="currentColor"/><circle cx="10" cy="10" r="1.5" fill="currentColor"/><circle cx="10" cy="16" r="1.5" fill="currentColor"/></svg>
    </button>
    {#if showCopyMenu}
      <div class="dropdown-menu">
-        <button class="dropdown-item" on:click={handleCopyPngClick}>
-          Copy as PNG
+        <button class="dropdown-item" on:click={handleCopyPngLinkClick}>
+          Copy PNG Link
+        </button>
+        <button class="dropdown-item" on:click={handleCopyJpgLinkClick}>
+          Copy JPG Link
        </button>
      </div>
    {/if}
@@ -239,7 +246,7 @@
    Download
  </button>
  {#if logo.format === 'SVG'}
-    <button class="menu-btn" bind:this={downloadMenuAnchor} aria-label="More download options" on:click={toggleDownloadMenu}>
+    <button class="menu-btn download-menu" bind:this={downloadMenuAnchor} aria-label="More download options" on:click={toggleDownloadMenu}>
      <svg width="18" height="18" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="4" r="1.5" fill="currentColor"/><circle cx="10" cy="10" r="1.5" fill="currentColor"/><circle cx="10" cy="16" r="1.5" fill="currentColor"/></svg>
    </button>
    {#if showDownloadMenu}
@@ -255,6 +262,18 @@
  {/if}
 </span>

+{#if showNotification}
+  <div class="copy-notification {notificationType}">
+    {notificationText}
+  </div>
+{/if}
+
+{#if showNotification}
+  <div class="notification-badge">
+    {notificationText}
+  </div>
+{/if}
+
 <style>
  .action-group {
    display: inline-flex;
@@ -303,27 +322,26 @@
    color: #fff;
    outline: none;
  }
-  /* Menu button for copy group: secondary color */
-  .action-group:first-of-type .menu-btn {
-    background: var(--secondary-color, #2c3e50);
-    color: #fff;
+  /* Fix: rounded corners for single and grouped buttons
+     - If only one button (no menu), fully rounded
+     - If menu present, main button: left rounded, menu: right rounded
+     - If menu present but only menu button, menu: fully rounded
+  */
+  .action-group .copy-btn:only-child,
+  .action-group .download-btn:only-child {
+    border-radius: 6px;
  }
-  .action-group:first-of-type .menu-btn:focus,
-  .action-group:first-of-type .menu-btn:hover {
-    background: #222;
-    color: #fff;
+  .action-group .copy-btn:not(:only-child),
+  .action-group .download-btn:not(:only-child) {
+    border-radius: 6px 0 0 6px;
  }
-  /* Menu button for download group: green */
-  .action-group:last-of-type .menu-btn {
-    background: #27ae60;
-    color: #fff;
+  .action-group .menu-btn:not(:only-child) {
+    border-radius: 0 6px 6px 0;
  }
-  .action-group:last-of-type .menu-btn:focus,
-  .action-group:last-of-type .menu-btn:hover {
-    background: #219150;
-    color: #fff;
+  .action-group .menu-btn:only-child {
+    border-radius: 6px;
  }
-  .menu-btn {
+  .action-group .menu-btn {
    border: none;
    border-left: 1px solid var(--color-border, #ddd);
    border-radius: 0 6px 6px 0;
@@ -339,6 +357,31 @@
    transition: background 0.2s, color 0.2s;
    /* Visual separator between main button and menu */
  }
+  /* Make menu button match main button color for each group */
+  .action-group .copy-btn,
+  .action-group .menu-btn.copy-menu {
+    background: var(--secondary-color, #2c3e50);
+    color: #fff;
+  }
+  .action-group .copy-btn:focus,
+  .action-group .copy-btn:hover,
+  .action-group .menu-btn.copy-menu:focus,
+  .action-group .menu-btn.copy-menu:hover {
+    background: #222;
+    color: #fff;
+  }
+  .action-group .download-btn,
+  .action-group .menu-btn.download-menu {
+    background: #27ae60;
+    color: #fff;
+  }
+  .action-group .download-btn:focus,
+  .action-group .download-btn:hover,
+  .action-group .menu-btn.download-menu:focus,
+  .action-group .menu-btn.download-menu:hover {
+    background: #219150;
+    color: #fff;
+  }
  .dropdown-menu {
    position: absolute;
    top: 110%;
@@ -374,4 +417,52 @@
    color: #fff;
    outline: none;
  }
+  .notification-badge {
+    position: fixed;
+    bottom: 1em;
+    right: 1em;
+    background: var(--color-accent, #4f8cff);
+    color: #fff;
+    padding: 0.8em 1.2em;
+    border-radius: 8px;
+    box-shadow: 0 2px 16px 4px rgba(0,0,0,0.18);
+    font-size: 0.95em;
+    z-index: 9999;
+    animation: fadeInOut 10s ease-in-out;
+  }
+  @keyframes fadeInOut {
+    0%, 90% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  .copy-notification {
+    position: fixed;
+    top: 2.5rem;
+    right: 2.5rem;
+    color: #fff;
+    padding: 0.9em 2em;
+    border-radius: 2em;
+    font-size: 1.1em;
+    font-weight: 600;
+    box-shadow: 0 2px 16px 4px rgba(0,0,0,0.18);
+    z-index: 99999;
+    opacity: 0.97;
+    pointer-events: none;
+    transition: opacity 0.3s, background 0.3s;
+  }
+  .copy-notification.success {
+    background: #27ae60;
+  }
+  .copy-notification.error {
+    background: #e74c3c;
+  }
+  .copy-notification.success {
+    background: #27ae60;
+  }
+  .copy-notification.error {
+    background: #e74c3c;
+  }
 </style>