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

2
.env.example
View file

@ -1,4 +1,4 @@
# ICE Watch Environment Variables # Great Lakes Ice Report Environment Variables
# Copy this file to .env and fill in your actual values # Copy this file to .env and fill in your actual values
# MapBox API Configuration (Required for fast geocoding) # MapBox API Configuration (Required for fast geocoding)

18
README.md
View file

@ -1,6 +1,6 @@
# ICE Watch Michigan # Great Lakes Ice Report
A community-driven web application for tracking ICE activity locations in Michigan. Reports automatically expire after 24 hours to maintain current information. A community-driven web application for tracking winter road conditions and icy hazards in the Great Lakes region. Reports automatically expire after 48 hours to maintain current information.
## Features ## Features
@ -21,8 +21,8 @@ A community-driven web application for tracking ICE activity locations in Michig
1. **Clone the repository:** 1. **Clone the repository:**
```bash ```bash
git clone git@github.com:deco/ice.git git clone git@github.com:deco/great-lakes-ice-report.git
cd icewatch cd great-lakes-ice-report
``` ```
2. **Install dependencies:** 2. **Install dependencies:**
@ -65,13 +65,13 @@ PORT=3000
1. **Run the deployment script on your server:** 1. **Run the deployment script on your server:**
```bash ```bash
curl -sSL https://ice-puremichigan-lol.s3.amazonaws.com/scripts/deploy.sh | bash curl -sSL https://ice.puremichigan.lol/scripts/deploy.sh | bash
``` ```
2. **Deploy your application:** 2. **Deploy your application:**
```bash ```bash
git clone git@github.com:deco/ice.git /opt/icewatch git clone git@github.com:deco/great-lakes-ice-report.git /opt/great-lakes-ice-report
cd /opt/icewatch cd /opt/great-lakes-ice-report
npm install npm install
``` ```
@ -83,8 +83,8 @@ PORT=3000
4. **Start services:** 4. **Start services:**
```bash ```bash
sudo systemctl enable icewatch sudo systemctl enable great-lakes-ice-report
sudo systemctl start icewatch sudo systemctl start great-lakes-ice-report
sudo systemctl enable caddy sudo systemctl enable caddy
sudo systemctl start caddy sudo systemctl start caddy
``` ```

10
package.json
View file

@ -1,7 +1,7 @@
{ {
"name": "icewatch", "name": "great-lakes-ice-report",
"version": "1.0.0", "version": "1.0.0",
"description": "ICE location tracking website for Michigan", "description": "Great Lakes Ice Report - Community-driven winter road conditions tracker for Michigan",
"main": "server.js", "main": "server.js",
"scripts": { "scripts": {
"start": "node server.js", "start": "node server.js",
@ -19,8 +19,12 @@
}, },
"keywords": [ "keywords": [
"ice", "ice",
"tracking", "winter",
"road conditions",
"michigan", "michigan",
"great lakes",
"weather",
"tracking",
"map" "map"
], ],
"author": "Your Name", "author": "Your Name",

55
public/admin.html
View file

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

90
public/admin.js
View file

@ -108,10 +108,10 @@ document.addEventListener('DOMContentLoaded', () => {
function updateStats() { function updateStats() {
const now = new Date(); 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 => const activeLocations = allLocations.filter(location =>
new Date(location.created_at) > twentyFourHoursAgo new Date(location.created_at) > fortyEightHoursAgo
); );
const persistentLocations = allLocations.filter(location => location.persistent); const persistentLocations = allLocations.filter(location => location.persistent);
@ -129,10 +129,10 @@ document.addEventListener('DOMContentLoaded', () => {
} }
const now = new Date(); 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 => { 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 createdDate = new Date(location.created_at);
const formattedDate = createdDate.toLocaleString(); const formattedDate = createdDate.toLocaleString();
@ -168,8 +168,8 @@ document.addEventListener('DOMContentLoaded', () => {
function renderEditRow(location) { function renderEditRow(location) {
const row = document.querySelector(`tr[data-id="${location.id}"]`); const row = document.querySelector(`tr[data-id="${location.id}"]`);
const now = new Date(); 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 isActive = new Date(location.created_at) > twentyFourHoursAgo; const isActive = new Date(location.created_at) > fortyEightHoursAgo;
const createdDate = new Date(location.created_at); const createdDate = new Date(location.created_at);
const formattedDate = createdDate.toLocaleString(); const formattedDate = createdDate.toLocaleString();
@ -285,8 +285,8 @@ document.addEventListener('DOMContentLoaded', () => {
const newPersistentStatus = !location.persistent; const newPersistentStatus = !location.persistent;
const confirmMessage = newPersistentStatus const confirmMessage = newPersistentStatus
? 'Mark this report as persistent? It will not auto-expire 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 24 hours.'; : 'Remove persistent status? This report will expire normally after 48 hours.';
if (!confirm(confirmMessage)) { if (!confirm(confirmMessage)) {
return; return;
@ -353,4 +353,78 @@ document.addEventListener('DOMContentLoaded', () => {
return reportTime.toLocaleDateString(); 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); 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> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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="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> </head>
<body> <body>
<div class="container"> <div class="container">
<header> <header>
<h1>🚨 ICE Watch Michigan</h1> <div class="header-content">
<p>Community-reported ICE activity locations (auto-expire after 24 hours)</p> <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> </header>
<div class="content"> <div class="content">
<div class="form-section"> <div class="form-section">
<h2>Report ICE Activity</h2> <h2>Report Icy Conditions</h2>
<form id="location-form"> <form id="location-form">
<div class="form-group"> <div class="form-group">
<label for="address">Address or Location *</label> <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-view" class="view-container">
<div id="map"></div> <div id="map"></div>
<div class="map-info"> <div class="map-info">
<p><strong>🔴 Red markers:</strong> ICE activity reported</p> <p><strong>🔴 Red markers:</strong> Icy conditions reported</p>
<p><strong>⏰ Auto-cleanup:</strong> Reports disappear after 24 hours</p> <p><strong>⏰ Auto-cleanup:</strong> Reports disappear after 48 hours</p>
<p id="location-count">Loading locations...</p> <p id="location-count">Loading locations...</p>
</div> </div>
</div> </div>
@ -90,15 +99,15 @@ placeholder="Enter address, intersection (e.g., Main St & Second St, City), or l
</div> </div>
<footer> <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"> <div class="disclaimer">
<small>This website is for informational purposes only. Verify information independently. <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> </div>
</footer> </footer>
</div> </div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> <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> </body>
</html> </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 { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
line-height: 1.6; line-height: 1.6;
margin: 0; margin: 0;
padding: 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 { .container {
@ -20,9 +105,10 @@ header {
.map-section, .form-section { .map-section, .form-section {
margin-bottom: 20px; margin-bottom: 20px;
padding: 15px; padding: 15px;
background-color: white; background-color: var(--card-bg);
border-radius: 8px; 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 { .map-section {
@ -46,8 +132,11 @@ input[type="text"], textarea {
width: calc(100% - 20px); width: calc(100% - 20px);
padding: 8px; padding: 8px;
margin-top: 5px; margin-top: 5px;
border: 1px solid #ddd; border: 1px solid var(--input-border);
border-radius: 4px; 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 { .autocomplete-container {
@ -60,14 +149,15 @@ input[type="text"], textarea {
top: 100%; top: 100%;
left: 0; left: 0;
right: 0; right: 0;
background: white; background: var(--card-bg);
border: 1px solid #ddd; border: 1px solid var(--border-color);
border-top: none; border-top: none;
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
max-height: 200px; max-height: 200px;
overflow-y: auto; overflow-y: auto;
z-index: 1000; z-index: 1000;
display: none; display: none;
box-shadow: 0 4px 6px var(--shadow);
} }
.autocomplete-item { .autocomplete-item {
@ -78,7 +168,7 @@ input[type="text"], textarea {
.autocomplete-item:hover, .autocomplete-item:hover,
.autocomplete-item.selected { .autocomplete-item.selected {
background-color: #f8f9fa; background-color: var(--table-hover);
} }
.autocomplete-item:last-child { .autocomplete-item:last-child {
@ -93,7 +183,7 @@ input[type="text"], textarea {
} }
button[type="submit"] { button[type="submit"] {
background-color: #007bff; background-color: var(--button-bg);
color: white; color: white;
border: none; border: none;
padding: 10px 20px; padding: 10px 20px;
@ -103,7 +193,7 @@ button[type="submit"] {
} }
button[type="submit"]:hover { button[type="submit"]:hover {
background-color: #0056b3; background-color: var(--button-hover);
} }
.message { .message {
@ -123,12 +213,55 @@ button[type="submit"]:hover {
color: #721c24; 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 { footer {
text-align: center; text-align: center;
padding: 30px 20px; padding: 30px 20px;
margin-top: 30px; margin-top: 30px;
border-top: 1px solid #ddd; border-top: 1px solid var(--footer-border);
clear: both; clear: both;
transition: border-color 0.3s ease;
} }
.disclaimer { .disclaimer {
@ -150,9 +283,9 @@ footer {
} }
.toggle-btn { .toggle-btn {
background-color: #f8f9fa; background-color: var(--toggle-bg);
border: 2px solid #dee2e6; border: 2px solid var(--toggle-border);
color: #495057; color: var(--text-color);
padding: 8px 16px; padding: 8px 16px;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
@ -162,19 +295,17 @@ footer {
} }
.toggle-btn:hover { .toggle-btn:hover {
background-color: #e9ecef; opacity: 0.8;
border-color: #adb5bd;
} }
.toggle-btn.active { .toggle-btn.active {
background-color: #007bff; background-color: var(--toggle-active-bg);
border-color: #007bff; border-color: var(--toggle-active-bg);
color: white; color: white;
} }
.toggle-btn.active:hover { .toggle-btn.active:hover {
background-color: #0056b3; opacity: 0.9;
border-color: #0056b3;
} }
/* View containers */ /* View containers */
@ -192,17 +323,18 @@ footer {
.reports-table { .reports-table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
background: white; background: var(--card-bg);
font-size: 14px; font-size: 14px;
transition: background-color 0.3s ease;
} }
.reports-table th { .reports-table th {
background-color: #f8f9fa; background-color: var(--table-header-bg);
color: #495057; color: var(--text-color);
font-weight: 600; font-weight: 600;
padding: 12px; padding: 12px;
text-align: left; text-align: left;
border-bottom: 2px solid #dee2e6; border-bottom: 2px solid var(--border-color);
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 10; z-index: 10;
@ -210,12 +342,12 @@ footer {
.reports-table td { .reports-table td {
padding: 12px; padding: 12px;
border-bottom: 1px solid #dee2e6; border-bottom: 1px solid var(--border-color);
vertical-align: top; vertical-align: top;
} }
.reports-table tr:hover { .reports-table tr:hover {
background-color: #f8f9fa; background-color: var(--table-hover);
} }
.reports-table tr:last-child td { .reports-table tr:last-child td {
@ -286,6 +418,20 @@ footer {
padding: 10px; padding: 10px;
} }
.header-content {
flex-direction: column;
align-items: center;
gap: 15px;
}
.header-text {
text-align: center;
}
.theme-toggle {
align-self: center;
}
header h1 { header h1 {
font-size: 1.5em; font-size: 1.5em;
} }

8
s3-bucket-policy.json
View file

@ -3,10 +3,10 @@
"Statement": [ "Statement": [
{ {
"Sid": "PublicReadGetObject", "Sid": "PublicReadGetObject",
"Effect": "Allow", "Principal": "*",
"Principal": "*", "Effect": "Allow",
"Action": "s3:GetObject", "Action": "s3:GetObject",
"Resource": "arn:aws:s3:::ice-puremichigan-lol/scripts/*" "Resource": "arn:aws:s3:::greatlakes-conditions/*",
} }
] ]
} }

24
scripts/Caddyfile
View file

@ -1,5 +1,5 @@
# ICE Watch Caddy Configuration # Great Lakes Ice Report Caddy Configuration
# Replace yourdomain.com with your actual domain # Using subdomain on existing puremichigan.lol domain
# #
# This configuration automatically: # This configuration automatically:
# - Obtains SSL certificates from Let's Encrypt # - Obtains SSL certificates from Let's Encrypt
@ -7,7 +7,7 @@
# - Serves on ports 80 and 443 # - Serves on ports 80 and 443
# Main site configuration # Main site configuration
yourdomain.com { ice.puremichigan.lol {
# Automatic HTTPS (default behavior) # Automatic HTTPS (default behavior)
# Caddy automatically: # Caddy automatically:
# - Listens on :80 and :443 # - Listens on :80 and :443
@ -22,7 +22,7 @@ yourdomain.com {
health_timeout 5s health_timeout 5s
} }
# Security headers for ICE Watch # Security headers for Great Lakes Ice Report
header { header {
# Enable HSTS (force HTTPS for 1 year) # Enable HSTS (force HTTPS for 1 year)
Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
@ -43,7 +43,7 @@ yourdomain.com {
# Logging for monitoring # Logging for monitoring
log { log {
output file /var/log/caddy/icewatch.log { output file /var/log/caddy/great-lakes-ice-report.log {
roll_size 100MB roll_size 100MB
roll_keep 5 roll_keep 5
} }
@ -71,17 +71,17 @@ yourdomain.com {
} }
} }
# Redirect www to non-www (with HTTPS) # Redirect www subdomain (if someone tries it)
www.yourdomain.com { www.ice.puremichigan.lol {
redir https://yourdomain.com{uri} permanent redir https://ice.puremichigan.lol{uri} permanent
} }
# HTTP redirect (explicit, though Caddy does this automatically) # HTTP redirect (explicit, though Caddy does this automatically)
# This is just for clarity # This is just for clarity
http://yourdomain.com { http://ice.puremichigan.lol {
redir https://yourdomain.com{uri} permanent redir https://ice.puremichigan.lol{uri} permanent
} }
http://www.yourdomain.com { http://www.ice.puremichigan.lol {
redir https://yourdomain.com{uri} permanent redir https://ice.puremichigan.lol{uri} permanent
} }

38
scripts/deploy.sh
View file

@ -1,11 +1,11 @@
#!/bin/bash #!/bin/bash
# ICE Watch Deployment Script for Debian 12 ARM64 # Great Lakes Ice Report Deployment Script for Debian 12 ARM64
# Run this script on your server: drone@91.99.139.235 # Run this script on your server: drone@91.99.139.235
set -e set -e
echo "🚀 Starting ICE Watch deployment..." echo "🚀 Starting Great Lakes Ice Report deployment..."
# Update system # Update system
echo "📦 Updating system packages..." echo "📦 Updating system packages..."
@ -77,23 +77,23 @@ echo "✅ Caddy with rate limiting plugin installed successfully!"
# Create app directory # Create app directory
echo "📁 Setting up app directory..." echo "📁 Setting up app directory..."
sudo mkdir -p /opt/icewatch sudo mkdir -p /opt/great-lakes-ice-report
sudo chown $USER:$USER /opt/icewatch sudo chown $USER:$USER /opt/great-lakes-ice-report
# Navigate to app directory # Navigate to app directory
cd /opt/icewatch cd /opt/great-lakes-ice-report
# Create icewatch user for security # Create great-lakes-ice-report user for security
echo "👤 Creating icewatch user..." echo "👤 Creating great-lakes-ice-report user..."
sudo useradd --system --shell /bin/false --home /opt/icewatch --create-home icewatch sudo useradd --system --shell /bin/false --home /opt/great-lakes-ice-report --create-home great-lakes-ice-report
# Download additional configuration files from S3 # Download additional configuration files from S3
echo "📥 Downloading configuration files..." echo "📥 Downloading configuration files..."
S3_BASE_URL="https://ice-puremichigan-lol.s3.amazonaws.com/scripts" S3_BASE_URL="https://greatlakes-conditions.s3.amazonaws.com/scripts"
# Download systemd service file # Download systemd service file
echo "📥 Downloading systemd service..." echo "📥 Downloading systemd service..."
curl -sSL "$S3_BASE_URL/icewatch.service" | sudo tee /etc/systemd/system/icewatch.service > /dev/null curl -sSL "$S3_BASE_URL/great-lakes-ice-report.service" | sudo tee /etc/systemd/system/great-lakes-ice-report.service > /dev/null
# Download Caddyfile template # Download Caddyfile template
echo "📥 Downloading Caddy configuration..." echo "📥 Downloading Caddy configuration..."
@ -101,13 +101,13 @@ curl -sSL "$S3_BASE_URL/Caddyfile" | sudo tee /etc/caddy/Caddyfile.template > /d
echo "✅ Server setup complete!" echo "✅ Server setup complete!"
echo "" echo ""
echo "🚀 Next steps to deploy ICE Watch:" echo "🚀 Next steps to deploy Great Lakes Ice Report:"
echo "" echo ""
echo "1. Clone your repository:" echo "1. Clone your repository:"
echo " git clone git@github.com:deco/ice.git /opt/icewatch" echo " git clone git@github.com:deco/great-lakes-ice-report.git /opt/great-lakes-ice-report"
echo "" echo ""
echo "2. Set up the application:" echo "2. Set up the application:"
echo " cd /opt/icewatch" echo " cd /opt/great-lakes-ice-report"
echo " npm install" echo " npm install"
echo " cp .env.example .env" echo " cp .env.example .env"
echo " nano .env # Add your MapBox token and admin password" echo " nano .env # Add your MapBox token and admin password"
@ -118,16 +118,16 @@ echo " # Replace 'yourdomain.com' with your actual domain"
echo " sudo mv /etc/caddy/Caddyfile.template /etc/caddy/Caddyfile" echo " sudo mv /etc/caddy/Caddyfile.template /etc/caddy/Caddyfile"
echo "" echo ""
echo "4. Set permissions:" echo "4. Set permissions:"
echo " sudo chown -R icewatch:icewatch /opt/icewatch" echo " sudo chown -R great-lakes-ice-report:great-lakes-ice-report /opt/great-lakes-ice-report"
echo " sudo chmod 660 /opt/icewatch/.env" echo " sudo chmod 660 /opt/great-lakes-ice-report/.env"
echo "" echo ""
echo "5. Start services:" echo "5. Start services:"
echo " sudo systemctl daemon-reload" echo " sudo systemctl daemon-reload"
echo " sudo systemctl enable icewatch caddy" echo " sudo systemctl enable great-lakes-ice-report caddy"
echo " sudo systemctl start icewatch caddy" echo " sudo systemctl start great-lakes-ice-report caddy"
echo "" echo ""
echo "6. Check status:" echo "6. Check status:"
echo " sudo systemctl status icewatch" echo " sudo systemctl status great-lakes-ice-report"
echo " sudo systemctl status caddy" echo " sudo systemctl status caddy"
echo "" echo ""
echo "🌐 Your ICE Watch app will be available at: https://yourdomain.com" echo "🌐 Your Great Lakes Ice Report app will be available at: https://ice.puremichigan.lol"

24
scripts/great-lakes-ice-report.service Normal file
View file

@ -0,0 +1,24 @@
[Unit]
Description=Great Lakes Ice Report - Community Winter Conditions Tool
After=network.target
Wants=network.target
[Service]
Type=simple
User=great-lakes-ice-report
Group=great-lakes-ice-report
WorkingDirectory=/opt/great-lakes-ice-report
ExecStart=/usr/bin/node server.js
Restart=always
RestartSec=5
Environment=NODE_ENV=production
# Security settings
NoNewPrivileges=true
PrivateTmp=true
ProtectSystem=strict
ProtectHome=true
ReadWritePaths=/opt/great-lakes-ice-report
[Install]
WantedBy=multi-user.target

26
server.js
View file

@ -47,11 +47,11 @@ db.serialize(() => {
}); });
}); });
// Clean up expired locations (older than 24 hours, but not persistent ones) // Clean up expired locations (older than 48 hours, but not persistent ones)
const cleanupExpiredLocations = () => { const cleanupExpiredLocations = () => {
console.log('Running cleanup of expired locations'); console.log('Running cleanup of expired locations');
const twentyFourHoursAgo = new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(); const fortyEightHoursAgo = new Date(Date.now() - 48 * 60 * 60 * 1000).toISOString();
db.run('DELETE FROM locations WHERE created_at < ? AND persistent = 0', [twentyFourHoursAgo], function(err) { db.run('DELETE FROM locations WHERE created_at < ? AND persistent = 0', [fortyEightHoursAgo], function(err) {
if (err) { if (err) {
console.error('Error cleaning up expired locations:', err); console.error('Error cleaning up expired locations:', err);
} else { } else {
@ -113,14 +113,14 @@ app.post('/api/admin/login', (req, res) => {
} }
}); });
// Get all active locations (within 24 hours) // Get all active locations (within 48 hours)
app.get('/api/locations', (req, res) => { app.get('/api/locations', (req, res) => {
console.log('Fetching active locations'); console.log('Fetching active locations');
const twentyFourHoursAgo = new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(); const fortyEightHoursAgo = new Date(Date.now() - 48 * 60 * 60 * 1000).toISOString();
db.all( db.all(
'SELECT * FROM locations WHERE created_at > ? ORDER BY created_at DESC', 'SELECT * FROM locations WHERE created_at > ? ORDER BY created_at DESC',
[twentyFourHoursAgo], [fortyEightHoursAgo],
(err, rows) => { (err, rows) => {
if (err) { if (err) {
console.error('Error fetching locations:', err); console.error('Error fetching locations:', err);
@ -190,7 +190,7 @@ app.get('/api/admin/locations', authenticateAdmin, (req, res) => {
longitude: row.longitude, longitude: row.longitude,
persistent: !!row.persistent, persistent: !!row.persistent,
created_at: row.created_at, created_at: row.created_at,
isActive: new Date(row.created_at) > new Date(Date.now() - 24 * 60 * 60 * 1000) isActive: new Date(row.created_at) > new Date(Date.now() - 48 * 60 * 60 * 1000)
})); }));
res.json(locations); res.json(locations);
@ -311,13 +311,19 @@ app.get('/admin', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'admin.html')); res.sendFile(path.join(__dirname, 'public', 'admin.html'));
}); });
// Serve the privacy policy page
app.get('/privacy', (req, res) => {
console.log('Serving the privacy policy page');
res.sendFile(path.join(__dirname, 'public', 'privacy.html'));
});
// Start server // Start server
app.listen(PORT, () => { app.listen(PORT, () => {
console.log('======================================='); console.log('===========================================');
console.log('ICE Watch server successfully started'); console.log('Great Lakes Ice Report server started');
console.log(`Listening on port ${PORT}`); console.log(`Listening on port ${PORT}`);
console.log(`Visit http://localhost:${PORT} to view the website`); console.log(`Visit http://localhost:${PORT} to view the website`);
console.log('======================================='); console.log('===========================================');
}); });
// Graceful shutdown // Graceful shutdown