- Remove conflicting .back-link CSS rule that used undefined variables - Consolidate all back-link styling into single comprehensive rule - Add all necessary properties with !important to override conflicts - Include display, margin, padding, border-radius for proper button appearance - Ensure white text color on blue background for proper contrast - Add font-weight and transition for better visual presentation
287 lines
14 KiB
HTML
287 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Privacy Policy - Great Lakes Ice Report</title>
|
|
<link rel="icon" type="image/svg+xml" href="https://iceymi.b-cdn.net/favicon.svg">
|
|
<link rel="icon" type="image/x-icon" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIj4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLnNub3dmbGFrZSB7IGZpbGw6ICMyMTk2RjM7IH0KICAgICAgLmNlbnRlciB7IGZpbGw6ICMxOTc2RDI7IH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIAogIDxnIGNsYXNzPSJzbm93Zmxha2UiPgogICAgPHJlY3QgeD0iMTUiIHk9IjIiIHdpZHRoPSIyIiBoZWlnaHQ9IjI4IiAvPgogICAgPHJlY3QgeD0iMiIgeT0iMTUiIHdpZHRoPSIyOCIgaGVpZ2h0PSIyIiAvPgogICAgPHJlY3QgeD0iMTUiIHk9IjIiIHdpZHRoPSIyIiBoZWlnaHQ9IjI4IiB0cmFuc2Zvcm09InJvdGF0ZSg0NSAxNiAxNikiIC8+CiAgICA8cmVjdCB4PSIxNSIgeT0iMiIgd2lkdGg9IjIiIGhlaWdodD0iMjgiIHRyYW5zZm9ybT0icm90YXRlKC00NSAxNiAxNikiIC8+CiAgICA8cG9seWdvbiBwb2ludHM9IjE2LDIgMTQsNiAxOCw2IiAvPgogICAgPHBvbHlnb24gcG9pbnRzPSIxNiwzMCAxNCwyNiAxOCwyNiIgLz4KICAgIDxwb2x5Z29uIHBvaW50cz0iMiwxNiA2LDE0IDYsMTgiIC8+CiAgICA8cG9seWdvbiBwb2ludHM9IjMwLDE2IDI2LDE0IDI2LDE4IiAvPgogICAgPHBvbHlnb24gcG9pbnRzPSI2LjMsNi4zIDguNiw0IDkuOSw3LjciIHRyYW5zZm9ybT0icm90YXRlKDQ1IDE2IDE2KSIgLz4KICAgIDxwb2x5Z29uIHBvaW50cz0iMjUuNywyNS43IDIzLjQsMjggMjIuMSwyNC4zIiB0cmFuc2Zvcm09InJvdGF0ZSg0NSAxNiAxNikiIC8+CiAgICA8cG9seWdvbiBwb2ludHM9IjYuMywyNS43IDguNiwyOCA5LjksMjQuMyIgdHJhbnNmb3JtPSJyb3RhdGUoLTQ1IDE2IDE2KSIgLz4KICAgIDxwb2x5Z29uIHBvaW50cz0iMjUuNyw2LjMgMjMuNCw0IDIyLjEsNy43IiB0cmFuc2Zvcm09InJvdGF0ZSgtNDUgMTYgMTYpIiAvPgogIDwvZz4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIzIiBjbGFzcz0iY2VudGVyIiAvPgo8L3N2Zz4K">
|
|
<link rel="stylesheet" href="style.css">
|
|
<style>
|
|
.privacy-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.privacy-header {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.privacy-content {
|
|
background: var(--card-bg);
|
|
padding: 30px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px var(--shadow);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.privacy-content h2 {
|
|
color: var(--text-color);
|
|
margin-top: 30px;
|
|
margin-bottom: 15px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.privacy-content h2:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.privacy-content ul {
|
|
margin: 15px 0;
|
|
padding-left: 30px;
|
|
}
|
|
|
|
.privacy-content li {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
|
|
.effective-date {
|
|
color: #666;
|
|
font-size: 0.9em;
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.contact-info {
|
|
background: var(--toggle-bg);
|
|
padding: 20px;
|
|
border-radius: 6px;
|
|
margin-top: 20px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
/* Fix link visibility and styling */
|
|
.privacy-content a {
|
|
color: var(--link-color) !important;
|
|
text-decoration: underline !important;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.privacy-content a:hover {
|
|
color: var(--link-hover) !important;
|
|
text-decoration: underline !important;
|
|
}
|
|
|
|
.contact-info a {
|
|
color: var(--link-color) !important;
|
|
text-decoration: underline !important;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.contact-info a:hover {
|
|
color: var(--link-hover) !important;
|
|
}
|
|
|
|
.back-link {
|
|
display: inline-block !important;
|
|
margin-top: 30px !important;
|
|
padding: 10px 20px !important;
|
|
color: white !important;
|
|
background-color: var(--primary-color, #2196F3) !important;
|
|
border: none !important;
|
|
border-radius: 4px !important;
|
|
text-decoration: none !important;
|
|
transition: background-color 0.2s ease !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
|
|
.back-link:hover {
|
|
background-color: var(--primary-hover, #1976D2) !important;
|
|
color: white !important;
|
|
text-decoration: none !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="privacy-container">
|
|
<div class="privacy-header">
|
|
<div style="position: relative; margin-bottom: 20px;">
|
|
<div style="text-align: center;">
|
|
<h1>❄️ Privacy Policy</h1>
|
|
<p>Great Lakes Ice Report</p>
|
|
</div>
|
|
<button id="theme-toggle" class="theme-toggle" title="Toggle theme mode" style="position: absolute; top: 0; right: 0; background: var(--card-bg); border: 2px solid var(--border-color); border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 4px var(--shadow);">
|
|
<span class="theme-icon" style="font-size: 20px;">🌙</span>
|
|
</button>
|
|
</div>
|
|
<div class="effective-date">Effective Date: January 2025</div>
|
|
</div>
|
|
|
|
<div class="privacy-content">
|
|
<h2>Our Commitment to Privacy</h2>
|
|
<p>Great Lakes Ice Report is a community safety tool designed to help residents share winter road conditions. We believe in transparency and minimal data collection.</p>
|
|
|
|
<h2>Information We Collect</h2>
|
|
<ul>
|
|
<li><strong>Location Reports:</strong> Address/location descriptions and coordinates you submit</li>
|
|
<li><strong>Optional Details:</strong> Any additional description you provide with reports</li>
|
|
<li><strong>Technical Data:</strong> IP address (for preventing abuse), browser type, and basic usage statistics</li>
|
|
<li><strong>Theme Preference:</strong> Your dark/light mode choice (stored locally on your device)</li>
|
|
</ul>
|
|
|
|
<h2>How We Use Your Information</h2>
|
|
<ul>
|
|
<li><strong>Display Reports:</strong> Show icy conditions on the public map for community awareness</li>
|
|
<li><strong>Auto-Cleanup:</strong> Reports automatically delete after 48 hours</li>
|
|
<li><strong>Prevent Abuse:</strong> Rate limiting and basic spam protection</li>
|
|
<li><strong>Service Improvement:</strong> Understanding usage patterns to improve the tool</li>
|
|
</ul>
|
|
|
|
<h2>Information Sharing</h2>
|
|
<p><strong>We do not sell, rent, or share your personal information with third parties.</strong></p>
|
|
<ul>
|
|
<li>Location reports are displayed publicly on the map (this is the service's purpose)</li>
|
|
<li>This service is operated from servers located outside the United States and may be subject to different legal requirements and jurisdictions</li>
|
|
<li>Anonymous usage statistics may be shared to improve community safety tools</li>
|
|
</ul>
|
|
|
|
<h2>Data Retention</h2>
|
|
<ul>
|
|
<li><strong>Reports:</strong> Automatically deleted after 48 hours (unless marked persistent by admin)</li>
|
|
<li><strong>Technical Logs:</strong> Retained for up to 30 days for security purposes</li>
|
|
<li><strong>Theme Preferences:</strong> Stored locally on your device only</li>
|
|
</ul>
|
|
|
|
<h2>Your Rights</h2>
|
|
<ul>
|
|
<li><strong>Anonymous Use:</strong> No account required - you can use the service anonymously</li>
|
|
<li><strong>Voluntary Participation:</strong> All report submissions are voluntary</li>
|
|
<li><strong>Contact Us:</strong> Questions about your data or this policy (see contact info below)</li>
|
|
</ul>
|
|
|
|
<h2>Security</h2>
|
|
<p>We implement reasonable security measures including:</p>
|
|
<ul>
|
|
<li>HTTPS encryption for all communications</li>
|
|
<li>Rate limiting to prevent abuse</li>
|
|
<li>Regular security updates and monitoring</li>
|
|
<li>Minimal data collection principle</li>
|
|
</ul>
|
|
|
|
<h2>Third-Party Services</h2>
|
|
<p>We use the following external services:</p>
|
|
<ul>
|
|
<li><strong>MapBox API:</strong> For fast address geocoding (see <a href="https://www.mapbox.com/legal/privacy" target="_blank">MapBox Privacy Policy</a>)</li>
|
|
<li><strong>OpenStreetMap:</strong> For map tiles and fallback geocoding</li>
|
|
<li><strong>Nominatim:</strong> Backup geocoding service</li>
|
|
</ul>
|
|
|
|
<h2>Changes to This Policy</h2>
|
|
<p>We may update this privacy policy occasionally. Significant changes will be indicated by updating the effective date above. Continued use of the service constitutes acceptance of any changes.</p>
|
|
|
|
<h2>Community Safety Focus</h2>
|
|
<p>This tool exists to help community members stay safe during winter conditions. We encourage responsible use and respect for everyone's safety and privacy.</p>
|
|
|
|
<div class="contact-info">
|
|
<h2>Contact Information</h2>
|
|
<p>Questions about this privacy policy or your data?</p>
|
|
<ul>
|
|
<li>Create an issue on our <a href="https://github.com/deco/great-lakes-ice-report" target="_blank">GitHub repository</a></li>
|
|
<li>Review our <a href="https://www.aclu.org/know-your-rights/immigrants-rights" target="_blank">recommended rights resources</a></li>
|
|
<li>This is a community tool - please use responsibly</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<a href="/" class="back-link">← Back to Great Lakes Ice Report</a>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<p><strong>Safety Notice:</strong> This is a community tool for awareness. Stay safe and <a href="https://www.aclu.org/know-your-rights/immigrants-rights" target="_blank" rel="noopener noreferrer">know your rights</a>.</p>
|
|
<div class="disclaimer">
|
|
<small>This website is for informational purposes only. Verify information independently.
|
|
Reports are automatically deleted after 48 hours. • <a href="/privacy">Privacy Policy</a></small>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Theme toggle functionality (shared with main page)
|
|
function initializeTheme() {
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
const themeIcon = document.querySelector('.theme-icon');
|
|
|
|
if (!themeToggle || !themeIcon) {
|
|
console.warn('Theme toggle elements not found');
|
|
return;
|
|
}
|
|
|
|
// Check for saved theme preference or default to auto (follows system)
|
|
const savedTheme = localStorage.getItem('theme') || 'auto';
|
|
applyTheme(savedTheme);
|
|
|
|
// Update icon based on current theme
|
|
updateThemeIcon(savedTheme, themeIcon);
|
|
|
|
// Add click listener for cycling through themes
|
|
themeToggle.addEventListener('click', () => {
|
|
const currentTheme = localStorage.getItem('theme') || 'auto';
|
|
let newTheme;
|
|
|
|
// Cycle: auto → light → dark → auto
|
|
switch(currentTheme) {
|
|
case 'auto':
|
|
newTheme = 'light';
|
|
break;
|
|
case 'light':
|
|
newTheme = 'dark';
|
|
break;
|
|
case 'dark':
|
|
newTheme = 'auto';
|
|
break;
|
|
default:
|
|
newTheme = 'auto';
|
|
}
|
|
|
|
localStorage.setItem('theme', newTheme);
|
|
applyTheme(newTheme);
|
|
updateThemeIcon(newTheme, themeIcon);
|
|
|
|
console.log(`Theme switched to: ${newTheme}`);
|
|
});
|
|
|
|
// Listen for system theme changes when in auto mode
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
|
const currentTheme = localStorage.getItem('theme') || 'auto';
|
|
if (currentTheme === 'auto') {
|
|
applyTheme('auto');
|
|
}
|
|
});
|
|
}
|
|
|
|
function applyTheme(theme) {
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
}
|
|
|
|
function updateThemeIcon(theme, iconElement) {
|
|
switch(theme) {
|
|
case 'auto':
|
|
iconElement.textContent = '🌍'; // Globe (auto)
|
|
break;
|
|
case 'light':
|
|
iconElement.textContent = '☀️'; // Sun (light)
|
|
break;
|
|
case 'dark':
|
|
iconElement.textContent = '🌙'; // Moon (dark)
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Initialize theme when page loads
|
|
document.addEventListener('DOMContentLoaded', initializeTheme);
|
|
</script>
|
|
</body>
|
|
</html>
|