Spaces:

Glaski
/

reeldealsd

Running

App Files Files Community

Glaski commited on Oct 11, 2025

Commit

aeca121

verified ·

1 Parent(s): 10ba5d6

Make a site that tracks San Diego fishing charter boats with a map

Browse files

Files changed (2) hide show

README.md +9 -5
index.html +68 -19

README.md CHANGED Viewed

@@ -1,10 +1,14 @@
 ---
-title: Reeldealsd
-emoji: 😻
-colorFrom: blue
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: ReelDealSD 🎣
+colorFrom: yellow
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,68 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ReelDealSD - San Diego Fishing Charters</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+</head>
+<body class="bg-blue-50">
+    <header class="bg-blue-800 text-white py-6">
+        <div class="container mx-auto px-4">
+            <h1 class="text-3xl font-bold">ReelDealSD 🎣</h1>
+            <p class="text-blue-200">Track San Diego Fishing Charter Boats</p>
+        </div>
+    </header>
+    <main class="container mx-auto px-4 py-8">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <div class="lg:col-span-2">
+                <div class="bg-white rounded-lg shadow-lg p-4 h-[500px]">
+                    <div id="map" class="h-full w-full rounded-md"></div>
+                </div>
+            </div>
+            <div class="bg-white rounded-lg shadow-lg p-6">
+                <h2 class="text-xl font-bold mb-4 text-blue-800">Active Charters</h2>
+                <div class="space-y-4" id="charters-list">
+                    <!-- Charter boats will be loaded here -->
+                </div>
+            </div>
+        </div>
+    </main>
+    <script>
+        // Initialize map centered on San Diego
+        const map = L.map('map').setView([32.7157, -117.1611], 12);
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
+        // Sample charter boat data (in a real app, this would come from an API)
+        const charters = [
+            { name: "Pacific Queen", lat: 32.722, lng: -117.234, status: "Active", passengers: 12 },
+            { name: "New Seaforth", lat: 32.728, lng: -117.221, status: "Docked", passengers: 0 },
+            { name: "Point Loma", lat: 32.716, lng: -117.238, status: "Active", passengers: 8 }
+        ];
+        // Add charter boats to map and list
+        charters.forEach(charter => {
+            // Add marker to map
+            const marker = L.marker([charter.lat, charter.lng])
+                .addTo(map)
+                .bindPopup(`<b>${charter.name}</b><br>Status: ${charter.status}<br>Passengers: ${charter.passengers}`);
+            // Add to list
+            const statusColor = charter.status === "Active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800";
+            const listItem = document.createElement('div');
+            listItem.className = "p-3 border rounded-lg";
+            listItem.innerHTML = `
+                <h3 class="font-bold">${charter.name}</h3>
+                <div class="text-sm ${statusColor} inline-block px-2 py-1 rounded mt-1">${charter.status}</div>
+                <p class="text-sm mt-2">Passengers: ${charter.passengers}</p>
+            `;
+            document.getElementById('charters-list').appendChild(listItem);
+        });
+    </script>
+</body>
+</html>