Spaces:

lachieandmitch
/

native-title

Running

App Files Files Community

lachieandmitch commited on Jul 20, 2025

Commit

a3d8f41

verified ·

1 Parent(s): 83dba8e

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +505 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Native Title
-emoji: 🌍
 colorFrom: purple
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: native-title
+emoji: 🐳
 colorFrom: purple
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,505 @@
-<!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>Country Deals - Native Title Agreements</title>
+    <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>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Fuse.js/6.6.2/fuse.min.js"></script>
+    <style>
+        #map { height: 60vh; }
+        .custom-icon {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-weight: bold;
+        }
+        .print-only {
+            display: none;
+        }
+        @media print {
+            .no-print {
+                display: none;
+            }
+            .print-only {
+                display: block;
+            }
+            #map {
+                height: 400px;
+                page-break-after: always;
+            }
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <header class="bg-green-800 text-white p-4 shadow-md">
+        <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
+            <h1 class="text-2xl font-bold">Country Deals</h1>
+            <p class="text-sm mt-2 md:mt-0">Native Title Agreements Explorer</p>
+        </div>
+    </header>
+    <main class="container mx-auto p-4">
+        <div class="no-print">
+            <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+                <h2 class="text-xl font-semibold mb-4 text-gray-800">Find agreements on your country</h2>
+                <div class="flex flex-col md:flex-row gap-4">
+                    <input
+                        type="text"
+                        id="communitySearch"
+                        placeholder="Type your community name (e.g. Yindjibarndi)"
+                        class="flex-grow p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-600 focus:border-transparent"
+                        aria-label="Search for your community"
+                    >
+                    <button
+                        id="searchButton"
+                        class="bg-green-700 hover:bg-green-800 text-white font-bold py-3 px-6 rounded-lg transition-colors"
+                    >
+                        Search
+                    </button>
+                </div>
+                <div id="searchResults" class="mt-4 hidden bg-gray-100 rounded-lg p-2 max-h-60 overflow-y-auto"></div>
+            </div>
+            <div id="legend" class="bg-white rounded-lg shadow-md p-4 mb-6 hidden">
+                <h3 class="font-semibold mb-2">Legend</h3>
+                <div class="flex flex-wrap gap-4">
+                    <div class="flex items-center">
+                        <div class="w-4 h-4 rounded-full bg-green-600 mr-2"></div>
+                        <span>ILUA</span>
+                    </div>
+                    <div class="flex items-center">
+                        <div class="w-4 h-4 rounded-full bg-orange-500 mr-2"></div>
+                        <span>Section 31 Mining Lease</span>
+                    </div>
+                    <div class="flex items-center">
+                        <div class="w-4 h-4 rounded-full bg-blue-500 mr-2"></div>
+                        <span>Other Agreements</span>
+                    </div>
+                    <div class="flex items-center">
+                        <div class="w-4 h-4 rounded-full bg-red-600 mr-2"></div>
+                        <span>Active Tenement</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="relative">
+            <div id="map" class="rounded-lg shadow-md"></div>
+            <div id="loadingIndicator" class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
+                <div class="bg-white p-4 rounded-lg">
+                    <p class="font-semibold">Loading your country...</p>
+                    <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2">
+                        <div class="bg-green-600 h-2.5 rounded-full animate-pulse" style="width: 45%"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="agreementDetails" class="mt-6 hidden">
+            <div class="bg-white rounded-lg shadow-md p-6">
+                <h2 class="text-xl font-semibold mb-4 text-gray-800">Agreement Details</h2>
+                <div id="detailContent"></div>
+                <div class="mt-4 flex flex-wrap gap-4">
+                    <button
+                        id="printButton"
+                        class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition-colors"
+                    >
+                        Print This Agreement
+                    </button>
+                    <button
+                        id="helpButton"
+                        class="bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-lg transition-colors"
+                    >
+                        Need Help? Call Your NTRB
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Print section (hidden until printing) -->
+        <div id="printSection" class="print-only">
+            <h1 class="text-2xl font-bold mb-4">Country Deals - Agreement Summary</h1>
+            <div id="printMapContainer" class="mb-6"></div>
+            <div id="printAgreementsList" class="mb-6">
+                <h2 class="text-xl font-semibold mb-2">Agreements</h2>
+                <ul id="printAgreements" class="list-disc pl-5"></ul>
+            </div>
+            <div id="printHelpInfo" class="mt-6 pt-4 border-t border-gray-300">
+                <h3 class="font-semibold mb-2">Need Help?</h3>
+                <p>Contact your Native Title Representative Body (NTRB):</p>
+                <p id="printNtrbPhone" class="font-semibold mt-1"></p>
+            </div>
+        </div>
+    </main>
+    <footer class="bg-gray-800 text-white p-4 mt-8">
+        <div class="container mx-auto text-center text-sm">
+            <p>© 2023 Country Deals - Helping native title holders understand agreements on their country</p>
+        </div>
+    </footer>
+    <script>
+        // Mock data - in a real app this would come from the data pipeline
+        const communities = [
+            {
+                name: "Yindjibarndi",
+                bounds: [[-21.5, 117.5], [-21.0, 118.0]],
+                ntrb: "YNAC",
+                phone: "+61891821300"
+            },
+            {
+                name: "Noongar",
+                bounds: [[-32.5, 115.5], [-31.5, 117.5]],
+                ntrb: "SWALSC",
+                phone: "+61893588000"
+            }
+        ];
+        // Mock tenement data
+        const tenements = [
+            {
+                type: "Tenement",
+                TENEMENT: "L52/123",
+                COMPANY: "Rio Tinto",
+                COMMODITY: "Iron Ore",
+                EXPIRY: "2025-12-31",
+                DOC_URL: "https://example.com/tenement/L52-123",
+                community: "Yindjibarndi",
+                coordinates: [-21.28, 117.78],
+                geometry: {
+                    type: "Polygon",
+                    coordinates: [[
+                        [-21.3, 117.75],
+                        [-21.3, 117.8],
+                        [-21.25, 117.8],
+                        [-21.25, 117.75],
+                        [-21.3, 117.75]
+                    ]]
+                }
+            }
+        ];
+        const agreements = [
+            {
+                id: 1,
+                community: "Yindjibarndi",
+                type: "ILUA",
+                title: "Yindjibarndi-FMG Agreement",
+                who: "Fortescue Metals Group",
+                what: "Iron ore mining agreement",
+                startDate: "2012-05-15",
+                endDate: "2032-05-15",
+                benefits: "Employment opportunities, training programs, and financial compensation",
+                contact: "Yindjibarndi Aboriginal Corporation",
+                coordinates: [-21.25, 117.75]
+            },
+            {
+                id: 2,
+                community: "Yindjibarndi",
+                type: "Section 31",
+                title: "Yindjibarndi Mining Lease",
+                who: "Rio Tinto",
+                what: "Pilbara mining operations",
+                startDate: "2015-08-01",
+                endDate: "2040-08-01",
+                benefits: "Royalty payments and cultural heritage protection",
+                contact: "Yindjibarndi Aboriginal Corporation",
+                coordinates: [-21.3, 117.8]
+            },
+            {
+                id: 3,
+                community: "Noongar",
+                type: "ILUA",
+                title: "Noongar Native Title Settlement",
+                who: "Western Australian Government",
+                what: "Land use agreement",
+                startDate: "2018-06-08",
+                endDate: "2068-06-08",
+                benefits: "Land transfers, funding for community programs",
+                contact: "South West Aboriginal Land and Sea Council",
+                coordinates: [-32.0, 116.5]
+            }
+        ];
+        // Initialize map
+        const map = L.map('map').setView([-25.2744, 133.7751], 4);
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        }).addTo(map);
+        // Initialize search
+        const fuse = new Fuse(communities, {
+            keys: ['name'],
+            threshold: 0.3
+        });
+        const communitySearch = document.getElementById('communitySearch');
+        const searchResults = document.getElementById('searchResults');
+        const searchButton = document.getElementById('searchButton');
+        const loadingIndicator = document.getElementById('loadingIndicator');
+        const legend = document.getElementById('legend');
+        const agreementDetails = document.getElementById('agreementDetails');
+        const detailContent = document.getElementById('detailContent');
+        const printButton = document.getElementById('printButton');
+        const helpButton = document.getElementById('helpButton');
+        let currentCommunity = null;
+        let currentMarkers = [];
+        // Search functionality
+        communitySearch.addEventListener('input', (e) => {
+            const query = e.target.value.trim();
+            if (query.length < 3) {
+                searchResults.classList.add('hidden');
+                return;
+            }
+            const results = fuse.search(query);
+            if (results.length > 0) {
+                searchResults.innerHTML = results.map(result =>
+                    `<div class="p-2 hover:bg-gray-200 cursor-pointer rounded" data-name="${result.item.name}">
+                        ${result.item.name}
+                    </div>`
+                ).join('');
+                searchResults.classList.remove('hidden');
+            } else {
+                searchResults.innerHTML = '<div class="p-2 text-gray-500">No communities found</div>';
+                searchResults.classList.remove('hidden');
+            }
+        });
+        searchResults.addEventListener('click', (e) => {
+            if (e.target.dataset.name) {
+                communitySearch.value = e.target.dataset.name;
+                searchResults.classList.add('hidden');
+                searchForCommunity(e.target.dataset.name);
+            }
+        });
+        searchButton.addEventListener('click', () => {
+            if (communitySearch.value.trim()) {
+                searchForCommunity(communitySearch.value.trim());
+            }
+        });
+        function searchForCommunity(communityName) {
+            loadingIndicator.classList.remove('hidden');
+            // Simulate network delay for demo purposes
+            setTimeout(() => {
+                const community = communities.find(c => c.name.toLowerCase() === communityName.toLowerCase());
+                if (community) {
+                    currentCommunity = community;
+                    showCommunityOnMap(community);
+                    legend.classList.remove('hidden');
+                    updateHelpButton(community);
+                } else {
+                    alert("Community not found. Please try another name.");
+                }
+                loadingIndicator.classList.add('hidden');
+            }, 800);
+        }
+        function showCommunityOnMap(community) {
+            // Clear previous markers
+            currentMarkers.forEach(marker => map.removeLayer(marker));
+            currentMarkers = [];
+            // Zoom to community bounds
+            map.fitBounds(community.bounds);
+            // Add agreements and tenements for this community
+            const communityAgreements = agreements.filter(a => a.community === community.name);
+            const communityTenements = tenements.filter(t => t.community === community.name);
+            // Add tenement polygons
+            communityTenements.forEach(tenement => {
+                const polygon = L.polygon(tenement.geometry.coordinates, {
+                    color: '#d73027',
+                    weight: 2,
+                    fillOpacity: 0.3
+                }).addTo(map);
+                polygon.bindPopup(`
+                    <strong>Tenement ${tenement.TENEMENT}</strong><br/>
+                    Holder: ${tenement.COMPANY}<br/>
+                    Commodity: ${tenement.COMMODITY}<br/>
+                    Expires: ${tenement.EXPIRY}<br/>
+                    <a href="${tenement.DOC_URL}" target="_blank">Official register</a>
+                `);
+                currentMarkers.push(polygon);
+            });
+            // Add agreement markers
+            // Add tenements to print map
+            communityTenements.forEach(tenement => {
+                L.polygon(tenement.geometry.coordinates, {
+                    color: '#d73027',
+                    weight: 2,
+                    fillOpacity: 0.3
+                }).addTo(printMapInstance);
+                // Add to agreements list
+                const li = document.createElement('li');
+                li.className = 'mb-2';
+                li.innerHTML = `
+                    <strong>Tenement ${tenement.TENEMENT}</strong><br/>
+                    <span class="text-sm">Held by ${tenement.COMPANY} for ${tenement.COMMODITY}</span><br/>
+                    <span class="text-sm">Expires: ${tenement.EXPIRY}</span>
+                `;
+                printAgreements.appendChild(li);
+            });
+            // Add agreements to print map
+            communityAgreements.forEach(agreement => {
+                let iconColor;
+                if (agreement.type === "ILUA") {
+                    iconColor = 'bg-green-600';
+                } else if (agreement.type === "Section 31") {
+                    iconColor = 'bg-orange-500';
+                } else {
+                    iconColor = 'bg-blue-500';
+                }
+                const marker = L.marker(agreement.coordinates, {
+                    icon: L.divIcon({
+                        className: 'custom-icon ' + iconColor,
+                        html: agreement.type === "ILUA" ? 'I' : agreement.type === "Section 31" ? 'M' : 'A',
+                        iconSize: [24, 24]
+                    })
+                }).addTo(map);
+                marker.on('click', () => showAgreementDetails(agreement));
+                currentMarkers.push(marker);
+            });
+        }
+        function showAgreementDetails(agreement) {
+            detailContent.innerHTML = `
+                <h3 class="text-lg font-semibold mb-2">${agreement.title}</h3>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                        <p class="font-semibold">Who:</p>
+                        <p>${agreement.who}</p>
+                    </div>
+                    <div>
+                        <p class="font-semibold">What:</p>
+                        <p>${agreement.what}</p>
+                    </div>
+                    <div>
+                        <p class="font-semibold">Start Date:</p>
+                        <p>${agreement.startDate}</p>
+                    </div>
+                    <div>
+                        <p class="font-semibold">End Date:</p>
+                        <p>${agreement.endDate}</p>
+                    </div>
+                    <div class="md:col-span-2">
+                        <p class="font-semibold">Benefits:</p>
+                        <p>${agreement.benefits}</p>
+                    </div>
+                    <div class="md:col-span-2">
+                        <p class="font-semibold">Contact:</p>
+                        <p>${agreement.contact}</p>
+                    </div>
+                </div>
+            `;
+            agreementDetails.classList.remove('hidden');
+            // Scroll to details if on mobile
+            if (window.innerWidth < 768) {
+                agreementDetails.scrollIntoView({ behavior: 'smooth' });
+            }
+        }
+        function updateHelpButton(community) {
+            helpButton.innerHTML = `Need Help? Call ${community.ntrb}: ${community.phone}`;
+            helpButton.onclick = () => {
+                window.location.href = `tel:${community.phone.replace(/\D/g, '')}`;
+            };
+        }
+        // Print functionality
+        printButton.addEventListener('click', () => {
+            // Prepare print content
+            document.getElementById('printNtrbPhone').textContent =
+                `${currentCommunity.ntrb}: ${currentCommunity.phone}`;
+            // Clone map for printing
+            const printMapContainer = document.getElementById('printMapContainer');
+            printMapContainer.innerHTML = '';
+            const printMap = document.createElement('div');
+            printMap.style.height = '400px';
+            printMapContainer.appendChild(printMap);
+            // Create a new map instance for printing
+            const printMapInstance = L.map(printMap).setView(map.getCenter(), map.getZoom());
+            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            }).addTo(printMapInstance);
+            // Add community bounds
+            L.rectangle(currentCommunity.bounds, {color: "#ff7800", weight: 1}).addTo(printMapInstance);
+            // Add agreements
+            const communityAgreements = agreements.filter(a => a.community === currentCommunity.name);
+            const printAgreements = document.getElementById('printAgreements');
+            printAgreements.innerHTML = '';
+            communityAgreements.forEach(agreement => {
+                let iconColor;
+                if (agreement.type === "ILUA") {
+                    iconColor = 'green';
+                } else if (agreement.type === "Section 31") {
+                    iconColor = 'orange';
+                } else {
+                    iconColor = 'blue';
+                }
+                L.circleMarker(agreement.coordinates, {
+                    radius: 8,
+                    fillColor: iconColor,
+                    color: '#000',
+                    weight: 1,
+                    opacity: 1,
+                    fillOpacity: 0.8
+                }).addTo(printMapInstance);
+                // Add to agreements list
+                const li = document.createElement('li');
+                li.className = 'mb-2';
+                li.innerHTML = `
+                    <strong>${agreement.title}</strong> (${agreement.type})<br>
+                    <span class="text-sm">With ${agreement.who} for ${agreement.what}</span><br>
+                    <span class="text-sm">${agreement.startDate} to ${agreement.endDate}</span>
+                `;
+                printAgreements.appendChild(li);
+            });
+            // Trigger print
+            window.print();
+        });
+        // Keyboard accessibility
+        communitySearch.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                searchButton.click();
+            }
+        });
+        // Initialize with a sample community for demo purposes
+        setTimeout(() => {
+            communitySearch.value = "Yindjibarndi";
+            searchButton.click();
+        }, 1000);
+    </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=lachieandmitch/native-title" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>