diff --git a/src/App.tsx b/src/App.tsx index 62a9ac8..a2d385b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,20 +1,17 @@ import './App.css' -import OpenLayerMap from './components/OpenLayerMap'; -import OpenLayerEsri from './components/OpenLayerEsri'; -import LegiScanAPI from './components/LegiScanAPI'; import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; - +import OpenLayerMap from './components/UI/Map/OpenLayerMap'; +import ArchitecturalShowcase from './components/UI/Homepage/showcase'; function App() { return ( - } /> + } /> } /> - } /> - } /> + ); diff --git a/src/assets/react.svg b/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/OpenLayerMap.tsx b/src/components/OpenLayerMap.tsx deleted file mode 100644 index 94eea53..0000000 --- a/src/components/OpenLayerMap.tsx +++ /dev/null @@ -1,272 +0,0 @@ -import { useEffect, useRef, useState } from 'react'; -import { Map, View } from 'ol'; -import 'ol/ol.css'; -import TileLayer from 'ol/layer/Tile'; -import { OSM } from 'ol/source'; -import { fromLonLat } from 'ol/proj'; -import { Coordinate } from 'ol/coordinate'; -import VectorLayer from 'ol/layer/Vector'; -import { layerConfigs } from './Methods/Layers'; -import { loadAndRenderGeoJsonLayer } from './Methods/GeoJson_Load' -import { addMarker } from './Methods/Marker'; - -const OpenLayersMap = () => { - const [term, setTerm] = useState(''); - const [address, setAddress] = useState(); - const [layerVisibility, setLayerVisibility] = useState>({}); - const [searchCompleted, setSearchCompleted] = useState(false); - - // Submit Button Logic - const submitForm = async (event: React.FormEvent) => { - // Preventing the page from reloading - event.preventDefault(); - const response = await fetch(`https://nominatim.openstreetmap.org/search?q=${term}&format=json&polygon=1&addressdetails=1`); - const json = await response.json(); - console.log(json); - setAddress(json); - console.log(address); - setSearchCompleted(true); - - // Initialize all layers as visible - const initialVisibility = Object.fromEntries( - layerConfigs.map(layer => [layer.topic, true]) - ); - setLayerVisibility(initialVisibility); - - alert(term); - } - - const mapDivRef = useRef(null); - const [clickedCoordinate, setClickedCoordinate] = useState(); - const mapRef = useRef(null); - const markerLayerRef = useRef(null); - const layerRefs = useRef>>( - Object.fromEntries( - layerConfigs.map((layer) => [layer.topic, { current: null }]) - ) - ); - - // Toggle layer visibility - const toggleLayer = (layerTopic: string) => { - const layerRef = layerRefs.current[layerTopic]; - const isCurrentlyVisible = layerVisibility[layerTopic]; - - if (layerRef.current) { - layerRef.current.setVisible(!isCurrentlyVisible); - } - - setLayerVisibility(prev => ({ - ...prev, - [layerTopic]: !isCurrentlyVisible - })); - }; - - // Format layer name for display - const formatLayerName = (topic: string) => { - return topic.replace(/_/g, ' ').replace(/SD$/, '').trim(); - }; - - useEffect(() => { - if (!mapRef.current) { - const map = new Map({ - target: mapDivRef.current as HTMLDivElement, - layers: [new TileLayer({ source: new OSM() })], - }); - mapRef.current = map; - map.on('click', (e) => { - setClickedCoordinate(e.coordinate); - }); - } - - if (address && address.length > 0) { - const lat = parseFloat(address[0].lat); - const lon = parseFloat(address[0].lon); - const coords = fromLonLat([lon, lat]); - mapRef.current!.setView(new View({ - center: coords, - zoom: 15, - })); - - markerLayerRef.current = addMarker(coords, mapRef.current!, markerLayerRef.current); - - layerConfigs.forEach((layerConfig) => { - const url = layerConfig.getUrl(lon, lat, layerConfig.radius); - const ref = layerRefs.current[layerConfig.topic]; - loadAndRenderGeoJsonLayer( - url, - mapRef.current!, - ref, - layerConfig.style - ); - }); - } - }, [address]); - - // UI - return ( -
- {/* Sidebar */} -
-

- Map Layers -

- - {/* Search Form */} -
- setTerm(e.target.value)} - type="text" - placeholder="Enter address to search" - style={{ - width: '100%', - padding: '10px', - border: '1px solid #ddd', - borderRadius: '4px', - marginBottom: '10px', - fontSize: '14px' - }} - /> - -
- - {/* Layer Toggle List */} -
-

- Available Layers ({layerConfigs.length}) -

- - {layerConfigs.map((layer) => ( -
- - {formatLayerName(layer.topic)} - - - {searchCompleted && ( - - )} - - {!searchCompleted && ( - - Search first - - )} -
- ))} -
- - -
- - {/* Map Container */} -
-
- - {clickedCoordinate && ( -
- Coordinates: {clickedCoordinate[0].toFixed(2)} / {clickedCoordinate[1].toFixed(2)} -
- )} -
-
- ); -}; - -export default OpenLayersMap; \ No newline at end of file diff --git a/src/components/UI/Dock.css b/src/components/UI/Dock.css deleted file mode 100644 index d2c3bd7..0000000 --- a/src/components/UI/Dock.css +++ /dev/null @@ -1,56 +0,0 @@ -.dock-outer { - margin: 0 0.5rem; - display: flex; - max-width: 100%; - align-items: center; -} - -.dock-panel { - position: absolute; - bottom: 0.5rem; - left: 50%; - transform: translateX(-50%); - display: flex; - align-items: flex-end; - width: fit-content; - gap: 1rem; - border-radius: 1rem; - background-color: #060010; - border: 1px solid #222; - padding: 0 0.5rem 0.5rem; -} - -.dock-item { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 10px; - background-color: #060010; - border: 1px solid #222; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), - 0 2px 4px -1px rgba(0, 0, 0, 0.06); - cursor: pointer; - outline: none; -} - -.dock-icon { - display: flex; - align-items: center; - justify-content: center; -} - -.dock-label { - position: absolute; - top: -1.5rem; - left: 50%; - width: fit-content; - white-space: pre; - border-radius: 0.375rem; - border: 1px solid #222; - background-color: #060010; - padding: 0.125rem 0.5rem; - font-size: 0.75rem; - color: #fff; - transform: translateX(-50%); -} \ No newline at end of file diff --git a/src/components/UI/Dock.tsx b/src/components/UI/Dock.tsx deleted file mode 100644 index a16e807..0000000 --- a/src/components/UI/Dock.tsx +++ /dev/null @@ -1,205 +0,0 @@ -"use client"; -import "./Dock.css"; - -import { - motion, - MotionValue, - useMotionValue, - useSpring, - useTransform, - type SpringOptions, - AnimatePresence, -} from "framer-motion"; -import React, { - Children, - cloneElement, - useEffect, - useMemo, - useRef, - useState, -} from "react"; - - -export type DockItemData = { - icon: React.ReactNode; - label: React.ReactNode; - onClick: () => void; - className?: string; -}; - -export type DockProps = { - items: DockItemData[]; - className?: string; - distance?: number; - panelHeight?: number; - baseItemSize?: number; - dockHeight?: number; - magnification?: number; - spring?: SpringOptions; -}; - -type DockItemProps = { - className?: string; - children: React.ReactNode; - onClick?: () => void; - mouseX: MotionValue; - spring: SpringOptions; - distance: number; - baseItemSize: number; - magnification: number; -}; - -function DockItem({ - children, - className = "", - onClick, - mouseX, - spring, - distance, - magnification, - baseItemSize, -}: DockItemProps) { - const ref = useRef(null); - const isHovered = useMotionValue(0); - - const mouseDistance = useTransform(mouseX, (val) => { - const rect = ref.current?.getBoundingClientRect() ?? { - x: 0, - width: baseItemSize, - }; - return val - rect.x - baseItemSize / 2; - }); - - const targetSize = useTransform( - mouseDistance, - [-distance, 0, distance], - [baseItemSize, magnification, baseItemSize] - ); - const size = useSpring(targetSize, spring); - - return ( - isHovered.set(1)} - onHoverEnd={() => isHovered.set(0)} - onFocus={() => isHovered.set(1)} - onBlur={() => isHovered.set(0)} - onClick={onClick} - className={`dock-item ${className}`} - tabIndex={0} - role="button" - aria-haspopup="true" - > - {Children.map(children, (child) => - cloneElement(child as React.ReactElement, { }) - )} - - ); -} - -type DockLabelProps = { - className?: string; - children: React.ReactNode; -}; - -function DockLabel({ children, className = "", ...rest }: DockLabelProps) { - const { isHovered } = rest as { isHovered: MotionValue }; - const [isVisible, setIsVisible] = useState(false); - - useEffect(() => { - const unsubscribe = isHovered.on("change", (latest) => { - setIsVisible(latest === 1); - }); - return () => unsubscribe(); - }, [isHovered]); - - return ( - - {isVisible && ( - - {children} - - )} - - ); -} - -type DockIconProps = { - className?: string; - children: React.ReactNode; -}; - -function DockIcon({ children, className = "" }: DockIconProps) { - return
{children}
; -} - -export default function Dock({ - items, - className = "", - spring = { mass: 0.1, stiffness: 150, damping: 12 }, - magnification = 70, - distance = 200, - panelHeight = 68, - dockHeight = 256, - baseItemSize = 50, -}: DockProps) { - const mouseX = useMotionValue(Infinity); - const isHovered = useMotionValue(0); - - const maxHeight = useMemo( - () => Math.max(dockHeight, magnification + magnification / 2 + 4), - [magnification, dockHeight] - ); - const heightRow = useTransform(isHovered, [0, 1], [panelHeight, maxHeight]); - const height = useSpring(heightRow, spring); - - return ( - - { - isHovered.set(1); - mouseX.set(pageX); - }} - onMouseLeave={() => { - isHovered.set(0); - mouseX.set(Infinity); - }} - className={`dock-panel ${className}`} - style={{ height: panelHeight }} - role="toolbar" - aria-label="Application dock" - > - {items.map((item, index) => ( - - {item.icon} - {item.label} - - ))} - - - ); -} diff --git a/src/components/UI/Homepage/showcase.tsx b/src/components/UI/Homepage/showcase.tsx new file mode 100644 index 0000000..3d47435 --- /dev/null +++ b/src/components/UI/Homepage/showcase.tsx @@ -0,0 +1,613 @@ +import React, { useEffect, useState } from 'react'; + +const ArchitecturalShowcase: React.FC = () => { + const [isLoaded, setIsLoaded] = useState(false); + const [heroVisible, setHeroVisible] = useState(false); + const [imageVisible, setImageVisible] = useState(false); + const [purposeVisible, setPurposeVisible] = useState(false); + const [servicesVisible, setServicesVisible] = useState(false); + + useEffect(() => { + document.body.style.margin = '0'; + document.body.style.padding = '0'; + document.body.style.overflow = 'hidden'; + + const timer1 = setTimeout(() => setIsLoaded(true), 200); + const timer2 = setTimeout(() => setHeroVisible(true), 600); + const timer3 = setTimeout(() => setImageVisible(true), 1200); + const timer4 = setTimeout(() => setPurposeVisible(true), 1800); + const timer5 = setTimeout(() => setServicesVisible(true), 2400); + const timer6 = setTimeout(() => { + document.body.style.overflow = 'auto'; + }, 2600); + + return () => { + clearTimeout(timer1); + clearTimeout(timer2); + clearTimeout(timer3); + clearTimeout(timer4); + clearTimeout(timer5); + clearTimeout(timer6); + }; + }, []); + + const globalStyles = ` + html, body, #root { + margin: 0; + padding: 0; + max-width: 100vw; + width: 100%; + height: 100%; + min-height: 100vh; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + overflow-x: hidden; + } + + * { + box-sizing: border-box; + } + + /* Responsive CSS */ + + @media (max-width: 768px) { + /* Services grid single column */ + .services-grid { + grid-template-columns: 1fr !important; + gap: 2rem !important; + } + + /* Hide nav links (you can replace with hamburger menu) */ + .nav-links { + display: none !important; + } + + /* Hero Section Padding */ + .hero-content { + padding: 0 1rem; + } + + /* Hero Title */ + .hero-title { + font-size: 2.5rem !important; + line-height: 1.1 !important; + } + + /* Hero Subtitle */ + .hero-subtitle { + font-size: 1rem !important; + } + + /* CTA Button full width and centered content */ + .cta-btn { + width: 100% !important; + justify-content: center !important; + } + + /* Image container adjustments */ + .image-container { + padding: 0 1rem !important; + max-width: 100% !important; + } + } + `; + + const styles = { + showcase: { + fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", + height: '100vh', + backgroundColor: '#fafafa', + margin: 0, + padding: 0, + opacity: isLoaded ? 1 : 0, + transform: isLoaded ? 'translateY(0) scale(1)' : 'translateY(50px) scale(0.95)', + transition: 'all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)', + }, + header: { + position: 'fixed' as const, + top: 0, + left: 0, + right: 0, + zIndex: 1000, + backgroundColor: 'rgba(255, 255, 255, 0.95)', + backdropFilter: 'blur(20px)', + borderBottom: '1px solid rgba(0, 0, 0, 0.08)', + transform: isLoaded ? 'translateY(0)' : 'translateY(-100px)', + transition: 'all 0.8s cubic-bezier(0.34, 1.26, 0.64, 1)', + transitionDelay: '0.3s', + }, + nav: { + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + padding: '1rem 2rem', + maxWidth: '1400px', + margin: '0 auto', + }, + logo: { + display: 'flex', + alignItems: 'center', + gap: '0.5rem', + fontSize: '1.5rem', + fontWeight: 600, + color: '#1a1a1a', + opacity: isLoaded ? 1 : 0, + transform: isLoaded ? 'translateX(0) rotate(0deg)' : 'translateX(-30px) rotate(-10deg)', + transition: 'all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55)', + transitionDelay: '0.5s', + }, + logoIcon: { + fontSize: '1.2rem', + animation: isLoaded ? 'pulse 2s infinite' : 'none', + }, + navLinks: { + display: 'flex', + listStyle: 'none', + margin: 0, + padding: 0, + gap: '2rem', + }, + navLink: { + color: '#4a4a4a', + textDecoration: 'none', + fontSize: '0.95rem', + fontWeight: 400, + transition: 'all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)', + cursor: 'pointer', + opacity: isLoaded ? 1 : 0, + transform: isLoaded ? 'translateY(0)' : 'translateY(-20px)', + transitionDelay: '0.7s', + }, + hero: { + display: 'flex', + flexDirection: 'column' as const, + alignItems: 'center', + justifyContent: 'center', + minHeight: '100vh', + textAlign: 'center' as const, + padding: '0 2rem', + paddingTop: '80px', + opacity: heroVisible ? 1 : 0, + transform: heroVisible ? 'translateY(0)' : 'translateY(60px)', + transition: 'all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)', + }, + heroContent: { + maxWidth: '900px', + margin: '0 auto', + }, + heroTitle: { + fontSize: 'clamp(2.5rem, 5vw, 4.5rem)', + fontWeight: 300, + lineHeight: 1.2, + color: '#1a1a1a', + margin: '0 0 1.5rem 0', + letterSpacing: '-0.02em', + }, + heroSubtitle: { + fontSize: 'clamp(1.1rem, 2vw, 1.4rem)', + color: '#6a6a6a', + lineHeight: 1.6, + margin: '0 0 3rem 0', + fontWeight: 400, + maxWidth: '700px', + }, + ctaBtn: { + display: 'inline-flex', + alignItems: 'center', + gap: '0.75rem', + backgroundColor: '#1a1a1a', + color: 'white', + border: 'none', + padding: '1.2rem 2.5rem', + borderRadius: '50px', + fontSize: '1rem', + fontWeight: 500, + cursor: 'pointer', + transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)', + fontFamily: 'inherit', + boxShadow: '0 4px 20px rgba(26, 26, 26, 0.15)', + }, + ctaArrow: { + fontSize: '1.2rem', + transition: 'transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)', + }, + imageSection: { + padding: '5rem 2rem', + backgroundColor: '#ffffff', + opacity: imageVisible ? 1 : 0, + transform: imageVisible ? 'translateY(0)' : 'translateY(80px)', + transition: 'all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)', + }, + imageContainer: { + maxWidth: '1200px', + margin: '0 auto', + borderRadius: '20px', + overflow: 'hidden', + boxShadow: '0 20px 60px rgba(0, 0, 0, 0.1)', + transform: imageVisible ? 'scale(1) rotateX(0deg)' : 'scale(0.9) rotateX(10deg)', + transition: 'all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94)', + transitionDelay: '0.2s', + }, + heroImage: { + width: '100%', + height: 'auto', + display: 'block', + transition: 'transform 0.6s ease', + }, + purpose: { + padding: '6rem 2rem', + backgroundColor: '#fafafa', + opacity: purposeVisible ? 1 : 0, + transform: purposeVisible ? 'translateY(0)' : 'translateY(60px)', + transition: 'all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94)', + textAlign: 'center' as const, + }, + purposeContent: { + maxWidth: '1000px', + margin: '0 auto', + }, + purposeTitle: { + fontSize: 'clamp(2rem, 4vw, 3rem)', + fontWeight: 300, + color: '#1a1a1a', + margin: '0 0 2rem 0', + letterSpacing: '-0.01em', + }, + purposeDescription: { + fontSize: '1.2rem', + color: '#6a6a6a', + lineHeight: 1.7, + margin: '0', + maxWidth: '800px', + }, + servicesSection: { + padding: '8rem 2rem', + backgroundColor: '#ffffff', + position: 'relative' as const, + minHeight: '100vh', + display: 'flex', + alignItems: 'center', + opacity: servicesVisible ? 1 : 0, + transform: servicesVisible ? 'translateY(0)' : 'translateY(80px)', + transition: 'all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)', + }, + servicesContainer: { + maxWidth: '1400px', + margin: '0 auto', + width: '100%', + }, + servicesHeader: { + textAlign: 'center' as const, + marginBottom: '5rem', + position: 'relative' as const, + }, + servicesTitle: { + fontSize: 'clamp(2.5rem, 5vw, 4rem)', + fontWeight: 300, + color: '#1a1a1a', + lineHeight: 1.2, + margin: '0 0 1.5rem 0', + letterSpacing: '-0.02em', + }, + servicesSubtitle: { + fontSize: '1.2rem', + color: '#6a6a6a', + lineHeight: 1.6, + maxWidth: '600px', + margin: '0 auto', + }, + servicesGrid: { + display: 'grid', + gridTemplateColumns: 'repeat(auto-fit, minmax(350px, 1fr))', + gap: '3rem', + marginTop: '3rem', + }, + serviceCard: { + backgroundColor: 'transparent', + padding: '2.5rem 2rem', + borderRadius: '20px', + position: 'relative' as const, + transition: 'all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)', + border: '1px solid rgba(0, 0, 0, 0.08)', + height: '100%', + display: 'flex', + flexDirection: 'column' as const, + }, + serviceIcon: { + fontSize: '3rem', + marginBottom: '1.5rem', + color: '#1a1a1a', + }, + serviceTitle: { + fontSize: 'clamp(1.5rem, 2.5vw, 1.8rem)', + fontWeight: 500, + color: '#1a1a1a', + lineHeight: 1.3, + margin: '0 0 1.5rem 0', + letterSpacing: '-0.01em', + }, + serviceDescription: { + fontSize: '1rem', + color: '#6a6a6a', + lineHeight: 1.6, + margin: '0', + flex: 1, + }, + footer: { + padding: '4rem 2rem 2rem', + backgroundColor: '#1a1a1a', + color: '#ffffff', + textAlign: 'center' as const, + }, + footerContent: { + maxWidth: '1200px', + margin: '0 auto', + }, + footerText: { + fontSize: '0.9rem', + color: '#9a9a9a', + margin: 0, + }, + }; + + // Event Handlers for hovers omitted for brevity — keep them from your original code + + const handleNavLinkHover = (e: React.MouseEvent) => { + e.currentTarget.style.color = '#1a1a1a'; + }; + + const handleNavLinkLeave = (e: React.MouseEvent) => { + e.currentTarget.style.color = '#4a4a4a'; + }; + + const handleCtaBtnHover = (e: React.MouseEvent) => { + e.currentTarget.style.backgroundColor = '#333333'; + e.currentTarget.style.transform = 'translateY(-3px)'; + e.currentTarget.style.boxShadow = '0 8px 30px rgba(26, 26, 26, 0.25)'; + const arrow = e.currentTarget.querySelector('.cta-arrow') as HTMLElement; + if (arrow) arrow.style.transform = 'translateX(5px)'; + }; + + const handleCtaBtnLeave = (e: React.MouseEvent) => { + e.currentTarget.style.backgroundColor = '#1a1a1a'; + e.currentTarget.style.transform = 'translateY(0)'; + e.currentTarget.style.boxShadow = '0 4px 20px rgba(26, 26, 26, 0.15)'; + const arrow = e.currentTarget.querySelector('.cta-arrow') as HTMLElement; + if (arrow) arrow.style.transform = 'translateX(0)'; + }; + + const handleImageHover = (e: React.MouseEvent) => { + e.currentTarget.style.transform = 'scale(1.05)'; + }; + + const handleImageLeave = (e: React.MouseEvent) => { + e.currentTarget.style.transform = 'scale(1)'; + }; + + const handleServiceCardHover = (e: React.MouseEvent) => { + e.currentTarget.style.transform = 'translateY(-8px)'; + e.currentTarget.style.boxShadow = '0 20px 40px rgba(0, 0, 0, 0.1)'; + e.currentTarget.style.backgroundColor = '#fafafa'; + }; + + const handleServiceCardLeave = (e: React.MouseEvent) => { + e.currentTarget.style.transform = 'translateY(0)'; + e.currentTarget.style.boxShadow = 'none'; + e.currentTarget.style.backgroundColor = 'transparent'; + }; + + return ( + <> + + + {/* Header */} +
+ {/* Navigation - centered with white container */} + +
+ + {/* Main Content */} +
+ {/* Floating Sidebar */} +
+ {/* Sidebar toggle button */} + + +
+
+

+ Map Controls +

+
+ + {/* Search Form */} +
+
+ setTerm(e.target.value)} + type="text" + placeholder="Search for any location..." + style={{ + width: '100%', + padding: '14px 16px', + border: '1px solid #dee2e6', + marginBottom: '12px', + fontSize: '14px', + borderRadius: '60px', + color: '#000000', + fontFamily: "'Poppins', sans-serif", + backgroundColor: 'white', + boxShadow: '0 2px 4px rgba(0,0,0,0.04)', + transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', + boxSizing: 'border-box', + outline: 'none' + }} + /> + +
+
+ + {/* Layer Toggle List */} +
+
+

+ Data Layers +

+ + {layerConfigs.length} + +
+ + {layerConfigs.map((layer, _index) => ( +
+ + {formatLayerName(layer.topic)} + + + {searchCompleted && ( + + )} + + {!searchCompleted && ( + + Search first + + )} +
+ ))} +
+
+ + {/* Map Container */} +
+
+ + {/* Coordinate Display */} + {clickedCoordinate && ( +
+ 📍 Coordinates: {clickedCoordinate[0].toFixed(4)}, {clickedCoordinate[1].toFixed(4)} +
+ )} +
+
+
+ ); +} + +export default OpenLayersMap; diff --git a/src/components/UI/Map_page.css b/src/components/UI/Map_page.css deleted file mode 100644 index ac68790..0000000 --- a/src/components/UI/Map_page.css +++ /dev/null @@ -1,84 +0,0 @@ -/* Full height setup */ -html, body, #root { - margin: 0; - padding: 0; - height: 100%; - width: 100%; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; - background-color: #f0f2f5; -} - -/* Page container with space for navbar and sidebar */ -.container { - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; - height: 100vh; - padding-top: 80px; /* Reserve space for a top bar */ - padding-left: 240px; /* Reserve space for a sidebar if needed */ - box-sizing: border-box; -} - -/* Card-like map container */ -.map-container { - width: 700px; - height: 700px; - background-color: white; - border-radius: 20px; - box-shadow: 0 10px 20px rgba(0,0,0,0.05); - border: 1px solid #e0e0e0; - overflow: hidden; - position: relative; -} - -/* The actual OpenLayers map inside the container */ -.map { - width: 700px; - height: 700px; - -} -.submit { - background: linear-gradient(135deg, #007AFF, #0051D5); /* iOS blue gradient */ - color: white; - padding: 12px 28px; - border: none; - border-radius: 12px; - font-size: 16px; - font-weight: 500; - cursor: pointer; - box-shadow: 0 6px 12px rgba(0, 122, 255, 0.3); - transition: all 0.2s ease-in-out; - outline: none; -} - -.submit:hover { - background: linear-gradient(135deg, #005AE0, #0042B1); - transform: translateY(-2px); - box-shadow: 0 10px 18px rgba(0, 122, 255, 0.4); -} - -.submit:active { - transform: translateY(1px); - box-shadow: 0 4px 10px rgba(0, 122, 255, 0.2); -} - -.input-field { - width: 80%; - padding: 12px 16px; - font-size: 16px; - border: 1px solid #d1d1d6; - border-radius: 12px; - outline: none; - margin-bottom: 20px; - background-color: #f9f9f9; - color: #333; - transition: border 0.2s, box-shadow 0.2s; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); -} - -.input-field:focus { - border-color: #007AFF; - box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2); - background-color: #fff; -} diff --git a/src/components/UI/Map_page.tsx b/src/components/UI/Map_page.tsx deleted file mode 100644 index 6741dd3..0000000 --- a/src/components/UI/Map_page.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { useEffect, useRef } from 'react'; -import { Map, View } from 'ol'; -import TileLayer from 'ol/layer/Tile'; -import { OSM } from 'ol/source'; -import { fromLonLat } from 'ol/proj'; -import './Map_page.css'; -import Dock from './Dock'; -// ✅ Make sure these are imported from 'react-icons/vsc' -import { VscHome, VscArchive, VscAccount, VscSettingsGear } from 'react-icons/vsc'; - -const Map_page = () => { - const mapRef = useRef(null); - const mapDivRef = useRef(null); - - useEffect(() => { - if (!mapRef.current) { - const map = new Map({ - target: mapDivRef.current as HTMLDivElement, - layers: [new TileLayer({ source: new OSM() })], - view: new View({ - center: fromLonLat([-117.1611, 32.7157]), // Default to San Diego - zoom: 10, - }), - }); - mapRef.current = map; - } - }, []); - - const items = [ - { icon: , label: 'Home', onClick: () => alert('Home!') }, - { icon: , label: 'Archive', onClick: () => alert('Archive!') }, - { icon: , label: 'Profile', onClick: () => alert('Profile!') }, - { icon: , label: 'Settings', onClick: () => alert('Settings!') }, - ]; - - return ( - <> -
-
-
-
- -
- - -
- - -
- - ); -}; - -export default Map_page;