├── .env.example
├── server
    └── tsconfig.json
├── app
    ├── components
    │   ├── ui
    │   │   ├── progress
    │   │   │   ├── index.ts
    │   │   │   └── Progress.vue
    │   │   ├── skeleton
    │   │   │   ├── index.ts
    │   │   │   └── Skeleton.vue
    │   │   ├── separator
    │   │   │   ├── index.ts
    │   │   │   └── Separator.vue
    │   │   ├── scroll-area
    │   │   │   ├── index.ts
    │   │   │   ├── ScrollArea.vue
    │   │   │   └── ScrollBar.vue
    │   │   ├── tooltip
    │   │   │   ├── index.ts
    │   │   │   ├── TooltipTrigger.vue
    │   │   │   ├── TooltipProvider.vue
    │   │   │   ├── Tooltip.vue
    │   │   │   └── TooltipContent.vue
    │   │   ├── dialog
    │   │   │   ├── DialogClose.vue
    │   │   │   ├── DialogTrigger.vue
    │   │   │   ├── DialogHeader.vue
    │   │   │   ├── Dialog.vue
    │   │   │   ├── DialogFooter.vue
    │   │   │   ├── index.ts
    │   │   │   ├── DialogDescription.vue
    │   │   │   ├── DialogTitle.vue
    │   │   │   ├── DialogScrollContent.vue
    │   │   │   └── DialogContent.vue
    │   │   ├── card
    │   │   │   ├── CardContent.vue
    │   │   │   ├── CardFooter.vue
    │   │   │   ├── CardHeader.vue
    │   │   │   ├── index.ts
    │   │   │   ├── CardDescription.vue
    │   │   │   ├── CardTitle.vue
    │   │   │   └── Card.vue
    │   │   ├── alert
    │   │   │   ├── AlertDescription.vue
    │   │   │   ├── AlertTitle.vue
    │   │   │   ├── Alert.vue
    │   │   │   └── index.ts
    │   │   ├── badge
    │   │   │   ├── Badge.vue
    │   │   │   └── index.ts
    │   │   ├── button
    │   │   │   ├── Button.vue
    │   │   │   └── index.ts
    │   │   ├── chart
    │   │   │   ├── index.ts
    │   │   │   ├── ChartTooltip.vue
    │   │   │   ├── ChartCrosshair.vue
    │   │   │   ├── interface.ts
    │   │   │   ├── ChartLegend.vue
    │   │   │   └── ChartSingleTooltip.vue
    │   │   └── chart-line
    │   │   │   ├── index.ts
    │   │   │   └── LineChart.vue
    │   ├── AudioVisualizer.vue
    │   ├── FingerprintIcon.vue
    │   ├── FingerprintInfoModal.vue
    │   └── StatsBar.vue
    ├── lib
    │   └── utils.ts
    ├── app.vue
    ├── composables
    │   ├── useHardwareInfo.ts
    │   ├── useCanvasFingerprint.ts
    │   ├── useFingerprintHelpers.ts
    │   ├── useWebGLFingerprint.ts
    │   ├── useAudioFingerprint.ts
    │   ├── useFontDetection.ts
    │   ├── useSystemInfo.ts
    │   ├── useBrowserFingerprint.ts
    │   ├── useIncognitoDetection.ts
    │   └── useEntropyCalculator.ts
    ├── assets
    │   └── css
    │   │   └── tailwind.css
    └── pages
    │   ├── links.vue
    │   ├── privacy-tools.vue
    │   └── index.vue
├── public
    ├── favicon.ico
    ├── _robots.txt
    └── fingerprint.png
├── tsconfig.json
├── .gitignore
├── components.json
├── .github
    └── FUNDING.yml
├── LICENSE
├── package.json
├── content
    ├── fingerprinting
    │   ├── webgl.md
    │   ├── screen.md
    │   ├── hardware.md
    │   ├── browser.md
    │   ├── media.md
    │   └── system.md
    ├── privacy-tools.md
    └── links.md
├── nuxt.config.ts
├── tailwind.config.js
├── .cursorrules
├── README.md
└── design.md


/.env.example:
--------------------------------------------------------------------------------
1 | UMAMI_WEBSITE_ID=your-website-id
2 | UMAMI_HOST=your-umami-host 


--------------------------------------------------------------------------------
/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../.nuxt/tsconfig.server.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/app/components/ui/progress/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Progress } from './Progress.vue'
2 | 


--------------------------------------------------------------------------------
/app/components/ui/skeleton/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Skeleton } from './Skeleton.vue'
2 | 


--------------------------------------------------------------------------------
/app/components/ui/separator/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Separator } from './Separator.vue'
2 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LeonKohli/browser-fingerprint/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/_robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Allow: /
3 | 
4 | # Sitemap
5 | Sitemap: https://trackme.dev/sitemap.xml


--------------------------------------------------------------------------------
/public/fingerprint.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LeonKohli/browser-fingerprint/HEAD/public/fingerprint.png


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/app/components/ui/scroll-area/index.ts:
--------------------------------------------------------------------------------
1 | export { default as ScrollArea } from './ScrollArea.vue'
2 | export { default as ScrollBar } from './ScrollBar.vue'
3 | 


--------------------------------------------------------------------------------
/app/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from 'clsx'
2 | import { twMerge } from 'tailwind-merge'
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/app/components/ui/tooltip/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Tooltip } from './Tooltip.vue'
2 | export { default as TooltipContent } from './TooltipContent.vue'
3 | export { default as TooltipProvider } from './TooltipProvider.vue'
4 | export { default as TooltipTrigger } from './TooltipTrigger.vue'
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Nuxt dev/build outputs
 2 | .output
 3 | .data
 4 | .nuxt
 5 | .nitro
 6 | .cache
 7 | dist
 8 | 
 9 | # Node dependencies
10 | node_modules
11 | 
12 | # Logs
13 | logs
14 | *.log
15 | 
16 | # Misc
17 | .DS_Store
18 | .fleet
19 | .idea
20 | 
21 | # Local env files
22 | .env
23 | .env.*
24 | !.env.example
25 | 


--------------------------------------------------------------------------------
/app/components/ui/dialog/DialogClose.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { DialogClose, type DialogCloseProps } from 'radix-vue'
 3 | 
 4 | const props = defineProps<DialogCloseProps>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <DialogClose v-bind="props">
 9 |     <slot />
10 |   </DialogClose>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/app/components/ui/dialog/DialogTrigger.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { DialogTrigger, type DialogTriggerProps } from 'radix-vue'
 3 | 
 4 | const props = defineProps<DialogTriggerProps>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <DialogTrigger v-bind="props">
 9 |     <slot />
10 |   </DialogTrigger>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/app/components/ui/tooltip/TooltipTrigger.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { TooltipTrigger, type TooltipTriggerProps } from 'radix-vue'
 3 | 
 4 | const props = defineProps<TooltipTriggerProps>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <TooltipTrigger v-bind="props">
 9 |     <slot />
10 |   </TooltipTrigger>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/app/components/ui/tooltip/TooltipProvider.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { TooltipProvider, type TooltipProviderProps } from 'radix-vue'
 3 | 
 4 | const props = defineProps<TooltipProviderProps>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <TooltipProvider v-bind="props">
 9 |     <slot />
10 |   </TooltipProvider>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/app/components/ui/card/CardContent.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { HTMLAttributes } from 'vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<{
 6 |   class?: HTMLAttributes['class']
 7 | }>()
 8 | </script>
 9 | 
10 | <template>
11 |   <div :class="cn('p-6 pt-0', props.class)">
12 |     <slot />
13 |   </div>
14 | </template>
15 | 


--------------------------------------------------------------------------------
/app/components/ui/card/CardFooter.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { HTMLAttributes } from 'vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<{
 6 |   class?: HTMLAttributes['class']
 7 | }>()
 8 | </script>
 9 | 
10 | <template>
11 |   <div :class="cn('flex items-center p-6 pt-0', props.class)">
12 |     <slot />
13 |   </div>
14 | </template>
15 | 


--------------------------------------------------------------------------------
/app/components/ui/card/CardHeader.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { HTMLAttributes } from 'vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<{
 6 |   class?: HTMLAttributes['class']
 7 | }>()
 8 | </script>
 9 | 
10 | <template>
11 |   <div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
12 |     <slot />
13 |   </div>
14 | </template>
15 | 


--------------------------------------------------------------------------------
/app/components/ui/card/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Card } from './Card.vue'
2 | export { default as CardContent } from './CardContent.vue'
3 | export { default as CardDescription } from './CardDescription.vue'
4 | export { default as CardFooter } from './CardFooter.vue'
5 | export { default as CardHeader } from './CardHeader.vue'
6 | export { default as CardTitle } from './CardTitle.vue'
7 | 


--------------------------------------------------------------------------------
/app/components/ui/card/CardDescription.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { HTMLAttributes } from 'vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<{
 6 |   class?: HTMLAttributes['class']
 7 | }>()
 8 | </script>
 9 | 
10 | <template>
11 |   <p :class="cn('text-sm text-muted-foreground', props.class)">
12 |     <slot />
13 |   </p>
14 | </template>
15 | 


--------------------------------------------------------------------------------
/app/components/ui/alert/AlertDescription.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { HTMLAttributes } from 'vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<{
 6 |   class?: HTMLAttributes['class']
 7 | }>()
 8 | </script>
 9 | 
10 | <template>
11 |   <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
12 |     <slot />
13 |   </div>
14 | </template>
15 | 


--------------------------------------------------------------------------------
/app/components/ui/alert/AlertTitle.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { HTMLAttributes } from 'vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<{
 6 |   class?: HTMLAttributes['class']
 7 | }>()
 8 | </script>
 9 | 
10 | <template>
11 |   <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
12 |     <slot />
13 |   </h5>
14 | </template>
15 | 


--------------------------------------------------------------------------------
/app/components/ui/skeleton/Skeleton.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { HTMLAttributes } from 'vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | interface SkeletonProps {
 6 |   class?: HTMLAttributes['class']
 7 | }
 8 | 
 9 | const props = defineProps<SkeletonProps>()
10 | </script>
11 | 
12 | <template>
13 |   <div :class="cn('animate-pulse rounded-md bg-muted', props.class)" />
14 | </template>
15 | 


--------------------------------------------------------------------------------
/app/components/ui/dialog/DialogHeader.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { HTMLAttributes } from 'vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<{
 6 |   class?: HTMLAttributes['class']
 7 | }>()
 8 | </script>
 9 | 
10 | <template>
11 |   <div
12 |     :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)"
13 |   >
14 |     <slot />
15 |   </div>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/app/components/ui/card/CardTitle.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { HTMLAttributes } from 'vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<{
 6 |   class?: HTMLAttributes['class']
 7 | }>()
 8 | </script>
 9 | 
10 | <template>
11 |   <h3
12 |     :class="
13 |       cn('text-2xl font-semibold leading-none tracking-tight', props.class)
14 |     "
15 |   >
16 |     <slot />
17 |   </h3>
18 | </template>
19 | 


--------------------------------------------------------------------------------
/app/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <NuxtPage />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script setup lang="ts">
 8 | defineOgImageComponent('NuxtSeo', {
 9 |   title: 'Browser Fingerprint',
10 |   description: 'Generate and analyze your unique browser fingerprint. Understand how websites can track you.',
11 |   siteLogo: '/fingerprint.png',
12 |   siteName: 'Browser Fingerprint',
13 |   icon: 'mdi-fingerprint',
14 |   colorMode: 'dark',
15 | })
16 | </script>


--------------------------------------------------------------------------------
/app/components/ui/dialog/Dialog.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'
 3 | 
 4 | const props = defineProps<DialogRootProps>()
 5 | const emits = defineEmits<DialogRootEmits>()
 6 | 
 7 | const forwarded = useForwardPropsEmits(props, emits)
 8 | </script>
 9 | 
10 | <template>
11 |   <DialogRoot v-bind="forwarded">
12 |     <slot />
13 |   </DialogRoot>
14 | </template>
15 | 


--------------------------------------------------------------------------------
/app/components/ui/tooltip/Tooltip.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'radix-vue'
 3 | 
 4 | const props = defineProps<TooltipRootProps>()
 5 | const emits = defineEmits<TooltipRootEmits>()
 6 | 
 7 | const forwarded = useForwardPropsEmits(props, emits)
 8 | </script>
 9 | 
10 | <template>
11 |   <TooltipRoot v-bind="forwarded">
12 |     <slot />
13 |   </TooltipRoot>
14 | </template>
15 | 


--------------------------------------------------------------------------------
/app/components/ui/badge/Badge.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { HTMLAttributes } from 'vue'
 3 | import { cn } from '@/lib/utils'
 4 | import { type BadgeVariants, badgeVariants } from '.'
 5 | 
 6 | const props = defineProps<{
 7 |   variant?: BadgeVariants['variant']
 8 |   class?: HTMLAttributes['class']
 9 | }>()
10 | </script>
11 | 
12 | <template>
13 |   <div :class="cn(badgeVariants({ variant }), props.class)">
14 |     <slot />
15 |   </div>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/app/components/ui/card/Card.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { HTMLAttributes } from 'vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<{
 6 |   class?: HTMLAttributes['class']
 7 | }>()
 8 | </script>
 9 | 
10 | <template>
11 |   <div
12 |     :class="
13 |       cn(
14 |         'rounded-lg border bg-card text-card-foreground shadow-sm',
15 |         props.class,
16 |       )
17 |     "
18 |   >
19 |     <slot />
20 |   </div>
21 | </template>
22 | 


--------------------------------------------------------------------------------
/app/components/ui/alert/Alert.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { HTMLAttributes } from 'vue'
 3 | import { cn } from '@/lib/utils'
 4 | import { type AlertVariants, alertVariants } from '.'
 5 | 
 6 | const props = defineProps<{
 7 |   class?: HTMLAttributes['class']
 8 |   variant?: AlertVariants['variant']
 9 | }>()
10 | </script>
11 | 
12 | <template>
13 |   <div :class="cn(alertVariants({ variant }), props.class)" role="alert">
14 |     <slot />
15 |   </div>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/app/components/ui/dialog/DialogFooter.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { HTMLAttributes } from 'vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <div
10 |     :class="
11 |       cn(
12 |         'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
13 |         props.class,
14 |       )
15 |     "
16 |   >
17 |     <slot />
18 |   </div>
19 | </template>
20 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://shadcn-vue.com/schema.json",
 3 |   "style": "default",
 4 |   "typescript": true,
 5 |   "tsConfigPath": ".nuxt/tsconfig.json",
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.js",
 8 |     "css": "app/assets/css/tailwind.css",
 9 |     "baseColor": "zinc",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "framework": "nuxt",
14 |   "aliases": {
15 |     "components": "@/components",
16 |     "utils": "@/lib/utils"
17 |   }
18 | }


--------------------------------------------------------------------------------
/app/components/ui/dialog/index.ts:
--------------------------------------------------------------------------------
 1 | export { default as Dialog } from './Dialog.vue'
 2 | export { default as DialogClose } from './DialogClose.vue'
 3 | export { default as DialogContent } from './DialogContent.vue'
 4 | export { default as DialogDescription } from './DialogDescription.vue'
 5 | export { default as DialogFooter } from './DialogFooter.vue'
 6 | export { default as DialogHeader } from './DialogHeader.vue'
 7 | export { default as DialogScrollContent } from './DialogScrollContent.vue'
 8 | export { default as DialogTitle } from './DialogTitle.vue'
 9 | export { default as DialogTrigger } from './DialogTrigger.vue'
10 | 


--------------------------------------------------------------------------------
/app/components/ui/button/Button.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { HTMLAttributes } from 'vue'
 3 | import { cn } from '@/lib/utils'
 4 | import { Primitive, type PrimitiveProps } from 'radix-vue'
 5 | import { type ButtonVariants, buttonVariants } from '.'
 6 | 
 7 | interface Props extends PrimitiveProps {
 8 |   variant?: ButtonVariants['variant']
 9 |   size?: ButtonVariants['size']
10 |   class?: HTMLAttributes['class']
11 | }
12 | 
13 | const props = withDefaults(defineProps<Props>(), {
14 |   as: 'button',
15 | })
16 | </script>
17 | 
18 | <template>
19 |   <Primitive
20 |     :as="as"
21 |     :as-child="asChild"
22 |     :class="cn(buttonVariants({ variant, size }), props.class)"
23 |   >
24 |     <slot />
25 |   </Primitive>
26 | </template>
27 | 


--------------------------------------------------------------------------------
/app/components/ui/dialog/DialogDescription.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { cn } from '@/lib/utils'
 3 | import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'radix-vue'
 4 | import { computed, type HTMLAttributes } from 'vue'
 5 | 
 6 | const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
 7 | 
 8 | const delegatedProps = computed(() => {
 9 |   const { class: _, ...delegated } = props
10 | 
11 |   return delegated
12 | })
13 | 
14 | const forwardedProps = useForwardProps(delegatedProps)
15 | </script>
16 | 
17 | <template>
18 |   <DialogDescription
19 |     v-bind="forwardedProps"
20 |     :class="cn('text-sm text-muted-foreground', props.class)"
21 |   >
22 |     <slot />
23 |   </DialogDescription>
24 | </template>
25 | 


--------------------------------------------------------------------------------
/app/components/ui/dialog/DialogTitle.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { cn } from '@/lib/utils'
 3 | import { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue'
 4 | import { computed, type HTMLAttributes } from 'vue'
 5 | 
 6 | const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
 7 | 
 8 | const delegatedProps = computed(() => {
 9 |   const { class: _, ...delegated } = props
10 | 
11 |   return delegated
12 | })
13 | 
14 | const forwardedProps = useForwardProps(delegatedProps)
15 | </script>
16 | 
17 | <template>
18 |   <DialogTitle
19 |     v-bind="forwardedProps"
20 |     :class="
21 |       cn(
22 |         'text-lg font-semibold leading-none tracking-tight',
23 |         props.class,
24 |       )
25 |     "
26 |   >
27 |     <slot />
28 |   </DialogTitle>
29 | </template>
30 | 


--------------------------------------------------------------------------------
/app/components/ui/chart/index.ts:
--------------------------------------------------------------------------------
 1 | export { default as ChartCrosshair } from './ChartCrosshair.vue'
 2 | export { default as ChartLegend } from './ChartLegend.vue'
 3 | export { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'
 4 | export { default as ChartTooltip } from './ChartTooltip.vue'
 5 | 
 6 | export function defaultColors(count: number = 3) {
 7 |   const quotient = Math.floor(count / 2)
 8 |   const remainder = count % 2
 9 | 
10 |   const primaryCount = quotient + remainder
11 |   const secondaryCount = quotient
12 |   return [
13 |     ...Array.from(new Array(primaryCount).keys()).map(i => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),
14 |     ...Array.from(new Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),
15 |   ];
16 | }
17 | 
18 | export * from './interface'
19 | 


--------------------------------------------------------------------------------
/app/components/ui/alert/index.ts:
--------------------------------------------------------------------------------
 1 | import { cva, type VariantProps } from 'class-variance-authority'
 2 | 
 3 | export { default as Alert } from './Alert.vue'
 4 | export { default as AlertDescription } from './AlertDescription.vue'
 5 | export { default as AlertTitle } from './AlertTitle.vue'
 6 | 
 7 | export const alertVariants = cva(
 8 |   'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: 'bg-background text-foreground',
13 |         destructive:
14 |           'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
15 |       },
16 |     },
17 |     defaultVariants: {
18 |       variant: 'default',
19 |     },
20 |   },
21 | )
22 | 
23 | export type AlertVariants = VariantProps<typeof alertVariants>
24 | 


--------------------------------------------------------------------------------
/app/components/ui/scroll-area/ScrollArea.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { cn } from '@/lib/utils'
 3 | import {
 4 |   ScrollAreaCorner,
 5 |   ScrollAreaRoot,
 6 |   type ScrollAreaRootProps,
 7 |   ScrollAreaViewport,
 8 | } from 'radix-vue'
 9 | import { computed, type HTMLAttributes } from 'vue'
10 | import ScrollBar from './ScrollBar.vue'
11 | 
12 | const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()
13 | 
14 | const delegatedProps = computed(() => {
15 |   const { class: _, ...delegated } = props
16 | 
17 |   return delegated
18 | })
19 | </script>
20 | 
21 | <template>
22 |   <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
23 |     <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
24 |       <slot />
25 |     </ScrollAreaViewport>
26 |     <ScrollBar />
27 |     <ScrollAreaCorner />
28 |   </ScrollAreaRoot>
29 | </template>
30 | 


--------------------------------------------------------------------------------
/app/components/ui/badge/index.ts:
--------------------------------------------------------------------------------
 1 | import { cva, type VariantProps } from 'class-variance-authority'
 2 | 
 3 | export { default as Badge } from './Badge.vue'
 4 | 
 5 | export const badgeVariants = cva(
 6 |   'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
 7 |   {
 8 |     variants: {
 9 |       variant: {
10 |         default:
11 |           'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
12 |         secondary:
13 |           'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
14 |         destructive:
15 |           'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
16 |         outline: 'text-foreground',
17 |       },
18 |     },
19 |     defaultVariants: {
20 |       variant: 'default',
21 |     },
22 |   },
23 | )
24 | 
25 | export type BadgeVariants = VariantProps<typeof badgeVariants>
26 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
 1 | # These are supported funding model platforms
 2 | 
 3 | github: leonkohli # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
 4 | patreon: # Replace with a single Patreon username
 5 | open_collective: # Replace with a single Open Collective username
 6 | ko_fi: leonkohli # Replace with a single Ko-fi username
 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
12 | polar: # Replace with a single Polar username
13 | buy_me_a_coffee: leonkohli # Replace with a single Buy Me a Coffee username
14 | thanks_dev: # Replace with a single thanks.dev username
15 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
16 | 


--------------------------------------------------------------------------------
/app/components/ui/progress/Progress.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { cn } from '@/lib/utils'
 3 | import {
 4 |   ProgressIndicator,
 5 |   ProgressRoot,
 6 |   type ProgressRootProps,
 7 | } from 'radix-vue'
 8 | import { computed, type HTMLAttributes } from 'vue'
 9 | 
10 | const props = withDefaults(
11 |   defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),
12 |   {
13 |     modelValue: 0,
14 |   },
15 | )
16 | 
17 | const delegatedProps = computed(() => {
18 |   const { class: _, ...delegated } = props
19 | 
20 |   return delegated
21 | })
22 | </script>
23 | 
24 | <template>
25 |   <ProgressRoot
26 |     v-bind="delegatedProps"
27 |     :class="
28 |       cn(
29 |         'relative h-4 w-full overflow-hidden rounded-full bg-secondary',
30 |         props.class,
31 |       )
32 |     "
33 |   >
34 |     <ProgressIndicator
35 |       class="h-full w-full flex-1 bg-primary transition-all"
36 |       :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
37 |     />
38 |   </ProgressRoot>
39 | </template>
40 | 


--------------------------------------------------------------------------------
/app/components/ui/scroll-area/ScrollBar.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { cn } from '@/lib/utils'
 3 | import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'
 4 | import { computed, type HTMLAttributes } from 'vue'
 5 | 
 6 | const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
 7 |   orientation: 'vertical',
 8 | })
 9 | 
10 | const delegatedProps = computed(() => {
11 |   const { class: _, ...delegated } = props
12 | 
13 |   return delegated
14 | })
15 | </script>
16 | 
17 | <template>
18 |   <ScrollAreaScrollbar
19 |     v-bind="delegatedProps"
20 |     :class="
21 |       cn('flex touch-none select-none transition-colors',
22 |          orientation === 'vertical'
23 |            && 'h-full w-2.5 border-l border-l-transparent p-px',
24 |          orientation === 'horizontal'
25 |            && 'h-2.5 flex-col border-t border-t-transparent p-px',
26 |          props.class)"
27 |   >
28 |     <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
29 |   </ScrollAreaScrollbar>
30 | </template>
31 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Leon Kohli
 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/components/ui/separator/Separator.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { cn } from '@/lib/utils'
 3 | import { Separator, type SeparatorProps } from 'radix-vue'
 4 | import { computed, type HTMLAttributes } from 'vue'
 5 | 
 6 | const props = defineProps<
 7 |   SeparatorProps & { class?: HTMLAttributes['class'], label?: string }
 8 | >()
 9 | 
10 | const delegatedProps = computed(() => {
11 |   const { class: _, ...delegated } = props
12 | 
13 |   return delegated
14 | })
15 | </script>
16 | 
17 | <template>
18 |   <Separator
19 |     v-bind="delegatedProps"
20 |     :class="
21 |       cn(
22 |         'shrink-0 bg-border relative',
23 |         props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
24 |         props.class,
25 |       )
26 |     "
27 |   >
28 |     <span
29 |       v-if="props.label"
30 |       :class="cn('text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',
31 |                  props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',
32 |       )"
33 |     >{{ props.label }}</span>
34 |   </Separator>
35 | </template>
36 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-app",
 3 |   "private": true,
 4 |   "type": "module",
 5 |   "scripts": {
 6 |     "build": "nuxt build",
 7 |     "dev": "nuxt dev",
 8 |     "generate": "nuxt generate",
 9 |     "preview": "nuxt preview",
10 |     "postinstall": "nuxt prepare",
11 |     "start": "nuxt start"
12 |   },
13 |   "dependencies": {
14 |     "@nuxt/content": "^2.13.4",
15 |     "@nuxt/icon": "^1.10.3",
16 |     "@nuxtjs/color-mode": "^3.5.2",
17 |     "@nuxtjs/seo": "^2.1.1",
18 |     "@nuxtjs/tailwindcss": "^6.13.1",
19 |     "@unovis/ts": "^1.5.0",
20 |     "@unovis/vue": "^1.5.0",
21 |     "@vueuse/core": "^11.3.0",
22 |     "@vueuse/nuxt": "^11.3.0",
23 |     "class-variance-authority": "^0.7.1",
24 |     "clsx": "^2.1.1",
25 |     "lucide-vue-next": "^0.455.0",
26 |     "nuxt": "^3.15.4",
27 |     "nuxt-umami": "^3.1.1",
28 |     "radix-vue": "^1.9.13",
29 |     "shadcn-nuxt": "^0.11.3",
30 |     "tailwind-merge": "^2.6.0",
31 |     "tailwindcss-animate": "^1.0.7",
32 |     "vue": "latest",
33 |     "vue-router": "latest"
34 |   },
35 |   "devDependencies": {
36 |     "@iconify-json/mdi": "^1.2.3",
37 |     "typescript": "^5.7.3"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/app/components/ui/chart/ChartTooltip.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 3 | 
 4 | defineProps<{
 5 |   title?: string
 6 |   data: {
 7 |     name: string
 8 |     color: string
 9 |     value: any
10 |   }[]
11 | }>()
12 | </script>
13 | 
14 | <template>
15 |   <Card class="text-sm">
16 |     <CardHeader v-if="title" class="p-3 border-b">
17 |       <CardTitle>
18 |         {{ title }}
19 |       </CardTitle>
20 |     </CardHeader>
21 |     <CardContent class="p-3 min-w-[180px] flex flex-col gap-1">
22 |       <div v-for="(item, key) in data" :key="key" class="flex justify-between">
23 |         <div class="flex items-center">
24 |           <span class="w-2.5 h-2.5 mr-2">
25 |             <svg width="100%" height="100%" viewBox="0 0 30 30">
26 |               <path
27 |                 d=" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0"
28 |                 :stroke="item.color"
29 |                 :fill="item.color"
30 |                 stroke-width="1"
31 |               />
32 |             </svg>
33 |           </span>
34 |           <span>{{ item.name }}</span>
35 |         </div>
36 |         <span class="font-semibold ml-4">{{ item.value }}</span>
37 |       </div>
38 |     </CardContent>
39 |   </Card>
40 | </template>
41 | 


--------------------------------------------------------------------------------
/app/composables/useHardwareInfo.ts:
--------------------------------------------------------------------------------
 1 | export function useHardwareInfo() {
 2 |     const getHardwareAcceleration = () => {
 3 |         if (!import.meta.client) return false;
 4 |         
 5 |         const canvas = document.createElement('canvas');
 6 |         const ctx = canvas.getContext('webgl');
 7 |         if (!ctx) return false;
 8 |         
 9 |         const debugInfo = ctx.getExtension('WEBGL_debug_renderer_info');
10 |         if (!debugInfo) return false;
11 |         
12 |         const renderer = ctx.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
13 |         return !/SwiftShader|Software|Microsoft Basic Render/i.test(renderer);
14 |     };
15 | 
16 |     const getTouchSupport = () => {
17 |         if (!import.meta.client) return null;
18 |         
19 |         return {
20 |             maxTouchPoints: navigator.maxTouchPoints,
21 |             touchEvent: 'ontouchstart' in window,
22 |             touchPoints: navigator.maxTouchPoints || 0
23 |         };
24 |     };
25 | 
26 |     const getColorDepth = () => {
27 |         if (!import.meta.client) return null;
28 |         
29 |         return {
30 |             colorDepth: screen.colorDepth,
31 |             pixelDepth: screen.pixelDepth
32 |         };
33 |     };
34 | 
35 |     return {
36 |         getHardwareAcceleration,
37 |         getTouchSupport,
38 |         getColorDepth
39 |     };
40 | } 


--------------------------------------------------------------------------------
/app/components/ui/tooltip/TooltipContent.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { cn } from '@/lib/utils'
 3 | import { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'radix-vue'
 4 | import { computed, type HTMLAttributes } from 'vue'
 5 | 
 6 | defineOptions({
 7 |   inheritAttrs: false,
 8 | })
 9 | 
10 | const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {
11 |   sideOffset: 4,
12 | })
13 | 
14 | const emits = defineEmits<TooltipContentEmits>()
15 | 
16 | const delegatedProps = computed(() => {
17 |   const { class: _, ...delegated } = props
18 | 
19 |   return delegated
20 | })
21 | 
22 | const forwarded = useForwardPropsEmits(delegatedProps, emits)
23 | </script>
24 | 
25 | <template>
26 |   <TooltipPortal>
27 |     <TooltipContent v-bind="{ ...forwarded, ...$attrs }" :class="cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)">
28 |       <slot />
29 |     </TooltipContent>
30 |   </TooltipPortal>
31 | </template>
32 | 


--------------------------------------------------------------------------------
/app/composables/useCanvasFingerprint.ts:
--------------------------------------------------------------------------------
 1 | export function useCanvasFingerprint() {
 2 |     const generateCanvasFingerprint = (): string | null => {
 3 |         if (!import.meta.client) return null;
 4 | 
 5 |         try {
 6 |             const canvas = document.createElement('canvas');
 7 |             canvas.width = 200;
 8 |             canvas.height = 200;
 9 |             const ctx = canvas.getContext('2d');
10 | 
11 |             if (!ctx) {
12 |                 return null;
13 |             }
14 | 
15 |             ctx.textBaseline = 'top';
16 |             ctx.font = '14px Arial';
17 |             ctx.textBaseline = 'alphabetic';
18 |             ctx.fillStyle = '#f60';
19 |             ctx.fillRect(125, 1, 62, 20);
20 |             ctx.fillStyle = '#069';
21 |             ctx.fillText('Browser Fingerprint', 2, 15);
22 |             ctx.fillStyle = 'rgba(102, 204, 0, 0.7)';
23 |             ctx.fillText('Canvas Test', 4, 45);
24 | 
25 |             ctx.strokeStyle = 'rgba(102, 204, 0, 0.7)';
26 |             ctx.beginPath();
27 |             ctx.arc(50, 50, 30, 0, Math.PI * 2);
28 |             ctx.stroke();
29 | 
30 |             return canvas.toDataURL();
31 |         } catch (error) {
32 |             console.error('Error generating canvas fingerprint:', error);
33 |             return null;
34 |         }
35 |     };
36 | 
37 |     return {
38 |         generateCanvasFingerprint
39 |     };
40 | } 


--------------------------------------------------------------------------------
/app/composables/useFingerprintHelpers.ts:
--------------------------------------------------------------------------------
 1 | export function useFingerprintHelpers() {
 2 |     const formatKey = (key: string): string => {
 3 |         return key
 4 |             .replace(/([A-Z])/g, ' $1')
 5 |             .replace(/^./, str => str.toUpperCase())
 6 |             .trim();
 7 |     };
 8 | 
 9 |     const copyFingerprint = async (hash: string | undefined): Promise<void> => {
10 |         if (!process.client || !hash) return;
11 | 
12 |         try {
13 |             await navigator.clipboard.writeText(hash);
14 |             // Handle success (e.g., show a notification)
15 |         } catch (error) {
16 |             console.error('Failed to copy:', error);
17 |         }
18 |     };
19 | 
20 |     const getSectionDescription = (sectionId: string): string => {
21 |         const descriptions: Record<string, string> = {
22 |             browser: 'Information about your web browser and its capabilities',
23 |             system: 'Details about your operating system and environment',
24 |             screen: 'Display and resolution information',
25 |             media: 'Audio and visual capabilities',
26 |             hardware: 'Device hardware specifications',
27 |             webgl: 'Graphics and rendering capabilities'
28 |         };
29 |         return descriptions[sectionId] || '';
30 |     };
31 | 
32 |     return {
33 |         formatKey,
34 |         copyFingerprint,
35 |         getSectionDescription
36 |     };
37 | } 


--------------------------------------------------------------------------------
/app/components/ui/button/index.ts:
--------------------------------------------------------------------------------
 1 | import { cva, type VariantProps } from 'class-variance-authority'
 2 | 
 3 | export { default as Button } from './Button.vue'
 4 | 
 5 | export const buttonVariants = cva(
 6 |   'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
 7 |   {
 8 |     variants: {
 9 |       variant: {
10 |         default:
11 |           'bg-primary text-primary-foreground shadow hover:bg-primary/90',
12 |         destructive:
13 |           'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
14 |         outline:
15 |           'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
16 |         secondary:
17 |           'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
18 |         ghost: 'hover:bg-accent hover:text-accent-foreground',
19 |         link: 'text-primary underline-offset-4 hover:underline',
20 |       },
21 |       size: {
22 |         default: 'h-9 px-4 py-2',
23 |         sm: 'h-8 rounded-md px-3 text-xs',
24 |         lg: 'h-10 rounded-md px-8',
25 |         icon: 'h-9 w-9',
26 |       },
27 |     },
28 |     defaultVariants: {
29 |       variant: 'default',
30 |       size: 'default',
31 |     },
32 |   },
33 | )
34 | 
35 | export type ButtonVariants = VariantProps<typeof buttonVariants>
36 | 


--------------------------------------------------------------------------------
/app/components/ui/chart/ChartCrosshair.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { BulletLegendItemInterface } from '@unovis/ts'
 3 | import { omit } from '@unovis/ts'
 4 | import { VisCrosshair, VisTooltip } from '@unovis/vue'
 5 | import { type Component, createApp } from 'vue'
 6 | import { ChartTooltip } from '.'
 7 | 
 8 | const props = withDefaults(defineProps<{
 9 |   colors: string[]
10 |   index: string
11 |   items: BulletLegendItemInterface[]
12 |   customTooltip?: Component
13 | }>(), {
14 |   colors: () => [],
15 | })
16 | 
17 | // Use weakmap to store reference to each datapoint for Tooltip
18 | const wm = new WeakMap()
19 | function template(d: any) {
20 |   if (wm.has(d)) {
21 |     return wm.get(d)
22 |   }
23 |   else {
24 |     const componentDiv = document.createElement('div')
25 |     const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {
26 |       const legendReference = props.items.find(i => i.name === key)
27 |       return { ...legendReference, value }
28 |     })
29 |     const TooltipComponent = props.customTooltip ?? ChartTooltip
30 |     createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)
31 |     wm.set(d, componentDiv.innerHTML)
32 |     return componentDiv.innerHTML
33 |   }
34 | }
35 | 
36 | function color(d: unknown, i: number) {
37 |   return props.colors[i] ?? 'transparent';
38 | }
39 | </script>
40 | 
41 | <template>
42 |   <VisTooltip :horizontal-shift="20" :vertical-shift="20" />
43 |   <VisCrosshair :template="template" :color="color" />
44 | </template>
45 | 


--------------------------------------------------------------------------------
/app/components/ui/chart/interface.ts:
--------------------------------------------------------------------------------
 1 | import type { Spacing } from '@unovis/ts'
 2 | 
 3 | type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>
 4 | 
 5 | export interface BaseChartProps<T extends Record<string, any>> {
 6 |   /**
 7 |    * The source data, in which each entry is a dictionary.
 8 |    */
 9 |   data: T[]
10 |   /**
11 |    * Select the categories from your data. Used to populate the legend and toolip.
12 |    */
13 |   categories: KeyOf<T>[]
14 |   /**
15 |    * Sets the key to map the data to the axis.
16 |    */
17 |   index: KeyOf<T>
18 |   /**
19 |    * Change the default colors.
20 |    */
21 |   colors?: string[]
22 |   /**
23 |    * Margin of each the container
24 |    */
25 |   margin?: Spacing
26 |   /**
27 |    * Change the opacity of the non-selected field
28 |    * @default 0.2
29 |    */
30 |   filterOpacity?: number
31 |   /**
32 |    * Function to format X label
33 |    */
34 |   xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
35 |   /**
36 |    * Function to format Y label
37 |    */
38 |   yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
39 |   /**
40 |    * Controls the visibility of the X axis.
41 |    * @default true
42 |    */
43 |   showXAxis?: boolean
44 |   /**
45 |    * Controls the visibility of the Y axis.
46 |    * @default true
47 |    */
48 |   showYAxis?: boolean
49 |   /**
50 |    * Controls the visibility of tooltip.
51 |    * @default true
52 |    */
53 |   showTooltip?: boolean
54 |   /**
55 |    * Controls the visibility of legend.
56 |    * @default true
57 |    */
58 |   showLegend?: boolean
59 |   /**
60 |    * Controls the visibility of gridline.
61 |    * @default true
62 |    */
63 |   showGridLine?: boolean
64 | }
65 | 


--------------------------------------------------------------------------------
/app/components/ui/chart-line/index.ts:
--------------------------------------------------------------------------------
 1 | export { default as LineChart } from './LineChart.vue'
 2 | 
 3 | import type { Spacing } from '@unovis/ts'
 4 | 
 5 | type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>
 6 | 
 7 | export interface BaseChartProps<T extends Record<string, any>> {
 8 |   /**
 9 |    * The source data, in which each entry is a dictionary.
10 |    */
11 |   data: T[]
12 |   /**
13 |    * Select the categories from your data. Used to populate the legend and toolip.
14 |    */
15 |   categories: KeyOf<T>[]
16 |   /**
17 |    * Sets the key to map the data to the axis.
18 |    */
19 |   index: KeyOf<T>
20 |   /**
21 |    * Change the default colors.
22 |    */
23 |   colors?: string[]
24 |   /**
25 |    * Margin of each the container
26 |    */
27 |   margin?: Spacing
28 |   /**
29 |    * Change the opacity of the non-selected field
30 |    * @default 0.2
31 |    */
32 |   filterOpacity?: number
33 |   /**
34 |    * Function to format X label
35 |    */
36 |   xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
37 |   /**
38 |    * Function to format Y label
39 |    */
40 |   yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
41 |   /**
42 |    * Controls the visibility of the X axis.
43 |    * @default true
44 |    */
45 |   showXAxis?: boolean
46 |   /**
47 |    * Controls the visibility of the Y axis.
48 |    * @default true
49 |    */
50 |   showYAxis?: boolean
51 |   /**
52 |    * Controls the visibility of tooltip.
53 |    * @default true
54 |    */
55 |   showTooltip?: boolean
56 |   /**
57 |    * Controls the visibility of legend.
58 |    * @default true
59 |    */
60 |   showLegend?: boolean
61 |   /**
62 |    * Controls the visibility of gridline.
63 |    * @default true
64 |    */
65 |   showGridLine?: boolean
66 | }
67 | 


--------------------------------------------------------------------------------
/app/assets/css/tailwind.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 |   :root {
 7 |     --background: 0 0% 100%;
 8 |     --foreground: 240 10% 3.9%;
 9 | 
10 |     --muted: 240 4.8% 95.9%;
11 |     --muted-foreground: 240 3.8% 46.1%;
12 | 
13 |     --popover: 0 0% 100%;
14 |     --popover-foreground: 240 10% 3.9%;
15 | 
16 |     --card: 0 0% 100%;
17 |     --card-foreground: 240 10% 3.9%;
18 | 
19 |     --border: 240 5.9% 90%;
20 |     --input: 240 5.9% 90%;
21 | 
22 |     --primary: 240 5.9% 10%;
23 |     --primary-foreground: 0 0% 98%;
24 | 
25 |     --secondary: 240 4.8% 95.9%;
26 |     --secondary-foreground: 240 5.9% 10%;
27 | 
28 |     --accent: 240 4.8% 95.9%;
29 |     --accent-foreground: 240 5.9% 10%;
30 | 
31 |     --destructive: 0 84.2% 60.2%;
32 |     --destructive-foreground: 0 0% 98%;
33 | 
34 |     --ring: 240 10% 3.9%;
35 | 
36 |     --radius: 0.5rem;
37 |   }
38 | 
39 |   .dark {
40 |     --background: 240 10% 3.9%;
41 |     --foreground: 0 0% 98%;
42 | 
43 |     --muted: 240 3.7% 15.9%;
44 |     --muted-foreground: 240 5% 64.9%;
45 | 
46 |     --popover: 240 10% 3.9%;
47 |     --popover-foreground: 0 0% 98%;
48 | 
49 |     --card: 240 10% 3.9%;
50 |     --card-foreground: 0 0% 98%;
51 | 
52 |     --border: 240 3.7% 15.9%;
53 |     --input: 240 3.7% 15.9%;
54 | 
55 |     --primary: 0 0% 98%;
56 |     --primary-foreground: 240 5.9% 10%;
57 | 
58 |     --secondary: 240 3.7% 15.9%;
59 |     --secondary-foreground: 0 0% 98%;
60 | 
61 |     --accent: 240 3.7% 15.9%;
62 |     --accent-foreground: 0 0% 98%;
63 | 
64 |     --destructive: 0 62.8% 30.6%;
65 |     --destructive-foreground: 0 0% 98%;
66 | 
67 |     --ring: 240 4.9% 83.9%;
68 |   }
69 | }
70 | 
71 | @layer base {
72 |   * {
73 |     @apply border-border;
74 |   }
75 |   body {
76 |     @apply bg-background text-foreground;
77 |   }
78 | }


--------------------------------------------------------------------------------
/app/components/ui/chart/ChartLegend.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { BulletLegendItemInterface } from '@unovis/ts'
 3 | import { buttonVariants } from '@/components/ui/button'
 4 | import { BulletLegend } from '@unovis/ts'
 5 | import { VisBulletLegend } from '@unovis/vue'
 6 | import { nextTick, onMounted, ref } from 'vue'
 7 | 
 8 | const props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {
 9 |   items: () => [],
10 | })
11 | 
12 | const emits = defineEmits<{
13 |   'legendItemClick': [d: BulletLegendItemInterface, i: number]
14 |   'update:items': [payload: BulletLegendItemInterface[]]
15 | }>()
16 | 
17 | const elRef = ref<HTMLElement>()
18 | 
19 | onMounted(() => {
20 |   const selector = `.${BulletLegend.selectors.item}`
21 |   nextTick(() => {
22 |     const elements = elRef.value?.querySelectorAll(selector)
23 |     const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')
24 |     elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))
25 |   })
26 | })
27 | 
28 | function onLegendItemClick(d: BulletLegendItemInterface, i: number) {
29 |   emits('legendItemClick', d, i)
30 |   const isBulletActive = !props.items[i].inactive
31 |   const isFilterApplied = props.items.some(i => i.inactive)
32 |   if (isFilterApplied && isBulletActive) {
33 |     // reset filter
34 |     emits('update:items', props.items.map(item => ({ ...item, inactive: false })))
35 |   }
36 |   else {
37 |     // apply selection, set other item as inactive
38 |     emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))
39 |   }
40 | }
41 | </script>
42 | 
43 | <template>
44 |   <div ref="elRef" class="w-max">
45 |     <VisBulletLegend
46 |       :items="items"
47 |       :on-legend-item-click="onLegendItemClick"
48 |     />
49 |   </div>
50 | </template>
51 | 


--------------------------------------------------------------------------------
/content/fingerprinting/webgl.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: WebGL Information
 3 | description: Graphics rendering capabilities and characteristics of your device's GPU.
 4 | icon: mdi:video-3d
 5 | sections:
 6 |   - title: How it Works
 7 |     icon: mdi:code-braces
 8 |     content: >
 9 |       WebGL fingerprinting in this implementation collects information about your graphics hardware using the WebGL API. It retrieves the renderer and vendor strings through the WEBGL_debug_renderer_info extension, along with supported WebGL extensions and various rendering parameters like maximum texture size, viewport dimensions, and other GPU capabilities.
10 | 
11 |   - title: Privacy Implications
12 |     icon: mdi:shield-alert
13 |     content: >
14 |       WebGL information can uniquely identify your graphics hardware and drivers, making it a powerful component of device fingerprinting. This data is particularly stable as it's tied to your physical hardware, and changes only when you upgrade your GPU or drivers.
15 | 
16 |   - title: Protection Strategies
17 |     icon: mdi:shield-check
18 |     items:
19 |       - Use browsers that limit or standardize WebGL information exposure.
20 |       - Consider using WebGL blocking extensions, but be aware this may break some websites.
21 |       - Keep your graphics drivers updated to maintain common configurations.
22 |       - Use virtual machines or common hardware configurations when privacy is crucial.
23 |       - Consider using privacy-focused browsers that provide WebGL fingerprinting protection.
24 | 
25 |   - title: Additional Resources
26 |     icon: mdi:book-open-page-variant
27 |     resources:
28 |       - label: WebGL API Documentation
29 |         url: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API
30 |         icon: mdi:code-tags
31 |       - label: WebGL Security Considerations
32 |         url: https://www.khronos.org/webgl/security/
33 |         icon: mdi:shield
34 | ---
35 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://nuxt.com/docs/api/configuration/nuxt-config
 2 | export default defineNuxtConfig({
 3 |   compatibilityDate: '2024-04-03',
 4 |   devtools: { enabled: true },
 5 |   modules: ['@nuxtjs/tailwindcss', 'shadcn-nuxt', '@nuxtjs/color-mode', '@nuxt/icon', '@vueuse/nuxt', '@nuxtjs/seo', '@nuxt/content', 'nuxt-umami'],
 6 |   future: {
 7 |     compatibilityVersion: 4,
 8 |   },
 9 |   shadcn: {
10 |     prefix: '',
11 |     componentDir: './app/components/ui'
12 |   },
13 |   colorMode: {
14 |     classPrefix: '',
15 |     classSuffix: '',
16 |   },
17 |   site: {
18 |     url: 'https://trackme.dev/',
19 |     name: 'Browser Fingerprint',
20 |     description: 'Generate and analyze your unique browser fingerprint. Understand how websites can track you.',
21 |     defaultLocale: 'en',
22 |   },
23 |   ogImage: {
24 |     // Enable dynamic OG image generation
25 |     enabled: true,
26 |     defaults: {
27 |       component: 'NuxtSeo',
28 |       width: 1200,
29 |       height: 630,
30 |     },
31 |   },
32 |   runtimeConfig: {
33 |     public: {
34 |       umamiWebsiteId: process.env.UMAMI_WEBSITE_ID,
35 |       umamiHost: process.env.UMAMI_HOST,
36 |     }
37 |   },
38 |   content: {
39 |     highlight: {
40 |       theme: 'github-dark',
41 |     },
42 |   },
43 | 
44 |   umami: {
45 |     id: process.env.UMAMI_WEBSITE_ID,
46 |     host: process.env.UMAMI_HOST,
47 |     autoTrack: true,
48 |     ignoreLocalhost: true,
49 |     useDirective: true,
50 |     // proxy: 'cloak',
51 |     // excludeQueryParams: false,
52 |     // domains: ['cool-site.app', 'my-space.site'],
53 |     // customEndpoint: '/my-custom-endpoint',
54 |     // enabled: false,
55 |     // logErrors: true,
56 |   },
57 |   
58 |   app: {
59 |     head: {
60 |       script: [
61 |         {
62 |           src: 'https://webry.leonkohli.de/api/script.js',
63 |           defer: true,
64 |           'data-site-id': '1',
65 |         },
66 |       ],
67 |     },
68 |   },
69 | })


--------------------------------------------------------------------------------
/content/fingerprinting/screen.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Screen Information
 3 | description: Details about your device's display properties and configurations.
 4 | icon: mdi:monitor
 5 | sections:
 6 |   - title: How it Works
 7 |     icon: mdi:code-braces
 8 |     content: >
 9 |       Screen fingerprinting in this implementation collects basic display characteristics using JavaScript's Screen API. This includes screen width and height, color depth, device pixel ratio (which indicates display scaling), and screen orientation. These properties are accessed directly through the window.screen object and related browser APIs.
10 | 
11 |   - title: Privacy Implications
12 |     icon: mdi:shield-alert
13 |     content: >
14 |       Screen properties can be surprisingly revealing about your device type and setup. Unusual screen resolutions, non-standard pixel ratios, or specific orientations can make your device more identifiable. This information, combined with other fingerprinting data, helps create a more unique profile of your device.
15 | 
16 |   - title: Protection Strategies
17 |     icon: mdi:shield-check
18 |     items:
19 |       - Use common screen resolutions and standard scaling settings when possible.
20 |       - Consider using browser extensions that can spoof screen properties.
21 |       - Be aware that changing display settings might affect your device's fingerprint.
22 |       - Use privacy-focused browsers that standardize or limit screen information exposure.
23 |       - Consider the impact of multi-monitor setups on your fingerprint uniqueness.
24 | 
25 |   - title: Additional Resources
26 |     icon: mdi:book-open-page-variant
27 |     resources:
28 |       - label: Screen API Documentation
29 |         url: https://developer.mozilla.org/en-US/docs/Web/API/Screen
30 |         icon: mdi:code-tags
31 |       - label: Window.devicePixelRatio Documentation
32 |         url: https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
33 |         icon: mdi:monitor
34 | ---
35 | 


--------------------------------------------------------------------------------
/content/fingerprinting/hardware.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Hardware Information
 3 | description: Physical characteristics and capabilities of your device.
 4 | icon: mdi:memory
 5 | sections:
 6 |   - title: How it Works
 7 |     icon: mdi:code-braces
 8 |     content: >
 9 |       Hardware fingerprinting in this implementation collects information about your device's physical capabilities using various browser APIs. This includes the number of CPU cores (via hardwareConcurrency), device memory, maximum touch points, and the availability of various hardware features like battery status, bluetooth, gamepads, and wake lock capabilities.
10 | 
11 |   - title: Privacy Implications
12 |     icon: mdi:shield-alert
13 |     content: >
14 |       Hardware characteristics provide a stable and reliable way to identify devices, as they rarely change unless you upgrade your hardware. The combination of CPU cores, memory, and hardware feature support creates a distinctive profile that can be used to track your device across different browsers and sessions.
15 | 
16 |   - title: Protection Strategies
17 |     icon: mdi:shield-check
18 |     items:
19 |       - Use privacy-focused browsers that limit hardware information exposure.
20 |       - Consider using virtual machines with standardized hardware configurations.
21 |       - Be aware that hardware-level fingerprinting is difficult to prevent without impacting functionality.
22 |       - Keep your hardware configurations as common as possible to blend in with other users.
23 |       - Use browser extensions that can spoof or limit hardware information access.
24 | 
25 |   - title: Additional Resources
26 |     icon: mdi:book-open-page-variant
27 |     resources:
28 |       - label: Navigator.hardwareConcurrency
29 |         url: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/hardwareConcurrency
30 |         icon: mdi:cpu-64-bit
31 |       - label: Device Memory API
32 |         url: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/deviceMemory
33 |         icon: mdi:memory
34 | ---
35 | 


--------------------------------------------------------------------------------
/app/components/ui/dialog/DialogScrollContent.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { cn } from '@/lib/utils'
 3 | import { X } from 'lucide-vue-next'
 4 | import {
 5 |   DialogClose,
 6 |   DialogContent,
 7 |   type DialogContentEmits,
 8 |   type DialogContentProps,
 9 |   DialogOverlay,
10 |   DialogPortal,
11 |   useForwardPropsEmits,
12 | } from 'radix-vue'
13 | import { computed, type HTMLAttributes } from 'vue'
14 | 
15 | const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
16 | const emits = defineEmits<DialogContentEmits>()
17 | 
18 | const delegatedProps = computed(() => {
19 |   const { class: _, ...delegated } = props
20 | 
21 |   return delegated
22 | })
23 | 
24 | const forwarded = useForwardPropsEmits(delegatedProps, emits)
25 | </script>
26 | 
27 | <template>
28 |   <DialogPortal>
29 |     <DialogOverlay
30 |       class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
31 |     >
32 |       <DialogContent
33 |         :class="
34 |           cn(
35 |             'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
36 |             props.class,
37 |           )
38 |         "
39 |         v-bind="forwarded"
40 |         @pointer-down-outside="(event) => {
41 |           const originalEvent = event.detail.originalEvent;
42 |           const target = originalEvent.target as HTMLElement;
43 |           if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
44 |             event.preventDefault();
45 |           }
46 |         }"
47 |       >
48 |         <slot />
49 | 
50 |         <DialogClose
51 |           class="absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary"
52 |         >
53 |           <X class="w-4 h-4" />
54 |           <span class="sr-only">Close</span>
55 |         </DialogClose>
56 |       </DialogContent>
57 |     </DialogOverlay>
58 |   </DialogPortal>
59 | </template>
60 | 


--------------------------------------------------------------------------------
/content/fingerprinting/browser.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Browser Information
 3 | description: Detailed insights into your web browser and its capabilities.
 4 | icon: mdi:web
 5 | sections:
 6 |   - title: How it Works
 7 |     icon: mdi:code-braces
 8 |     content: >
 9 |       Browser fingerprinting in this implementation collects various browser-specific attributes using JavaScript APIs. This includes the user agent string, browser language settings, cookie enablement status, Do Not Track preference, vendor information, and installed plugins. It also detects whether you're using private browsing mode and identifies your specific browser name and version through user agent analysis.
10 | 
11 |   - title: Privacy Implications
12 |     icon: mdi:shield-alert
13 |     content: >
14 |       The combination of browser attributes creates a distinctive profile that can be used to identify and track your online activity. Even when using privacy features like VPNs or clearing cookies, these browser characteristics remain consistent and can be used to recognize your device across different websites and sessions.
15 | 
16 |   - title: Protection Strategies
17 |     icon: mdi:shield-check
18 |     items:
19 |       - Use privacy-focused browsers like [Tor Browser](https://www.torproject.org/) or [Brave](https://brave.com/) that standardize browser fingerprints.
20 |       - Enable privacy and tracking protection features in your browser settings.
21 |       - Consider using browser extensions that modify or spoof browser information.
22 |       - Regularly update your browser to benefit from the latest privacy enhancements.
23 |       - Be cautious about installing browser plugins as they can make your fingerprint more unique.
24 | 
25 |   - title: Additional Resources
26 |     icon: mdi:book-open-page-variant
27 |     resources:
28 |       - label: Navigator API Documentation
29 |         url: https://developer.mozilla.org/en-US/docs/Web/API/Navigator
30 |         icon: mdi:code-tags
31 |       - label: User Agent Documentation
32 |         url: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent
33 |         icon: mdi:web
34 | ---
35 | 


--------------------------------------------------------------------------------
/app/components/ui/dialog/DialogContent.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { cn } from '@/lib/utils'
 3 | import { X } from 'lucide-vue-next'
 4 | import {
 5 |   DialogClose,
 6 |   DialogContent,
 7 |   type DialogContentEmits,
 8 |   type DialogContentProps,
 9 |   DialogOverlay,
10 |   DialogPortal,
11 |   useForwardPropsEmits,
12 | } from 'radix-vue'
13 | import { computed, type HTMLAttributes } from 'vue'
14 | 
15 | const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
16 | const emits = defineEmits<DialogContentEmits>()
17 | 
18 | const delegatedProps = computed(() => {
19 |   const { class: _, ...delegated } = props
20 | 
21 |   return delegated
22 | })
23 | 
24 | const forwarded = useForwardPropsEmits(delegatedProps, emits)
25 | </script>
26 | 
27 | <template>
28 |   <DialogPortal>
29 |     <DialogOverlay
30 |       class="fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
31 |     />
32 |     <DialogContent
33 |       v-bind="forwarded"
34 |       :class="
35 |         cn(
36 |           'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
37 |           props.class,
38 |         )"
39 |     >
40 |       <slot />
41 | 
42 |       <DialogClose
43 |         class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
44 |       >
45 |         <X class="w-4 h-4" />
46 |         <span class="sr-only">Close</span>
47 |       </DialogClose>
48 |     </DialogContent>
49 |   </DialogPortal>
50 | </template>
51 | 


--------------------------------------------------------------------------------
/app/components/ui/chart/ChartSingleTooltip.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { BulletLegendItemInterface } from '@unovis/ts'
 3 | import { omit } from '@unovis/ts'
 4 | import { VisTooltip } from '@unovis/vue'
 5 | import { type Component, createApp } from 'vue'
 6 | import { ChartTooltip } from '.'
 7 | 
 8 | const props = withDefaults(defineProps<{
 9 |   selector: string
10 |   index: string
11 |   items?: BulletLegendItemInterface[]
12 |   valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string
13 |   customTooltip?: Component
14 | }>(), {
15 |   valueFormatter: (tick: number) => `${tick}`,
16 | })
17 | 
18 | // Use weakmap to store reference to each datapoint for Tooltip
19 | const wm = new WeakMap()
20 | function template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {
21 |   if (props.index in d) {
22 |     if (wm.has(d)) {
23 |       return wm.get(d)
24 |     }
25 |     else {
26 |       const componentDiv = document.createElement('div')
27 |       const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {
28 |         const legendReference = props.items?.find(i => i.name === key)
29 |         return { ...legendReference, value: props.valueFormatter(value) }
30 |       })
31 |       const TooltipComponent = props.customTooltip ?? ChartTooltip
32 |       createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)
33 |       wm.set(d, componentDiv.innerHTML)
34 |       return componentDiv.innerHTML
35 |     }
36 |   }
37 | 
38 |   else {
39 |     const data = d.data
40 | 
41 |     if (wm.has(data)) {
42 |       return wm.get(data)
43 |     }
44 |     else {
45 |       const style = getComputedStyle(elements[i])
46 |       const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }]
47 |       const componentDiv = document.createElement('div')
48 |       const TooltipComponent = props.customTooltip ?? ChartTooltip
49 |       createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)
50 |       wm.set(d, componentDiv.innerHTML)
51 |       return componentDiv.innerHTML
52 |     }
53 |   }
54 | }
55 | </script>
56 | 
57 | <template>
58 |   <VisTooltip
59 |     :horizontal-shift="20" :vertical-shift="20" :triggers="{
60 |       [selector]: template,
61 |     }"
62 |   />
63 | </template>
64 | 


--------------------------------------------------------------------------------
/content/fingerprinting/media.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Media Capabilities
 3 | description: Analysis of your device's audio and visual processing features.
 4 | icon: mdi:harddisk
 5 | sections:
 6 |   - title: How it Works
 7 |     icon: mdi:code-braces
 8 |     content: >
 9 |       Media fingerprinting in this implementation focuses on two main aspects: Canvas and Audio fingerprinting. Canvas fingerprinting works by drawing specific text, shapes, and colors using the HTML5 Canvas element and converting the result to a data URL. The subtle differences in how devices render these elements create a unique fingerprint. Audio fingerprinting uses the Web Audio API to create and process audio signals through an oscillator and compressor, analyzing the resulting audio data to generate a unique hash based on how your device processes audio.
10 | 
11 |   - title: Privacy Implications
12 |     icon: mdi:shield-alert
13 |     content: >
14 |       Canvas and Audio fingerprinting are particularly powerful tracking methods because they capture hardware-level differences in how your device processes media. These techniques work silently in the background and can identify your device even when using private browsing or clearing cookies. The fingerprints generated are highly reliable as they depend on your device's hardware and software configuration, which typically doesn't change frequently.
15 | 
16 |   - title: Protection Strategies
17 |     icon: mdi:shield-check
18 |     items:
19 |       - Use browsers with built-in Canvas/Audio fingerprinting protection like Tor Browser or Brave.
20 |       - Install extensions like [CanvasBlocker](https://addons.mozilla.org/en-US/firefox/addon/canvasblocker/) to prevent or spoof canvas fingerprinting.
21 |       - Consider using script-blocking extensions like [uBlock Origin](https://github.com/gorhill/uBlock) to control which sites can access Canvas and Audio APIs.
22 |       - Keep your browser updated to benefit from the latest privacy protections.
23 |       - Be aware that blocking these APIs completely may break some website functionality.
24 | 
25 |   - title: Additional Resources
26 |     icon: mdi:book-open-page-variant
27 |     resources:
28 |       - label: Canvas API Documentation
29 |         url: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
30 |         icon: mdi:code-tags
31 |       - label: Web Audio API Documentation
32 |         url: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
33 |         icon: mdi:volume-high
34 | ---
35 | 


--------------------------------------------------------------------------------
/content/fingerprinting/system.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: System Information
 3 | description: Details about your operating system and environmental settings.
 4 | icon: mdi:cpu-64-bit
 5 | sections:
 6 |   - title: How it Works
 7 |     icon: mdi:code-braces
 8 |     content: >
 9 |       System fingerprinting in this implementation collects information about your system's environment using JavaScript APIs. This includes your timezone settings (obtained via Intl.DateTimeFormat), timezone offset (from Date.getTimezoneOffset()), and a comprehensive list of installed system fonts. The font detection is performed by measuring text rendering differences across various font families using the Canvas API.
10 | 
11 |   - title: Privacy Implications
12 |     icon: mdi:shield-alert
13 |     content: >
14 |       System information can reveal significant details about your device setup. Your timezone settings are determined by your system's date/time configuration, not your IP address or VPN. This means using a VPN alone won't mask your timezone information. Installed fonts can reveal information about your work (design software, specialized applications) or language preferences. The combination of these attributes contributes to creating a unique identifier for your device.
15 | 
16 |   - title: Protection Strategies
17 |     icon: mdi:shield-check
18 |     items:
19 |       # Timezone-specific strategies
20 |       - "Timezone Protection: Override JavaScript's Date and Intl APIs using extensions like Chameleon or User-Agent Switcher"
21 |       - "System Time: Ensure your system time matches your spoofed timezone to prevent inconsistencies"
22 |       # Font-specific strategies
23 |       - "Font Protection: Use Font Fingerprint Defender or similar extensions to limit font enumeration"
24 |       - "Font Management: Stick to system default fonts and remove unnecessary custom fonts"
25 |       - "Font Installation: Create a separate user profile for design work requiring custom fonts"
26 |       # Specific to our implementation
27 |       - "Implementation Specific: Our tool detects fonts using canvas measurements - consider using Canvas Blocker extensions"
28 | 
29 |   - title: Additional Resources
30 |     icon: mdi:book-open-page-variant
31 |     resources:
32 |       - label: JavaScript Date.getTimezoneOffset() Documentation
33 |         url: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset
34 |         icon: mdi:clock
35 |       - label: Intl.DateTimeFormat Documentation
36 |         url: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
37 |         icon: mdi:clock
38 |       - label: Font Fingerprinting Technical Details
39 |         url: https://browserleaks.com/fonts
40 |         icon: mdi:format-font
41 | ---
42 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const animate = require("tailwindcss-animate")
 2 | 
 3 | /** @type {import('tailwindcss').Config} */
 4 | module.exports = {
 5 |   darkMode: ["class"],
 6 |   safelist: ["dark"],
 7 |   prefix: "",
 8 |   
 9 |   theme: {
10 |     container: {
11 |       center: true,
12 |       padding: "2rem",
13 |       screens: {
14 |         "2xl": "1400px",
15 |       },
16 |     },
17 |     extend: {
18 |       colors: {
19 |         border: "hsl(var(--border))",
20 |         input: "hsl(var(--input))",
21 |         ring: "hsl(var(--ring))",
22 |         background: "hsl(var(--background))",
23 |         foreground: "hsl(var(--foreground))",
24 |         primary: {
25 |           DEFAULT: "hsl(var(--primary))",
26 |           foreground: "hsl(var(--primary-foreground))",
27 |         },
28 |         secondary: {
29 |           DEFAULT: "hsl(var(--secondary))",
30 |           foreground: "hsl(var(--secondary-foreground))",
31 |         },
32 |         destructive: {
33 |           DEFAULT: "hsl(var(--destructive))",
34 |           foreground: "hsl(var(--destructive-foreground))",
35 |         },
36 |         muted: {
37 |           DEFAULT: "hsl(var(--muted))",
38 |           foreground: "hsl(var(--muted-foreground))",
39 |         },
40 |         accent: {
41 |           DEFAULT: "hsl(var(--accent))",
42 |           foreground: "hsl(var(--accent-foreground))",
43 |         },
44 |         popover: {
45 |           DEFAULT: "hsl(var(--popover))",
46 |           foreground: "hsl(var(--popover-foreground))",
47 |         },
48 |         card: {
49 |           DEFAULT: "hsl(var(--card))",
50 |           foreground: "hsl(var(--card-foreground))",
51 |         },
52 |       },
53 |       borderRadius: {
54 |         xl: "calc(var(--radius) + 4px)",
55 |         lg: "var(--radius)",
56 |         md: "calc(var(--radius) - 2px)",
57 |         sm: "calc(var(--radius) - 4px)",
58 |       },
59 |       keyframes: {
60 |         "accordion-down": {
61 |           from: { height: 0 },
62 |           to: { height: "var(--radix-accordion-content-height)" },
63 |         },
64 |         "accordion-up": {
65 |           from: { height: "var(--radix-accordion-content-height)" },
66 |           to: { height: 0 },
67 |         },
68 |         "collapsible-down": {
69 |           from: { height: 0 },
70 |           to: { height: 'var(--radix-collapsible-content-height)' },
71 |         },
72 |         "collapsible-up": {
73 |           from: { height: 'var(--radix-collapsible-content-height)' },
74 |           to: { height: 0 },
75 |         },
76 |       },
77 |       animation: {
78 |         "accordion-down": "accordion-down 0.2s ease-out",
79 |         "accordion-up": "accordion-up 0.2s ease-out",
80 |         "collapsible-down": "collapsible-down 0.2s ease-in-out",
81 |         "collapsible-up": "collapsible-up 0.2s ease-in-out",
82 |       },
83 |     },
84 |   },
85 |   plugins: [animate],
86 | }


--------------------------------------------------------------------------------
/app/composables/useWebGLFingerprint.ts:
--------------------------------------------------------------------------------
 1 | export function useWebGLFingerprint() {
 2 |     const isWebGLSupported = useSupported(() => {
 3 |         const canvas = document.createElement('canvas')
 4 |         return !!(canvas.getContext('webgl') || canvas.getContext('experimental-webgl'))
 5 |     })
 6 | 
 7 |     const getWebGLFingerprint = () => {
 8 |         if (!import.meta.client || !isWebGLSupported.value) {
 9 |             return {
10 |                 error: 'WebGL not supported',
11 |                 renderer: null,
12 |                 vendor: null
13 |             }
14 |         }
15 | 
16 |         try {
17 |             const canvas = document.createElement('canvas');
18 |             const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
19 | 
20 |             if (!gl) {
21 |                 return {
22 |                     error: 'WebGL not supported',
23 |                     renderer: null,
24 |                     vendor: null
25 |                 };
26 |             }
27 | 
28 |             const glContext = gl as WebGLRenderingContext;
29 |             const debugInfo = glContext.getExtension('WEBGL_debug_renderer_info');
30 | 
31 |             if (!debugInfo) {
32 |                 return {
33 |                     error: 'WEBGL_debug_renderer_info not supported',
34 |                     renderer: glContext.getParameter(glContext.RENDERER),
35 |                     vendor: glContext.getParameter(glContext.VENDOR)
36 |                 };
37 |             }
38 | 
39 |             return {
40 |                 renderer: glContext.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL),
41 |                 vendor: glContext.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL),
42 |                 extensions: glContext.getSupportedExtensions(),
43 |                 parameters: {
44 |                     maxTextureSize: glContext.getParameter(glContext.MAX_TEXTURE_SIZE),
45 |                     maxViewportDims: glContext.getParameter(glContext.MAX_VIEWPORT_DIMS),
46 |                     maxRenderbufferSize: glContext.getParameter(glContext.MAX_RENDERBUFFER_SIZE),
47 |                     aliasedLineWidthRange: glContext.getParameter(glContext.ALIASED_LINE_WIDTH_RANGE),
48 |                     aliasedPointSizeRange: glContext.getParameter(glContext.ALIASED_POINT_SIZE_RANGE),
49 |                     maxVertexAttribs: glContext.getParameter(glContext.MAX_VERTEX_ATTRIBS),
50 |                     maxVaryingVectors: glContext.getParameter(glContext.MAX_VARYING_VECTORS),
51 |                     maxVertexUniformVectors: glContext.getParameter(glContext.MAX_VERTEX_UNIFORM_VECTORS),
52 |                     maxFragmentUniformVectors: glContext.getParameter(glContext.MAX_FRAGMENT_UNIFORM_VECTORS)
53 |                 }
54 |             };
55 |         } catch (error) {
56 |             return {
57 |                 error: 'Error getting WebGL information',
58 |                 renderer: null,
59 |                 vendor: null
60 |             };
61 |         }
62 |     };
63 | 
64 |     return {
65 |         getWebGLFingerprint,
66 |         isWebGLSupported
67 |     };
68 | } 


--------------------------------------------------------------------------------
/app/composables/useAudioFingerprint.ts:
--------------------------------------------------------------------------------
 1 | interface AudioFingerprintData {
 2 |     hash: number;
 3 | }
 4 | 
 5 | export function useAudioFingerprint() {
 6 |     const isSupported = useSupported(() => window.OfflineAudioContext !== undefined)
 7 | 
 8 |     const getAudioFingerprint = async (): Promise<AudioFingerprintData | null> => {
 9 |         if (!isSupported.value) return null;
10 | 
11 |         return new Promise((resolve) => {
12 |             const { start, stop } = useTimeoutFn(() => {
13 |                 console.warn('Audio fingerprint generation timed out')
14 |                 resolve(null)
15 |             }, 5000)
16 | 
17 |             start()
18 | 
19 |             const generateFingerprint = async () => {
20 |                 try {
21 |                     // Get appropriate AudioContext constructor
22 |                     const AudioContextClass = window.OfflineAudioContext;
23 |                     if (!AudioContextClass) {
24 |                         return null;
25 |                     }
26 | 
27 |                     // Create audio context
28 |                     const context = new AudioContextClass(1, 5000, 44100);
29 | 
30 |                     // Create oscillator
31 |                     const oscillator = context.createOscillator();
32 |                     oscillator.type = "triangle";
33 |                     oscillator.frequency.value = 1000;
34 | 
35 |                     // Create compressor
36 |                     const compressor = context.createDynamicsCompressor();
37 |                     compressor.threshold.value = -50;
38 |                     compressor.knee.value = 40;
39 |                     compressor.ratio.value = 12;
40 |                     compressor.attack.value = 0;
41 |                     compressor.release.value = 0.2;
42 | 
43 |                     // Connect nodes
44 |                     oscillator.connect(compressor);
45 |                     compressor.connect(context.destination);
46 | 
47 |                     // Start oscillator
48 |                     oscillator.start();
49 | 
50 |                     // Render audio and calculate hash
51 |                     const buffer = await new Promise<AudioBuffer>((resolve) => {
52 |                         context.oncomplete = (event) => resolve(event.renderedBuffer);
53 |                         context.startRendering();
54 |                     });
55 | 
56 |                     // Get samples and calculate hash
57 |                     const samples = buffer.getChannelData(0);
58 |                     let hash = 0;
59 |                     for (let i = 0; i < samples.length; ++i) {
60 |                         const sample = samples[i];
61 |                         if (typeof sample === 'number') {
62 |                             hash += Math.abs(sample);
63 |                         }
64 |                     }
65 | 
66 |                     return { hash };
67 |                 } catch (error) {
68 |                     console.error('Error generating audio fingerprint:', error);
69 |                     return null;
70 |                 }
71 |             };
72 | 
73 |             generateFingerprint().then((result) => {
74 |                 stop();
75 |                 resolve(result);
76 |             });
77 |         });
78 |     };
79 | 
80 |     return {
81 |         getAudioFingerprint,
82 |         isSupported
83 |     };
84 | } 


--------------------------------------------------------------------------------
/app/composables/useFontDetection.ts:
--------------------------------------------------------------------------------
 1 | export function useFontDetection() {
 2 |     const getFonts = () => {
 3 |         if (!import.meta.client) return { fonts: [], total: 0 };
 4 | 
 5 |         const baseFonts = ['monospace', 'sans-serif', 'serif'];
 6 |         const fontList = [
 7 |             // Common Windows Fonts
 8 |             'Arial', 'Arial Black', 'Arial Narrow', 'Calibri', 'Cambria',
 9 |             'Cambria Math', 'Comic Sans MS', 'Courier', 'Courier New',
10 |             'Georgia', 'Helvetica', 'Impact', 'Times', 'Times New Roman',
11 |             'Trebuchet MS', 'Verdana', 'Segoe UI', 'Tahoma', 'Consolas',
12 |             'Lucida Console', 'MS Gothic', 'MS PGothic', 'MS Sans Serif',
13 |             'MS Serif', 'Palatino Linotype', 'Book Antiqua',
14 |             
15 |             // Common Mac Fonts
16 |             'American Typewriter', 'Andale Mono', 'Apple Chancery',
17 |             'Apple Color Emoji', 'Apple SD Gothic Neo', 'AppleGothic',
18 |             'Avenir', 'Avenir Next', 'Baskerville', 'Big Caslon',
19 |             'Brush Script MT', 'Chalkboard', 'Cochin', 'Copperplate',
20 |             'Didot', 'Futura', 'Geneva', 'Gill Sans', 'Helvetica Neue',
21 |             'Herculanum', 'Hoefler Text', 'Lucida Grande', 'Luminari',
22 |             'Marker Felt', 'Menlo', 'Monaco', 'Noteworthy', 'Optima',
23 |             'Papyrus', 'Phosphate', 'Rockwell', 'Skia', 'Snell Roundhand',
24 |             'Zapfino',
25 | 
26 |             // Common Linux Fonts
27 |             'DejaVu Sans', 'DejaVu Sans Mono', 'DejaVu Serif', 'Liberation Mono',
28 |             'Liberation Sans', 'Liberation Serif', 'Ubuntu', 'Ubuntu Mono',
29 |             'Noto Sans', 'Noto Serif', 'Droid Sans', 'Droid Serif',
30 |             'FreeMono', 'FreeSans', 'FreeSerif', 'Nimbus Roman', 'Nimbus Sans',
31 |             
32 |             // Popular Web Fonts
33 |             'Roboto', 'Open Sans', 'Lato', 'Montserrat', 'Source Sans Pro',
34 |             'Raleway', 'PT Sans', 'Noto Sans', 'Ubuntu', 'Nunito',
35 |             'Playfair Display', 'Poppins', 'Merriweather', 'Oswald',
36 |             'Quicksand', 'Dancing Script', 'Pacifico'
37 |         ];
38 | 
39 |         const testString = 'mmmmmmmmmmlli';
40 |         const testSize = '72px';
41 |         const canvas = document.createElement('canvas');
42 |         const context = canvas.getContext('2d');
43 | 
44 |         if (!context) {
45 |             return {
46 |                 fonts: [],
47 |                 total: 0
48 |             };
49 |         }
50 | 
51 |         const detectFont = (font: string): boolean => {
52 |             const baseWidth: Record<string, number> = {};
53 |             baseFonts.forEach(baseFont => {
54 |                 context.font = `${testSize} ${baseFont}`;
55 |                 baseWidth[baseFont] = context.measureText(testString).width;
56 |             });
57 | 
58 |             let detected = false;
59 |             for (const baseFont of baseFonts) {
60 |                 context.font = `${testSize} "${font}", ${baseFont}`;
61 |                 const width = context.measureText(testString).width;
62 |                 if (width !== baseWidth[baseFont]) {
63 |                     detected = true;
64 |                     break;
65 |                 }
66 |             }
67 |             return detected;
68 |         };
69 | 
70 |         const detectedFonts = fontList.filter(font => detectFont(font));
71 | 
72 |         return {
73 |             fonts: detectedFonts,
74 |             total: detectedFonts.length
75 |         };
76 |     };
77 | 
78 |     return {
79 |         getFonts
80 |     };
81 | } 


--------------------------------------------------------------------------------
/app/composables/useSystemInfo.ts:
--------------------------------------------------------------------------------
  1 | interface BatteryInfo {
  2 |     charging: boolean;
  3 |     chargingTime: number;
  4 |     dischargingTime: number;
  5 |     level: number;
  6 | }
  7 | 
  8 | interface NavigatorExtended extends Navigator {
  9 |     deviceMemory?: number;
 10 |     hardwareConcurrency: number;
 11 |     userAgentData?: {
 12 |         platform: string;
 13 |         brands: Array<{ brand: string; version: string }>;
 14 |         mobile: boolean;
 15 |     };
 16 |     getBattery?: () => Promise<BatteryManager>;
 17 | }
 18 | 
 19 | interface BatteryManager {
 20 |     charging: boolean;
 21 |     chargingTime: number;
 22 |     dischargingTime: number;
 23 |     level: number;
 24 | }
 25 | 
 26 | export function useSystemInfo() {
 27 |     const preferredLanguages = usePreferredLanguages()
 28 |     const memory = useMemory()
 29 |     const battery = useBattery()
 30 |     const { pixelRatio } = useDevicePixelRatio()
 31 |     const screenOrientation = useScreenOrientation()
 32 |     const windowSize = useWindowSize()
 33 | 
 34 |     const getSystemInfo = async () => {
 35 |         if (!import.meta.client) {
 36 |             return {
 37 |                 osInfo: 'Unknown',
 38 |                 cpuCores: 0,
 39 |                 deviceMemory: 0,
 40 |                 batteryInfo: null,
 41 |                 bluetoothAvailable: false,
 42 |             }
 43 |         }
 44 | 
 45 |         const nav = navigator as NavigatorExtended
 46 |         let osInfo = 'Unknown'
 47 |         let cpuCores = nav.hardwareConcurrency
 48 | 
 49 |         // Attempt to get more accurate OS information
 50 |         if (nav.userAgentData) {
 51 |             osInfo = nav.userAgentData.platform
 52 |         } else {
 53 |             const userAgent = nav.userAgent.toLowerCase()
 54 |             if (userAgent.includes('win')) osInfo = 'Windows'
 55 |             else if (userAgent.includes('mac')) osInfo = 'macOS'
 56 |             else if (userAgent.includes('linux')) osInfo = 'Linux'
 57 |             else if (userAgent.includes('android')) osInfo = 'Android'
 58 |             else if (userAgent.includes('ios')) osInfo = 'iOS'
 59 |         }
 60 | 
 61 |         return {
 62 |             osInfo,
 63 |             cpuCores,
 64 |             deviceMemory: memory.memory.value?.jsHeapSizeLimit || 0,
 65 |             batteryInfo: battery.isSupported.value ? {
 66 |                 charging: battery.charging.value,
 67 |                 chargingTime: battery.chargingTime.value,
 68 |                 dischargingTime: battery.dischargingTime.value,
 69 |                 level: battery.level.value,
 70 |             } : null,
 71 |             bluetoothAvailable: 'bluetooth' in nav,
 72 |             languages: preferredLanguages.value,
 73 |         }
 74 |     }
 75 | 
 76 |     const getScreenInfo = () => {
 77 |         if (!import.meta.client) {
 78 |             return {
 79 |                 width: 0,
 80 |                 height: 0,
 81 |                 colorDepth: 0,
 82 |                 pixelRatio: 1,
 83 |                 orientation: 'unknown',
 84 |                 windowWidth: 0,
 85 |                 windowHeight: 0,
 86 |             }
 87 |         }
 88 | 
 89 |         return {
 90 |             width: window.screen.width,
 91 |             height: window.screen.height,
 92 |             colorDepth: window.screen.colorDepth,
 93 |             pixelRatio: pixelRatio.value,
 94 |             orientation: screenOrientation.orientation?.value || 'unknown',
 95 |             windowWidth: windowSize.width.value,
 96 |             windowHeight: windowSize.height.value,
 97 |         }
 98 |     }
 99 | 
100 |     return {
101 |         getSystemInfo,
102 |         getScreenInfo
103 |     }
104 | } 


--------------------------------------------------------------------------------
/app/components/AudioVisualizer.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | interface Props {
  3 |     audioData: { hash: number } | null
  4 | }
  5 | 
  6 | const props = defineProps<Props>()
  7 | const canvasRef = ref<HTMLCanvasElement | null>(null)
  8 | 
  9 | const generateVisualizationData = (audioData: { hash: number } | null): number[] => {
 10 |     if (!audioData || typeof audioData.hash !== 'number') {
 11 |         return new Array(50).fill(0);
 12 |     }
 13 |     
 14 |     const hashString = audioData.hash.toString();
 15 |     const data = [];
 16 |     for (let i = 0; i < 50; i++) {
 17 |         const value = (parseInt(hashString.slice(i % hashString.length, (i % hashString.length) + 1)) / 10) - 0.5;
 18 |         data.push(value);
 19 |     }
 20 |     return data;
 21 | }
 22 | 
 23 | const drawWaveform = () => {
 24 |     const canvas = canvasRef.value
 25 |     if (!canvas) return
 26 | 
 27 |     const ctx = canvas.getContext('2d')
 28 |     if (!ctx) return
 29 | 
 30 |     // Get the actual pixel dimensions of the canvas
 31 |     const rect = canvas.getBoundingClientRect()
 32 |     canvas.width = rect.width * window.devicePixelRatio
 33 |     canvas.height = rect.height * window.devicePixelRatio
 34 | 
 35 |     // Clear the canvas
 36 |     ctx.clearRect(0, 0, canvas.width, canvas.height)
 37 | 
 38 |     // Set up styling
 39 |     ctx.strokeStyle = '#3b82f6' // blue-500
 40 |     ctx.lineWidth = 2 * window.devicePixelRatio
 41 |     ctx.lineCap = 'round'
 42 | 
 43 |     // Calculate dimensions
 44 |     const width = canvas.width
 45 |     const height = canvas.height
 46 |     const padding = 10 * window.devicePixelRatio
 47 |     const drawingWidth = width - (padding * 2)
 48 |     const drawingHeight = height - (padding * 2)
 49 |     const middle = height / 2
 50 | 
 51 |     // Generate and draw the waveform
 52 |     const data = generateVisualizationData(props.audioData)
 53 |     ctx.beginPath()
 54 |     ctx.moveTo(padding, middle)
 55 | 
 56 |     const step = drawingWidth / (data.length - 1)
 57 |     data.forEach((value, index) => {
 58 |         const x = padding + (index * step)
 59 |         const y = middle + (value * drawingHeight / 2)
 60 |         if (index === 0) {
 61 |             ctx.moveTo(x, y)
 62 |         } else {
 63 |             ctx.lineTo(x, y)
 64 |         }
 65 |     })
 66 | 
 67 |     ctx.stroke()
 68 | 
 69 |     ctx.strokeStyle = 'rgba(148, 163, 184, 0.1)' 
 70 |     ctx.lineWidth = 1 * window.devicePixelRatio
 71 | 
 72 |     // Vertical grid lines
 73 |     for (let i = 0; i <= drawingWidth; i += drawingWidth / 10) {
 74 |         ctx.beginPath()
 75 |         ctx.moveTo(padding + i, padding)
 76 |         ctx.lineTo(padding + i, height - padding)
 77 |         ctx.stroke()
 78 |     }
 79 | 
 80 |     // Horizontal grid lines
 81 |     for (let i = 0; i <= drawingHeight; i += drawingHeight / 4) {
 82 |         ctx.beginPath()
 83 |         ctx.moveTo(padding, padding + i)
 84 |         ctx.lineTo(width - padding, padding + i)
 85 |         ctx.stroke()
 86 |     }
 87 | }
 88 | 
 89 | // Watch for audioData changes and redraw
 90 | watch(() => props.audioData, drawWaveform, { immediate: true })
 91 | 
 92 | // Handle resize events
 93 | onMounted(() => {
 94 |     const resizeObserver = new ResizeObserver(drawWaveform)
 95 |     if (canvasRef.value) {
 96 |         resizeObserver.observe(canvasRef.value)
 97 |     }
 98 | 
 99 |     onUnmounted(() => {
100 |         resizeObserver.disconnect()
101 |     })
102 | })
103 | </script>
104 | 
105 | <template>
106 |     <div class="relative w-full h-[100px] bg-white dark:bg-gray-800 rounded-lg overflow-hidden">
107 |         <canvas ref="canvasRef" class="absolute inset-0 w-full h-full"></canvas>
108 |     </div>
109 | </template>


--------------------------------------------------------------------------------
/app/components/ui/chart-line/LineChart.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts" generic="T extends Record<string, any>">
  2 | import type { BaseChartProps } from '.'
  3 | import { ChartCrosshair, ChartLegend, defaultColors } from '@/components/ui/chart'
  4 | import { cn } from '@/lib/utils'
  5 | import { type BulletLegendItemInterface, CurveType } from '@unovis/ts'
  6 | import { Axis, Line } from '@unovis/ts'
  7 | import { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
  8 | import { useMounted } from '@vueuse/core'
  9 | import { type Component, computed, ref } from 'vue'
 10 | 
 11 | const props = withDefaults(defineProps<BaseChartProps<T> & {
 12 |   /**
 13 |    * Render custom tooltip component.
 14 |    */
 15 |   customTooltip?: Component
 16 |   /**
 17 |    * Type of curve
 18 |    */
 19 |   curveType?: CurveType
 20 | }>(), {
 21 |   curveType: CurveType.MonotoneX,
 22 |   filterOpacity: 0.2,
 23 |   margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
 24 |   showXAxis: true,
 25 |   showYAxis: true,
 26 |   showTooltip: true,
 27 |   showLegend: true,
 28 |   showGridLine: true,
 29 | })
 30 | 
 31 | const emits = defineEmits<{
 32 |   legendItemClick: [d: BulletLegendItemInterface, i: number]
 33 | }>()
 34 | 
 35 | type KeyOfT = Extract<keyof T, string>
 36 | type Data = typeof props.data[number]
 37 | 
 38 | const index = computed(() => props.index as KeyOfT)
 39 | const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
 40 | 
 41 | const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({
 42 |   name: category,
 43 |   color: colors.value[i],
 44 |   inactive: false,
 45 | })))
 46 | 
 47 | const isMounted = useMounted()
 48 | 
 49 | function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
 50 |   emits('legendItemClick', d, i)
 51 | }
 52 | </script>
 53 | 
 54 | <template>
 55 |   <div :class="cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')">
 56 |     <ChartLegend v-if="showLegend" v-model:items="legendItems" @legend-item-click="handleLegendItemClick" />
 57 | 
 58 |     <VisXYContainer
 59 |       :margin="{ left: 20, right: 20 }"
 60 |       :data="data"
 61 |       :style="{ height: isMounted ? '100%' : 'auto' }"
 62 |     >
 63 |       <ChartCrosshair v-if="showTooltip" :colors="colors" :items="legendItems" :index="index" :custom-tooltip="customTooltip" />
 64 | 
 65 |       <template v-for="(category, i) in categories" :key="category">
 66 |         <VisLine
 67 |           :x="(d: Data, i: number) => i"
 68 |           :y="(d: Data) => d[category]"
 69 |           :curve-type="curveType"
 70 |           :color="colors[i]"
 71 |           :attributes="{
 72 |             [Line.selectors.line]: {
 73 |               opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,
 74 |             },
 75 |           }"
 76 |         />
 77 |       </template>
 78 | 
 79 |       <VisAxis
 80 |         v-if="showXAxis"
 81 |         type="x"
 82 |         :tick-format="xFormatter ?? ((v: number) => data[v]?.[index])"
 83 |         :grid-line="false"
 84 |         :tick-line="false"
 85 |         tick-text-color="hsl(var(--vis-text-color))"
 86 |       />
 87 |       <VisAxis
 88 |         v-if="showYAxis"
 89 |         type="y"
 90 |         :tick-line="false"
 91 |         :tick-format="yFormatter"
 92 |         :domain-line="false"
 93 |         :grid-line="showGridLine"
 94 |         :attributes="{
 95 |           [Axis.selectors.grid]: {
 96 |             class: 'text-muted',
 97 |           },
 98 |         }"
 99 |         tick-text-color="hsl(var(--vis-text-color))"
100 |       />
101 | 
102 |       <slot />
103 |     </VisXYContainer>
104 |   </div>
105 | </template>
106 | 


--------------------------------------------------------------------------------
/content/privacy-tools.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Privacy Tools
 3 | description: Enhance your online privacy and reduce your browser fingerprint with these recommended tools and settings.
 4 | icon: mdi:shield-lock
 5 | 
 6 | warning:
 7 |   title: Important Note About Spoofing
 8 |   description: We don't recommend using fingerprint spoofers as they can be easily detected, potentially making you more identifiable. The best approach is to block tracking scripts and use privacy-focused tools.
 9 | 
10 | categories:
11 |   - title: Browser Extensions
12 |     tools:
13 |       - name: uBlock Origin
14 |         icon: mdi:shield-check
15 |         description: Efficient blocker for ads, trackers, and other privacy-invasive elements.
16 |         link: https://ublockorigin.com/
17 |         chromeLink: https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm
18 |         firefoxLink: https://addons.mozilla.org/firefox/addon/ublock-origin/
19 |         recommended: true
20 | 
21 |       - name: Privacy Badger
22 |         icon: mdi:paw
23 |         description: Automatically learns to block invisible trackers based on their behavior.
24 |         link: https://privacybadger.org/
25 |         chromeLink: https://chrome.google.com/webstore/detail/privacy-badger/pkehgijcmpdhfbdbbnkijodmdjhbjlgp
26 |         firefoxLink: https://addons.mozilla.org/firefox/addon/privacy-badger17/
27 |         recommended: true
28 | 
29 |       - name: Ghostery
30 |         icon: mdi:ghost
31 |         description: Protect your privacy by blocking trackers and visualizing who is watching you.
32 |         link: https://www.ghostery.com/
33 |         chromeLink: https://chrome.google.com/webstore/detail/ghostery/mlomiejdfkolichcflejclcbmpeaniij
34 |         firefoxLink: https://addons.mozilla.org/firefox/addon/ghostery/
35 |         recommended: true
36 | 
37 |   - title: Privacy-Focused Browsers
38 |     tools:
39 |       - name: Brave Browser
40 |         icon: mdi:shield-crown
41 |         description: Privacy-focused browser with built-in ad and tracker blocking.
42 |         link: https://brave.com/
43 | 
44 |       - name: Tor Browser
45 |         icon: mdi:web-box
46 |         description: Provides anonymity by routing your traffic through the Tor network.
47 |         link: https://www.torproject.org/
48 | 
49 |       - name: Mullvad Browser
50 |         icon: mdi:shield-lock
51 |         description: A privacy-focused browser that routes your traffic through the Tor network.
52 |         link: https://mullvad.net/browser/
53 |         recommended: true
54 | 
55 |   - title: Search engine, browser and operating systems
56 |     tools:
57 |       - name: Tails
58 |         icon: mdi:laptop
59 |         description: The Amnesic Incognito Live System. Leaves no trace on your computer and routes all traffic through Tor.
60 |         link: https://tails.net/
61 |         recommended: true
62 | 
63 |       - name: Whonix
64 |         icon: mdi:shield-lock
65 |         description: Operating system focused on anonymity, privacy and security. Routes all connections through the Tor network.
66 |         link: https://www.whonix.org/
67 | 
68 |       - name: DuckDuckGo
69 |         icon: mdi:shield-check
70 |         description: Privacy-focused search engine that doesn't track you.
71 |         link: https://duckduckgo.com/
72 | 
73 |       - name: Qwant
74 |         icon: mdi:shield-check
75 |         description: Privacy-focused search engine that doesn't track you.
76 |         link: https://www.qwant.com/
77 |         recommended: true
78 | 
79 | bestPractices:
80 |   title: Privacy Best Practices
81 |   description: Following these practices can significantly improve your online privacy
82 |   columns:
83 |     - items:
84 |         - text: Regularly clear browser cookies and cache
85 |         - text: Use different browsers for different activities
86 |         - text: Keep software and extensions updated
87 |         - text: Use privacy-focused search engines
88 |     - items:
89 |         - text: Enable HTTPS-only mode in your browser
90 |         - text: Use strong, unique passwords
91 |         - text: Enable two-factor authentication
92 |         - text: Avoid logging in to services unnecessarily
93 | --- 


--------------------------------------------------------------------------------
/.cursorrules:
--------------------------------------------------------------------------------
 1 | You are an expert in Vue 3, Nuxt 4, TypeScript, Node.js, Vite, Vue Router, VueUse, shadcn-vue, and Tailwind CSS. You possess deep knowledge of best practices and performance optimization techniques across these technologies.
 2 | 
 3 | Code Style and Structure
 4 | - Write clean, maintainable, and technically accurate TypeScript code.
 5 | - Prioritize functional and declarative programming patterns; avoid using classes.
 6 | - Emphasize iteration and modularization to follow DRY principles and minimize code duplication.
 7 | - Always use Composition API with Typescript: `<script setup lang="ts">`.
 8 | - Use composables for reusable client-side logic or state across components.
 9 | - Prioritize readability and simplicity over premature optimization.
10 | - Leave NO to-do's, placeholders, or missing pieces in your code.
11 | - Ask clarifying questions when necessary.
12 | 
13 | Nuxt 4 Specifics
14 | - Follow the new app/ directory structure for components/, composables/, layouts/, middleware/, pages/, plugins/, and utils/.
15 | - Keep nuxt.config.ts, content/, layers/, modules/, public/, and server/ in the root directory.
16 | - Nuxt 4 provides auto-imports, so there's no need to manually import `ref`, `useState`, `useRouter`, or similar Vue or Nuxt functions.
17 | - For color mode handling, use the built-in `@nuxtjs/color-mode` with the `useColorMode()` function.
18 | - Utilize VueUse functions for any functionality it provides to enhance reactivity, performance, and avoid writing unnecessary custom code.
19 | - Use the Server API (within the root `server/api` directory) to handle server-side operations like database interactions, authentication, or processing sensitive data.
20 | - Use `useRuntimeConfig().public` for client-side configuration and environment variables, and `useRuntimeConfig()` for the rest.
21 | - For SEO use `useHead` and `useSeoMeta`.
22 | - Use `app/app.config.ts` for app theme configuration.
23 | - Use `useState` for state management when needed across components.
24 | - Throw errors using the `createError` function:
25 |   - On the client-side: Pass a string error message as the parameter.
26 |     Example: `throw createError('User not found')`
27 |   - On the server-side: Pass an object with `statusMessage` and `statusCode` properties.
28 |     Example: `throw createError({ statusCode: 404, statusMessage: 'User not found' })`
29 | 
30 | Data Fetching
31 | - Use `useFetch` for standard data fetching in components setup function that benefit from SSR, caching, and reactively updating based on URL changes. 
32 | - Use `$fetch` for client-side requests within event handlers or functions or when SSR optimization is not needed.
33 | - Use `useAsyncData` when implementing complex data fetching logic like combining multiple API calls or custom caching and error handling in component setup.
34 | - Set `server: false` in `useFetch` or `useAsyncData` options to fetch data only on the client side, bypassing SSR.
35 | - Set `lazy: true` in `useFetch` or `useAsyncData` options to defer non-critical data fetching until after the initial render.
36 | 
37 | Naming Conventions
38 | - Name composables as `use[ComposableName]`.
39 | - Use **PascalCase** for component files (e.g., `app/components/MyComponent.vue`).
40 | - Use **camelCase** for all other files and functions (e.g., `app/pages/myPage.vue`, `server/api/myEndpoint.ts`).
41 | - Prefer named exports for functions to maintain consistency and readability.
42 | 
43 | TypeScript Usage
44 | - Use TypeScript throughout the project.
45 | - Prefer interfaces over types for better extendability and merging.
46 | - Implement proper typing for API request bodies and responses, and component props.
47 | - Utilize type inference and avoid unnecessary type annotations.
48 | 
49 | UI and Styling
50 | - Use shadcn-vue components (e.g., <Button>, <Input>, <Dialog>).
51 | - Apply inline Tailwind CSS classes for styling.
52 | - Implement responsive design using Tailwind's mobile-first approach.
53 | - Use `<NuxtImg>` or `<NuxtPicture>` for images and always add an explicit `width` and `height` attribute.
54 | - Use `<Icon>` component from @nuxt/icon module for icons.
55 | 
56 | SEO Best Practices
57 | - Use semantic HTML elements appropriately.
58 | - Ensure proper heading hierarchy (H1, H2, H3, etc.) on each page.
59 | - Use `<NuxtLink>` for internal linking to leverage prefetching.
60 | - Use lazy loading for images and components that do not need to be immediately accessible


--------------------------------------------------------------------------------
/app/components/FingerprintIcon.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="fingerprint-container" :class="{ 'animate-pulse': pulse }">
  3 |         <svg class="fingerprint-svg mx-auto" :width="size" :height="size" viewBox="0 0 34 34"
  4 |             xmlns="http://www.w3.org/2000/svg">
  5 |             <g transform="translate(1.000000, 1.000000)" :class="[
  6 |                 strokeColorClass,
  7 |                 { 'animate-scan': scanning }
  8 |             ]">
  9 |                 <circle cx="16" cy="16" r="16" fill="none" :stroke-width="strokeWidth" />
 10 |                 <g transform="translate(7.000000, 6.000000)" stroke-linecap="round" fill="none"
 11 |                     :stroke-width="strokeWidth">
 12 |                     <path class="fingerprint-path"
 13 |                         d="M3.14414922,1.97419264 C3.14414922,1.97419264 5.30885997,0.506351808 9.06036082,0.506351808 C12.8118617,0.506351808 14.781903,1.97419264 14.781903,1.97419264" />
 14 |                     <path class="fingerprint-path"
 15 |                         d="M0.466210729,7.27628774 C0.466210729,7.27628774 3.19024811,2.75878123 9.09512428,2.96502806 C15.0000005,3.17127489 17.4745821,7.17202872 17.4745821,7.17202872" />
 16 |                     <path class="fingerprint-path"
 17 |                         d="M2,16.4687762 C2,16.4687762 1.12580828,14.9305411 1.27082278,11.9727304 C1.45871447,8.14036841 5.19587478,5.30175361 9.05270871,5.30175361 C12.9095426,5.30175361 15.0000001,7.82879552 15.8975926,9.33195218 C16.5919575,10.4947729 17.7597991,14.4361492 14.6226101,15.0206592 C12.41268,15.4324056 11.5911303,13.4911155 11.5911303,12.9859143 C11.5911303,11.9727302 11.1054172,10.2336826 9.05270848,10.2336826 C6.99999978,10.2336826 6.11384543,11.8665663 6.4593664,13.7955614 C6.6532895,14.8782069 7.59887942,18.3701197 12.0173963,19.5605638" />
 18 |                     <path class="fingerprint-path"
 19 |                         d="M7.0204614,19.6657197 C7.0204614,19.6657197 3.88328263,16.5690127 3.88328268,12.9603117 C3.88328274,9.35161068 6.59923746,7.80642537 9.0076008,7.80642554 C11.4159641,7.8064257 14.1798468,9.55747124 14.1798468,12.759562" />
 20 |                     <path class="fingerprint-path"
 21 |                         d="M8.95538742,12.6694189 C8.95538742,12.6694189 9.04883608,18.1288401 15.069217,17.3610597" />
 22 |                 </g>
 23 |             </g>
 24 |         </svg>
 25 |     </div>
 26 | </template>
 27 | 
 28 | <script setup lang="ts">
 29 | interface Props {
 30 |     size?: number
 31 |     strokeWidth?: number
 32 |     scanning?: boolean
 33 |     pulse?: boolean
 34 |     variant?: 'default' | 'primary' | 'success' | 'warning' | 'error'
 35 | }
 36 | 
 37 | const props = withDefaults(defineProps<Props>(), {
 38 |     size: 64,
 39 |     strokeWidth: 1,
 40 |     scanning: false,
 41 |     pulse: false,
 42 |     variant: 'default'
 43 | })
 44 | 
 45 | const variantColors = {
 46 |     default: 'stroke-blue-500 dark:stroke-blue-400',
 47 |     primary: 'stroke-indigo-500 dark:stroke-indigo-400',
 48 |     success: 'stroke-green-500 dark:stroke-green-400',
 49 |     warning: 'stroke-yellow-500 dark:stroke-yellow-400',
 50 |     error: 'stroke-red-500 dark:stroke-red-400'
 51 | }
 52 | 
 53 | const strokeColorClass = computed(() => variantColors[props.variant])
 54 | </script>
 55 | 
 56 | <style scoped>
 57 | .fingerprint-container {
 58 |     display: flex;
 59 |     justify-content: center;
 60 |     align-items: center;
 61 |     margin: 0 auto;
 62 | }
 63 | 
 64 | .fingerprint-svg {
 65 |     transform-origin: center;
 66 | }
 67 | 
 68 | .fingerprint-path {
 69 |     stroke-dasharray: 100;
 70 |     stroke-dashoffset: 100;
 71 |     opacity: 0;
 72 |     animation: drawPath 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
 73 | }
 74 | 
 75 | .fingerprint-path:nth-child(1) {
 76 |     animation-delay: 0s;
 77 | }
 78 | 
 79 | .fingerprint-path:nth-child(2) {
 80 |     animation-delay: 0.4s;
 81 | }
 82 | 
 83 | .fingerprint-path:nth-child(3) {
 84 |     animation-delay: 0.8s;
 85 | }
 86 | 
 87 | .fingerprint-path:nth-child(4) {
 88 |     animation-delay: 1.2s;
 89 | }
 90 | 
 91 | .fingerprint-path:nth-child(5) {
 92 |     animation-delay: 1.6s;
 93 | }
 94 | 
 95 | @keyframes drawPath {
 96 |     0% {
 97 |         stroke-dashoffset: 100;
 98 |         opacity: 0;
 99 |     }
100 | 
101 |     20% {
102 |         opacity: 1;
103 |         stroke-dashoffset: 0;
104 |     }
105 | 
106 |     40%,
107 |     60% {
108 |         stroke-dashoffset: 0;
109 |         opacity: 1;
110 |     }
111 | 
112 |     80% {
113 |         opacity: 1;
114 |         stroke-dashoffset: -100;
115 |     }
116 | 
117 |     100% {
118 |         stroke-dashoffset: -100;
119 |         opacity: 0;
120 |     }
121 | }
122 | 
123 | .animate-scan {
124 |     animation: scanEffect 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
125 | }
126 | 
127 | @keyframes scanEffect {
128 | 
129 |     0%,
130 |     100% {
131 |         transform: translateY(0);
132 |     }
133 | 
134 |     50% {
135 |         transform: translateY(1px);
136 |     }
137 | }
138 | </style>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <div align="center">
  2 | 
  3 | # 🔍 Browser Fingerprint Analyzer
  4 | 
  5 | [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
  6 | [![Nuxt](https://img.shields.io/badge/Nuxt-3.x-00DC82.svg?logo=nuxt.js)](https://nuxt.com/)
  7 | [![Vue.js](https://img.shields.io/badge/Vue.js-3.x-4FC08D.svg?logo=vue.js)](https://vuejs.org/)
  8 | [![TailwindCSS](https://img.shields.io/badge/TailwindCSS-3.x-38B2AC.svg?logo=tailwind-css)](https://tailwindcss.com/)
  9 | 
 10 | A modern web application built with Nuxt 3 that analyzes and displays your browser's unique fingerprint. This tool demonstrates various browser fingerprinting techniques and provides detailed insights about your browser's characteristics.
 11 | 
 12 | [Demo](https://trackme.dev) · [Report Bug](https://github.com/LeonKohli/browser-fingerprint/issues) · [Request Feature](https://github.com/LeonKohli/browser-fingerprint/issues) · [Support Project ☕](https://www.buymeacoffee.com/LeonKohli)
 13 | 
 14 | </div>
 15 | 
 16 | ## ✨ Features
 17 | 
 18 | ### 🚀 Core Features
 19 | - Real-time browser fingerprint generation
 20 | - Detailed analysis of browser characteristics
 21 | - Entropy score calculation
 22 | - Dark mode support
 23 | - Responsive design
 24 | - Interactive UI components
 25 | - Comprehensive system information display
 26 | 
 27 | ### 📊 Analysis Categories
 28 | - Browser Information
 29 | - System Details
 30 | - Hardware Specs
 31 | - Media Capabilities
 32 | - Network Analysis
 33 | - Security Features
 34 | </table>
 35 | 
 36 | ## 🛠️ Tech Stack
 37 | 
 38 | <details>
 39 | <summary>Click to expand</summary>
 40 | 
 41 | - **Framework**: [Nuxt.js 3](https://nuxt.com) - Vue-powered SSR framework
 42 | - **UI Components**: [shadcn-vue](https://www.shadcn-vue.com/) - Beautifully designed components
 43 | - **Styling**: [TailwindCSS](https://tailwindcss.com) - Utility-first CSS framework
 44 | - **Icons**: [@nuxt/icon](https://github.com/nuxt-modules/icon) - Icon module for Nuxt
 45 | - **State Management**: Vue 3 Composition API
 46 | - **Color Mode**: [@nuxtjs/color-mode](https://color-mode.nuxtjs.org/) - Dark/Light mode support
 47 | - **Utility Functions**: [@vueuse/core](https://vueuse.org/) - Collection of Vue Composition Utilities
 48 | 
 49 | </details>
 50 | 
 51 | ## 🚀 Getting Started
 52 | 
 53 | ### Prerequisites
 54 | 
 55 | Before you begin, ensure you have the following installed:
 56 | - Node.js (Latest LTS version recommended)
 57 | - Package manager of your choice:
 58 |   - [bun](https://bun.sh/) (recommended)
 59 | 
 60 | ### 📥 Installation
 61 | 
 62 | 1. Clone the repository
 63 |    ```bash
 64 |    git clone https://github.com/LeonKohli/browser-fingerprint.git
 65 |    cd browser-fingerprint
 66 |    ```
 67 | 
 68 | 2. Install dependencies
 69 |    ```bash
 70 |    # Using bun
 71 |    bun install
 72 |    ```
 73 | 
 74 | ### 💻 Development
 75 | 
 76 | Start the development server on `http://localhost:3000`:
 77 | 
 78 | ```bash
 79 | bun dev
 80 | ```
 81 | 
 82 | ### 🏗️ Production
 83 | 
 84 | Build and preview the production build:
 85 | 
 86 | ```bash
 87 | # Build
 88 | bun build
 89 | 
 90 | # Preview
 91 | bun preview
 92 | ```
 93 | 
 94 | ## 🔍 Features in Detail
 95 | 
 96 | <details>
 97 | <summary><b>🌐 Browser Information</b></summary>
 98 | 
 99 | - Browser name and version detection
100 | - User agent analysis
101 | - Platform identification
102 | - Cookie and privacy settings detection
103 | </details>
104 | 
105 | <details>
106 | <summary><b>💻 System Information</b></summary>
107 | 
108 | - Operating system detection
109 | - Timezone information
110 | - Font enumeration
111 | - System capabilities
112 | </details>
113 | 
114 | <details>
115 | <summary><b>⚙️ Hardware Information</b></summary>
116 | 
117 | - Screen resolution and properties
118 | - Device memory
119 | - CPU cores
120 | - Hardware concurrency
121 | </details>
122 | 
123 | <details>
124 | <summary><b>🎮 Media Capabilities</b></summary>
125 | 
126 | - Canvas fingerprinting
127 | - Audio fingerprinting
128 | - WebGL information
129 | - Media support detection
130 | </details>
131 | 
132 | ## 🤝 Contributing
133 | 
134 | We welcome contributions! Here's how you can help:
135 | 
136 | 1. Fork the repository
137 | 2. Create your feature branch
138 |    ```bash
139 |    git checkout -b feature/AmazingFeature
140 |    ```
141 | 3. Commit your changes
142 |    ```bash
143 |    git commit -m '✨ Add some AmazingFeature'
144 |    ```
145 | 4. Push to the branch
146 |    ```bash
147 |    git push origin feature/AmazingFeature
148 |    ```
149 | 5. Open a Pull Request
150 | 
151 | ## 📄 License
152 | 
153 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
154 | 
155 | ## 🔒 Privacy Notice
156 | 
157 | > **Important**: This application demonstrates browser fingerprinting techniques for educational purposes only.
158 | 
159 | The fingerprint generated can potentially be used to track users across websites, even in private browsing mode or when using VPN services. No data is stored or transmitted to external servers.
160 | 
161 | 
162 | ---
163 | 
164 | <div align="center">
165 | 
166 | Made with ❤️ by [LeonKohli](https://github.com/LeonKohli)
167 | 
168 | If you find this project helpful, consider [buying me a coffee ☕](https://www.buymeacoffee.com/LeonKohli)
169 | 
170 | </div>
171 | 


--------------------------------------------------------------------------------
/app/components/FingerprintInfoModal.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <Dialog :open="isOpen" @update:open="handleClose">
  3 |     <DialogContent class="dark:bg-gray-900 bg-gray-50 sm:max-w-2xl">
  4 |       <DialogHeader>
  5 |         <DialogTitle class="flex items-center gap-3">
  6 |           <div class="flex items-center justify-center w-10 h-10 transition-transform duration-200 rounded-xl bg-blue-50 dark:bg-blue-900/20 group-hover:scale-105">
  7 |             <Icon :name="modalContent?.icon || 'mdi:information'" class="w-6 h-6 text-blue-500" />
  8 |           </div>
  9 |           <span class="font-semibold tracking-tight">{{ modalContent?.title }}</span>
 10 |         </DialogTitle>
 11 |         <DialogDescription class="text-gray-600 dark:text-gray-400">
 12 |           {{ modalContent?.description }}
 13 |         </DialogDescription>
 14 |       </DialogHeader>
 15 | 
 16 |       <ScrollArea class="max-h-[60vh] pr-4 -mr-4">
 17 |         <div v-if="modalContent?.sections" class="prose-sm prose dark:prose-invert max-w-[680px]">
 18 |           <!-- Iterate through sections -->
 19 |           <div v-for="section in modalContent.sections" :key="section.title" class="mb-8">
 20 |             <h2 class="flex items-center gap-3 mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100">
 21 |               <Icon :name="section.icon" class="w-5 h-5 text-blue-500" />
 22 |               {{ section.title }}
 23 |             </h2>
 24 | 
 25 |             <!-- Regular content -->
 26 |             <p v-if="section.content" 
 27 |                class="mt-4 text-base leading-relaxed text-gray-600 dark:text-gray-400">
 28 |               {{ section.content }}
 29 |             </p>
 30 | 
 31 |             <!-- List items -->
 32 |             <ul v-if="section.items" class="mt-4 space-y-3">
 33 |               <li v-for="item in section.items" :key="item"
 34 |                 class="flex items-start gap-3 text-base leading-relaxed text-gray-600 dark:text-gray-400"
 35 |               >
 36 |                 <Icon name="mdi:check-circle" class="w-5 h-5 mt-0.5 text-green-500 flex-shrink-0" />
 37 |                 <span v-html="renderMarkdownLinks(item)" class="flex-1" />
 38 |               </li>
 39 |             </ul>
 40 | 
 41 |             <!-- Resources -->
 42 |             <div v-if="section.resources" class="flex flex-wrap gap-3 mt-4">
 43 |               <a
 44 |                 v-for="resource in section.resources"
 45 |                 :key="resource.url"
 46 |                 :href="resource.url"
 47 |                 target="_blank"
 48 |                 rel="noopener noreferrer"
 49 |                 class="inline-flex items-center gap-2 px-4 py-2 text-base text-gray-700 transition-all duration-200 bg-gray-100 border rounded-lg dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-200 dark:hover:bg-gray-700 group dark:text-gray-300"
 50 |               >
 51 |                 <Icon :name="resource.icon || 'mdi:link'" class="w-5 h-5" />
 52 |                 {{ resource.label }}
 53 |                 <Icon
 54 |                   name="mdi:arrow-top-right"
 55 |                   class="w-4 h-4 transition-transform duration-200 text-gray-400 dark:text-gray-500 group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
 56 |                 />
 57 |               </a>
 58 |             </div>
 59 |           </div>
 60 |         </div>
 61 |       </ScrollArea>
 62 | 
 63 |       <DialogFooter class="gap-2 sm:gap-0">
 64 |         <Button
 65 |           variant="secondary"
 66 |           @click="handleClose"
 67 |           class="gap-2"
 68 |         >
 69 |           <Icon name="mdi:close" class="w-4 h-4" />
 70 |           Close
 71 |         </Button>
 72 |       </DialogFooter>
 73 |     </DialogContent>
 74 |   </Dialog>
 75 | </template>
 76 | 
 77 | <script setup lang="ts">
 78 | interface Props {
 79 |   isOpen: boolean
 80 |   sectionId: string
 81 | }
 82 | 
 83 | const props = defineProps<Props>()
 84 | const emit = defineEmits<{
 85 |   'update:open': [value: boolean]
 86 | }>()
 87 | 
 88 | const handleClose = () => {
 89 |   emit('update:open', false)
 90 | }
 91 | 
 92 | const renderMarkdownLinks = (text: string) => {
 93 |   return text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer" class="text-blue-500 transition-colors duration-200 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300">$1</a>')
 94 | }
 95 | 
 96 | // Fetch content data based on sectionId with refresh function
 97 | const { data: modalContent, refresh } = await useAsyncData(
 98 |   `fingerprint-${props.sectionId}`,
 99 |   () => queryContent(`fingerprinting/${props.sectionId}`).findOne()
100 | )
101 | 
102 | // Watch for sectionId changes to refetch content
103 | watch(() => props.sectionId, async () => {
104 |   if (props.sectionId) {
105 |     await refresh()
106 |   }
107 | })
108 | </script>
109 | 
110 | <style scoped>
111 | .prose pre {
112 |   position: relative;
113 |   padding: 1rem;
114 |   overflow-x: auto;
115 |   font-family: monospace;
116 |   font-size: 0.875rem;
117 |   border-radius: 0.5rem;
118 |   border-width: 1px;
119 |   background-color: rgb(249 250 251);
120 | }
121 | 
122 | .dark .prose pre {
123 |   background-color: rgba(17, 24, 39, 0.5);
124 |   border-color: rgb(31, 41, 55);
125 | }
126 | 
127 | .prose h1 {
128 |   font-size: 1.25rem;
129 |   font-weight: 600;
130 |   color: rgb(17, 24, 39);
131 |   display: flex;
132 |   align-items: center;
133 |   gap: 0.5rem;
134 |   margin-top: 0;
135 |   margin-bottom: 1rem;
136 | }
137 | 
138 | .dark .prose h1 {
139 |   color: rgb(243, 244, 246);
140 | }
141 | 
142 | .prose h2 {
143 |   font-size: 1.125rem;
144 |   font-weight: 600;
145 |   color: rgb(17, 24, 39);
146 |   display: flex;
147 |   align-items: center;
148 |   gap: 0.5rem;
149 |   margin-top: 1.5rem;
150 |   margin-bottom: 0.75rem;
151 | }
152 | 
153 | .dark .prose h2 {
154 |   color: rgb(243, 244, 246);
155 | }
156 | 
157 | .prose p {
158 |   font-size: 0.875rem;
159 |   color: rgb(75, 85, 99);
160 |   margin-top: 0.5rem;
161 |   margin-bottom: 0.5rem;
162 | }
163 | 
164 | .dark .prose p {
165 |   color: rgb(156, 163, 175);
166 | }
167 | 
168 | .prose ul {
169 |   margin-top: 0.75rem;
170 |   margin-bottom: 0.75rem;
171 |   display: flex;
172 |   flex-direction: column;
173 |   gap: 0.5rem;
174 | }
175 | 
176 | .prose li {
177 |   display: flex;
178 |   align-items: flex-start;
179 |   gap: 0.5rem;
180 |   font-size: 0.875rem;
181 |   color: rgb(75, 85, 99);
182 | }
183 | 
184 | .dark .prose li {
185 |   color: rgb(156, 163, 175);
186 | }
187 | 
188 | .prose a {
189 |   color: rgb(59, 130, 246);
190 |   transition-property: color;
191 |   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
192 |   transition-duration: 200ms;
193 | }
194 | 
195 | .prose a:hover {
196 |   color: rgb(37, 99, 235);
197 | }
198 | 
199 | .dark .prose a {
200 |   color: rgb(96, 165, 250);
201 | }
202 | 
203 | .dark .prose a:hover {
204 |   color: rgb(147, 197, 253);
205 | }
206 | </style>


--------------------------------------------------------------------------------
/app/composables/useBrowserFingerprint.ts:
--------------------------------------------------------------------------------
  1 | export function useBrowserFingerprint() {
  2 |     const { language } = useNavigatorLanguage()
  3 |     const preferredLanguages = usePreferredLanguages()
  4 |     const memory = useMemory()
  5 |     const battery = useBattery()
  6 | 
  7 |     const { getAudioFingerprint } = useAudioFingerprint()
  8 |     const { generateCanvasFingerprint } = useCanvasFingerprint()
  9 |     const { getWebGLFingerprint } = useWebGLFingerprint()
 10 |     const { getSystemInfo, getScreenInfo } = useSystemInfo()
 11 |     const { getHardwareAcceleration, getTouchSupport, getColorDepth } = useHardwareInfo()
 12 |     const { getFonts } = useFontDetection()
 13 |     const { detectIncognito } = useIncognitoDetection()
 14 |     const { calculateEntropy } = useEntropyCalculator()
 15 |     const { formatKey, copyFingerprint, getSectionDescription } = useFingerprintHelpers()
 16 | 
 17 |     const detectBrowserInfo = () => {
 18 |         const ua = navigator.userAgent
 19 |         let browserName = 'Unknown'
 20 |         let version = 'Unknown'
 21 | 
 22 |         if (ua.match(/chrome|chromium|crios/i)) {
 23 |             browserName = ua.match(/edg/i) ? 'Edge' : 'Chrome'
 24 |         } else if (ua.match(/firefox|fxios/i)) {
 25 |             browserName = 'Firefox'
 26 |         } else if (ua.match(/safari/i)) {
 27 |             browserName = 'Safari'
 28 |         } else if (ua.match(/opr\//i)) {
 29 |             browserName = 'Opera'
 30 |         } else if (ua.match(/trident/i)) {
 31 |             browserName = 'Internet Explorer'
 32 |         }
 33 | 
 34 |         const match = ua.match(/(version|edge|chrome|firefox|safari|opr)\/?\s*(\.?\d+(\.\d+)*)/i)
 35 |         if (match && match[2]) {
 36 |             version = match[2]
 37 |         }
 38 | 
 39 |         return { browserName, version }
 40 |     }
 41 | 
 42 |     const detectPrivateMode = async (): Promise<boolean> => {
 43 |         const { isPrivate } = await detectIncognito()
 44 |         return isPrivate
 45 |     }
 46 | 
 47 |     const generateFingerprint = async () => {
 48 |         const fp: any = {}
 49 |         const sectionIssues: Record<string, boolean> = {
 50 |             browser: false,
 51 |             system: false,
 52 |             screen: false,
 53 |             media: false,
 54 |             webgl: false,
 55 |             hardware: false
 56 |         }
 57 | 
 58 |         try {
 59 |             // Collect browser information
 60 |             const browserInfo = detectBrowserInfo()
 61 |             fp.browser = {
 62 |                 userAgent: navigator.userAgent,
 63 |                 language: language.value,
 64 |                 languages: preferredLanguages.value,
 65 |                 platform: navigator.platform,
 66 |                 cookiesEnabled: navigator.cookieEnabled,
 67 |                 doNotTrack: navigator.doNotTrack || null,
 68 |                 vendor: navigator.vendor || 'Unknown',
 69 |                 browserName: browserInfo.browserName,
 70 |                 browserVersion: browserInfo.version,
 71 |                 isPrivateMode: await detectPrivateMode(),
 72 |                 plugins: Array.from(navigator.plugins)
 73 |                     .map(p => ({
 74 |                         name: p.name,
 75 |                         description: p.description,
 76 |                     }))
 77 |                     .filter(p => p.name || p.description),
 78 |             }
 79 | 
 80 |             if (memory.memory.value) {
 81 |                 fp.system = {
 82 |                     ...fp.system,
 83 |                     memory: memory.memory.value
 84 |                 }
 85 |             }
 86 | 
 87 |             if (battery.isSupported.value) {
 88 |                 fp.system = {
 89 |                     ...fp.system,
 90 |                     battery: {
 91 |                         charging: battery.charging.value,
 92 |                         chargingTime: battery.chargingTime.value,
 93 |                         dischargingTime: battery.dischargingTime.value,
 94 |                         level: battery.level.value
 95 |                     }
 96 |                 }
 97 |             }
 98 |         } catch (error) {
 99 |             console.error('Error collecting browser info:', error)
100 |             sectionIssues.browser = true
101 |         }
102 | 
103 |         try {
104 |             // Collect system and screen information
105 |             const systemInfo = await getSystemInfo()
106 |             const screenInfo = getScreenInfo()
107 |             fp.system = {
108 |                 ...systemInfo,
109 |             }
110 |             fp.screen = {
111 |                 ...screenInfo,
112 |             }
113 |         } catch (error) {
114 |             console.error('Error collecting system/screen info:', error)
115 |             sectionIssues.system = true
116 |             sectionIssues.screen = true
117 |         }
118 | 
119 |         try {
120 |             // Collect media information
121 |             fp.media = {
122 |                 canvasFingerprint: await generateCanvasFingerprint(),
123 |                 audioFingerprint: await getAudioFingerprint(),
124 |             }
125 |         } catch (error) {
126 |             console.error('Error collecting media info:', error)
127 |             sectionIssues.media = true
128 |         }
129 | 
130 |         try {
131 |             // Collect WebGL information
132 |             fp.webgl = getWebGLFingerprint()
133 |         } catch (error) {
134 |             console.error('Error collecting WebGL info:', error)
135 |             sectionIssues.webgl = true
136 |         }
137 | 
138 |         try {
139 |             // Collect hardware information
140 |             fp.hardware = {
141 |                 hardwareAcceleration: getHardwareAcceleration(),
142 |                 touchSupport: getTouchSupport(),
143 |                 colorDepth: getColorDepth(),
144 |             }
145 |         } catch (error) {
146 |             console.error('Error collecting hardware info:', error)
147 |             sectionIssues.hardware = true
148 |         }
149 | 
150 |         try {
151 |             // Collect font information
152 |             fp.fonts = getFonts()
153 |         } catch (error) {
154 |             console.error('Error collecting font info:', error)
155 |             sectionIssues.fonts = true
156 |         }
157 | 
158 |         // Calculate entropy
159 |         const entropyScore = calculateEntropy(fp)
160 | 
161 |         // Generate hash
162 |         const fingerprintString = JSON.stringify(fp)
163 |         const encoder = new TextEncoder()
164 |         const data = encoder.encode(fingerprintString)
165 |         const hashBuffer = await crypto.subtle.digest('SHA-256', data)
166 |         const hashArray = Array.from(new Uint8Array(hashBuffer))
167 |         fp.hash = hashArray.map(b => b.toString(16).padStart(2, '0')).join('')
168 | 
169 |         return { fingerprint: fp, entropyScore, sectionIssues }
170 |     }
171 | 
172 |     return {
173 |         generateFingerprint,
174 |         formatKey,
175 |         copyFingerprint,
176 |         getSectionDescription,
177 |         detectBrowserInfo,
178 |         detectPrivateMode,
179 |         calculateEntropy,
180 |     }
181 | } 


--------------------------------------------------------------------------------
/app/components/StatsBar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
  3 |         <!-- Entropy Score Card -->
  4 |         <div
  5 |             class="relative overflow-hidden transition-all duration-200 bg-white shadow-sm dark:bg-gray-800 rounded-xl hover:shadow-md group">
  6 |             <div class="p-6">
  7 |                 <div class="flex items-center gap-3 mb-3">
  8 |                     <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-blue-50 dark:bg-blue-900/20">
  9 |                         <Icon name="mdi:chart-bar" class="w-5 h-5 text-blue-500" />
 10 |                     </div>
 11 |                     <TooltipProvider>
 12 |                         <Tooltip>
 13 |                             <TooltipTrigger asChild>
 14 |                                 <div class="text-sm font-medium text-gray-500 dark:text-gray-400 cursor-help">
 15 |                                     Entropy Score
 16 |                                 </div>
 17 |                             </TooltipTrigger>
 18 |                             <TooltipContent class="max-w-xs">
 19 |                                 <p class="text-sm">
 20 |                                     Browser fingerprinting calculates how unique your browser appears among others. The entropy score (measured in bits) indicates this uniqueness. A score of 0 means your browser appears identical to others, while higher scores mean greater uniqueness. However, this score is just an estimate based on limited data.
 21 |                                 </p>
 22 |                             </TooltipContent>
 23 |                         </Tooltip>
 24 |                     </TooltipProvider>
 25 |                 </div>
 26 |                 <div class="space-y-1">
 27 |                     <div class="flex items-baseline gap-1">
 28 |                         <span class="text-3xl font-semibold tracking-tight dark:text-white">
 29 |                             {{ entropyScore.toFixed(2) }}
 30 |                         </span>
 31 |                         <span class="text-sm font-medium text-gray-500 dark:text-gray-400">bits</span>
 32 |                     </div>
 33 |                     <p class="text-sm text-gray-600 dark:text-gray-400">
 34 |                         {{ uniquenessMessage }}
 35 |                     </p>
 36 |                 </div>
 37 |             </div>
 38 |             <div class="absolute inset-x-0 bottom-0 h-1 bg-gradient-to-r from-blue-500/40 to-blue-500"
 39 |                 :style="{ width: `${Math.min((entropyScore / 20) * 100, 100)}%` }"
 40 |                 :class="{ 'transition-all duration-500': isComplete }">
 41 |             </div>
 42 |         </div>
 43 | 
 44 |         <!-- Browser Card -->
 45 |         <div
 46 |             class="relative overflow-hidden transition-all duration-200 bg-white shadow-sm dark:bg-gray-800 rounded-xl hover:shadow-md group">
 47 |             <div class="p-6">
 48 |                 <div class="flex items-center gap-3 mb-3">
 49 |                     <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-purple-50 dark:bg-purple-900/20">
 50 |                         <Icon name="mdi:web" class="w-5 h-5 text-purple-500" />
 51 |                     </div>
 52 |                     <div class="text-sm font-medium text-gray-500 dark:text-gray-400">
 53 |                         Browser
 54 |                     </div>
 55 |                 </div>
 56 |                 <div class="space-y-1">
 57 |                     <div class="text-2xl font-semibold tracking-tight truncate dark:text-white">
 58 |                         {{ browserInfo }}
 59 |                     </div>
 60 |                     <p class="text-sm text-gray-600 dark:text-gray-400">
 61 |                         {{ fingerprint?.browser?.vendor || 'Unknown vendor' }}
 62 |                     </p>
 63 |                 </div>
 64 |             </div>
 65 |             <div
 66 |                 class="absolute inset-x-0 bottom-0 h-1 transition-colors bg-purple-500/20 group-hover:bg-purple-500/30">
 67 |             </div>
 68 |         </div>
 69 | 
 70 |         <!-- Platform Card -->
 71 |         <div
 72 |             class="relative overflow-hidden transition-all duration-200 bg-white shadow-sm dark:bg-gray-800 rounded-xl hover:shadow-md group">
 73 |             <div class="p-6">
 74 |                 <div class="flex items-center gap-3 mb-3">
 75 |                     <div
 76 |                         class="flex items-center justify-center w-8 h-8 rounded-lg bg-emerald-50 dark:bg-emerald-900/20">
 77 |                         <Icon name="mdi:laptop" class="w-5 h-5 text-emerald-500" />
 78 |                     </div>
 79 |                     <div class="text-sm font-medium text-gray-500 dark:text-gray-400">
 80 |                         Platform
 81 |                     </div>
 82 |                 </div>
 83 |                 <div class="space-y-1">
 84 |                     <div class="text-2xl font-semibold tracking-tight truncate dark:text-white">
 85 |                         {{ platformInfo }}
 86 |                     </div>
 87 |                     <p class="text-sm text-gray-600 dark:text-gray-400">
 88 |                         {{ fingerprint?.browser?.platform || 'Unknown platform' }}
 89 |                     </p>
 90 |                 </div>
 91 |             </div>
 92 |             <div
 93 |                 class="absolute inset-x-0 bottom-0 h-1 transition-colors bg-emerald-500/20 group-hover:bg-emerald-500/30">
 94 |             </div>
 95 |         </div>
 96 |     </div>
 97 | </template>
 98 | 
 99 | <script setup lang="ts">
100 | interface Fingerprint {
101 |     browser?: {
102 |         vendor?: string;
103 |         platform?: string;
104 |         userAgent?: string;
105 |     };
106 | }
107 | 
108 | interface Props {
109 |     fingerprint: Fingerprint | null;
110 |     entropyScore: number;
111 |     isComplete: boolean;
112 | }
113 | 
114 | const props = defineProps<Props>();
115 | 
116 | const uniquenessMessage = computed(() => {
117 |     const score = props.entropyScore;
118 |     if (score >= 20) {
119 |         return 'Your fingerprint appears highly unique, which might make tracking easier.';
120 |     } else if (score >= 15) {
121 |         return 'Your fingerprint shows notable uniqueness among sampled users.';
122 |     } else if (score >= 10) {
123 |         return 'Your fingerprint has moderate distinctiveness.';
124 |     } else if (score >= 5) {
125 |         return 'Your fingerprint shares characteristics with many other users.';
126 |     } else {
127 |         return 'Your fingerprint appears similar to many other users, which may help blend in.';
128 |     }
129 | });
130 | 
131 | const browserInfo = computed(() => {
132 |     if (!props.fingerprint?.browser) return 'Unknown';
133 |     const ua = props.fingerprint.browser.userAgent || '';
134 |     const match = ua.match(/(Chrome|Firefox|Safari|Opera|Edge|IE)\/?\s*(\d+)/i);
135 |     return match ? `${match[1]} ${match[2]}` : 'Unknown browser';
136 | });
137 | 
138 | const platformInfo = computed(() => {
139 |     if (!props.fingerprint?.browser) return 'Unknown';
140 |     const platform = props.fingerprint.browser.platform;
141 |     const ua = props.fingerprint.browser.userAgent || '';
142 | 
143 |     const osMatch = ua.match(/(Windows NT|Mac OS X|Linux|Android|iOS) ?([0-9._]+)?/);
144 |     if (osMatch) {
145 |         const os = osMatch[1];
146 |         const version = osMatch[2] ? ` ${osMatch[2].replace(/_/g, '.')}` : '';
147 |         return `${os}${version}`;
148 |     }
149 | 
150 |     return platform || 'Unknown';
151 | });
152 | </script>


--------------------------------------------------------------------------------
/app/pages/links.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <main class="min-h-screen p-4 transition-colors duration-200 sm:p-8 dark:bg-gray-900 bg-gray-50">
  3 |         <div class="max-w-4xl mx-auto space-y-8">
  4 |             <!-- Header -->
  5 |             <div class="space-y-6 text-center">
  6 |                 <div class="relative inline-block">
  7 |                     <div class="flex items-center justify-center w-16 h-16 transition-all duration-200 bg-white border border-gray-200 shadow-sm dark:bg-gray-800 dark:border-gray-700 rounded-xl">
  8 |                         <Icon :name="content?.icon || 'mdi:link-variant'" class="w-8 h-8 text-blue-500 dark:text-blue-400" />
  9 |                     </div>
 10 |                 </div>
 11 | 
 12 |                 <div class="space-y-2">
 13 |                     <h1 class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
 14 |                         {{ content?.title }}
 15 |                     </h1>
 16 |                     <p class="max-w-2xl mx-auto text-sm text-gray-600 dark:text-gray-400">
 17 |                         {{ content?.description }}
 18 |                     </p>
 19 |                 </div>
 20 |             </div>
 21 | 
 22 |             <!-- Links Sections -->
 23 |             <div class="grid gap-6">
 24 |                 <template v-for="section in content?.sections" :key="section.title">
 25 |                     <div class="space-y-4">
 26 |                         <h2 class="text-lg font-semibold tracking-tight text-gray-900 dark:text-white">
 27 |                             {{ section.title }}
 28 |                         </h2>
 29 |                         
 30 |                         <!-- Scientific Articles Grid -->
 31 |                         <div v-if="section.type === 'papers'" class="space-y-4">
 32 |                             <div v-for="paper in section.links" :key="paper.title"
 33 |                                 class="relative overflow-hidden transition-all duration-200 bg-white shadow-sm dark:bg-gray-800 rounded-xl hover:shadow-md group"
 34 |                             >
 35 |                                 <div class="p-6">
 36 |                                     <div class="flex items-center gap-3 mb-3">
 37 |                                         <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-blue-50 dark:bg-blue-900/20">
 38 |                                             <Icon name="mdi:file-document" class="w-5 h-5 text-blue-500" />
 39 |                                         </div>
 40 |                                         <div class="flex items-center gap-2">
 41 |                                             <div class="text-sm font-medium text-gray-900 dark:text-white">
 42 |                                                 {{ paper.title }}
 43 |                                             </div>
 44 |                                         </div>
 45 |                                     </div>
 46 |                                     <div class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
 47 |                                         <p>{{ paper.authors }}</p>
 48 |                                         <p>{{ paper.conference }} - {{ paper.year }}</p>
 49 |                                     </div>
 50 |                                     <div class="mt-4">
 51 |                                         <NuxtLink 
 52 |                                             :to="paper.url"
 53 |                                             target="_blank"
 54 |                                             rel="noopener noreferrer"
 55 |                                             class="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-blue-600 transition-colors rounded-lg bg-blue-50 hover:bg-blue-100 dark:bg-blue-900/30 dark:text-blue-300 dark:hover:bg-blue-900/50"
 56 |                                         >
 57 |                                             View Paper
 58 |                                             <Icon name="mdi:arrow-right" class="w-4 h-4" />
 59 |                                         </NuxtLink>
 60 |                                     </div>
 61 |                                 </div>
 62 |                                 <div class="absolute inset-x-0 bottom-0 h-1 transition-colors bg-blue-500/20 group-hover:bg-blue-500/30"></div>
 63 |                             </div>
 64 |                         </div>
 65 | 
 66 |                         <!-- Regular Links Grid -->
 67 |                         <div v-else class="grid gap-4 sm:grid-cols-2">
 68 |                             <NuxtLink v-for="link in section.links" :key="link.title"
 69 |                                 :to="link.url"
 70 |                                 target="_blank"
 71 |                                 rel="noopener noreferrer"
 72 |                                 class="relative overflow-hidden transition-all duration-200 bg-white shadow-sm dark:bg-gray-800 rounded-xl hover:shadow-md group"
 73 |                             >
 74 |                                 <div class="p-6">
 75 |                                     <div class="flex items-center gap-3 mb-3">
 76 |                                         <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-blue-50 dark:bg-blue-900/20">
 77 |                                             <Icon :name="link.icon || 'mdi:link-variant'" class="w-5 h-5 text-blue-500" />
 78 |                                         </div>
 79 |                                         <div class="text-sm font-medium text-gray-900 dark:text-white">
 80 |                                             {{ link.title }}
 81 |                                         </div>
 82 |                                     </div>
 83 |                                     <p class="text-sm text-gray-600 dark:text-gray-400">
 84 |                                         {{ link.description }}
 85 |                                     </p>
 86 |                                 </div>
 87 |                                 <div class="absolute inset-x-0 bottom-0 h-1 transition-colors bg-blue-500/20 group-hover:bg-blue-500/30"></div>
 88 |                             </NuxtLink>
 89 |                         </div>
 90 |                     </div>
 91 |                 </template>
 92 |             </div>
 93 | 
 94 |             <!-- Back Button -->
 95 |             <div class="flex justify-center">
 96 |                 <NuxtLink 
 97 |                     to="/"
 98 |                     class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 transition-colors bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:text-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700"
 99 |                 >
100 |                     <Icon name="mdi:arrow-left" class="w-4 h-4" />
101 |                     Back to Fingerprint Check
102 |                 </NuxtLink>
103 |             </div>
104 |         </div>
105 |     </main>
106 | </template>
107 | 
108 | <script setup lang="ts">
109 | // Fetch content data
110 | const { data: content } = await useAsyncData('links', () => queryContent('links').findOne())
111 | 
112 | // SEO metadata
113 | useSeoMeta({
114 |     title: content.value?.title ? `${content.value.title} - Browser Fingerprinting` : 'Resources & Links',
115 |     description: content.value?.description || 'Comprehensive collection of resources about browser fingerprinting.',
116 |     keywords: 'browser fingerprinting, research papers, technical resources, privacy articles',
117 |     robots: 'index, follow',
118 |     author: 'Browser Fingerprint Team',
119 |     ogTitle: content.value?.title || 'Browser Fingerprinting Resources & Links',
120 |     ogDescription: content.value?.description || 'Explore comprehensive resources about browser fingerprinting.',
121 |     ogType: 'website',
122 |     twitterCard: 'summary_large_image',
123 | })
124 | </script>


--------------------------------------------------------------------------------
/app/composables/useIncognitoDetection.ts:
--------------------------------------------------------------------------------
  1 | // This code is adapted from https://github.com/Joe12387/detectIncognito.
  2 | 
  3 | interface IncognitoDetectionResult {
  4 |     isPrivate: boolean;
  5 |     browserName: string;
  6 | }
  7 | 
  8 | export function useIncognitoDetection() {
  9 |     const detectIncognito = async (): Promise<IncognitoDetectionResult> => {
 10 |         if (!import.meta.client) {
 11 |             return { isPrivate: false, browserName: 'Unknown' };
 12 |         }
 13 | 
 14 |         return new Promise((resolve, reject) => {
 15 |             let browserName = 'Unknown';
 16 | 
 17 |             const __callback = (isPrivate: boolean): void => {
 18 |                 resolve({
 19 |                     isPrivate,
 20 |                     browserName
 21 |                 });
 22 |             };
 23 | 
 24 |             const identifyChromium = (): string => {
 25 |                 const ua = navigator.userAgent;
 26 |                 if (ua.match(/Chrome/)) {
 27 |                     if ((navigator as any).brave !== undefined) {
 28 |                         return 'Brave';
 29 |                     } else if (ua.match(/Edg/)) {
 30 |                         return 'Edge';
 31 |                     } else if (ua.match(/OPR/)) {
 32 |                         return 'Opera';
 33 |                     }
 34 |                     return 'Chrome';
 35 |                 } else {
 36 |                     return 'Chromium';
 37 |                 }
 38 |             };
 39 | 
 40 |             const assertEvalToString = (value: number): boolean => {
 41 |                 return value === eval.toString().length;
 42 |             };
 43 | 
 44 |             const feid = (): number => {
 45 |                 let toFixedEngineID = 0;
 46 |                 try {
 47 |                     eval(`(-1).toFixed(-1);`);
 48 |                 } catch (e) {
 49 |                     toFixedEngineID = (e as Error).message.length; // Safari 44, Chrome 51, Firefox 25
 50 |                 }
 51 |                 return toFixedEngineID;
 52 |             };
 53 |             
 54 |             const isSafari = (): boolean => feid() === 44;
 55 |             const isChrome = (): boolean => feid() === 51;
 56 |             const isFirefox = (): boolean => feid() === 25;
 57 |             const isMSIE = (): boolean => (navigator as any).msSaveBlob !== undefined && assertEvalToString(39);
 58 | 
 59 |             const newSafariTest = (): void => {
 60 |                 const tmp_name = String(Math.random());
 61 | 
 62 |                 try {
 63 |                     const db = window.indexedDB.open(tmp_name, 1);
 64 | 
 65 |                     db.onupgradeneeded = function (i) {
 66 |                         const res = i.target as IDBDatabase;
 67 | 
 68 |                         try {
 69 |                             res.createObjectStore('test', {
 70 |                                 autoIncrement: true
 71 |                             }).put(new Blob());
 72 | 
 73 |                             __callback(false);
 74 |                         } catch (e) {
 75 |                             let message = e;
 76 | 
 77 |                             if (e instanceof Error) {
 78 |                                 message = e.message ?? e;
 79 |                             }
 80 | 
 81 |                             if (typeof message !== 'string') {
 82 |                                 __callback(false); return;
 83 |                             }
 84 | 
 85 |                             const matchesExpectedError = message.includes('BlobURLs are not yet supported');
 86 | 
 87 |                             __callback(matchesExpectedError); return;
 88 |                         } finally {
 89 |                             res.close();
 90 |                             window.indexedDB.deleteDatabase(tmp_name);
 91 |                         }
 92 |                     };
 93 |                 } catch (e) {
 94 |                     __callback(false);
 95 |                 }
 96 |             };
 97 | 
 98 |             const oldSafariTest = (): void => {
 99 |                 const openDB = (window as any).openDatabase;
100 |                 const storage = window.localStorage;
101 |                 try {
102 |                     openDB(null, null, null, null);
103 |                 } catch (e) {
104 |                     __callback(true); return;
105 |                 }
106 |                 try {
107 |                     storage.setItem('test', '1');
108 |                     storage.removeItem('test');
109 |                 } catch (e) {
110 |                     __callback(true); return;
111 |                 }
112 |                 __callback(false);
113 |             };
114 | 
115 |             const safariPrivateTest = (): void => {
116 |                 if (navigator.maxTouchPoints !== undefined) {
117 |                     newSafariTest();
118 |                 } else {
119 |                     oldSafariTest();
120 |                 }
121 |             };
122 | 
123 |             const getQuotaLimit = (): number => {
124 |                 const w = window as any;
125 |                 if (
126 |                     w.performance !== undefined &&
127 |                     w.performance.memory !== undefined &&
128 |                     w.performance.memory.jsHeapSizeLimit !== undefined
129 |                 ) {
130 |                     return (performance as any).memory.jsHeapSizeLimit;
131 |                 }
132 |                 return 1073741824;
133 |             };
134 | 
135 |             const storageQuotaChromePrivateTest = (): void => {
136 |                 (navigator as any).webkitTemporaryStorage.queryUsageAndQuota(
137 |                     function (_: number, quota: number) {
138 |                         const quotaInMib = Math.round(quota / (1024 * 1024));
139 |                         const quotaLimitInMib = Math.round(getQuotaLimit() / (1024 * 1024)) * 2;
140 | 
141 |                         __callback(quotaInMib < quotaLimitInMib);
142 |                     },
143 |                     function (e: any) {
144 |                         reject(
145 |                             new Error(
146 |                                 'detectIncognito somehow failed to query storage quota: ' +
147 |                                     e.message
148 |                             )
149 |                         );
150 |                     }
151 |                 );
152 |             };
153 | 
154 |             const oldChromePrivateTest = (): void => {
155 |                 const fs = (window as any).webkitRequestFileSystem;
156 |                 const success = function () {
157 |                     __callback(false);
158 |                 };
159 |                 const error = function () {
160 |                     __callback(true);
161 |                 };
162 |                 fs(0, 1, success, error);
163 |             };
164 | 
165 |             const chromePrivateTest = (): void => {
166 |                 if (self.Promise !== undefined && (self.Promise as any).allSettled !== undefined) {
167 |                     storageQuotaChromePrivateTest();
168 |                 } else {
169 |                     oldChromePrivateTest();
170 |                 }
171 |             };
172 | 
173 |             const firefoxPrivateTest = (): void => {
174 |                 __callback(navigator.serviceWorker === undefined);
175 |             };
176 | 
177 |             const msiePrivateTest = (): void => {
178 |                 __callback(window.indexedDB === undefined);
179 |             };
180 | 
181 |             const main = (): void => {
182 |                 if (isSafari()) {
183 |                     browserName = 'Safari';
184 |                     safariPrivateTest();
185 |                 } else if (isChrome()) {
186 |                     browserName = identifyChromium();
187 |                     chromePrivateTest();
188 |                 } else if (isFirefox()) {
189 |                     browserName = 'Firefox';
190 |                     firefoxPrivateTest();
191 |                 } else if (isMSIE()) {
192 |                     browserName = 'Internet Explorer';
193 |                     msiePrivateTest();
194 |                 } else {
195 |                     reject(new Error('detectIncognito cannot determine the browser'));
196 |                 }
197 |             };
198 | 
199 |             main();
200 |         });
201 |     };
202 | 
203 |     return {
204 |         detectIncognito
205 |     };
206 | }
207 | 
208 | if (import.meta.client) {
209 |     (window as any).detectIncognito = useIncognitoDetection().detectIncognito;
210 | }


--------------------------------------------------------------------------------
/app/composables/useEntropyCalculator.ts:
--------------------------------------------------------------------------------
  1 | export function useEntropyCalculator() {
  2 |     const calculateEntropy = (fp: any): number => {
  3 |         if (!fp) return 0;
  4 | 
  5 |         let totalEntropy = 0;
  6 | 
  7 |         // Browser features
  8 |         if (fp.browser) {
  9 |             // User Agent
 10 |             if (fp.browser.userAgent) {
 11 |                 totalEntropy += estimateUserAgentEntropy(fp.browser.userAgent);
 12 |             }
 13 |             // Language
 14 |             if (fp.browser.language) {
 15 |                 totalEntropy += estimateLanguageEntropy(fp.browser.language);
 16 |             }
 17 |             // Platform
 18 |             if (fp.browser.platform) {
 19 |                 totalEntropy += estimatePlatformEntropy(fp.browser.platform);
 20 |             }
 21 |             // Plugins
 22 |             if (fp.browser.plugins && fp.browser.plugins.length >= 0) {
 23 |                 totalEntropy += estimatePluginsEntropy(fp.browser.plugins);
 24 |             }
 25 |             // Do Not Track
 26 |             if (fp.browser.doNotTrack !== null) {
 27 |                 totalEntropy += estimateDoNotTrackEntropy(fp.browser.doNotTrack);
 28 |             }
 29 |         }
 30 | 
 31 |         // System features
 32 |         if (fp.system) {
 33 |             // Timezone
 34 |             if (fp.system.timezone) {
 35 |                 totalEntropy += estimateTimezoneEntropy(fp.system.timezone);
 36 |             }
 37 |             // Fonts
 38 |             if (fp.fonts && fp.fonts.fonts && fp.fonts.fonts.length > 0) {
 39 |                 totalEntropy += estimateFontsEntropy(fp.fonts.fonts);
 40 |             }
 41 |         }
 42 | 
 43 |         // Screen features
 44 |         if (fp.screen) {
 45 |             // Screen resolution
 46 |             if (fp.screen.width && fp.screen.height) {
 47 |                 totalEntropy += estimateScreenResolutionEntropy(fp.screen.width, fp.screen.height);
 48 |             }
 49 |             // Color depth
 50 |             if (fp.screen.colorDepth) {
 51 |                 totalEntropy += estimateColorDepthEntropy(fp.screen.colorDepth);
 52 |             }
 53 |         }
 54 | 
 55 |         // Media features
 56 |         if (fp.media) {
 57 |             // Canvas fingerprint
 58 |             if (fp.media.canvasFingerprint) {
 59 |                 totalEntropy += estimateCanvasFingerprintEntropy(fp.media.canvasFingerprint);
 60 |             }
 61 |             // Audio fingerprint
 62 |             if (fp.media.audioFingerprint) {
 63 |                 totalEntropy += estimateAudioFingerprintEntropy(fp.media.audioFingerprint);
 64 |             }
 65 |         }
 66 | 
 67 |         // WebGL features
 68 |         if (fp.webgl) {
 69 |             // Renderer
 70 |             if (fp.webgl.renderer) {
 71 |                 totalEntropy += estimateWebGLRendererEntropy(fp.webgl.renderer);
 72 |             }
 73 |         }
 74 | 
 75 |         // Hardware features
 76 |         if (fp.hardware) {
 77 |             // Device Memory
 78 |             if (fp.hardware.deviceMemory) {
 79 |                 totalEntropy += estimateDeviceMemoryEntropy(fp.hardware.deviceMemory);
 80 |             }
 81 |             // CPU Cores
 82 |             if (fp.hardware.cpuCores) {
 83 |                 totalEntropy += estimateCpuCoresEntropy(fp.hardware.cpuCores);
 84 |             }
 85 |             // Touch support
 86 |             if (fp.hardware.touchSupport) {
 87 |                 totalEntropy += estimateTouchSupportEntropy(fp.hardware.touchSupport);
 88 |             }
 89 |             // Battery
 90 |             if (fp.system && fp.system.batteryInfo) {
 91 |                 totalEntropy += estimateBatteryEntropy(fp.system.batteryInfo);
 92 |             }
 93 |         }
 94 | 
 95 |         console.log('Total Entropy:', totalEntropy);
 96 |         return totalEntropy;
 97 |     };
 98 | 
 99 |     // Entropy estimation functions with dynamic calculations
100 | 
101 |     const estimateUserAgentEntropy = (userAgent: string): number => {
102 |         const commonUserAgents = [
103 |             'Mozilla/5.0 (Windows NT 10.0; Win64; x64)',
104 |             'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)',
105 |             'Mozilla/5.0 (X11; Linux x86_64)',
106 |         ];
107 |         if (commonUserAgents.includes(userAgent)) {
108 |             return 1; // Low entropy
109 |         } else {
110 |             return 4; // Higher entropy
111 |         }
112 |     };
113 | 
114 |     const estimateLanguageEntropy = (language: string): number => {
115 |         const commonLanguages = ['en-US', 'en', 'zh-CN', 'es', 'fr', 'de', 'ja', 'ru', 'pt', 'it'];
116 |         if (commonLanguages.includes(language)) {
117 |             return 1; // Low entropy
118 |         } else {
119 |             return 3; // Higher entropy
120 |         }
121 |     };
122 | 
123 |     const estimatePlatformEntropy = (platform: string): number => {
124 |         const commonPlatforms = ['Win32', 'MacIntel', 'Linux x86_64'];
125 |         if (commonPlatforms.includes(platform)) {
126 |             return 1; // Low entropy
127 |         } else {
128 |             return 2; // Higher entropy
129 |         }
130 |     };
131 | 
132 |     const estimatePluginsEntropy = (plugins: any[]): number => {
133 |         const numPlugins = plugins.length;
134 |         if (numPlugins === 0) {
135 |             return 1; // No plugins
136 |         } else if (numPlugins <= 3) {
137 |             return 2; // Few plugins
138 |         } else if (numPlugins <= 6) {
139 |             return 3; // Moderate number
140 |         } else {
141 |             return 4; // Many plugins
142 |         }
143 |     };
144 | 
145 |     const estimateDoNotTrackEntropy = (doNotTrack: string | null): number => {
146 |         return 1; // Minimal entropy
147 |     };
148 | 
149 |     const estimateTimezoneEntropy = (timezone: string): number => {
150 |         const commonTimezones = [
151 |             'UTC',
152 |             'GMT',
153 |             'America/New_York',
154 |             'Europe/London',
155 |             'Asia/Shanghai',
156 |         ];
157 |         if (commonTimezones.includes(timezone)) {
158 |             return 1; // Low entropy
159 |         } else {
160 |             return 2; // Higher entropy
161 |         }
162 |     };
163 | 
164 |     const estimateFontsEntropy = (fonts: string[]): number => {
165 |         const numFonts = fonts.length;
166 |         if (numFonts <= 10) {
167 |             return 2;
168 |         } else if (numFonts <= 20) {
169 |             return 3;
170 |         } else {
171 |             return 4;
172 |         }
173 |     };
174 | 
175 |     const estimateScreenResolutionEntropy = (width: number, height: number): number => {
176 |         const commonResolutions = [
177 |             { width: 1920, height: 1080 },
178 |             { width: 1366, height: 768 },
179 |             { width: 1440, height: 900 },
180 |             { width: 1536, height: 864 },
181 |             { width: 1280, height: 720 },
182 |         ];
183 |         const isCommon = commonResolutions.some(
184 |             (res) => res.width === width && res.height === height
185 |         );
186 |         return isCommon ? 1 : 3;
187 |     };
188 | 
189 |     const estimateColorDepthEntropy = (colorDepth: number): number => {
190 |         if (colorDepth === 24 || colorDepth === 30) {
191 |             return 1;
192 |         } else {
193 |             return 2;
194 |         }
195 |     };
196 | 
197 |     const estimateCanvasFingerprintEntropy = (canvasFingerprint: string): number => {
198 |         return 10; // High entropy
199 |     };
200 | 
201 |     const estimateAudioFingerprintEntropy = (audioFingerprint: any): number => {
202 |         return 10; // High entropy
203 |     };
204 | 
205 |     const estimateWebGLRendererEntropy = (renderer: string): number => {
206 |         const commonRenderers = ['ANGLE', 'Intel', 'AMD', 'NVIDIA'];
207 |         if (commonRenderers.some((common) => renderer.includes(common))) {
208 |             return 2;
209 |         } else {
210 |             return 4;
211 |         }
212 |     };
213 | 
214 |     const estimateDeviceMemoryEntropy = (deviceMemory: number): number => {
215 |         const commonMemoryValues = [4, 8, 16];
216 |         if (commonMemoryValues.includes(deviceMemory)) {
217 |             return 1;
218 |         } else {
219 |             return 2;
220 |         }
221 |     };
222 | 
223 |     const estimateCpuCoresEntropy = (cpuCores: number): number => {
224 |         const commonCoreCounts = [2, 4, 8];
225 |         if (commonCoreCounts.includes(cpuCores)) {
226 |             return 1;
227 |         } else {
228 |             return 2;
229 |         }
230 |     };
231 | 
232 |     const estimateTouchSupportEntropy = (touchSupport: any): number => {
233 |         return 1;
234 |     };
235 | 
236 |     const estimateBatteryEntropy = (batteryInfo: any): number => {
237 |         const batteryLevel = batteryInfo.level;
238 |         if (batteryLevel >= 0.9) {
239 |             return 1;
240 |         } else {
241 |             return 2;
242 |         }
243 |     };
244 | 
245 |     return {
246 |         calculateEntropy,
247 |     };
248 | }


--------------------------------------------------------------------------------
/content/links.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Useful Links
  3 | description: Explore comprehensive resources about browser fingerprinting, from technical papers to press articles.
  4 | icon: mdi:link-variant
  5 | 
  6 | sections:
  7 |   - title: General Definitions
  8 |     type: links
  9 |     links:
 10 |       - title: Mozilla's Browser Fingerprinting Guide
 11 |         description: Developer documentation on fingerprinting protection
 12 |         url: https://developer.mozilla.org/en-US/docs/Glossary/Fingerprinting
 13 |         icon: mdi:firefox
 14 | 
 15 |       - title: Device Fingerprint (Wikipedia)
 16 |         description: Wikipedia article explaining device fingerprinting concepts
 17 |         url: https://en.wikipedia.org/wiki/Device_fingerprint
 18 |         icon: mdi:wikipedia
 19 | 
 20 |   - title: Press Articles & Presentations
 21 |     type: links
 22 |     links:
 23 |       - title: Browser 'fingerprints' help track users
 24 |         description: BBC News coverage on browser fingerprinting technology
 25 |         url: https://www.bbc.com/news/technology-28423257
 26 |         icon: mdi:newspaper
 27 | 
 28 |       - title: Publicité - Une nouvelle technique pour pister les internautes
 29 |         description: Le Monde's analysis of new tracking techniques
 30 |         url: https://www.lemonde.fr/pixels/article/2014/07/22/publicite-une-nouvelle-technique-pour-pister-les-internautes_4461305_4408996.html
 31 |         icon: mdi:newspaper
 32 | 
 33 |       - title: Si on brouillait les pistes avec AmIUnique?
 34 |         description: Framasoft blog post about fingerprint obfuscation
 35 |         url: https://framablog.org/2014/12/23/si-on-brouillait-les-pistes-avec-amiunique/
 36 |         icon: mdi:newspaper
 37 | 
 38 |       - title: Browser Fingerprinting at Open World Forum 2014
 39 |         description: Video presentation about browser fingerprinting
 40 |         url: https://www.youtube.com/watch?v=uVECjeSUzy0
 41 |         icon: mdi:youtube
 42 | 
 43 |       - title: Browser Fingerprinting and the Online-Tracking Arms Race
 44 |         description: IEEE Spectrum's deep dive into browser fingerprinting
 45 |         url: https://spectrum.ieee.org/browser-fingerprinting-and-the-onlinetracking-arms-race
 46 |         icon: mdi:newspaper
 47 | 
 48 |   - title: Scientific Papers
 49 |     type: papers
 50 |     links:
 51 |       - title: Hot or Not - Revealing Hidden Services by Their Clock Skew
 52 |         authors: J. Murdoch, Steven
 53 |         conference: Conference on Computer & Communications Security
 54 |         year: 2006
 55 |         url: https://murdoch.is/papers/ccs06hotornot.pdf
 56 | 
 57 |       - title: How unique is your web browser?
 58 |         authors: Peter Eckersley
 59 |         conference: Conference on Privacy enhancing technologies
 60 |         year: 2010
 61 |         url: https://panopticlick.eff.org/static/browser-uniqueness.pdf
 62 | 
 63 |       - title: User Tracking on the Web via Cross-Browser Fingerprinting
 64 |         authors: Boda, Károly & Máté Foldes, Ádám & Gulyás, Gábor & Imre, Sandor
 65 |         conference: Nordic Conference on Secure IT Systems
 66 |         year: 2011
 67 |         url: https://pet-portal.eu/files/articles/2011/fingerprinting/cross-browser_fingerprinting.pdf
 68 | 
 69 |       - title: Pixel Perfect - Fingerprinting Canvas in HTML5
 70 |         authors: Keaton Mowery and Hovav Shacham
 71 |         conference: Web 2.0 Security & Privacy
 72 |         year: 2012
 73 |         url: https://cseweb.ucsd.edu/~hovav/dist/canvas.pdf
 74 | 
 75 |       - title: Fast and Reliable Browser Identification with JavaScript Engine Fingerprinting
 76 |         authors: M. Mulazzani, S. Schrittwieser, P. Reschl, M. Leithner, E. Weippl, M. Huber
 77 |         conference: Web 2.0 Security & Privacy
 78 |         year: 2013
 79 |         url: https://publications.sba-research.org/publications/jsfingerprinting.pdf
 80 | 
 81 |       - title: Cookieless Monster - Exploring the Ecosystem of Web-based Device Fingerprinting
 82 |         authors: N. Nikiforakis, A. Kapravelos, W. Joosen, C. Kruegel, F. Piessens and G. Vigna
 83 |         conference: Symposium on Security and Privacy
 84 |         year: 2013
 85 |         url: https://cs.ucsb.edu/~vigna/publications/2013_SP_cookieless.pdf
 86 | 
 87 |       - title: The Web Never Forgets
 88 |         authors: Acar, Gunes and Eubank, Christian and Englehardt, Steven and Juarez, Marc and Narayanan, Arvind and Diaz, Claudia
 89 |         conference: Conference on Computer and Communications Security
 90 |         year: 2014
 91 |         url: https://www.esat.kuleuven.be/cosic/publications/article-2457.pdf
 92 | 
 93 |       - title: The Leaking Battery - A Privacy Analysis of the HTML5 Battery Status API
 94 |         authors: Olejnik, Lukasz and Acar, Gunes and Castelluccia, Claude and Diaz, Claudia
 95 |         conference: Workshop on Data Privacy Management, and Security Assurance
 96 |         year: 2015
 97 |         url: https://eprint.iacr.org/2015/616.pdf
 98 | 
 99 |       - title: Fingerprinting Web Users Through Font Metrics
100 |         authors: Fifield, David & Egelman, Serge
101 |         conference: Conference on Financial Cryptography and Data Security
102 |         year: 2015
103 |         url: http://fc15.ifca.ai/preproceedings/paper_83.pdf
104 | 
105 |       - title: Mobile Device Fingerprinting Considered Harmful for Risk-based Authentication
106 |         authors: Spooren, Jan & Preuveneers, Davy & Joosen, Wouter
107 |         conference: European Workshop on System Security
108 |         year: 2015
109 |         url: https://lirias.kuleuven.be/bitstream/123456789/496316/1/a6-spooren.pdf
110 | 
111 |       - title: Beauty and the Beast - Diverting modern web browsers to build unique browser fingerprints
112 |         authors: P. Laperdrix, W. Rudametkin and B. Baudry
113 |         conference: Symposium on Security and Privacy
114 |         year: 2016
115 |         url: https://hal.inria.fr/hal-01285470/file/beauty-sp16.pdf
116 | 
117 |       - title: (Cross-)Browser Fingerprinting via OS and Hardware Level Features
118 |         authors: Cao, Yinzhi & Li, Song & Wijmans, Erik
119 |         conference: Network and Distributed System Security Symposium
120 |         year: 2017
121 |         url: https://www.ndss-symposium.org/wp-content/uploads/2017/09/ndss2017_02B-3_Cao_paper.pdf
122 | 
123 |       - title: Discovering Browser Extensions via Web Accessible Resources
124 |         authors: Sjosten, Alexander and Van Acker, Steven and Sabelfeld, Andrei
125 |         conference: Conference on Data and Application Security and Privacy
126 |         year: 2017
127 |         url: http://www.cse.chalmers.se/research/group/security/publications/2017/extensions/codaspy-17.pdf
128 | 
129 |       - title: XHOUND - Quantifying the Fingerprintability of Browser Extensions
130 |         authors: O. Starov and N. Nikiforakis
131 |         conference: Symposium on Security and Privacy
132 |         year: 2017
133 |         url: https://www.securitee.org/files/xhound-oakland17.pdf
134 | 
135 |       - title: FP-STALKER - Tracking Browser Fingerprint Evolutions
136 |         authors: Antoine Vastel, Pierre Laperdrix, Walter Rudametkin, Romain Rouvoy
137 |         conference: Symposium on Security and Privacy
138 |         year: 2018
139 |         url: https://hal.inria.fr/hal-01652021/document
140 | 
141 |       - title: FP-Scanner - The Privacy Implications of Browser Fingerprint Inconsistencies
142 |         authors: Antoine Vastel, Pierre Laperdrix, Walter Rudametkin, Romain Rouvoy
143 |         conference: USENIX Security Symposium
144 |         year: 2018
145 |         url: https://hal.inria.fr/hal-01820197/document
146 | 
147 |       - title: Hiding in the Crowd - an Analysis of the Effectiveness of Browser Fingerprinting at Large Scale
148 |         authors: Alejandro Gómez-Boix, Pierre Laperdrix, Benoit Baudry
149 |         conference: World Wide Web Conference
150 |         year: 2018
151 |         url: https://hal.inria.fr/hal-01718234v2/document
152 | 
153 |       - title: Don't count me out - On the relevance of IP addresses in the tracking ecosystem
154 |         authors: Vikas Mishra, Pierre Laperdrix, Antoine Vastel, Walter Rudametkin, Romain Rouvoy, Martin Lopatka
155 |         conference: The Web Conference
156 |         year: 2020
157 |         url: https://hal.inria.fr/hal-02435622
158 | 
159 |       - title: A Survey of Browser Fingerprint Research and Application
160 |         authors: Desheng Zhang, Jianhui Zhang, Youjun Bu, Bo Chen, Chongxin Sun, Tianyu Wang
161 |         conference: Online Library
162 |         year: 2022
163 |         url: https://onlinelibrary.wiley.com/doi/epdf/10.1155/2022/3363335
164 | 
165 |   - title: Tools & Resources
166 |     type: links
167 |     links:
168 |       - title: AmIUnique.org
169 |         description: Interactive tool to test your browser fingerprint and learn about its uniqueness
170 |         url: https://amiunique.org
171 |         icon: mdi:fingerprint
172 | 
173 |       - title: EFF's Cover Your Tracks
174 |         description: Test your browser's defenses against tracking and fingerprinting
175 |         url: https://coveryourtracks.eff.org
176 |         icon: mdi:shield
177 | 
178 |       - title: Device Info
179 |         description: Detailed technical breakdown of your browser's fingerprint components
180 |         url: https://deviceinfo.me
181 |         icon: mdi:information
182 | 
183 |       - title: Privacy.net Browser Check
184 |         description: Comprehensive browser fingerprinting test with detailed explanations
185 |         url: https://privacy.net/analyzer
186 |         icon: mdi:security
187 | 
188 |       - title: FingerprintJS
189 |         description: The most popular open-source fingerprinting library
190 |         url: https://fingerprint.com/
191 |         icon: mdi:code-braces
192 |     
193 |       - title: Brave Browser
194 |         description: Brave's documentation on fingerprinting protection mechanisms
195 |         url: https://brave.com/privacy-updates/
196 |         icon: mdi:image-filter-center-focus-strong-outline
197 | ---


--------------------------------------------------------------------------------
/app/pages/privacy-tools.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <main class="min-h-screen p-4 transition-colors duration-200 sm:p-8 dark:bg-gray-900 bg-gray-50">
  3 |         <div class="max-w-4xl mx-auto space-y-8">
  4 |             <!-- Header -->
  5 |             <div class="space-y-6 text-center">
  6 |                 <div class="relative inline-block">
  7 |                     <div class="flex items-center justify-center w-16 h-16 transition-all duration-200 bg-white border border-gray-200 shadow-sm dark:bg-gray-800 dark:border-gray-700 rounded-xl">
  8 |                         <Icon :name="content?.icon || 'mdi:shield-lock'" class="w-8 h-8 text-blue-500 dark:text-blue-400" />
  9 |                     </div>
 10 |                 </div>
 11 | 
 12 |                 <div class="space-y-2">
 13 |                     <h1 class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
 14 |                         {{ content?.title }}
 15 |                     </h1>
 16 |                     <p class="max-w-2xl mx-auto text-sm text-gray-600 dark:text-gray-400">
 17 |                         {{ content?.description }}
 18 |                     </p>
 19 |                 </div>
 20 |             </div>
 21 | 
 22 |             <!-- Warning Alert -->
 23 |             <Alert v-if="content?.warning" class="max-w-2xl mx-auto">
 24 |                 <template #default>
 25 |                     <div class="flex gap-3">
 26 |                         <Icon name="mdi:alert-circle" class="w-5 h-5 text-amber-500" />
 27 |                         <div class="space-y-1">
 28 |                             <p class="font-medium">{{ content.warning.title }}</p>
 29 |                             <p class="text-sm text-gray-600 dark:text-gray-400">
 30 |                                 {{ content.warning.description }}
 31 |                             </p>
 32 |                         </div>
 33 |                     </div>
 34 |                 </template>
 35 |             </Alert>
 36 | 
 37 |             <!-- Tools Grid -->
 38 |             <div class="grid gap-6 sm:grid-cols-2">
 39 |                 <template v-for="category in content?.categories" :key="category.title">
 40 |                     <div class="space-y-4">
 41 |                         <h2 class="text-lg font-semibold tracking-tight text-gray-900 dark:text-white">
 42 |                             {{ category.title }}
 43 |                         </h2>
 44 |                         <div class="space-y-4">
 45 |                             <div v-for="tool in category.tools" :key="tool.name"
 46 |                                 class="relative overflow-hidden transition-all duration-200 bg-white shadow-sm dark:bg-gray-800 rounded-xl hover:shadow-md group"
 47 |                             >
 48 |                                 <div class="p-6">
 49 |                                     <div class="flex items-center gap-3 mb-3">
 50 |                                         <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-blue-50 dark:bg-blue-900/20">
 51 |                                             <Icon :name="tool.icon" class="w-5 h-5 text-blue-500" />
 52 |                                         </div>
 53 |                                         <div class="flex items-center gap-2">
 54 |                                             <div class="text-sm font-medium text-gray-900 dark:text-white">
 55 |                                                 {{ tool.name }}
 56 |                                             </div>
 57 |                                             <Badge 
 58 |                                                 v-if="tool.recommended" 
 59 |                                                 variant="default" 
 60 |                                                 class="text-xs font-medium text-green-800 bg-green-100 dark:bg-green-900/30 dark:text-green-300"
 61 |                                             >
 62 |                                                 Recommended
 63 |                                             </Badge>
 64 |                                         </div>
 65 |                                     </div>
 66 |                                     <p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
 67 |                                         {{ tool.description }}
 68 |                                     </p>
 69 |                                     <div class="flex flex-wrap items-center gap-3">
 70 |                                         <NuxtLink 
 71 |                                             v-if="tool.link"
 72 |                                             :to="tool.link"
 73 |                                             target="_blank"
 74 |                                             rel="noopener noreferrer"
 75 |                                             class="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-blue-600 transition-colors rounded-lg bg-blue-50 hover:bg-blue-100 dark:bg-blue-900/30 dark:text-blue-300 dark:hover:bg-blue-900/50"
 76 |                                         >
 77 |                                             Website
 78 |                                             <Icon name="mdi:arrow-right" class="w-4 h-4" />
 79 |                                         </NuxtLink>
 80 |                                         <NuxtLink 
 81 |                                             v-if="tool.chromeLink"
 82 |                                             :to="tool.chromeLink"
 83 |                                             target="_blank"
 84 |                                             rel="noopener noreferrer"
 85 |                                             class="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-gray-600 transition-colors rounded-lg bg-gray-50 hover:bg-gray-100 dark:bg-gray-700/30 dark:text-gray-300 dark:hover:bg-gray-700/50"
 86 |                                         >
 87 |                                             <Icon name="mdi:google-chrome" class="w-4 h-4" />
 88 |                                             Chrome
 89 |                                         </NuxtLink>
 90 |                                         <NuxtLink 
 91 |                                             v-if="tool.firefoxLink"
 92 |                                             :to="tool.firefoxLink"
 93 |                                             target="_blank"
 94 |                                             rel="noopener noreferrer"
 95 |                                             class="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-gray-600 transition-colors rounded-lg bg-gray-50 hover:bg-gray-100 dark:bg-gray-700/30 dark:text-gray-300 dark:hover:bg-gray-700/50"
 96 |                                         >
 97 |                                             <Icon name="mdi:firefox" class="w-4 h-4" />
 98 |                                             Firefox
 99 |                                         </NuxtLink>
100 |                                     </div>
101 |                                 </div>
102 |                                 <div class="absolute inset-x-0 bottom-0 h-1 transition-colors bg-blue-500/20 group-hover:bg-blue-500/30"></div>
103 |                             </div>
104 |                         </div>
105 |                     </div>
106 |                 </template>
107 |             </div>
108 | 
109 |             <!-- Best Practices Section -->
110 |             <div v-if="content?.bestPractices" class="overflow-hidden bg-white shadow-sm dark:bg-gray-800 rounded-xl">
111 |                 <div class="p-6">
112 |                     <div class="flex items-center gap-3 mb-4">
113 |                         <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-blue-50 dark:bg-blue-900/20">
114 |                             <Icon name="mdi:lightbulb" class="w-5 h-5 text-blue-500" />
115 |                         </div>
116 |                         <h3 class="text-lg font-medium text-gray-900 dark:text-white">
117 |                             {{ content.bestPractices.title }}
118 |                         </h3>
119 |                     </div>
120 |                     <p class="mb-6 text-sm text-gray-600 dark:text-gray-400">
121 |                         {{ content.bestPractices.description }}
122 |                     </p>
123 |                     <div class="grid gap-6 sm:grid-cols-2">
124 |                         <div v-for="(column, index) in content.bestPractices.columns" 
125 |                             :key="index" 
126 |                             class="space-y-3"
127 |                         >
128 |                             <div v-for="item in column.items" 
129 |                                 :key="item.text" 
130 |                                 class="flex items-center gap-2.5 text-sm text-gray-600 dark:text-gray-400"
131 |                             >
132 |                                 <span class="w-1.5 h-1.5 rounded-full bg-blue-500"></span>
133 |                                 {{ item.text }}
134 |                             </div>
135 |                         </div>
136 |                     </div>
137 |                 </div>
138 |             </div>
139 | 
140 |             <!-- Back Button -->
141 |             <div class="flex justify-center">
142 |                 <NuxtLink 
143 |                     to="/"
144 |                     class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 transition-colors bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:text-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700"
145 |                 >
146 |                     <Icon name="mdi:arrow-left" class="w-4 h-4" />
147 |                     Back to Fingerprint Check
148 |                 </NuxtLink>
149 |             </div>
150 |         </div>
151 |     </main>
152 | </template>
153 | 
154 | <script setup lang="ts">
155 | // Fetch content data
156 | const { data: content } = await useAsyncData('privacy-tools', () => queryContent('privacy-tools').findOne())
157 | 
158 | // SEO metadata
159 | useSeoMeta({
160 |     title: content.value?.title ? `${content.value.title} - Browser Fingerprinting` : 'Privacy Tools',
161 |     description: content.value?.description || 'Enhance your online privacy and reduce your digital fingerprint.',
162 |     keywords: 'privacy tools, browser privacy, digital privacy, online security, privacy extensions',
163 |     robots: 'index, follow',
164 |     author: 'Browser Fingerprint Team',
165 |     ogTitle: content.value?.title || 'Privacy Tools - Browser Fingerprinting',
166 |     ogDescription: content.value?.description || 'Enhance your online privacy and reduce your digital fingerprint.',
167 |     ogType: 'website',
168 |     twitterCard: 'summary_large_image',
169 | })
170 | </script>


--------------------------------------------------------------------------------
/design.md:
--------------------------------------------------------------------------------
  1 | # Universal UI/UX Design Principles and User Flow
  2 | 
  3 | ## Information Architecture & Cognitive Load
  4 | 
  5 | - **Mental Models**
  6 |   - Match user expectations from similar applications.
  7 |   - Limit navigation menus to 5-7 items.
  8 |   - Group related actions within 8px-16px.
  9 |   - Limit choices to prevent decision paralysis.
 10 |   - Use progressive disclosure for complex flows.
 11 | 
 12 | - **Cognitive Patterns**
 13 |   - Prioritize recognition over recall.
 14 |   - Provide clear affordances for interactive elements.
 15 |   - Maintain consistent patterns across similar actions.
 16 |   - Place common elements in predictable locations.
 17 |   - Offer visual hints for hidden functionality.
 18 | 
 19 | - **User Flow Efficiency**
 20 |   - Ensure primary actions are accessible within 1-2 clicks.
 21 |   - Place critical information above the fold.
 22 |   - Provide clear escape routes from every screen.
 23 |   - Include an undo option for destructive actions.
 24 |   - Implement autosave for forms every 30 seconds.
 25 | 
 26 | ## User Flow & Experience
 27 | 
 28 | - **Quick Actions Flow**
 29 |   - Group primary actions in easily scannable grids.
 30 |   - Display a maximum of 4-5 main actions at once.
 31 |   - Place the most used actions within thumb reach on mobile.
 32 |   - Highlight critical information (like balances) at the top.
 33 |   - Hide secondary actions in expandable menus.
 34 | 
 35 | - **Navigation Pattern**
 36 |   - Eliminate unnecessary navigation elements.
 37 |   - Keep critical paths within 2-3 clicks.
 38 |   - Ensure main actions are visible without scrolling.
 39 |   - Make the back button always accessible.
 40 |   - Provide clear visual breadcrumbs.
 41 | 
 42 | - **Content Priority**
 43 |   - Display key information (totals, balances) in the largest size.
 44 |   - Group action items by frequency of use.
 45 |   - Place critical notifications at the top of the viewport.
 46 |   - Collapse secondary information with expandable options.
 47 |   - Make error states immediately visible.
 48 | 
 49 | - **Interactive Feedback**
 50 |   - Provide immediate response to user actions (<100ms).
 51 |   - Show loading states for actions longer than 300ms.
 52 |   - Display success/error messages within the viewport.
 53 |   - Use toast notifications lasting 3-5 seconds.
 54 |   - Include progress indicators for multi-step processes.
 55 | 
 56 | ## Core Design Principles
 57 | 
 58 | ### 1. Good Design is Minimal Design
 59 | 
 60 | - **Focus on Essential Features**
 61 |   - Remove decorative elements that don't serve a purpose.
 62 |   - Assign a single clear function to each component.
 63 |   - Limit to a maximum of 3 primary actions per view.
 64 |   - Use only 2-3 font families throughout the design.
 65 |   - Keep navigation to a maximum of 7 main items.
 66 | 
 67 | - **Reduced Color Palette**
 68 |   - **Primary Color**: Use for 60% of the interface.
 69 |   - **Secondary Color**: Use for 30% of the interface.
 70 |   - **Accent Color**: Use for 10% of the interface.
 71 |   - Limit to 3 primary colors.
 72 |   - Use 2-3 shades of gray for text hierarchy.
 73 | 
 74 | ### 2. Laws of Similarity and Proximity
 75 | 
 76 | - **Component Consistency**
 77 |   - **Border Radius**: 4px-8px for small elements, 8px-12px for cards.
 78 |   - **Button Grouping**: 8px-12px between related actions.
 79 |   - **Form Fields**: 16px-24px vertical spacing.
 80 |   - **Card Patterns**: Consistent 16px-24px internal padding.
 81 |   - **Related Items**: Maximum 8px spacing between them.
 82 | 
 83 | - **Visual Grouping**
 84 |   - **Section Spacing**: 32px-48px.
 85 |   - **Related Content**: Maximum 16px separation.
 86 |   - **Element Grouping**: Group similar elements within 8px proximity.
 87 |   - **Unrelated Elements**: Minimum 24px separation.
 88 |   - **Content Blocks**: 32px bottom margin.
 89 | 
 90 | ### 3. Generous Spacing
 91 | 
 92 | - **Padding Scale**
 93 |   - **Small Components**: 8px-12px.
 94 |   - **Medium Components**: 16px-24px.
 95 |   - **Large Components**: 24px-32px.
 96 |   - **Containers**: 24px-48px.
 97 |   - **Page Margins**: 32px-64px.
 98 | 
 99 | - **White Space**
100 |   - **Paragraph Spacing**: 16px-24px.
101 |   - **Section Margins**: 32px-48px.
102 |   - **Content Width**: Maximum of 680px-800px.
103 |   - **Line Height**: 1.5-1.7 for body text.
104 |   - **List Item Spacing**: 8px-12px.
105 | 
106 | ### 4. Systematic Design
107 | 
108 | - **Base Measurements**
109 |   - **Base Unit**: 4px or 8px.
110 |   - **Spacing Increments**: Multiples of the base unit.
111 |   - **Maximum Container Width**: 1200px-1440px.
112 |   - **Minimum Touch Target**: 44px × 44px.
113 |   - **Icon Sizes**: 16px, 24px, 32px.
114 | 
115 | - **Typography Scale**
116 |   - **Base Size**: 16px.
117 |   - **Scale Ratio**: 1.2 or 1.25.
118 |   - **Minimum Text Size**: 14px.
119 |   - **Maximum Heading Size**: 48px.
120 |   - **Line Length**: 65-75 characters.
121 | 
122 | ### 5. Visual Hierarchy
123 | 
124 | - **Size Relationships**
125 |   - **Main Headings**: 32px-40px.
126 |   - **Subheadings**: 24px-32px.
127 |   - **Body Text**: 16px-18px.
128 |   - **Supporting Text**: 14px-16px.
129 |   - **Labels**: 12px-14px.
130 | 
131 | - **Weight Distribution**
132 |   - **Primary Content**: Font weight 700-800.
133 |   - **Secondary Headings**: Font weight 600.
134 |   - **Body Text**: Font weight 400-500.
135 |   - **Supporting Text**: Font weight 400.
136 |   - **Emphasis**: Minimum 200 weight difference.
137 | 
138 | ### 6. Depth and Visual Character
139 | 
140 | - **Component Personality**
141 |   - Use card elements for visual anchoring.
142 |   - Highlight key components as visual focal points.
143 |   - Apply subtle depth changes to interactive elements.
144 |   - Make feature components larger than supporting elements.
145 |   - Limit accent elements to 10% of the interface.
146 | 
147 | - **Depth Hierarchy**
148 |   - **Primary Cards**: Use medium elevation shadows.
149 |   - **Interactive Elements**: Change shadow on hover.
150 |   - **Modal Dialogs**: Highest elevation.
151 |   - **Nested Components**: Decrease shadow intensity progressively.
152 |   - **Active States**: Reduce shadow for feedback.
153 | 
154 | - **Visual Interest Points**
155 |   - Make key data visualizations prominent.
156 |   - Increase important numbers by 20%-30% over context.
157 |   - Use accent colors only for critical information.
158 |   - Follow platform conventions for interactive patterns.
159 |   - Design status indicators with clear visual distinctions.
160 | 
161 | - **Shadow Scales**
162 |   - **Subtle Elevation**: 0 2px 4px rgba(0, 0, 0, 0.1).
163 |   - **Medium Elevation**: 0 4px 6px rgba(0, 0, 0, 0.1).
164 |   - **High Elevation**: 0 8px 16px rgba(0, 0, 0, 0.1).
165 |   - **Inner Shadow**: Inset 0 2px 4px rgba(0, 0, 0, 0.05).
166 |   - **Focus States**: 0 0 0 3px rgba(accent color, 0.4).
167 | 
168 | - **Visual Interest**
169 |   - **Transition Timing**: 150ms-300ms.
170 |   - **Scale Changes**: 1.02-1.05 on hover.
171 |   - **Opacity Variations**: 0.8-0.9 for inactive elements.
172 |   - **Border Accents**: 2px-4px.
173 |   - **Gradient Angles**: 45°, 90°, 180°.
174 | 
175 | ### 7. Typography and Readability
176 | 
177 | - **Text Properties**
178 |   - **Body Line Height**: 1.5-1.6.
179 |   - **Heading Line Height**: 1.2-1.3.
180 |   - **Paragraph Spacing**: 1.5em.
181 |   - **Letter Spacing**: -0.02em for headings.
182 |   - **Word Spacing**: 0.05em for body text.
183 | 
184 | - **Content Structure**
185 |   - **Maximum Width**: 680px for body text.
186 |   - **List Indentation**: 16px-24px.
187 |   - **Quote Padding**: 24px-32px.
188 |   - **Code Block Padding**: 16px.
189 |   - **Caption Size**: 85%-90% of body text size.
190 | 
191 | ### 8. Responsive Design
192 | 
193 | - **Breakpoints**
194 |   - **Mobile**: 320px-480px.
195 |   - **Tablet**: 481px-768px.
196 |   - **Desktop**: 769px-1024px.
197 |   - **Large Screens**: 1025px-1200px.
198 |   - **Extra Large**: 1201px and above.
199 | 
200 | - **Scaling Factors**
201 |   - **Typography Scale**: Increase 15%-20% between breakpoints.
202 |   - **Spacing Increase**: 25%-50% from mobile to desktop.
203 |   - **Container Padding**: 16px-32px based on viewport.
204 |   - **Grid Columns**: 1-4 depending on width.
205 |   - **Image Scaling**: Reduce images by 25%-33% for mobile.
206 | 
207 | - **Responsive Adaptations**
208 |   - Transition from grid to stack layouts.
209 |   - Switch from multi-column to single-column layouts.
210 |   - Convert navigation menus to hamburger menus on mobile.
211 |   - Change horizontal lists to vertical lists.
212 |   - Adapt desktop hover states to mobile press states.
213 | 
214 | ### 9. Component Behavior Patterns
215 | 
216 | - **Interactive States**
217 |   - **Buttons**: Scale up by 1.02-1.05 on hover.
218 |   - **Cards**: Elevate by 2px-4px when interacted with.
219 |   - **Form Fields**: Highlight with 2px borders on focus.
220 |   - **Click Feedback**: Respond within 50ms-100ms.
221 |   - **Disabled States**: Set opacity to 50%-60%.
222 | 
223 | - **State Transitions**
224 |   - **Element Scaling**: 200ms-300ms.
225 |   - **Color Changes**: 150ms-200ms.
226 |   - **Position Shifts**: 300ms-400ms.
227 |   - **Opacity Changes**: 200ms-250ms.
228 |   - **Size Animations**: 250ms-350ms for height/width changes.
229 | 
230 | ### 10. Performance Considerations
231 | 
232 | 
233 | - **Loading States**
234 |   - **Skeleton Width**: Use 60%-80% of actual content width.
235 |   - **Loading Indicator Size**: 24px-32px.
236 |   - **Minimum Loading Time**: Display indicators if loading exceeds 300ms.
237 |   - **Maximum Loading Time**: Provide feedback if loading exceeds 3 seconds.
238 |   - **Progress Indicators**: Update every 500ms for long processes.
239 | 
240 | ### 11. Microinteractions and Feedback
241 | 
242 | - **Delightful Details**
243 |   - Use subtle animations to enhance feedback.
244 |   - Follow natural easing functions for animations.
245 |   - Keep animation durations between 150ms-300ms.
246 |   - Ensure microinteractions serve a functional purpose.
247 | 
248 | - **Feedback Loops**
249 |   - Provide immediate visual feedback for user actions.
250 |   - Use auditory feedback judiciously and allow users to mute.
251 | 
252 | ### 12. Error Handling and Validation
253 | 
254 | - **Prevent Errors**
255 |   - Implement input constraints and smart defaults.
256 |   - Use real-time validation to prevent errors.
257 | 
258 | - **Clear Error Messages**
259 |   - Explain what went wrong and how to fix it.
260 |   - Place error messages near the relevant input field.
261 | 
262 | ### 13. Consistency and Standards
263 | 
264 | - **Design Systems**
265 |   - Develop a style guide or design system for consistency.
266 |   - Use reusable components throughout the application.
267 | 
268 | - **Platform Conventions**
269 |   - Adhere to design guidelines specific to iOS, Android, or web.
270 | 
271 | ### 14. Emotional Design
272 | 
273 | - **Aesthetic Appeal**
274 |   - Balance functionality with visual appeal.
275 |   - Use visuals and interactions to create an emotional connection.
276 | 
277 | - **Brand Alignment**
278 |   - Ensure the design reflects the brand's identity and values.
279 | 
280 | ---
281 | 
282 | By adhering to these comprehensive design principles, you can create user interfaces that are visually appealing, intuitive, and user-friendly. Keep the focus on design elements that enhance usability and aesthetics, ensuring a seamless experience for users across various devices and platforms.


--------------------------------------------------------------------------------
/app/pages/index.vue:
--------------------------------------------------------------------------------
  1 | import { ClientOnly } from '../../.nuxt/components';
  2 | <template>
  3 |     <ClientOnly>
  4 |         <noscript>
  5 |             <div class="p-4 text-center text-red-600 bg-red-50 dark:bg-red-900/20 dark:text-red-400">
  6 |                 JavaScript is required to use this website. Please enable JavaScript in your browser settings.
  7 |             </div>
  8 |         </noscript>
  9 |     </ClientOnly>
 10 |     <main class="min-h-screen p-4 transition-colors duration-200 sm:p-8 dark:bg-gray-900 bg-gray-50">
 11 |         <div class="max-w-4xl mx-auto space-y-8">
 12 |             <StatsBar 
 13 |                 :fingerprint="fingerprint" 
 14 |                 :entropy-score="entropyScore" 
 15 |                 :is-complete="isComplete"
 16 |                 aria-label="Fingerprint Statistics" 
 17 |             />
 18 | 
 19 |             <!-- Header with Fingerprint -->
 20 |             <div class="space-y-6 text-center">
 21 |                 <div class="relative inline-block">
 22 |                     <FingerprintIcon :size="64" :scanning="loading" :variant="isComplete ? 'success' : 'default'"
 23 |                         :pulse="!isComplete && loading" />
 24 |                     <button @click="regenerateFingerprint" :disabled="loading"
 25 |                         v-umami="'Regenerate Fingerprint'"
 26 |                         class="absolute flex items-center justify-center w-8 h-8 transition-all duration-200 bg-white border border-gray-200 rounded-full shadow-lg -bottom-2 -right-2 dark:bg-gray-800 hover:shadow-xl dark:border-gray-700 group disabled:opacity-50 disabled:cursor-not-allowed"
 27 |                         :class="{ 'animate-spin': loading }">
 28 |                         <Icon name="mdi:refresh"
 29 |                             class="w-4 h-4 text-gray-600 transition-colors dark:text-gray-400 group-hover:text-blue-500 dark:group-hover:text-blue-400"
 30 |                             :class="{ 'opacity-50': loading }" />
 31 |                         <span class="sr-only">Regenerate fingerprint</span>
 32 |                     </button>
 33 |                 </div>
 34 | 
 35 |                 <div class="space-y-2">
 36 |                     <div class="flex justify-center">
 37 |                         <a
 38 |                             href="https://github.com/LeonKohli/browser-fingerprint"
 39 |                             target="_blank"
 40 |                             rel="noopener noreferrer"
 41 |                             v-umami="'GitHub Link Click'"
 42 |                             class="flex items-center gap-2 text-sm text-gray-500 transition-colors duration-200 group dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200"
 43 |                         >
 44 |                             <div class="flex items-center gap-1.5">
 45 |                                 <Icon name="mdi:github" class="w-4 h-4" />
 46 |                                 <span class="font-medium">Open Source Project</span>
 47 |                             </div>
 48 |                             <span class="text-xs text-gray-400 dark:text-gray-500 group-hover:text-gray-500 dark:group-hover:text-gray-400">
 49 |                                 •
 50 |                             </span>
 51 |                             <span class="text-xs">
 52 |                                 Star us on GitHub
 53 |                                 <Icon 
 54 |                                     name="mdi:arrow-top-right" 
 55 |                                     class="inline-block w-3 h-3 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" 
 56 |                                 />
 57 |                             </span>
 58 |                         </a>
 59 |                     </div>
 60 |                     <TooltipProvider>
 61 |                         <Tooltip>
 62 |                             <TooltipTrigger asChild>
 63 |                                 <h1 class="text-4xl font-bold tracking-tight dark:text-white cursor-help">
 64 |                                     Browser Fingerprint
 65 |                                 </h1>
 66 |                             </TooltipTrigger>
 67 |                             <TooltipContent class="max-w-xs">
 68 |                                 <p class="text-sm">
 69 |                                     A browser fingerprint is a collection of unique browser and device characteristics that can be used to identify and track users across the internet, even without cookies.
 70 |                                 </p>
 71 |                             </TooltipContent>
 72 |                         </Tooltip>
 73 |                     </TooltipProvider>
 74 |                     <div class="flex flex-col items-center space-y-4">
 75 |                         <p class="max-w-2xl text-lg text-gray-600 dark:text-gray-400">
 76 |                             Your unique browser fingerprint hash:
 77 |                         </p>
 78 |                     </div>
 79 |                 </div>
 80 |             </div>
 81 | 
 82 |             <div class="relative max-w-2xl mx-auto">
 83 |                 <div v-if="fingerprint?.hash"
 84 |                     class="p-4 font-mono text-sm text-center text-green-400 break-all bg-gray-800 rounded-lg shadow-lg dark:bg-gray-950 group">
 85 |                     {{ fingerprint.hash }}
 86 |                     <div
 87 |                         class="absolute inset-0 flex items-center justify-center transition-opacity rounded-lg opacity-0 bg-black/50 group-hover:opacity-100">
 88 |                         <button @click="handleCopyFingerprint" :disabled="loading"
 89 |                             v-umami="'Copy Fingerprint'"
 90 |                             class="flex items-center gap-2 px-4 py-2 text-gray-900 transition-all transform bg-white rounded-lg shadow-lg dark:bg-gray-800 dark:text-white hover:shadow-xl hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100">
 91 |                             <Icon :name="isCopied ? 'mdi:check' : 'mdi:clipboard-outline'"
 92 |                                 class="w-4 h-4 transition-all"
 93 |                                 :class="{ 'text-green-500': isCopied, 'animate-spin': loading }" />
 94 |                             <span class="font-medium">
 95 |                                 {{ loading ? 'Scanning...' : (isCopied ? 'Copied!' : 'Copy Fingerprint') }}
 96 |                             </span>
 97 |                         </button>
 98 |                     </div>
 99 |                 </div>
100 |             </div>
101 | 
102 |             <!-- Section Grid -->
103 |             <div class="grid grid-cols-1 gap-6">
104 |                 <div v-for="section in sections" :key="section.id"
105 |                     class="transition-all duration-200 bg-white border border-gray-100 shadow-sm dark:bg-gray-800 rounded-xl hover:shadow-md dark:border-gray-700">
106 |                     <div class="flex items-center justify-between px-6 py-5">
107 |                         <button @click="toggleSection(section.id)"
108 |                             class="flex items-center flex-1 gap-4 text-left transition-colors rounded-xl group">
109 |                             <div class="flex items-center gap-4">
110 |                                 <div
111 |                                     class="flex items-center justify-center w-12 h-12 transition-transform duration-200 rounded-xl bg-blue-50 dark:bg-blue-900/20 group-hover:scale-105">
112 |                                     <Icon :name="section.icon"
113 |                                         class="w-6 h-6 text-blue-500 transition-colors group-hover:text-blue-600 dark:group-hover:text-blue-400" />
114 |                                 </div>
115 |                                 <div class="flex-1">
116 |                                     <span class="font-semibold text-gray-900 dark:text-white">{{ section.title }}</span>
117 |                                     <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5 line-clamp-2">
118 |                                         {{ getSectionDescription(section.id) }}
119 |                                     </p>
120 |                                 </div>
121 |                             </div>
122 |                             <Icon name="mdi:chevron-down"
123 |                                 class="w-5 h-5 text-gray-400 transition-transform duration-200"
124 |                                 :class="{ 'rotate-180': expandedSections[section.id] }" />
125 |                         </button>
126 |                         
127 |                         <TooltipProvider>
128 |                             <Tooltip>
129 |                                 <TooltipTrigger asChild>
130 |                                     <button 
131 |                                         @click.stop="openInfoModal(section.id)"
132 |                                         class="flex items-center justify-center w-8 h-8 ml-4 transition-colors rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
133 |                                         v-umami="{ name: 'Info Button Click', sectionTitle: section.title }"
134 |                                     >
135 |                                         <Icon 
136 |                                             name="mdi:information"
137 |                                             class="w-5 h-5 text-gray-400 transition-colors hover:text-blue-500 dark:hover:text-blue-400"
138 |                                         />
139 |                                     </button>
140 |                                 </TooltipTrigger>
141 |                                 <TooltipContent>
142 |                                     Learn more about {{ section.title.toLowerCase() }}
143 |                                 </TooltipContent>
144 |                             </Tooltip>
145 |                         </TooltipProvider>
146 |                     </div>
147 | 
148 |                     <Transition
149 |                         enter-active-class="transition-all duration-300 ease-out"
150 |                         enter-from-class="opacity-0 max-h-0"
151 |                         enter-to-class="max-h-[2000px] opacity-100"
152 |                         leave-active-class="transition-all duration-300 ease-in"
153 |                         leave-from-class="max-h-[2000px] opacity-100"
154 |                         leave-to-class="opacity-0 max-h-0"
155 |                     >
156 |                         <div v-if="expandedSections[section.id]"
157 |                             class="px-6 pb-6 overflow-hidden divide-y dark:divide-gray-700">
158 |                             <div v-if="loadingStates[section.id]" class="py-4">
159 |                                 <div class="space-y-3">
160 |                                     <Skeleton class="w-2/3 h-4" />
161 |                                     <Skeleton class="w-5/6 h-4" />
162 |                                     <Skeleton class="w-4/5 h-4" />
163 |                                 </div>
164 |                             </div>
165 |                             <template v-else-if="fingerprint && fingerprint[section.id]">
166 |                                 <p v-if="sectionHasIssues(section.id)" class="py-4 text-sm text-yellow-600 dark:text-yellow-400">
167 |                                     Note: Some data in this section may be incomplete or unavailable due to browser restrictions or privacy settings.
168 |                                 </p>
169 |                                 <div class="grid grid-cols-1 gap-4 py-4 sm:grid-cols-2">
170 |                                     <template v-for="(value, key) in fingerprint[section.id]" :key="key">
171 |                                         <div class="space-y-2">
172 |                                             <div class="text-sm font-medium text-gray-600 dark:text-gray-300">
173 |                                                 {{ formatKey(key) }}
174 |                                             </div>
175 |                                             <div class="text-sm text-gray-900 dark:text-gray-200">
176 |                                                 <template v-if="Array.isArray(value)">
177 |                                                     <div class="space-y-1">
178 |                                                         <div v-for="(item, i) in value" :key="i"
179 |                                                             class="flex items-center gap-2">
180 |                                                             <span class="w-1.5 h-1.5 rounded-full bg-blue-500"></span>
181 |                                                             <template v-if="typeof item === 'object'">
182 |                                                                 <div class="space-y-1">
183 |                                                                     <div v-for="(val, k) in item" :key="k"
184 |                                                                         class="text-gray-700 dark:text-gray-300">
185 |                                                                         <span class="font-medium">{{ formatKey(k) }}:</span> {{ val }}
186 |                                                                     </div>
187 |                                                                 </div>
188 |                                                             </template>
189 |                                                             <template v-else>
190 |                                                                 {{ item }}
191 |                                                             </template>
192 |                                                         </div>
193 |                                                     </div>
194 |                                                 </template>
195 |                                                 <template v-else-if="key === 'canvasFingerprint'">
196 |                                                     <div class="space-y-2">
197 |                                                         <div class="p-2 font-mono text-xs rounded-lg bg-gray-50 dark:bg-gray-900">
198 |                                                             {{ value.substring(0, 64) }}...
199 |                                                         </div>
200 |                                                         <img :src="value" alt="Canvas Fingerprint"
201 |                                                             class="border border-gray-200 dark:border-gray-700 rounded-lg max-w-[200px] shadow-sm" />
202 |                                                     </div>
203 |                                                 </template>
204 |                                                 <template v-else-if="key === 'audioFingerprint'">
205 |                                                     <div class="space-y-2">
206 |                                                         <div class="p-2 font-mono text-xs rounded-lg bg-gray-50 dark:bg-gray-900">
207 |                                                             {{ value?.hash || 'No audio fingerprint available' }}
208 |                                                         </div>
209 |                                                         <div class="relative p-2 overflow-hidden bg-white border border-gray-200 rounded-lg dark:border-gray-700 dark:bg-gray-800">
210 |                                                             <AudioVisualizer :audio-data="value" />
211 |                                                         </div>
212 |                                                     </div>
213 |                                                 </template>
214 |                                                 <template v-else-if="typeof value === 'object'">
215 |                                                     <pre class="p-2 overflow-x-auto text-xs rounded-lg bg-gray-50 dark:bg-gray-900">{{ JSON.stringify(value, null, 2) }}</pre>
216 |                                                 </template>
217 |                                                 <template v-else>
218 |                                                     {{ value }}
219 |                                                 </template>
220 |                                             </div>
221 |                                         </div>
222 |                                     </template>
223 |                                 </div>
224 |                             </template>
225 |                         </div>
226 |                     </Transition>
227 |                 </div>
228 |             </div>
229 | 
230 |             <!-- Navigation Links -->
231 |             <div class="flex flex-wrap items-center justify-center gap-4">
232 |                 <NuxtLink 
233 |                     to="/privacy-tools"
234 |                     class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 transition-colors bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:text-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700"
235 |                     v-umami="'Privacy Tools Link Click'"
236 |                 >
237 |                     <Icon name="mdi:shield-lock" class="w-4 h-4" />
238 |                     View Privacy Tools
239 |                 </NuxtLink>
240 | 
241 |                 <NuxtLink 
242 |                     to="/links"
243 |                     class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 transition-colors bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:text-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700"
244 |                     v-umami="'Links and Resources Link Click'"
245 |                 >
246 |                     <Icon name="mdi:link-variant" class="w-4 h-4" />
247 |                     Links and Resources
248 |                 </NuxtLink>
249 | 
250 |                 <a 
251 |                     href="https://www.buymeacoffee.com/LeonKohli"
252 |                     target="_blank"
253 |                     rel="noopener noreferrer"
254 |                     class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-yellow-800 transition-colors bg-yellow-100 border border-yellow-200 rounded-lg shadow-sm hover:bg-yellow-200 dark:bg-yellow-900/30 dark:text-yellow-200 dark:border-yellow-900/50 dark:hover:bg-yellow-900/50"
255 |                     v-umami="'Buy Me a Coffee Click'"
256 |                 >
257 |                     <Icon name="mdi:coffee" class="w-4 h-4" />
258 |                     Buy Me a Coffee
259 |                 </a>
260 |             </div>
261 | 
262 |             <!-- Privacy Information Alert -->
263 |             <Alert class="max-w-2xl mx-auto">
264 |                 <template #default>
265 |                     <div class="flex gap-3">
266 |                         <Icon name="mdi:shield-alert" class="w-5 h-5 text-blue-500" />
267 |                         <div class="space-y-1">
268 |                             <p class="font-medium">Privacy Information</p>
269 |                             <p class="text-sm text-gray-600 dark:text-gray-400">
270 |                                 This tool demonstrates browser fingerprinting techniques. Your browser's fingerprint can
271 |                                 be used to track you across websites, even in private browsing mode or when using VPN
272 |                                 services.
273 |                             </p>
274 |                         </div>
275 |                     </div>
276 |                 </template>
277 |             </Alert>
278 |         </div>
279 |     </main>
280 | 
281 |     <!-- Update the modal usage -->
282 |     <FingerprintInfoModal
283 |         :is-open="infoModalOpen"
284 |         :section-id="currentSectionId"
285 |         @update:open="handleModalClose"
286 |     />
287 | </template>
288 | 
289 | <script setup>
290 | const {
291 |     generateFingerprint,
292 |     formatKey,
293 |     copyFingerprint,
294 |     getSectionDescription,
295 |     calculateEntropy
296 | } = useBrowserFingerprint();
297 | 
298 | const isCopied = ref(false);
299 | 
300 | const sections = [
301 |     { id: 'browser', title: 'Browser Information', icon: 'mdi:web' },
302 |     { id: 'system', title: 'System Information', icon: 'mdi:cpu-64-bit' },
303 |     { id: 'screen', title: 'Screen Information', icon: 'mdi:monitor' },
304 |     { id: 'media', title: 'Media Capabilities', icon: 'mdi:harddisk' },
305 |     { id: 'webgl', title: 'WebGL Information', icon: 'mdi:video-3d' },
306 |     { id: 'hardware', title: 'Hardware Information', icon: 'mdi:memory' }
307 | ];
308 | 
309 | const loading = ref(false);
310 | const fingerprint = ref(null);
311 | const expandedSections = ref({});
312 | const isComplete = ref(false);
313 | const entropyScore = ref(0);
314 | const loadingStates = ref({
315 |     browser: true,
316 |     system: true,
317 |     screen: true,
318 |     media: true,
319 |     webgl: true,
320 |     hardware: true
321 | });
322 | 
323 | const sectionIssues = ref({
324 |     browser: false,
325 |     system: false,
326 |     screen: false,
327 |     media: false,
328 |     webgl: false,
329 |     hardware: false
330 | });
331 | 
332 | onMounted(async () => {
333 |     if (process.client) {
334 |         loading.value = true;
335 |         try {
336 |             isComplete.value = false;
337 |             Object.keys(loadingStates.value).forEach(key => {
338 |                 loadingStates.value[key] = true;
339 |             });
340 | 
341 |             const timeoutPromise = new Promise((_, reject) => {
342 |                 setTimeout(() => reject(new Error('Fingerprint generation timed out')), 10000);
343 |             });
344 | 
345 |             const result = await Promise.race([
346 |                 generateFingerprint(),
347 |                 timeoutPromise
348 |             ]);
349 | 
350 |             fingerprint.value = result.fingerprint;
351 |             entropyScore.value = result.entropyScore;
352 |             sectionIssues.value = result.sectionIssues || {};
353 | 
354 |         } catch (error) {
355 |             console.error('Error initializing fingerprint:', error);
356 |             Object.keys(sectionIssues.value).forEach(key => {
357 |                 sectionIssues.value[key] = true;
358 |             });
359 |         } finally {
360 |             loading.value = false;
361 |             isComplete.value = true;
362 |             Object.keys(loadingStates.value).forEach(key => {
363 |                 loadingStates.value[key] = false;
364 |             });
365 |         }
366 |     }
367 | });
368 | 
369 | const sectionHasIssues = (sectionId) => {
370 |     return sectionIssues.value[sectionId];
371 | };
372 | onMounted(() => {
373 |     if (process.client) {
374 |         const handleInteraction = () => {
375 |             document.body.setAttribute('data-user-interacted', 'true');
376 |             document.removeEventListener('click', handleInteraction);
377 |             document.removeEventListener('keydown', handleInteraction);
378 |         };
379 | 
380 |         document.addEventListener('click', handleInteraction);
381 |         document.addEventListener('keydown', handleInteraction);
382 |     }
383 | });
384 | 
385 | const handleCopyFingerprint = async () => {
386 |     if (fingerprint.value?.hash && !loading.value) {
387 |         await copyFingerprint(fingerprint.value.hash);
388 |         isCopied.value = true;
389 |         setTimeout(() => {
390 |             isCopied.value = false;
391 |         }, 2000);
392 |     }
393 | };
394 | 
395 | const regenerateFingerprint = async () => {
396 |     if (loading.value) return;
397 | 
398 |     try {
399 |         loading.value = true;
400 |         isComplete.value = false;
401 |         fingerprint.value = null;
402 |         entropyScore.value = 0;
403 | 
404 |         Object.keys(loadingStates.value).forEach(key => {
405 |             loadingStates.value[key] = true;
406 |             sectionIssues.value[key] = false;
407 |         });
408 | 
409 |         const result = await generateFingerprint();
410 |         fingerprint.value = result.fingerprint;
411 |         entropyScore.value = result.entropyScore;
412 |         sectionIssues.value = result.sectionIssues || {};
413 | 
414 |     } catch (error) {
415 |         console.error('Error regenerating fingerprint:', error);
416 |         Object.keys(sectionIssues.value).forEach(key => {
417 |             sectionIssues.value[key] = true;
418 |         });
419 |         entropyScore.value = 0;
420 |     } finally {
421 |         loading.value = false;
422 |         isComplete.value = true;
423 |         Object.keys(loadingStates.value).forEach(key => {
424 |             loadingStates.value[key] = false;
425 |         });
426 |     }
427 | };
428 | 
429 | watch(fingerprint, (newValue) => {
430 |     try {
431 |         if (newValue) {
432 |             entropyScore.value = calculateEntropy(newValue);
433 |         }
434 |     } catch (error) {
435 |         console.error('Error calculating entropy:', error);
436 |         entropyScore.value = 0;
437 |     }
438 | }, { deep: true, immediate: true });
439 | 
440 | const colorMode = useColorMode();
441 | 
442 | const isDark = computed(() => colorMode.value === 'dark');
443 | 
444 | const toggleColorMode = () => {
445 |   colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark';
446 | };
447 | 
448 | const infoModalOpen = ref(false);
449 | const currentSectionId = ref('');
450 | 
451 | const handleModalClose = (value) => {
452 |   infoModalOpen.value = value;
453 |   if (!value) {
454 |     currentSectionId.value = '';
455 |   }
456 | };
457 | 
458 | const openInfoModal = (sectionId) => {
459 |   currentSectionId.value = sectionId;
460 |   infoModalOpen.value = true;
461 | };
462 | 
463 | const toggleSection = (sectionId) => {
464 |     expandedSections.value[sectionId] = !expandedSections.value[sectionId];
465 | };
466 | 
467 | const transitionStyles = computed(() => ({
468 |     overflow: 'hidden',
469 |     transition: 'max-height 0.3s ease-out, opacity 0.3s ease-out',
470 | }));
471 | </script>
472 | <style>
473 | .fade-enter-active,
474 | .fade-leave-active {
475 |     transition: opacity 0.2s ease;
476 | }
477 | 
478 | .fade-enter-from,
479 | .fade-leave-to {
480 |     opacity: 0;
481 | }
482 | 
483 | @keyframes fadeIn {
484 |     from {
485 |         opacity: 0;
486 |         transform: translateY(-4px);
487 |     }
488 | 
489 |     to {
490 |         opacity: 1;
491 |         transform: translateY(0);
492 |     }
493 | }
494 | 
495 | .animate-fadeIn {
496 |     animation: fadeIn 0.2s ease-out;
497 | }
498 | 
499 | .section-content-enter-active,
500 | .section-content-leave-active {
501 |     transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
502 |     overflow: hidden;
503 | }
504 | 
505 | .section-content-enter-from,
506 | .section-content-leave-to {
507 |     max-height: 0;
508 |     opacity: 0;
509 | }
510 | 
511 | .section-content-enter-to,
512 | .section-content-leave-from {
513 |     max-height: 1000px;
514 |     opacity: 1;
515 | }
516 | </style>
517 | 


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