Skip to content

Instantly share code, notes, and snippets.

@oberstet

oberstet/privacy_advocate_badge.html

Created June 8, 2025 05:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save oberstet/893eae7a6bc6c152aafca71d13b8b146 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save oberstet/893eae7a6bc6c152aafca71d13b8b146 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
privacy_advocate_badge.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Privacy Advocate Badge</title>
<style>
body {
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
font-family: 'Arial', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
}
.controls {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 20px;
margin-bottom: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.controls h3 {
color: white;
margin-top: 0;
text-align: center;
}
.control-group {
margin: 15px 0;
display: flex;
align-items: center;
gap: 10px;
}
.control-group label {
color: white;
min-width: 150px;
font-weight: bold;
}
.control-group input[type="checkbox"] {
transform: scale(1.2);
}
.control-group input[type="range"] {
width: 150px;
}
.badge-container {
position: relative;
margin: 20px;
}
.badge {
width: 300px;
height: 300px;
position: relative;
cursor: pointer;
transition: transform 0.3s ease;
}
.badge:hover {
transform: scale(1.05);
}
.download-btn {
background: linear-gradient(45deg, #ff6b6b, #ee5a52);
color: white;
border: none;
padding: 12px 24px;
border-radius: 25px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
margin: 10px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.download-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.instructions {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 20px;
margin-top: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
max-width: 600px;
}
.instructions h3 {
color: white;
margin-top: 0;
}
.instructions p, .instructions li {
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
}
.instructions ul {
padding-left: 20px;
}
.preview-text {
color: white;
text-align: center;
margin: 10px 0;
font-style: italic;
}
</style>
</head>
<body>
<div class="controls">
<h3>🛡️ Digital Privacy Advocate Badge</h3>
<div class="control-group">
<label>Text Size:</label>
<input type="range" id="textSize" min="14" max="22" value="18">
<span id="textSizeValue" style="color: white;">18px</span>
</div>
<div class="control-group">
<label>Add Ironic LinkedIn Tick:</label>
<input type="checkbox" id="addTick" checked>
</div>
</div>
<div class="badge-container">
<canvas id="badgeCanvas" width="600" height="600" style="width: 300px; height: 300px; border-radius: 50%;"></canvas>
</div>
<p class="preview-text">Perfect for those who value privacy over verification badges! 😄</p>
<button class="download-btn" onclick="downloadBadge()">📥 Download Badge PNG</button>
<div class="instructions">
<h3>Your Ironic Privacy Badge is Ready!</h3>
<p><strong>The Perfect Irony:</strong> A "verified" badge that celebrates being unverified! 😂</p>
<p><strong>How to Use:</strong></p>
<ul>
<li>Download the badge using the button above</li>
<li>Go to your LinkedIn profile settings</li>
<li>Replace your profile picture with this badge</li>
<li>Watch the confused but amused reactions! 🤣</li>
</ul>
<p><strong>Pro Tips:</strong></p>
<ul>
<li>The badge is 600x600px - perfect for LinkedIn</li>
<li>Add "Digital Privacy Advocate" to your headline</li>
<li>Consider adding "Proudly Unverified" to your About section</li>
<li>Start conversations about digital privacy!</li>
</ul>
<p><strong>Bonus:</strong> That little blue tick in the corner is the ultimate irony - you're "verified" as someone who refuses verification! 🎯</p>
</div>
<script>
const canvas = document.getElementById('badgeCanvas');
const ctx = canvas.getContext('2d');
function drawBadge() {
const textSize = parseInt(document.getElementById('textSize').value);
const addTick = document.getElementById('addTick').checked;
// Update text size display
document.getElementById('textSizeValue').textContent = textSize + 'px';
// Clear canvas with transparent background
ctx.clearRect(0, 0, 600, 600);
// Create gradient background
const gradient = ctx.createLinearGradient(0, 0, 600, 600);
gradient.addColorStop(0, '#2C3E50');
gradient.addColorStop(1, '#34495E');
// Draw shield shape
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.moveTo(300, 60); // Top point
ctx.lineTo(460, 140); // Top right
ctx.lineTo(460, 340); // Bottom right
ctx.quadraticCurveTo(460, 400, 300, 540); // Bottom curve
ctx.quadraticCurveTo(140, 400, 140, 340); // Bottom curve left
ctx.lineTo(140, 140); // Bottom left
ctx.closePath();
ctx.fill();
// Add stroke
ctx.strokeStyle = '#F1C40F';
ctx.lineWidth = 4;
ctx.stroke();
// Draw lock icon
ctx.fillStyle = '#F1C40F';
ctx.fillRect(270, 220, 60, 50); // Lock body
ctx.fillRect(275, 225, 50, 40); // Lock inner
// Lock shackle
ctx.strokeStyle = '#F1C40F';
ctx.lineWidth = 8;
ctx.beginPath();
ctx.arc(300, 220, 25, Math.PI, 0, false);
ctx.stroke();
// Add keyhole
ctx.fillStyle = '#2C3E50';
ctx.beginPath();
ctx.arc(300, 245, 8, 0, 2 * Math.PI);
ctx.fill();
ctx.fillRect(296, 245, 8, 15);
// Add text
ctx.fillStyle = '#F1C40F';
ctx.font = `bold ${textSize * 2}px Arial`;
ctx.textAlign = 'center';
ctx.fillText('DIGITAL', 300, 320);
ctx.fillText('PRIVACY', 300, 355);
ctx.font = `bold ${(textSize - 2) * 2}px Arial`;
ctx.fillText('ADVOCATE', 300, 390);
// Add decorative elements
ctx.strokeStyle = '#F1C40F';
ctx.lineWidth = 2;
ctx.globalAlpha = 0.3;
// Decorative lines
ctx.beginPath();
ctx.moveTo(180, 200);
ctx.lineTo(420, 200);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(180, 420);
ctx.lineTo(420, 420);
ctx.stroke();
ctx.globalAlpha = 1;
// Add the ironic LinkedIn verification tick
if (addTick) {
// Position in upper right
const tickX = 450;
const tickY = 120;
const tickSize = 40;
// White circle background
ctx.fillStyle = '#FFFFFF';
ctx.beginPath();
ctx.arc(tickX, tickY, tickSize, 0, 2 * Math.PI);
ctx.fill();
// Blue circle
ctx.fillStyle = '#0A66C2'; // LinkedIn blue
ctx.beginPath();
ctx.arc(tickX, tickY, tickSize - 3, 0, 2 * Math.PI);
ctx.fill();
// White checkmark
ctx.strokeStyle = '#FFFFFF';
ctx.lineWidth = 6;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.beginPath();
ctx.moveTo(tickX - 15, tickY);
ctx.lineTo(tickX - 5, tickY + 10);
ctx.lineTo(tickX + 15, tickY - 10);
ctx.stroke();
}
}
function downloadBadge() {
try {
// Create a temporary canvas to ensure clean download
const tempCanvas = document.createElement('canvas');
tempCanvas.width = 600;
tempCanvas.height = 600;
const tempCtx = tempCanvas.getContext('2d');
// Copy the current canvas content
tempCtx.drawImage(canvas, 0, 0);
// Convert to blob and download
tempCanvas.toBlob(function(blob) {
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'digital-privacy-advocate-badge.png';
// Force download
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// Clean up
URL.revokeObjectURL(url);
}, 'image/png', 1.0);
} catch (error) {
// Fallback method
console.log('Trying fallback download method...');
const link = document.createElement('a');
link.download = 'digital-privacy-advocate-badge.png';
link.href = canvas.toDataURL('image/png', 1.0);
// Trigger download
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
// Event listeners
document.getElementById('textSize').addEventListener('input', drawBadge);
document.getElementById('addTick').addEventListener('change', drawBadge);
// Initialize
drawBadge();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment