Download index.html from Whodat1972/https-enzostvs-deepsite-hf-space: direct link, hf CLI and curl.
- Browser
- Download file 32.8 kB
-
https://huggingface.co/spaces/Whodat1972/https-enzostvs-deepsite-hf-space/resolve/main/index.html
- Command line
-
hf download hf://spaces/Whodat1972/https-enzostvs-deepsite-hf-space/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Whodat1972/https-enzostvs-deepsite-hf-space/resolve/main/index.html
32.8 kB
| <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>© 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> |