signal-works/ice
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Update HTML files to use Bunny.net CDN for static assets

Browse source 
- Updated all static asset URLs to use iceymi.b-cdn.net CDN
- Changed favicon, CSS, and JS file references in index.html, admin.html, and privacy.html
- API calls remain pointed to origin server for dynamic content
- Ready for CDN deployment with proper cache separation
This commit is contained in:
Deco Vander 2025-07-03 20:44:16 -04:00
parent f73221e5cc
commit d9559f71fe
15 changed files with 770 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

55
public/admin.html
View file

@ -3,8 +3,10 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ICE Watch Admin</title>
<link rel="stylesheet" href="style.css">
<title>Great Lakes Ice Report Admin</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="https://iceymi.b-cdn.net/style.css">
<style>
.admin-container {
max-width: 1200px;
@ -13,10 +15,11 @@
}
.login-section {
background: white;
background: var(--card-bg);
color: var(--text-color);
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
box-shadow: 0 2px 4px var(--shadow);
max-width: 400px;
margin: 50px auto;
}
@ -29,26 +32,29 @@
width: 100%;
border-collapse: collapse;
margin-top: 20px;
background: white;
background: var(--card-bg);
color: var(--text-color);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
box-shadow: 0 2px 4px var(--shadow);
}
.locations-table th,
.locations-table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
border-bottom: 1px solid var(--border-color);
color: var(--text-color);
}
.locations-table th {
background-color: #f8f9fa;
background-color: var(--table-header-bg);
color: var(--text-color);
font-weight: bold;
}
.locations-table tr:hover {
background-color: #f5f5f5;
background-color: var(--table-hover);
}
.action-buttons {
@ -93,9 +99,11 @@
.edit-input {
width: 100%;
padding: 4px;
border: 1px solid #ddd;
border: 1px solid var(--input-border);
border-radius: 4px;
font-size: 12px;
background-color: var(--input-bg);
color: var(--text-color);
}
.status-indicator {
@ -141,6 +149,19 @@
transition: background-color 0.2s;
}
.theme-toggle-admin {
background: var(--card-bg) !important;
color: var(--text-color) !important;
border: 2px solid var(--border-color) !important;
width: 40px;
height: 40px;
border-radius: 50% !important;
display: flex;
align-items: center;
justify-content: center;
padding: 0 !important;
}
.header-btn:hover {
opacity: 0.9;
}
@ -165,10 +186,11 @@
}
.stat-card {
background: white;
background: var(--card-bg);
color: var(--text-color);
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
box-shadow: 0 2px 4px var(--shadow);
text-align: center;
}
@ -311,8 +333,11 @@
<!-- Admin Section -->
<div id="admin-section" class="admin-section">
<div class="admin-header">
<h1>🚨 ICE Watch Admin Panel</h1>
<h1>❄️ Great Lakes Ice Report Admin Panel</h1>
<div class="header-buttons">
<button id="theme-toggle" class="header-btn theme-toggle-admin" title="Toggle dark mode">
<span class="theme-icon">🌙</span>
</button>
<a href="/" class="header-btn btn-home">🏠 Homepage</a>
<button id="refresh-btn" class="header-btn btn-refresh">🔄 Refresh Data</button>
<button id="logout-btn" class="header-btn btn-logout">🚪 Logout</button>
@ -326,7 +351,7 @@
</div>
<div class="stat-card">
<div class="stat-number" id="active-count">0</div>
<div>Active (24hrs)</div>
<div>Active (48hrs)</div>
</div>
<div class="stat-card">
<div class="stat-number" id="expired-count">0</div>
@ -362,6 +387,6 @@
</div>
</div>
<script src="admin.js"></script>
<script src="https://iceymi.b-cdn.net/admin.js"></script>
</body>
</html>

90
public/admin.js
View file

@ -108,10 +108,10 @@ document.addEventListener('DOMContentLoaded', () => {
function updateStats() {
const now = new Date();
const twentyFourHoursAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000);
const fortyEightHoursAgo = new Date(now.getTime() - 48 * 60 * 60 * 1000);
const activeLocations = allLocations.filter(location =>
new Date(location.created_at) > twentyFourHoursAgo
new Date(location.created_at) > fortyEightHoursAgo
);
const persistentLocations = allLocations.filter(location => location.persistent);
@ -129,10 +129,10 @@ document.addEventListener('DOMContentLoaded', () => {
}
const now = new Date();
const twentyFourHoursAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000);
const fortyEightHoursAgo = new Date(now.getTime() - 48 * 60 * 60 * 1000);
locationsTableBody.innerHTML = allLocations.map(location => {
const isActive = new Date(location.created_at) > twentyFourHoursAgo;
const isActive = new Date(location.created_at) > fortyEightHoursAgo;
const createdDate = new Date(location.created_at);
const formattedDate = createdDate.toLocaleString();
@ -168,8 +168,8 @@ document.addEventListener('DOMContentLoaded', () => {
function renderEditRow(location) {
const row = document.querySelector(`tr[data-id="${location.id}"]`);
const now = new Date();
const twentyFourHoursAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000);
const isActive = new Date(location.created_at) > twentyFourHoursAgo;
const fortyEightHoursAgo = new Date(now.getTime() - 48 * 60 * 60 * 1000);
const isActive = new Date(location.created_at) > fortyEightHoursAgo;
const createdDate = new Date(location.created_at);
const formattedDate = createdDate.toLocaleString();
@ -285,8 +285,8 @@ document.addEventListener('DOMContentLoaded', () => {
const newPersistentStatus = !location.persistent;
const confirmMessage = newPersistentStatus
? 'Mark this report as persistent? It will not auto-expire after 24 hours.'
: 'Remove persistent status? This report will expire normally after 24 hours.';
? 'Mark this report as persistent? It will not auto-expire after 48 hours.'
: 'Remove persistent status? This report will expire normally after 48 hours.';
if (!confirm(confirmMessage)) {
return;
@ -353,4 +353,78 @@ document.addEventListener('DOMContentLoaded', () => {
return reportTime.toLocaleDateString();
}
// Initialize theme toggle
initializeTheme();
});
// 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;
}
}

74
public/app-mapbox.js
View file

@ -584,4 +584,78 @@ document.addEventListener('DOMContentLoaded', async () => {
clearInterval(updateInterval);
}
});
// Initialize theme toggle
initializeTheme();
});
// Theme toggle functionality
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;
}
}

40
public/favicon.svg Normal file
View file

@ -0,0 +1,40 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
<defs>
<style>
.snowflake { fill: #2196F3; }
.center { fill: #1976D2; }
</style>
</defs>
<!-- Main snowflake structure -->
<g class="snowflake">
<!-- Vertical line -->
<rect x="15" y="2" width="2" height="28" />
<!-- Horizontal line -->
<rect x="2" y="15" width="28" height="2" />
<!-- Diagonal lines -->
<rect x="15" y="2" width="2" height="28" transform="rotate(45 16 16)" />
<rect x="15" y="2" width="2" height="28" transform="rotate(-45 16 16)" />
<!-- Branch tips -->
<!-- Top -->
<polygon points="16,2 14,6 18,6" />
<!-- Bottom -->
<polygon points="16,30 14,26 18,26" />
<!-- Left -->
<polygon points="2,16 6,14 6,18" />
<!-- Right -->
<polygon points="30,16 26,14 26,18" />
<!-- Diagonal tips -->
<polygon points="6.3,6.3 8.6,4 9.9,7.7" transform="rotate(45 16 16)" />
<polygon points="25.7,25.7 23.4,28 22.1,24.3" transform="rotate(45 16 16)" />
<polygon points="6.3,25.7 8.6,28 9.9,24.3" transform="rotate(-45 16 16)" />
<polygon points="25.7,6.3 23.4,4 22.1,7.7" transform="rotate(-45 16 16)" />
</g>
<!-- Center circle -->
<circle cx="16" cy="16" r="3" class="center" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

29
public/index.html
View file

@ -3,20 +3,29 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ICE Watch Michigan</title>
<title>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="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://iceymi.b-cdn.net/style.css">
</head>
<body>
<div class="container">
<header>
<h1>🚨 ICE Watch Michigan</h1>
<p>Community-reported ICE activity locations (auto-expire after 24 hours)</p>
<div class="header-content">
<div class="header-text">
<h1>❄️ Great Lakes Ice Report</h1>
<p>Community-reported icy road conditions and winter hazards (auto-expire after 48 hours)</p>
</div>
<button id="theme-toggle" class="theme-toggle" title="Toggle dark mode">
<span class="theme-icon">🌙</span>
</button>
</div>
</header>
<div class="content">
<div class="form-section">
<h2>Report ICE Activity</h2>
<h2>Report Icy Conditions</h2>
<form id="location-form">
<div class="form-group">
<label for="address">Address or Location *</label>
@ -56,8 +65,8 @@ placeholder="Enter address, intersection (e.g., Main St & Second St, City), or l
<div id="map-view" class="view-container">
<div id="map"></div>
<div class="map-info">
<p><strong>🔴 Red markers:</strong> ICE activity reported</p>
<p><strong>⏰ Auto-cleanup:</strong> Reports disappear after 24 hours</p>
<p><strong>🔴 Red markers:</strong> Icy conditions reported</p>
<p><strong>⏰ Auto-cleanup:</strong> Reports disappear after 48 hours</p>
<p id="location-count">Loading locations...</p>
</div>
</div>
@ -90,15 +99,15 @@ placeholder="Enter address, intersection (e.g., Main St & Second St, City), or l
</div>
<footer>
<p><strong>Safety Notice:</strong> This is a community tool for awareness. Stay safe and know your rights.</p>
<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" style="color: #007bff; text-decoration: underline;">know your rights</a>.</p>
<div class="disclaimer">
<small>This website is for informational purposes only. Verify information independently.
Reports are automatically deleted after 24 hours.</small>
Reports are automatically deleted after 48 hours. • <a href="/privacy" style="color: #007bff; text-decoration: underline;">Privacy Policy</a></small>
</div>
</footer>
</div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="app-mapbox.js"></script>
<script src="https://iceymi.b-cdn.net/app-mapbox.js"></script>
</body>
</html>

252
public/privacy.html Normal file
View file

@ -0,0 +1,252 @@
<!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="https://iceymi.b-cdn.net/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;
}
.back-link {
display: inline-block;
margin-top: 30px;
padding: 10px 20px;
background-color: var(--button-bg);
color: white;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.2s ease;
}
.back-link:hover {
background-color: var(--button-hover);
}
.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);
}
</style>
</head>
<body>
<div class="privacy-container">
<div class="privacy-header">
<div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 20px;">
<div style="flex: 1; 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="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); flex-shrink: 0;">
<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>We may disclose information if required by law or to protect safety</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>
<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>

196
public/style.css
View file

@ -1,9 +1,94 @@
/* CSS Variables for theming */
:root {
--bg-color: #f4f4f9;
--text-color: #333;
--card-bg: white;
--border-color: #ddd;
--input-bg: white;
--input-border: #ddd;
--button-bg: #007bff;
--button-hover: #0056b3;
--header-bg: transparent;
--footer-border: #ddd;
--table-header-bg: #f8f9fa;
--table-hover: #f8f9fa;
--toggle-bg: #f8f9fa;
--toggle-border: #dee2e6;
--toggle-active-bg: #007bff;
--shadow: rgba(0,0,0,0.1);
}
/* Dark mode variables */
[data-theme="dark"] {
--bg-color: #1a1a1a;
--text-color: #e0e0e0;
--card-bg: #2d2d2d;
--border-color: #404040;
--input-bg: #333;
--input-border: #555;
--button-bg: #4a90e2;
--button-hover: #357abd;
--header-bg: transparent;
--footer-border: #404040;
--table-header-bg: #3a3a3a;
--table-hover: #3a3a3a;
--toggle-bg: #404040;
--toggle-border: #555;
--toggle-active-bg: #4a90e2;
--shadow: rgba(0,0,0,0.3);
}
/* Auto system theme detection */
@media (prefers-color-scheme: dark) {
:root[data-theme="auto"] {
--bg-color: #1a1a1a;
--text-color: #e0e0e0;
--card-bg: #2d2d2d;
--border-color: #404040;
--input-bg: #333;
--input-border: #555;
--button-bg: #4a90e2;
--button-hover: #357abd;
--header-bg: transparent;
--footer-border: #404040;
--table-header-bg: #3a3a3a;
--table-hover: #3a3a3a;
--toggle-bg: #404040;
--toggle-border: #555;
--toggle-active-bg: #4a90e2;
--shadow: rgba(0,0,0,0.3);
}
}
@media (prefers-color-scheme: light) {
:root[data-theme="auto"] {
--bg-color: #f4f4f9;
--text-color: #333;
--card-bg: white;
--border-color: #ddd;
--input-bg: white;
--input-border: #ddd;
--button-bg: #007bff;
--button-hover: #0056b3;
--header-bg: transparent;
--footer-border: #ddd;
--table-header-bg: #f8f9fa;
--table-hover: #f8f9fa;
--toggle-bg: #f8f9fa;
--toggle-border: #dee2e6;
--toggle-active-bg: #007bff;
--shadow: rgba(0,0,0,0.1);
}
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f9;
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s ease, color 0.3s ease;
}
.container {
@ -20,9 +105,10 @@ header {
.map-section, .form-section {
margin-bottom: 20px;
padding: 15px;
background-color: white;
background-color: var(--card-bg);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
box-shadow: 0 2px 4px var(--shadow);
transition: background-color 0.3s ease;
}
.map-section {
@ -46,8 +132,11 @@ input[type="text"], textarea {
width: calc(100% - 20px);
padding: 8px;
margin-top: 5px;
border: 1px solid #ddd;
border: 1px solid var(--input-border);
border-radius: 4px;
background-color: var(--input-bg);
color: var(--text-color);
transition: background-color 0.3s ease, border-color 0.3s ease;
}
.autocomplete-container {
@ -60,14 +149,15 @@ input[type="text"], textarea {
top: 100%;
left: 0;
right: 0;
background: white;
border: 1px solid #ddd;
background: var(--card-bg);
border: 1px solid var(--border-color);
border-top: none;
border-radius: 0 0 4px 4px;
max-height: 200px;
overflow-y: auto;
z-index: 1000;
display: none;
box-shadow: 0 4px 6px var(--shadow);
}
.autocomplete-item {
@ -78,7 +168,7 @@ input[type="text"], textarea {
.autocomplete-item:hover,
.autocomplete-item.selected {
background-color: #f8f9fa;
background-color: var(--table-hover);
}
.autocomplete-item:last-child {
@ -93,7 +183,7 @@ input[type="text"], textarea {
}
button[type="submit"] {
background-color: #007bff;
background-color: var(--button-bg);
color: white;
border: none;
padding: 10px 20px;
@ -103,7 +193,7 @@ button[type="submit"] {
}
button[type="submit"]:hover {
background-color: #0056b3;
background-color: var(--button-hover);
}
.message {
@ -123,12 +213,55 @@ button[type="submit"]:hover {
color: #721c24;
}
/* Header layout for theme toggle */
.header-content {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
}
.header-text {
flex: 1;
}
/* Theme toggle button */
.theme-toggle {
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);
flex-shrink: 0;
}
.theme-toggle:hover {
transform: scale(1.1);
box-shadow: 0 4px 8px var(--shadow);
}
.theme-icon {
font-size: 20px;
transition: transform 0.3s ease;
}
[data-theme="dark"] .theme-icon {
transform: rotate(180deg);
}
footer {
text-align: center;
padding: 30px 20px;
margin-top: 30px;
border-top: 1px solid #ddd;
border-top: 1px solid var(--footer-border);
clear: both;
transition: border-color 0.3s ease;
}
.disclaimer {
@ -150,9 +283,9 @@ footer {
}
.toggle-btn {
background-color: #f8f9fa;
border: 2px solid #dee2e6;
color: #495057;
background-color: var(--toggle-bg);
border: 2px solid var(--toggle-border);
color: var(--text-color);
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
@ -162,19 +295,17 @@ footer {
}
.toggle-btn:hover {
background-color: #e9ecef;
border-color: #adb5bd;
opacity: 0.8;
}
.toggle-btn.active {
background-color: #007bff;
border-color: #007bff;
background-color: var(--toggle-active-bg);
border-color: var(--toggle-active-bg);
color: white;
}
.toggle-btn.active:hover {
background-color: #0056b3;
border-color: #0056b3;
opacity: 0.9;
}
/* View containers */
@ -192,17 +323,18 @@ footer {
.reports-table {
width: 100%;
border-collapse: collapse;
background: white;
background: var(--card-bg);
font-size: 14px;
transition: background-color 0.3s ease;
}
.reports-table th {
background-color: #f8f9fa;
color: #495057;
background-color: var(--table-header-bg);
color: var(--text-color);
font-weight: 600;
padding: 12px;
text-align: left;
border-bottom: 2px solid #dee2e6;
border-bottom: 2px solid var(--border-color);
position: sticky;
top: 0;
z-index: 10;
@ -210,12 +342,12 @@ footer {
.reports-table td {
padding: 12px;
border-bottom: 1px solid #dee2e6;
border-bottom: 1px solid var(--border-color);
vertical-align: top;
}
.reports-table tr:hover {
background-color: #f8f9fa;
background-color: var(--table-hover);
}
.reports-table tr:last-child td {
@ -286,6 +418,20 @@ footer {
padding: 10px;
}
.header-content {
flex-direction: column;
align-items: center;
gap: 15px;
}
.header-text {
text-align: center;
}
.theme-toggle {
align-self: center;
}
header h1 {
font-size: 1.5em;
}