├── docs
    ├── .nojekyll
    └── index.html
├── app
    ├── .node-version
    ├── src
    │   ├── routes
    │   │   ├── +layout.ts
    │   │   ├── +layout.svelte
    │   │   └── +page.svelte
    │   ├── lib
    │   │   ├── index.ts
    │   │   ├── stores
    │   │   │   ├── language.svelte.ts
    │   │   │   ├── theme.svelte.ts
    │   │   │   └── assessment.svelte.ts
    │   │   ├── types
    │   │   │   └── gdpr.ts
    │   │   ├── components
    │   │   │   ├── ui
    │   │   │   │   ├── Card.svelte
    │   │   │   │   ├── Button.svelte
    │   │   │   │   └── Modal.svelte
    │   │   │   ├── assessment
    │   │   │   │   ├── CategoryCard.svelte
    │   │   │   │   ├── ProgressBar.svelte
    │   │   │   │   └── ChecklistItem.svelte
    │   │   │   ├── layout
    │   │   │   │   ├── Header.svelte
    │   │   │   │   └── Footer.svelte
    │   │   │   └── export
    │   │   │   │   └── ExportModal.svelte
    │   │   └── data
    │   │   │   └── gdpr-data.ts
    │   ├── app.d.ts
    │   ├── app.html
    │   └── app.css
    ├── static
    │   ├── robots.txt
    │   └── favicon.svg
    ├── .npmrc
    ├── vercel.json
    ├── vite.config.ts
    ├── .gitignore
    ├── svelte.config.js
    ├── tsconfig.json
    ├── package.json
    └── README.md
├── .gitignore
├── LICENSE
├── .github
    └── workflows
    │   ├── deploy-pages.yml
    │   └── README.md
├── CONTRIBUTING.md
├── README.md
└── webapp
    ├── README.md
    ├── js
        ├── overview.js
        ├── main.js
        ├── assessment.js
        └── export.js
    └── index.html


/docs/.nojekyll:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/app/.node-version:
--------------------------------------------------------------------------------
1 | 22


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .vscode
3 | DPF_UPDATE_SUMMARY.md
4 | 


--------------------------------------------------------------------------------
/app/src/routes/+layout.ts:
--------------------------------------------------------------------------------
1 | export const prerender = true;
2 | export const ssr = false;
3 | 


--------------------------------------------------------------------------------
/app/static/robots.txt:
--------------------------------------------------------------------------------
1 | # allow crawling everything by default
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/app/src/lib/index.ts:
--------------------------------------------------------------------------------
1 | // place files you want to import through the `$lib` alias in this folder.
2 | 


--------------------------------------------------------------------------------
/app/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | onlyBuiltDependencies[]=esbuild
3 | onlyBuiltDependencies[]=core-js
4 | 


--------------------------------------------------------------------------------
/app/src/routes/+layout.svelte:
--------------------------------------------------------------------------------
1 | <script lang="ts">
2 | 	import '../app.css';
3 | 
4 | 	let { children } = $props();
5 | </script>
6 | 
7 | 
8 | {@render children?.()}
9 | 


--------------------------------------------------------------------------------
/app/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 |   "buildCommand": "pnpm run build",
3 |   "devCommand": "pnpm run dev",
4 |   "installCommand": "pnpm install",
5 |   "framework": "sveltekit"
6 | }
7 | 


--------------------------------------------------------------------------------
/app/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { sveltekit } from '@sveltejs/kit/vite';
2 | import { defineConfig } from 'vite';
3 | 
4 | export default defineConfig({
5 | 	plugins: [sveltekit()]
6 | });
7 | 


--------------------------------------------------------------------------------
/app/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | 
 3 | # Output
 4 | .output
 5 | .vercel
 6 | .netlify
 7 | .wrangler
 8 | /.svelte-kit
 9 | /build
10 | 
11 | # OS
12 | .DS_Store
13 | Thumbs.db
14 | 
15 | # Env
16 | .env
17 | .env.*
18 | !.env.example
19 | !.env.test
20 | 
21 | # Vite
22 | vite.config.js.timestamp-*
23 | vite.config.ts.timestamp-*
24 | 


--------------------------------------------------------------------------------
/app/src/app.d.ts:
--------------------------------------------------------------------------------
 1 | // See https://svelte.dev/docs/kit/types#app.d.ts
 2 | // for information about these interfaces
 3 | declare global {
 4 | 	namespace App {
 5 | 		// interface Error {}
 6 | 		// interface Locals {}
 7 | 		// interface PageData {}
 8 | 		// interface PageState {}
 9 | 		// interface Platform {}
10 | 	}
11 | }
12 | 
13 | export {};
14 | 


--------------------------------------------------------------------------------
/app/src/app.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 6 | 		<link rel="shortcut icon" href="favicon.svg" type="image/x-icon">
 7 | 		%sveltekit.head%
 8 | 	</head>
 9 | 	<body data-sveltekit-preload-data="hover">
10 | 		<div style="display: contents">%sveltekit.body%</div>
11 | 	</body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/app/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import adapter from '@sveltejs/adapter-vercel';
 2 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 3 | 
 4 | /** @type {import('@sveltejs/kit').Config} */
 5 | const config = {
 6 | 	// Consult https://svelte.dev/docs/kit/integrations
 7 | 	// for more information about preprocessors
 8 | 	preprocess: vitePreprocess(),
 9 | 
10 | 	kit: {
11 | 		// Vercel adapter for deployment
12 | 		// See https://vercel.com/docs/frameworks/sveltekit
13 | 		adapter: adapter({
14 | 			runtime: 'nodejs22.x'
15 | 		}),
16 | 		alias: {
17 | 			$lib: './src/lib'
18 | 		}
19 | 	}
20 | };
21 | 
22 | export default config;
23 | 


--------------------------------------------------------------------------------
/app/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"extends": "./.svelte-kit/tsconfig.json",
 3 | 	"compilerOptions": {
 4 | 		"allowJs": true,
 5 | 		"checkJs": true,
 6 | 		"esModuleInterop": true,
 7 | 		"forceConsistentCasingInFileNames": true,
 8 | 		"resolveJsonModule": true,
 9 | 		"skipLibCheck": true,
10 | 		"sourceMap": true,
11 | 		"strict": true,
12 | 		"moduleResolution": "bundler"
13 | 	}
14 | 	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
15 | 	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
16 | 	//
17 | 	// To make changes to top-level options such as include and exclude, we recommend extending
18 | 	// the generated config; see https://svelte.dev/docs/kit/configuration#typescript
19 | }
20 | 


--------------------------------------------------------------------------------
/app/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "gdpr-svelte",
 3 | 	"private": true,
 4 | 	"version": "0.0.1",
 5 | 	"type": "module",
 6 | 	"scripts": {
 7 | 		"dev": "vite dev",
 8 | 		"build": "vite build",
 9 | 		"preview": "vite preview",
10 | 		"prepare": "svelte-kit sync || echo ''",
11 | 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
12 | 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
13 | 	},
14 | 	"devDependencies": {
15 | 		"@sveltejs/adapter-vercel": "^6.1.1",
16 | 		"@sveltejs/kit": "^2.43.2",
17 | 		"@sveltejs/vite-plugin-svelte": "^6.2.0",
18 | 		"svelte": "^5.39.5",
19 | 		"svelte-check": "^4.3.2",
20 | 		"typescript": "^5.9.2",
21 | 		"vite": "^7.1.7"
22 | 	},
23 | 	"dependencies": {
24 | 		"@fontsource/inter": "^5.2.8",
25 | 		"jspdf": "^3.0.3"
26 | 	}
27 | }
28 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Mirko Schubert
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/app/src/lib/stores/language.svelte.ts:
--------------------------------------------------------------------------------
 1 | import type { Language } from '$lib/types/gdpr';
 2 | 
 3 | class LanguageState {
 4 | 	current = $state<Language>('en');
 5 | 
 6 | 	constructor() {
 7 | 		if (typeof window !== 'undefined') {
 8 | 			this.loadFromStorage();
 9 | 		}
10 | 	}
11 | 
12 | 	toggle() {
13 | 		this.current = this.current === 'en' ? 'de' : 'en';
14 | 		this.saveToStorage();
15 | 	}
16 | 
17 | 	setLanguage(lang: Language) {
18 | 		this.current = lang;
19 | 		this.saveToStorage();
20 | 	}
21 | 
22 | 	private saveToStorage() {
23 | 		if (typeof localStorage === 'undefined') return;
24 | 		localStorage.setItem('gdpr_language', this.current);
25 | 	}
26 | 
27 | 	private loadFromStorage() {
28 | 		if (typeof localStorage === 'undefined') return;
29 | 
30 | 		const savedLang = localStorage.getItem('gdpr_language');
31 | 		if (savedLang === 'en' || savedLang === 'de') {
32 | 			this.current = savedLang;
33 | 		} else {
34 | 			// Detect browser language
35 | 			const browserLang = navigator.language.toLowerCase();
36 | 			if (browserLang.startsWith('de')) {
37 | 				this.current = 'de';
38 | 			}
39 | 		}
40 | 	}
41 | }
42 | 
43 | export const language = new LanguageState();
44 | 


--------------------------------------------------------------------------------
/app/src/lib/stores/theme.svelte.ts:
--------------------------------------------------------------------------------
 1 | export type Theme = 'light' | 'dark';
 2 | 
 3 | class ThemeState {
 4 | 	current = $state<Theme>('light');
 5 | 
 6 | 	constructor() {
 7 | 		if (typeof window !== 'undefined') {
 8 | 			this.loadFromStorage();
 9 | 			this.applyTheme();
10 | 		}
11 | 	}
12 | 
13 | 	toggle() {
14 | 		this.current = this.current === 'light' ? 'dark' : 'light';
15 | 		this.applyTheme();
16 | 		this.saveToStorage();
17 | 	}
18 | 
19 | 	setTheme(theme: Theme) {
20 | 		this.current = theme;
21 | 		this.applyTheme();
22 | 		this.saveToStorage();
23 | 	}
24 | 
25 | 	private applyTheme() {
26 | 		if (typeof document === 'undefined') return;
27 | 		document.documentElement.setAttribute('data-theme', this.current);
28 | 	}
29 | 
30 | 	private saveToStorage() {
31 | 		if (typeof localStorage === 'undefined') return;
32 | 		localStorage.setItem('gdpr_theme', this.current);
33 | 	}
34 | 
35 | 	private loadFromStorage() {
36 | 		if (typeof localStorage === 'undefined') return;
37 | 
38 | 		const savedTheme = localStorage.getItem('gdpr_theme');
39 | 		if (savedTheme === 'light' || savedTheme === 'dark') {
40 | 			this.current = savedTheme;
41 | 		} else {
42 | 			// Check system preference
43 | 			if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
44 | 				this.current = 'dark';
45 | 			}
46 | 		}
47 | 	}
48 | }
49 | 
50 | export const theme = new ThemeState();
51 | 


--------------------------------------------------------------------------------
/.github/workflows/deploy-pages.yml:
--------------------------------------------------------------------------------
 1 | name: Deploy to GitHub Pages
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [ master ]
 6 |   workflow_dispatch:
 7 | 
 8 | permissions:
 9 |   contents: read
10 |   pages: write
11 |   id-token: write
12 | 
13 | concurrency:
14 |   group: "pages"
15 |   cancel-in-progress: false
16 | 
17 | jobs:
18 |   build:
19 |     runs-on: ubuntu-latest
20 |     steps:
21 |       - name: Checkout repository
22 |         uses: actions/checkout@v4
23 | 
24 |       - name: Setup Pages
25 |         uses: actions/configure-pages@v4
26 | 
27 |       - name: Build site structure
28 |         run: |
29 |           # Create deployment directory
30 |           mkdir -p _site
31 |           
32 |           # Copy docs content (main site)
33 |           cp -r docs/* _site/
34 |           
35 |           # Copy webapp into the site
36 |           cp -r webapp _site/webapp
37 |           
38 |           # List structure for verification
39 |           echo "Site structure:"
40 |           ls -la _site/
41 |           echo "Webapp structure:"
42 |           ls -la _site/webapp/
43 | 
44 |       - name: Upload artifact
45 |         uses: actions/upload-pages-artifact@v3
46 |         with:
47 |           path: ./_site
48 | 
49 |   deploy:
50 |     environment:
51 |       name: github-pages
52 |       url: ${{ steps.deployment.outputs.page_url }}
53 |     runs-on: ubuntu-latest
54 |     needs: build
55 |     steps:
56 |       - name: Deploy to GitHub Pages
57 |         id: deployment
58 |         uses: actions/deploy-pages@v4
59 | 


--------------------------------------------------------------------------------
/app/static/favicon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>


--------------------------------------------------------------------------------
/app/src/lib/types/gdpr.ts:
--------------------------------------------------------------------------------
 1 | export interface ChecklistItem {
 2 | 	id: string;
 3 | 	title: string;
 4 | 	description: string;
 5 | 	required: boolean;
 6 | 	weight: number;
 7 | 	legalBasis: string[];
 8 | 	implementation: string[];
 9 | 	explanation?: string[];
10 | 	legitimationReason?: string[];
11 | }
12 | 
13 | export interface Category {
14 | 	id: string;
15 | 	title: string;
16 | 	icon: string;
17 | 	description: string;
18 | 	items: ChecklistItem[];
19 | }
20 | 
21 | export interface GDPRData {
22 | 	version?: string;
23 | 	lastUpdated?: string;
24 | 	title?: string;
25 | 	subtitle?: string;
26 | 	categories: Category[];
27 | }
28 | 
29 | export interface AssessmentResponse {
30 | 	[itemId: string]: boolean;
31 | }
32 | 
33 | export interface ScoringConfig {
34 | 	weights: {
35 | 		required: number;
36 | 		optional: number;
37 | 	};
38 | 	thresholds: {
39 | 		excellent: number;
40 | 		good: number;
41 | 		moderate: number;
42 | 		poor: number;
43 | 	};
44 | 	labels: {
45 | 		[lang: string]: {
46 | 			[level: string]: string;
47 | 		};
48 | 	};
49 | 	descriptions: {
50 | 		[lang: string]: {
51 | 			[level: string]: string;
52 | 		};
53 | 	};
54 | }
55 | 
56 | export interface AssessmentExport {
57 | 	version: string;
58 | 	timestamp: string;
59 | 	language: Language;
60 | 	responses: AssessmentResponse;
61 | 	ignoredItems: string[];
62 | 	scores: {
63 | 		completed: number;
64 | 		total: number;
65 | 		currentScore: number;
66 | 		maxScore: number;
67 | 		percentage: number;
68 | 	};
69 | }
70 | 
71 | export type Language = 'en' | 'de';
72 | export type Theme = 'light' | 'dark';
73 | export type NavigationSection = 'assessment' | 'overview' | 'export';
74 | export type ComplianceLevel = 'excellent' | 'good' | 'moderate' | 'poor' | 'critical';
75 | 


--------------------------------------------------------------------------------
/app/src/lib/components/ui/Card.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { Snippet } from 'svelte';
 3 | 
 4 | 	interface Props {
 5 | 		title?: string;
 6 | 		padding?: 'none' | 'sm' | 'md' | 'lg';
 7 | 		interactive?: boolean;
 8 | 		onclick?: () => void;
 9 | 		class?: string;
10 | 		children: Snippet;
11 | 	}
12 | 
13 | 	let {
14 | 		title,
15 | 		padding = 'md',
16 | 		interactive = false,
17 | 		onclick,
18 | 		class: className = '',
19 | 		children
20 | 	}: Props = $props();
21 | </script>
22 | 
23 | <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
24 | <div
25 | 	class="card padding-{padding} {interactive ? 'interactive' : ''} {className}"
26 | 	onclick={interactive ? onclick : undefined}
27 | 	onkeydown={interactive
28 | 		? (e) => {
29 | 				if (e.key === 'Enter' || e.key === ' ') {
30 | 					e.preventDefault();
31 | 					onclick?.();
32 | 				}
33 | 			}
34 | 		: undefined}
35 | 	role={interactive ? 'button' : undefined}
36 | 	tabindex={interactive ? 0 : undefined}
37 | >
38 | 	{#if title}
39 | 		<h3 class="card-title">{title}</h3>
40 | 	{/if}
41 | 	{@render children()}
42 | </div>
43 | 
44 | <style>
45 | 	.card {
46 | 		background: var(--color-card-bg);
47 | 		border-radius: 1rem;
48 | 		border: 1px solid var(--color-border);
49 | 		box-shadow: var(--shadow-sm);
50 | 		transition: all 0.2s ease;
51 | 	}
52 | 
53 | 	.card-title {
54 | 		margin: 0 0 1rem 0;
55 | 		font-size: 1.25rem;
56 | 		font-weight: 600;
57 | 		color: var(--color-text);
58 | 	}
59 | 
60 | 	.interactive {
61 | 		cursor: pointer;
62 | 	}
63 | 
64 | 	.interactive:hover {
65 | 		transform: translateY(-2px);
66 | 		box-shadow: var(--shadow-md);
67 | 		border-color: var(--color-primary);
68 | 	}
69 | 
70 | 	.interactive:active {
71 | 		transform: translateY(0);
72 | 	}
73 | 
74 | 	/* Padding variants */
75 | 	.padding-none {
76 | 		padding: 0;
77 | 	}
78 | 
79 | 	.padding-sm {
80 | 		padding: 1rem;
81 | 	}
82 | 
83 | 	.padding-md {
84 | 		padding: 1.5rem;
85 | 	}
86 | 
87 | 	.padding-lg {
88 | 		padding: 2rem;
89 | 	}
90 | </style>
91 | 


--------------------------------------------------------------------------------
/app/src/lib/data/gdpr-data.ts:
--------------------------------------------------------------------------------
 1 | import type { GDPRData, ScoringConfig } from '$lib/types/gdpr';
 2 | import enData from './en.json';
 3 | import deData from './de.json';
 4 | 
 5 | export const gdprData: Record<'en' | 'de', GDPRData> = {
 6 | 	en: enData as GDPRData,
 7 | 	de: deData as GDPRData
 8 | };
 9 | 
10 | export const scoringConfig: ScoringConfig = {
11 | 	weights: {
12 | 		required: 1.0,
13 | 		optional: 0.5
14 | 	},
15 | 	thresholds: {
16 | 		excellent: 90,
17 | 		good: 75,
18 | 		moderate: 60,
19 | 		poor: 40
20 | 	},
21 | 	labels: {
22 | 		en: {
23 | 			excellent: 'Excellent Compliance',
24 | 			good: 'Good Compliance',
25 | 			moderate: 'Moderate Compliance',
26 | 			poor: 'Poor Compliance',
27 | 			critical: 'Critical Issues'
28 | 		},
29 | 		de: {
30 | 			excellent: 'Ausgezeichnete Konformität',
31 | 			good: 'Gute Konformität',
32 | 			moderate: 'Moderate Konformität',
33 | 			poor: 'Schlechte Konformität',
34 | 			critical: 'Kritische Probleme'
35 | 		}
36 | 	},
37 | 	descriptions: {
38 | 		en: {
39 | 			excellent: 'Your website demonstrates excellent GDPR compliance across all categories.',
40 | 			good: 'Your website shows good GDPR compliance with minor areas for improvement.',
41 | 			moderate: 'Your website has moderate compliance but requires attention in several areas.',
42 | 			poor: 'Your website has significant compliance gaps that need immediate attention.',
43 | 			critical: 'Your website has critical compliance issues requiring urgent action.'
44 | 		},
45 | 		de: {
46 | 			excellent: 'Ihre Website zeigt ausgezeichnete DSGVO-Konformität in allen Bereichen.',
47 | 			good: 'Ihre Website zeigt gute DSGVO-Konformität mit geringfügigen Verbesserungsmöglichkeiten.',
48 | 			moderate:
49 | 				'Ihre Website hat moderate Konformität, benötigt aber Aufmerksamkeit in mehreren Bereichen.',
50 | 			poor: 'Ihre Website hat erhebliche Konformitätslücken, die sofortige Aufmerksamkeit erfordern.',
51 | 			critical: 'Ihre Website hat kritische Konformitätsprobleme, die dringendes Handeln erfordern.'
52 | 		}
53 | 	}
54 | };
55 | 


--------------------------------------------------------------------------------
/app/src/lib/components/ui/Button.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	import type { Snippet } from 'svelte';
  3 | 
  4 | 	interface Props {
  5 | 		variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
  6 | 		size?: 'sm' | 'md' | 'lg';
  7 | 		disabled?: boolean;
  8 | 		onclick?: () => void;
  9 | 		type?: 'button' | 'submit' | 'reset';
 10 | 		class?: string;
 11 | 		children: Snippet;
 12 | 	}
 13 | 
 14 | 	let {
 15 | 		variant = 'primary',
 16 | 		size = 'md',
 17 | 		disabled = false,
 18 | 		onclick,
 19 | 		type = 'button',
 20 | 		class: className = '',
 21 | 		children
 22 | 	}: Props = $props();
 23 | </script>
 24 | 
 25 | <button
 26 | 	{type}
 27 | 	{disabled}
 28 | 	onclick={onclick}
 29 | 	class="btn btn-{variant} btn-{size} {className}"
 30 | >
 31 | 	{@render children()}
 32 | </button>
 33 | 
 34 | <style>
 35 | 	.btn {
 36 | 		display: inline-flex;
 37 | 		align-items: center;
 38 | 		justify-content: center;
 39 | 		gap: 0.5rem;
 40 | 		border: none;
 41 | 		border-radius: 0.5rem;
 42 | 		font-weight: 500;
 43 | 		cursor: pointer;
 44 | 		transition: all 0.2s ease;
 45 | 		font-family: inherit;
 46 | 	}
 47 | 
 48 | 	.btn:disabled {
 49 | 		opacity: 0.5;
 50 | 		cursor: not-allowed;
 51 | 	}
 52 | 
 53 | 	/* Sizes */
 54 | 	.btn-sm {
 55 | 		padding: 0.5rem 1rem;
 56 | 		font-size: 0.875rem;
 57 | 	}
 58 | 
 59 | 	.btn-md {
 60 | 		padding: 0.75rem 1.5rem;
 61 | 		font-size: 1rem;
 62 | 	}
 63 | 
 64 | 	.btn-lg {
 65 | 		padding: 1rem 2rem;
 66 | 		font-size: 1.125rem;
 67 | 	}
 68 | 
 69 | 	/* Variants */
 70 | 	.btn-primary {
 71 | 		background: var(--color-primary);
 72 | 		color: white;
 73 | 	}
 74 | 
 75 | 	.btn-primary:hover:not(:disabled) {
 76 | 		background: var(--color-primary-dark);
 77 | 		transform: translateY(-1px);
 78 | 		box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
 79 | 	}
 80 | 
 81 | 	.btn-secondary {
 82 | 		background: var(--color-bg-secondary);
 83 | 		color: var(--color-text);
 84 | 		border: 1px solid var(--color-border);
 85 | 	}
 86 | 
 87 | 	.btn-secondary:hover:not(:disabled) {
 88 | 		background: var(--color-bg-tertiary);
 89 | 		transform: translateY(-1px);
 90 | 	}
 91 | 
 92 | 	.btn-danger {
 93 | 		background: var(--color-danger);
 94 | 		color: white;
 95 | 	}
 96 | 
 97 | 	.btn-danger:hover:not(:disabled) {
 98 | 		background: var(--color-danger-dark);
 99 | 		transform: translateY(-1px);
100 | 		box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
101 | 	}
102 | 
103 | 	.btn-ghost {
104 | 		background: transparent;
105 | 		color: var(--color-text);
106 | 	}
107 | 
108 | 	.btn-ghost:hover:not(:disabled) {
109 | 		background: var(--color-bg-secondary);
110 | 	}
111 | </style>
112 | 


--------------------------------------------------------------------------------
/app/src/lib/components/assessment/CategoryCard.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	import type { Category } from '$lib/types/gdpr';
  3 | 	import { assessment } from '$lib/stores/assessment.svelte';
  4 | 	import Card from '$lib/components/ui/Card.svelte';
  5 | 	import ChecklistItem from './ChecklistItem.svelte';
  6 | 
  7 | 	interface Props {
  8 | 		category: Category;
  9 | 		defaultExpanded?: boolean;
 10 | 	}
 11 | 
 12 | 	let { category, defaultExpanded = false }: Props = $props();
 13 | 
 14 | 	let isExpanded = $state(defaultExpanded);
 15 | 
 16 | 	let completedCount = $derived(
 17 | 		category.items.filter((item) => assessment.responses[item.id]).length
 18 | 	);
 19 | 	let totalCount = $derived(category.items.length);
 20 | 	let percentage = $derived(totalCount > 0 ? (completedCount / totalCount) * 100 : 0);
 21 | 
 22 | 	function toggleExpanded() {
 23 | 		isExpanded = !isExpanded;
 24 | 	}
 25 | </script>
 26 | 
 27 | <Card padding="md">
 28 | 	<button class="category-header" onclick={toggleExpanded}>
 29 | 		<div class="category-info">
 30 | 			<h3 class="category-title">
 31 | 				{category.title}
 32 | 				<span class="category-count">({completedCount}/{totalCount})</span>
 33 | 			</h3>
 34 | 			<p class="category-description">{category.description}</p>
 35 | 		</div>
 36 | 		<div class="expand-icon" class:expanded={isExpanded}>
 37 | 			<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
 38 | 				<path
 39 | 					d="M6 9l6 6 6-6"
 40 | 					stroke="currentColor"
 41 | 					stroke-width="2"
 42 | 					stroke-linecap="round"
 43 | 					stroke-linejoin="round"
 44 | 				/>
 45 | 			</svg>
 46 | 		</div>
 47 | 	</button>
 48 | 
 49 | 	<div class="progress-bar">
 50 | 		<div class="progress-fill" style="width: {percentage}%"></div>
 51 | 	</div>
 52 | 
 53 | 	{#if isExpanded}
 54 | 		<div class="category-items">
 55 | 			{#each category.items as item (item.id)}
 56 | 				<ChecklistItem {item} />
 57 | 			{/each}
 58 | 		</div>
 59 | 	{/if}
 60 | </Card>
 61 | 
 62 | <style>
 63 | 	.category-header {
 64 | 		width: 100%;
 65 | 		background: none;
 66 | 		border: none;
 67 | 		padding: 0;
 68 | 		cursor: pointer;
 69 | 		text-align: left;
 70 | 		display: flex;
 71 | 		align-items: flex-start;
 72 | 		gap: 1rem;
 73 | 		margin-bottom: 1rem;
 74 | 	}
 75 | 
 76 | 	.category-info {
 77 | 		flex: 1;
 78 | 	}
 79 | 
 80 | 	.category-title {
 81 | 		margin: 0;
 82 | 		font-size: 1.5rem;
 83 | 		font-weight: 700;
 84 | 		color: var(--color-text);
 85 | 		display: flex;
 86 | 		align-items: center;
 87 | 		gap: 0.5rem;
 88 | 	}
 89 | 
 90 | 	.category-count {
 91 | 		font-size: 1rem;
 92 | 		color: var(--color-text-secondary);
 93 | 		font-weight: 400;
 94 | 	}
 95 | 
 96 | 	.category-description {
 97 | 		margin: 0.5rem 0 0 0;
 98 | 		font-size: 0.875rem;
 99 | 		color: var(--color-text-secondary);
100 | 		line-height: 1.5;
101 | 	}
102 | 
103 | 	.expand-icon {
104 | 		flex-shrink: 0;
105 | 		color: var(--color-text-secondary);
106 | 		transition: transform 0.2s ease;
107 | 	}
108 | 
109 | 	.expand-icon.expanded {
110 | 		transform: rotate(180deg);
111 | 	}
112 | 
113 | 	.progress-bar {
114 | 		width: 100%;
115 | 		height: 0.5rem;
116 | 		background: var(--color-bg-secondary);
117 | 		border-radius: 0.25rem;
118 | 		overflow: hidden;
119 | 		margin-bottom: 1rem;
120 | 	}
121 | 
122 | 	.progress-fill {
123 | 		height: 100%;
124 | 		background: linear-gradient(90deg, var(--color-primary), var(--color-success));
125 | 		transition: width 0.3s ease;
126 | 	}
127 | 
128 | 	.category-items {
129 | 		display: flex;
130 | 		flex-direction: column;
131 | 		gap: 0.75rem;
132 | 		margin-top: 1rem;
133 | 	}
134 | </style>
135 | 


--------------------------------------------------------------------------------
/.github/workflows/README.md:
--------------------------------------------------------------------------------
  1 | # GitHub Pages Deployment Workflow
  2 | 
  3 | This GitHub Actions workflow automatically deploys the GDPR Compliance Checker to GitHub Pages.
  4 | 
  5 | ## What it does
  6 | 
  7 | 1. **Triggers on:**
  8 |    - Push to `master` branch
  9 |    - Manual workflow dispatch (can be run manually from GitHub Actions tab)
 10 | 
 11 | 2. **Build Process:**
 12 |    - Creates a `_site` directory for deployment
 13 |    - Copies all content from `docs/` (main documentation site)
 14 |    - Copies `webapp/` folder into `_site/webapp/` (interactive tool)
 15 |    - Uploads the combined structure as a Pages artifact
 16 | 
 17 | 3. **Deploy Process:**
 18 |    - Deploys the artifact to GitHub Pages
 19 |    - Makes the site available at: `https://pankajydv07.github.io/datenschutz-checkliste/`
 20 | 
 21 | ## Site Structure After Deployment
 22 | 
 23 | ```
 24 | https://pankajydv07.github.io/datenschutz-checkliste/
 25 | ├── index.html                    (main docs site)
 26 | ├── webapp/
 27 | │   ├── index.html               (interactive tool)
 28 | │   ├── js/
 29 | │   ├── styles/
 30 | │   └── ...
 31 | └── ...
 32 | ```
 33 | 
 34 | ## How to Use
 35 | 
 36 | ### Automatic Deployment
 37 | Simply push your changes to the `master` branch:
 38 | ```bash
 39 | git add .
 40 | git commit -m "Your commit message"
 41 | git push origin master
 42 | ```
 43 | 
 44 | The workflow will automatically run and deploy your changes within 2-3 minutes.
 45 | 
 46 | ### Manual Deployment
 47 | 1. Go to the repository on GitHub
 48 | 2. Click "Actions" tab
 49 | 3. Select "Deploy to GitHub Pages" workflow
 50 | 4. Click "Run workflow" button
 51 | 5. Select the `master` branch
 52 | 6. Click "Run workflow"
 53 | 
 54 | ## Permissions Required
 55 | 
 56 | The workflow uses the following permissions:
 57 | - `contents: read` - To read repository content
 58 | - `pages: write` - To deploy to GitHub Pages
 59 | - `id-token: write` - For authentication
 60 | 
 61 | ## Troubleshooting
 62 | 
 63 | ### Workflow fails with "permission denied"
 64 | 1. Go to Settings → Actions → General
 65 | 2. Under "Workflow permissions", ensure:
 66 |    - "Read and write permissions" is selected
 67 |    - "Allow GitHub Actions to create and approve pull requests" is checked
 68 | 
 69 | ### 404 Error on webapp
 70 | 1. Check the workflow run logs
 71 | 2. Verify that `webapp/` folder exists in the repository
 72 | 3. Ensure the link in `docs/index.html` points to `webapp/index.html` (not `../webapp/index.html`)
 73 | 
 74 | ### Changes not reflecting on site
 75 | 1. Wait 2-3 minutes after workflow completes
 76 | 2. Hard refresh your browser (Ctrl+Shift+R or Cmd+Shift+R)
 77 | 3. Clear browser cache if needed
 78 | 
 79 | ## Monitoring
 80 | 
 81 | Check deployment status:
 82 | - **Actions tab:** See real-time workflow execution
 83 | - **Environments:** View deployment history under repository Settings → Environments → github-pages
 84 | - **Pages settings:** Settings → Pages shows the current deployment status
 85 | 
 86 | ## Local Testing
 87 | 
 88 | To test the site structure locally before deploying:
 89 | ```bash
 90 | # Create the same structure
 91 | mkdir -p _site
 92 | cp -r docs/* _site/
 93 | cp -r webapp _site/webapp
 94 | 
 95 | # Serve locally (requires Python)
 96 | cd _site
 97 | python -m http.server 8080
 98 | 
 99 | # Open http://localhost:8080 in your browser
100 | ```
101 | 
102 | ## Notes
103 | 
104 | - The workflow preserves both the documentation site and interactive tool
105 | - No manual file copying required - everything is automated
106 | - Changes to either `docs/` or `webapp/` trigger a full rebuild
107 | - Old deployments are automatically replaced
108 | 


--------------------------------------------------------------------------------
/app/src/lib/components/ui/Modal.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	import type { Snippet } from 'svelte';
  3 | 	import Button from './Button.svelte';
  4 | 
  5 | 	interface Props {
  6 | 		isOpen: boolean;
  7 | 		onClose: () => void;
  8 | 		title: string;
  9 | 		size?: 'sm' | 'md' | 'lg';
 10 | 		children: Snippet;
 11 | 	}
 12 | 
 13 | 	let { isOpen = $bindable(), onClose, title, size = 'md', children }: Props = $props();
 14 | 
 15 | 	function handleBackdropClick(e: MouseEvent) {
 16 | 		if (e.target === e.currentTarget) {
 17 | 			onClose();
 18 | 		}
 19 | 	}
 20 | 
 21 | 	function handleKeydown(e: KeyboardEvent) {
 22 | 		if (e.key === 'Escape') {
 23 | 			onClose();
 24 | 		}
 25 | 	}
 26 | </script>
 27 | 
 28 | {#if isOpen}
 29 | 	<div
 30 | 		class="modal-backdrop"
 31 | 		onclick={handleBackdropClick}
 32 | 		onkeydown={handleKeydown}
 33 | 		role="dialog"
 34 | 		aria-modal="true"
 35 | 		aria-labelledby="modal-title"
 36 | 		tabindex="-1"
 37 | 	>
 38 | 		<div class="modal-content modal-{size}">
 39 | 			<div class="modal-header">
 40 | 				<h2 id="modal-title" class="modal-title">{title}</h2>
 41 | 				<button class="modal-close" onclick={onClose} aria-label="Close modal">
 42 | 					<svg
 43 | 						width="24"
 44 | 						height="24"
 45 | 						viewBox="0 0 24 24"
 46 | 						fill="none"
 47 | 						stroke="currentColor"
 48 | 						stroke-width="2"
 49 | 					>
 50 | 						<path d="M18 6L6 18M6 6l12 12" />
 51 | 					</svg>
 52 | 				</button>
 53 | 			</div>
 54 | 			<div class="modal-body">
 55 | 				{@render children()}
 56 | 			</div>
 57 | 		</div>
 58 | 	</div>
 59 | {/if}
 60 | 
 61 | <style>
 62 | 	.modal-backdrop {
 63 | 		position: fixed;
 64 | 		top: 0;
 65 | 		left: 0;
 66 | 		right: 0;
 67 | 		bottom: 0;
 68 | 		background: rgba(0, 0, 0, 0.6);
 69 | 		display: flex;
 70 | 		align-items: center;
 71 | 		justify-content: center;
 72 | 		padding: 1rem;
 73 | 		z-index: 1000;
 74 | 		backdrop-filter: blur(4px);
 75 | 		animation: fadeIn 0.2s ease;
 76 | 	}
 77 | 
 78 | 	@keyframes fadeIn {
 79 | 		from {
 80 | 			opacity: 0;
 81 | 		}
 82 | 		to {
 83 | 			opacity: 1;
 84 | 		}
 85 | 	}
 86 | 
 87 | 	.modal-content {
 88 | 		background: var(--color-card-bg);
 89 | 		border-radius: 1rem;
 90 | 		box-shadow: var(--shadow-lg);
 91 | 		max-height: 90vh;
 92 | 		display: flex;
 93 | 		flex-direction: column;
 94 | 		animation: slideUp 0.3s ease;
 95 | 	}
 96 | 
 97 | 	@keyframes slideUp {
 98 | 		from {
 99 | 			transform: translateY(20px);
100 | 			opacity: 0;
101 | 		}
102 | 		to {
103 | 			transform: translateY(0);
104 | 			opacity: 1;
105 | 		}
106 | 	}
107 | 
108 | 	.modal-sm {
109 | 		width: 100%;
110 | 		max-width: 400px;
111 | 	}
112 | 
113 | 	.modal-md {
114 | 		width: 100%;
115 | 		max-width: 600px;
116 | 	}
117 | 
118 | 	.modal-lg {
119 | 		width: 100%;
120 | 		max-width: 900px;
121 | 	}
122 | 
123 | 	.modal-header {
124 | 		display: flex;
125 | 		align-items: center;
126 | 		justify-content: space-between;
127 | 		padding: 1.5rem;
128 | 		border-bottom: 1px solid var(--color-border);
129 | 	}
130 | 
131 | 	.modal-title {
132 | 		margin: 0;
133 | 		font-size: 1.5rem;
134 | 		font-weight: 600;
135 | 		color: var(--color-text);
136 | 	}
137 | 
138 | 	.modal-close {
139 | 		background: none;
140 | 		border: none;
141 | 		color: var(--color-text-secondary);
142 | 		cursor: pointer;
143 | 		padding: 0.5rem;
144 | 		border-radius: 0.5rem;
145 | 		display: flex;
146 | 		align-items: center;
147 | 		justify-content: center;
148 | 		transition: all 0.2s ease;
149 | 	}
150 | 
151 | 	.modal-close:hover {
152 | 		background: var(--color-bg-secondary);
153 | 		color: var(--color-text);
154 | 	}
155 | 
156 | 	.modal-body {
157 | 		padding: 1.5rem;
158 | 		overflow-y: auto;
159 | 	}
160 | </style>
161 | 


--------------------------------------------------------------------------------
/app/src/lib/components/layout/Header.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	import { theme } from '$lib/stores/theme.svelte';
  3 | 	import { assessment } from '$lib/stores/assessment.svelte';
  4 | 	import Button from '$lib/components/ui/Button.svelte';
  5 | 
  6 | 	function toggleTheme() {
  7 | 		theme.toggle();
  8 | 	}
  9 | 
 10 | 	function toggleLanguage() {
 11 | 		const newLang = assessment.currentLang === 'en' ? 'de' : 'en';
 12 | 		assessment.setLanguage(newLang);
 13 | 	}
 14 | </script>
 15 | 
 16 | <header class="header">
 17 | 	<div class="container">
 18 | 		<div class="header-content">
 19 | 			<div class="logo">
 20 | 				<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
 21 | 					<rect width="32" height="32" rx="8" fill="var(--color-primary)" />
 22 | 					<path
 23 | 						d="M16 8v16M10 14h12"
 24 | 						stroke="white"
 25 | 						stroke-width="2.5"
 26 | 						stroke-linecap="round"
 27 | 					/>
 28 | 				</svg>
 29 | 				<div class="logo-text">
 30 | 					<h1>GDPR Compliance</h1>
 31 | 					<p>Data Privacy Checker</p>
 32 | 				</div>
 33 | 			</div>
 34 | 
 35 | 			<nav class="nav">
 36 | 				<Button variant="ghost" size="sm" onclick={toggleLanguage}>
 37 | 					<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
 38 | 						<path
 39 | 							d="M10 18a8 8 0 100-16 8 8 0 000 16z"
 40 | 							stroke="currentColor"
 41 | 							stroke-width="1.5"
 42 | 						/>
 43 | 						<path
 44 | 							d="M2 10h16M10 2a15.3 15.3 0 014 8 15.3 15.3 0 01-4 8 15.3 15.3 0 01-4-8 15.3 15.3 0 014-8z"
 45 | 							stroke="currentColor"
 46 | 							stroke-width="1.5"
 47 | 						/>
 48 | 					</svg>
 49 | 					{assessment.currentLang.toUpperCase()}
 50 | 				</Button>
 51 | 
 52 | 				<Button variant="ghost" size="sm" onclick={toggleTheme}>
 53 | 					{#if theme.current === 'light'}
 54 | 						<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
 55 | 							<path
 56 | 								d="M17 10a7 7 0 11-14 0 7 7 0 0114 0z"
 57 | 								stroke="currentColor"
 58 | 								stroke-width="1.5"
 59 | 							/>
 60 | 							<path
 61 | 								d="M10 1v2m0 14v2M1 10h2m14 0h2m-3.343-6.657L14.25 4.75m-8.5 10.5l-1.407 1.407m10.814 0l-1.407-1.407M5.75 4.75L4.343 3.343"
 62 | 								stroke="currentColor"
 63 | 								stroke-width="1.5"
 64 | 								stroke-linecap="round"
 65 | 							/>
 66 | 						</svg>
 67 | 					{:else}
 68 | 						<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
 69 | 							<path
 70 | 								d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
 71 | 								stroke="currentColor"
 72 | 								stroke-width="1.5"
 73 | 							/>
 74 | 						</svg>
 75 | 					{/if}
 76 | 				</Button>
 77 | 			</nav>
 78 | 		</div>
 79 | 	</div>
 80 | </header>
 81 | 
 82 | <style>
 83 | 	.header {
 84 | 		background: var(--color-card-bg);
 85 | 		border-bottom: 1px solid var(--color-border);
 86 | 		position: sticky;
 87 | 		top: 0;
 88 | 		z-index: 100;
 89 | 		backdrop-filter: blur(10px);
 90 | 		background: var(--color-bg-translucent);
 91 | 	}
 92 | 
 93 | 	.container {
 94 | 		max-width: 1200px;
 95 | 		margin: 0 auto;
 96 | 		padding: 0 1rem;
 97 | 	}
 98 | 
 99 | 	.header-content {
100 | 		display: flex;
101 | 		align-items: center;
102 | 		justify-content: space-between;
103 | 		padding: 1rem 0;
104 | 		gap: 1rem;
105 | 	}
106 | 
107 | 	.logo {
108 | 		display: flex;
109 | 		align-items: center;
110 | 		gap: 0.75rem;
111 | 	}
112 | 
113 | 	.logo-text h1 {
114 | 		margin: 0;
115 | 		font-size: 1.25rem;
116 | 		font-weight: 700;
117 | 		color: var(--color-text);
118 | 		line-height: 1.2;
119 | 	}
120 | 
121 | 	.logo-text p {
122 | 		margin: 0;
123 | 		font-size: 0.75rem;
124 | 		color: var(--color-text-secondary);
125 | 		line-height: 1;
126 | 	}
127 | 
128 | 	.nav {
129 | 		display: flex;
130 | 		align-items: center;
131 | 		gap: 0.5rem;
132 | 	}
133 | 
134 | 	@media (max-width: 640px) {
135 | 		.logo-text h1 {
136 | 			font-size: 1rem;
137 | 		}
138 | 
139 | 		.logo-text p {
140 | 			display: none;
141 | 		}
142 | 	}
143 | </style>
144 | 


--------------------------------------------------------------------------------
/app/src/lib/components/layout/Footer.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	const currentYear = new Date().getFullYear();
  3 | </script>
  4 | 
  5 | <footer class="footer">
  6 | 	<div class="container">
  7 | 		<div class="footer-content">
  8 | 			<div class="footer-section">
  9 | 				<h3>GDPR Compliance Checker</h3>
 10 | 				<p>
 11 | 					A comprehensive tool to assess and improve your organization's GDPR compliance status.
 12 | 				</p>
 13 | 			</div>
 14 | 
 15 | 			<div class="footer-section">
 16 | 				<h4>Resources</h4>
 17 | 				<ul>
 18 | 					<li>
 19 | 						<a href="https://gdpr.eu/" target="_blank" rel="noopener noreferrer">GDPR Official Site</a
 20 | 						>
 21 | 					</li>
 22 | 					<li>
 23 | 						<a
 24 | 							href="https://commission.europa.eu/law/law-topic/data-protection_en"
 25 | 							target="_blank"
 26 | 							rel="noopener noreferrer">EU Data Protection</a
 27 | 						>
 28 | 					</li>
 29 | 					<li>
 30 | 						<a
 31 | 							href="https://www.dataprivacyframework.gov/"
 32 | 							target="_blank"
 33 | 							rel="noopener noreferrer">Data Privacy Framework</a
 34 | 						>
 35 | 					</li>
 36 | 				</ul>
 37 | 			</div>
 38 | 
 39 | 			<div class="footer-section">
 40 | 				<h4>About</h4>
 41 | 				<p class="disclaimer">
 42 | 					This tool provides guidance only. For legal compliance advice, please consult with a
 43 | 					qualified legal professional.
 44 | 				</p>
 45 | 			</div>
 46 | 		</div>
 47 | 
 48 | 		<div class="footer-bottom">
 49 | 			<p>© {currentYear} GDPR Compliance Checker. Open Source.</p>
 50 | 			<p>
 51 | 				Made with <span class="heart">♥</span> for data privacy
 52 | 			</p>
 53 | 		</div>
 54 | 	</div>
 55 | </footer>
 56 | 
 57 | <style>
 58 | 	.footer {
 59 | 		background: var(--color-card-bg);
 60 | 		border-top: 1px solid var(--color-border);
 61 | 		margin-top: 4rem;
 62 | 		padding: 3rem 0 1.5rem 0;
 63 | 	}
 64 | 
 65 | 	.container {
 66 | 		max-width: 1200px;
 67 | 		margin: 0 auto;
 68 | 		padding: 0 1rem;
 69 | 	}
 70 | 
 71 | 	.footer-content {
 72 | 		display: grid;
 73 | 		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 74 | 		gap: 2rem;
 75 | 		margin-bottom: 2rem;
 76 | 	}
 77 | 
 78 | 	.footer-section h3 {
 79 | 		margin: 0 0 0.5rem 0;
 80 | 		font-size: 1.125rem;
 81 | 		font-weight: 700;
 82 | 		color: var(--color-text);
 83 | 	}
 84 | 
 85 | 	.footer-section h4 {
 86 | 		margin: 0 0 0.75rem 0;
 87 | 		font-size: 0.875rem;
 88 | 		font-weight: 600;
 89 | 		color: var(--color-text);
 90 | 		text-transform: uppercase;
 91 | 		letter-spacing: 0.05em;
 92 | 	}
 93 | 
 94 | 	.footer-section p {
 95 | 		margin: 0;
 96 | 		font-size: 0.875rem;
 97 | 		color: var(--color-text-secondary);
 98 | 		line-height: 1.6;
 99 | 	}
100 | 
101 | 	.footer-section ul {
102 | 		list-style: none;
103 | 		padding: 0;
104 | 		margin: 0;
105 | 	}
106 | 
107 | 	.footer-section li {
108 | 		margin-bottom: 0.5rem;
109 | 	}
110 | 
111 | 	.footer-section a {
112 | 		color: var(--color-primary);
113 | 		text-decoration: none;
114 | 		font-size: 0.875rem;
115 | 		transition: color 0.2s ease;
116 | 	}
117 | 
118 | 	.footer-section a:hover {
119 | 		color: var(--color-primary-dark);
120 | 		text-decoration: underline;
121 | 	}
122 | 
123 | 	.disclaimer {
124 | 		font-size: 0.75rem;
125 | 		font-style: italic;
126 | 	}
127 | 
128 | 	.footer-bottom {
129 | 		border-top: 1px solid var(--color-border);
130 | 		padding-top: 1.5rem;
131 | 		display: flex;
132 | 		justify-content: space-between;
133 | 		align-items: center;
134 | 		flex-wrap: wrap;
135 | 		gap: 1rem;
136 | 	}
137 | 
138 | 	.footer-bottom p {
139 | 		margin: 0;
140 | 		font-size: 0.875rem;
141 | 		color: var(--color-text-secondary);
142 | 	}
143 | 
144 | 	.heart {
145 | 		color: var(--color-danger);
146 | 		animation: heartbeat 1.5s ease-in-out infinite;
147 | 	}
148 | 
149 | 	@keyframes heartbeat {
150 | 		0%,
151 | 		100% {
152 | 			transform: scale(1);
153 | 		}
154 | 		50% {
155 | 			transform: scale(1.1);
156 | 		}
157 | 	}
158 | 
159 | 	@media (max-width: 640px) {
160 | 		.footer-content {
161 | 			grid-template-columns: 1fr;
162 | 		}
163 | 
164 | 		.footer-bottom {
165 | 			flex-direction: column;
166 | 			text-align: center;
167 | 		}
168 | 	}
169 | </style>
170 | 


--------------------------------------------------------------------------------
/app/src/lib/components/assessment/ProgressBar.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	import { assessment } from '$lib/stores/assessment.svelte';
  3 | 
  4 | 	interface Props {
  5 | 		showDetails?: boolean;
  6 | 	}
  7 | 
  8 | 	let { showDetails = true }: Props = $props();
  9 | 
 10 | 	let progress = $derived(assessment.progressPercentage);
 11 | 	let score = $derived(assessment.scorePercentage);
 12 | 	let level = $derived(assessment.complianceLevel);
 13 | 
 14 | 	const levelColors = {
 15 | 		excellent: 'var(--color-success)',
 16 | 		good: '#10b981',
 17 | 		moderate: '#f59e0b',
 18 | 		poor: '#f97316',
 19 | 		critical: 'var(--color-danger)'
 20 | 	};
 21 | 
 22 | 	const levelLabels = {
 23 | 		excellent: 'Excellent',
 24 | 		good: 'Good',
 25 | 		moderate: 'Moderate',
 26 | 		poor: 'Poor',
 27 | 		critical: 'Critical'
 28 | 	};
 29 | </script>
 30 | 
 31 | <div class="progress-container">
 32 | 	<div class="progress-header">
 33 | 		<div class="progress-info">
 34 | 			<h3 class="progress-title">Overall Progress</h3>
 35 | 			{#if showDetails}
 36 | 				<p class="progress-subtitle">
 37 | 					{assessment.completedItems} of {assessment.totalItems} items completed
 38 | 				</p>
 39 | 			{/if}
 40 | 		</div>
 41 | 		<div class="progress-percentage">{Math.round(progress)}%</div>
 42 | 	</div>
 43 | 
 44 | 	<div class="progress-bar">
 45 | 		<div class="progress-fill" style="width: {progress}%"></div>
 46 | 	</div>
 47 | 
 48 | 	{#if showDetails}
 49 | 		<div class="compliance-level">
 50 | 			<div class="level-badge" style="background: {levelColors[level]}">
 51 | 				{levelLabels[level]} Compliance
 52 | 			</div>
 53 | 			<div class="score-text">
 54 | 				Score: {Math.round(score)}% ({Math.round(assessment.currentScore)}/{Math.round(
 55 | 					assessment.maxScore
 56 | 				)} points)
 57 | 			</div>
 58 | 		</div>
 59 | 	{/if}
 60 | </div>
 61 | 
 62 | <style>
 63 | 	.progress-container {
 64 | 		background: var(--color-card-bg);
 65 | 		border-radius: 1rem;
 66 | 		padding: 1.5rem;
 67 | 		border: 1px solid var(--color-border);
 68 | 	}
 69 | 
 70 | 	.progress-header {
 71 | 		display: flex;
 72 | 		align-items: flex-start;
 73 | 		justify-content: space-between;
 74 | 		margin-bottom: 1rem;
 75 | 	}
 76 | 
 77 | 	.progress-info {
 78 | 		flex: 1;
 79 | 	}
 80 | 
 81 | 	.progress-title {
 82 | 		margin: 0;
 83 | 		font-size: 1.25rem;
 84 | 		font-weight: 600;
 85 | 		color: var(--color-text);
 86 | 	}
 87 | 
 88 | 	.progress-subtitle {
 89 | 		margin: 0.25rem 0 0 0;
 90 | 		font-size: 0.875rem;
 91 | 		color: var(--color-text-secondary);
 92 | 	}
 93 | 
 94 | 	.progress-percentage {
 95 | 		font-size: 2rem;
 96 | 		font-weight: 700;
 97 | 		color: var(--color-primary);
 98 | 		line-height: 1;
 99 | 	}
100 | 
101 | 	.progress-bar {
102 | 		width: 100%;
103 | 		height: 1rem;
104 | 		background: var(--color-bg-secondary);
105 | 		border-radius: 0.5rem;
106 | 		overflow: hidden;
107 | 		position: relative;
108 | 	}
109 | 
110 | 	.progress-fill {
111 | 		height: 100%;
112 | 		background: linear-gradient(90deg, var(--color-primary), var(--color-success));
113 | 		transition: width 0.5s ease;
114 | 		border-radius: 0.5rem;
115 | 		position: relative;
116 | 		overflow: hidden;
117 | 	}
118 | 
119 | 	.progress-fill::after {
120 | 		content: '';
121 | 		position: absolute;
122 | 		top: 0;
123 | 		left: 0;
124 | 		right: 0;
125 | 		bottom: 0;
126 | 		background: linear-gradient(
127 | 			90deg,
128 | 			transparent,
129 | 			rgba(255, 255, 255, 0.3),
130 | 			transparent
131 | 		);
132 | 		animation: shimmer 2s infinite;
133 | 	}
134 | 
135 | 	@keyframes shimmer {
136 | 		0% {
137 | 			transform: translateX(-100%);
138 | 		}
139 | 		100% {
140 | 			transform: translateX(100%);
141 | 		}
142 | 	}
143 | 
144 | 	.compliance-level {
145 | 		display: flex;
146 | 		align-items: center;
147 | 		justify-content: space-between;
148 | 		margin-top: 1rem;
149 | 		gap: 1rem;
150 | 		flex-wrap: wrap;
151 | 	}
152 | 
153 | 	.level-badge {
154 | 		padding: 0.5rem 1rem;
155 | 		border-radius: 0.5rem;
156 | 		color: white;
157 | 		font-weight: 600;
158 | 		font-size: 0.875rem;
159 | 	}
160 | 
161 | 	.score-text {
162 | 		font-size: 0.875rem;
163 | 		color: var(--color-text-secondary);
164 | 		font-weight: 500;
165 | 	}
166 | </style>
167 | 


--------------------------------------------------------------------------------
/app/README.md:
--------------------------------------------------------------------------------
  1 | # GDPR Compliance Checker - Svelte 5 Edition
  2 | 
  3 | A modern, interactive web application for assessing and improving GDPR (General Data Protection Regulation) compliance. Built with **Svelte 5** using the new Runes API for superior reactivity and performance.
  4 | 
  5 | ## ✨ Features
  6 | 
  7 | - 📋 **Comprehensive Checklist**: 9 GDPR compliance categories with detailed requirements
  8 | - 🎯 **Progress Tracking**: Real-time assessment progress and compliance scoring
  9 | - 💾 **Data Persistence**: Automatic save to local storage
 10 | - 📤 **Export/Import**: Save assessments as JSON or generate PDF reports
 11 | - 🌐 **Multilingual**: Full support for English and German
 12 | - 🌓 **Dark Mode**: Beautiful light and dark themes
 13 | - ♿ **Accessible**: WCAG compliant with keyboard navigation
 14 | - 📱 **Responsive**: Works perfectly on all devices
 15 | - ⚡ **Fast**: Built with Svelte 5 for optimal performance
 16 | 
 17 | ## 🚀 Getting Started
 18 | 
 19 | ### Prerequisites
 20 | 
 21 | - Node.js 18+ and npm
 22 | 
 23 | ### Installation
 24 | 
 25 | ```bash
 26 | # Install dependencies
 27 | npm install
 28 | 
 29 | # Start development server
 30 | npm run dev
 31 | 
 32 | # Build for production
 33 | npm run build
 34 | 
 35 | # Preview production build
 36 | npm run preview
 37 | ```
 38 | 
 39 | ## 📁 Project Structure
 40 | 
 41 | ```
 42 | gdpr_svelte/
 43 | ├── src/
 44 | │   ├── lib/
 45 | │   │   ├── components/
 46 | │   │   │   ├── assessment/      # Assessment-related components
 47 | │   │   │   ├── export/          # Export/Import functionality
 48 | │   │   │   ├── layout/          # Layout components
 49 | │   │   │   └── ui/              # Reusable UI primitives
 50 | │   │   ├── data/
 51 | │   │   │   ├── gdpr-data.ts     # Data module
 52 | │   │   │   ├── en.json          # English GDPR data
 53 | │   │   │   └── de.json          # German GDPR data
 54 | │   │   ├── stores/              # Svelte 5 Runes stores
 55 | │   │   │   ├── assessment.svelte.ts
 56 | │   │   │   ├── theme.svelte.ts
 57 | │   │   │   └── language.svelte.ts
 58 | │   │   └── types/
 59 | │   │       └── gdpr.ts          # TypeScript type definitions
 60 | │   ├── routes/
 61 | │   │   ├── +layout.svelte       # Root layout
 62 | │   │   ├── +layout.ts           # Layout config
 63 | │   │   └── +page.svelte         # Main page
 64 | │   └── app.css                  # Global styles
 65 | ├── package.json
 66 | ├── svelte.config.js
 67 | └── README.md
 68 | ```
 69 | 
 70 | ## 🛠️ Technologies
 71 | 
 72 | - **Svelte 5**: Latest version with Runes API for reactive state
 73 | - **SvelteKit**: Full-stack framework with static adapter
 74 | - **TypeScript**: Type-safe development
 75 | - **Vite**: Lightning-fast build tool
 76 | - **jsPDF**: PDF generation
 77 | - **Inter Font**: Modern, accessible typography
 78 | 
 79 | ## 📊 GDPR Compliance Categories
 80 | 
 81 | 1. Legal Basis and Consent Management
 82 | 2. Data Mapping and Inventory
 83 | 3. Data Subject Rights (DSR)
 84 | 4. Data Protection Impact Assessment (DPIA)
 85 | 5. Security and Breach Management
 86 | 6. Data Processing Agreements
 87 | 7. Privacy Notices and Transparency
 88 | 8. Data Retention and Deletion
 89 | 9. International Data Transfers
 90 | 
 91 | ## 🎨 Key Features
 92 | 
 93 | ### Assessment System
 94 | 
 95 | - Interactive checklist with expandable categories
 96 | - Real-time progress tracking
 97 | - Weighted scoring (required vs optional items)
 98 | - Compliance level indicators
 99 | - Priority recommendations
100 | 
101 | ### Data Management
102 | 
103 | - Auto-save to local storage
104 | - JSON export/import
105 | - PDF report generation
106 | - Reset functionality
107 | 
108 | ### UI/UX
109 | 
110 | - Modern, clean design
111 | - Smooth animations
112 | - Dark/light theme toggle
113 | - Responsive layout
114 | - Keyboard accessible
115 | 
116 | ## 🌐 Deployment
117 | 
118 | Build output is a static site that can be deployed to:
119 | 
120 | - GitHub Pages
121 | - Netlify
122 | - Vercel
123 | - Any static hosting
124 | 
125 | Build command: `npm run build`  
126 | Output directory: `build/`
127 | 
128 | ## ⚖️ Legal Notice
129 | 
130 | This tool provides guidance only. For legal compliance advice, consult a qualified legal professional.
131 | 
132 | ---
133 | 
134 | **Built with ❤️ using Svelte 5**
135 | 


--------------------------------------------------------------------------------
/app/src/app.css:
--------------------------------------------------------------------------------
  1 | @import '@fontsource/inter/latin.css';
  2 | 
  3 | :root {
  4 | 	/* Light Theme Colors */
  5 | 	--color-primary: #2563eb;
  6 | 	--color-primary-dark: #1e40af;
  7 | 	--color-success: #10b981;
  8 | 	--color-danger: #ef4444;
  9 | 	--color-danger-dark: #dc2626;
 10 | 	--color-warning: #f59e0b;
 11 | 
 12 | 	--color-bg: #f8fafc;
 13 | 	--color-bg-secondary: #f1f5f9;
 14 | 	--color-bg-tertiary: #e2e8f0;
 15 | 	--color-bg-translucent: rgba(248, 250, 252, 0.8);
 16 | 
 17 | 	--color-card-bg: #ffffff;
 18 | 
 19 | 	--color-text: #0f172a;
 20 | 	--color-text-secondary: #64748b;
 21 | 
 22 | 	--color-border: #e2e8f0;
 23 | 
 24 | 	--color-success-light: #d1fae5;
 25 | 	--color-danger-light: #fee2e2;
 26 | 
 27 | 	/* Shadows */
 28 | 	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 29 | 	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 30 | 	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 31 | 
 32 | 	/* Font */
 33 | 	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
 34 | 		'Helvetica Neue', Arial, sans-serif;
 35 | }
 36 | 
 37 | [data-theme='dark'] {
 38 | 	/* Dark Theme Colors */
 39 | 	--color-bg: #0f172a;
 40 | 	--color-bg-secondary: #1e293b;
 41 | 	--color-bg-tertiary: #334155;
 42 | 	--color-bg-translucent: rgba(15, 23, 42, 0.8);
 43 | 
 44 | 	--color-card-bg: #1e293b;
 45 | 
 46 | 	--color-text: #f1f5f9;
 47 | 	--color-text-secondary: #94a3b8;
 48 | 
 49 | 	--color-border: #334155;
 50 | 
 51 | 	--color-success-light: #064e3b;
 52 | 	--color-danger-light: #7f1d1d;
 53 | 
 54 | 	/* Adjust shadows for dark mode */
 55 | 	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
 56 | 	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
 57 | 	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
 58 | }
 59 | 
 60 | * {
 61 | 	box-sizing: border-box;
 62 | }
 63 | 
 64 | html {
 65 | 	font-family: var(--font-sans);
 66 | 	-webkit-font-smoothing: antialiased;
 67 | 	-moz-osx-font-smoothing: grayscale;
 68 | }
 69 | 
 70 | body {
 71 | 	margin: 0;
 72 | 	padding: 0;
 73 | 	background: var(--color-bg);
 74 | 	color: var(--color-text);
 75 | 	line-height: 1.6;
 76 | 	transition: background-color 0.3s ease, color 0.3s ease;
 77 | }
 78 | 
 79 | /* Smooth scrolling */
 80 | html {
 81 | 	scroll-behavior: smooth;
 82 | }
 83 | 
 84 | /* Selection */
 85 | ::selection {
 86 | 	background-color: var(--color-primary);
 87 | 	color: white;
 88 | }
 89 | 
 90 | /* Focus styles */
 91 | :focus-visible {
 92 | 	outline: 2px solid var(--color-primary);
 93 | 	outline-offset: 2px;
 94 | }
 95 | 
 96 | /* Custom scrollbar */
 97 | ::-webkit-scrollbar {
 98 | 	width: 10px;
 99 | 	height: 10px;
100 | }
101 | 
102 | ::-webkit-scrollbar-track {
103 | 	background: var(--color-bg-secondary);
104 | }
105 | 
106 | ::-webkit-scrollbar-thumb {
107 | 	background: var(--color-border);
108 | 	border-radius: 5px;
109 | }
110 | 
111 | ::-webkit-scrollbar-thumb:hover {
112 | 	background: var(--color-text-secondary);
113 | }
114 | 
115 | /* Typography */
116 | h1,
117 | h2,
118 | h3,
119 | h4,
120 | h5,
121 | h6 {
122 | 	margin: 0;
123 | 	line-height: 1.2;
124 | 	font-weight: 700;
125 | }
126 | 
127 | p {
128 | 	margin: 0;
129 | }
130 | 
131 | a {
132 | 	color: var(--color-primary);
133 | 	text-decoration: none;
134 | }
135 | 
136 | a:hover {
137 | 	text-decoration: underline;
138 | }
139 | 
140 | /* Utilities */
141 | .sr-only {
142 | 	position: absolute;
143 | 	width: 1px;
144 | 	height: 1px;
145 | 	padding: 0;
146 | 	margin: -1px;
147 | 	overflow: hidden;
148 | 	clip: rect(0, 0, 0, 0);
149 | 	white-space: nowrap;
150 | 	border-width: 0;
151 | }
152 | 
153 | /* Animations */
154 | @keyframes fadeIn {
155 | 	from {
156 | 		opacity: 0;
157 | 	}
158 | 	to {
159 | 		opacity: 1;
160 | 	}
161 | }
162 | 
163 | @keyframes slideUp {
164 | 	from {
165 | 		transform: translateY(20px);
166 | 		opacity: 0;
167 | 	}
168 | 	to {
169 | 		transform: translateY(0);
170 | 		opacity: 1;
171 | 	}
172 | }
173 | 
174 | @keyframes slideDown {
175 | 	from {
176 | 		transform: translateY(-20px);
177 | 		opacity: 0;
178 | 	}
179 | 	to {
180 | 		transform: translateY(0);
181 | 		opacity: 1;
182 | 	}
183 | }
184 | 
185 | @keyframes pulse {
186 | 	0%,
187 | 	100% {
188 | 		opacity: 1;
189 | 	}
190 | 	50% {
191 | 		opacity: 0.5;
192 | 	}
193 | }
194 | 
195 | /* Print styles */
196 | @media print {
197 | 	body {
198 | 		background: white;
199 | 		color: black;
200 | 	}
201 | 
202 | 	.no-print {
203 | 		display: none !important;
204 | 	}
205 | 
206 | 	a {
207 | 		text-decoration: underline;
208 | 	}
209 | }
210 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>Data Protection Checklist</title>
  6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  7 |   <meta name="description" content="Description">
  8 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  9 |   <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4.13.1/lib/themes/vue.css">
 10 |   <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/dist/style.min.css" title="docsify-darklight-theme" type="text/css">
 11 |   <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E🔒%3C/text%3E%3C/svg%3E">
 12 |   <style>
 13 |     /* Optimized language switcher for scalability */
 14 |     .app-nav {
 15 |       margin: 0;
 16 |       position: absolute;
 17 |       right: 20px;
 18 |       top: 15px;
 19 |       z-index: 10;
 20 |     }
 21 |     .app-nav ul {
 22 |       display: flex;
 23 |       gap: 8px;
 24 |       margin: 0;
 25 |       padding: 0;
 26 |       list-style: none;
 27 |       flex-wrap: wrap;
 28 |     }
 29 |     .app-nav li {
 30 |       margin: 0;
 31 |     }
 32 |     .app-nav a {
 33 |       display: flex;
 34 |       align-items: center;
 35 |       gap: 4px;
 36 |       padding: 6px 10px;
 37 |       background: #2c3e50;
 38 |       color: white;
 39 |       text-decoration: none;
 40 |       border-radius: 16px;
 41 |       font-size: 12px;
 42 |       font-weight: 500;
 43 |       transition: all 0.3s ease;
 44 |       white-space: nowrap;
 45 |       box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 46 |     }
 47 |     .app-nav a:hover {
 48 |       background: #34495e;
 49 |       transform: translateY(-1px);
 50 |       box-shadow: 0 4px 8px rgba(0,0,0,0.15);
 51 |     }
 52 |     .app-nav .emoji {
 53 |       width: 14px;
 54 |       height: 14px;
 55 |       margin: 0;
 56 |     }
 57 | 
 58 |     /* Responsive design for mobile */
 59 |     @media (max-width: 768px) {
 60 |       .app-nav {
 61 |         right: 70px;
 62 |         top: 10px;
 63 |       }
 64 |       .app-nav a {
 65 |         padding: 4px 8px;
 66 |         font-size: 11px;
 67 |         gap: 2px;
 68 |       }
 69 |       .app-nav .emoji {
 70 |         width: 12px;
 71 |         height: 12px;
 72 |       }
 73 |     }
 74 |   </style>
 75 | </head>
 76 | <body>
 77 |   <nav class="app-nav">
 78 |     <ul>
 79 |       <li>
 80 |         <a href="webapp/index.html" style="background: linear-gradient(135deg, #42b983, #369870); font-weight: 600;" target="_blank">🚀 Interactive Tool</a>
 81 |       </li>
 82 |       <li>
 83 |         <a href="#/"><img src="https://github.githubassets.com/images/icons/emoji/unicode/1f1ec-1f1e7.png?v8.png" alt="uk" class="emoji" loading="lazy"> English</a>
 84 |       </li>
 85 |       <li>
 86 |         <a href="#/de/"><img src="https://github.githubassets.com/images/icons/emoji/unicode/1f1e9-1f1ea.png?v8.png" alt="de" class="emoji" loading="lazy"> Deutsch</a>
 87 |       </li>
 88 |     </ul>
 89 |   </nav>
 90 |   <div id="app"></div>
 91 |   <script>
 92 |     window.$docsify = {
 93 |       // Basic configuration
 94 |       name: 'Data Protection Checklist',
 95 |       repo: 'mirkoschubert/datenschutz-checkliste',
 96 | 
 97 |       // Direct GitHub markdown integration
 98 |       homepage: 'https://raw.githubusercontent.com/mirkoschubert/datenschutz-checkliste/master/cheat-sheet.md',
 99 |       alias: {
100 |         '/de/': 'https://raw.githubusercontent.com/mirkoschubert/datenschutz-checkliste/master/checkliste.md'
101 |       },
102 | 
103 |       // Navigation and sidebar
104 |       maxLevel: 3,
105 |       subMaxLevel: 3,
106 |       loadSidebar: false,
107 |       auto2top: true,
108 |       autoHeader: true,
109 |       routerMode: 'hash',
110 |       executeScript: true,
111 | 
112 |       // Progress bar
113 |       progress: {
114 |         position: "top",
115 |         color: "var(--theme-color,#42b983)",
116 |         height: "3px"
117 |       },
118 | 
119 |       // Search functionality
120 |       search: {
121 |         paths: 'auto',
122 |         placeholder: {
123 |           '/': 'Search',
124 |           '/de/': 'Suchen'
125 |         },
126 |         noData: {
127 |           '/de/': 'Keine Ergebnisse',
128 |           '/': 'No Results'
129 |         },
130 |         formatUpdated: '{MM}/{DD} {HH}:{mm}',
131 |         depth: 3,
132 |         hideOtherSidebarContent: true,
133 |         pathNamespaces: ['/de']
134 |       }
135 |     }
136 |   </script>
137 |   <!-- Docsify v4.13.1 -->
138 |   <script src="//cdn.jsdelivr.net/npm/docsify@4.13.1/lib/docsify.min.js"></script>
139 |   <script src="//cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/dist/index.min.js" type="text/javascript"></script>
140 |   <script src="//cdn.jsdelivr.net/npm/docsify@4.13.1/lib/plugins/search.min.js"></script>
141 |   <script src="https://cdn.jsdelivr.net/npm/docsify-progress@latest/dist/progress.min.js"></script>
142 | </body>
143 | </html>
144 | 


--------------------------------------------------------------------------------
/app/src/lib/components/export/ExportModal.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	import { assessment } from '$lib/stores/assessment.svelte';
  3 | 	import Modal from '$lib/components/ui/Modal.svelte';
  4 | 	import Button from '$lib/components/ui/Button.svelte';
  5 | 
  6 | 	interface Props {
  7 | 		isOpen: boolean;
  8 | 		onClose: () => void;
  9 | 	}
 10 | 
 11 | 	let { isOpen = $bindable(), onClose }: Props = $props();
 12 | 
 13 | 	function exportJSON() {
 14 | 		const data = assessment.exportData();
 15 | 		const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
 16 | 		const url = URL.createObjectURL(blob);
 17 | 		const a = document.createElement('a');
 18 | 		a.href = url;
 19 | 		a.download = `gdpr-assessment-${new Date().toISOString().split('T')[0]}.json`;
 20 | 		a.click();
 21 | 		URL.revokeObjectURL(url);
 22 | 		onClose();
 23 | 	}
 24 | 
 25 | 	async function exportPDF() {
 26 | 		// Dynamic import - only load jsPDF when actually needed
 27 | 		const { jsPDF } = await import('jspdf');
 28 | 		const doc = new jsPDF();
 29 | 		const data = assessment.data;
 30 | 		let y = 20;
 31 | 
 32 | 		// Title
 33 | 		doc.setFontSize(20);
 34 | 		doc.text('GDPR Compliance Assessment', 20, y);
 35 | 		y += 15;
 36 | 
 37 | 		// Metadata
 38 | 		doc.setFontSize(10);
 39 | 		doc.text(`Date: ${new Date().toLocaleDateString()}`, 20, y);
 40 | 		y += 6;
 41 | 		doc.text(`Language: ${assessment.currentLang.toUpperCase()}`, 20, y);
 42 | 		y += 10;
 43 | 
 44 | 		// Summary
 45 | 		doc.setFontSize(14);
 46 | 		doc.text('Summary', 20, y);
 47 | 		y += 8;
 48 | 
 49 | 		doc.setFontSize(10);
 50 | 		doc.text(
 51 | 			`Progress: ${Math.round(assessment.progressPercentage)}% (${assessment.completedItems}/${assessment.totalItems} items)`,
 52 | 			20,
 53 | 			y
 54 | 		);
 55 | 		y += 6;
 56 | 		doc.text(
 57 | 			`Compliance Score: ${Math.round(assessment.scorePercentage)}% - ${assessment.complianceLevel.toUpperCase()}`,
 58 | 			20,
 59 | 			y
 60 | 		);
 61 | 		y += 15;
 62 | 
 63 | 		// Categories
 64 | 		data.categories.forEach((category) => {
 65 | 			if (y > 270) {
 66 | 				doc.addPage();
 67 | 				y = 20;
 68 | 			}
 69 | 
 70 | 			doc.setFontSize(12);
 71 | 			doc.text(category.title, 20, y);
 72 | 			y += 7;
 73 | 
 74 | 			const completedCount = category.items.filter((item) => assessment.responses[item.id]).length;
 75 | 			doc.setFontSize(9);
 76 | 			doc.text(`${completedCount}/${category.items.length} completed`, 25, y);
 77 | 			y += 10;
 78 | 
 79 | 			category.items.forEach((item) => {
 80 | 				if (y > 270) {
 81 | 					doc.addPage();
 82 | 					y = 20;
 83 | 				}
 84 | 
 85 | 				const isCompleted = assessment.responses[item.id];
 86 | 				doc.setFontSize(9);
 87 | 				doc.text(isCompleted ? '☑' : '☐', 25, y);
 88 | 				doc.text(item.title, 32, y, { maxWidth: 160 });
 89 | 				y += 6;
 90 | 			});
 91 | 
 92 | 			y += 5;
 93 | 		});
 94 | 
 95 | 		doc.save(`gdpr-assessment-${new Date().toISOString().split('T')[0]}.pdf`);
 96 | 		onClose();
 97 | 	}
 98 | 
 99 | 	let fileInput: HTMLInputElement;
100 | 
101 | 	function handleImportClick() {
102 | 		fileInput?.click();
103 | 	}
104 | 
105 | 	function handleFileChange(e: Event) {
106 | 		const target = e.target as HTMLInputElement;
107 | 		const file = target.files?.[0];
108 | 		if (!file) return;
109 | 
110 | 		const reader = new FileReader();
111 | 		reader.onload = (e) => {
112 | 			try {
113 | 				const data = JSON.parse(e.target?.result as string);
114 | 				if (assessment.importData(data)) {
115 | 					alert('Assessment data imported successfully!');
116 | 					onClose();
117 | 				} else {
118 | 					alert('Failed to import data. Please check the file format.');
119 | 				}
120 | 			} catch (error) {
121 | 				alert('Invalid file format.');
122 | 			}
123 | 		};
124 | 		reader.readAsText(file);
125 | 	}
126 | </script>
127 | 
128 | <Modal {isOpen} {onClose} title="Export & Import" size="md">
129 | 	<div class="export-section">
130 | 		<h3>Export Assessment</h3>
131 | 		<p>Download your assessment progress to save or share.</p>
132 | 
133 | 		<div class="button-grid">
134 | 			<Button variant="primary" onclick={exportJSON}>
135 | 				<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
136 | 					<path
137 | 						d="M10 14V6m0 8l-3-3m3 3l3-3M3 17h14"
138 | 						stroke="currentColor"
139 | 						stroke-width="2"
140 | 						stroke-linecap="round"
141 | 						stroke-linejoin="round"
142 | 					/>
143 | 				</svg>
144 | 				Export JSON
145 | 			</Button>
146 | 
147 | 			<Button variant="secondary" onclick={exportPDF}>
148 | 				<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
149 | 					<path
150 | 						d="M9 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V6.414A2 2 0 0016.414 5L13 1.586A2 2 0 0011.586 1H9z"
151 | 						stroke="currentColor"
152 | 						stroke-width="1.5"
153 | 					/>
154 | 					<path d="M12 2v4h4" stroke="currentColor" stroke-width="1.5" />
155 | 				</svg>
156 | 				Export PDF
157 | 			</Button>
158 | 		</div>
159 | 	</div>
160 | 
161 | 	<div class="divider"></div>
162 | 
163 | 	<div class="import-section">
164 | 		<h3>Import Assessment</h3>
165 | 		<p>Load a previously saved assessment from a JSON file.</p>
166 | 
167 | 		<input
168 | 			type="file"
169 | 			accept=".json"
170 | 			bind:this={fileInput}
171 | 			onchange={handleFileChange}
172 | 			style="display: none"
173 | 		/>
174 | 
175 | 		<Button variant="secondary" onclick={handleImportClick}>
176 | 			<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
177 | 				<path
178 | 					d="M10 6v8m0-8l-3 3m3-3l3 3M3 3h14"
179 | 					stroke="currentColor"
180 | 					stroke-width="2"
181 | 					stroke-linecap="round"
182 | 					stroke-linejoin="round"
183 | 				/>
184 | 			</svg>
185 | 			Import from JSON
186 | 		</Button>
187 | 	</div>
188 | </Modal>
189 | 
190 | <style>
191 | 	.export-section,
192 | 	.import-section {
193 | 		margin-bottom: 1.5rem;
194 | 	}
195 | 
196 | 	h3 {
197 | 		margin: 0 0 0.5rem 0;
198 | 		font-size: 1.125rem;
199 | 		font-weight: 600;
200 | 		color: var(--color-text);
201 | 	}
202 | 
203 | 	p {
204 | 		margin: 0 0 1rem 0;
205 | 		font-size: 0.875rem;
206 | 		color: var(--color-text-secondary);
207 | 	}
208 | 
209 | 	.button-grid {
210 | 		display: grid;
211 | 		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
212 | 		gap: 1rem;
213 | 	}
214 | 
215 | 	.divider {
216 | 		height: 1px;
217 | 		background: var(--color-border);
218 | 		margin: 2rem 0;
219 | 	}
220 | </style>
221 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
  1 | # Contributing to Data Protection Checklist
  2 | 
  3 | We welcome contributions to the Data Protection Checklist! This project participates in **Hacktoberfest 2025** and we're excited to collaborate with developers from around the world.
  4 | 
  5 | ## 🎯 Project Overview
  6 | 
  7 | This is an open source checklist helping web designers and developers implement privacy-related tasks according to current data protection laws (GDPR/DSGVO). The project includes:
  8 | 
  9 | - **English version**: `cheat-sheet.md`
 10 | - **German version**: `checkliste.md`
 11 | - **Documentation website**: Built with Docsify, hosted on GitHub Pages
 12 | 
 13 | ## 🚀 How to Contribute
 14 | 
 15 | ### Types of Contributions We Welcome
 16 | 
 17 | 1. **Content Updates** 📝
 18 |    - Add new data protection requirements
 19 |    - Update existing legal references
 20 |    - Improve implementation advice
 21 |    - Fix typos or grammar issues
 22 | 
 23 | 2. **Legal Compliance** ⚖️
 24 |    - Update for new GDPR regulations
 25 |    - Add country-specific requirements
 26 |    - Review and verify legal accuracy
 27 | 
 28 | 3. **Technical Improvements** 🔧
 29 |    - Website enhancements (Docsify configuration)
 30 |    - Accessibility improvements
 31 |    - Mobile responsiveness
 32 |    - Performance optimizations
 33 | 
 34 | 4. **Translations** 🌍
 35 |    - Add new language versions
 36 |    - Improve existing translations
 37 |    - Localize legal requirements for different countries
 38 | 
 39 | 5. **Documentation** 📚
 40 |    - Improve README
 41 |    - Add code comments
 42 |    - Create usage examples
 43 | 
 44 | ### Getting Started
 45 | 
 46 | 1. **Fork the repository**
 47 |    ```bash
 48 |    # Click the "Fork" button on GitHub
 49 |    ```
 50 | 
 51 | 2. **Clone your fork**
 52 |    ```bash
 53 |    git clone https://github.com/YOUR-USERNAME/datenschutz-checkliste.git
 54 |    cd datenschutz-checkliste
 55 |    ```
 56 | 
 57 | 3. **Create a feature branch**
 58 |    ```bash
 59 |    git checkout -b feature/your-improvement
 60 |    ```
 61 | 
 62 | 4. **Make your changes**
 63 |    - Edit the relevant files
 64 |    - Test your changes locally
 65 |    - Ensure proper formatting
 66 | 
 67 | 5. **Commit your changes**
 68 |    ```bash
 69 |    git add .
 70 |    git commit -m "Add: your descriptive commit message"
 71 |    ```
 72 | 
 73 | 6. **Push to your fork**
 74 |    ```bash
 75 |    git push origin feature/your-improvement
 76 |    ```
 77 | 
 78 | 7. **Create a Pull Request**
 79 |    - Go to the original repository
 80 |    - Click "New Pull Request"
 81 |    - Provide a clear description of your changes
 82 | 
 83 | ## 📋 Contribution Guidelines
 84 | 
 85 | ### Content Guidelines
 86 | 
 87 | - **Accuracy First**: All legal information must be accurate and up-to-date
 88 | - **Clear Language**: Use simple, understandable language
 89 | - **Implementation Focus**: Provide practical, actionable advice
 90 | - **Source References**: Include links to official legal sources
 91 | - **Bilingual**: Major updates should be reflected in both languages
 92 | 
 93 | ### Technical Guidelines
 94 | 
 95 | - **Markdown Format**: Use proper Markdown formatting
 96 | - **Consistent Style**: Follow existing code style and structure
 97 | - **Test Locally**: Test documentation website locally before submitting
 98 | - **Mobile First**: Ensure changes work on mobile devices
 99 | 
100 | ### Code Style
101 | 
102 | - Use consistent formatting for Markdown files
103 | - Keep lines under 120 characters when possible
104 | - Use descriptive commit messages
105 | - Add comments for complex configurations
106 | 
107 | ## 🛠️ Local Development
108 | 
109 | ### Testing the Documentation Website
110 | 
111 | 1. **Serve locally** (optional, for testing Docsify changes):
112 |    ```bash
113 |    # Install docsify-cli globally
114 |    npm i docsify-cli -g
115 | 
116 |    # Serve the docs
117 |    docsify serve docs
118 |    ```
119 | 
120 | 2. **View in browser**: http://localhost:3000
121 | 
122 | ### File Structure
123 | 
124 | ```
125 | ├── cheat-sheet.md          # English checklist
126 | ├── checkliste.md           # German checklist
127 | ├── docs/
128 | │   ├── index.html          # Docsify configuration
129 | │   └── .nojekyll          # GitHub Pages config
130 | ├── README.md               # Project overview
131 | └── CONTRIBUTING.md         # This file
132 | ```
133 | 
134 | ## 🏷️ Hacktoberfest 2025
135 | 
136 | This project proudly participates in Hacktoberfest! To ensure your contribution counts:
137 | 
138 | 1. **Quality over Quantity**: Focus on meaningful contributions
139 | 2. **Follow Guidelines**: Adhere to these contribution guidelines
140 | 3. **Be Respectful**: Follow our Code of Conduct
141 | 4. **Valid PRs Only**: Spam or low-quality PRs will be marked as invalid
142 | 
143 | ### Hacktoberfest Labels
144 | 
145 | We use these labels for Hacktoberfest:
146 | - `hacktoberfest` - General Hacktoberfest issues
147 | - `good-first-issue` - Perfect for newcomers
148 | - `help-wanted` - We need your expertise
149 | - `documentation` - Documentation improvements
150 | - `translation` - Translation work needed
151 | 
152 | ## 🤝 Code of Conduct
153 | 
154 | We are committed to providing a welcoming and inclusive environment for all contributors. Please:
155 | 
156 | - Be respectful and considerate
157 | - Use welcoming and inclusive language
158 | - Focus on what is best for the community
159 | - Show empathy towards other community members
160 | - Respect differing viewpoints and experiences
161 | 
162 | ## 📞 Getting Help
163 | 
164 | Need help or have questions?
165 | 
166 | - **Issues**: Create a GitHub issue for bugs or feature requests
167 | - **Discussions**: Use GitHub Discussions for general questions
168 | - **Email**: Contact the maintainer for sensitive topics
169 | 
170 | ## 🎉 Recognition
171 | 
172 | Contributors will be:
173 | - Listed in the project's contributor list
174 | - Mentioned in release notes for significant contributions
175 | - Eligible for Hacktoberfest rewards (if participating)
176 | 
177 | ## 📄 Legal Note
178 | 
179 | By contributing to this project, you agree that your contributions will be licensed under the same license as the project. This project provides general information and does not constitute legal advice.
180 | 
181 | ---
182 | 
183 | **Happy Contributing! 🚀**
184 | 
185 | Thank you for helping make data protection more accessible for developers worldwide!


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <h1 align="center">Data Protection Cheat Sheet (GDPR)</h1>
  2 | 
  3 | <p align="center">
  4 |   <a href="https://hacktoberfest.com/" target="_blank">
  5 |     <img src="https://img.shields.io/badge/Hacktoberfest-2025-blueviolet?style=for-the-badge&logo=hacktoberfest" alt="Hacktoberfest 2025" />
  6 |   </a>
  7 |   <br>
  8 |   <img src="https://img.shields.io/github/deployments/mirkoschubert/datenschutz-checkliste/github-pages?style=flat-square&label=Deploy" alt="Deploy Status" />
  9 |   <img src="https://img.shields.io/badge/Languages-DE_|_EN-blue?style=flat-square" alt="Languages" />
 10 |   <a href="https://github.com/mirkoschubert/datenschutz-checkliste/blob/master/LICENSE">
 11 |     <img src="https://img.shields.io/github/license/mirkoschubert/datenschutz-checkliste.svg?style=flat-square" alt="License" />
 12 |   </a>
 13 |   <img src="https://img.shields.io/github/stars/mirkoschubert/datenschutz-checkliste?style=flat-square" alt="Stars" />
 14 |   <img src="https://img.shields.io/github/forks/mirkoschubert/datenschutz-checkliste?style=flat-square" alt="Forks" />
 15 |   <img src="https://img.shields.io/github/contributors/mirkoschubert/datenschutz-checkliste?style=flat-square" alt="Contributors" />
 16 | </p>
 17 | 
 18 | <p align="center">Open source cheat sheet for web designers and developers to implement data protection relevant tasks according to current law (GDPR).</p>
 19 | 
 20 | <p align="center"><a href="https://www.buymeacoffee.com/musikuss" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-green.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a></p>
 21 | 
 22 | <p align="center"><em>Initiated by Peter Haurand and Mirko Schubert</em></p>
 23 | 
 24 | ## 🚀 Interactive Web App Available!
 25 | 
 26 | **Experience GDPR compliance assessment like never before:**
 27 | 
 28 | <p align="center">
 29 |   <a href="webapp/index.html" target="_blank">
 30 |     <img src="https://img.shields.io/badge/🚀_Interactive_GDPR_Checker-Launch_Now-brightgreen?style=for-the-badge" alt="Launch Interactive Tool" />
 31 |   </a>
 32 | </p>
 33 | 
 34 | ### ✨ Features
 35 | - **⚡ Real-time Assessment** - Interactive checklists with instant scoring
 36 | - **📊 Visual Reports** - Professional compliance reports with category breakdowns  
 37 | - **💾 Export & Share** - Save assessments as JSON or generate PDF reports
 38 | - **🌍 Multilingual** - Complete support for English and German
 39 | - **📱 Responsive Design** - Works perfectly on all devices
 40 | - **🎯 Extensible** - Ready for AI Act, accessibility, and copyright compliance
 41 | 
 42 | ---
 43 | 
 44 | ## TL;DR
 45 | 
 46 | **Quick Start**: Ready-to-use GDPR checklists for developers. <a href="https://mirkoschubert.github.io/datenschutz-checkliste/" target="_blank">**View Interactive Documentation**</a> • [🇩🇪 Deutsche Checkliste](checkliste.md) • [🇺🇸 English Cheat Sheet](cheat-sheet.md)
 47 | 
 48 | <p align="center">
 49 |   <a href="https://mirkoschubert.github.io/datenschutz-checkliste/" target="_blank">
 50 |     <img src="https://img.shields.io/badge/Interactive_Documentation-Visit_Website-blue?style=for-the-badge" alt="Visit Documentation Website" />
 51 |   </a>
 52 | </p>
 53 | 
 54 | ## 🎃 Hacktoberfest 2025
 55 | 
 56 | **We're participating in Hacktoberfest 2025!** 🎉 Help us improve data protection resources for developers worldwide.
 57 | 
 58 | - **Contribute**: Legal updates, translations, technical improvements
 59 | - **Get Started**: Check our [Contributing Guidelines](CONTRIBUTING.md)
 60 | - **Find Issues**: Look for `good-first-issue` and `hacktoberfest` labels
 61 | - **All Levels Welcome**: From beginners to experts
 62 | 
 63 | <p align="center">
 64 |   <a href="CONTRIBUTING.md">
 65 |     <img src="https://img.shields.io/badge/Join_Hacktoberfest-Contribute_Now-blueviolet?style=for-the-badge" alt="Join Hacktoberfest" />
 66 |   </a>
 67 | </p>
 68 | 
 69 | ---
 70 | 
 71 | This **Data Protection Cheat Sheet** is intended to serve as a general orientation for web designers and developers as well as, of course, for every interested website operator in order to prepare websites and commissioned works in accordance with currently valid German and European law.
 72 | 
 73 | Peter and I have taken the knowledge we have gathered over the past few months on the occasion of the GDPR and developed this list. It is still "work-in-progress" - currently I am, for example, searching for the relevant legal bases, judgments and statements / articles of lawyers. We also invite everyone to [contribute](https://github.com/mirkoschubert/datenschutz-checkliste#du-möchtest-gerne-mitwirken) via this Github repository .
 74 | 
 75 | ### Disclaimer
 76 | 
 77 | The **Data Protection Checklist** cannot address individual cases and does **not constitute legal advice**, but is merely a collection of knowledge that has been compiled from extensive research, our own experience and "best practices" of various developers and is constantly being further developed. We assume **no liability** and recommend to consult a lawyer for legal questions in any case.
 78 | 
 79 | ## How to Contribute
 80 | 
 81 | This repository thrives on community contributions! We welcome developers, legal experts, and privacy enthusiasts to help improve these resources.
 82 | 
 83 | ### Quick Contribution Options
 84 | 
 85 | * **Content**: Update legal requirements, add implementation tips, fix typos
 86 | * **Translation**: Help translate checklists to new languages
 87 | * **Technical**: Improve website, accessibility, or documentation structure
 88 | * **Issues**: Report bugs or suggest new features via [Issues](https://github.com/mirkoschubert/datenschutz-checkliste/issues)
 89 | * **Pull Requests**: Submit changes directly through [Pull Requests](https://help.github.com/articles/about-pull-requests/)
 90 | 
 91 | **New to contributing?** Check our [Contributing Guidelines](CONTRIBUTING.md) for detailed instructions.
 92 | 
 93 | ## Get in Touch
 94 | 
 95 | - **Bug Reports & Feature Requests**: [GitHub Issues](https://github.com/mirkoschubert/datenschutz-checkliste/issues)
 96 | - **Community Chat**: <a href="https://matrix.to/#/#privacy-cheat-sheet:matrix.org" target="_blank">Matrix #privacy-cheat-sheet:matrix.org</a>
 97 | - **Discussions**: [GitHub Discussions](https://github.com/mirkoschubert/datenschutz-checkliste/discussions)
 98 | - **Support the Project**: <a href="https://www.buymeacoffee.com/musikuss" target="_blank">Buy me a coffee</a>
 99 | 
100 | ## Contributors
101 | 
102 | <a href="https://github.com/mirkoschubert/datenschutz-checkliste/graphs/contributors">
103 |   <img src="https://contrib.rocks/image?repo=mirkoschubert/datenschutz-checkliste&anon=1" />
104 | </a>
105 | 


--------------------------------------------------------------------------------
/app/src/lib/stores/assessment.svelte.ts:
--------------------------------------------------------------------------------
  1 | import type { ChecklistItem, AssessmentResponse, Language, ComplianceLevel } from '$lib/types/gdpr';
  2 | import { gdprData, scoringConfig } from '$lib/data/gdpr-data';
  3 | 
  4 | class AssessmentState {
  5 | 	responses = $state<AssessmentResponse>({});
  6 | 	ignoredItems = $state<Set<string>>(new Set());
  7 | 	currentLang = $state<Language>('en');
  8 | 
  9 | 	constructor() {
 10 | 		if (typeof window !== 'undefined') {
 11 | 			this.loadFromStorage();
 12 | 		}
 13 | 	}
 14 | 
 15 | 	get data() {
 16 | 		return gdprData[this.currentLang];
 17 | 	}
 18 | 
 19 | 	get allItems(): ChecklistItem[] {
 20 | 		const items: ChecklistItem[] = [];
 21 | 		this.data.categories.forEach((cat) => {
 22 | 			items.push(...cat.items);
 23 | 		});
 24 | 		return items;
 25 | 	}
 26 | 
 27 | 	get totalItems(): number {
 28 | 		return this.allItems.filter((item) => !this.ignoredItems.has(item.id)).length;
 29 | 	}
 30 | 
 31 | 	get completedItems(): number {
 32 | 		return Object.keys(this.responses).filter((id) => !this.ignoredItems.has(id)).length;
 33 | 	}
 34 | 
 35 | 	get progressPercentage(): number {
 36 | 		return this.totalItems > 0 ? (this.completedItems / this.totalItems) * 100 : 0;
 37 | 	}
 38 | 
 39 | 	get currentScore(): number {
 40 | 		let score = 0;
 41 | 		this.allItems.forEach((item) => {
 42 | 			if (this.responses[item.id] && !this.ignoredItems.has(item.id)) {
 43 | 				const weight = item.required
 44 | 					? item.weight * scoringConfig.weights.required
 45 | 					: item.weight * scoringConfig.weights.optional;
 46 | 				score += weight;
 47 | 			}
 48 | 		});
 49 | 		return score;
 50 | 	}
 51 | 
 52 | 	get maxScore(): number {
 53 | 		let max = 0;
 54 | 		this.allItems.forEach((item) => {
 55 | 			if (!this.ignoredItems.has(item.id)) {
 56 | 				const weight = item.required
 57 | 					? item.weight * scoringConfig.weights.required
 58 | 					: item.weight * scoringConfig.weights.optional;
 59 | 				max += weight;
 60 | 			}
 61 | 		});
 62 | 		return max;
 63 | 	}
 64 | 
 65 | 	get scorePercentage(): number {
 66 | 		return this.maxScore > 0 ? (this.currentScore / this.maxScore) * 100 : 0;
 67 | 	}
 68 | 
 69 | 	get complianceLevel(): ComplianceLevel {
 70 | 		const score = this.scorePercentage;
 71 | 
 72 | 		if (score >= scoringConfig.thresholds.excellent) return 'excellent';
 73 | 		if (score >= scoringConfig.thresholds.good) return 'good';
 74 | 		if (score >= scoringConfig.thresholds.moderate) return 'moderate';
 75 | 		if (score >= scoringConfig.thresholds.poor) return 'poor';
 76 | 		return 'critical';
 77 | 	}
 78 | 
 79 | 	toggleItem(itemId: string) {
 80 | 		if (this.ignoredItems.has(itemId)) return;
 81 | 
 82 | 		if (this.responses[itemId]) {
 83 | 			delete this.responses[itemId];
 84 | 		} else {
 85 | 			this.responses[itemId] = true;
 86 | 		}
 87 | 
 88 | 		this.saveToStorage();
 89 | 	}
 90 | 
 91 | 	ignoreItem(itemId: string) {
 92 | 		this.ignoredItems.add(itemId);
 93 | 		delete this.responses[itemId];
 94 | 		this.saveToStorage();
 95 | 	}
 96 | 
 97 | 	unignoreItem(itemId: string) {
 98 | 		this.ignoredItems.delete(itemId);
 99 | 		this.saveToStorage();
100 | 	}
101 | 
102 | 	setLanguage(lang: Language) {
103 | 		this.currentLang = lang;
104 | 		this.saveToStorage();
105 | 	}
106 | 
107 | 	resetAssessment() {
108 | 		this.responses = {};
109 | 		this.ignoredItems = new Set();
110 | 		this.saveToStorage();
111 | 	}
112 | 
113 | 	getCategoryScores() {
114 | 		return this.data.categories.map((category) => {
115 | 			const completedCount = category.items.filter((item) => this.responses[item.id]).length;
116 | 			const totalCount = category.items.length;
117 | 			const percentage = totalCount > 0 ? (completedCount / totalCount) * 100 : 0;
118 | 
119 | 			let level: 'low' | 'medium' | 'high' = 'low';
120 | 			if (percentage >= 80) level = 'high';
121 | 			else if (percentage >= 60) level = 'medium';
122 | 
123 | 			return {
124 | 				id: category.id,
125 | 				title: category.title,
126 | 				completed: completedCount,
127 | 				total: totalCount,
128 | 				percentage: Math.round(percentage),
129 | 				level: level
130 | 			};
131 | 		});
132 | 	}
133 | 
134 | 	getRecommendations() {
135 | 		const recommendations: Array<{
136 | 			title: string;
137 | 			category: string;
138 | 			description: string;
139 | 			priority: number;
140 | 		}> = [];
141 | 
142 | 		this.data.categories.forEach((category) => {
143 | 			category.items.forEach((item) => {
144 | 				if (!this.responses[item.id] && item.required) {
145 | 					recommendations.push({
146 | 						title: item.title,
147 | 						category: category.title,
148 | 						description: item.description.substring(0, 150) + '...',
149 | 						priority: item.weight
150 | 					});
151 | 				}
152 | 			});
153 | 		});
154 | 
155 | 		// Sort by priority (weight) descending
156 | 		recommendations.sort((a, b) => b.priority - a.priority);
157 | 
158 | 		// Return top 5 recommendations
159 | 		return recommendations.slice(0, 5);
160 | 	}
161 | 
162 | 	exportData() {
163 | 		return {
164 | 			version: '1.0',
165 | 			timestamp: new Date().toISOString(),
166 | 			language: this.currentLang,
167 | 			responses: this.responses,
168 | 			ignoredItems: [...this.ignoredItems],
169 | 			scores: {
170 | 				completed: this.completedItems,
171 | 				total: this.totalItems,
172 | 				currentScore: this.currentScore,
173 | 				maxScore: this.maxScore,
174 | 				percentage: this.scorePercentage
175 | 			}
176 | 		};
177 | 	}
178 | 
179 | 	importData(data: any): boolean {
180 | 		try {
181 | 			if (data.version && data.responses) {
182 | 				this.responses = data.responses;
183 | 
184 | 				if (data.ignoredItems) {
185 | 					this.ignoredItems = new Set(data.ignoredItems);
186 | 				}
187 | 
188 | 				if (data.language) {
189 | 					this.setLanguage(data.language);
190 | 				}
191 | 
192 | 				this.saveToStorage();
193 | 				return true;
194 | 			}
195 | 		} catch (error) {
196 | 			console.error('Error importing data:', error);
197 | 		}
198 | 		return false;
199 | 	}
200 | 
201 | 	private saveToStorage() {
202 | 		if (typeof localStorage === 'undefined') return;
203 | 
204 | 		localStorage.setItem('gdpr_responses', JSON.stringify(this.responses));
205 | 		localStorage.setItem('gdpr_ignored', JSON.stringify([...this.ignoredItems]));
206 | 		localStorage.setItem('gdpr_language', this.currentLang);
207 | 	}
208 | 
209 | 	private loadFromStorage() {
210 | 		if (typeof localStorage === 'undefined') return;
211 | 
212 | 		// Load language
213 | 		const savedLang = localStorage.getItem('gdpr_language');
214 | 		if (savedLang && (savedLang === 'en' || savedLang === 'de')) {
215 | 			this.currentLang = savedLang;
216 | 		}
217 | 
218 | 		// Load responses
219 | 		const savedResponses = localStorage.getItem('gdpr_responses');
220 | 		if (savedResponses) {
221 | 			try {
222 | 				this.responses = JSON.parse(savedResponses);
223 | 			} catch (e) {
224 | 				console.error('Error loading responses:', e);
225 | 			}
226 | 		}
227 | 
228 | 		// Load ignored items
229 | 		const savedIgnored = localStorage.getItem('gdpr_ignored');
230 | 		if (savedIgnored) {
231 | 			try {
232 | 				this.ignoredItems = new Set(JSON.parse(savedIgnored));
233 | 			} catch (e) {
234 | 				console.error('Error loading ignored items:', e);
235 | 			}
236 | 		}
237 | 	}
238 | }
239 | 
240 | export const assessment = new AssessmentState();
241 | 


--------------------------------------------------------------------------------
/webapp/README.md:
--------------------------------------------------------------------------------
  1 | # GDPR Compliance Checker - Interactive Web App
  2 | 
  3 | This interactive web application provides a comprehensive GDPR compliance assessment tool for web developers and designers, inspired by digital-defense.io.
  4 | 
  5 | ## Features
  6 | 
  7 | ### 🎯 Interactive Assessment
  8 | - **Real-time scoring**: See your compliance score update as you complete items
  9 | - **Category-based organization**: Security, Hosting, External Services, Content & Features, Legal Documents
 10 | - **Detailed explanations**: Each item includes legal basis, implementation tips, and best practices
 11 | - **Progress tracking**: Visual progress bar and completion statistics
 12 | 
 13 | ### 📊 Compliance Overview
 14 | - **Visual scoring system**: Circular progress indicator with color-coded compliance levels
 15 | - **Category breakdown**: See performance in each compliance area
 16 | - **Priority recommendations**: AI-powered suggestions for improvement
 17 | - **Compliance rating**: From "Critical Issues" to "Excellent Compliance"
 18 | 
 19 | ### 💾 Export & Import
 20 | - **JSON export/import**: Save and share assessments
 21 | - **PDF reports**: Generate professional compliance reports
 22 | - **Local storage**: Automatic progress saving
 23 | - **Data portability**: Easy backup and restore
 24 | 
 25 | ### 🌐 Multilingual Support
 26 | - **English and German**: Complete translations
 27 | - **Easy language switching**: Toggle between languages instantly
 28 | - **Localized legal references**: Country-specific legal basis
 29 | 
 30 | ### 📱 Modern UI/UX
 31 | - **Responsive design**: Works on desktop, tablet, and mobile
 32 | - **Accessibility**: WCAG compliant with keyboard navigation
 33 | - **Progressive Web App**: Can be installed and used offline
 34 | - **Modern design**: Clean, professional interface
 35 | 
 36 | ## Technical Architecture
 37 | 
 38 | ### Frontend Stack
 39 | - **Pure JavaScript**: No framework dependencies
 40 | - **Modern CSS**: CSS Grid, Flexbox, CSS Variables
 41 | - **Web Standards**: Progressive enhancement, semantic HTML
 42 | - **Responsive Design**: Mobile-first approach
 43 | 
 44 | ### File Structure
 45 | ```
 46 | webapp/
 47 | ├── index.html              # Main HTML template
 48 | ├── styles/
 49 | │   └── main.css           # Complete CSS styling
 50 | └── js/
 51 |     ├── data.js            # GDPR checklist data and scoring
 52 |     ├── assessment.js      # Assessment logic and UI
 53 |     ├── overview.js        # Results and reporting
 54 |     ├── export.js          # Import/export functionality
 55 |     └── main.js            # Application coordination
 56 | ```
 57 | 
 58 | ### Key Classes
 59 | 
 60 | #### `GDPRAssessment`
 61 | - Manages checklist state and user responses
 62 | - Handles category expansion/collapse
 63 | - Real-time progress calculation
 64 | - Local storage integration
 65 | 
 66 | #### `OverviewManager`
 67 | - Generates compliance reports
 68 | - Calculates category scores
 69 | - Provides recommendations
 70 | - HTML report generation
 71 | 
 72 | #### `ExportManager`
 73 | - JSON export/import
 74 | - PDF report generation
 75 | - Data validation
 76 | - Notification system
 77 | 
 78 | #### `GDPRApp`
 79 | - Application initialization
 80 | - Event coordination
 81 | - Navigation management
 82 | - Global error handling
 83 | 
 84 | ## Compliance Scoring System
 85 | 
 86 | ### Scoring Algorithm
 87 | ```javascript
 88 | // Weighted scoring based on item importance
 89 | score = Σ(item_weight × completion_status × type_multiplier)
 90 | 
 91 | // Type multipliers
 92 | required_items: 1.0
 93 | optional_items: 0.5
 94 | ```
 95 | 
 96 | ### Compliance Levels
 97 | - **Excellent** (90-100%): Outstanding compliance across all areas
 98 | - **Good** (75-89%): Strong compliance with minor improvements needed
 99 | - **Moderate** (60-74%): Adequate compliance but several areas need attention
100 | - **Poor** (40-59%): Significant gaps requiring immediate action
101 | - **Critical** (0-39%): Major compliance issues needing urgent resolution
102 | 
103 | ## Data Structure
104 | 
105 | ### Assessment Item Format
106 | ```javascript
107 | {
108 |     id: "unique-identifier",
109 |     title: "Human-readable title",
110 |     description: "Detailed explanation",
111 |     required: true/false,
112 |     weight: 1-10,
113 |     legalBasis: ["Art. 32 GDPR", "§64 BDSG"],
114 |     implementation: ["Step 1", "Step 2", ...]
115 | }
116 | ```
117 | 
118 | ### Export Format
119 | ```javascript
120 | {
121 |     version: "1.0",
122 |     timestamp: "2025-01-01T00:00:00.000Z",
123 |     language: "en|de",
124 |     responses: { item_id: true/false },
125 |     scores: {
126 |         completed: number,
127 |         total: number,
128 |         currentScore: number,
129 |         maxScore: number,
130 |         percentage: number
131 |     }
132 | }
133 | ```
134 | 
135 | ## Installation & Usage
136 | 
137 | ### Quick Start
138 | 1. Clone the repository
139 | 2. Open `webapp/index.html` in a web browser
140 | 3. Start your assessment!
141 | 
142 | ### Local Development
143 | ```bash
144 | # Serve locally (optional)
145 | cd webapp
146 | python -m http.server 8000
147 | # or
148 | npx serve .
149 | ```
150 | 
151 | ### Integration Options
152 | 
153 | #### Embed in Existing Site
154 | ```html
155 | <iframe src="path/to/webapp/index.html" 
156 |         width="100%" 
157 |         height="800px"
158 |         frameborder="0">
159 | </iframe>
160 | ```
161 | 
162 | #### Custom Styling
163 | The app uses CSS variables for easy customization:
164 | 
165 | ```css
166 | :root {
167 |     --primary-color: #your-brand-color;
168 |     --accent-color: #your-accent-color;
169 |     /* ... other variables */
170 | }
171 | ```
172 | 
173 | ## Extensibility
174 | 
175 | ### Adding New Compliance Areas
176 | The modular design allows easy extension for other regulations:
177 | 
178 | ```javascript
179 | // Add to gdprData structure
180 | const aiActData = {
181 |     categories: [
182 |         {
183 |             id: "ai-risk-assessment",
184 |             title: "AI Risk Assessment",
185 |             items: [/* assessment items */]
186 |         }
187 |     ]
188 | };
189 | ```
190 | 
191 | ### Future Enhancements
192 | - **AI Act compliance**: European AI regulation checklist
193 | - **Accessibility (WCAG)**: Web accessibility guidelines
194 | - **Copyright compliance**: Digital media usage rights
195 | - **Cookie consent**: Advanced cookie management
196 | - **Multi-site assessment**: Manage multiple website assessments
197 | 
198 | ## Browser Support
199 | 
200 | - **Modern browsers**: Chrome 80+, Firefox 75+, Safari 13+, Edge 80+
201 | - **Progressive enhancement**: Basic functionality in older browsers
202 | - **Offline capability**: Service worker for offline usage
203 | - **Mobile optimized**: Touch-friendly interface
204 | 
205 | ## Contributing
206 | 
207 | This project is part of **Hacktoberfest 2025**! We welcome contributions:
208 | 
209 | 1. **Fork the repository**
210 | 2. **Create feature branch**: `git checkout -b feature/new-feature`
211 | 3. **Make changes**: Follow the existing code style
212 | 4. **Test thoroughly**: Ensure responsiveness and functionality
213 | 5. **Submit PR**: Include detailed description
214 | 
215 | ### Contribution Areas
216 | - Legal content updates
217 | - Translation improvements
218 | - UI/UX enhancements
219 | - New compliance frameworks
220 | - Accessibility improvements
221 | - Performance optimizations
222 | 
223 | ## License
224 | 
225 | MIT License - see LICENSE file for details.
226 | 
227 | ## Disclaimer
228 | 
229 | This tool provides general guidance and does not constitute legal advice. Always consult qualified legal professionals for compliance matters.
230 | 
231 | ---
232 | 
233 | **Created for Hacktoberfest 2025** 🎃  
234 | Transforming static checklists into interactive compliance tools!


--------------------------------------------------------------------------------
/app/src/lib/components/assessment/ChecklistItem.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	import type { ChecklistItem as ChecklistItemType } from '$lib/types/gdpr';
  3 | 	import { assessment } from '$lib/stores/assessment.svelte';
  4 | 
  5 | 	interface Props {
  6 | 		item: ChecklistItemType;
  7 | 	}
  8 | 
  9 | 	let { item }: Props = $props();
 10 | 
 11 | 	let isCompleted = $derived(!!assessment.responses[item.id]);
 12 | 	let isIgnored = $derived(assessment.ignoredItems.has(item.id));
 13 | 
 14 | 	function toggleItem() {
 15 | 		assessment.toggleItem(item.id);
 16 | 	}
 17 | 
 18 | 	function ignoreItem(e: Event) {
 19 | 		e.stopPropagation();
 20 | 		if (confirm('Are you sure you want to ignore this item?')) {
 21 | 			assessment.ignoreItem(item.id);
 22 | 		}
 23 | 	}
 24 | 
 25 | 	function unignoreItem(e: Event) {
 26 | 		e.stopPropagation();
 27 | 		assessment.unignoreItem(item.id);
 28 | 	}
 29 | </script>
 30 | 
 31 | <div
 32 | 	class="checklist-item {isCompleted ? 'completed' : ''} {isIgnored ? 'ignored' : ''}"
 33 | 	onclick={toggleItem}
 34 | 	onkeydown={(e) => {
 35 | 		if (e.key === 'Enter' || e.key === ' ') {
 36 | 			e.preventDefault();
 37 | 			toggleItem();
 38 | 		}
 39 | 	}}
 40 | 	role="checkbox"
 41 | 	aria-checked={isCompleted}
 42 | 	tabindex="0"
 43 | >
 44 | 	<div class="item-header">
 45 | 		<div class="checkbox">
 46 | 			{#if isCompleted}
 47 | 				<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
 48 | 					<path
 49 | 						d="M13.3333 4L6 11.3333L2.66667 8"
 50 | 						stroke="currentColor"
 51 | 						stroke-width="2"
 52 | 						stroke-linecap="round"
 53 | 						stroke-linejoin="round"
 54 | 					/>
 55 | 				</svg>
 56 | 			{/if}
 57 | 		</div>
 58 | 		<div class="item-content">
 59 | 			<div class="item-title-row">
 60 | 				<h4 class="item-title">
 61 | 					{item.title}
 62 | 					{#if item.required}
 63 | 						<span class="required-badge">Required</span>
 64 | 					{/if}
 65 | 				</h4>
 66 | 				{#if !isIgnored}
 67 | 					<button class="ignore-btn" onclick={ignoreItem} title="Ignore this item">
 68 | 						<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
 69 | 							<path
 70 | 								d="M2 2L14 14M14 2L2 14"
 71 | 								stroke="currentColor"
 72 | 								stroke-width="2"
 73 | 								stroke-linecap="round"
 74 | 							/>
 75 | 						</svg>
 76 | 					</button>
 77 | 				{:else}
 78 | 					<button class="unignore-btn" onclick={unignoreItem} title="Unignore this item">
 79 | 						<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
 80 | 							<path
 81 | 								d="M8 2V14M2 8H14"
 82 | 								stroke="currentColor"
 83 | 								stroke-width="2"
 84 | 								stroke-linecap="round"
 85 | 							/>
 86 | 						</svg>
 87 | 					</button>
 88 | 				{/if}
 89 | 			</div>
 90 | 			<p class="item-description">{item.description}</p>
 91 | 			{#if item.explanation && item.explanation.length > 0}
 92 | 				<details class="item-details">
 93 | 					<summary>
 94 | 						<svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="details-icon">
 95 | 							<path
 96 | 								d="M4 6l4 4 4-4"
 97 | 								stroke="currentColor"
 98 | 								stroke-width="2"
 99 | 								stroke-linecap="round"
100 | 								stroke-linejoin="round"
101 | 							/>
102 | 						</svg>
103 | 						Detailed Information
104 | 					</summary>
105 | 					<div class="details-content">
106 | 						<ul class="explanation-list">
107 | 							{#each item.explanation as point}
108 | 								<li>{point}</li>
109 | 							{/each}
110 | 						</ul>
111 | 						
112 | 						{#if item.legalBasis && item.legalBasis.length > 0}
113 | 							<div class="legal-info">
114 | 								<strong>Legal Basis:</strong>
115 | 								<ul class="legal-list">
116 | 									{#each item.legalBasis as basis}
117 | 										<li>{basis}</li>
118 | 									{/each}
119 | 								</ul>
120 | 							</div>
121 | 						{/if}
122 | 						
123 | 						{#if item.legitimationReason && item.legitimationReason.length > 0}
124 | 							<div class="legal-info">
125 | 								<strong>Legitimation:</strong>
126 | 								<ul class="legal-list">
127 | 									{#each item.legitimationReason as reason}
128 | 										<li>{reason}</li>
129 | 									{/each}
130 | 								</ul>
131 | 							</div>
132 | 						{/if}
133 | 						
134 | 						{#if item.implementation && item.implementation.length > 0}
135 | 							<div class="implementation-info">
136 | 								<strong>Implementation Tips:</strong>
137 | 								<ul class="implementation-list">
138 | 									{#each item.implementation as tip}
139 | 										<li>{tip}</li>
140 | 									{/each}
141 | 								</ul>
142 | 							</div>
143 | 						{/if}
144 | 					</div>
145 | 				</details>
146 | 			{/if}
147 | 		</div>
148 | 	</div>
149 | </div>
150 | 
151 | <style>
152 | 	.checklist-item {
153 | 		background: var(--color-card-bg);
154 | 		border: 2px solid var(--color-border);
155 | 		border-radius: 0.75rem;
156 | 		padding: 1rem;
157 | 		cursor: pointer;
158 | 		transition: all 0.2s ease;
159 | 	}
160 | 
161 | 	.checklist-item:hover {
162 | 		border-color: var(--color-primary);
163 | 		box-shadow: var(--shadow-sm);
164 | 		transform: translateX(4px);
165 | 	}
166 | 
167 | 	.checklist-item.completed {
168 | 		border-color: var(--color-success);
169 | 		background: var(--color-success-light);
170 | 	}
171 | 
172 | 	.checklist-item.ignored {
173 | 		opacity: 0.5;
174 | 		cursor: default;
175 | 	}
176 | 
177 | 	.checklist-item.ignored:hover {
178 | 		transform: none;
179 | 	}
180 | 
181 | 	.item-header {
182 | 		display: flex;
183 | 		gap: 1rem;
184 | 		align-items: flex-start;
185 | 	}
186 | 
187 | 	.checkbox {
188 | 		flex-shrink: 0;
189 | 		width: 1.5rem;
190 | 		height: 1.5rem;
191 | 		border: 2px solid var(--color-border);
192 | 		border-radius: 0.375rem;
193 | 		display: flex;
194 | 		align-items: center;
195 | 		justify-content: center;
196 | 		background: var(--color-bg);
197 | 		transition: all 0.2s ease;
198 | 	}
199 | 
200 | 	.completed .checkbox {
201 | 		background: var(--color-success);
202 | 		border-color: var(--color-success);
203 | 		color: white;
204 | 	}
205 | 
206 | 	.item-content {
207 | 		flex: 1;
208 | 		min-width: 0;
209 | 	}
210 | 
211 | 	.item-title-row {
212 | 		display: flex;
213 | 		align-items: center;
214 | 		justify-content: space-between;
215 | 		gap: 0.5rem;
216 | 	}
217 | 
218 | 	.item-title {
219 | 		margin: 0;
220 | 		font-size: 1rem;
221 | 		font-weight: 600;
222 | 		color: var(--color-text);
223 | 		display: flex;
224 | 		align-items: center;
225 | 		gap: 0.5rem;
226 | 		flex: 1;
227 | 	}
228 | 
229 | 	.required-badge {
230 | 		display: inline-block;
231 | 		background: var(--color-danger);
232 | 		color: white;
233 | 		padding: 0.125rem 0.5rem;
234 | 		border-radius: 0.25rem;
235 | 		font-size: 0.75rem;
236 | 		font-weight: 500;
237 | 	}
238 | 
239 | 	.item-description {
240 | 		margin: 0.5rem 0 0 0;
241 | 		font-size: 0.875rem;
242 | 		color: var(--color-text-secondary);
243 | 		line-height: 1.5;
244 | 	}
245 | 
246 | 	.item-details {
247 | 		margin-top: 0.75rem;
248 | 		border-top: 1px solid var(--color-border);
249 | 		padding-top: 0.75rem;
250 | 	}
251 | 
252 | 	.item-details summary {
253 | 		color: var(--color-primary);
254 | 		cursor: pointer;
255 | 		font-size: 0.875rem;
256 | 		font-weight: 600;
257 | 		user-select: none;
258 | 		display: flex;
259 | 		align-items: center;
260 | 		gap: 0.5rem;
261 | 		padding: 0.5rem;
262 | 		border-radius: 0.375rem;
263 | 		transition: all 0.2s ease;
264 | 	}
265 | 
266 | 	.item-details summary:hover {
267 | 		background: var(--color-bg-secondary);
268 | 	}
269 | 
270 | 	.item-details[open] summary {
271 | 		margin-bottom: 0.75rem;
272 | 	}
273 | 
274 | 	.details-icon {
275 | 		transition: transform 0.2s ease;
276 | 	}
277 | 
278 | 	.item-details[open] .details-icon {
279 | 		transform: rotate(180deg);
280 | 	}
281 | 
282 | 	.details-content {
283 | 		padding: 0.5rem 1rem;
284 | 		background: var(--color-bg-secondary);
285 | 		border-radius: 0.5rem;
286 | 		animation: slideDown 0.3s ease;
287 | 	}
288 | 
289 | 	@keyframes slideDown {
290 | 		from {
291 | 			opacity: 0;
292 | 			transform: translateY(-10px);
293 | 		}
294 | 		to {
295 | 			opacity: 1;
296 | 			transform: translateY(0);
297 | 		}
298 | 	}
299 | 
300 | 	.explanation-list,
301 | 	.legal-list,
302 | 	.implementation-list {
303 | 		margin: 0.5rem 0;
304 | 		padding-left: 1.5rem;
305 | 		list-style: disc;
306 | 	}
307 | 
308 | 	.explanation-list li,
309 | 	.legal-list li,
310 | 	.implementation-list li {
311 | 		margin-bottom: 0.5rem;
312 | 		font-size: 0.875rem;
313 | 		color: var(--color-text-secondary);
314 | 		line-height: 1.6;
315 | 	}
316 | 
317 | 	.legal-info,
318 | 	.implementation-info {
319 | 		margin-top: 1rem;
320 | 		padding-top: 0.75rem;
321 | 		border-top: 1px solid var(--color-border);
322 | 	}
323 | 
324 | 	.legal-info strong,
325 | 	.implementation-info strong {
326 | 		display: block;
327 | 		color: var(--color-text);
328 | 		font-size: 0.875rem;
329 | 		margin-bottom: 0.5rem;
330 | 	}
331 | 
332 | 	.legal-list {
333 | 		list-style: none;
334 | 		padding-left: 1rem;
335 | 	}
336 | 
337 | 	.legal-list li {
338 | 		position: relative;
339 | 		padding-left: 1rem;
340 | 	}
341 | 
342 | 	.legal-list li::before {
343 | 		content: '§';
344 | 		position: absolute;
345 | 		left: 0;
346 | 		color: var(--color-primary);
347 | 		font-weight: 600;
348 | 	}
349 | 
350 | 	.implementation-list {
351 | 		list-style: none;
352 | 		padding-left: 1rem;
353 | 	}
354 | 
355 | 	.implementation-list li {
356 | 		position: relative;
357 | 		padding-left: 1.5rem;
358 | 	}
359 | 
360 | 	.implementation-list li::before {
361 | 		content: '→';
362 | 		position: absolute;
363 | 		left: 0;
364 | 		color: var(--color-success);
365 | 		font-weight: 600;
366 | 	}
367 | 
368 | 	.ignore-btn,
369 | 	.unignore-btn {
370 | 		background: none;
371 | 		border: none;
372 | 		padding: 0.25rem;
373 | 		cursor: pointer;
374 | 		color: var(--color-text-secondary);
375 | 		display: flex;
376 | 		align-items: center;
377 | 		border-radius: 0.25rem;
378 | 		transition: all 0.2s ease;
379 | 		flex-shrink: 0;
380 | 	}
381 | 
382 | 	.ignore-btn:hover {
383 | 		background: var(--color-danger-light);
384 | 		color: var(--color-danger);
385 | 	}
386 | 
387 | 	.unignore-btn:hover {
388 | 		background: var(--color-success-light);
389 | 		color: var(--color-success);
390 | 	}
391 | </style>
392 | 


--------------------------------------------------------------------------------
/webapp/js/overview.js:
--------------------------------------------------------------------------------
  1 | // Overview functionality for displaying assessment results
  2 | class OverviewManager {
  3 |     constructor(assessmentManager) {
  4 |         this.assessmentManager = assessmentManager;
  5 |         this.init();
  6 |     }
  7 | 
  8 |     init() {
  9 |         this.updateOverview();
 10 |     }
 11 | 
 12 |     updateOverview() {
 13 |         this.updateScoreCard();
 14 |         this.updateCategoryBreakdown();
 15 |         this.updateRecommendations();
 16 |     }
 17 | 
 18 |     updateScoreCard() {
 19 |         const overallScoreElement = document.getElementById('overallScore');
 20 |         const scoreTitleElement = document.getElementById('scoreTitle');
 21 |         const scoreDescriptionElement = document.getElementById('scoreDescription');
 22 |         const scoreCircleElement = document.getElementById('scoreCircle');
 23 | 
 24 |         if (!this.assessmentManager || !overallScoreElement) return;
 25 | 
 26 |         const scorePercentage = this.assessmentManager.maxScore > 0 
 27 |             ? (this.assessmentManager.currentScore / this.assessmentManager.maxScore) * 100 
 28 |             : 0;
 29 |         
 30 |         const roundedScore = Math.round(scorePercentage);
 31 |         const complianceLevel = this.assessmentManager.getComplianceLevel();
 32 |         const labels = scoringConfig.labels[this.assessmentManager.currentLang];
 33 |         const descriptions = scoringConfig.descriptions[this.assessmentManager.currentLang];
 34 | 
 35 |         // Update score number
 36 |         overallScoreElement.textContent = roundedScore;
 37 | 
 38 |         // Update title and description
 39 |         if (scoreTitleElement && scoreDescriptionElement) {
 40 |             scoreTitleElement.textContent = labels[complianceLevel] || labels.critical;
 41 |             scoreDescriptionElement.textContent = descriptions[complianceLevel] || descriptions.critical;
 42 |         }
 43 | 
 44 |         // Update progress circle
 45 |         if (scoreCircleElement) {
 46 |             const circumference = 2 * Math.PI * 45; // radius is 45
 47 |             const offset = circumference - (scorePercentage / 100) * circumference;
 48 |             scoreCircleElement.style.strokeDashoffset = offset;
 49 |             
 50 |             // Update color based on score
 51 |             let color = '#e74c3c'; // red for critical
 52 |             if (scorePercentage >= scoringConfig.thresholds.excellent) color = '#27ae60'; // green
 53 |             else if (scorePercentage >= scoringConfig.thresholds.good) color = '#42b983'; // teal
 54 |             else if (scorePercentage >= scoringConfig.thresholds.moderate) color = '#f39c12'; // orange
 55 |             else if (scorePercentage >= scoringConfig.thresholds.poor) color = '#e67e22'; // dark orange
 56 |             
 57 |             scoreCircleElement.style.stroke = color;
 58 |         }
 59 |     }
 60 | 
 61 |     updateCategoryBreakdown() {
 62 |         const breakdownList = document.getElementById('breakdownList');
 63 |         if (!breakdownList || !this.assessmentManager) return;
 64 | 
 65 |         const categoryScores = this.assessmentManager.getCategoryScores();
 66 |         
 67 |         breakdownList.innerHTML = categoryScores.map(category => `
 68 |             <div class="breakdown-item">
 69 |                 <div class="breakdown-info">
 70 |                     <div class="breakdown-name">${category.title}</div>
 71 |                     <div class="breakdown-details">${category.completed}/${category.total} items completed</div>
 72 |                 </div>
 73 |                 <div class="breakdown-score ${category.level}">
 74 |                     ${category.percentage}%
 75 |                 </div>
 76 |             </div>
 77 |         `).join('');
 78 |     }
 79 | 
 80 |     updateRecommendations() {
 81 |         const recommendationsList = document.getElementById('recommendationsList');
 82 |         if (!recommendationsList || !this.assessmentManager) return;
 83 | 
 84 |         const recommendations = this.assessmentManager.getRecommendations();
 85 |         
 86 |         if (recommendations.length === 0) {
 87 |             recommendationsList.innerHTML = `
 88 |                 <div class="recommendation-item">
 89 |                     <div class="recommendation-title">Great job!</div>
 90 |                     <div class="recommendation-description">
 91 |                         You've completed all required GDPR compliance items. Consider reviewing optional items to further enhance your compliance.
 92 |                     </div>
 93 |                 </div>
 94 |             `;
 95 |             return;
 96 |         }
 97 | 
 98 |         recommendationsList.innerHTML = recommendations.map(recommendation => `
 99 |             <div class="recommendation-item">
100 |                 <div class="recommendation-title">
101 |                     ${recommendation.title}
102 |                     <span class="recommendation-category">(${recommendation.category})</span>
103 |                 </div>
104 |                 <div class="recommendation-description">${recommendation.description}</div>
105 |                 <div class="recommendation-priority">Priority: ${recommendation.priority}/10</div>
106 |             </div>
107 |         `).join('');
108 |     }
109 | 
110 |     generateComplianceReport() {
111 |         if (!this.assessmentManager) return null;
112 | 
113 |         const scorePercentage = this.assessmentManager.maxScore > 0 
114 |             ? (this.assessmentManager.currentScore / this.assessmentManager.maxScore) * 100 
115 |             : 0;
116 | 
117 |         const complianceLevel = this.assessmentManager.getComplianceLevel();
118 |         const categoryScores = this.assessmentManager.getCategoryScores();
119 |         const recommendations = this.assessmentManager.getRecommendations();
120 |         const labels = scoringConfig.labels[this.assessmentManager.currentLang];
121 |         const descriptions = scoringConfig.descriptions[this.assessmentManager.currentLang];
122 | 
123 |         return {
124 |             timestamp: new Date().toISOString(),
125 |             language: this.assessmentManager.currentLang,
126 |             overallScore: {
127 |                 percentage: Math.round(scorePercentage),
128 |                 level: complianceLevel,
129 |                 title: labels[complianceLevel],
130 |                 description: descriptions[complianceLevel]
131 |             },
132 |             summary: {
133 |                 totalItems: this.assessmentManager.totalItems,
134 |                 completedItems: this.assessmentManager.completedItems,
135 |                 currentScore: this.assessmentManager.currentScore,
136 |                 maxScore: this.assessmentManager.maxScore
137 |             },
138 |             categories: categoryScores,
139 |             recommendations: recommendations,
140 |             detailedResponses: this.assessmentManager.responses
141 |         };
142 |     }
143 | 
144 |     generateHTMLReport() {
145 |         const report = this.generateComplianceReport();
146 |         if (!report) return '';
147 | 
148 |         const html = `
149 |         <!DOCTYPE html>
150 |         <html lang="${report.language}">
151 |         <head>
152 |             <meta charset="UTF-8">
153 |             <meta name="viewport" content="width=device-width, initial-scale=1.0">
154 |             <title>GDPR Compliance Report</title>
155 |             <style>
156 |                 body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #333; max-width: 800px; margin: 0 auto; padding: 20px; }
157 |                 .header { background: linear-gradient(135deg, #2c3e50, #34495e); color: white; padding: 30px; border-radius: 10px; margin-bottom: 30px; }
158 |                 .score-section { background: #f8f9fa; padding: 25px; border-radius: 10px; margin: 20px 0; text-align: center; }
159 |                 .score-number { font-size: 3rem; font-weight: bold; color: #42b983; }
160 |                 .category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 20px 0; }
161 |                 .category-card { background: white; border: 1px solid #ddd; border-radius: 8px; padding: 20px; }
162 |                 .category-score { display: inline-block; padding: 5px 15px; border-radius: 20px; color: white; font-weight: bold; }
163 |                 .high { background: #27ae60; }
164 |                 .medium { background: #f39c12; }
165 |                 .low { background: #e74c3c; }
166 |                 .recommendations { background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 8px; padding: 20px; margin: 20px 0; }
167 |                 .recommendation { margin: 10px 0; padding: 10px; background: white; border-radius: 5px; border-left: 4px solid #f39c12; }
168 |                 .footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid #ddd; font-size: 0.9rem; color: #666; }
169 |             </style>
170 |         </head>
171 |         <body>
172 |             <div class="header">
173 |                 <h1>GDPR Compliance Report</h1>
174 |                 <p>Generated on ${new Date(report.timestamp).toLocaleString()}</p>
175 |                 <p><strong>Disclaimer:</strong> This report provides general guidance and does not constitute legal advice. Always consult with a qualified lawyer for legal matters.</p>
176 |             </div>
177 | 
178 |             <div class="score-section">
179 |                 <div class="score-number">${report.overallScore.percentage}</div>
180 |                 <h2>${report.overallScore.title}</h2>
181 |                 <p>${report.overallScore.description}</p>
182 |                 <p><strong>${report.summary.completedItems}/${report.summary.totalItems}</strong> compliance items completed</p>
183 |             </div>
184 | 
185 |             <section>
186 |                 <h2>Category Breakdown</h2>
187 |                 <div class="category-grid">
188 |                     ${report.categories.map(category => `
189 |                         <div class="category-card">
190 |                             <h3>${category.title}</h3>
191 |                             <div class="category-score ${category.level}">${category.percentage}%</div>
192 |                             <p>${category.completed}/${category.total} items completed</p>
193 |                         </div>
194 |                     `).join('')}
195 |                 </div>
196 |             </section>
197 | 
198 |             ${report.recommendations.length > 0 ? `
199 |             <section class="recommendations">
200 |                 <h2>Priority Recommendations</h2>
201 |                 ${report.recommendations.map(rec => `
202 |                     <div class="recommendation">
203 |                         <h4>${rec.title}</h4>
204 |                         <p><strong>Category:</strong> ${rec.category}</p>
205 |                         <p>${rec.description}</p>
206 |                         <p><strong>Priority:</strong> ${rec.priority}/10</p>
207 |                     </div>
208 |                 `).join('')}
209 |             </section>
210 |             ` : `
211 |             <section class="recommendations">
212 |                 <h2>Congratulations!</h2>
213 |                 <p>You have completed all required GDPR compliance items. Consider reviewing optional items to further enhance your compliance.</p>
214 |             </section>
215 |             `}
216 | 
217 |             <div class="footer">
218 |                 <p><strong>About this Report:</strong> This GDPR compliance assessment was generated using the open-source GDPR Compliance Checker tool. The assessment is based on current understanding of GDPR requirements but should not replace professional legal advice.</p>
219 |                 <p><strong>Next Steps:</strong> Review the recommendations above and consider implementing the suggested improvements. Regularly review and update your compliance measures as regulations and your website evolve.</p>
220 |             </div>
221 |         </body>
222 |         </html>
223 |         `;
224 | 
225 |         return html;
226 |     }
227 | }
228 | 
229 | // Export for use in other modules
230 | if (typeof module !== 'undefined' && module.exports) {
231 |     module.exports = OverviewManager;
232 | }


--------------------------------------------------------------------------------
/app/src/routes/+page.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	import { assessment } from '$lib/stores/assessment.svelte';
  3 | 	import Header from '$lib/components/layout/Header.svelte';
  4 | 	import Footer from '$lib/components/layout/Footer.svelte';
  5 | 	import ProgressBar from '$lib/components/assessment/ProgressBar.svelte';
  6 | 	import CategoryCard from '$lib/components/assessment/CategoryCard.svelte';
  7 | 	import ExportModal from '$lib/components/export/ExportModal.svelte';
  8 | 	import Button from '$lib/components/ui/Button.svelte';
  9 | 	import Card from '$lib/components/ui/Card.svelte';
 10 | 
 11 | 	let showExportModal = $state(false);
 12 | 	let showRecommendations = $state(false);
 13 | 
 14 | 	function handleReset() {
 15 | 		if (
 16 | 			confirm(
 17 | 				'Are you sure you want to reset all responses? This action cannot be undone.'
 18 | 			)
 19 | 		) {
 20 | 			assessment.resetAssessment();
 21 | 		}
 22 | 	}
 23 | 
 24 | 	let categoryScores = $derived(assessment.getCategoryScores());
 25 | 	let recommendations = $derived(assessment.getRecommendations());
 26 | </script>
 27 | 
 28 | <svelte:head>
 29 | 	<title>GDPR Compliance Checker</title>
 30 | 	<meta
 31 | 		name="description"
 32 | 		content="Comprehensive GDPR compliance assessment tool for organizations"
 33 | 	/>
 34 | </svelte:head>
 35 | 
 36 | <div class="app">
 37 | 	<Header />
 38 | 
 39 | 	<main class="main">
 40 | 		<div class="container">
 41 | 			<!-- Hero Section -->
 42 | 			<section class="hero">
 43 | 				<h1 class="hero-title">GDPR Compliance Assessment</h1>
 44 | 				<p class="hero-subtitle">
 45 | 					Evaluate your organization's data privacy practices and improve GDPR compliance
 46 | 				</p>
 47 | 			</section>
 48 | 
 49 | 			<!-- Progress Section -->
 50 | 			<section class="progress-section">
 51 | 				<ProgressBar showDetails={true} />
 52 | 			</section>
 53 | 
 54 | 			<!-- Actions Section -->
 55 | 			<section class="actions-section">
 56 | 				<Button variant="primary" onclick={() => (showExportModal = true)}>
 57 | 					<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
 58 | 						<path
 59 | 							d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
 60 | 							stroke="currentColor"
 61 | 							stroke-width="2"
 62 | 							stroke-linecap="round"
 63 | 							stroke-linejoin="round"
 64 | 						/>
 65 | 					</svg>
 66 | 					Export & Import
 67 | 				</Button>
 68 | 
 69 | 				<Button variant="danger" onclick={handleReset}>
 70 | 					<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
 71 | 						<path
 72 | 							d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
 73 | 							stroke="currentColor"
 74 | 							stroke-width="2"
 75 | 							stroke-linecap="round"
 76 | 							stroke-linejoin="round"
 77 | 						/>
 78 | 					</svg>
 79 | 					Reset Assessment
 80 | 				</Button>
 81 | 			</section>
 82 | 
 83 | 			<!-- Recommendations Section -->
 84 | 			{#if recommendations.length > 0}
 85 | 				<section class="recommendations-section">
 86 | 					<Card padding="lg">
 87 | 						<div
 88 | 							class="recommendations-header"
 89 | 							role="button"
 90 | 							tabindex="0"
 91 | 							onclick={() => (showRecommendations = !showRecommendations)}
 92 | 							onkeydown={(e) => {
 93 | 								if (e.key === 'Enter' || e.key === ' ') {
 94 | 									e.preventDefault();
 95 | 									showRecommendations = !showRecommendations;
 96 | 								}
 97 | 							}}
 98 | 						>
 99 | 							<h2 class="section-title">
100 | 								<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
101 | 									<path
102 | 										d="M13 10V3L4 14h7v7l9-11h-7z"
103 | 										stroke="currentColor"
104 | 										stroke-width="2"
105 | 										stroke-linecap="round"
106 | 										stroke-linejoin="round"
107 | 									/>
108 | 								</svg>
109 | 								Priority Recommendations
110 | 								<span class="rec-count">({recommendations.length})</span>
111 | 							</h2>
112 | 							<button
113 | 								class="expand-toggle"
114 | 								type="button"
115 | 								aria-label={showRecommendations ? 'Collapse recommendations' : 'Expand recommendations'}
116 | 							>
117 | 								<svg
118 | 									width="20"
119 | 									height="20"
120 | 									viewBox="0 0 20 20"
121 | 									fill="none"
122 | 									style="transform: rotate({showRecommendations ? 180 : 0}deg)"
123 | 								>
124 | 									<path
125 | 										d="M5 7.5l5 5 5-5"
126 | 										stroke="currentColor"
127 | 										stroke-width="2"
128 | 										stroke-linecap="round"
129 | 										stroke-linejoin="round"
130 | 									/>
131 | 								</svg>
132 | 							</button>
133 | 						</div>
134 | 						
135 | 						{#if showRecommendations}
136 | 							<div class="recommendations-content">
137 | 								<p class="section-description">
138 | 									Focus on these required items to improve your compliance score
139 | 								</p>
140 | 
141 | 								<div class="recommendations-grid">
142 | 									{#each recommendations as rec}
143 | 										<div class="recommendation-card">
144 | 											<div class="rec-header">
145 | 												<h4 class="rec-title">{rec.title}</h4>
146 | 												<span class="rec-category">{rec.category}</span>
147 | 											</div>
148 | 											<p class="rec-description">{rec.description}</p>
149 | 										</div>
150 | 									{/each}
151 | 								</div>
152 | 							</div>
153 | 						{/if}
154 | 					</Card>
155 | 				</section>
156 | 			{/if}
157 | 
158 | 			<!-- Category Overview -->
159 | 			<section class="overview-section">
160 | 				<h2 class="section-title">Category Overview</h2>
161 | 				<div class="category-grid">
162 | 					{#each categoryScores as score}
163 | 						<Card padding="md">
164 | 							<div class="category-score">
165 | 								<h3 class="category-score-title">{score.title}</h3>
166 | 								<div class="score-bar">
167 | 									<div
168 | 										class="score-fill level-{score.level}"
169 | 										style="width: {score.percentage}%"
170 | 									></div>
171 | 								</div>
172 | 								<p class="score-text">
173 | 									{score.completed}/{score.total} completed ({score.percentage}%)
174 | 								</p>
175 | 							</div>
176 | 						</Card>
177 | 					{/each}
178 | 				</div>
179 | 			</section>
180 | 
181 | 			<!-- Categories Section -->
182 | 			<section class="categories-section">
183 | 				<h2 class="section-title">Checklist Categories</h2>
184 | 				<p class="section-description">
185 | 					Click on each category to expand and review individual compliance items
186 | 				</p>
187 | 
188 | 				<div class="categories-list">
189 | 					{#each assessment.data.categories as category (category.id)}
190 | 						<CategoryCard {category} defaultExpanded={false} />
191 | 					{/each}
192 | 				</div>
193 | 			</section>
194 | 		</div>
195 | 	</main>
196 | 
197 | 	<Footer />
198 | 
199 | 	<ExportModal bind:isOpen={showExportModal} onClose={() => (showExportModal = false)} />
200 | </div>
201 | 
202 | <style>
203 | 	.app {
204 | 		min-height: 100vh;
205 | 		display: flex;
206 | 		flex-direction: column;
207 | 		background: var(--color-bg);
208 | 	}
209 | 
210 | 	.main {
211 | 		flex: 1;
212 | 		padding: 2rem 0;
213 | 	}
214 | 
215 | 	.container {
216 | 		max-width: 1200px;
217 | 		margin: 0 auto;
218 | 		padding: 0 1rem;
219 | 	}
220 | 
221 | 	.hero {
222 | 		text-align: center;
223 | 		margin-bottom: 3rem;
224 | 	}
225 | 
226 | 	.hero-title {
227 | 		margin: 0;
228 | 		font-size: 2.5rem;
229 | 		font-weight: 800;
230 | 		color: var(--color-text);
231 | 		background: linear-gradient(135deg, var(--color-primary), var(--color-success));
232 | 		-webkit-background-clip: text;
233 | 		-webkit-text-fill-color: transparent;
234 | 		background-clip: text;
235 | 	}
236 | 
237 | 	.hero-subtitle {
238 | 		margin: 1rem auto 0;
239 | 		font-size: 1.125rem;
240 | 		color: var(--color-text-secondary);
241 | 		max-width: 600px;
242 | 	}
243 | 
244 | 	.progress-section {
245 | 		margin-bottom: 2rem;
246 | 	}
247 | 
248 | 	.actions-section {
249 | 		display: flex;
250 | 		gap: 1rem;
251 | 		margin-bottom: 3rem;
252 | 		flex-wrap: wrap;
253 | 	}
254 | 
255 | 	.section-title {
256 | 		margin: 0 0 0.5rem 0;
257 | 		font-size: 1.75rem;
258 | 		font-weight: 700;
259 | 		color: var(--color-text);
260 | 		display: flex;
261 | 		align-items: center;
262 | 		gap: 0.5rem;
263 | 	}
264 | 
265 | 	.section-description {
266 | 		margin: 0 0 1.5rem 0;
267 | 		font-size: 1rem;
268 | 		color: var(--color-text-secondary);
269 | 	}
270 | 
271 | 	.recommendations-section {
272 | 		margin-bottom: 3rem;
273 | 	}
274 | 
275 | 	.recommendations-header {
276 | 		display: flex;
277 | 		align-items: center;
278 | 		justify-content: space-between;
279 | 		cursor: pointer;
280 | 		user-select: none;
281 | 		padding: 0.5rem;
282 | 		margin: -0.5rem;
283 | 		border-radius: 0.5rem;
284 | 		transition: background-color 0.2s ease;
285 | 	}
286 | 
287 | 	.recommendations-header:hover {
288 | 		background: var(--color-bg-secondary);
289 | 	}
290 | 
291 | 	.recommendations-header .section-title {
292 | 		margin: 0;
293 | 		flex: 1;
294 | 	}
295 | 
296 | 	.rec-count {
297 | 		font-size: 1rem;
298 | 		font-weight: 500;
299 | 		color: var(--color-text-secondary);
300 | 		margin-left: 0.5rem;
301 | 	}
302 | 
303 | 	.expand-toggle {
304 | 		background: none;
305 | 		border: none;
306 | 		cursor: pointer;
307 | 		padding: 0.25rem;
308 | 		border-radius: 0.25rem;
309 | 		color: var(--color-text-secondary);
310 | 		transition: all 0.2s ease;
311 | 		display: flex;
312 | 		align-items: center;
313 | 		justify-content: center;
314 | 	}
315 | 
316 | 	.expand-toggle:hover {
317 | 		background: var(--color-bg);
318 | 		color: var(--color-primary);
319 | 	}
320 | 
321 | 	.expand-toggle svg {
322 | 		transition: transform 0.3s ease;
323 | 	}
324 | 
325 | 	.recommendations-content {
326 | 		margin-top: 1rem;
327 | 		animation: slideDown 0.3s ease;
328 | 	}
329 | 
330 | 	@keyframes slideDown {
331 | 		from {
332 | 			opacity: 0;
333 | 			transform: translateY(-10px);
334 | 		}
335 | 		to {
336 | 			opacity: 1;
337 | 			transform: translateY(0);
338 | 		}
339 | 	}
340 | 
341 | 	.recommendations-grid {
342 | 		display: grid;
343 | 		gap: 1rem;
344 | 		margin-top: 1.5rem;
345 | 	}
346 | 
347 | 	.recommendation-card {
348 | 		background: var(--color-bg-secondary);
349 | 		padding: 1rem;
350 | 		border-radius: 0.5rem;
351 | 		border-left: 4px solid var(--color-danger);
352 | 	}
353 | 
354 | 	.rec-header {
355 | 		display: flex;
356 | 		align-items: flex-start;
357 | 		justify-content: space-between;
358 | 		gap: 1rem;
359 | 		margin-bottom: 0.5rem;
360 | 	}
361 | 
362 | 	.rec-title {
363 | 		margin: 0;
364 | 		font-size: 1rem;
365 | 		font-weight: 600;
366 | 		color: var(--color-text);
367 | 		flex: 1;
368 | 	}
369 | 
370 | 	.rec-category {
371 | 		background: var(--color-primary);
372 | 		color: white;
373 | 		padding: 0.25rem 0.5rem;
374 | 		border-radius: 0.25rem;
375 | 		font-size: 0.75rem;
376 | 		font-weight: 500;
377 | 		white-space: nowrap;
378 | 	}
379 | 
380 | 	.rec-description {
381 | 		margin: 0;
382 | 		font-size: 0.875rem;
383 | 		color: var(--color-text-secondary);
384 | 		line-height: 1.5;
385 | 	}
386 | 
387 | 	.overview-section {
388 | 		margin-bottom: 3rem;
389 | 	}
390 | 
391 | 	.category-grid {
392 | 		display: grid;
393 | 		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
394 | 		gap: 1rem;
395 | 	}
396 | 
397 | 	.category-score {
398 | 		text-align: center;
399 | 	}
400 | 
401 | 	.category-score-title {
402 | 		margin: 0 0 1rem 0;
403 | 		font-size: 1rem;
404 | 		font-weight: 600;
405 | 		color: var(--color-text);
406 | 	}
407 | 
408 | 	.score-bar {
409 | 		width: 100%;
410 | 		height: 0.5rem;
411 | 		background: var(--color-bg-secondary);
412 | 		border-radius: 0.25rem;
413 | 		overflow: hidden;
414 | 		margin-bottom: 0.5rem;
415 | 	}
416 | 
417 | 	.score-fill {
418 | 		height: 100%;
419 | 		transition: width 0.3s ease;
420 | 	}
421 | 
422 | 	.score-fill.level-low {
423 | 		background: var(--color-danger);
424 | 	}
425 | 
426 | 	.score-fill.level-medium {
427 | 		background: #f59e0b;
428 | 	}
429 | 
430 | 	.score-fill.level-high {
431 | 		background: var(--color-success);
432 | 	}
433 | 
434 | 	.score-text {
435 | 		margin: 0;
436 | 		font-size: 0.875rem;
437 | 		color: var(--color-text-secondary);
438 | 	}
439 | 
440 | 	.categories-section {
441 | 		margin-bottom: 3rem;
442 | 	}
443 | 
444 | 	.categories-list {
445 | 		display: flex;
446 | 		flex-direction: column;
447 | 		gap: 1.5rem;
448 | 	}
449 | 
450 | 	@media (max-width: 768px) {
451 | 		.hero-title {
452 | 			font-size: 2rem;
453 | 		}
454 | 
455 | 		.hero-subtitle {
456 | 			font-size: 1rem;
457 | 		}
458 | 
459 | 		.category-grid {
460 | 			grid-template-columns: 1fr;
461 | 		}
462 | 	}
463 | </style>
464 | 


--------------------------------------------------------------------------------
/webapp/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>GDPR Compliance Checker - Interactive Assessment</title>
  7 |     <meta name="description" content="Interactive GDPR compliance assessment tool for web developers and designers">
  8 |     
  9 |     <!-- Favicon -->
 10 |     <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E🔒%3C/text%3E%3C/svg%3E">
 11 |     
 12 |     <!-- Fonts -->
 13 |     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 14 |     
 15 |     <!-- Icons -->
 16 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 17 |     
 18 |     <!-- Styles -->
 19 |     <link rel="stylesheet" href="styles/main.css">
 20 | </head>
 21 | <body>
 22 |     <!-- Header -->
 23 |     <header class="header">
 24 |         <div class="container">
 25 |             <div class="header-content">
 26 |                 <div class="logo">
 27 |                     <i class="fas fa-shield-alt"></i>
 28 |                     <span>GDPR Compliance Checker</span>
 29 |                 </div>
 30 |                 
 31 |                 <nav class="nav">
 32 |                     <button class="nav-toggle" aria-label="Toggle navigation">
 33 |                         <i class="fas fa-bars"></i>
 34 |                     </button>
 35 |                     <ul class="nav-list">
 36 |                         <li><a href="#assessment" class="nav-link active">Assessment</a></li>
 37 |                         <li><a href="#overview" class="nav-link">Overview</a></li>
 38 |                         <li><a href="#export" class="nav-link">Export</a></li>
 39 |                         <li class="theme-switcher">
 40 |                             <button class="theme-toggle" id="themeToggle" aria-label="Toggle dark mode">
 41 |                                 <i class="fas fa-sun" id="lightIcon"></i>
 42 |                                 <i class="fas fa-moon" id="darkIcon"></i>
 43 |                             </button>
 44 |                         </li>
 45 |                         <li class="language-switcher">
 46 |                             <div class="language-dropdown">
 47 |                                 <button class="dropdown-toggle" id="languageToggle">
 48 |                                     <span class="current-lang">🇬🇧 EN</span>
 49 |                                     <i class="fas fa-chevron-down"></i>
 50 |                                 </button>
 51 |                                 <ul class="dropdown-menu" id="languageMenu">
 52 |                                     <li><button class="lang-btn" data-lang="en">🇬🇧 English</button></li>
 53 |                                     <li><button class="lang-btn" data-lang="de">🇩🇪 Deutsch</button></li>
 54 |                                 </ul>
 55 |                             </div>
 56 |                         </li>
 57 |                     </ul>
 58 |                 </nav>
 59 |             </div>
 60 |         </div>
 61 |     </header>
 62 | 
 63 |     <!-- Main Content -->
 64 |     <main class="main">
 65 |         <div class="container">
 66 |             <!-- Assessment Section -->
 67 |             <section id="assessment" class="section">
 68 |                 <div class="assessment-header">
 69 |                     <h1 class="section-title">GDPR Compliance Assessment</h1>
 70 |                     <p class="section-subtitle">
 71 |                         Interactive checklist to evaluate your website's GDPR compliance.
 72 |                         Complete all sections to get your compliance score.
 73 |                     </p>
 74 |                     
 75 |                     <!-- Progress Bar -->
 76 |                     <div class="progress-container">
 77 |                         <div class="progress-bar">
 78 |                             <div class="progress-fill" id="progressFill"></div>
 79 |                         </div>
 80 |                         <div class="progress-info">
 81 |                             <span class="progress-text" id="progressText">0% Complete</span>
 82 |                             <span class="progress-score" id="progressScore">Score: 0/100</span>
 83 |                         </div>
 84 |                     </div>
 85 |                 </div>
 86 | 
 87 |                 <!-- Categories -->
 88 |                 <div class="categories" id="categoriesContainer">
 89 |                     <!-- Categories will be dynamically loaded -->
 90 |                 </div>
 91 |             </section>
 92 | 
 93 |             <!-- Overview Section -->
 94 |             <section id="overview" class="section hidden">
 95 |                 <div class="overview-header">
 96 |                     <h2 class="section-title">Compliance Overview</h2>
 97 |                     <p class="section-subtitle">
 98 |                         Summary of your GDPR compliance assessment results
 99 |                     </p>
100 |                 </div>
101 | 
102 |                 <div class="overview-content">
103 |                     <!-- Compliance Score Card -->
104 |                     <div class="score-card">
105 |                         <div class="score-circle">
106 |                             <svg class="score-svg" viewBox="0 0 100 100">
107 |                                 <circle cx="50" cy="50" r="45" class="score-bg"></circle>
108 |                                 <circle cx="50" cy="50" r="45" class="score-progress" id="scoreCircle"></circle>
109 |                             </svg>
110 |                             <div class="score-text">
111 |                                 <span class="score-number" id="overallScore">0</span>
112 |                                 <span class="score-label">Score</span>
113 |                             </div>
114 |                         </div>
115 |                         <div class="score-info">
116 |                             <h3 class="score-title" id="scoreTitle">Getting Started</h3>
117 |                             <p class="score-description" id="scoreDescription">
118 |                                 Complete the assessment to see your compliance level
119 |                             </p>
120 |                         </div>
121 |                     </div>
122 | 
123 |                     <!-- Category Breakdown -->
124 |                     <div class="category-breakdown">
125 |                         <h3>Category Breakdown</h3>
126 |                         <div class="breakdown-list" id="breakdownList">
127 |                             <!-- Will be populated dynamically -->
128 |                         </div>
129 |                     </div>
130 | 
131 |                     <!-- Recommendations -->
132 |                     <div class="recommendations">
133 |                         <h3>Priority Recommendations</h3>
134 |                         <div class="recommendations-list" id="recommendationsList">
135 |                             <!-- Will be populated dynamically -->
136 |                         </div>
137 |                     </div>
138 |                 </div>
139 |             </section>
140 | 
141 |             <!-- Export Section -->
142 |             <section id="export" class="section hidden">
143 |                 <div class="export-header">
144 |                     <h2 class="section-title">Export & Import</h2>
145 |                     <p class="section-subtitle">
146 |                         Save your assessment results or import previous assessments
147 |                     </p>
148 |                 </div>
149 | 
150 |                 <div class="export-content">
151 |                     <div class="export-actions">
152 |                         <div class="action-card">
153 |                             <div class="action-icon">
154 |                                 <i class="fas fa-download"></i>
155 |                             </div>
156 |                             <h3>Export Results</h3>
157 |                             <p>Download your compliance assessment as JSON or PDF report</p>
158 |                             <div class="action-buttons">
159 |                                 <button class="btn btn-primary" id="exportJson">
160 |                                     <i class="fas fa-file-code"></i> Export JSON
161 |                                 </button>
162 |                                 <button class="btn btn-secondary" id="exportPdf">
163 |                                     <i class="fas fa-file-pdf"></i> Export PDF
164 |                                 </button>
165 |                             </div>
166 |                         </div>
167 | 
168 |                         <div class="action-card">
169 |                             <div class="action-icon">
170 |                                 <i class="fas fa-upload"></i>
171 |                             </div>
172 |                             <h3>Import Assessment</h3>
173 |                             <p>Load a previous assessment from JSON file</p>
174 |                             <div class="action-buttons">
175 |                                 <input type="file" id="importFile" accept=".json" style="display: none;">
176 |                                 <button class="btn btn-primary" id="importBtn">
177 |                                     <i class="fas fa-file-upload"></i> Import JSON
178 |                                 </button>
179 |                             </div>
180 |                         </div>
181 | 
182 |                         <div class="action-card">
183 |                             <div class="action-icon">
184 |                                 <i class="fas fa-trash"></i>
185 |                             </div>
186 |                             <h3>Reset Assessment</h3>
187 |                             <p>Clear all responses and start fresh</p>
188 |                             <div class="action-buttons">
189 |                                 <button class="btn btn-danger" id="resetBtn">
190 |                                     <i class="fas fa-undo"></i> Reset All
191 |                                 </button>
192 |                             </div>
193 |                         </div>
194 |                     </div>
195 |                 </div>
196 |             </section>
197 |         </div>
198 |     </main>
199 | 
200 |     <!-- Footer -->
201 |     <footer class="footer">
202 |         <div class="container">
203 |             <div class="footer-content">
204 |                 <div class="footer-info">
205 |                     <p>&copy; 2025 GDPR Compliance Checker. Open Source Project.</p>
206 |                     <p>
207 |                         <strong>Disclaimer:</strong> This tool provides general guidance and does not constitute legal advice.
208 |                         Always consult with a qualified lawyer for legal matters.
209 |                     </p>
210 |                 </div>
211 |                 <div class="footer-links">
212 |                     <a href="https://github.com/mirkoschubert/datenschutz-checkliste" target="_blank">
213 |                         <i class="fab fa-github"></i> GitHub
214 |                     </a>
215 |                     <a href="#" onclick="showAbout()">About</a>
216 |                     <a href="#" onclick="showLegal()">Legal</a>
217 |                 </div>
218 |             </div>
219 |         </div>
220 |     </footer>
221 | 
222 |     <!-- Modals -->
223 |     <div id="itemModal" class="modal">
224 |         <div class="modal-content">
225 |             <div class="modal-header">
226 |                 <h3 class="modal-title" id="modalTitle"></h3>
227 |                 <button class="modal-close" onclick="closeModal()">&times;</button>
228 |             </div>
229 |             <div class="modal-body">
230 |                 <div class="modal-description" id="modalDescription"></div>
231 |                 <div class="modal-legal" id="modalLegal"></div>
232 |                 <div class="modal-implementation" id="modalImplementation"></div>
233 |             </div>
234 |             <div class="modal-footer">
235 |                 <button class="btn btn-secondary" onclick="closeModal()">Close</button>
236 |             </div>
237 |         </div>
238 |     </div>
239 | 
240 |     <!-- Scripts -->
241 |     <!-- PDF Library -->
242 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
243 |     
244 |     <!-- Application Scripts -->
245 |     <script src="js/data.js"></script>
246 |     <script src="js/assessment.js"></script>
247 |     <script src="js/overview.js"></script>
248 |     <script src="js/export.js"></script>
249 |     <script src="js/main.js"></script>
250 | </body>
251 | </html>


--------------------------------------------------------------------------------
/webapp/js/main.js:
--------------------------------------------------------------------------------
  1 | // Main application initialization and coordination
  2 | class GDPRApp {
  3 |     constructor() {
  4 |         this.assessmentManager = null;
  5 |         this.overviewManager = null;
  6 |         this.exportManager = null;
  7 |         
  8 |         this.init();
  9 |     }
 10 | 
 11 |     init() {
 12 |         // Wait for DOM to be ready
 13 |         if (document.readyState === 'loading') {
 14 |             document.addEventListener('DOMContentLoaded', () => this.initializeApp());
 15 |         } else {
 16 |             this.initializeApp();
 17 |         }
 18 |     }
 19 | 
 20 |     initializeApp() {
 21 |         try {
 22 |             // Initialize managers
 23 |             this.assessmentManager = new GDPRAssessment();
 24 |             this.overviewManager = new OverviewManager(this.assessmentManager);
 25 |             this.exportManager = new ExportManager(this.assessmentManager, this.overviewManager);
 26 | 
 27 |             // Make managers globally available for event handlers
 28 |             window.gdprAssessment = this.assessmentManager;
 29 |             window.overviewManager = this.overviewManager;
 30 |             window.exportManager = this.exportManager;
 31 |             
 32 |             // Backwards compatibility
 33 |             window.assessmentManager = this.assessmentManager;
 34 | 
 35 |             // Setup global event listeners
 36 |             this.setupEventListeners();
 37 | 
 38 |             // Check for shared data in URL
 39 |             if (this.exportManager.checkForSharedData) {
 40 |                 this.exportManager.checkForSharedData();
 41 |             }
 42 | 
 43 |             console.log('GDPR Compliance Checker initialized successfully');
 44 |         } catch (error) {
 45 |             console.error('Error initializing GDPR app:', error);
 46 |             this.showError('Failed to initialize application. Please refresh the page.');
 47 |         }
 48 |     }
 49 | 
 50 |     setupEventListeners() {
 51 |         // Navigation
 52 |         this.setupNavigation();
 53 |         
 54 |         // Language switching
 55 |         this.setupLanguageSwitching();
 56 |         
 57 |         // Theme switching
 58 |         this.setupThemeSwitching();
 59 |         
 60 |         // Mobile navigation
 61 |         this.setupMobileNavigation();
 62 | 
 63 |         // Keyboard navigation
 64 |         this.setupKeyboardNavigation();
 65 | 
 66 |         // Window events
 67 |         this.setupWindowEvents();
 68 |     }
 69 | 
 70 |     setupNavigation() {
 71 |         const navLinks = document.querySelectorAll('.nav-link');
 72 |         
 73 |         navLinks.forEach(link => {
 74 |             link.addEventListener('click', (e) => {
 75 |                 e.preventDefault();
 76 |                 const targetSection = link.getAttribute('href').substring(1);
 77 |                 this.showSection(targetSection);
 78 |                 
 79 |                 // Update active nav link
 80 |                 navLinks.forEach(l => l.classList.remove('active'));
 81 |                 link.classList.add('active');
 82 |             });
 83 |         });
 84 |     }
 85 | 
 86 |     setupLanguageSwitching() {
 87 |         // Language switching is now handled by the assessment manager
 88 |         // This method is kept for backwards compatibility
 89 |     }
 90 |     
 91 |     setupThemeSwitching() {
 92 |         const themeToggle = document.getElementById('themeToggle');
 93 |         if (!themeToggle) return;
 94 |         
 95 |         // Initialize theme from localStorage or system preference
 96 |         this.initializeTheme();
 97 |         
 98 |         // Setup theme toggle button
 99 |         themeToggle.addEventListener('click', () => {
100 |             const currentTheme = document.documentElement.getAttribute('data-theme');
101 |             const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
102 |             this.setTheme(newTheme);
103 |         });
104 |     }
105 |     
106 |     initializeTheme() {
107 |         // Check if user previously set a theme preference
108 |         const savedTheme = localStorage.getItem('gdpr_theme');
109 |         
110 |         if (savedTheme) {
111 |             // Use saved preference
112 |             this.setTheme(savedTheme);
113 |         } else {
114 |             // Check system preference
115 |             if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
116 |                 this.setTheme('dark');
117 |             } else {
118 |                 this.setTheme('light');
119 |             }
120 |             
121 |             // Listen for system preference changes
122 |             window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
123 |                 const newTheme = e.matches ? 'dark' : 'light';
124 |                 this.setTheme(newTheme);
125 |             });
126 |         }
127 |     }
128 |     
129 |     setTheme(theme) {
130 |         document.documentElement.setAttribute('data-theme', theme);
131 |         localStorage.setItem('gdpr_theme', theme);
132 |         
133 |         // Update icon visibility is handled by CSS
134 |         console.log(`Theme set to: ${theme}`);
135 |     }
136 | 
137 |     setupMobileNavigation() {
138 |         const navToggle = document.querySelector('.nav-toggle');
139 |         const navList = document.querySelector('.nav-list');
140 |         
141 |         if (navToggle && navList) {
142 |             navToggle.addEventListener('click', () => {
143 |                 navList.classList.toggle('active');
144 |                 
145 |                 // Update icon
146 |                 const icon = navToggle.querySelector('i');
147 |                 if (navList.classList.contains('active')) {
148 |                     icon.className = 'fas fa-times';
149 |                 } else {
150 |                     icon.className = 'fas fa-bars';
151 |                 }
152 |             });
153 | 
154 |             // Close mobile nav when clicking on a link
155 |             navList.addEventListener('click', (e) => {
156 |                 if (e.target.classList.contains('nav-link')) {
157 |                     navList.classList.remove('active');
158 |                     navToggle.querySelector('i').className = 'fas fa-bars';
159 |                 }
160 |             });
161 |         }
162 |     }
163 | 
164 |     setupKeyboardNavigation() {
165 |         // Add keyboard navigation support
166 |         document.addEventListener('keydown', (e) => {
167 |             // Ctrl/Cmd + S to save/export
168 |             if ((e.ctrlKey || e.metaKey) && e.key === 's') {
169 |                 e.preventDefault();
170 |                 this.exportManager.exportJSON();
171 |             }
172 |             
173 |             // Ctrl/Cmd + O to import
174 |             if ((e.ctrlKey || e.metaKey) && e.key === 'o') {
175 |                 e.preventDefault();
176 |                 document.getElementById('importFile').click();
177 |             }
178 |         });
179 |     }
180 | 
181 |     setupWindowEvents() {
182 |         // Auto-save on page unload
183 |         window.addEventListener('beforeunload', () => {
184 |             if (this.assessmentManager) {
185 |                 this.assessmentManager.saveResponses();
186 |             }
187 |         });
188 | 
189 |         // Handle window resize for responsive adjustments
190 |         window.addEventListener('resize', this.debounce(() => {
191 |             this.handleResize();
192 |         }, 250));
193 | 
194 |         // Handle online/offline status
195 |         window.addEventListener('online', () => {
196 |             this.showNotification('Connection restored', 'success');
197 |         });
198 | 
199 |         window.addEventListener('offline', () => {
200 |             this.showNotification('Working offline - your progress is saved locally', 'info');
201 |         });
202 |     }
203 | 
204 |     showSection(sectionId) {
205 |         // Hide all sections
206 |         document.querySelectorAll('.section').forEach(section => {
207 |             section.classList.add('hidden');
208 |         });
209 |         
210 |         // Show target section
211 |         const targetSection = document.getElementById(sectionId);
212 |         if (targetSection) {
213 |             targetSection.classList.remove('hidden');
214 |             
215 |             // Update overview when showing overview section
216 |             if (sectionId === 'overview' && this.overviewManager) {
217 |                 this.overviewManager.updateOverview();
218 |             }
219 |             
220 |             // Scroll to top
221 |             window.scrollTo({ top: 0, behavior: 'smooth' });
222 |         }
223 |     }
224 | 
225 |     handleResize() {
226 |         // Handle responsive adjustments if needed
227 |         const width = window.innerWidth;
228 |         
229 |         if (width < 768) {
230 |             // Mobile adjustments
231 |             this.adjustForMobile();
232 |         } else {
233 |             // Desktop adjustments
234 |             this.adjustForDesktop();
235 |         }
236 |     }
237 | 
238 |     adjustForMobile() {
239 |         // Close mobile nav if open
240 |         const navList = document.querySelector('.nav-list');
241 |         const navToggle = document.querySelector('.nav-toggle');
242 |         
243 |         if (navList && navList.classList.contains('active')) {
244 |             navList.classList.remove('active');
245 |             if (navToggle) {
246 |                 navToggle.querySelector('i').className = 'fas fa-bars';
247 |             }
248 |         }
249 |     }
250 | 
251 |     adjustForDesktop() {
252 |         // Ensure desktop nav is visible
253 |         const navList = document.querySelector('.nav-list');
254 |         if (navList) {
255 |             navList.classList.remove('active');
256 |         }
257 |     }
258 | 
259 |     showError(message) {
260 |         const errorDiv = document.createElement('div');
261 |         errorDiv.className = 'error-message';
262 |         errorDiv.innerHTML = `
263 |             <div class="error-content">
264 |                 <i class="fas fa-exclamation-triangle"></i>
265 |                 <span>${message}</span>
266 |                 <button onclick="this.parentElement.parentElement.remove()">
267 |                     <i class="fas fa-times"></i>
268 |                 </button>
269 |             </div>
270 |         `;
271 |         
272 |         document.body.appendChild(errorDiv);
273 |         
274 |         // Auto-remove after 10 seconds
275 |         setTimeout(() => {
276 |             if (errorDiv.parentNode) {
277 |                 errorDiv.remove();
278 |             }
279 |         }, 10000);
280 |     }
281 | 
282 |     showNotification(message, type = 'info') {
283 |         if (this.exportManager) {
284 |             this.exportManager.showNotification(message, type);
285 |         }
286 |     }
287 | 
288 |     // Utility function for debouncing
289 |     debounce(func, wait) {
290 |         let timeout;
291 |         return function executedFunction(...args) {
292 |             const later = () => {
293 |                 clearTimeout(timeout);
294 |                 func(...args);
295 |             };
296 |             clearTimeout(timeout);
297 |             timeout = setTimeout(later, wait);
298 |         };
299 |     }
300 | }
301 | 
302 | // Global utility functions
303 | function showAbout() {
304 |     const aboutContent = `
305 |         <div class="modal-content">
306 |             <div class="modal-header">
307 |                 <h3>About GDPR Compliance Checker</h3>
308 |                 <button class="modal-close" onclick="closeAbout()">&times;</button>
309 |             </div>
310 |             <div class="modal-body">
311 |                 <p>This interactive GDPR compliance checker is an open-source tool designed to help web developers and designers assess their websites' compliance with the General Data Protection Regulation (GDPR).</p>
312 |                 
313 |                 <h4>Features:</h4>
314 |                 <ul>
315 |                     <li>Interactive checklist with detailed explanations</li>
316 |                     <li>Real-time compliance scoring</li>
317 |                     <li>Category-based assessment</li>
318 |                     <li>Export/import functionality</li>
319 |                     <li>Multilingual support (English/German)</li>
320 |                     <li>Mobile-responsive design</li>
321 |                 </ul>
322 |                 
323 |                 <h4>Credits:</h4>
324 |                 <p>Based on the original GDPR checklist by Peter Haurand and Mirko Schubert.</p>
325 |                 <p>Enhanced with interactive features for Hacktoberfest 2025.</p>
326 |                 
327 |                 <h4>Contributing:</h4>
328 |                 <p>This is an open-source project. Contributions are welcome on GitHub!</p>
329 |                 
330 |                 <div class="about-links">
331 |                     <a href="https://github.com/mirkoschubert/datenschutz-checkliste" target="_blank" class="btn btn-primary">
332 |                         <i class="fab fa-github"></i> View on GitHub
333 |                     </a>
334 |                 </div>
335 |             </div>
336 |         </div>
337 |     `;
338 |     
339 |     const modal = document.createElement('div');
340 |     modal.id = 'aboutModal';
341 |     modal.className = 'modal active';
342 |     modal.innerHTML = aboutContent;
343 |     
344 |     document.body.appendChild(modal);
345 |     
346 |     // Close on backdrop click
347 |     modal.addEventListener('click', (e) => {
348 |         if (e.target === modal) {
349 |             closeAbout();
350 |         }
351 |     });
352 | }
353 | 
354 | function closeAbout() {
355 |     const modal = document.getElementById('aboutModal');
356 |     if (modal) {
357 |         modal.remove();
358 |     }
359 | }
360 | 
361 | function showLegal() {
362 |     const legalContent = `
363 |         <div class="modal-content">
364 |             <div class="modal-header">
365 |                 <h3>Legal Information</h3>
366 |                 <button class="modal-close" onclick="closeLegal()">&times;</button>
367 |             </div>
368 |             <div class="modal-body">
369 |                 <h4>Disclaimer</h4>
370 |                 <p><strong>This GDPR Compliance Checker cannot address individual cases and does not constitute legal advice.</strong> It is merely a collection of knowledge compiled from extensive research, experience, and best practices from various developers.</p>
371 |                 
372 |                 <p>We assume <strong>no liability</strong> and recommend consulting a qualified lawyer for legal questions in any case.</p>
373 |                 
374 |                 <h4>License</h4>
375 |                 <p>This project is released under the MIT License. See the GitHub repository for full license details.</p>
376 |                 
377 |                 <h4>Data Privacy</h4>
378 |                 <p>This tool runs entirely in your browser. Your assessment data is stored locally on your device and is not transmitted to any external servers unless you explicitly choose to export or share it.</p>
379 |                 
380 |                 <h4>Accuracy</h4>
381 |                 <p>While we strive to keep the information accurate and up-to-date, GDPR regulations and interpretations may change. Always verify current legal requirements with qualified legal professionals.</p>
382 |                 
383 |                 <h4>Contact</h4>
384 |                 <p>For questions about this tool, please visit our GitHub repository or create an issue.</p>
385 |             </div>
386 |         </div>
387 |     `;
388 |     
389 |     const modal = document.createElement('div');
390 |     modal.id = 'legalModal';
391 |     modal.className = 'modal active';
392 |     modal.innerHTML = legalContent;
393 |     
394 |     document.body.appendChild(modal);
395 |     
396 |     // Close on backdrop click
397 |     modal.addEventListener('click', (e) => {
398 |         if (e.target === modal) {
399 |             closeLegal();
400 |         }
401 |     });
402 | }
403 | 
404 | function closeLegal() {
405 |     const modal = document.getElementById('legalModal');
406 |     if (modal) {
407 |         modal.remove();
408 |     }
409 | }
410 | 
411 | // Initialize the application
412 | const app = new GDPRApp();
413 | 
414 | // Make app globally available for debugging
415 | window.gdprApp = app;
416 | 
417 | // Global functions for backwards compatibility and event handlers
418 | function toggleCategory(categoryId) {
419 |     if (window.gdprAssessment && window.gdprAssessment.toggleCategory) {
420 |         window.gdprAssessment.toggleCategory(categoryId);
421 |     }
422 | }
423 | 
424 | function handleItemCheckboxClick(itemId, event) {
425 |     if (event && event.target.tagName === 'INPUT') {
426 |         // If clicking directly on checkbox, let the onchange handle it
427 |         return;
428 |     }
429 |     if (window.gdprAssessment && window.gdprAssessment.handleCheckboxClick) {
430 |         window.gdprAssessment.handleCheckboxClick(itemId);
431 |     }
432 | }
433 | 
434 | function handleItemCheckboxChange(itemId) {
435 |     if (window.gdprAssessment && window.gdprAssessment.handleCheckboxChange) {
436 |         window.gdprAssessment.handleCheckboxChange(itemId);
437 |     }
438 | }
439 | 
440 | function handleItemCheckbox(itemId) {
441 |     // Backwards compatibility
442 |     handleItemCheckboxClick(itemId);
443 | }
444 | 
445 | function handleCheckboxChange(itemId, isChecked) {
446 |     // Backwards compatibility
447 |     handleItemCheckboxChange(itemId);
448 | }
449 | 
450 | function showItemDetails(itemId) {
451 |     if (window.gdprAssessment && window.gdprAssessment.showItemDetails) {
452 |         window.gdprAssessment.showItemDetails(itemId);
453 |     }
454 | }
455 | 
456 | function handleItemIgnore(itemId) {
457 |     if (window.gdprAssessment && window.gdprAssessment.toggleIgnoreItem) {
458 |         window.gdprAssessment.toggleIgnoreItem(itemId);
459 |     }
460 | }


--------------------------------------------------------------------------------
/webapp/js/assessment.js:
--------------------------------------------------------------------------------
  1 | // Assessment functionality for the GDPR compliance checker
  2 | class GDPRAssessment {
  3 |     constructor() {
  4 |         this.currentLang = 'en';
  5 |         this.responses = {};
  6 |         this.ignoredItems = new Set();
  7 |         this.totalItems = 0;
  8 |         this.completedItems = 0;
  9 |         this.currentScore = 0;
 10 |         this.maxScore = 0;
 11 |         
 12 |         this.init();
 13 |     }
 14 | 
 15 |     init() {
 16 |         this.loadSavedData();
 17 |         this.renderCategories();
 18 |         this.updateProgress();
 19 |         this.setupLanguageDropdown();
 20 |     }
 21 | 
 22 |     loadSavedData() {
 23 |         // Get language from localStorage or default to English
 24 |         this.currentLang = localStorage.getItem('gdpr_language') || 'en';
 25 |         
 26 |         // Load saved responses and ignored items
 27 |         const savedResponses = localStorage.getItem('gdpr_responses');
 28 |         if (savedResponses) {
 29 |             this.responses = JSON.parse(savedResponses);
 30 |         }
 31 |         
 32 |         const savedIgnored = localStorage.getItem('gdpr_ignored');
 33 |         if (savedIgnored) {
 34 |             this.ignoredItems = new Set(JSON.parse(savedIgnored));
 35 |         }
 36 |         
 37 |         this.updateLanguageDisplay();
 38 |     }
 39 | 
 40 |     saveData() {
 41 |         localStorage.setItem('gdpr_language', this.currentLang);
 42 |         localStorage.setItem('gdpr_responses', JSON.stringify(this.responses));
 43 |         localStorage.setItem('gdpr_ignored', JSON.stringify([...this.ignoredItems]));
 44 |     }
 45 | 
 46 |     setupLanguageDropdown() {
 47 |         const dropdown = document.getElementById('languageToggle');
 48 |         const menu = document.getElementById('languageMenu');
 49 |         
 50 |         if (!dropdown || !menu) return;
 51 | 
 52 |         dropdown.addEventListener('click', (e) => {
 53 |             e.stopPropagation();
 54 |             dropdown.classList.toggle('active');
 55 |             menu.classList.toggle('active');
 56 |         });
 57 | 
 58 |         // Close dropdown when clicking outside
 59 |         document.addEventListener('click', () => {
 60 |             dropdown.classList.remove('active');
 61 |             menu.classList.remove('active');
 62 |         });
 63 | 
 64 |         // Language selection
 65 |         menu.addEventListener('click', (e) => {
 66 |             if (e.target.classList.contains('lang-btn')) {
 67 |                 const lang = e.target.dataset.lang;
 68 |                 this.setLanguage(lang);
 69 |                 dropdown.classList.remove('active');
 70 |                 menu.classList.remove('active');
 71 |             }
 72 |         });
 73 |     }
 74 | 
 75 |     updateLanguageDisplay() {
 76 |         const currentLangSpan = document.querySelector('.current-lang');
 77 |         if (currentLangSpan) {
 78 |             const langMap = {
 79 |                 'en': '🇬🇧 English',
 80 |                 'de': '🇩🇪 Deutsch'
 81 |             };
 82 |             currentLangSpan.textContent = langMap[this.currentLang] || '🇬🇧 English';
 83 |         }
 84 | 
 85 |         // Update active state in dropdown
 86 |         document.querySelectorAll('.lang-btn').forEach(btn => {
 87 |             btn.classList.toggle('active', btn.dataset.lang === this.currentLang);
 88 |         });
 89 |     }
 90 | 
 91 |     setLanguage(lang) {
 92 |         this.currentLang = lang;
 93 |         this.updateLanguageDisplay();
 94 |         this.renderCategories();
 95 |         this.updateProgress();
 96 |         this.saveData();
 97 |     }
 98 | 
 99 |     renderCategories() {
100 |         const container = document.getElementById('categoriesContainer');
101 |         if (!container) return;
102 | 
103 |         const data = gdprData[this.currentLang];
104 |         if (!data) return;
105 | 
106 |         container.innerHTML = '';
107 | 
108 |         data.categories.forEach(category => {
109 |             const categoryElement = this.createCategoryElement(category);
110 |             container.appendChild(categoryElement);
111 |         });
112 | 
113 |         this.calculateTotalItems();
114 |     }
115 | 
116 |     createCategoryElement(category) {
117 |         const categoryDiv = document.createElement('div');
118 |         categoryDiv.className = 'category';
119 |         categoryDiv.dataset.categoryId = category.id;
120 | 
121 |         // Calculate category progress
122 |         const categoryItems = category.items;
123 |         const completedCount = categoryItems.filter(item => this.responses[item.id]).length;
124 |         const totalCount = categoryItems.length;
125 |         const progressPercentage = totalCount > 0 ? (completedCount / totalCount) * 100 : 0;
126 | 
127 |         categoryDiv.innerHTML = `
128 |             <div class="category-header" onclick="toggleCategory('${category.id}')">
129 |                 <div class="category-title">
130 |                     <i class="${category.icon} category-icon"></i>
131 |                     ${category.title}
132 |                 </div>
133 |                 <div class="category-info">
134 |                     <span class="category-progress">${completedCount}/${totalCount} completed</span>
135 |                     <button class="category-toggle">
136 |                         <i class="fas fa-chevron-down"></i>
137 |                     </button>
138 |                 </div>
139 |             </div>
140 |             <div class="category-content" id="category-${category.id}">
141 |                 ${this.createCategoryItems(category.items)}
142 |             </div>
143 |         `;
144 | 
145 |         return categoryDiv;
146 |     }
147 | 
148 |     createCategoryItems(items) {
149 |         return items.map(item => `
150 |             <div class="checklist-item ${this.responses[item.id] ? 'completed' : ''} ${this.ignoredItems.has(item.id) ? 'ignored' : ''}" 
151 |                  data-item-id="${item.id}">
152 |                 <div class="item-checkbox-area" onclick="handleItemCheckboxClick('${item.id}', event)">
153 |                     <input type="checkbox" 
154 |                            class="item-checkbox" 
155 |                            id="checkbox-${item.id}"
156 |                            ${this.responses[item.id] ? 'checked' : ''}
157 |                            ${this.ignoredItems.has(item.id) ? 'disabled' : ''}
158 |                            onchange="handleItemCheckboxChange('${item.id}')"
159 |                            onclick="event.stopPropagation()">
160 |                 </div>
161 |                 <div class="item-content">
162 |                     <div class="item-title">${item.title}</div>
163 |                     <div class="item-description">${item.description}</div>
164 |                     <div class="item-actions">
165 |                         <button class="item-info-btn" onclick="showItemDetails('${item.id}')">
166 |                             <i class="fas fa-info-circle"></i> Details
167 |                         </button>
168 |                         <button class="item-ignore-btn ${this.ignoredItems.has(item.id) ? 'active' : ''}" 
169 |                                 onclick="handleItemIgnore('${item.id}')">
170 |                             <i class="fas fa-eye-slash"></i> 
171 |                             ${this.ignoredItems.has(item.id) ? 'Unignore' : 'Ignore'}
172 |                         </button>
173 |                         ${item.required ? '<span class="item-required">Required</span>' : '<span class="item-optional">Optional</span>'}
174 |                     </div>
175 |                 </div>
176 |             </div>
177 |         `).join('');
178 |     }
179 | 
180 |     toggleCategory(categoryId) {
181 |         const content = document.getElementById(`category-${categoryId}`);
182 |         const toggle = content.parentElement.querySelector('.category-toggle i');
183 |         
184 |         if (content.classList.contains('expanded')) {
185 |             content.classList.remove('expanded');
186 |             toggle.style.transform = 'rotate(0deg)';
187 |         } else {
188 |             content.classList.add('expanded');
189 |             toggle.style.transform = 'rotate(180deg)';
190 |         }
191 |     }
192 | 
193 |     handleCheckboxClick(itemId) {
194 |         // Don't allow checking if item is ignored
195 |         if (this.ignoredItems.has(itemId)) return;
196 | 
197 |         const checkbox = document.getElementById(`checkbox-${itemId}`);
198 |         if (!checkbox) return;
199 | 
200 |         // Toggle the checkbox state
201 |         checkbox.checked = !checkbox.checked;
202 |         
203 |         // Update the response state
204 |         this.updateItemResponse(itemId, checkbox.checked);
205 |     }
206 | 
207 |     handleCheckboxChange(itemId) {
208 |         // Don't allow checking if item is ignored
209 |         if (this.ignoredItems.has(itemId)) return;
210 | 
211 |         const checkbox = document.getElementById(`checkbox-${itemId}`);
212 |         if (!checkbox) return;
213 | 
214 |         // Use the current checkbox state
215 |         this.updateItemResponse(itemId, checkbox.checked);
216 |     }
217 | 
218 |     updateItemResponse(itemId, isChecked) {
219 |         if (isChecked) {
220 |             this.responses[itemId] = true;
221 |         } else {
222 |             delete this.responses[itemId];
223 |         }
224 | 
225 |         // Update item visual state
226 |         const itemElement = document.querySelector(`[data-item-id="${itemId}"]`);
227 |         if (itemElement) {
228 |             itemElement.classList.toggle('completed', isChecked);
229 |         }
230 | 
231 |         // Update progress and save
232 |         this.updateProgress();
233 |         this.saveData();
234 |     }
235 | 
236 |     toggleIgnoreItem(itemId) {
237 |         if (this.ignoredItems.has(itemId)) {
238 |             // Unignore item
239 |             this.ignoredItems.delete(itemId);
240 |         } else {
241 |             // Ignore item - also uncheck if checked
242 |             this.ignoredItems.add(itemId);
243 |             if (this.responses[itemId]) {
244 |                 delete this.responses[itemId];
245 |             }
246 |         }
247 | 
248 |         // Re-render to update UI
249 |         this.renderCategories();
250 |         this.updateProgress();
251 |         this.saveData();
252 |     }
253 | 
254 |     showItemDetails(itemId) {
255 |         // Find the item data
256 |         const data = gdprData[this.currentLang];
257 |         let itemData = null;
258 |         
259 |         for (const category of data.categories) {
260 |             const item = category.items.find(i => i.id === itemId);
261 |             if (item) {
262 |                 itemData = item;
263 |                 break;
264 |             }
265 |         }
266 | 
267 |         if (!itemData) return;
268 | 
269 |         // Create modal content
270 |         const modal = this.createItemModal(itemData);
271 |         document.body.appendChild(modal);
272 |         
273 |         // Show modal
274 |         setTimeout(() => modal.classList.add('active'), 10);
275 |     }
276 | 
277 |     createItemModal(item) {
278 |         const modal = document.createElement('div');
279 |         modal.className = 'modal-overlay';
280 |         modal.onclick = (e) => {
281 |             if (e.target === modal) this.closeModal(modal);
282 |         };
283 | 
284 |         const legalBasisHtml = item.legalBasis ? `
285 |             <div class="modal-section">
286 |                 <h4>Legal Basis:</h4>
287 |                 <ul>
288 |                     ${item.legalBasis.map(basis => `<li>${basis}</li>`).join('')}
289 |                 </ul>
290 |             </div>
291 |         ` : '';
292 | 
293 |         const implementationHtml = item.implementation ? `
294 |             <div class="modal-section">
295 |                 <h4>Implementation Tips:</h4>
296 |                 <ul>
297 |                     ${item.implementation.map(tip => `<li>${tip}</li>`).join('')}
298 |                 </ul>
299 |             </div>
300 |         ` : '';
301 | 
302 |         modal.innerHTML = `
303 |             <div class="modal-content">
304 |                 <div class="modal-header">
305 |                     <h3>${item.title}</h3>
306 |                     <button class="modal-close" onclick="gdprAssessment.closeModal(this.closest('.modal-overlay'))">
307 |                         <i class="fas fa-times"></i>
308 |                     </button>
309 |                 </div>
310 |                 <div class="modal-body">
311 |                     <p class="modal-description">${item.description}</p>
312 |                     ${legalBasisHtml}
313 |                     ${implementationHtml}
314 |                     <div class="modal-meta">
315 |                         <span class="item-type ${item.required ? 'required' : 'optional'}">
316 |                             ${item.required ? 'Required' : 'Optional'}
317 |                         </span>
318 |                         <span class="item-weight">Weight: ${item.weight}</span>
319 |                     </div>
320 |                 </div>
321 |             </div>
322 |         `;
323 | 
324 |         return modal;
325 |     }
326 | 
327 |     closeModal(modal) {
328 |         modal.classList.remove('active');
329 |         setTimeout(() => modal.remove(), 300);
330 |     }
331 | 
332 |     showItemDetails(itemId) {
333 |         const item = this.findItemById(itemId);
334 |         if (!item) return;
335 | 
336 |         const modal = document.getElementById('itemModal');
337 |         const modalTitle = document.getElementById('modalTitle');
338 |         const modalDescription = document.getElementById('modalDescription');
339 |         const modalLegal = document.getElementById('modalLegal');
340 |         const modalImplementation = document.getElementById('modalImplementation');
341 | 
342 |         modalTitle.textContent = item.title;
343 |         modalDescription.textContent = item.description;
344 | 
345 |         // Legal basis section
346 |         modalLegal.innerHTML = `
347 |             <h4>Legal Basis</h4>
348 |             <ul>
349 |                 ${item.legalBasis.map(basis => `<li>${basis}</li>`).join('')}
350 |             </ul>
351 |         `;
352 | 
353 |         // Implementation tips
354 |         modalImplementation.innerHTML = `
355 |             <h4>Implementation Tips</h4>
356 |             <ul>
357 |                 ${item.implementation.map(tip => `<li>${tip}</li>`).join('')}
358 |             </ul>
359 |         `;
360 | 
361 |         modal.classList.add('active');
362 |         
363 |         // Focus management for accessibility
364 |         modal.querySelector('.modal-close').focus();
365 |     }
366 | 
367 |     closeModal() {
368 |         const modal = document.getElementById('itemModal');
369 |         modal.classList.remove('active');
370 |     }
371 | 
372 |     findItemById(itemId) {
373 |         const data = gdprData[this.currentLang];
374 |         if (!data) return null;
375 | 
376 |         for (const category of data.categories) {
377 |             const item = category.items.find(item => item.id === itemId);
378 |             if (item) return item;
379 |         }
380 |         return null;
381 |     }
382 | 
383 |     calculateTotalItems() {
384 |         const data = gdprData[this.currentLang];
385 |         if (!data) return;
386 | 
387 |         this.totalItems = 0;
388 |         this.maxScore = 0;
389 | 
390 |         data.categories.forEach(category => {
391 |             category.items.forEach(item => {
392 |                 // Only count non-ignored items
393 |                 if (!this.ignoredItems.has(item.id)) {
394 |                     this.totalItems++;
395 |                     const weight = item.required ? item.weight * scoringConfig.weights.required : item.weight * scoringConfig.weights.optional;
396 |                     this.maxScore += weight;
397 |                 }
398 |             });
399 |         });
400 |     }
401 | 
402 |     updateProgress() {
403 |         // Recalculate totals to account for ignored items
404 |         this.calculateTotalItems();
405 |         
406 |         this.completedItems = Object.keys(this.responses).filter(id => !this.ignoredItems.has(id)).length;
407 |         const progressPercentage = this.totalItems > 0 ? (this.completedItems / this.totalItems) * 100 : 0;
408 |         
409 |         // Calculate weighted score
410 |         this.currentScore = 0;
411 |         const data = gdprData[this.currentLang];
412 |         
413 |         if (data) {
414 |             data.categories.forEach(category => {
415 |                 category.items.forEach(item => {
416 |                     if (this.responses[item.id]) {
417 |                         const weight = item.required ? item.weight * scoringConfig.weights.required : item.weight * scoringConfig.weights.optional;
418 |                         this.currentScore += weight;
419 |                     }
420 |                 });
421 |             });
422 |         }
423 | 
424 |         const scorePercentage = this.maxScore > 0 ? (this.currentScore / this.maxScore) * 100 : 0;
425 | 
426 |         // Update progress bar
427 |         const progressFill = document.getElementById('progressFill');
428 |         const progressText = document.getElementById('progressText');
429 |         const progressScore = document.getElementById('progressScore');
430 | 
431 |         if (progressFill) {
432 |             progressFill.style.width = `${progressPercentage}%`;
433 |         }
434 | 
435 |         if (progressText) {
436 |             progressText.textContent = `${Math.round(progressPercentage)}% Complete`;
437 |         }
438 | 
439 |         if (progressScore) {
440 |             progressScore.textContent = `Score: ${Math.round(scorePercentage)}/100`;
441 |         }
442 | 
443 |         // Update category progress
444 |         this.updateCategoryProgress();
445 |     }
446 | 
447 |     updateCategoryProgress() {
448 |         const data = gdprData[this.currentLang];
449 |         if (!data) return;
450 | 
451 |         data.categories.forEach(category => {
452 |             const categoryElement = document.querySelector(`[data-category-id="${category.id}"]`);
453 |             if (categoryElement) {
454 |                 const completedCount = category.items.filter(item => this.responses[item.id]).length;
455 |                 const totalCount = category.items.length;
456 |                 
457 |                 const progressElement = categoryElement.querySelector('.category-progress');
458 |                 if (progressElement) {
459 |                     progressElement.textContent = `${completedCount}/${totalCount} completed`;
460 |                 }
461 |             }
462 |         });
463 |     }
464 | 
465 |     saveResponses() {
466 |         localStorage.setItem('gdpr_responses', JSON.stringify(this.responses));
467 |         localStorage.setItem('gdpr_last_updated', new Date().toISOString());
468 |     }
469 | 
470 |     loadSavedResponses() {
471 |         const saved = localStorage.getItem('gdpr_responses');
472 |         if (saved) {
473 |             try {
474 |                 this.responses = JSON.parse(saved);
475 |                 this.updateProgress();
476 |                 
477 |                 // Update checkboxes
478 |                 Object.keys(this.responses).forEach(itemId => {
479 |                     const checkbox = document.getElementById(`checkbox-${itemId}`);
480 |                     if (checkbox) {
481 |                         checkbox.checked = true;
482 |                     }
483 |                     
484 |                     const itemElement = document.querySelector(`[data-item-id="${itemId}"]`);
485 |                     if (itemElement) {
486 |                         itemElement.classList.add('completed');
487 |                     }
488 |                 });
489 |             } catch (error) {
490 |                 console.error('Error loading saved responses:', error);
491 |             }
492 |         }
493 |     }
494 | 
495 |     resetAssessment() {
496 |         if (confirm('Are you sure you want to reset all responses? This action cannot be undone.')) {
497 |             this.responses = {};
498 |             localStorage.removeItem('gdpr_responses');
499 |             localStorage.removeItem('gdpr_last_updated');
500 |             
501 |             // Update UI
502 |             document.querySelectorAll('.item-checkbox').forEach(checkbox => {
503 |                 checkbox.checked = false;
504 |             });
505 |             
506 |             document.querySelectorAll('.checklist-item').forEach(item => {
507 |                 item.classList.remove('completed');
508 |             });
509 |             
510 |             this.updateProgress();
511 |             
512 |             if (window.overviewManager) {
513 |                 window.overviewManager.updateOverview();
514 |             }
515 |         }
516 |     }
517 | 
518 |     exportData() {
519 |         const exportData = {
520 |             version: "1.0",
521 |             timestamp: new Date().toISOString(),
522 |             language: this.currentLang,
523 |             responses: this.responses,
524 |             scores: {
525 |                 completed: this.completedItems,
526 |                 total: this.totalItems,
527 |                 currentScore: this.currentScore,
528 |                 maxScore: this.maxScore,
529 |                 percentage: this.maxScore > 0 ? (this.currentScore / this.maxScore) * 100 : 0
530 |             }
531 |         };
532 | 
533 |         return exportData;
534 |     }
535 | 
536 |     importData(importData) {
537 |         try {
538 |             if (importData.version && importData.responses) {
539 |                 this.responses = importData.responses;
540 |                 
541 |                 if (importData.language) {
542 |                     this.setLanguage(importData.language);
543 |                 }
544 |                 
545 |                 this.saveResponses();
546 |                 this.renderCategories();
547 |                 this.updateProgress();
548 |                 
549 |                 if (window.overviewManager) {
550 |                     window.overviewManager.updateOverview();
551 |                 }
552 |                 
553 |                 return true;
554 |             }
555 |         } catch (error) {
556 |             console.error('Error importing data:', error);
557 |         }
558 |         return false;
559 |     }
560 | 
561 |     getComplianceLevel() {
562 |         const scorePercentage = this.maxScore > 0 ? (this.currentScore / this.maxScore) * 100 : 0;
563 |         
564 |         if (scorePercentage >= scoringConfig.thresholds.excellent) return 'excellent';
565 |         if (scorePercentage >= scoringConfig.thresholds.good) return 'good';
566 |         if (scorePercentage >= scoringConfig.thresholds.moderate) return 'moderate';
567 |         if (scorePercentage >= scoringConfig.thresholds.poor) return 'poor';
568 |         return 'critical';
569 |     }
570 | 
571 |     getCategoryScores() {
572 |         const data = gdprData[this.currentLang];
573 |         if (!data) return [];
574 | 
575 |         return data.categories.map(category => {
576 |             const completedCount = category.items.filter(item => this.responses[item.id]).length;
577 |             const totalCount = category.items.length;
578 |             const percentage = totalCount > 0 ? (completedCount / totalCount) * 100 : 0;
579 |             
580 |             let level = 'low';
581 |             if (percentage >= 80) level = 'high';
582 |             else if (percentage >= 60) level = 'medium';
583 |             
584 |             return {
585 |                 id: category.id,
586 |                 title: category.title,
587 |                 completed: completedCount,
588 |                 total: totalCount,
589 |                 percentage: Math.round(percentage),
590 |                 level: level
591 |             };
592 |         });
593 |     }
594 | 
595 |     getRecommendations() {
596 |         const data = gdprData[this.currentLang];
597 |         if (!data) return [];
598 | 
599 |         const recommendations = [];
600 |         
601 |         data.categories.forEach(category => {
602 |             category.items.forEach(item => {
603 |                 if (!this.responses[item.id] && item.required) {
604 |                     recommendations.push({
605 |                         title: item.title,
606 |                         category: category.title,
607 |                         description: `${item.description.substring(0, 100)}...`,
608 |                         priority: item.weight
609 |                     });
610 |                 }
611 |             });
612 |         });
613 | 
614 |         // Sort by priority (weight) descending
615 |         recommendations.sort((a, b) => b.priority - a.priority);
616 |         
617 |         // Return top 5 recommendations
618 |         return recommendations.slice(0, 5);
619 |     }
620 | }
621 | 
622 | // Global functions for event handling
623 | function toggleCategory(categoryId) {
624 |     if (window.assessmentManager) {
625 |         window.assessmentManager.toggleCategory(categoryId);
626 |     }
627 | }
628 | 
629 | function handleCheckboxChange(itemId, isChecked) {
630 |     if (window.assessmentManager) {
631 |         window.assessmentManager.handleCheckboxChange(itemId, isChecked);
632 |     }
633 | }
634 | 
635 | function showItemDetails(itemId) {
636 |     if (window.assessmentManager) {
637 |         window.assessmentManager.showItemDetails(itemId);
638 |     }
639 | }
640 | 
641 | function closeModal() {
642 |     if (window.assessmentManager) {
643 |         window.assessmentManager.closeModal();
644 |     }
645 | }
646 | 
647 | // Close modal on ESC key
648 | document.addEventListener('keydown', function(event) {
649 |     if (event.key === 'Escape') {
650 |         closeModal();
651 |     }
652 | });
653 | 
654 | // Close modal on backdrop click
655 | document.addEventListener('click', function(event) {
656 |     const modal = document.getElementById('itemModal');
657 |     if (event.target === modal) {
658 |         closeModal();
659 |     }
660 | });
661 | 
662 | // Export for use in other modules
663 | if (typeof module !== 'undefined' && module.exports) {
664 |     module.exports = GDPRAssessment;
665 | }


--------------------------------------------------------------------------------
/webapp/js/export.js:
--------------------------------------------------------------------------------
  1 | // Export and import functionality
  2 | class ExportManager {
  3 |     constructor(assessmentManager, overviewManager) {
  4 |         this.assessmentManager = assessmentManager;
  5 |         this.overviewManager = overviewManager;
  6 |         this.init();
  7 |     }
  8 | 
  9 |     init() {
 10 |         this.setupEventListeners();
 11 |     }
 12 | 
 13 |     setupEventListeners() {
 14 |         // Export JSON button
 15 |         const exportJsonBtn = document.getElementById('exportJson');
 16 |         if (exportJsonBtn) {
 17 |             exportJsonBtn.addEventListener('click', () => this.exportJSON());
 18 |         }
 19 | 
 20 |         // Export PDF button  
 21 |         const exportPdfBtn = document.getElementById('exportPdf');
 22 |         if (exportPdfBtn) {
 23 |             exportPdfBtn.addEventListener('click', () => this.exportDirectPDF());
 24 |         }
 25 |         
 26 |         // Check PDF library availability
 27 |         this.checkPDFLibrary();
 28 | 
 29 |         // Import button
 30 |         const importBtn = document.getElementById('importBtn');
 31 |         const importFile = document.getElementById('importFile');
 32 |         
 33 |         if (importBtn && importFile) {
 34 |             importBtn.addEventListener('click', () => importFile.click());
 35 |             importFile.addEventListener('change', (e) => this.importJSON(e));
 36 |         }
 37 | 
 38 |         // Reset button
 39 |         const resetBtn = document.getElementById('resetBtn');
 40 |         if (resetBtn) {
 41 |             resetBtn.addEventListener('click', () => this.resetAssessment());
 42 |         }
 43 |     }
 44 | 
 45 |     checkPDFLibrary() {
 46 |         // Check if jsPDF is loaded, if not try to load it dynamically
 47 |         if (!window.jsPDF && !window.jspdf) {
 48 |             console.log('jsPDF not found, checking if script is loaded...');
 49 |             
 50 |             // Wait a bit for scripts to load, then check again
 51 |             setTimeout(() => {
 52 |                 if (!window.jsPDF && !window.jspdf) {
 53 |                     console.warn('jsPDF library not loaded. PDF export may not work.');
 54 |                     
 55 |                     // Try to load jsPDF dynamically as fallback
 56 |                     const script = document.createElement('script');
 57 |                     script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js';
 58 |                     script.onload = () => {
 59 |                         console.log('jsPDF loaded dynamically');
 60 |                     };
 61 |                     script.onerror = () => {
 62 |                         console.error('Failed to load jsPDF dynamically');
 63 |                     };
 64 |                     document.head.appendChild(script);
 65 |                 }
 66 |             }, 1000);
 67 |         } else {
 68 |             console.log('jsPDF library is available');
 69 |         }
 70 |     }
 71 | 
 72 |     exportJSON() {
 73 |         if (!this.assessmentManager) return;
 74 | 
 75 |         try {
 76 |             const exportData = this.assessmentManager.exportData();
 77 |             const jsonString = JSON.stringify(exportData, null, 2);
 78 |             const blob = new Blob([jsonString], { type: 'application/json' });
 79 |             
 80 |             const url = URL.createObjectURL(blob);
 81 |             const link = document.createElement('a');
 82 |             link.href = url;
 83 |             link.download = `gdpr-assessment-${this.formatDate(new Date())}.json`;
 84 |             
 85 |             document.body.appendChild(link);
 86 |             link.click();
 87 |             document.body.removeChild(link);
 88 |             
 89 |             URL.revokeObjectURL(url);
 90 |             
 91 |             this.showNotification('Assessment exported successfully!', 'success');
 92 |         } catch (error) {
 93 |             console.error('Export error:', error);
 94 |             this.showNotification('Error exporting assessment', 'error');
 95 |         }
 96 |     }
 97 | 
 98 |     exportDirectPDF() {
 99 |         console.log('Starting direct PDF export...');
100 | 
101 |         // Check if jsPDF is available
102 |         if (!window.jsPDF && !window.jspdf) {
103 |             this.showNotification('PDF library not loaded. Please refresh the page.', 'error');
104 |             console.error('jsPDF library not found. Make sure the script is loaded.');
105 |             return;
106 |         }
107 | 
108 |         try {
109 |             // Try different possible jsPDF references
110 |             let jsPDF;
111 |             
112 |             if (window.jspdf && window.jspdf.jsPDF) {
113 |                 jsPDF = window.jspdf.jsPDF;
114 |                 console.log('Using window.jspdf.jsPDF');
115 |             } else if (window.jsPDF) {
116 |                 jsPDF = window.jsPDF;
117 |                 console.log('Using window.jsPDF');
118 |             } else {
119 |                 throw new Error('jsPDF library not found');
120 |             }
121 |             
122 |             const doc = new jsPDF();
123 |             
124 |             // Get assessment data from localStorage and checklist structure
125 |             const assessmentData = this.getAssessmentData();
126 |             const currentLang = localStorage.getItem('gdpr_language') || 'en';
127 |             
128 |             console.log('Assessment data loaded:', assessmentData.length, 'items');
129 |             
130 |             // Calculate statistics
131 |             const totalItems = assessmentData.length;
132 |             const completedItems = assessmentData.filter(item => item.completed).length;
133 |             const ignoredItems = assessmentData.filter(item => item.ignored).length;
134 |             const pendingItems = assessmentData.filter(item => !item.completed && !item.ignored).length;
135 |             const score = totalItems > 0 ? Math.round((completedItems / totalItems) * 100) : 0;
136 |             
137 |             // Set up document header
138 |             doc.setFontSize(20);
139 |             doc.text('GDPR Compliance Assessment Report', 20, 30);
140 |             
141 |             doc.setFontSize(12);
142 |             doc.text(`Generated on: ${new Date().toLocaleDateString()}`, 20, 45);
143 |             doc.text(`Language: ${currentLang.toUpperCase()}`, 20, 55);
144 |             
145 |             // Overall Score
146 |             doc.setFontSize(16);
147 |             doc.text('Overall Compliance Score', 20, 75);
148 |             doc.setFontSize(24);
149 |             
150 |             // Color based on score
151 |             if (score >= 80) {
152 |                 doc.setTextColor(40, 167, 69); // Green
153 |             } else if (score >= 60) {
154 |                 doc.setTextColor(255, 193, 7); // Yellow
155 |             } else {
156 |                 doc.setTextColor(220, 53, 69); // Red
157 |             }
158 |             doc.text(`${score}%`, 20, 95);
159 |             doc.setTextColor(0, 0, 0); // Reset to black
160 |             
161 |             // Summary statistics
162 |             let yPos = 115;
163 |             doc.setFontSize(14);
164 |             doc.text('Summary Statistics:', 20, yPos);
165 |             yPos += 15;
166 |             
167 |             doc.setFontSize(11);
168 |             doc.text(`Total Items: ${totalItems}`, 25, yPos);
169 |             yPos += 8;
170 |             doc.text(`Completed: ${completedItems}`, 25, yPos);
171 |             yPos += 8;
172 |             doc.text(`Ignored: ${ignoredItems}`, 25, yPos);
173 |             yPos += 8;
174 |             doc.text(`Pending: ${pendingItems}`, 25, yPos);
175 |             yPos += 20;
176 |             
177 |             // Group items by category for breakdown
178 |             const categoryMap = new Map();
179 |             assessmentData.forEach(item => {
180 |                 if (!categoryMap.has(item.category)) {
181 |                     categoryMap.set(item.category, {
182 |                         total: 0,
183 |                         completed: 0,
184 |                         ignored: 0
185 |                     });
186 |                 }
187 |                 const cat = categoryMap.get(item.category);
188 |                 cat.total++;
189 |                 if (item.completed) cat.completed++;
190 |                 if (item.ignored) cat.ignored++;
191 |             });
192 |             
193 |             // Category Breakdown
194 |             doc.setFontSize(14);
195 |             doc.text('Category Breakdown:', 20, yPos);
196 |             yPos += 15;
197 |             
198 |             doc.setFontSize(11);
199 |             for (const [categoryName, stats] of categoryMap) {
200 |                 if (yPos > 250) {
201 |                     doc.addPage();
202 |                     yPos = 20;
203 |                 }
204 |                 const categoryScore = stats.total > 0 ? Math.round((stats.completed / stats.total) * 100) : 0;
205 |                 doc.text(`${categoryName}: ${categoryScore}% (${stats.completed}/${stats.total} completed)`, 25, yPos);
206 |                 yPos += 10;
207 |             }
208 |             
209 |             // Pending Items (recommendations)
210 |             const pendingItemsList = assessmentData.filter(item => !item.completed && !item.ignored);
211 |             if (pendingItemsList.length > 0) {
212 |                 yPos += 10;
213 |                 if (yPos > 240) {
214 |                     doc.addPage();
215 |                     yPos = 20;
216 |                 }
217 |                 
218 |                 doc.setFontSize(14);
219 |                 doc.text('Priority Recommendations:', 20, yPos);
220 |                 yPos += 15;
221 |                 
222 |                 doc.setFontSize(11);
223 |                 // Show top 10 pending items, prioritize required ones
224 |                 const prioritizedPending = pendingItemsList
225 |                     .sort((a, b) => (b.required ? 1 : 0) - (a.required ? 1 : 0))
226 |                     .slice(0, 10);
227 |                 
228 |                 prioritizedPending.forEach((item, index) => {
229 |                     if (yPos > 250) {
230 |                         doc.addPage();
231 |                         yPos = 20;
232 |                     }
233 |                     
234 |                     const prefix = item.required ? '[Required]' : '[Optional]';
235 |                     const title = `${prefix} ${item.title}`;
236 |                     const lines = doc.splitTextToSize(`${index + 1}. ${title}`, 170);
237 |                     doc.text(lines, 25, yPos);
238 |                     yPos += lines.length * 6 + 3;
239 |                 });
240 |             }
241 |             
242 |             // Save the PDF
243 |             const timestamp = new Date().toISOString().split('T')[0];
244 |             doc.save(`gdpr-assessment-${timestamp}.pdf`);
245 |             
246 |             this.showNotification('PDF report generated successfully!', 'success');
247 |             console.log('PDF export completed successfully');
248 |         } catch (error) {
249 |             console.error('Direct PDF export error:', error);
250 |             
251 |             // Fallback to browser print dialog
252 |             if (confirm('PDF generation failed. Would you like to use your browser\'s print function instead?\n\nClick OK to open print dialog, or Cancel to try again later.')) {
253 |                 this.fallbackToPrint();
254 |             } else {
255 |                 this.showNotification('PDF export failed. Try refreshing the page.', 'error');
256 |             }
257 |         }
258 |     }
259 | 
260 |     exportPDF() {
261 |         // Fallback method for browser printing
262 |         if (!this.overviewManager) return;
263 | 
264 |         try {
265 |             // Generate HTML report
266 |             const htmlReport = this.overviewManager.generateHTMLReport();
267 |             
268 |             // Create a new window to display the report for printing
269 |             const printWindow = window.open('', '_blank');
270 |             printWindow.document.write(htmlReport);
271 |             printWindow.document.close();
272 |             
273 |             // Wait for content to load, then trigger print dialog
274 |             printWindow.onload = () => {
275 |                 setTimeout(() => {
276 |                     printWindow.print();
277 |                 }, 100);
278 |             };
279 |             
280 |             this.showNotification('Report opened for printing/PDF export', 'success');
281 |         } catch (error) {
282 |             console.error('PDF export error:', error);
283 |             this.showNotification('Error generating PDF report', 'error');
284 |         }
285 |     }
286 | 
287 |     importJSON(event) {
288 |         const file = event.target.files[0];
289 |         if (!file) return;
290 | 
291 |         if (file.type !== 'application/json') {
292 |             this.showNotification('Please select a valid JSON file', 'error');
293 |             return;
294 |         }
295 | 
296 |         const reader = new FileReader();
297 |         reader.onload = (e) => {
298 |             try {
299 |                 const importData = JSON.parse(e.target.result);
300 |                 
301 |                 if (this.validateImportData(importData)) {
302 |                     const success = this.assessmentManager.importData(importData);
303 |                     
304 |                     if (success) {
305 |                         this.showNotification('Assessment imported successfully!', 'success');
306 |                     } else {
307 |                         this.showNotification('Error importing assessment data', 'error');
308 |                     }
309 |                 } else {
310 |                     this.showNotification('Invalid assessment file format', 'error');
311 |                 }
312 |             } catch (error) {
313 |                 console.error('Import error:', error);
314 |                 this.showNotification('Error reading assessment file', 'error');
315 |             }
316 |         };
317 |         
318 |         reader.readAsText(file);
319 |         
320 |         // Reset file input
321 |         event.target.value = '';
322 |     }
323 | 
324 |     validateImportData(data) {
325 |         // Check for required properties
326 |         if (!data || typeof data !== 'object') return false;
327 |         if (!data.version || !data.responses) return false;
328 |         if (typeof data.responses !== 'object') return false;
329 |         
330 |         return true;
331 |     }
332 | 
333 |     resetAssessment() {
334 |         if (this.assessmentManager) {
335 |             this.assessmentManager.resetAssessment();
336 |         }
337 |     }
338 | 
339 |     formatDate(date) {
340 |         const year = date.getFullYear();
341 |         const month = String(date.getMonth() + 1).padStart(2, '0');
342 |         const day = String(date.getDate()).padStart(2, '0');
343 |         const hours = String(date.getHours()).padStart(2, '0');
344 |         const minutes = String(date.getMinutes()).padStart(2, '0');
345 |         
346 |         return `${year}-${month}-${day}_${hours}-${minutes}`;
347 |     }
348 | 
349 |     showNotification(message, type = 'info') {
350 |         // Create notification element
351 |         const notification = document.createElement('div');
352 |         notification.className = `notification notification-${type}`;
353 |         notification.innerHTML = `
354 |             <div class="notification-content">
355 |                 <i class="fas ${this.getNotificationIcon(type)}"></i>
356 |                 <span>${message}</span>
357 |             </div>
358 |             <button class="notification-close" onclick="this.parentElement.remove()">
359 |                 <i class="fas fa-times"></i>
360 |             </button>
361 |         `;
362 |         
363 |         // Add styles if not already present
364 |         this.addNotificationStyles();
365 |         
366 |         // Add to page
367 |         document.body.appendChild(notification);
368 |         
369 |         // Auto-remove after 5 seconds
370 |         setTimeout(() => {
371 |             if (notification.parentNode) {
372 |                 notification.remove();
373 |             }
374 |         }, 5000);
375 |         
376 |         // Add entrance animation
377 |         setTimeout(() => {
378 |             notification.classList.add('notification-show');
379 |         }, 10);
380 |     }
381 | 
382 |     getNotificationIcon(type) {
383 |         switch (type) {
384 |             case 'success': return 'fa-check-circle';
385 |             case 'error': return 'fa-exclamation-circle';
386 |             case 'warning': return 'fa-exclamation-triangle';
387 |             default: return 'fa-info-circle';
388 |         }
389 |     }
390 | 
391 |     addNotificationStyles() {
392 |         if (document.getElementById('notification-styles')) return;
393 |         
394 |         const style = document.createElement('style');
395 |         style.id = 'notification-styles';
396 |         style.textContent = `
397 |             .notification {
398 |                 position: fixed;
399 |                 top: 20px;
400 |                 right: 20px;
401 |                 background: white;
402 |                 border-radius: 8px;
403 |                 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
404 |                 z-index: 3000;
405 |                 display: flex;
406 |                 align-items: center;
407 |                 justify-content: space-between;
408 |                 padding: 16px;
409 |                 min-width: 300px;
410 |                 max-width: 400px;
411 |                 opacity: 0;
412 |                 transform: translateX(100%);
413 |                 transition: all 0.3s ease;
414 |             }
415 |             
416 |             .notification-show {
417 |                 opacity: 1;
418 |                 transform: translateX(0);
419 |             }
420 |             
421 |             .notification-content {
422 |                 display: flex;
423 |                 align-items: center;
424 |                 gap: 12px;
425 |                 flex: 1;
426 |             }
427 |             
428 |             .notification-success {
429 |                 border-left: 4px solid #27ae60;
430 |             }
431 |             
432 |             .notification-success .fa-check-circle {
433 |                 color: #27ae60;
434 |             }
435 |             
436 |             .notification-error {
437 |                 border-left: 4px solid #e74c3c;
438 |             }
439 |             
440 |             .notification-error .fa-exclamation-circle {
441 |                 color: #e74c3c;
442 |             }
443 |             
444 |             .notification-warning {
445 |                 border-left: 4px solid #f39c12;
446 |             }
447 |             
448 |             .notification-warning .fa-exclamation-triangle {
449 |                 color: #f39c12;
450 |             }
451 |             
452 |             .notification-info {
453 |                 border-left: 4px solid #3498db;
454 |             }
455 |             
456 |             .notification-info .fa-info-circle {
457 |                 color: #3498db;
458 |             }
459 |             
460 |             .notification-close {
461 |                 background: none;
462 |                 border: none;
463 |                 color: #666;
464 |                 cursor: pointer;
465 |                 padding: 4px;
466 |                 border-radius: 4px;
467 |                 transition: all 0.2s ease;
468 |             }
469 |             
470 |             .notification-close:hover {
471 |                 background: #f0f0f0;
472 |                 color: #333;
473 |             }
474 |             
475 |             @media (max-width: 480px) {
476 |                 .notification {
477 |                     right: 10px;
478 |                     left: 10px;
479 |                     min-width: auto;
480 |                     max-width: none;
481 |                 }
482 |             }
483 |         `;
484 |         
485 |         document.head.appendChild(style);
486 |     }
487 | 
488 |     // Utility method to generate shareable report link
489 |     generateShareableLink() {
490 |         if (!this.assessmentManager) return null;
491 |         
492 |         try {
493 |             const exportData = this.assessmentManager.exportData();
494 |             const compressed = this.compressData(exportData);
495 |             
496 |             // In a real implementation, you might upload to a server and get a short URL
497 |             // For now, we'll use URL parameters (limited by URL length)
498 |             const baseUrl = window.location.origin + window.location.pathname;
499 |             const shareUrl = `${baseUrl}?data=${encodeURIComponent(compressed)}`;
500 |             
501 |             if (shareUrl.length > 2000) {
502 |                 this.showNotification('Assessment too large to share via URL', 'warning');
503 |                 return null;
504 |             }
505 |             
506 |             return shareUrl;
507 |         } catch (error) {
508 |             console.error('Error generating shareable link:', error);
509 |             return null;
510 |         }
511 |     }
512 | 
513 |     compressData(data) {
514 |         // Simple compression - in a real app you might use a proper compression library
515 |         return btoa(JSON.stringify(data));
516 |     }
517 | 
518 |     decompressData(compressed) {
519 |         try {
520 |             return JSON.parse(atob(compressed));
521 |         } catch (error) {
522 |             console.error('Error decompressing data:', error);
523 |             return null;
524 |         }
525 |     }
526 | 
527 |     // Check for shared data in URL parameters
528 |     checkForSharedData() {
529 |         const urlParams = new URLSearchParams(window.location.search);
530 |         const sharedData = urlParams.get('data');
531 |         
532 |         if (sharedData) {
533 |             const decompressed = this.decompressData(sharedData);
534 |             if (decompressed && this.validateImportData(decompressed)) {
535 |                 // Ask user if they want to load the shared assessment
536 |                 const loadShared = confirm('This link contains a GDPR assessment. Would you like to load it?');
537 |                 if (loadShared) {
538 |                     const success = this.assessmentManager.importData(decompressed);
539 |                     if (success) {
540 |                         this.showNotification('Shared assessment loaded successfully!', 'success');
541 |                         // Clean up URL
542 |                         window.history.replaceState({}, document.title, window.location.pathname);
543 |                     }
544 |                 }
545 |             }
546 |         }
547 |     }
548 | 
549 |     getAssessmentData() {
550 |         // Get current language
551 |         const currentLang = localStorage.getItem('gdpr_language') || 'en';
552 |         
553 |         // Get saved responses and ignored items from localStorage
554 |         const savedResponses = JSON.parse(localStorage.getItem('gdpr_responses') || '{}');
555 |         const savedIgnored = JSON.parse(localStorage.getItem('gdpr_ignored') || '[]');
556 |         const ignoredSet = new Set(savedIgnored);
557 |         
558 |         // Get the data for current language from gdprData
559 |         const data = window.gdprData[currentLang];
560 |         if (!data) {
561 |             console.error('No data found for language:', currentLang);
562 |             return [];
563 |         }
564 |         
565 |         // Create flat array of all items with their status
566 |         const assessmentData = [];
567 |         
568 |         data.categories.forEach(category => {
569 |             category.items.forEach(item => {
570 |                 assessmentData.push({
571 |                     id: item.id,
572 |                     title: item.title,
573 |                     description: item.description,
574 |                     category: category.title,
575 |                     required: item.required,
576 |                     completed: !!savedResponses[item.id],
577 |                     ignored: ignoredSet.has(item.id),
578 |                     weight: item.weight || 1
579 |                 });
580 |             });
581 |         });
582 |         
583 |         return assessmentData;
584 |     }
585 | 
586 |     fallbackToPrint() {
587 |         console.log('Using browser print fallback...');
588 |         
589 |         // Create a printable version of the assessment
590 |         const printWindow = window.open('', '_blank');
591 |         const assessmentData = this.getAssessmentData();
592 |         
593 |         const printContent = `
594 | <!DOCTYPE html>
595 | <html>
596 | <head>
597 |     <title>GDPR Assessment Report</title>
598 |     <style>
599 |         body { font-family: Arial, sans-serif; margin: 20px; line-height: 1.6; }
600 |         .header { text-align: center; margin-bottom: 30px; border-bottom: 2px solid #333; padding-bottom: 20px; }
601 |         .section { margin-bottom: 30px; }
602 |         .section h2 { color: #333; border-bottom: 1px solid #ccc; padding-bottom: 10px; }
603 |         .item { margin: 15px 0; padding: 10px; border-left: 3px solid #007bff; }
604 |         .item-completed { border-left-color: #28a745; background: #f8fff9; }
605 |         .item-ignored { border-left-color: #ffc107; background: #fffbf0; }
606 |         .item-pending { border-left-color: #dc3545; background: #fff5f5; }
607 |         .status { font-weight: bold; padding: 2px 8px; border-radius: 3px; font-size: 0.9em; }
608 |         .status-completed { background: #d4edda; color: #155724; }
609 |         .status-ignored { background: #fff3cd; color: #856404; }
610 |         .status-pending { background: #f8d7da; color: #721c24; }
611 |         .summary { background: #f8f9fa; padding: 20px; border-radius: 5px; margin: 20px 0; }
612 |         @media print {
613 |             body { margin: 0; }
614 |             .no-print { display: none; }
615 |         }
616 |     </style>
617 | </head>
618 | <body>
619 |     <div class="header">
620 |         <h1>GDPR Compliance Assessment Report</h1>
621 |         <p>Generated on: ${new Date().toLocaleDateString()}</p>
622 |     </div>
623 |     
624 |     <div class="summary">
625 |         <h2>Summary</h2>
626 |         <p><strong>Total Items:</strong> ${assessmentData.length}</p>
627 |         <p><strong>Completed:</strong> ${assessmentData.filter(item => item.completed).length}</p>
628 |         <p><strong>Ignored:</strong> ${assessmentData.filter(item => item.ignored).length}</p>
629 |         <p><strong>Pending:</strong> ${assessmentData.filter(item => !item.completed && !item.ignored).length}</p>
630 |     </div>
631 |     
632 |     <div class="section">
633 |         <h2>Assessment Details</h2>
634 |         ${assessmentData.map((item, index) => {
635 |             let statusClass = 'pending';
636 |             let statusText = 'Pending';
637 |             
638 |             if (item.completed) {
639 |                 statusClass = 'completed';
640 |                 statusText = 'Completed';
641 |             } else if (item.ignored) {
642 |                 statusClass = 'ignored';
643 |                 statusText = 'Ignored';
644 |             }
645 |             
646 |             return `
647 |                 <div class="item item-${statusClass}">
648 |                     <div style="display: flex; justify-content: space-between; align-items: flex-start;">
649 |                         <div style="flex: 1;">
650 |                             <strong>${index + 1}. ${item.text}</strong>
651 |                         </div>
652 |                         <span class="status status-${statusClass}">${statusText}</span>
653 |                     </div>
654 |                 </div>
655 |             `;
656 |         }).join('')}
657 |     </div>
658 |     
659 |     <div class="no-print" style="text-align: center; margin-top: 30px;">
660 |         <button onclick="window.print()" style="padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer;">Print Report</button>
661 |         <button onclick="window.close()" style="padding: 10px 20px; background: #6c757d; color: white; border: none; border-radius: 5px; cursor: pointer; margin-left: 10px;">Close</button>
662 |     </div>
663 | </body>
664 | </html>`;
665 |         
666 |         printWindow.document.write(printContent);
667 |         printWindow.document.close();
668 |         
669 |         // Auto-trigger print dialog after a short delay
670 |         setTimeout(() => {
671 |             printWindow.print();
672 |         }, 500);
673 |     }
674 | }
675 | 
676 | // Export for use in other modules
677 | if (typeof module !== 'undefined' && module.exports) {
678 |     module.exports = ExportManager;
679 | }


--------------------------------------------------------------------------------