Enhance layout and styling for Anti-Fingerprinting Shield Plus page
- Updated the layout structure to utilize a new PageLayout component for better organization. - Introduced new Hero, Content, and CallToAction components to improve the visual presentation and user engagement. - Added glassmorphism styles for enhanced aesthetics and readability. - Implemented accessibility features, including a "Skip to main content" link for improved navigation. - Refactored the RocketChat livechat initialization to remove unnecessary console logs, enhancing performance and user experience.
This commit is contained in:
@@ -65,6 +65,19 @@ p, li { font-size: clamp(1rem, 2.5vw, 1.125rem); line-height: 1.7; }
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Shared glass and card utilities */
|
||||
.glass {
|
||||
@apply bg-white/80 dark:bg-slate-900/80 backdrop-blur-lg border border-white/20 dark:border-white/10 shadow-lg;
|
||||
}
|
||||
|
||||
.glass-strong {
|
||||
@apply bg-white/90 dark:bg-slate-900/90 backdrop-blur-xl border border-white/30 dark:border-white/10 shadow-xl;
|
||||
}
|
||||
|
||||
.card-panel {
|
||||
@apply rounded-2xl glass p-6 transition-shadow duration-200 hover:shadow-xl;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@apply inline-flex items-center justify-center rounded-full border-gray-400 border bg-transparent font-medium text-center text-base text-page leading-snug transition py-3.5 px-6 md:px-8 ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2 hover:bg-gray-100 hover:border-gray-600 dark:text-slate-300 dark:border-slate-500 dark:hover:bg-slate-800 dark:hover:border-slate-800 cursor-pointer;
|
||||
/* Enhanced visibility for light mode */
|
||||
|
||||
@@ -66,6 +66,9 @@ const { language, textDirection } = I18N;
|
||||
</head>
|
||||
|
||||
<body class="antialiased text-default bg-page tracking-tight">
|
||||
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-50 focus:bg-white focus:text-blue-600 focus:rounded focus:px-3 focus:py-2 dark:focus:bg-slate-800">
|
||||
Skip to main content
|
||||
</a>
|
||||
<GlobalBackground />
|
||||
<header role="banner">
|
||||
<slot name="header" />
|
||||
@@ -73,7 +76,7 @@ const { language, textDirection } = I18N;
|
||||
<nav role="navigation" aria-label="Main navigation">
|
||||
<slot name="navigation" />
|
||||
</nav>
|
||||
<main role="main">
|
||||
<main role="main" id="main-content">
|
||||
<slot name="structured-data" />
|
||||
<slot />
|
||||
</main>
|
||||
@@ -87,62 +90,35 @@ const { language, textDirection } = I18N;
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Initialize RocketChat livechat widget with proper error handling
|
||||
// Initialize RocketChat livechat widget without client-facing logs
|
||||
(function(w, d, s, u) {
|
||||
console.log('RocketChat initialization started');
|
||||
|
||||
// Initialize RocketChat object if it doesn't exist
|
||||
w.RocketChat = function(c) {
|
||||
w.RocketChat = function(c) {
|
||||
if (w.RocketChat._) {
|
||||
w.RocketChat._.push(c);
|
||||
} else {
|
||||
w.RocketChat._ = [c];
|
||||
}
|
||||
};
|
||||
|
||||
};
|
||||
if (!w.RocketChat._) {
|
||||
w.RocketChat._ = [];
|
||||
}
|
||||
|
||||
w.RocketChat.url = u;
|
||||
console.log('RocketChat URL set to:', u);
|
||||
|
||||
// Wait for DOM to be ready before loading the script
|
||||
function loadRocketChat() {
|
||||
try {
|
||||
console.log('Loading RocketChat script...');
|
||||
const h = d.getElementsByTagName(s)[0];
|
||||
if (!h) {
|
||||
console.warn('No script tag found to insert before');
|
||||
return;
|
||||
}
|
||||
|
||||
const j = d.createElement(s);
|
||||
j.async = true;
|
||||
j.async = true;
|
||||
j.src = 'https://chat.365devnet.eu/livechat/rocketchat-livechat.min.js?_=201903270000';
|
||||
|
||||
// Add error handling for script loading
|
||||
j.onerror = function() {
|
||||
console.warn('RocketChat livechat script failed to load');
|
||||
};
|
||||
|
||||
j.onload = function() {
|
||||
console.log('RocketChat script loaded successfully');
|
||||
};
|
||||
|
||||
j.onerror = function() {};
|
||||
h.parentNode.insertBefore(j, h);
|
||||
console.log('RocketChat script tag inserted');
|
||||
} catch (error) {
|
||||
console.warn('Error loading RocketChat livechat:', error);
|
||||
}
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
// Load when DOM is ready
|
||||
if (d.readyState === 'loading') {
|
||||
console.log('DOM still loading, waiting for DOMContentLoaded');
|
||||
d.addEventListener('DOMContentLoaded', loadRocketChat);
|
||||
} else {
|
||||
console.log('DOM already loaded, loading RocketChat immediately');
|
||||
loadRocketChat();
|
||||
}
|
||||
})(window, document, 'script', 'https://chat.365devnet.eu/livechat');
|
||||
|
||||
@@ -152,6 +152,16 @@ const metadata = {
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduce motion and heavy effects on mobile */
|
||||
@media (max-width: 768px) {
|
||||
.animated-hero-bg { animation: none; background-size: 200% 200%; }
|
||||
.floating-elements { display: none; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.animated-hero-bg { animation: none; }
|
||||
.floating-shape { animation: none; }
|
||||
}
|
||||
|
||||
/* Enhanced glassmorphism effects for all sections */
|
||||
:global(.glass-enhanced) {
|
||||
background: rgba(255, 255, 255, 0.95) !important;
|
||||
|
||||
@@ -45,6 +45,19 @@ const metadata = {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Prefer reduced motion and mobile fallback for heavy animation */
|
||||
@media (max-width: 768px) {
|
||||
.hero-explosive {
|
||||
animation: none;
|
||||
background-size: 200% 200%, 200% 200%, 200% 200%, 300% 300%;
|
||||
}
|
||||
.floating-orbs { display: none; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.hero-explosive { animation: none; }
|
||||
.orb { animation: none; }
|
||||
}
|
||||
|
||||
/* Floating orbs with vivid colors */
|
||||
.floating-orbs {
|
||||
position: absolute;
|
||||
@@ -490,8 +503,6 @@ const metadata = {
|
||||
variant: 'primary',
|
||||
text: explosive.actions.learnMore,
|
||||
href: '#services',
|
||||
|
||||
variant: 'primary'
|
||||
},
|
||||
{
|
||||
text: explosive.actions.contactMe,
|
||||
|
||||
@@ -147,6 +147,16 @@ const metadata = {
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile and reduced-motion fallbacks for heavy visuals */
|
||||
@media (max-width: 768px) {
|
||||
.animated-hero-bg { animation: none; background-size: 200% 200%; }
|
||||
.floating-elements { display: none; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.animated-hero-bg { animation: none; }
|
||||
.floating-shape { animation: none; }
|
||||
}
|
||||
|
||||
/* Enhanced glassmorphism effects for all sections */
|
||||
:global(.glass-enhanced) {
|
||||
background: rgba(255, 255, 255, 0.95) !important;
|
||||
|
||||
@@ -1,23 +1,66 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Layout from '~/layouts/PageLayout.astro';
|
||||
import Hero from '~/components/widgets/Hero.astro';
|
||||
import Content from '~/components/widgets/Content.astro';
|
||||
import CallToAction from '~/components/widgets/CallToAction.astro';
|
||||
import Image from '~/components/common/Image.astro';
|
||||
import type { MetaData } from '~/types';
|
||||
|
||||
const metadata: MetaData = {
|
||||
title: 'Anti‑Fingerprinting Shield Plus | Userscript Overview',
|
||||
description: 'Enhance privacy by blocking or spoofing browser fingerprinting techniques. Works with Tampermonkey and Violentmonkey.',
|
||||
};
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<div class="max-w-3xl mx-auto px-4 py-8">
|
||||
<h1 class="text-3xl font-bold mb-4">Anti-Fingerprinting Shield Plus</h1>
|
||||
<p class="mb-4">
|
||||
<a href="https://greasyfork.org/en/scripts/534570-anti-fingerprinting-shield-plus" target="_blank" rel="noopener noreferrer" class="text-blue-600 underline">View on GreasyFork</a>
|
||||
</p>
|
||||
<p class="mb-6">
|
||||
<strong>Anti-Fingerprinting Shield Plus</strong> is a userscript designed to enhance your privacy by blocking or spoofing browser fingerprinting techniques. It works on a wide range of sites and is compatible with popular script managers like Tampermonkey and Violentmonkey.
|
||||
</p>
|
||||
<h2 class="text-xl font-semibold mb-2">How to Install</h2>
|
||||
<ol class="list-decimal list-inside mb-6">
|
||||
<li>Install a userscript manager such as Tampermonkey or Violentmonkey.</li>
|
||||
<li>Visit the <a href="https://greasyfork.org/en/scripts/534570-anti-fingerprinting-shield-plus" target="_blank" rel="noopener noreferrer" class="text-blue-600 underline">Anti-Fingerprinting Shield Plus GreasyFork page</a>.</li>
|
||||
<li>Click the "Install this script" button.</li>
|
||||
<li>Follow the prompts to add the script to your userscript manager.</li>
|
||||
</ol>
|
||||
<p class="text-gray-600">For more details and updates, visit the GreasyFork page linked above.</p>
|
||||
<Layout metadata={metadata}>
|
||||
<Hero id="hero" isDark={false}>
|
||||
<Fragment slot="title">
|
||||
<span class="text-4xl md:text-5xl font-extrabold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">Anti‑Fingerprinting Shield Plus</span>
|
||||
</Fragment>
|
||||
<Fragment slot="subtitle">
|
||||
<p class="subtitle-responsive text-muted">Userscript to reduce browser fingerprinting by blocking or spoofing common techniques. Compatible with Tampermonkey and Violentmonkey.</p>
|
||||
</Fragment>
|
||||
</Hero>
|
||||
|
||||
<div class="max-w-5xl mx-auto p-4 md:px-8">
|
||||
<Content id="overview" columns={2} items={[]}
|
||||
classes={{ container: 'glass-strong', content: '' }}
|
||||
image={{ src: '~/assets/images/HomepageIntroImage.webp', alt: 'Privacy protection illustration', loading: 'lazy' }}>
|
||||
<Fragment slot="content">
|
||||
<div class="space-y-4">
|
||||
<p>
|
||||
<strong>Anti‑Fingerprinting Shield Plus</strong> is a userscript designed to enhance your privacy by blocking or spoofing browser fingerprinting techniques across a wide range of websites.
|
||||
</p>
|
||||
<p>
|
||||
It is lightweight and works seamlessly with popular userscript managers.
|
||||
</p>
|
||||
<div class="grid sm:grid-cols-2 gap-3 mt-4">
|
||||
{['Blocks canvas and WebGL probes','Masks audio and font entropy','Randomizes non-essential signals','Minimal performance impact'].map((item) => (
|
||||
<div class="card-panel flex items-start gap-2">
|
||||
<span class="text-green-600 mt-0.5">✓</span>
|
||||
<span class="text-sm text-gray-700 dark:text-slate-300">{item}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
</Content>
|
||||
|
||||
<Content id="install" columns={1} items={[]} classes={{ container: 'glass', content: '' }}>
|
||||
<Fragment slot="content">
|
||||
<h2 class="text-2xl font-bold mb-3">How to Install</h2>
|
||||
<ol class="list-decimal list-inside space-y-2 text-gray-700 dark:text-slate-300">
|
||||
<li>Install a userscript manager such as Tampermonkey or Violentmonkey.</li>
|
||||
<li>Visit the <a href="https://greasyfork.org/en/scripts/534570-anti-fingerprinting-shield-plus" target="_blank" rel="noopener noreferrer" class="text-blue-600 dark:text-blue-400 underline">Anti‑Fingerprinting Shield Plus on GreasyFork</a>.</li>
|
||||
<li>Click the "Install this script" button and confirm.</li>
|
||||
<li>Reload target websites to apply protections.</li>
|
||||
</ol>
|
||||
</Fragment>
|
||||
</Content>
|
||||
|
||||
<CallToAction callToAction={{ text: 'View on GreasyFork', href: 'https://greasyfork.org/en/scripts/534570-anti-fingerprinting-shield-plus', icon: 'tabler:external-link', variant: 'primary' }}>
|
||||
<Fragment slot="title">Try the userscript now</Fragment>
|
||||
<Fragment slot="subtitle">Open-source, actively maintained, and easy to install.</Fragment>
|
||||
</CallToAction>
|
||||
</div>
|
||||
</Layout>
|
||||
</Layout>
|
||||
Reference in New Issue
Block a user