Hugging Face's logo

Spaces:
Whodat1972
/
https-enzostvs-deepsite-hf-space
Running

App Files Community
https-enzostvs-deepsite-hf-space / index.html
Whodat1972's picture
Whodat1972
Add 3 files
e3e511b verified
raw
history blame contribute delete
32.8 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Marshfield Crime Watch - Athens County, Ohio</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.crime-alert {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
.wanted-card:hover {
transform: scale(1.02);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.badge {
position: absolute;
top: -10px;
right: -10px;
}
</style>
</head>
<body class="bg-gray-100">
<!-- Emergency Alert Banner -->
<div class="bg-red-600 text-white text-center py-2 px-4 crime-alert">
<div class="container mx-auto flex justify-between items-center">
<span class="font-bold"><i class="fas fa-exclamation-triangle mr-2"></i> NEW MARSHFIELD CRIME ALERTS</span>
<button class="text-white hover:text-gray-200">
<i class="fas fa-bell"></i> Enable Notifications
</button>
</div>
</div>
<!-- Navigation -->
<nav class="bg-blue-900 text-white shadow-lg">
<div class="container mx-auto px-4 py-3">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center space-x-3 mb-4 md:mb-0">
<i class="fas fa-shield-alt text-2xl"></i>
<h1 class="text-xl font-bold">New Marshfield Crime Watch</h1>
</div>
<div class="flex flex-wrap justify-center space-x-0 space-y-2 md:space-y-0 md:space-x-6">
<a href="#" class="block hover:text-blue-200 transition px-2">Home</a>
<a href="#" class="block hover:text-blue-200 transition px-2">Recent Arrests</a>
<a href="#" class="block hover:text-blue-200 transition px-2">Most Wanted</a>
<a href="#" class="block hover:text-blue-200 transition px-2">Crime Map</a>
<a href="#" class="block hover:text-blue-200 transition px-2">Safety Tips</a>
<a href="#" class="block hover:text-blue-200 transition px-2">Submit Tip</a>
</div>
</div>
</div>
</nav>
<!-- Main Content -->
<div class="container mx-auto px-4 py-8">
<!-- Hero Section -->
<div class="bg-gradient-to-r from-blue-800 to-blue-600 text-white rounded-xl p-8 mb-8 shadow-lg">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-2/3 mb-6 md:mb-0">
<h1 class="text-3xl md:text-4xl font-bold mb-4">Keeping New Marshfield Safe</h1>
<p class="text-lg mb-6">Real-time crime alerts and arrest reports for our community. Stay informed about criminal activity in New Marshfield, Ohio.</p>
<div class="flex flex-wrap gap-3">
<a href="#recent-arrests" class="bg-white text-blue-800 hover:bg-gray-100 px-6 py-2 rounded-lg font-medium transition">View Recent Arrests</a>
<a href="#most-wanted" class="bg-transparent border-2 border-white hover:bg-blue-700 px-6 py-2 rounded-lg font-medium transition">See Most Wanted</a>
</div>
</div>
<div class="md:w-1/3 flex justify-center">
<img src="https://maps.googleapis.com/maps/api/staticmap?center=New+Marshfield,OH&zoom=12&size=400x300&maptype=roadmap&markers=color:red%7CNew+Marshfield,OH&key=YOUR_API_KEY" alt="New Marshfield Map" class="rounded-lg border-4 border-white shadow-lg">
</div>
</div>
</div>
<!-- Recent Arrests Section -->
<section id="recent-arrests" class="mb-12">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800 border-l-4 border-red-600 pl-4">
<i class="fas fa-handcuffs mr-2 text-red-600"></i> Recent Arrests in New Marshfield
</h2>
<div class="flex items-center">
<span class="text-sm text-gray-600 mr-2">Auto-refresh:</span>
<div class="relative">
<select class="bg-white border border-gray-300 rounded-lg px-3 py-1 appearance-none focus:outline-none focus:ring-2 focus:ring-blue-500">
<option>Every 15 minutes</option>
<option>Every hour</option>
<option>Every 6 hours</option>
<option>Every 24 hours</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
<div class="p-4 bg-gray-100 border-b flex justify-between items-center">
<h3 class="font-semibold text-gray-800">
<i class="fas fa-calendar-day mr-2 text-blue-600"></i> Today's Arrests
</h3>
<span class="text-sm bg-blue-100 text-blue-800 px-3 py-1 rounded-full">Updated: <span id="update-time">Just now</span></span>
</div>
<div id="arrests-container" class="divide-y divide-gray-200">
<!-- Arrest cards will be dynamically inserted here by JavaScript -->
<div class="p-4 flex items-start">
<div class="animate-pulse flex space-x-4 w-full">
<div class="flex-1 space-y-4 py-1">
<div class="h-4 bg-gray-200 rounded w-3/4"></div>
<div class="space-y-2">
<div class="h-4 bg-gray-200 rounded"></div>
<div class="h-4 bg-gray-200 rounded w-5/6"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="p-4 bg-gray-100 border-b">
<h3 class="font-semibold text-gray-800">
<i class="fas fa-link mr-2 text-blue-600"></i> Athens County Sheriff's Office
</h3>
</div>
<div class="p-4">
<p class="text-gray-600 mb-4">Check the latest arrest records from the Athens County Sheriff's Office:</p>
<a href="https://www.athenssheriff.com/" target="_blank" class="inline-flex items-center bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
<i class="fas fa-external-link-alt mr-2"></i> Visit athenssheriff.com
</a>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="p-4 bg-gray-100 border-b">
<h3 class="font-semibold text-gray-800">
<i class="fas fa-link mr-2 text-blue-600"></i> Southeastern Ohio Regional Jail
</h3>
</div>
<div class="p-4">
<p class="text-gray-600 mb-4">View current inmates at the Southeastern Ohio Regional Jail:</p>
<a href="http://www.jdsinc.net/ohseorj/" target="_blank" class="inline-flex items-center bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
<i class="fas fa-external-link-alt mr-2"></i> Visit ohseorj.com
</a>
</div>
</div>
</div>
</section>
<!-- Top Crime Stories -->
<section class="mb-12">
<h2 class="text-2xl font-bold text-gray-800 border-l-4 border-red-600 pl-4 mb-6">
<i class="fas fa-newspaper mr-2 text-red-600"></i> Top Crime Stories
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
<img src="https://images.unsplash.com/photo-1604846887569-5dc0a6a84c3b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Crime scene" class="w-full h-48 object-cover">
<div class="p-6">
<div class="flex items-center text-sm text-gray-500 mb-2">
<span><i class="far fa-calendar mr-1"></i> 2 days ago</span>
<span class="mx-2">•</span>
<span><i class="far fa-eye mr-1"></i> 1,245 views</span>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">Burglary Spree Hits New Marshfield</h3>
<p class="text-gray-600 mb-4">Three homes on Elm Street were broken into overnight. Police are investigating possible connections to similar crimes in Athens County.</p>
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Read more →</a>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
<img src="https://images.unsplash.com/photo-1589829545856-d10d557cf95f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Police car" class="w-full h-48 object-cover">
<div class="p-6">
<div class="flex items-center text-sm text-gray-500 mb-2">
<span><i class="far fa-calendar mr-1"></i> 5 days ago</span>
<span class="mx-2">•</span>
<span><i class="far fa-eye mr-1"></i> 892 views</span>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">Drug Bust on Route 50</h3>
<p class="text-gray-600 mb-4">Athens County Sheriff's deputies seized over $10,000 worth of methamphetamine during a traffic stop near New Marshfield.</p>
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Read more →</a>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
<img src="https://images.unsplash.com/photo-1585771724684-38269d6639fd?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Community meeting" class="w-full h-48 object-cover">
<div class="p-6">
<div class="flex items-center text-sm text-gray-500 mb-2">
<span><i class="far fa-calendar mr-1"></i> 1 week ago</span>
<span class="mx-2">•</span>
<span><i class="far fa-eye mr-1"></i> 1,532 views</span>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">Community Safety Meeting Draws Crowd</h3>
<p class="text-gray-600 mb-4">Over 100 residents attended a town hall meeting to discuss crime prevention strategies with local law enforcement.</p>
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Read more →</a>
</div>
</div>
</div>
</section>
<!-- Most Wanted Section -->
<section id="most-wanted" class="mb-12">
<h2 class="text-2xl font-bold text-gray-800 border-l-4 border-red-600 pl-4 mb-6">
<i class="fas fa-search mr-2 text-red-600"></i> New Marshfield's 10 Most Wanted
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6">
<!-- Most Wanted Card 1 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden wanted-card transition relative">
<div class="badge bg-red-600 text-white text-xs font-bold px-2 py-1 rounded-full">WANTED</div>
<img src="https://via.placeholder.com/300x300?text=Photo+Not+Available" alt="Wanted person" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-bold text-gray-800">James R. Wilson</h3>
<p class="text-sm text-gray-600 mb-2">Age: 34 • Height: 5'11"</p>
<p class="text-sm text-gray-600 mb-3">Wanted for: Armed Robbery</p>
<button class="w-full bg-red-600 hover:bg-red-700 text-white py-1 rounded text-sm transition">
<i class="fas fa-phone-alt mr-1"></i> Report Tip
</button>
</div>
</div>
<!-- Most Wanted Card 2 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden wanted-card transition relative">
<div class="badge bg-red-600 text-white text-xs font-bold px-2 py-1 rounded-full">WANTED</div>
<img src="https://via.placeholder.com/300x300?text=Photo+Not+Available" alt="Wanted person" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-bold text-gray-800">Sarah L. Thompson</h3>
<p class="text-sm text-gray-600 mb-2">Age: 28 • Height: 5'5"</p>
<p class="text-sm text-gray-600 mb-3">Wanted for: Fraud/Theft</p>
<button class="w-full bg-red-600 hover:bg-red-700 text-white py-1 rounded text-sm transition">
<i class="fas fa-phone-alt mr-1"></i> Report Tip
</button>
</div>
</div>
<!-- Most Wanted Card 3 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden wanted-card transition relative">
<div class="badge bg-red-600 text-white text-xs font-bold px-2 py-1 rounded-full">WANTED</div>
<img src="https://via.placeholder.com/300x300?text=Photo+Not+Available" alt="Wanted person" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-bold text-gray-800">Michael D. Harris</h3>
<p class="text-sm text-gray-600 mb-2">Age: 42 • Height: 6'1"</p>
<p class="text-sm text-gray-600 mb-3">Wanted for: Drug Trafficking</p>
<button class="w-full bg-red-600 hover:bg-red-700 text-white py-1 rounded text-sm transition">
<i class="fas fa-phone-alt mr-1"></i> Report Tip
</button>
</div>
</div>
<!-- Most Wanted Card 4 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden wanted-card transition relative">
<div class="badge bg-red-600 text-white text-xs font-bold px-2 py-1 rounded-full">WANTED</div>
<img src="https://via.placeholder.com/300x300?text=Photo+Not+Available" alt="Wanted person" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-bold text-gray-800">David K. Miller</h3>
<p class="text-sm text-gray-600 mb-2">Age: 37 • Height: 5'9"</p>
<p class="text-sm text-gray-600 mb-3">Wanted for: Burglary</p>
<button class="w-full bg-red-600 hover:bg-red-700 text-white py-1 rounded text-sm transition">
<i class="fas fa-phone-alt mr-1"></i> Report Tip
</button>
</div>
</div>
<!-- Most Wanted Card 5 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden wanted-card transition relative">
<div class="badge bg-red-600 text-white text-xs font-bold px-2 py-1 rounded-full">WANTED</div>
<img src="https://via.placeholder.com/300x300?text=Photo+Not+Available" alt="Wanted person" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-bold text-gray-800">Jessica A. White</h3>
<p class="text-sm text-gray-600 mb-2">Age: 31 • Height: 5'7"</p>
<p class="text-sm text-gray-600 mb-3">Wanted for: Identity Theft</p>
<button class="w-full bg-red-600 hover:bg-red-700 text-white py-1 rounded text-sm transition">
<i class="fas fa-phone-alt mr-1"></i> Report Tip
</button>
</div>
</div>
</div>
<div class="text-center mt-8">
<a href="#" class="inline-flex items-center bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition">
<i class="fas fa-list mr-2"></i> View Full Most Wanted List
</a>
</div>
</section>
<!-- Crime Prevention Tips -->
<section class="bg-blue-50 rounded-xl p-8 mb-12">
<h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">
<i class="fas fa-lightbulb text-yellow-500 mr-2"></i> Crime Prevention Tips
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="text-blue-600 text-3xl mb-4">
<i class="fas fa-home"></i>
</div>
<h3 class="font-bold text-lg text-gray-800 mb-3">Home Security</h3>
<ul class="text-gray-600 space-y-2">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-2 mt-1"></i>
<span>Install motion-activated lights</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-2 mt-1"></i>
<span>Lock doors and windows when away</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-2 mt-1"></i>
<span>Get to know your neighbors</span>
</li>
</ul>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="text-blue-600 text-3xl mb-4">
<i class="fas fa-car"></i>
</div>
<h3 class="font-bold text-lg text-gray-800 mb-3">Vehicle Safety</h3>
<ul class="text-gray-600 space-y-2">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-2 mt-1"></i>
<span>Never leave valuables in plain sight</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-2 mt-1"></i>
<span>Park in well-lit areas</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-2 mt-1"></i>
<span>Always lock your vehicle</span>
</li>
</ul>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="text-blue-600 text-3xl mb-4">
<i class="fas fa-user-shield"></i>
</div>
<h3 class="font-bold text-lg text-gray-800 mb-3">Personal Safety</h3>
<ul class="text-gray-600 space-y-2">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-2 mt-1"></i>
<span>Be aware of your surroundings</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-2 mt-1"></i>
<span>Trust your instincts</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-2 mt-1"></i>
<span>Report suspicious activity</span>
</li>
</ul>
</div>
</div>
</section>
</div>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">New Marshfield Crime Watch</h3>
<p class="text-gray-400">Keeping our community informed and safe through real-time crime alerts and prevention resources.</p>
</div>
<div>
<h4 class="font-bold text-lg mb-4">Quick Links</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Recent Arrests</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Most Wanted</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Crime Map</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Safety Tips</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-lg mb-4">Emergency Contacts</h4>
<ul class="space-y-2">
<li class="flex items-center">
<i class="fas fa-phone-alt text-red-400 mr-2"></i>
<span>Emergency: 911</span>
</li>
<li class="flex items-center">
<i class="fas fa-building text-blue-400 mr-2"></i>
<span>Athens County Sheriff: (740) 593-6633</span>
</li>
<li class="flex items-center">
<i class="fas fa-map-marker-alt text-green-400 mr-2"></i>
<span>New Marshfield Police: (740) 664-XXXX</span>
</li>
</ul>
</div>
<div>
<h4 class="font-bold text-lg mb-4">Stay Connected</h4>
<div class="flex space-x-4 mb-4">
<a href="#" class="text-gray-400 hover:text-white transition text-2xl">
<i class="fab fa-facebook"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition text-2xl">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition text-2xl">
<i class="fab fa-instagram"></i>
</a>
</div>
<p class="text-gray-400">Subscribe to our crime alert emails:</p>
<div class="mt-2 flex">
<input type="email" placeholder="Your email" class="bg-gray-700 text-white px-4 py-2 rounded-l-lg focus:outline-none w-full">
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-r-lg transition">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
<p>&copy; 2023 New Marshfield Crime Watch. All rights reserved.</p>
<p class="mt-2 text-sm">This website is not affiliated with any law enforcement agency. Information is gathered from public sources.</p>
</div>
</div>
</footer>
<!-- JavaScript for fetching arrest data -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Update timestamp
function updateTime() {
const now = new Date();
const options = {
hour: '2-digit',
minute: '2-digit',
hour12: true,
month: 'short',
day: 'numeric'
};
document.getElementById('update-time').textContent = now.toLocaleString('en-US', options);
}
updateTime();
setInterval(updateTime, 60000); // Update every minute
// Simulate fetching arrest data (in a real app, this would be API calls)
function fetchArrestData() {
// In a real implementation, we would:
// 1. Scrape https://www.athenssheriff.com/ for New Marshfield arrests
// 2. Check http://www.jdsinc.net/ohseorj/ for New Marshfield inmates
// 3. Filter to only show New Marshfield residents
// For demo purposes, we'll simulate this with sample data
const sampleArrests = [
{
name: "John A. Smith",
age: 32,
address: "123 Main St, New Marshfield",
charges: ["Burglary", "Possession of stolen property"],
date: "Today, 2:45 AM",
source: "Athens County Sheriff"
},
{
name: "Lisa M. Johnson",
age: 28,
address: "45 Oak Rd, New Marshfield",
charges: ["DUI", "Reckless operation"],
date: "Today, 1:15 AM",
source: "Ohio State Highway Patrol"
},
{
name: "Robert T. Williams",
age: 41,
address: "78 Pine Ln, New Marshfield",
charges: ["Domestic violence", "Assault"],
date: "Yesterday, 10:30 PM",
source: "Athens County Sheriff"
}
];
const arrestsContainer = document.getElementById('arrests-container');
arrestsContainer.innerHTML = '';
if (sampleArrests.length === 0) {
arrestsContainer.innerHTML = `
<div class="p-6 text-center text-gray-500">
<i class="fas fa-check-circle text-green-500 text-4xl mb-3"></i>
<p class="font-medium">No recent arrests in New Marshfield</p>
<p class="text-sm">Last checked: <span id="update-time">Just now</span></p>
</div>
`;
return;
}
sampleArrests.forEach(arrest => {
const arrestCard = document.createElement('div');
arrestCard.className = 'p-4 border-b border-gray-200 last:border-b-0';
arrestCard.innerHTML = `
<div class="flex justify-between items-start mb-2">
<h3 class="font-bold text-lg text-gray-800">${arrest.name}</h3>
<span class="text-sm bg-gray-100 text-gray-600 px-2 py-1 rounded">${arrest.age} years</span>
</div>
<p class="text-sm text-gray-600 mb-2"><i class="fas fa-map-marker-alt mr-1 text-blue-500"></i> ${arrest.address}</p>
<div class="mb-3">
${arrest.charges.map(charge => `
<span class="inline-block bg-red-100 text-red-800 text-xs px-2 py-1 rounded mr-1 mb-1">${charge}</span>
`).join('')}
</div>
<div class="flex justify-between items-center text-sm text-gray-500">
<span><i class="far fa-clock mr-1"></i> ${arrest.date}</span>
<span>Source: ${arrest.source}</span>
</div>
`;
arrestsContainer.appendChild(arrestCard);
});
}
// Initial fetch
setTimeout(fetchArrestData, 1500); // Simulate network delay
// Set up periodic refresh (every 15 minutes)
setInterval(fetchArrestData, 900000);
// Enable notifications button
const notifyBtn = document.querySelector('.crime-alert button');
if (notifyBtn) {
notifyBtn.addEventListener('click', function() {
if (!("Notification" in window)) {
alert("This browser doesn't support desktop notifications");
} else if (Notification.permission === "granted") {
alert("You're already subscribed to notifications!");
} else if (Notification.permission !== "denied") {
Notification.requestPermission().then(permission => {
if (permission === "granted") {
alert("Thank you for enabling notifications! You'll now receive crime alerts for New Marshfield.");
// In a real app, we would subscribe to push notifications here
}
});
}
});
}
// Most Wanted report buttons
document.querySelectorAll('.wanted-card button').forEach(button => {
button.addEventListener('click', function() {
const name = this.closest('.wanted-card').querySelector('h3').textContent;
alert(`Thank you for wanting to report information about ${name}. In a real implementation, this would connect you to the Athens County Sheriff's tip line.`);
});
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Whodat1972/https-enzostvs-deepsite-hf-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>