/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useRef, useCallback, StrictMode, Component } from "https://esm.sh/react"; import ReactDOM from "https://esm.sh/react-dom"; // Error Boundary Component class ErrorBoundary extends Component { constructor(props) { super(props); this.state = { hasError: false, error: null, errorInfo: null }; } static getDerivedStateFromError(error) { return { hasError: true }; } componentDidCatch(error, errorInfo) { console.error("Uncaught error:", error, errorInfo); this.setState({ error: error, errorInfo: errorInfo }); } render() { if (this.state.hasError) { return (

🚨 Erreur de Chargement

Une erreur est survenue lors du chargement de l'application.

); } return this.props.children; } } // Disney+ Inspired Theme Configuration const theme = { colors: { primary: '#113CCF', secondary: '#1A2342', background: '#0D1321', surface: '#1E2745', text: { light: '#FFFFFF', muted: '#8E8E8E' }, accent: { blue: '#1F4CFF', green: '#00E461', red: '#FF453A' } }, typography: { fontFamily: '"Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif', fontSizes: { small: '0.75rem', normal: '1rem', large: '1.25rem', title: '1.5rem' } }, spacing: { xs: '0.5rem', sm: '1rem', md: '1.5rem', lg: '2rem' }, borderRadius: '0.75rem', shadows: { soft: '0 4px 6px rgba(0,0,0,0.1)', medium: '0 6px 12px rgba(0,0,0,0.15)' } }; // Disney+ Inspired Styles const styles = { container: { maxWidth: '600px', margin: '0 auto', padding: theme.spacing.sm, fontFamily: theme.typography.fontFamily, backgroundColor: theme.colors.background, color: theme.colors.text.light }, card: { backgroundColor: theme.colors.surface, borderRadius: theme.borderRadius, padding: theme.spacing.sm, marginBottom: theme.spacing.sm, boxShadow: theme.shadows.medium, border: `1px solid ${theme.colors.secondary}`, transition: 'transform 0.3s ease' }, input: { width: '100%', padding: theme.spacing.xs, marginBottom: theme.spacing.xs, borderRadius: theme.borderRadius, backgroundColor: theme.colors.secondary, color: theme.colors.text.light, border: 'none', fontSize: theme.typography.fontSizes.normal }, button: { width: '100%', padding: theme.spacing.xs, backgroundColor: theme.colors.accent.blue, color: theme.colors.text.light, border: 'none', borderRadius: theme.borderRadius, cursor: 'pointer', fontSize: theme.typography.fontSizes.normal, fontWeight: 'bold', transition: 'background-color 0.3s ease' }, navigationBar: { display: 'flex', justifyContent: 'center', padding: theme.spacing.sm, backgroundColor: theme.colors.secondary, position: 'sticky', top: 0, zIndex: 100, boxShadow: theme.shadows.soft } }; // Google Maps API Key const GOOGLE_MAPS_API_KEY = 'AIzaSyBOti4mM-6x9WDnZIjIeyEU21OpBXqWBgw'; // Utility Functions function calculateDistance(lat1, lon1, lat2, lon2) { const R = 6371; // Radius of the earth in km const dLat = (lat2 - lat1) * Math.PI / 180; const dLon = (lon2 - lon1) * Math.PI / 180; const a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon/2) * Math.sin(dLon/2); const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); return R * c; // Distance in kilometers } // Geocoding Utility Function async function geocodeLocation(location) { const algerianLocations = { 'alger': { lat: 36.7538, lng: 3.0588, region: 'Alger' }, 'oran': { lat: 35.6969, lng: -0.6336, region: 'Oran' }, 'constantine': { lat: 36.3643, lng: 6.6147, region: 'Constantine' }, 'annaba': { lat: 36.8667, lng: 7.7556, region: 'Annaba' }, 'tlemcen': { lat: 34.8889, lng: -1.3182, region: 'Tlemcen' }, 'batna': { lat: 35.5556, lng: 6.1746, region: 'Batna' }, 'blida': { lat: 36.5039, lng: 2.8302, region: 'Blida' }, 'skikda': { lat: 36.8667, lng: 6.9000, region: 'Skikda' }, 'setif': { lat: 36.1899, lng: 5.4142, region: 'Setif' } }; const normalizedLocation = location.toLowerCase().trim(); const matchedLocation = Object.entries(algerianLocations).find( ([city]) => city === normalizedLocation || normalizedLocation.includes(city) ); if (matchedLocation) { return matchedLocation[1]; } return { lat: 28.0339, lng: 1.6596, region: 'Algérie', message: 'Localisation approximative' }; } // Emergency Veterinary Contacts const EMERGENCY_VETERINARY_CONTACTS = [ { name: "Clinique Vétérinaire Alger Centre", phone: "+213 21 XX XX XX", address: "Alger, Centre-ville", coordinates: { lat: 36.7538, lng: 3.0588 } }, { name: "Centre Vétérinaire Oran", phone: "+213 41 XX XX XX", address: "Oran, Ouest Algérien", coordinates: { lat: 35.6969, lng: -0.6336 } }, { name: "Urgence Animale Constantine", phone: "+213 31 XX XX XX", address: "Constantine, Est Algérien", coordinates: { lat: 36.3643, lng: 6.6147 } }, { name: "Clinique Vétérinaire Annaba", phone: "+213 38 XX XX XX", address: "Annaba, Nord-Est", coordinates: { lat: 36.8667, lng: 7.7556 } }, { name: "Centre Vétérinaire Tlemcen", phone: "+213 43 XX XX XX", address: "Tlemcen, Ouest", coordinates: { lat: 34.8889, lng: -1.3182 } } ]; // Cat Report Form Component function CatReportForm() { const [report, setReport] = useState({ location: '', condition: '', description: '', contactNumber: '' }); const handleSubmit = (e) => { e.preventDefault(); alert("🐱 Rapport envoyé !"); console.log("Rapport:", report); }; return (

🐱 Signalement de Chat

setReport(prev => ({...prev, location: e.target.value}))} style={styles.input} required />

setReport(prev => ({...prev, description: e.target.value}))}
        />

<input
          style={styles.input}
          type="tel"
          placeholder="Numéro de Contact"
          value={report.contactNumber}
          onChange={(e) => setReport(prev => ({...prev, contactNumber: e.target.value}))}
          required
        />

<button style={styles.button} type="submit">
          Envoyer
        </button>
      </form>
    </div>
  );
}

// Veterinary Contacts Component
function VeterinaryContacts() {
  const mapRef = useRef(null);
  const [location, setLocation] = useState('');
  const [nearestVets, setNearestVets] = useState(EMERGENCY_VETERINARY_CONTACTS);
  const [searchRadius, setSearchRadius] = useState(50);
  const [locationCoords, setLocationCoords] = useState(null);
  const [locationFeedback, setLocationFeedback] = useState('');
  const [markers, setMarkers] = useState([]);

// Load Google Maps Script
  useEffect(() => {
    const loadGoogleMapsScript = () => {
      if (window.google && window.google.maps) return;

const script = document.createElement('script');
      script.src = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}&libraries=places`;
      script.async = true;
      script.defer = true;

script.onload = () => {
        // Script is loaded, but we'll initialize map when location is set
      };

document.head.appendChild(script);
    };

loadGoogleMapsScript();
  }, []);

// Initialize or update map when location changes
  useEffect(() => {
    if (!locationCoords || !window.google || !window.google.maps) return;

// Clear existing markers
    markers.forEach(marker => marker.setMap(null));

// Create or update map
    const mapOptions = {
      center: { lat: locationCoords.lat, lng: locationCoords.lng },
      zoom: 12
    };

const newMap = new window.google.maps.Map(mapRef.current, mapOptions);

// Add location marker
    const locationMarker = new window.google.maps.Marker({
      position: { lat: locationCoords.lat, lng: locationCoords.lng },
      map: newMap,
      title: location,
      icon: {
        url: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="%23FF453A"><path d="M12 2c-5.33 4 0 10 0 10s5.33-6 0-10z"/></svg>',
        scaledSize: new window.google.maps.Size(40, 40)
      }
    });

// Add veterinary markers
    const newMarkers = nearestVets.map(vet => 
      new window.google.maps.Marker({
        position: { lat: vet.coordinates.lat, lng: vet.coordinates.lng },
        map: newMap,
        title: vet.name,
        icon: {
          url: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="%2300E461"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>',
          scaledSize: new window.google.maps.Size(30, 30)
        }
      })
    );

setMarkers([locationMarker, ...newMarkers]);
  }, [locationCoords, nearestVets, location]);

// Find nearest vets based on location
  useEffect(() => {
    async function findNearestVets() {
      if (!locationCoords) {
        setNearestVets(EMERGENCY_VETERINARY_CONTACTS);
        setLocationFeedback('');
        return;
      }

const filteredVets = EMERGENCY_VETERINARY_CONTACTS.filter(vet => {
        const distance = calculateDistance(
          locationCoords.lat, 
          locationCoords.lng, 
          vet.coordinates.lat, 
          vet.coordinates.lng
        );
        return distance <= searchRadius;
      }).sort((a, b) => 
        calculateDistance(
          locationCoords.lat, 
          locationCoords.lng, 
          a.coordinates.lat, 
          a.coordinates.lng
        ) - 
        calculateDistance(
          locationCoords.lat, 
          locationCoords.lng, 
          b.coordinates.lat, 
          b.coordinates.lng
        )
      );

setNearestVets(filteredVets);
      
      if (filteredVets.length === 0) {
        setLocationFeedback(`Aucun vétérinaire trouvé dans un rayon de ${searchRadius} km.`);
      } else {
        setLocationFeedback(`${filteredVets.length} vétérinaire(s) trouvé(s) près de ${location}`);
      }
    }

findNearestVets();
  }, [locationCoords, searchRadius, location]);

// Location input handler
  const handleLocationInput = async (inputLocation) => {
    setLocation(inputLocation);
    try {
      const coords = await geocodeLocation(inputLocation);
      setLocationCoords(coords);

if (coords.message) {
        setLocationFeedback(coords.message);
      }
    } catch (error) {
      console.error("Geocoding error:", error);
      setLocationCoords({ lat: 28.0339, lng: 1.6596 });
      setLocationFeedback('Localisation par défaut utilisée');
    }
  };

return (
    <div style={styles.container}>
      <h2 style={{color: theme.colors.text.light}}>🏥 Contacts Urgence Vétérinaires</h2>
      
      {/* Location Input */}
      <div style={styles.card}>
        <input
          type="text"
          placeholder="Entrez une ville (Alger, Oran, etc.)"
          value={location}
          onChange={(e) => handleLocationInput(e.target.value)}
          style={styles.input}
        />
        {locationFeedback && (
          <p 
            style={{
              color: theme.colors.text.muted, 
              fontSize: theme.typography.fontSizes.small,
              marginTop: theme.spacing.xs
            }}
          >
            {locationFeedback}
          </p>
        )}
      </div>
      
      {/* Search Radius Selector */}
      <div style={{...styles.card, marginBottom: theme.spacing.sm}}>
        <label style={{color: theme.colors.text.light}}>
          Rayon de recherche : 
          <select 
            value={searchRadius}
            onChange={(e) => setSearchRadius(Number(e.target.value))}
            style={styles.input}
          >
            <option value={20}>20 km</option>
            <option value={50}>50 km</option>
            <option value={100}>100 km</option>
            <option value={200}>200 km</option>
          </select>
        </label>
      </div>

{/* Google Maps Container */}
      {locationCoords && (
        <div 
          ref={mapRef} 
          style={{
            ...styles.card, 
            height: '300px', 
            padding: 0, 
            overflow: 'hidden'
          }}
        />
      )}

{/* Veterinary List */}
      {nearestVets.length > 0 ? (
        nearestVets.map((vet, index) => (
          <div key={index} style={styles.card}>
            <h3 style={{color: theme.colors.text.light}}>{vet.name}</h3>
            <p style={{color: theme.colors.text.muted}}>📞 {vet.phone}</p>
            <p style={{color: theme.colors.text.muted}}>📍 {vet.address}</p>
            {locationCoords && (
              <p style={{color: theme.colors.text.muted}}>
                🚗 Distance: {calculateDistance(
                  locationCoords.lat, 
                  locationCoords.lng, 
                  vet.coordinates.lat, 
                  vet.coordinates.lng
                ).toFixed(1)} km
              </p>
            )}
            <div style={{display: 'flex', justifyContent: 'space-between'}}>
              <button 
                style={{...styles.button, width: '48%', backgroundColor: theme.colors.accent.green}}
                onClick={() => window.open(`tel:${vet.phone}`)}
              >
                Appeler
              </button>
              <button 
                style={{...styles.button, width: '48%', backgroundColor: theme.colors.accent.blue}}
                onClick={() => {
                  const mapsUrl = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(vet.address + ', Algérie')}`;
                  window.open(mapsUrl, '_blank');
                }}
              >
                Localisation
              </button>
            </div>
          </div>
        ))
      ) : (
        <div style={styles.card}>
          <p style={{color: theme.colors.text.muted}}>
            Aucun vétérinaire trouvé dans le rayon sélectionné.
            Essayez d'élargir votre recherche ou de vérifier l'orthographe.
          </p>
        </div>
      )}
    </div>
  );
}

// Main App Component
function App() {
  const [view, setView] = useState('report');

return (
    <div 
      style={{ 
        fontFamily: theme.typography.fontFamily, 
        backgroundColor: theme.colors.background,
        minHeight: '100vh',
        backgroundImage: 'linear-gradient(to bottom, rgba(13,19,33,0.8), rgba(13,19,33,1))'
      }}
    >
      <div style={styles.navigationBar}>
        <button 
          onClick={() => setView('report')}
          style={{
            ...styles.button, 
            margin: `0 ${theme.spacing.xs}`,
            backgroundColor: view === 'report' ? theme.colors.accent.blue : theme.colors.secondary
          }}
        >
          🐱 Signaler
        </button>
        <button 
          onClick={() => setView('contacts')}
          style={{
            ...styles.button, 
            margin: `0 ${theme.spacing.xs}`,
            backgroundColor: view === 'contacts' ? theme.colors.accent.blue : theme.colors.secondary
          }}
        >
          🏥 Urgences
        </button>
      </div>

{view === 'report' ? (
        <CatReportForm />
      ) : (
        <VeterinaryContacts />
      )}
    </div>
  );
}

// Rendering Function
function renderApp() {
  const rootElement = document.getElementById("root");
  if (!rootElement) return;

try {
    const root = ReactDOM.createRoot(rootElement);
    root.render(
      <ErrorBoundary>
        <StrictMode>
          <App />
        </StrictMode>
      </ErrorBoundary>
    );
  } catch (error) {
    console.error("Rendering error:", error);
    rootElement.innerHTML = `
      <div style="color: red; text-align: center; padding: 20px;">
        <h1>Loading Error</h1>
        <p>${error.message}</p>
      </div>
    `;
  }
}

// Run client-side rendering
if (typeof document !== 'undefined') {
  document.readyState === 'loading'
    ? document.addEventListener('DOMContentLoaded', renderApp)
    : renderApp();
}

// Server Response Handler
export default async function server(request: Request): Promise<Response> {
  return new Response(`
    <!DOCTYPE html>
    <html lang="fr">
      <head>
        <title>Réseau de Sauvetage des Chats - Algérie</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="theme-color" content="#0D1321">
        
        <style>
          body, html {
            margin: 0;
            padding: 0;
            font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
            height: 100%;
            background-color: #0D1321;
            color: #FFFFFF;
            overflow-x: hidden;
            touch-action: manipulation;
          }
          #root {
            width: 100%;
            min-height: 100vh;
            overscroll-behavior-y: contain;
            background: linear-gradient(to bottom, rgba(13,19,33,0.8), rgba(13,19,33,1));
          }
          * {
            -webkit-tap-highlight-color: transparent;
          }
        </style>
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module">
          import React from 'https://esm.sh/react';
          import ReactDOM from 'https://esm.sh/react-dom';
          window.React = React;
          window.ReactDOM = ReactDOM;
        </script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `, {
    headers: { 
      'Content-Type': 'text/html',
      'Cache-Control': 'no-cache, no-store, must-revalidate'
    }
  });
}</article></body></html>

thrillingAmaranthKiwi

Version 49